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 ?
- (
-
- ) : (
-
-
-
- }
- >
- Refresh
-
-
-
- )
- }
-
-
-
- )
-}
\ No newline at end of file
+ {client === null ? (
+
+ ) : (
+
+
+
+ }
+ >
+ Refresh
+
+
+
+ )}
+
+
+
+ );
+}