make reuseable hook to get balance

2021-07-22 13:29:14 +01:00
parent 793dbdef7e
commit 216b114346
6 changed files with 177 additions and 155 deletions
@@ -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 (
+    <React.Fragment>
+      {isLoading ? (
        <React.Fragment>
-            {!props.finished ? (
-                <React.Fragment>
-                    <Typography variant="h6" gutterBottom>
-                        {props.progressMessage}
-                    </Typography>
-                    <Grid item xs={12} sm={6}>
-                        <CircularProgress/>
-                    </Grid>
-                </React.Fragment>
-            ) : (
-                <React.Fragment>
-                    {props.error === null ? (
-                        <Alert severity="success">{props.successMessage}</Alert>
-                    ) : (
-                        <Alert severity="error">
-                            <AlertTitle>{props.error.name}</AlertTitle>
-                            <strong>{props.failureMessage}</strong> - {props.error.message}
-                        </Alert>
-                    )}
-                </React.Fragment>
-            )}
+          <Typography variant="h6" gutterBottom>
+            {progressMessage}
+          </Typography>
+          <Grid item xs={12} sm={6}>
+            <CircularProgress />
+          </Grid>
        </React.Fragment>
-    );
+      ) : (
+        <React.Fragment>
+          {error === null ? (
+            <Alert severity="success">{successMessage}</Alert>
+          ) : (
+            <Alert severity="error">
+              <AlertTitle>{error.name}</AlertTitle>
+              <strong>{failureMessage}</strong> - {error.message}
+            </Alert>
+          )}
+        </React.Fragment>
+      )}
+    </React.Fragment>
+  );
 }
@@ -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) {
            }}
          />
        </Grid>
-
+        <Grid item>
+          <Alert severity="info">
+            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.
+          </Alert>
+        </Grid>
        <Grid item xs={12}>
          <TextField
            error={!validity.validIdentityKey}
@@ -62,7 +62,6 @@ const BondNode = () => {

    const bondNode = async (bondingInformation: BondingInformation) => {
        setBondingStarted(true)
-        // event.preventDefault();
        console.log(`BOND button pressed`);

        console.log(bondingInformation)
@@ -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);
-
@@ -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,
+  };
+};
@@ -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 (
+    <React.Fragment>
+      <MainNav />
+      <main className={classes.layout}>
+        <Paper className={classes.paper}>
+          <Typography component="h1" variant="h4" align="center">
+            Check Balance
+          </Typography>

-        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 (
-        <React.Fragment>
-            <MainNav />
-            <main className={classes.layout}>
-                <Paper className={classes.paper}>
-                    <Typography component="h1" variant="h4" align="center">
-                        Check Balance
-                    </Typography>
-
-                    {client === null ?
-                        (
-                            <NoClientError />
-                        ) : (
-                            <React.Fragment>
-                                <Confirmation
-                                    finished={balanceCheckFinished}
-                                    error={balanceCheckError}
-                                    progressMessage="Checking balance..."
-                                    successMessage={balanceMessage}
-                                    failureMessage="Failed to check the account balance!"
-                                />
-                                <div className={classes.buttons}>
-                                    <Button
-                                        variant="contained"
-                                        color="primary"
-                                        type="submit"
-                                        onClick={getBalance}
-                                        disabled={!balanceCheckFinished}
-                                        className={classes.button}
-                                        startIcon={<RefreshIcon />}
-                                    >
-                                        Refresh
-                                    </Button>
-                                </div>
-                            </React.Fragment>
-                        )
-                    }
-                </Paper>
-            </main>
-        </React.Fragment >
-    )
-}
+          {client === null ? (
+            <NoClientError />
+          ) : (
+            <React.Fragment>
+              <Confirmation
+                isLoading={isBalanceLoading}
+                error={balanceCheckError}
+                progressMessage="Checking balance..."
+                successMessage={balanceMessage}
+                failureMessage="Failed to check the account balance!"
+              />
+              <div className={classes.buttons}>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  type="submit"
+                  onClick={getBalance}
+                  disabled={isBalanceLoading}
+                  className={classes.button}
+                  startIcon={<RefreshIcon />}
+                >
+                  Refresh
+                </Button>
+              </div>
+            </React.Fragment>
+          )}
+        </Paper>
+      </main>
+    </React.Fragment>
+  );
+}