From d5639ec46b4db1e6130ea9569fcb4dfbc7a0d95b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pedro=20Sim=C3=A3o?= Date: Thu, 17 Feb 2022 23:51:27 +0100 Subject: [PATCH] Improved loading behavior on Stake Page --- src/near/config.ts | 2 +- src/near/types.ts | 11 +++++- src/pages/stake.tsx | 93 ++++++++++++++++++++++++++------------------- 3 files changed, 64 insertions(+), 42 deletions(-) diff --git a/src/near/config.ts b/src/near/config.ts index 3932eaf..50695cf 100644 --- 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 index fe2369e..e21bc2f 100644 --- 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, + { + amount: string, + // @ts-ignore Todo: find a solution for this weird duplicate alert + sp: boolean, + // @ts-ignore + qd: boolean, + // @ts-ignore + live: boolean, + }: Record, gas?: string, deposit?: string ) => void diff --git a/src/pages/stake.tsx b/src/pages/stake.tsx index 8c7ba54..096401b 100644 --- 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() const [withdrawAmnt, setWithdrawAmnt] = React.useState() + const [isWithdrawing, setIsWithdrawing] = React.useState(false) + const [isDepositing, setIsDepositing] = React.useState(false) const [isQuid, setIsQuid] = React.useState(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 ( <> @@ -87,8 +134,8 @@ const Stake: React.FC = () => {