diff --git a/wallet-web/components/Confirmation.tsx b/wallet-web/components/Confirmation.tsx
index 3fcce02ee8..a366ec7e9e 100644
--- a/wallet-web/components/Confirmation.tsx
+++ b/wallet-web/components/Confirmation.tsx
@@ -1,16 +1,16 @@
-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 = {
-  isLoading: boolean;
-  progressMessage: string;
-  successMessage: string;
-  failureMessage: string;
-  error: Error;
-};
+  isLoading: boolean
+  progressMessage: string
+  successMessage: string
+  failureMessage: string
+  error: Error
+}
 
 export default function Confirmation({
   isLoading,
@@ -19,29 +19,25 @@ export default function Confirmation({
   failureMessage,
   error,
 }: ConfirmationProps) {
-  return (
-    <React.Fragment>
-      {isLoading ? (
-        <React.Fragment>
-          <Typography variant="h6" gutterBottom>
-            {progressMessage}
-          </Typography>
-          <Grid item xs={12} sm={6}>
-            <CircularProgress />
-          </Grid>
-        </React.Fragment>
+  return isLoading ? (
+    <>
+      <Typography variant='h6' gutterBottom>
+        {progressMessage}
+      </Typography>
+      <Grid item xs={12} sm={6}>
+        <CircularProgress />
+      </Grid>
+    </>
+  ) : (
+    <>
+      {error === null ? (
+        <Alert severity='success'>{successMessage}</Alert>
       ) : (
-        <React.Fragment>
-          {error === null ? (
-            <Alert severity="success">{successMessage}</Alert>
-          ) : (
-            <Alert severity="error">
-              <AlertTitle>{error.name}</AlertTitle>
-              <strong>{failureMessage}</strong> - {error.message}
-            </Alert>
-          )}
-        </React.Fragment>
+        <Alert severity='error'>
+          <AlertTitle>{error.name}</AlertTitle>
+          <strong>{failureMessage}</strong> - {error.message}
+        </Alert>
       )}
-    </React.Fragment>
-  );
+    </>
+  )
 }
diff --git a/wallet-web/components/bond/BondNodeForm.tsx b/wallet-web/components/bond/BondNodeForm.tsx
index ca56f72fd0..7d381dfcd8 100644
--- a/wallet-web/components/bond/BondNodeForm.tsx
+++ b/wallet-web/components/bond/BondNodeForm.tsx
@@ -1,56 +1,56 @@
-import React, { useEffect, useState, ChangeEvent } from "react";
-import { printableBalanceToNative } from "@nymproject/nym-validator-client/dist/currency";
-import { Coin, nativeToPrintable } from "@nymproject/nym-validator-client";
-import { Alert } from "@material-ui/lab";
-import Grid from "@material-ui/core/Grid";
-import TextField from "@material-ui/core/TextField";
+import React, { useEffect, useState, ChangeEvent } from 'react'
+import { printableBalanceToNative } from '@nymproject/nym-validator-client/dist/currency'
+import { Coin, nativeToPrintable } from '@nymproject/nym-validator-client'
+import { Alert } from '@material-ui/lab'
+import Grid from '@material-ui/core/Grid'
+import TextField from '@material-ui/core/TextField'
 import {
   Button,
   Checkbox,
   FormControlLabel,
   InputAdornment,
-} from "@material-ui/core";
-import bs58 from "bs58";
-import semver from "semver";
-import { NodeType } from "../../common/node";
-import { theme } from "../../lib/theme";
+} from '@material-ui/core'
+import bs58 from 'bs58'
+import semver from 'semver'
+import { NodeType } from '../../common/node'
+import { theme } from '../../lib/theme'
 import {
   basicRawCoinValueValidation,
   makeBasicStyle,
   validateRawPort,
-} from "../../common/helpers";
-import { DENOM } from "../../pages/_app";
-import { BondingInformation } from "./NodeBond";
-import { useGetBalance } from "../../hooks/useGetBalance";
+} from '../../common/helpers'
+import { DENOM } from '../../pages/_app'
+import { BondingInformation } from './NodeBond'
+import { useGetBalance } from '../../hooks/useGetBalance'
 
-const DEFAULT_MIX_PORT = 1789;
-const DEFAULT_VERLOC_PORT = 1790;
-const DEFAULT_HTTP_API_PORT = 8000;
-const DEFAULT_CLIENTS_PORT = 9000;
+const DEFAULT_MIX_PORT = 1789
+const DEFAULT_VERLOC_PORT = 1790
+const DEFAULT_HTTP_API_PORT = 8000
+const DEFAULT_CLIENTS_PORT = 9000
 
 type TBondNodeFormProps = {
-  type: NodeType;
-  minimumMixnodeBond: Coin;
-  minimumGatewayBond: Coin;
-  onSubmit: (event: any) => void;
-};
+  type: NodeType
+  minimumMixnodeBond: Coin
+  minimumGatewayBond: Coin
+  onSubmit: (event: any) => void
+}
 
 type TFormInput = {
-  amount: string;
-  host: string;
-  http_api_port: string;
-  mixPort: string;
-  verlocPort: string;
-  sphinxKey: string;
-  identityKey: string;
-  version: string;
-  location?: string;
-  clientsPort?: string;
-  httpApiPort?: string;
-};
+  amount: string
+  host: string
+  http_api_port: string
+  mixPort: string
+  verlocPort: string
+  sphinxKey: string
+  identityKey: string
+  version: string
+  location?: string
+  clientsPort?: string
+  httpApiPort?: string
+}
 
 export default function BondNodeForm(props: TBondNodeFormProps) {
-  const classes = makeBasicStyle(theme);
+  const classes = makeBasicStyle(theme)
 
   const [validity, setValidity] = React.useState({
     validAmount: true,
@@ -69,19 +69,19 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
 
     // gateway-specific:
     validClientsPort: true,
-  });
+  })
 
-  const [advancedShown, setAdvancedShown] = React.useState(false);
-  const [allocationWarning, setAllocationWarning] = useState(false);
-  const { getBalance, accountBalance } = useGetBalance();
+  const [advancedShown, setAdvancedShown] = React.useState(false)
+  const [allocationWarning, setAllocationWarning] = useState(false)
+  const { getBalance, accountBalance } = useGetBalance()
 
   useEffect(() => {
-    getBalance();
-  }, [getBalance]);
+    getBalance()
+  }, [getBalance])
 
   const handleCheckboxToggle = () => {
-    setAdvancedShown((prevSet) => !prevSet);
-  };
+    setAdvancedShown((prevSet) => !prevSet)
+  }
 
   const validateForm = ({
     amount,
@@ -95,14 +95,14 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
     httpApiPort,
     clientsPort,
   }: TFormInput): boolean => {
-    let validAmount = validateAmount(amount);
-    let validSphinxKey = validateKey(sphinxKey);
-    let validIdentityKey = validateKey(identityKey);
-    let validHost = validateHost(host);
-    let validVersion = validateVersion(version);
+    let validAmount = validateAmount(amount)
+    let validSphinxKey = validateKey(sphinxKey)
+    let validIdentityKey = validateKey(identityKey)
+    let validHost = validateHost(host)
+    let validVersion = validateVersion(version)
 
     let validLocation =
-      props.type == NodeType.Gateway ? validateLocation(location) : true;
+      props.type == NodeType.Gateway ? validateLocation(location) : true
 
     let newValidity = {
       validAmount: validAmount,
@@ -111,16 +111,16 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
       validHost: validHost,
       validVersion: validVersion,
       validLocation: validLocation,
-    };
+    }
 
     if (advancedShown) {
-      let validMixPort = validateRawPort(mixPort);
+      let validMixPort = validateRawPort(mixPort)
       let validVerlocPort =
-        props.type == NodeType.Mixnode ? validateRawPort(verlocPort) : true;
+        props.type == NodeType.Mixnode ? validateRawPort(verlocPort) : true
       let validHttpApiPort =
-        props.type == NodeType.Mixnode ? validateRawPort(httpApiPort) : true;
+        props.type == NodeType.Mixnode ? validateRawPort(httpApiPort) : true
       let validClientsPort =
-        props.type == NodeType.Gateway ? validateRawPort(clientsPort) : true;
+        props.type == NodeType.Gateway ? validateRawPort(clientsPort) : true
 
       newValidity = {
         ...newValidity,
@@ -130,46 +130,46 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
           validHttpApiPort: validHttpApiPort,
           validClientsPort: validClientsPort,
         },
-      };
+      }
     }
 
     setValidity((previousState) => {
-      return { ...previousState, ...newValidity };
-    });
+      return { ...previousState, ...newValidity }
+    })
 
     // just AND everything together
-    const reducer = (acc, current) => acc && current;
+    const reducer = (acc, current) => acc && current
     return Object.entries(newValidity)
       .map((entry) => entry[1])
-      .reduce(reducer, true);
-  };
+      .reduce(reducer, true)
+  }
 
   const validateAmount = (rawValue: string): boolean => {
     // tests basic coin value requirements, like no more than 6 decimal places, value lower than total supply, etc
     if (!basicRawCoinValueValidation(rawValue)) {
-      return false;
+      return false
     }
 
     // this conversion seems really iffy but I'm not sure how to better approach it
-    let nativeValueString = printableBalanceToNative(rawValue);
-    let nativeValue = parseInt(nativeValueString);
+    let nativeValueString = printableBalanceToNative(rawValue)
+    let nativeValue = parseInt(nativeValueString)
     if (props.type == NodeType.Mixnode) {
-      return nativeValue >= parseInt(props.minimumMixnodeBond.amount);
+      return nativeValue >= parseInt(props.minimumMixnodeBond.amount)
     } else {
-      return nativeValue >= parseInt(props.minimumGatewayBond.amount);
+      return nativeValue >= parseInt(props.minimumGatewayBond.amount)
     }
-  };
+  }
 
   const validateKey = (key: string): boolean => {
     // it must be a valid base58 key
     try {
-      const bytes = bs58.decode(key);
+      const bytes = bs58.decode(key)
       // of length 32
-      return bytes.length === 32;
+      return bytes.length === 32
     } catch {
-      return false;
+      return false
     }
-  };
+  }
 
   const validateHost = (host: string): boolean => {
     // I don't think that proper checks are in scope of the change here
@@ -183,33 +183,33 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
     // ipv6 can have multiple possible representations, but it needs to contain at least two colons
     // a hostname (in this case) needs to have a top level domain present
 
-    const dot_occurrences = host.split(".").length - 1;
-    const colon_occurrences = host.split(":").length - 1;
+    const dot_occurrences = host.split('.').length - 1
+    const colon_occurrences = host.split(':').length - 1
 
     if (dot_occurrences == 3) {
       // possible ipv4
       // make sure it has no ports attached!
-      return colon_occurrences == 0;
+      return colon_occurrences == 0
     } else if (colon_occurrences >= 2) {
       // possible ipv6
-      return true;
+      return true
     } else if (dot_occurrences >= 1) {
       // possible hostname
       // make sure it has no ports attached!
-      return colon_occurrences == 0;
+      return colon_occurrences == 0
     }
-    return false;
-  };
+    return false
+  }
 
   const validateVersion = (version: string): boolean => {
     // check if its a valid semver
-    return semver.valid(version) && semver.minor(version) >= 11;
-  };
+    return semver.valid(version) && semver.minor(version) >= 11
+  }
 
   const validateLocation = (location: string): boolean => {
     // right now only perform the stupid check of whether the user copy-pasted the tooltip... (with or without brackets)
-    return !location.trim().includes("physical location of your node");
-  };
+    return !location.trim().includes('physical location of your node')
+  }
 
   const constructMixnodeBondingInfo = ({
     amount,
@@ -234,8 +234,8 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
         identity_key: identityKey,
         version,
       },
-    };
-  };
+    }
+  }
 
   const constructGatewayBondingInfo = (
     data: TFormInput
@@ -253,25 +253,25 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
         version: data.version,
         location: data.location,
       },
-    };
-  };
+    }
+  }
 
   const submitForm = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const target = event.target as unknown as TFormInput;
+    event.preventDefault()
+    const target = event.target as unknown as TFormInput
 
     if (validateForm(target)) {
       if (props.type == NodeType.Mixnode) {
-        return props.onSubmit(constructMixnodeBondingInfo(target));
+        return props.onSubmit(constructMixnodeBondingInfo(target))
       } else {
-        return props.onSubmit(constructGatewayBondingInfo(target));
+        return props.onSubmit(constructGatewayBondingInfo(target))
       }
     }
-  };
+  }
 
-  let minimumBond = props.minimumMixnodeBond;
+  let minimumBond = props.minimumMixnodeBond
   if (props.type == NodeType.Gateway) {
-    minimumBond = props.minimumGatewayBond;
+    minimumBond = props.minimumGatewayBond
   }
 
   // if this whole interface wasn't to be completely redone in a month time, I would have definitely redone the form
@@ -282,8 +282,8 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
         <Grid item xs={12} sm={8}>
           <TextField
             required
-            id="amount"
-            name="amount"
+            id='amount'
+            name='amount'
             label={`Amount to bond (minimum ${nativeToPrintable(
               minimumBond.amount
             )} ${minimumBond.denom})`}
@@ -298,24 +298,24 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
             fullWidth
             InputProps={{
               endAdornment: (
-                <InputAdornment position="end">{DENOM}</InputAdornment>
+                <InputAdornment position='end'>{DENOM}</InputAdornment>
               ),
             }}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
               if (
-                typeof parseInt(e.target.value) === "number" &&
+                typeof parseInt(e.target.value) === 'number' &&
                 parseInt(accountBalance.amount) - parseInt(e.target.value) < 1
               ) {
-                setAllocationWarning(true);
+                setAllocationWarning(true)
               } else {
-                setAllocationWarning(false);
+                setAllocationWarning(false)
               }
             }}
           />
         </Grid>
         {allocationWarning && (
           <Grid item>
-            <Alert severity="info">
+            <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>
@@ -325,9 +325,9 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
           <TextField
             error={!validity.validIdentityKey}
             required
-            id="identity"
-            name="identity"
-            label="Identity key"
+            id='identity'
+            name='identity'
+            label='Identity key'
             fullWidth
           />
         </Grid>
@@ -335,12 +335,12 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
           <TextField
             error={!validity.validSphinxKey}
             required
-            id="sphinxKey"
-            name="sphinxKey"
-            label="Sphinx key"
+            id='sphinxKey'
+            name='sphinxKey'
+            label='Sphinx key'
             fullWidth
             {...(!validity.validSphinxKey
-              ? { helperText: "Enter a valid sphinx key" }
+              ? { helperText: 'Enter a valid sphinx key' }
               : {})}
           />
         </Grid>
@@ -348,12 +348,12 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
           <TextField
             error={!validity.validHost}
             required
-            id="host"
-            name="host"
-            label="Host"
+            id='host'
+            name='host'
+            label='Host'
             fullWidth
             {...(!validity.validHost
-              ? { helperText: "Enter a valid IP or a hostname (without port)" }
+              ? { helperText: 'Enter a valid IP or a hostname (without port)' }
               : {})}
           />
         </Grid>
@@ -364,12 +364,12 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
             <TextField
               error={!validity.validLocation}
               required
-              id="location"
-              name="location"
-              label="Location"
+              id='location'
+              name='location'
+              label='Location'
               fullWidth
               {...(!validity.validLocation
-                ? { helperText: "Enter a valid location of your node" }
+                ? { helperText: 'Enter a valid location of your node' }
                 : {})}
             />
           )}
@@ -379,14 +379,14 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
           <TextField
             error={!validity.validVersion}
             required
-            id="version"
-            name="version"
-            label="Version"
+            id='version'
+            name='version'
+            label='Version'
             fullWidth
             {...(!validity.validVersion
               ? {
                   helperText:
-                    "Enter a valid version (min. 0.11.0), like 0.11.0",
+                    'Enter a valid version (min. 0.11.0), like 0.11.0',
                 }
               : {})}
           />
@@ -400,37 +400,37 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
                 onChange={handleCheckboxToggle}
               />
             }
-            label="Show advanced options"
+            label='Show advanced options'
           />
         </Grid>
 
         {advancedShown && (
-          <React.Fragment>
+          <>
             <Grid item xs={12} sm={4}>
               <TextField
                 error={!validity.validMixPort}
-                variant="outlined"
-                id="mixPort"
-                name="mixPort"
-                label="Mix Port"
+                variant='outlined'
+                id='mixPort'
+                name='mixPort'
+                label='Mix Port'
                 fullWidth
                 defaultValue={DEFAULT_MIX_PORT}
                 {...(!validity.validMixPort
-                  ? { helperText: "Enter a valid version, like 0.10.0" }
+                  ? { helperText: 'Enter a valid version, like 0.10.0' }
                   : {})}
               />
             </Grid>
 
             {/*yes, I also hate so many layers of indentation here*/}
             {props.type === NodeType.Mixnode ? (
-              <React.Fragment>
+              <>
                 <Grid item xs={12} sm={4}>
                   <TextField
                     error={!validity.validVerlocPort}
-                    variant="outlined"
-                    id="verlocPort"
-                    name="verlocPort"
-                    label="Verloc Port"
+                    variant='outlined'
+                    id='verlocPort'
+                    name='verlocPort'
+                    label='Verloc Port'
                     fullWidth
                     defaultValue={DEFAULT_VERLOC_PORT}
                   />
@@ -439,42 +439,42 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
                 <Grid item xs={12} sm={4}>
                   <TextField
                     error={!validity.validHttpApiPort}
-                    variant="outlined"
-                    id="httpApiPort"
-                    name="httpApiPort"
-                    label="HTTP API Port"
+                    variant='outlined'
+                    id='httpApiPort'
+                    name='httpApiPort'
+                    label='HTTP API Port'
                     fullWidth
                     defaultValue={DEFAULT_HTTP_API_PORT}
                   />
                 </Grid>
-              </React.Fragment>
+              </>
             ) : (
               <Grid item xs={12} sm={4}>
                 <TextField
                   error={!validity.validClientsPort}
-                  variant="outlined"
-                  id="clientsPort"
-                  name="clientsPort"
-                  label="client WS API Port"
+                  variant='outlined'
+                  id='clientsPort'
+                  name='clientsPort'
+                  label='client WS API Port'
                   fullWidth
                   defaultValue={DEFAULT_CLIENTS_PORT}
                 />
               </Grid>
             )}
-          </React.Fragment>
+          </>
         )}
       </Grid>
 
       <div className={classes.buttons}>
         <Button
-          variant="contained"
-          color="primary"
-          type="submit"
+          variant='contained'
+          color='primary'
+          type='submit'
           className={classes.button}
         >
           Bond
         </Button>
       </div>
     </form>
-  );
+  )
 }
diff --git a/wallet-web/components/bond/NodeBond.tsx b/wallet-web/components/bond/NodeBond.tsx
index 9242d0bb92..69513ad3e6 100644
--- a/wallet-web/components/bond/NodeBond.tsx
+++ b/wallet-web/components/bond/NodeBond.tsx
@@ -1,163 +1,184 @@
-import React, { useContext, useEffect } from 'react';
-import Typography from '@material-ui/core/Typography';
-import { Grid, LinearProgress, Paper } from '@material-ui/core';
-import { Gateway, MixNode } from '@nymproject/nym-validator-client/dist/types';
-import Confirmation from "../Confirmation";
-import { ValidatorClientContext } from "../../contexts/ValidatorClient";
-import NoClientError from "../NoClientError";
-import { useRouter } from "next/router";
-import BondNodeForm from "./BondNodeForm";
-import { NodeType } from "../../common/node";
-import Link from "../Link";
-import { theme } from "../../lib/theme";
-import { checkNodesOwnership, makeBasicStyle } from "../../common/helpers";
-import NodeTypeChooser from "../NodeTypeChooser";
-import ExecFeeNotice from "../ExecFeeNotice";
-import { printableBalanceToNative } from "@nymproject/nym-validator-client/dist/currency";
-import { coin } from "@nymproject/nym-validator-client";
-import { UDENOM } from "../../pages/_app";
+import React, { useContext, useEffect } from 'react'
+import Typography from '@material-ui/core/Typography'
+import { Grid, LinearProgress, Paper } from '@material-ui/core'
+import { Gateway, MixNode } from '@nymproject/nym-validator-client/dist/types'
+import Confirmation from '../Confirmation'
+import { ValidatorClientContext } from '../../contexts/ValidatorClient'
+import NoClientError from '../NoClientError'
+import { useRouter } from 'next/router'
+import BondNodeForm from './BondNodeForm'
+import { NodeType } from '../../common/node'
+import Link from '../Link'
+import { theme } from '../../lib/theme'
+import { checkNodesOwnership, makeBasicStyle } from '../../common/helpers'
+import NodeTypeChooser from '../NodeTypeChooser'
+import ExecFeeNotice from '../ExecFeeNotice'
+import { printableBalanceToNative } from '@nymproject/nym-validator-client/dist/currency'
+import { coin } from '@nymproject/nym-validator-client'
+import { UDENOM } from '../../pages/_app'
 
 export type BondingInformation = {
-    amount: string,
-    nodeDetails: MixNode | Gateway;
+  amount: string
+  nodeDetails: MixNode | Gateway
 }
 
 const BondNode = () => {
-    const classes = makeBasicStyle(theme);
-    const router = useRouter()
-    const {client} = useContext(ValidatorClientContext)
+  const classes = makeBasicStyle(theme)
+  const router = useRouter()
+  const { client } = useContext(ValidatorClientContext)
 
-    const [bondingStarted, setBondingStarted] = React.useState(false)
-    const [bondingFinished, setBondingFinished] = React.useState(false)
-    const [bondingError, setBondingError] = React.useState(null)
+  const [bondingStarted, setBondingStarted] = React.useState(false)
+  const [bondingFinished, setBondingFinished] = React.useState(false)
+  const [bondingError, setBondingError] = React.useState(null)
 
-    const [checkedOwnership, setCheckedOwnership] = React.useState(false)
-    const [ownsMixnode, setOwnsMixnode] = React.useState(false)
-    const [ownsGateway, setOwnsGateway] = React.useState(false)
+  const [checkedOwnership, setCheckedOwnership] = React.useState(false)
+  const [ownsMixnode, setOwnsMixnode] = React.useState(false)
+  const [ownsGateway, setOwnsGateway] = React.useState(false)
 
-    const [minimumMixnodeBond, setMinimumMixnodeBond] = React.useState(null)
-    const [minimumGatewayBond, setMinimumGatewayBond] = React.useState(null)
+  const [minimumMixnodeBond, setMinimumMixnodeBond] = React.useState(null)
+  const [minimumGatewayBond, setMinimumGatewayBond] = React.useState(null)
 
-    const [nodeType, setNodeType] = React.useState(NodeType.Mixnode)
+  const [nodeType, setNodeType] = React.useState(NodeType.Mixnode)
 
-    useEffect(() => {
-        const getInitialData = async () => {
-            if (client === null) {
-                await router.push("/")
-            } else {
-                const nodeOwnership = await checkNodesOwnership(client)
-                setOwnsMixnode(nodeOwnership.ownsMixnode)
-                setOwnsGateway(nodeOwnership.ownsGateway)
+  useEffect(() => {
+    const getInitialData = async () => {
+      if (client === null) {
+        await router.push('/')
+      } else {
+        const nodeOwnership = await checkNodesOwnership(client)
+        setOwnsMixnode(nodeOwnership.ownsMixnode)
+        setOwnsGateway(nodeOwnership.ownsGateway)
 
-                const minimumMixnodeBond = await client.minimumMixnodeBond()
-                setMinimumMixnodeBond(minimumMixnodeBond)
-                const minimumGatewayBond = await client.minimumGatewayBond()
-                setMinimumGatewayBond(minimumGatewayBond)
+        const minimumMixnodeBond = await client.minimumMixnodeBond()
+        setMinimumMixnodeBond(minimumMixnodeBond)
+        const minimumGatewayBond = await client.minimumGatewayBond()
+        setMinimumGatewayBond(minimumGatewayBond)
 
-                setCheckedOwnership(true)
-            }
-        }
-        getInitialData()
-    }, [client])
+        setCheckedOwnership(true)
+      }
+    }
+    getInitialData()
+  }, [client])
 
-    const bondNode = async (bondingInformation: BondingInformation) => {
-        setBondingStarted(true)
-        console.log(`BOND button pressed`);
+  const bondNode = async (bondingInformation: BondingInformation) => {
+    setBondingStarted(true)
+    console.log(`BOND button pressed`)
 
-        console.log(bondingInformation)
-        let amountValue = parseInt(printableBalanceToNative(bondingInformation.amount))
-        let amount = coin(amountValue, UDENOM)
+    console.log(bondingInformation)
+    let amountValue = parseInt(
+      printableBalanceToNative(bondingInformation.amount)
+    )
+    let amount = coin(amountValue, UDENOM)
 
-        console.log(bondingInformation.nodeDetails)
+    console.log(bondingInformation.nodeDetails)
 
-        if (nodeType == NodeType.Mixnode) {
-            let mixnode = (bondingInformation.nodeDetails as MixNode)
-            client.bondMixnode(mixnode, amount).then((value => {
-                console.log("bonded mixnode!", value)
-            })).catch(setBondingError).finally(() => setBondingFinished(true))
-        } else {
-            let gateway = (bondingInformation.nodeDetails as Gateway)
-            client.bondGateway(gateway, amount).then((value => {
-                console.log("bonded gateway!", value)
-            })).catch(setBondingError).finally(() => setBondingFinished(true))
-        }
+    if (nodeType == NodeType.Mixnode) {
+      let mixnode = bondingInformation.nodeDetails as MixNode
+      client
+        .bondMixnode(mixnode, amount)
+        .then((value) => {
+          console.log('bonded mixnode!', value)
+        })
+        .catch(setBondingError)
+        .finally(() => setBondingFinished(true))
+    } else {
+      let gateway = bondingInformation.nodeDetails as Gateway
+      client
+        .bondGateway(gateway, amount)
+        .then((value) => {
+          console.log('bonded gateway!', value)
+        })
+        .catch(setBondingError)
+        .finally(() => setBondingFinished(true))
+    }
+  }
+
+  const getBondContent = () => {
+    // we're not signed in
+    if (client === null) {
+      return <NoClientError />
     }
 
-    const getBondContent = () => {
-        // we're not signed in
-        if (client === null) {
-            return (<NoClientError/>)
-        }
-
-        // we haven't checked whether we actually already own a node
-        if (!checkedOwnership) {
-            return (<LinearProgress/>)
-        }
-
-        // we already own a mixnode
-        if (ownsMixnode) {
-            return (
-                <Grid container spacing={3}>
-                    <Grid item xs={12}>
-                        <Typography gutterBottom>
-                            You have already have a bonded mixnode. If you wish to bond a different one, you need to
-                            first <Link href="/unbond">unbond the existing one</Link>.
-                        </Typography>
-                    </Grid>
-                </Grid>
-            )
-        }
-
-        // we already own a gateway
-        if (ownsGateway) {
-            return (
-                <Grid container spacing={3}>
-                    <Grid item xs={12}>
-                        <Typography gutterBottom>
-                            You have already have a bonded gateway. If you wish to bond a different one, you need to
-                            first <Link href="/unbond">unbond the existing one</Link>.
-                        </Typography>
-                    </Grid>
-                </Grid>
-            )
-        }
-
-        // we haven't clicked bond button yet
-        if (!bondingStarted) {
-            return (
-                <React.Fragment>
-                    <NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType}/>
-                    <BondNodeForm onSubmit={bondNode} type={nodeType} minimumGatewayBond={minimumGatewayBond}
-                                  minimumMixnodeBond={minimumMixnodeBond}/>
-                </React.Fragment>
-            )
-        }
-
-        // We started bonding
-        return (
-            <Confirmation
-                finished={bondingFinished}
-                error={bondingError}
-                progressMessage={`${nodeType} bonding is in progress...`}
-                successMessage={`${nodeType} bonding was successful!`}
-                failureMessage={`Failed to bond the ${nodeType}!`}
-            />
-        )
+    // we haven't checked whether we actually already own a node
+    if (!checkedOwnership) {
+      return <LinearProgress />
     }
 
+    // we already own a mixnode
+    if (ownsMixnode) {
+      return (
+        <Grid container spacing={3}>
+          <Grid item xs={12}>
+            <Typography gutterBottom>
+              You have already have a bonded mixnode. If you wish to bond a
+              different one, you need to first{' '}
+              <Link href='/unbond'>unbond the existing one</Link>.
+            </Typography>
+          </Grid>
+        </Grid>
+      )
+    }
+
+    // we already own a gateway
+    if (ownsGateway) {
+      return (
+        <Grid container spacing={3}>
+          <Grid item xs={12}>
+            <Typography gutterBottom>
+              You have already have a bonded gateway. If you wish to bond a
+              different one, you need to first{' '}
+              <Link href='/unbond'>unbond the existing one</Link>.
+            </Typography>
+          </Grid>
+        </Grid>
+      )
+    }
+
+    // we haven't clicked bond button yet
+    if (!bondingStarted) {
+      return (
+        <>
+          <NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType} />
+          <BondNodeForm
+            onSubmit={bondNode}
+            type={nodeType}
+            minimumGatewayBond={minimumGatewayBond}
+            minimumMixnodeBond={minimumMixnodeBond}
+          />
+        </>
+      )
+    }
+
+    // We started bonding
     return (
-        <React.Fragment>
-            <main className={classes.layout}>
-                <Paper className={classes.paper}>
-                    <ExecFeeNotice name="bonding"/>
-                    <Typography component="h1" variant="h4" align="center" className={classes.wrapper}>
-                        Bond a {nodeType}
-                    </Typography>
-                    {getBondContent()}
-                </Paper>
-            </main>
-        </React.Fragment>
-    );
-};
+      <Confirmation
+        isLoading={bondingFinished}
+        error={bondingError}
+        progressMessage={`${nodeType} bonding is in progress...`}
+        successMessage={`${nodeType} bonding was successful!`}
+        failureMessage={`Failed to bond the ${nodeType}!`}
+      />
+    )
+  }
 
-export default BondNode;
+  return (
+    <>
+      <main className={classes.layout}>
+        <Paper className={classes.paper}>
+          <ExecFeeNotice name='bonding' />
+          <Typography
+            component='h1'
+            variant='h4'
+            align='center'
+            className={classes.wrapper}
+          >
+            Bond a {nodeType}
+          </Typography>
+          {getBondContent()}
+        </Paper>
+      </main>
+    </>
+  )
+}
+
+export default BondNode
diff --git a/wallet-web/components/delegate/DelegateForm.tsx b/wallet-web/components/delegate/DelegateForm.tsx
index 2dfd02fc01..674e3ae4cd 100644
--- a/wallet-web/components/delegate/DelegateForm.tsx
+++ b/wallet-web/components/delegate/DelegateForm.tsx
@@ -1,32 +1,32 @@
-import React, { useState, useEffect, ChangeEvent } from "react";
-import Grid from "@material-ui/core/Grid";
-import { Button, InputAdornment } from "@material-ui/core";
-import TextField from "@material-ui/core/TextField";
-import { DENOM } from "../../pages/_app";
-import { theme } from "../../lib/theme";
+import React, { useState, useEffect } from 'react'
+import Grid from '@material-ui/core/Grid'
+import { Button, InputAdornment } from '@material-ui/core'
+import TextField from '@material-ui/core/TextField'
+import { Alert } from '@material-ui/lab'
+import { DENOM } from '../../pages/_app'
+import { theme } from '../../lib/theme'
 import {
   basicRawCoinValueValidation,
   makeBasicStyle,
   validateIdentityKey,
-} from "../../common/helpers";
-import { useGetBalance } from "../../hooks/useGetBalance";
-import { Alert } from "@material-ui/lab";
+} from '../../common/helpers'
+import { useGetBalance } from '../../hooks/useGetBalance'
 
 type DelegateFormProps = {
-  onSubmit: (event: any) => void;
-};
+  onSubmit: (event: any) => void
+}
 
 export default function DelegateForm(props: DelegateFormProps) {
-  const classes = makeBasicStyle(theme);
+  const classes = makeBasicStyle(theme)
 
-  const [validAmount, setValidAmount] = useState(true);
-  const [validIdentity, setValidIdentity] = useState(true);
-  const [allocationWarning, setAllocationWarning] = useState(false);
-  const { getBalance, accountBalance } = useGetBalance();
+  const [validAmount, setValidAmount] = useState(true)
+  const [validIdentity, setValidIdentity] = useState(true)
+  const [allocationWarning, setAllocationWarning] = useState(false)
+  const { getBalance, accountBalance } = useGetBalance()
 
   useEffect(() => {
-    getBalance();
-  }, [getBalance]);
+    getBalance()
+  }, [getBalance])
 
   // const [checkboxSet, setCheckboxSet] = React.useState(false)
 
@@ -38,40 +38,40 @@ export default function DelegateForm(props: DelegateFormProps) {
     // don't ask me about that. javascript works in mysterious ways
     // and this is apparently a good way of checking if string
     // is purely made of numeric characters
-    let parsed = +event.target.value;
+    let parsed = +event.target.value
     if (isNaN(parsed)) {
-      setValidAmount(false);
+      setValidAmount(false)
     } else {
       if (parsed > 0 && parseInt(accountBalance.amount) - parsed < 1) {
-        setAllocationWarning(true);
+        setAllocationWarning(true)
       } else {
-        setAllocationWarning(false);
+        setAllocationWarning(false)
       }
-      setValidAmount(true);
+      setValidAmount(true)
     }
-  };
+  }
 
   const validateForm = (event: any): boolean => {
-    let validIdentity = validateIdentityKey(event.target.identity.value);
-    let validAmount = validateAmount(event.target.amount.value);
+    let validIdentity = validateIdentityKey(event.target.identity.value)
+    let validAmount = validateAmount(event.target.amount.value)
 
-    setValidIdentity(validIdentity);
-    setValidAmount(validAmount);
+    setValidIdentity(validIdentity)
+    setValidAmount(validAmount)
 
-    return validIdentity && validAmount;
-  };
+    return validIdentity && validAmount
+  }
 
   const validateAmount = (rawAmount: string): boolean => {
-    return basicRawCoinValueValidation(rawAmount);
-  };
+    return basicRawCoinValueValidation(rawAmount)
+  }
 
   const submitForm = (event: any) => {
-    event.preventDefault();
+    event.preventDefault()
 
     if (validateForm(event)) {
-      return props.onSubmit(event);
+      return props.onSubmit(event)
     }
-  };
+  }
 
   return (
     <form onSubmit={submitForm}>
@@ -79,13 +79,13 @@ export default function DelegateForm(props: DelegateFormProps) {
         <Grid item xs={12}>
           <TextField
             required
-            id="identity"
-            name="identity"
-            label="Node identity"
+            id='identity'
+            name='identity'
+            label='Node identity'
             error={!validIdentity}
             helperText={
               validIdentity
-                ? ""
+                ? ''
                 : "Please enter a valid identity like '824WyExLUWvLE2mpSHBatN4AoByuLzfnHFeHWiBYzg4z'"
             }
             fullWidth
@@ -95,23 +95,23 @@ export default function DelegateForm(props: DelegateFormProps) {
         <Grid item xs={12} sm={6}>
           <TextField
             required
-            id="amount"
-            name="amount"
-            label="Amount to delegate"
+            id='amount'
+            name='amount'
+            label='Amount to delegate'
             error={!validAmount}
-            helperText={validAmount ? "" : "Please enter a valid amount"}
+            helperText={validAmount ? '' : 'Please enter a valid amount'}
             onChange={handleAmountChange}
             fullWidth
             InputProps={{
               endAdornment: (
-                <InputAdornment position="end">{DENOM}</InputAdornment>
+                <InputAdornment position='end'>{DENOM}</InputAdornment>
               ),
             }}
           />
         </Grid>
         {allocationWarning && (
           <Grid item>
-            <Alert severity="info">
+            <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>
@@ -133,14 +133,14 @@ export default function DelegateForm(props: DelegateFormProps) {
       </Grid>
       <div className={classes.buttons}>
         <Button
-          variant="contained"
-          color="primary"
-          type="submit"
+          variant='contained'
+          color='primary'
+          type='submit'
           className={classes.button}
         >
           Delegate stake
         </Button>
       </div>
     </form>
-  );
+  )
 }
diff --git a/wallet-web/components/delegate/NodeDelegation.tsx b/wallet-web/components/delegate/NodeDelegation.tsx
index 62e8adc2b7..a865ba8606 100644
--- a/wallet-web/components/delegate/NodeDelegation.tsx
+++ b/wallet-web/components/delegate/NodeDelegation.tsx
@@ -1,112 +1,124 @@
-import React, { useContext, useEffect } from "react";
-import { Paper } from "@material-ui/core";
-import Typography from "@material-ui/core/Typography";
-import { useRouter } from "next/router";
-import { ValidatorClientContext } from "../../contexts/ValidatorClient";
-import { NodeType } from "../../common/node";
-import NoClientError from "../NoClientError";
-import Confirmation from "../Confirmation";
-import DelegateForm from "./DelegateForm";
-import { printableBalanceToNative } from "@nymproject/nym-validator-client/dist/currency";
-import { Coin } from "@cosmjs/launchpad";
-import { coin, printableCoin } from "@nymproject/nym-validator-client";
-import { UDENOM } from "../../pages/_app";
-import { theme } from "../../lib/theme";
-import { makeBasicStyle } from "../../common/helpers";
-import NodeTypeChooser from "../NodeTypeChooser";
-import ExecFeeNotice from "../ExecFeeNotice";
+import React, { useContext, useEffect } from 'react'
+import { Paper } from '@material-ui/core'
+import Typography from '@material-ui/core/Typography'
+import { useRouter } from 'next/router'
+import { ValidatorClientContext } from '../../contexts/ValidatorClient'
+import { NodeType } from '../../common/node'
+import NoClientError from '../NoClientError'
+import Confirmation from '../Confirmation'
+import DelegateForm from './DelegateForm'
+import { printableBalanceToNative } from '@nymproject/nym-validator-client/dist/currency'
+import { Coin } from '@cosmjs/launchpad'
+import { coin, printableCoin } from '@nymproject/nym-validator-client'
+import { UDENOM } from '../../pages/_app'
+import { theme } from '../../lib/theme'
+import { makeBasicStyle } from '../../common/helpers'
+import NodeTypeChooser from '../NodeTypeChooser'
+import ExecFeeNotice from '../ExecFeeNotice'
 
 const DelegateToNode = () => {
-    const classes = makeBasicStyle(theme);
-    const router = useRouter()
-    const {client} = useContext(ValidatorClientContext)
+  const classes = makeBasicStyle(theme)
+  const router = useRouter()
+  const { client } = useContext(ValidatorClientContext)
 
-    const [delegationStarted, setDelegationStarted] = React.useState(false)
-    const [delegationFinished, setDelegationFinished] = React.useState(false)
-    const [delegationError, setDelegationError] = React.useState(null)
+  const [delegationStarted, setDelegationStarted] = React.useState(false)
+  const [delegationFinished, setDelegationFinished] = React.useState(false)
+  const [delegationError, setDelegationError] = React.useState(null)
 
-    const [nodeType, setNodeType] = React.useState(NodeType.Mixnode)
-    const [stakeValue, setStakeValue] = React.useState("0 HAL")
-    const [nodeIdentity, setNodeIdentity] = React.useState("")
+  const [nodeType, setNodeType] = React.useState(NodeType.Mixnode)
+  const [stakeValue, setStakeValue] = React.useState('0 HAL')
+  const [nodeIdentity, setNodeIdentity] = React.useState('')
 
-    useEffect(() => {
-        const checkClient = async () => {
-            if (client === null) {
-                await router.push("/")
-            }
-        }
-        checkClient()
-    }, [client])
+  useEffect(() => {
+    const checkClient = async () => {
+      if (client === null) {
+        await router.push('/')
+      }
+    }
+    checkClient()
+  }, [client])
 
-    const getDelegationValue = (raw: string): Coin => {
-        let native = printableBalanceToNative(raw)
-        return coin(parseInt(native), UDENOM)
+  const getDelegationValue = (raw: string): Coin => {
+    let native = printableBalanceToNative(raw)
+    return coin(parseInt(native), UDENOM)
+  }
+
+  const delegateToNode = async (event) => {
+    event.preventDefault()
+    console.log(`DELEGATE button pressed`)
+
+    const nodeIdentity = event.target.identity.value
+    const delegationValue = getDelegationValue(event.target.amount.value)
+
+    setNodeIdentity(nodeIdentity)
+    setStakeValue(printableCoin(delegationValue))
+    setDelegationStarted(true)
+
+    if (nodeType == NodeType.Mixnode) {
+      client
+        .delegateToMixnode(nodeIdentity, delegationValue)
+        .then((value) => {
+          console.log('delegated to mixnode!', value)
+        })
+        .catch(setDelegationError)
+        .finally(() => setDelegationFinished(true))
+    } else {
+      client
+        .delegateToGateway(nodeIdentity, delegationValue)
+        .then((value) => {
+          console.log('delegated to gateway!', value)
+        })
+        .catch(setDelegationError)
+        .finally(() => setDelegationFinished(true))
+    }
+  }
+
+  const getDelegationContent = () => {
+    // we're not signed in
+    if (client === null) {
+      return <NoClientError />
     }
 
-    const delegateToNode = async (event) => {
-        event.preventDefault();
-        console.log(`DELEGATE button pressed`);
-
-        const nodeIdentity = event.target.identity.value;
-        const delegationValue = getDelegationValue(event.target.amount.value)
-
-        setNodeIdentity(nodeIdentity)
-        setStakeValue(printableCoin(delegationValue))
-        setDelegationStarted(true)
-
-        if (nodeType == NodeType.Mixnode) {
-            client.delegateToMixnode(nodeIdentity, delegationValue).then((value => {
-                console.log("delegated to mixnode!", value)
-            })).catch(setDelegationError).finally(() => setDelegationFinished(true))
-        } else {
-            client.delegateToGateway(nodeIdentity, delegationValue).then((value => {
-                console.log("delegated to gateway!", value)
-            })).catch(setDelegationError).finally(() => setDelegationFinished(true))
-        }
-    }
-
-    const getDelegationContent = () => {
-        // we're not signed in
-        if (client === null) {
-            return (<NoClientError/>)
-        }
-
-        // we haven't clicked delegate button yet
-        if (!delegationStarted) {
-            return (
-                <React.Fragment>
-                    <NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType}/>
-                    <DelegateForm onSubmit={delegateToNode}/>
-                </React.Fragment>
-            )
-        }
-
-        // We started delegation
-        return (
-            <Confirmation
-                finished={delegationFinished}
-                error={delegationError}
-                progressMessage={`Delegating stake on ${nodeType} ${nodeIdentity} is in progress...`}
-                successMessage={`Successfully delegated ${stakeValue} stake on ${nodeType} ${nodeIdentity}`}
-                failureMessage={`Failed to delegate to a ${nodeType}!`}
-            />
-        )
+    // we haven't clicked delegate button yet
+    if (!delegationStarted) {
+      return (
+        <>
+          <NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType} />
+          <DelegateForm onSubmit={delegateToNode} />
+        </>
+      )
     }
 
+    // We started delegation
     return (
-        <React.Fragment>
-            <main className={classes.layout}>
-                <Paper className={classes.paper}>
-                    <ExecFeeNotice name={"delegating stake"}/>
-                    <Typography component="h1" variant="h4" align="center" className={classes.wrapper}>
-                        Delegate to {nodeType}
-                    </Typography>
-                    {getDelegationContent()}
-                </Paper>
-            </main>
-        </React.Fragment>
-    );
+      <Confirmation
+        finished={delegationFinished}
+        error={delegationError}
+        progressMessage={`Delegating stake on ${nodeType} ${nodeIdentity} is in progress...`}
+        successMessage={`Successfully delegated ${stakeValue} stake on ${nodeType} ${nodeIdentity}`}
+        failureMessage={`Failed to delegate to a ${nodeType}!`}
+      />
+    )
+  }
+
+  return (
+    <>
+      <main className={classes.layout}>
+        <Paper className={classes.paper}>
+          <ExecFeeNotice name={'delegating stake'} />
+          <Typography
+            component='h1'
+            variant='h4'
+            align='center'
+            className={classes.wrapper}
+          >
+            Delegate to {nodeType}
+          </Typography>
+          {getDelegationContent()}
+        </Paper>
+      </main>
+    </>
+  )
 }
 
-
-export default DelegateToNode;
+export default DelegateToNode
diff --git a/wallet-web/pages/balanceCheck.tsx b/wallet-web/pages/balanceCheck.tsx
index be34b2555e..7ac365a668 100644
--- a/wallet-web/pages/balanceCheck.tsx
+++ b/wallet-web/pages/balanceCheck.tsx
@@ -1,28 +1,28 @@
-import React, { useContext, useEffect } from "react";
-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 { useRouter } from "next/router";
-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";
+import React, { useContext, useEffect } from 'react'
+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 { useRouter } from 'next/router'
+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",
+    position: 'relative',
   },
   layout: {
-    width: "auto",
+    width: 'auto',
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(2),
     [theme.breakpoints.up(600 + theme.spacing(2) * 2)]: {
       width: 600,
-      marginLeft: "auto",
-      marginRight: "auto",
+      marginLeft: 'auto',
+      marginRight: 'auto',
     },
   },
   paper: {
@@ -36,61 +36,61 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   buttons: {
-    display: "flex",
-    justifyContent: "flex-end",
+    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, printedBalance } =
-    useGetBalance();
+    useGetBalance()
 
   useEffect(() => {
     const updateBalance = async () => {
       if (client === null) {
-        await router.push("/");
+        await router.push('/')
       } else {
-        await getBalance();
+        await getBalance()
       }
-    };
-    updateBalance();
-  }, [client]);
+    }
+    updateBalance()
+  }, [client])
 
-  const balanceMessage = `Current account balance is ${printedBalance}`;
+  const balanceMessage = `Current account balance is ${printedBalance}`
 
   return (
-    <React.Fragment>
+    <>
       <MainNav />
       <main className={classes.layout}>
         <Paper className={classes.paper}>
-          <Typography component="h1" variant="h4" align="center">
+          <Typography component='h1' variant='h4' align='center'>
             Check Balance
           </Typography>
 
           {client === null ? (
             <NoClientError />
           ) : (
-            <React.Fragment>
+            <>
               <Confirmation
                 isLoading={isBalanceLoading}
                 error={balanceCheckError}
-                progressMessage="Checking balance..."
+                progressMessage='Checking balance...'
                 successMessage={balanceMessage}
-                failureMessage="Failed to check the account balance!"
+                failureMessage='Failed to check the account balance!'
               />
               <div className={classes.buttons}>
                 <Button
-                  variant="contained"
-                  color="primary"
-                  type="submit"
+                  variant='contained'
+                  color='primary'
+                  type='submit'
                   onClick={getBalance}
                   disabled={isBalanceLoading}
                   className={classes.button}
@@ -99,10 +99,10 @@ export default function CheckBalance() {
                   Refresh
                 </Button>
               </div>
-            </React.Fragment>
+            </>
           )}
         </Paper>
       </main>
-    </React.Fragment>
-  );
+    </>
+  )
 }