Improved loading behavior on Stake Page

pedrosimao · Feb 17, 2022 · d5639ec · d5639ec
1 parent 7112836
commit d5639ec
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 42 deletions.
diff --git a/src/near/config.ts b/src/near/config.ts
@@ -1,5 +1,5 @@
 export const CONTRACT_NAME =
-  process.env.CONTRACT_NAME || 'dev-1644873487217-61450440829727'
+  process.env.CONTRACT_NAME || 'dev-1645134464429-38710865502300'
 
 export enum NETWORK_TYPE {
   PRODUCTION = 'production',

diff --git a/src/near/types.ts b/src/near/types.ts
@@ -48,8 +48,15 @@ export interface ContractType extends nearAPI.Contract {
    * last boolean parameter indicates the currency being withdrawn.
    */
   renege: (
-    // @ts-ignore Todo: find a solution for this weird duplicate alert
-    { amount: string, sp: boolean, qd: boolean }: Record<string, unknown>,
+    {
+      amount: string,
+      // @ts-ignore Todo: find a solution for this weird duplicate alert
+      sp: boolean,
+      // @ts-ignore
+      qd: boolean,
+      // @ts-ignore
+      live: boolean,
+    }: Record<string, unknown>,
     gas?: string,
     deposit?: string
   ) => void

diff --git a/src/pages/stake.tsx b/src/pages/stake.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import Head from 'next/head'
 import { utils } from 'near-api-js'
-import { Box, Text, Tabs, Tab, Button } from 'grommet'
+import { Box, Text, Tabs, Tab, Button, Spinner } from 'grommet'
 
 import { NearContext } from 'src/near/nearContext'
 import { useGetNearQuoteQuery } from 'src/redux/api/nearQuote'
@@ -14,6 +14,8 @@ const Stake: React.FC = () => {
   const { contract } = React.useContext(NearContext)
   const [depositAmnt, setDepositAmnt] = React.useState<string | undefined>()
   const [withdrawAmnt, setWithdrawAmnt] = React.useState<string | undefined>()
+  const [isWithdrawing, setIsWithdrawing] = React.useState(false)
+  const [isDepositing, setIsDepositing] = React.useState(false)
   const [isQuid, setIsQuid] = React.useState<boolean>(false)
   const { data: nearQuote } = useGetNearQuoteQuery(undefined, {
     pollingInterval: 60000, // set to 60 seconds
@@ -38,6 +40,51 @@ const Stake: React.FC = () => {
     refetchStats()
   }
 
+  const handleWithdraw = async () => {
+    if (withdrawAmnt) {
+      try {
+        setIsWithdrawing(true)
+        await contract?.renege(
+          {
+            amount: utils.format.parseNearAmount(withdrawAmnt),
+            sp: true,
+            qd: isQuid,
+            live: false,
+          },
+          undefined
+        )
+        refetchAll()
+        // Todo: deal with errors
+      } catch (e) {
+        console.error(e)
+      } finally {
+        setIsWithdrawing(false)
+      }
+    }
+  }
+
+  const handleDeposit = async () => {
+    if (depositAmnt) {
+      try {
+        setIsDepositing(true)
+        await contract?.deposit(
+          {
+            qd_amt: isQuid ? utils.format.parseNearAmount(depositAmnt) : '0',
+            live: false,
+          },
+          undefined,
+          isQuid ? '1' : utils.format.parseNearAmount(depositAmnt) || undefined
+        )
+        refetchAll()
+      } catch (e) {
+        // Todo: deal with errors
+        console.error(e)
+      } finally {
+        setIsDepositing(false)
+      }
+    }
+  }
+
   return (
     <>
       <Head>
@@ -87,8 +134,8 @@ const Stake: React.FC = () => {
                 <br />
                 <Button
                   primary
-                  disabled={!depositAmnt}
-                  // color="gradient"
+                  disabled={!depositAmnt || isDepositing}
+                  icon={isDepositing ? <Spinner /> : undefined}
                   label="Confirm"
                   alignSelf="center"
                   size="large"
@@ -97,24 +144,7 @@ const Stake: React.FC = () => {
                     margin: '0 auto',
                     textAlign: 'center',
                   }}
-                  onClick={async () => {
-                    if (depositAmnt) {
-                      await contract?.deposit(
-                        {
-                          qd_amt: isQuid
-                            ? utils.format.parseNearAmount(depositAmnt)
-                            : '0',
-                          live: false,
-                        },
-                        undefined,
-                        isQuid
-                          ? '1'
-                          : utils.format.parseNearAmount(depositAmnt) ||
-                              undefined
-                      )
-                      refetchAll()
-                    }
-                  }}
+                  onClick={handleDeposit}
                 />
               </Box>
             </Tab>
@@ -134,31 +164,17 @@ const Stake: React.FC = () => {
                 <br />
                 <Button
                   primary
-                  disabled={!withdrawAmnt}
-                  // color="gradient"
+                  disabled={!withdrawAmnt || isWithdrawing}
+                  icon={isWithdrawing ? <Spinner /> : undefined}
                   label="Confirm"
                   alignSelf="center"
                   size="large"
-                  // fill
                   style={{
                     width: '90%',
                     margin: '0 auto',
                     textAlign: 'center',
                   }}
-                  onClick={async () => {
-                    if (withdrawAmnt) {
-                      await contract?.renege(
-                        {
-                          amount: utils.format.parseNearAmount(withdrawAmnt),
-                          sp: true,
-                          qd: isQuid,
-                        },
-                        undefined
-                        // utils.format.parseNearAmount('0.00001') || undefined
-                      )
-                      refetchAll()
-                    }
-                  }}
+                  onClick={handleWithdraw}
                 />
               </Box>
             </Tab>
@@ -168,7 +184,6 @@ const Stake: React.FC = () => {
         <Box
           width={{ max: '500px', width: '90%' }}
           background="background-back"
-          // animation="slideDown"
           gap="xxsmall"
           pad="medium"
           round="small"