From 216b1143463c698c2e855e13a5fbe3e561f35495 Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Thu, 22 Jul 2021 13:29:14 +0100 Subject: [PATCH] make reuseable hook to get balance --- wallet-web/components/Confirmation.tsx | 76 ++++---- wallet-web/components/bond/BondNodeForm.tsx | 8 +- wallet-web/components/bond/NodeBond.tsx | 1 - wallet-web/contexts/ValidatorClient.tsx | 15 +- wallet-web/hooks/useGetBalance.ts | 32 ++++ wallet-web/pages/balanceCheck.tsx | 200 +++++++++----------- 6 files changed, 177 insertions(+), 155 deletions(-) create mode 100644 wallet-web/hooks/useGetBalance.ts diff --git a/wallet-web/components/Confirmation.tsx b/wallet-web/components/Confirmation.tsx index ffb9d7d9f6..3fcce02ee8 100644 --- a/wallet-web/components/Confirmation.tsx +++ b/wallet-web/components/Confirmation.tsx @@ -1,41 +1,47 @@ -import React from 'react'; -import Typography from '@material-ui/core/Typography'; -import Grid from '@material-ui/core/Grid'; -import {CircularProgress} from "@material-ui/core"; -import {Alert, AlertTitle} from '@material-ui/lab'; +import React from "react"; +import Typography from "@material-ui/core/Typography"; +import Grid from "@material-ui/core/Grid"; +import { CircularProgress } from "@material-ui/core"; +import { Alert, AlertTitle } from "@material-ui/lab"; type ConfirmationProps = { - finished: boolean, - progressMessage: string, - successMessage: string, - failureMessage: string, - error: Error, -} + isLoading: boolean; + progressMessage: string; + successMessage: string; + failureMessage: string; + error: Error; +}; -export default function Confirmation(props: ConfirmationProps) { - return ( +export default function Confirmation({ + isLoading, + progressMessage, + successMessage, + failureMessage, + error, +}: ConfirmationProps) { + return ( + + {isLoading ? ( - {!props.finished ? ( - - - {props.progressMessage} - - - - - - ) : ( - - {props.error === null ? ( - {props.successMessage} - ) : ( - - {props.error.name} - {props.failureMessage} - {props.error.message} - - )} - - )} + + {progressMessage} + + + + - ); + ) : ( + + {error === null ? ( + {successMessage} + ) : ( + + {error.name} + {failureMessage} - {error.message} + + )} + + )} + + ); } diff --git a/wallet-web/components/bond/BondNodeForm.tsx b/wallet-web/components/bond/BondNodeForm.tsx index fb150ff8e4..1481c31afc 100644 --- a/wallet-web/components/bond/BondNodeForm.tsx +++ b/wallet-web/components/bond/BondNodeForm.tsx @@ -20,6 +20,7 @@ import { Coin, nativeToPrintable } from "@nymproject/nym-validator-client"; import { DENOM } from "../../pages/_app"; import { printableBalanceToNative } from "@nymproject/nym-validator-client/dist/currency"; import { BondingInformation } from "./NodeBond"; +import { Alert } from "@material-ui/lab"; const DEFAULT_MIX_PORT = 1789; const DEFAULT_VERLOC_PORT = 1790; @@ -295,7 +296,12 @@ export default function BondNodeForm(props: TBondNodeFormProps) { }} /> - + + + You're about to allocate all of your tokens. You may want to keep + some in order to unbond this mixnode at a later time. + + { const bondNode = async (bondingInformation: BondingInformation) => { setBondingStarted(true) - // event.preventDefault(); console.log(`BOND button pressed`); console.log(bondingInformation) diff --git a/wallet-web/contexts/ValidatorClient.tsx b/wallet-web/contexts/ValidatorClient.tsx index 13d3eab369..55e5fc7568 100644 --- a/wallet-web/contexts/ValidatorClient.tsx +++ b/wallet-web/contexts/ValidatorClient.tsx @@ -1,15 +1,14 @@ -import React from 'react'; +import React from "react"; import ValidatorClient from "@nymproject/nym-validator-client"; type ClientContext = { - client: ValidatorClient, - setClient: (client: ValidatorClient) => void -} + client: ValidatorClient; + setClient: (client: ValidatorClient) => void; +}; const defaultValue: ClientContext = { - client: null, - setClient: () => { }, -} + client: null, + setClient: () => {}, +}; export const ValidatorClientContext = React.createContext(defaultValue); - diff --git a/wallet-web/hooks/useGetBalance.ts b/wallet-web/hooks/useGetBalance.ts new file mode 100644 index 0000000000..d11529d0ea --- /dev/null +++ b/wallet-web/hooks/useGetBalance.ts @@ -0,0 +1,32 @@ +import { useContext, useState } from "react"; +import { printableCoin } from "@nymproject/nym-validator-client"; +import { ValidatorClientContext } from "../contexts/ValidatorClient"; + +export const useGetBalance = () => { + const { client } = useContext(ValidatorClientContext); + const [isLoading, setIsLoading] = useState(false); + const [balanceCheckError, setBalanceCheckError] = useState(null); + const [accountBalance, setAccountBalance] = useState(""); + + const getBalance = async () => { + if (client) { + setIsLoading(true); + console.log(`using the context client, our address is ${client.address}`); + + try { + const value = await client.getBalance(client.address); + setAccountBalance(printableCoin(value)); + setIsLoading(false); + } catch (e) { + setBalanceCheckError(e); + } + } + }; + + return { + balanceCheckError, + isBalanceLoading: isLoading, + accountBalance, + getBalance, + }; +}; diff --git a/wallet-web/pages/balanceCheck.tsx b/wallet-web/pages/balanceCheck.tsx index 5e16d5cd4f..1bc0cbabfa 100644 --- a/wallet-web/pages/balanceCheck.tsx +++ b/wallet-web/pages/balanceCheck.tsx @@ -1,128 +1,108 @@ import React, { useContext, useEffect } from "react"; -import MainNav from "../components/MainNav"; import Paper from "@material-ui/core/Paper"; import Typography from "@material-ui/core/Typography"; import Button from "@material-ui/core/Button"; +import RefreshIcon from "@material-ui/icons/Refresh"; import { makeStyles } from "@material-ui/core/styles"; -import Confirmation from "../components/Confirmation"; -import RefreshIcon from "@material-ui/icons/Refresh" -import { ValidatorClientContext } from "../contexts/ValidatorClient"; -import NoClientError from "../components/NoClientError"; import { useRouter } from "next/router"; -import { printableCoin } from "@nymproject/nym-validator-client"; +import { ValidatorClientContext } from "../contexts/ValidatorClient"; +import MainNav from "../components/MainNav"; +import Confirmation from "../components/Confirmation"; +import NoClientError from "../components/NoClientError"; +import { useGetBalance } from "../hooks/useGetBalance"; const useStyles = makeStyles((theme) => ({ - appBar: { - position: 'relative', + appBar: { + position: "relative", + }, + layout: { + width: "auto", + marginLeft: theme.spacing(2), + marginRight: theme.spacing(2), + [theme.breakpoints.up(600 + theme.spacing(2) * 2)]: { + width: 600, + marginLeft: "auto", + marginRight: "auto", }, - layout: { - width: 'auto', - marginLeft: theme.spacing(2), - marginRight: theme.spacing(2), - [theme.breakpoints.up(600 + theme.spacing(2) * 2)]: { - width: 600, - marginLeft: 'auto', - marginRight: 'auto', - }, - }, - paper: { - marginTop: theme.spacing(3), - marginBottom: theme.spacing(3), - padding: theme.spacing(2), - [theme.breakpoints.up(600 + theme.spacing(3) * 2)]: { - marginTop: theme.spacing(6), - marginBottom: theme.spacing(6), - padding: theme.spacing(3), - }, - }, - buttons: { - display: 'flex', - justifyContent: 'flex-end', - }, - button: { - marginTop: theme.spacing(3), - marginLeft: theme.spacing(1), + }, + paper: { + marginTop: theme.spacing(3), + marginBottom: theme.spacing(3), + padding: theme.spacing(2), + [theme.breakpoints.up(600 + theme.spacing(3) * 2)]: { + marginTop: theme.spacing(6), + marginBottom: theme.spacing(6), + padding: theme.spacing(3), }, + }, + buttons: { + display: "flex", + justifyContent: "flex-end", + }, + button: { + marginTop: theme.spacing(3), + marginLeft: theme.spacing(1), + }, })); export default function CheckBalance() { - const classes = useStyles(); - const router = useRouter() + const classes = useStyles(); + const router = useRouter(); - const { client } = useContext(ValidatorClientContext) + const { client } = useContext(ValidatorClientContext); + const { getBalance, isBalanceLoading, balanceCheckError, accountBalance } = + useGetBalance(); - useEffect(() => { - const updateBalance = async () => { - if (client === null) { - await router.push("/") - } else { - await getBalance() - } - } - updateBalance() - }, [client]) + useEffect(() => { + const updateBalance = async () => { + if (client === null) { + await router.push("/"); + } else { + await getBalance(); + } + }; + updateBalance(); + }, [client]); - const [balanceCheckStarted, setBalanceCheckStarted] = React.useState(false) - const [balanceCheckFinished, setBalanceCheckFinished] = React.useState(false) - const [balanceCheckError, setBalanceCheckError] = React.useState(null) - const [accountBalance, setAccountBalance] = React.useState("") + const balanceMessage = `Current account balance is ${accountBalance}`; - const getBalance = async () => { - setBalanceCheckFinished(false) - setBalanceCheckStarted(true) + return ( + + +
+ + + Check Balance + - console.log(`using the context client, our address is ${client.address}`); - - client.getBalance(client.address).then(value => { - setAccountBalance(printableCoin(value)) - setBalanceCheckFinished(true) - }).catch(err => { - setBalanceCheckError(err) - setBalanceCheckFinished(true) - }) - } - - const balanceMessage = `Current account balance is ${accountBalance}` - - return ( - - -
- - - Check Balance - - - {client === null ? - ( - - ) : ( - - -
- -
- - ) - } - -
- - ) -} \ No newline at end of file + {client === null ? ( + + ) : ( + + +
+ +
+ + )} + +
+ + ); +}