handle stake submit

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
 }
 
 """

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<PoolProps> = ({ pool, cakeBalance }) => {
+export const Pool: FC<PoolProps> = ({ pool, balance, currencyId }) => {
   const {
     provider,
     pancake: { router },
@@ -92,7 +93,8 @@ export const Pool: FC<PoolProps> = ({ pool, cakeBalance }) => {
         </div>
         <StakeOrderModal
           poolName={pool.earningToken.symbol}
-          cakeBalance={cakeBalance}
+          balance={balance}
+          currencyId={currencyId}
         />
       </div>
     </div>

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 =
+  const cakeBalance = balances.edges.find(
-    balances.edges.find((edge) => edge.node.currency.name === "CAKE")?.node
+    (edge) => edge.node.currency.name === "CAKE"
-      .amount ?? "0";
+  )?.node;
+
+  const balance = cakeBalance?.amount ?? "0";
+  const currencyId = cakeBalance?.currency.id ?? "????";
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-items-center w-full gap-8 py-4 -mt-16 overflow-x-hidden">
@@ -35,7 +39,12 @@ export const PoolListing = () => {
         .filter((pool) => !pool.isFinished)
         .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
         .map((pool) => (
-          <Pool key={pool.sousId} pool={pool} cakeBalance={cakeBalance} />
+          <Pool
+            key={pool.sousId}
+            pool={pool}
+            balance={balance}
+            currencyId={currencyId}
+          />
         ))}
     </div>
   );

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<Props> = ({ poolName, cakeBalance }) => {
+export const StakeOrderModal: FC<Props> = ({
+  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<Props> = ({ poolName, cakeBalance }) => {
     }
   };
 
+  const handleMaxButton = () => {
+    setInvestAmountInput(balance);
+  };
+
   const stakeAvaliable =
     avaliableCake.isGreaterThan(0) &&
     avaliableCake.isLessThanOrEqualTo(investAmount);
@@ -57,7 +75,7 @@ export const StakeOrderModal: FC<Props> = ({ poolName, cakeBalance }) => {
         setIsOpen={setIsOpen}
         title={`Invista em ${poolName}`}
       >
-        <span className="mb-2">CAKE disponível: {cakeBalance}</span>
+        <span className="mb-2">CAKE disponível: {balance}</span>
         <form onSubmit={onSubmit} className="bg-white py-2">
           <div className="flex flex-row">
             <input
@@ -68,9 +86,9 @@ export const StakeOrderModal: FC<Props> = ({ poolName, cakeBalance }) => {
             />
             <button
               type="button"
-              disabled={investAmountInput === cakeBalance}
+              disabled={investAmountInput === balance}
               className="flex items-center mb-3 ml-3 font-bold rounded-full text-red-500"
-              onClick={() => {}}
+              onClick={handleMaxButton}
             >
               Max
             </button>

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;

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) => {},
+  });
+};

app/javascript/src/pages/Home/StakeOrderModal/index.ts

@@ -0,0 +1 @@
+export * from "./StakeOrderModal";

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,
+  "concreteType": "Currency",
+  "kind": "LinkedField",
+  "name": "currency",
+  "plural": false,
+  "selections": [
+    (v0/*: any*/),
+    {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
-  "name": "amount",
+      "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": [
-                  {
+                  (v1/*: any*/),
-                    "alias": null,
+                  (v2/*: any*/)
-                    "args": null,
-                    "concreteType": "Currency",
-                    "kind": "LinkedField",
-                    "name": "currency",
-                    "plural": false,
-                    "selections": [
-                      (v0/*: any*/)
-                    ],
-                    "storageKey": null
-                  },
-                  (v1/*: 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;