From 35fcdeb0f8dc070d3f23b119bd58c5545867de8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= Date: Tue, 17 Aug 2021 20:27:03 -0300 Subject: [PATCH] handle stake submit --- app/javascript/__generated__/schema.graphql | 42 +++++ app/javascript/src/pages/Home/Pool.tsx | 8 +- app/javascript/src/pages/Home/PoolListing.tsx | 17 +- .../{ => StakeOrderModal}/StakeOrderModal.tsx | 34 +++- .../createStakeOrderMutation.graphql.ts | 150 ++++++++++++++++++ .../Home/StakeOrderModal/createStakeOrder.tsx | 39 +++++ .../src/pages/Home/StakeOrderModal/index.ts | 1 + .../__generated__/PoolListingQuery.graphql.ts | 60 +++---- 8 files changed, 301 insertions(+), 50 deletions(-) rename app/javascript/src/pages/Home/{ => StakeOrderModal}/StakeOrderModal.tsx (78%) create mode 100644 app/javascript/src/pages/Home/StakeOrderModal/__generated__/createStakeOrderMutation.graphql.ts create mode 100644 app/javascript/src/pages/Home/StakeOrderModal/createStakeOrder.tsx create mode 100644 app/javascript/src/pages/Home/StakeOrderModal/index.ts diff --git a/app/javascript/__generated__/schema.graphql b/app/javascript/__generated__/schema.graphql index da3eee3..a627303 100644 --- a/app/javascript/__generated__/schema.graphql +++ b/app/javascript/__generated__/schema.graphql @@ -144,6 +144,42 @@ type CreateSellCryptoOrderPayload { order: SellCryptoOrder } +input CreateStakeOrderAttributesInput { + """ + Amount to be paid + """ + amount: String! + currencyId: ID! + poolName: String! +} + +""" +Autogenerated input type of CreateStakeOrder +""" +input CreateStakeOrderInput { + """ + A unique identifier for the client performing the mutation. + """ + clientMutationId: String + order: CreateStakeOrderAttributesInput! +} + +""" +Autogenerated return type of CreateStakeOrder +""" +type CreateStakeOrderPayload { + """ + A unique identifier for the client performing the mutation. + """ + clientMutationId: String + + """ + Errors encountered during execution of the mutation. + """ + errors: [RecordInvalid!] + order: StakeOrder +} + type Currency implements Node { id: ID! name: String! @@ -203,6 +239,12 @@ type Mutation { """ input: CreateSellCryptoOrderInput! ): CreateSellCryptoOrderPayload + createStakeOrder( + """ + Parameters for CreateStakeOrder + """ + input: CreateStakeOrderInput! + ): CreateStakeOrderPayload } """ diff --git a/app/javascript/src/pages/Home/Pool.tsx b/app/javascript/src/pages/Home/Pool.tsx index 2bfdc2f..30bfc7c 100644 --- a/app/javascript/src/pages/Home/Pool.tsx +++ b/app/javascript/src/pages/Home/Pool.tsx @@ -10,10 +10,11 @@ import { StakeOrderModal } from "./StakeOrderModal"; type PoolProps = { pool: PoolConfig; - cakeBalance: string; + balance: string; + currencyId: string; }; -export const Pool: FC = ({ pool, cakeBalance }) => { +export const Pool: FC = ({ pool, balance, currencyId }) => { const { provider, pancake: { router }, @@ -92,7 +93,8 @@ export const Pool: FC = ({ pool, cakeBalance }) => { diff --git a/app/javascript/src/pages/Home/PoolListing.tsx b/app/javascript/src/pages/Home/PoolListing.tsx index f18208e..d73e204 100644 --- a/app/javascript/src/pages/Home/PoolListing.tsx +++ b/app/javascript/src/pages/Home/PoolListing.tsx @@ -14,6 +14,7 @@ export const PoolListing = () => { edges { node { currency { + id name } amount @@ -25,9 +26,12 @@ export const PoolListing = () => { {} ); - const cakeBalance = - balances.edges.find((edge) => edge.node.currency.name === "CAKE")?.node - .amount ?? "0"; + const cakeBalance = balances.edges.find( + (edge) => edge.node.currency.name === "CAKE" + )?.node; + + const balance = cakeBalance?.amount ?? "0"; + const currencyId = cakeBalance?.currency.id ?? "????"; return (
@@ -35,7 +39,12 @@ export const PoolListing = () => { .filter((pool) => !pool.isFinished) .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0)) .map((pool) => ( - + ))}
); diff --git a/app/javascript/src/pages/Home/StakeOrderModal.tsx b/app/javascript/src/pages/Home/StakeOrderModal/StakeOrderModal.tsx similarity index 78% rename from app/javascript/src/pages/Home/StakeOrderModal.tsx rename to app/javascript/src/pages/Home/StakeOrderModal/StakeOrderModal.tsx index c5785fb..4072b92 100644 --- a/app/javascript/src/pages/Home/StakeOrderModal.tsx +++ b/app/javascript/src/pages/Home/StakeOrderModal/StakeOrderModal.tsx @@ -2,29 +2,43 @@ import type { ChangeEvent, FC } from "react"; import React, { useState } from "react"; import cx from "classnames"; import { BigNumber } from "bignumber.js"; +import { useRelayEnvironment } from "react-relay"; -import { Modal } from "../../components"; +import { Modal } from "../../../components"; +import { commitCreateStakeOrderMutation } from "./createStakeOrder"; type Props = { poolName: string; - cakeBalance: string; + balance: string; + currencyId: string; }; const inputBaseStyles = "rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent mb-3"; -export const StakeOrderModal: FC = ({ poolName, cakeBalance }) => { +export const StakeOrderModal: FC = ({ + poolName, + balance, + currencyId, +}) => { + const environment = useRelayEnvironment(); const [isOpen, setIsOpen] = useState(false); const [investAmountInput, setInvestAmountInput] = useState("0"); - const avaliableCake = new BigNumber(cakeBalance); + const avaliableCake = new BigNumber(balance); const investAmount = new BigNumber(investAmountInput); const handleButtonClick = () => { setIsOpen((prevState) => !prevState); }; - const onSubmit = () => {}; + const onSubmit = () => { + commitCreateStakeOrderMutation(environment, { + currencyId, + amount: investAmountInput, + poolName, + }); + }; const handleInvestInput = ({ currentTarget: { value }, @@ -39,6 +53,10 @@ export const StakeOrderModal: FC = ({ poolName, cakeBalance }) => { } }; + const handleMaxButton = () => { + setInvestAmountInput(balance); + }; + const stakeAvaliable = avaliableCake.isGreaterThan(0) && avaliableCake.isLessThanOrEqualTo(investAmount); @@ -57,7 +75,7 @@ export const StakeOrderModal: FC = ({ poolName, cakeBalance }) => { setIsOpen={setIsOpen} title={`Invista em ${poolName}`} > - CAKE disponível: {cakeBalance} + CAKE disponível: {balance}
= ({ poolName, cakeBalance }) => { /> diff --git a/app/javascript/src/pages/Home/StakeOrderModal/__generated__/createStakeOrderMutation.graphql.ts b/app/javascript/src/pages/Home/StakeOrderModal/__generated__/createStakeOrderMutation.graphql.ts new file mode 100644 index 0000000..fbb24fe --- /dev/null +++ b/app/javascript/src/pages/Home/StakeOrderModal/__generated__/createStakeOrderMutation.graphql.ts @@ -0,0 +1,150 @@ +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { ConcreteRequest } from "relay-runtime"; +export type createStakeOrderMutationVariables = { + currencyId: string; + poolName: string; + amount: string; +}; +export type createStakeOrderMutationResponse = { + readonly createStakeOrder: { + readonly order: { + readonly id: string; + } | null; + } | null; +}; +export type createStakeOrderMutation = { + readonly response: createStakeOrderMutationResponse; + readonly variables: createStakeOrderMutationVariables; +}; + + + +/* +mutation createStakeOrderMutation( + $currencyId: ID! + $poolName: String! + $amount: String! +) { + createStakeOrder(input: {order: {currencyId: $currencyId, poolName: $poolName, amount: $amount}}) { + order { + id + } + } +} +*/ + +const node: ConcreteRequest = (function(){ +var v0 = { + "defaultValue": null, + "kind": "LocalArgument", + "name": "amount" +}, +v1 = { + "defaultValue": null, + "kind": "LocalArgument", + "name": "currencyId" +}, +v2 = { + "defaultValue": null, + "kind": "LocalArgument", + "name": "poolName" +}, +v3 = [ + { + "alias": null, + "args": [ + { + "fields": [ + { + "fields": [ + { + "kind": "Variable", + "name": "amount", + "variableName": "amount" + }, + { + "kind": "Variable", + "name": "currencyId", + "variableName": "currencyId" + }, + { + "kind": "Variable", + "name": "poolName", + "variableName": "poolName" + } + ], + "kind": "ObjectValue", + "name": "order" + } + ], + "kind": "ObjectValue", + "name": "input" + } + ], + "concreteType": "CreateStakeOrderPayload", + "kind": "LinkedField", + "name": "createStakeOrder", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "StakeOrder", + "kind": "LinkedField", + "name": "order", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "id", + "storageKey": null + } + ], + "storageKey": null + } + ], + "storageKey": null + } +]; +return { + "fragment": { + "argumentDefinitions": [ + (v0/*: any*/), + (v1/*: any*/), + (v2/*: any*/) + ], + "kind": "Fragment", + "metadata": null, + "name": "createStakeOrderMutation", + "selections": (v3/*: any*/), + "type": "Mutation", + "abstractKey": null + }, + "kind": "Request", + "operation": { + "argumentDefinitions": [ + (v1/*: any*/), + (v2/*: any*/), + (v0/*: any*/) + ], + "kind": "Operation", + "name": "createStakeOrderMutation", + "selections": (v3/*: any*/) + }, + "params": { + "cacheID": "bfe4935c593947810fbb8d7a52421483", + "id": null, + "metadata": {}, + "name": "createStakeOrderMutation", + "operationKind": "mutation", + "text": "mutation createStakeOrderMutation(\n $currencyId: ID!\n $poolName: String!\n $amount: String!\n) {\n createStakeOrder(input: {order: {currencyId: $currencyId, poolName: $poolName, amount: $amount}}) {\n order {\n id\n }\n }\n}\n" + } +}; +})(); +(node as any).hash = '036f321e28fcb4bd3e274498cd3f116a'; +export default node; diff --git a/app/javascript/src/pages/Home/StakeOrderModal/createStakeOrder.tsx b/app/javascript/src/pages/Home/StakeOrderModal/createStakeOrder.tsx new file mode 100644 index 0000000..b36227d --- /dev/null +++ b/app/javascript/src/pages/Home/StakeOrderModal/createStakeOrder.tsx @@ -0,0 +1,39 @@ +import { graphql } from "babel-plugin-relay/macro"; +import type { Environment } from "react-relay"; +import { commitMutation } from "react-relay"; + +import type { createStakeOrderMutationVariables } from "./__generated__/createStakeOrderMutation.graphql"; + +export const commitCreateStakeOrderMutation = ( + environment: Environment, + variables: createStakeOrderMutationVariables +) => { + return commitMutation(environment, { + mutation: graphql` + mutation createStakeOrderMutation( + $currencyId: ID! + $poolName: String! + $amount: String! + ) { + createStakeOrder( + input: { + order: { + currencyId: $currencyId + poolName: $poolName + amount: $amount + } + } + ) { + order { + id + } + } + } + `, + variables: { ...variables }, + onCompleted: (_response) => { + window.location.reload(); + }, + onError: (_error) => {}, + }); +}; diff --git a/app/javascript/src/pages/Home/StakeOrderModal/index.ts b/app/javascript/src/pages/Home/StakeOrderModal/index.ts new file mode 100644 index 0000000..066adce --- /dev/null +++ b/app/javascript/src/pages/Home/StakeOrderModal/index.ts @@ -0,0 +1 @@ +export * from "./StakeOrderModal"; diff --git a/app/javascript/src/pages/Home/__generated__/PoolListingQuery.graphql.ts b/app/javascript/src/pages/Home/__generated__/PoolListingQuery.graphql.ts index c359895..62aac1e 100644 --- a/app/javascript/src/pages/Home/__generated__/PoolListingQuery.graphql.ts +++ b/app/javascript/src/pages/Home/__generated__/PoolListingQuery.graphql.ts @@ -9,6 +9,7 @@ export type PoolListingQueryResponse = { readonly edges: ReadonlyArray<{ readonly node: { readonly currency: { + readonly id: string; readonly name: string; }; readonly amount: string; @@ -29,8 +30,8 @@ query PoolListingQuery { edges { node { currency { - name id + name } amount id @@ -45,21 +46,33 @@ var v0 = { "alias": null, "args": null, "kind": "ScalarField", - "name": "name", + "name": "id", "storageKey": null }, v1 = { "alias": null, "args": null, - "kind": "ScalarField", - "name": "amount", + "concreteType": "Currency", + "kind": "LinkedField", + "name": "currency", + "plural": false, + "selections": [ + (v0/*: any*/), + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "name", + "storageKey": null + } + ], "storageKey": null }, v2 = { "alias": null, "args": null, "kind": "ScalarField", - "name": "id", + "name": "amount", "storageKey": null }; return { @@ -93,19 +106,8 @@ return { "name": "node", "plural": false, "selections": [ - { - "alias": null, - "args": null, - "concreteType": "Currency", - "kind": "LinkedField", - "name": "currency", - "plural": false, - "selections": [ - (v0/*: any*/) - ], - "storageKey": null - }, - (v1/*: any*/) + (v1/*: any*/), + (v2/*: any*/) ], "storageKey": null } @@ -149,21 +151,9 @@ return { "name": "node", "plural": false, "selections": [ - { - "alias": null, - "args": null, - "concreteType": "Currency", - "kind": "LinkedField", - "name": "currency", - "plural": false, - "selections": [ - (v0/*: any*/), - (v2/*: any*/) - ], - "storageKey": null - }, (v1/*: any*/), - (v2/*: any*/) + (v2/*: any*/), + (v0/*: any*/) ], "storageKey": null } @@ -176,14 +166,14 @@ return { ] }, "params": { - "cacheID": "6abf5e963429e49993af50df156f8e1c", + "cacheID": "06c9467183eb0e89329ec630a8cc4880", "id": null, "metadata": {}, "name": "PoolListingQuery", "operationKind": "query", - "text": "query PoolListingQuery {\n balances {\n edges {\n node {\n currency {\n name\n id\n }\n amount\n id\n }\n }\n }\n}\n" + "text": "query PoolListingQuery {\n balances {\n edges {\n node {\n currency {\n id\n name\n }\n amount\n id\n }\n }\n }\n}\n" } }; })(); -(node as any).hash = '4fefb238e24b79198799686599255e6c'; +(node as any).hash = '570efc1d3b5dac09303b8692d6830bb2'; export default node;