From 2673f83116a95d369023bc863b00178acdcbb326 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 27 Jul 2021 15:08:37 +0100
Subject: [PATCH 01/11] fix bug

---
 wallet-web/components/undelegate/NodeUndelegation.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/wallet-web/components/undelegate/NodeUndelegation.tsx b/wallet-web/components/undelegate/NodeUndelegation.tsx
index c04aa1464d..34666e48e0 100644
--- a/wallet-web/components/undelegate/NodeUndelegation.tsx
+++ b/wallet-web/components/undelegate/NodeUndelegation.tsx
@@ -65,7 +65,7 @@ const UndelegateFromNode = () => {
     }
 
     // we haven't clicked undelegate button yet
-    if (!undelegationStarted) {
+    if (!isLoading) {
       return (
         <React.Fragment>
           <NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType} />
@@ -95,9 +95,9 @@ const UndelegateFromNode = () => {
         <Paper className={classes.paper}>
           <ExecFeeNotice name={'undelegating stake'} />
           <Typography
-            component='h1'
-            variant='h4'
-            align='center'
+            component="h1"
+            variant="h4"
+            align="center"
             className={classes.wrapper}
           >
             Undelegate stake from {nodeType}

From 721e4bda8be95f7fe94fcbbb643dc6940289fbdd Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 27 Jul 2021 16:40:15 +0100
Subject: [PATCH 02/11] create reuseable components

---
 wallet-web/components/Layout.tsx  | 20 ++++++++++++++++++++
 wallet-web/components/NymCard.tsx | 30 ++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 wallet-web/components/Layout.tsx
 create mode 100644 wallet-web/components/NymCard.tsx

diff --git a/wallet-web/components/Layout.tsx b/wallet-web/components/Layout.tsx
new file mode 100644
index 0000000000..4200d6ab88
--- /dev/null
+++ b/wallet-web/components/Layout.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Grid, Theme, useTheme, useMediaQuery } from '@material-ui/core'
+
+export const Layout = ({ children }: { children: React.ReactElement }) => {
+  const theme: Theme = useTheme()
+
+  return (
+    <div
+      style={{
+        padding: theme.spacing(5),
+      }}
+    >
+      <Grid container justify="center">
+        <Grid item xs={12} md={6} lg={4}>
+          {children}
+        </Grid>
+      </Grid>
+    </div>
+  )
+}
diff --git a/wallet-web/components/NymCard.tsx b/wallet-web/components/NymCard.tsx
new file mode 100644
index 0000000000..a47d114832
--- /dev/null
+++ b/wallet-web/components/NymCard.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { Card, CardContent, CardHeader, useTheme } from '@material-ui/core'
+
+export const NymCard = ({
+  title,
+  subheader,
+  children,
+}: {
+  title: string
+  subheader?: string
+  children: React.ReactElement
+}) => {
+  const theme = useTheme()
+  return (
+    <Card>
+      <CardHeader
+        title={title}
+        subheader={subheader}
+        titleTypographyProps={{ variant: 'h5' }}
+        style={{
+          padding: theme.spacing(2.5),
+          borderBottom: `1px solid ${theme.palette.grey[200]}`,
+        }}
+      />
+      <CardContent style={{ background: theme.palette.grey[50] }}>
+        {children}
+      </CardContent>
+    </Card>
+  )
+}

From 5dc67b995e135be1d1792cb38292f5c042e77e96 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 27 Jul 2021 16:41:35 +0100
Subject: [PATCH 03/11] export new reusable components

---
 wallet-web/components/index.ts | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 wallet-web/components/index.ts

diff --git a/wallet-web/components/index.ts b/wallet-web/components/index.ts
new file mode 100644
index 0000000000..a473532ff7
--- /dev/null
+++ b/wallet-web/components/index.ts
@@ -0,0 +1,2 @@
+export * from './NymCard'
+export * from './Layout'

From aa048cabe62ebcf54007578f98814281d576559a Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 27 Jul 2021 16:44:11 +0100
Subject: [PATCH 04/11] update pages to use new components

---
 wallet-web/components/MainNav.tsx             | 305 +++++++++---------
 wallet-web/components/bond/NodeBond.tsx       |  16 +-
 .../components/delegate/NodeDelegation.tsx    |  16 +-
 .../delegation-check/DelegationCheck.tsx      |  20 +-
 wallet-web/components/unbond/UnbondNode.tsx   |  16 +-
 .../undelegate/NodeUndelegation.tsx           |  16 +-
 wallet-web/pages/balanceCheck.tsx             |  78 +----
 wallet-web/pages/bond.tsx                     |  25 +-
 wallet-web/pages/checkDelegation.tsx          |  28 +-
 wallet-web/pages/delegateStake.tsx            |  25 +-
 wallet-web/pages/receive.tsx                  |  13 +
 wallet-web/pages/send.tsx                     |  85 ++---
 wallet-web/pages/unbond.tsx                   |  25 +-
 wallet-web/pages/undelegateStake.tsx          |  28 +-
 14 files changed, 298 insertions(+), 398 deletions(-)
 create mode 100644 wallet-web/pages/receive.tsx

diff --git a/wallet-web/components/MainNav.tsx b/wallet-web/components/MainNav.tsx
index 65f29f2bab..5e4fb5c031 100644
--- a/wallet-web/components/MainNav.tsx
+++ b/wallet-web/components/MainNav.tsx
@@ -1,172 +1,183 @@
 import {
-    AppBar,
-    Divider,
-    Drawer,
-    IconButton,
-    List,
-    ListItem,
-    ListItemIcon,
-    ListItemText,
-    ListSubheader,
-    Toolbar,
-    Typography
-} from "@material-ui/core";
-import React, { useContext } from "react";
+  AppBar,
+  Divider,
+  Drawer,
+  IconButton,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  ListSubheader,
+  Toolbar,
+  Typography,
+} from '@material-ui/core'
+import React, { useContext } from 'react'
 import Link from 'next/link'
-import VpnKeyIcon from "@material-ui/icons/VpnKey"
-import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet';
-import { ValidatorClientContext } from "../contexts/ValidatorClient";
-import { ADMIN_ADDRESS } from "../pages/_app";
-import MenuIcon from '@material-ui/icons/Menu';
-import MonetizationOnIcon from '@material-ui/icons/MonetizationOn';
-import AttachMoneyIcon from '@material-ui/icons/AttachMoney';
-import MoneyOffIcon from '@material-ui/icons/MoneyOff';
-import HowToVoteIcon from '@material-ui/icons/HowToVote';
-import CancelIcon from '@material-ui/icons/Cancel';
-import PageviewIcon from '@material-ui/icons/Pageview';
-import { makeBasicStyle } from "../common/helpers";
-import { theme } from "../lib/theme";
+import VpnKeyIcon from '@material-ui/icons/VpnKey'
+import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet'
+import { ValidatorClientContext } from '../contexts/ValidatorClient'
+import { ADMIN_ADDRESS } from '../pages/_app'
+import MenuIcon from '@material-ui/icons/Menu'
+import MonetizationOnIcon from '@material-ui/icons/MonetizationOn'
+import AttachMoneyIcon from '@material-ui/icons/AttachMoney'
+import MoneyOffIcon from '@material-ui/icons/MoneyOff'
+import HowToVoteIcon from '@material-ui/icons/HowToVote'
+import CancelIcon from '@material-ui/icons/Cancel'
+import PageviewIcon from '@material-ui/icons/Pageview'
+import { makeBasicStyle } from '../common/helpers'
+import { theme } from '../lib/theme'
 
 export default function MainNav() {
-    const classes = makeBasicStyle(theme);
+  const classes = makeBasicStyle(theme)
 
-    const { client } = useContext(ValidatorClientContext)
+  const { client } = useContext(ValidatorClientContext)
 
-    let adminPageDisplayed = false
+  let adminPageDisplayed = false
 
-    if (client !== null && client.address === ADMIN_ADDRESS) {
-        adminPageDisplayed = true
-    }
+  if (client !== null && client.address === ADMIN_ADDRESS) {
+    adminPageDisplayed = true
+  }
 
-    const [open, setOpen] = React.useState(false)
+  const [open, setOpen] = React.useState(false)
 
+  const toggleDrawer = () => {
+    setOpen((prevOpen) => !prevOpen)
+  }
 
-    const toggleDrawer = () => {
-        setOpen((prevOpen) => !prevOpen);
-    };
+  const closeDrawer = () => {
+    setOpen(false)
+  }
 
-    const closeDrawer = () => {
-        setOpen(false)
-    }
+  return (
+    <>
+      <AppBar position="absolute" color="default" className={classes.appBar}>
+        <Toolbar>
+          <IconButton
+            edge="start"
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="menu"
+            onClick={toggleDrawer}
+          >
+            <MenuIcon />
+          </IconButton>
 
-    return (
-        <React.Fragment>
-            <AppBar position="absolute" color="default" className={classes.appBar}>
-                <Toolbar>
-                    <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu" onClick={toggleDrawer}>
-                        <MenuIcon />
-                    </IconButton>
+          <Drawer anchor={'left'} open={open} onClose={closeDrawer}>
+            <div
+              className={classes.list}
+              role="presentation"
+              onClick={closeDrawer}
+            >
+              <List
+                component="nav"
+                aria-labelledby="list-header"
+                subheader={
+                  <ListSubheader id="list-header">Nym Wallet</ListSubheader>
+                }
+              >
+                <Divider />
 
-                    <Drawer anchor={'left'} open={open} onClose={closeDrawer}>
-                        <div
-                            className={classes.list}
-                            role="presentation"
-                            onClick={closeDrawer}
-                        >
-                            <List
-                                component="nav"
-                                aria-labelledby="list-header"
-                                subheader={
-                                    <ListSubheader id="list-header">
-                                        Nym Wallet
-                                    </ListSubheader>
-                                }
-                            >
-                                <Divider />
+                <ListItem button>
+                  <ListItemIcon>
+                    <AccountBalanceWalletIcon />
+                  </ListItemIcon>
+                  <Link href="/balanceCheck">
+                    <ListItemText primary="Check Balance" />
+                  </Link>
+                </ListItem>
 
-                                <ListItem button>
-                                    <ListItemIcon>
-                                        <AccountBalanceWalletIcon />
-                                    </ListItemIcon>
-                                    <Link href="/balanceCheck">
-                                        <ListItemText primary="Check Balance" />
-                                    </Link>
-                                </ListItem>
+                <ListItem button>
+                  <ListItemIcon>
+                    <MonetizationOnIcon />
+                  </ListItemIcon>
+                  <Link href="/send">
+                    <ListItemText primary="Send coins" />
+                  </Link>
+                </ListItem>
 
-                                <ListItem button>
-                                    <ListItemIcon>
-                                        <MonetizationOnIcon />
-                                    </ListItemIcon>
-                                    <Link href="/send">
-                                        <ListItemText primary="Send coins" />
-                                    </Link>
-                                </ListItem>
+                <ListItem button>
+                  <ListItemIcon>
+                    <MonetizationOnIcon />
+                  </ListItemIcon>
+                  <Link href="/receive">
+                    <ListItemText primary="Receive coins" />
+                  </Link>
+                </ListItem>
 
-                                <Divider />
+                <Divider />
 
-                                {/*<ListItem>*/}
-                                {/*    <ListItemText primary="Node management" secondary="bottom text"/>*/}
-                                {/*</ListItem>*/}
+                {/*<ListItem>*/}
+                {/*    <ListItemText primary="Node management" secondary="bottom text"/>*/}
+                {/*</ListItem>*/}
 
-                                <ListItem button>
-                                    <ListItemIcon>
-                                        <AttachMoneyIcon />
-                                    </ListItemIcon>
-                                    <Link href="/bond">
-                                        <ListItemText primary="Bond node" />
-                                    </Link>
-                                </ListItem>
+                <ListItem button>
+                  <ListItemIcon>
+                    <AttachMoneyIcon />
+                  </ListItemIcon>
+                  <Link href="/bond">
+                    <ListItemText primary="Bond node" />
+                  </Link>
+                </ListItem>
 
-                                <ListItem button>
-                                    <ListItemIcon>
-                                        <MoneyOffIcon />
-                                    </ListItemIcon>
-                                    <Link href="/unbond">
-                                        <ListItemText primary="Unbond node" />
-                                    </Link>
-                                </ListItem>
+                <ListItem button>
+                  <ListItemIcon>
+                    <MoneyOffIcon />
+                  </ListItemIcon>
+                  <Link href="/unbond">
+                    <ListItemText primary="Unbond node" />
+                  </Link>
+                </ListItem>
 
-                                <ListItem button>
-                                    <ListItemIcon>
-                                        <HowToVoteIcon />
-                                    </ListItemIcon>
-                                    <Link href="/delegateStake">
-                                        <ListItemText primary="Delegate stake" />
-                                    </Link>
-                                </ListItem>
+                <ListItem button>
+                  <ListItemIcon>
+                    <HowToVoteIcon />
+                  </ListItemIcon>
+                  <Link href="/delegateStake">
+                    <ListItemText primary="Delegate stake" />
+                  </Link>
+                </ListItem>
 
-                                <ListItem button>
-                                    <ListItemIcon>
-                                        <PageviewIcon />
-                                    </ListItemIcon>
-                                    <Link href="/checkDelegation">
-                                        <ListItemText primary="Check current delegation" />
-                                    </Link>
-                                </ListItem>
+                <ListItem button>
+                  <ListItemIcon>
+                    <CancelIcon />
+                  </ListItemIcon>
+                  <Link href="/undelegateStake">
+                    <ListItemText primary="Undelegate stake" />
+                  </Link>
+                </ListItem>
 
-                                <ListItem button>
-                                    <ListItemIcon>
-                                        <CancelIcon />
-                                    </ListItemIcon>
-                                    <Link href="/undelegateStake">
-                                        <ListItemText primary="Undelegate stake" />
-                                    </Link>
-                                </ListItem>
+                <ListItem button>
+                  <ListItemIcon>
+                    <PageviewIcon />
+                  </ListItemIcon>
+                  <Link href="/checkDelegation">
+                    <ListItemText primary="Check current delegation" />
+                  </Link>
+                </ListItem>
 
-                                {adminPageDisplayed &&
-                                    <React.Fragment>
-                                        <Divider />
-                                        <ListItem button>
-                                            <ListItemIcon>
-                                                <VpnKeyIcon />
-                                            </ListItemIcon>
+                {adminPageDisplayed && (
+                  <>
+                    <Divider />
+                    <ListItem button>
+                      <ListItemIcon>
+                        <VpnKeyIcon />
+                      </ListItemIcon>
 
-                                            <Link href="/admin">
-                                                <ListItemText primary="Admin" />
-                                            </Link>
-                                        </ListItem>
-                                    </React.Fragment>
-                                }
-                            </List>
-                        </div>
-                    </Drawer>
+                      <Link href="/admin">
+                        <ListItemText primary="Admin" />
+                      </Link>
+                    </ListItem>
+                  </>
+                )}
+              </List>
+            </div>
+          </Drawer>
 
-
-                    <Typography variant="h6" color="inherit" noWrap>
-                        Nym
-                    </Typography>
-                </Toolbar>
-            </AppBar>
-        </React.Fragment>
-    )
-}
\ No newline at end of file
+          <Typography variant="h6" color="inherit" noWrap>
+            Nym
+          </Typography>
+        </Toolbar>
+      </AppBar>
+    </>
+  )
+}
diff --git a/wallet-web/components/bond/NodeBond.tsx b/wallet-web/components/bond/NodeBond.tsx
index 3e14c4eaaa..57e27139c6 100644
--- a/wallet-web/components/bond/NodeBond.tsx
+++ b/wallet-web/components/bond/NodeBond.tsx
@@ -162,20 +162,8 @@ const 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>
+      <ExecFeeNotice name='bonding' />
+      {getBondContent()}
     </>
   )
 }
diff --git a/wallet-web/components/delegate/NodeDelegation.tsx b/wallet-web/components/delegate/NodeDelegation.tsx
index 92f7426939..6d50d54fad 100644
--- a/wallet-web/components/delegate/NodeDelegation.tsx
+++ b/wallet-web/components/delegate/NodeDelegation.tsx
@@ -102,20 +102,8 @@ const DelegateToNode = () => {
 
   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>
+      <ExecFeeNotice name={'delegating stake'} />
+      {getDelegationContent()}
     </>
   )
 }
diff --git a/wallet-web/components/delegation-check/DelegationCheck.tsx b/wallet-web/components/delegation-check/DelegationCheck.tsx
index db590eb710..c9805c6294 100644
--- a/wallet-web/components/delegation-check/DelegationCheck.tsx
+++ b/wallet-web/components/delegation-check/DelegationCheck.tsx
@@ -88,7 +88,7 @@ const DelegationCheck = () => {
           <NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType} />
           <NodeIdentityForm
             onSubmit={checkDelegation}
-            buttonText='Check stake value'
+            buttonText="Check stake value"
           />
         </>
       )
@@ -107,23 +107,7 @@ const DelegationCheck = () => {
     )
   }
 
-  return (
-    <>
-      <main className={classes.layout}>
-        <Paper className={classes.paper}>
-          <Typography
-            component='h1'
-            variant='h4'
-            align='center'
-            className={classes.wrapper}
-          >
-            Check your stake on a {nodeType}
-          </Typography>
-          {getDelegationCheckContent()}
-        </Paper>
-      </main>
-    </>
-  )
+  return <>{getDelegationCheckContent()}</>
 }
 
 export default DelegationCheck
diff --git a/wallet-web/components/unbond/UnbondNode.tsx b/wallet-web/components/unbond/UnbondNode.tsx
index 81d8cd7fe7..a7634bbf2c 100644
--- a/wallet-web/components/unbond/UnbondNode.tsx
+++ b/wallet-web/components/unbond/UnbondNode.tsx
@@ -127,20 +127,8 @@ const UnbondNode = () => {
 
   return (
     <>
-      <main className={classes.layout}>
-        <Paper className={classes.paper}>
-          <ExecFeeNotice name={'unbonding'} />
-          <Typography
-            component='h1'
-            variant='h4'
-            align='center'
-            className={classes.wrapper}
-          >
-            Unbond a {headerText}
-          </Typography>
-          {getUnbondContent()}
-        </Paper>
-      </main>
+      <ExecFeeNotice name={'unbonding'} />
+      {getUnbondContent()}
     </>
   )
 }
diff --git a/wallet-web/components/undelegate/NodeUndelegation.tsx b/wallet-web/components/undelegate/NodeUndelegation.tsx
index 34666e48e0..8ca1d13372 100644
--- a/wallet-web/components/undelegate/NodeUndelegation.tsx
+++ b/wallet-web/components/undelegate/NodeUndelegation.tsx
@@ -91,20 +91,8 @@ const UndelegateFromNode = () => {
 
   return (
     <>
-      <main className={classes.layout}>
-        <Paper className={classes.paper}>
-          <ExecFeeNotice name={'undelegating stake'} />
-          <Typography
-            component="h1"
-            variant="h4"
-            align="center"
-            className={classes.wrapper}
-          >
-            Undelegate stake from {nodeType}
-          </Typography>
-          {getUndelegationContent()}
-        </Paper>
-      </main>
+      <ExecFeeNotice name={'undelegating stake'} />
+      {getUndelegationContent()}
     </>
   )
 }
diff --git a/wallet-web/pages/balanceCheck.tsx b/wallet-web/pages/balanceCheck.tsx
index 7ac365a668..4f3e8f3e8c 100644
--- a/wallet-web/pages/balanceCheck.tsx
+++ b/wallet-web/pages/balanceCheck.tsx
@@ -1,52 +1,15 @@
 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',
-  },
-  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),
-  },
-}))
+import { Layout, NymCard } from '../components'
 
 export default function CheckBalance() {
-  const classes = useStyles()
   const router = useRouter()
 
   const { client } = useContext(ValidatorClientContext)
@@ -69,12 +32,8 @@ export default function CheckBalance() {
   return (
     <>
       <MainNav />
-      <main className={classes.layout}>
-        <Paper className={classes.paper}>
-          <Typography component='h1' variant='h4' align='center'>
-            Check Balance
-          </Typography>
-
+      <Layout>
+        <NymCard title="Check Balance">
           {client === null ? (
             <NoClientError />
           ) : (
@@ -82,27 +41,24 @@ export default function CheckBalance() {
               <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'
-                  onClick={getBalance}
-                  disabled={isBalanceLoading}
-                  className={classes.button}
-                  startIcon={<RefreshIcon />}
-                >
-                  Refresh
-                </Button>
-              </div>
+              <Button
+                variant="contained"
+                color="primary"
+                type="submit"
+                onClick={getBalance}
+                disabled={isBalanceLoading}
+                startIcon={<RefreshIcon />}
+              >
+                Refresh
+              </Button>
             </>
           )}
-        </Paper>
-      </main>
+        </NymCard>
+      </Layout>
     </>
   )
 }
diff --git a/wallet-web/pages/bond.tsx b/wallet-web/pages/bond.tsx
index ecb98778e8..f7d8573a9f 100644
--- a/wallet-web/pages/bond.tsx
+++ b/wallet-web/pages/bond.tsx
@@ -1,14 +1,19 @@
-import React from "react";
-import MainNav from "../components/MainNav";
-import BondNode from "../components/bond/NodeBond";
+import React from 'react'
+import MainNav from '../components/MainNav'
+import BondNode from '../components/bond/NodeBond'
+import { Layout, NymCard } from '../components'
 
 const Bond = () => {
-    return (
-        <React.Fragment>
-            <MainNav />
-            <BondNode/>
-        </React.Fragment>
-    );
+  return (
+    <>
+      <MainNav />
+      <Layout>
+        <NymCard title="Bond a Mixnode" subheader="Bond a mixnode or gateway">
+          <BondNode />
+        </NymCard>
+      </Layout>
+    </>
+  )
 }
 
-export default Bond
\ No newline at end of file
+export default Bond
diff --git a/wallet-web/pages/checkDelegation.tsx b/wallet-web/pages/checkDelegation.tsx
index f3606a135f..2d592a106a 100644
--- a/wallet-web/pages/checkDelegation.tsx
+++ b/wallet-web/pages/checkDelegation.tsx
@@ -1,14 +1,22 @@
-import React from "react";
-import MainNav from "../components/MainNav";
-import DelegationCheck from "../components/delegation-check/DelegationCheck";
+import React from 'react'
+import MainNav from '../components/MainNav'
+import DelegationCheck from '../components/delegation-check/DelegationCheck'
+import { Layout, NymCard } from '../components'
 
 const CheckDelegation = () => {
-    return (
-        <React.Fragment>
-            <MainNav />
-            <DelegationCheck />
-        </React.Fragment>
-    );
+  return (
+    <>
+      <MainNav />
+      <Layout>
+        <NymCard
+          title="Check Stake"
+          subheader="Check your stake on a mixnode or gateway"
+        >
+          <DelegationCheck />
+        </NymCard>
+      </Layout>
+    </>
+  )
 }
 
-export default CheckDelegation
\ No newline at end of file
+export default CheckDelegation
diff --git a/wallet-web/pages/delegateStake.tsx b/wallet-web/pages/delegateStake.tsx
index 3eed5c30ca..f2e69c013e 100644
--- a/wallet-web/pages/delegateStake.tsx
+++ b/wallet-web/pages/delegateStake.tsx
@@ -1,14 +1,19 @@
-import React from "react";
-import MainNav from "../components/MainNav";
-import NodeDelegation from "../components/delegate/NodeDelegation";
+import React from 'react'
+import MainNav from '../components/MainNav'
+import NodeDelegation from '../components/delegate/NodeDelegation'
+import { Layout, NymCard } from '../components'
 
 const DelegateStake = () => {
-    return (
-        <React.Fragment>
-            <MainNav />
-            <NodeDelegation />
-        </React.Fragment>
-    );
+  return (
+    <>
+      <MainNav />
+      <Layout>
+        <NymCard title="Delegate" subheader="Delegate to Mixnode or Gateway">
+          <NodeDelegation />
+        </NymCard>
+      </Layout>
+    </>
+  )
 }
 
-export default DelegateStake
\ No newline at end of file
+export default DelegateStake
diff --git a/wallet-web/pages/receive.tsx b/wallet-web/pages/receive.tsx
new file mode 100644
index 0000000000..2cc134faf3
--- /dev/null
+++ b/wallet-web/pages/receive.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import MainNav from '../components/MainNav'
+
+const Receive = () => {
+  return (
+    <>
+      <MainNav />
+      <div />
+    </>
+  )
+}
+
+export default Receive
diff --git a/wallet-web/pages/send.tsx b/wallet-web/pages/send.tsx
index 5d9dc46df4..611824bbd4 100644
--- a/wallet-web/pages/send.tsx
+++ b/wallet-web/pages/send.tsx
@@ -1,57 +1,19 @@
 import React, { useContext } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import Paper from '@material-ui/core/Paper'
+import { printableBalanceToNative } from '@nymproject/nym-validator-client/dist/currency'
+import { coin, Coin, printableCoin } from '@nymproject/nym-validator-client'
 import Stepper from '@material-ui/core/Stepper'
 import Step from '@material-ui/core/Step'
 import StepLabel from '@material-ui/core/StepLabel'
 import Button from '@material-ui/core/Button'
 import Typography from '@material-ui/core/Typography'
+import { Layout, NymCard } from '../components'
 import { Review } from '../components/send-funds/Review'
 import SendNymForm from '../components/send-funds/SendNymForm'
-import { coin, Coin, printableCoin } from '@nymproject/nym-validator-client'
 import Confirmation from '../components/Confirmation'
 import MainNav from '../components/MainNav'
 import { ValidatorClientContext } from '../contexts/ValidatorClient'
 import NoClientError from '../components/NoClientError'
 import { UDENOM } from './_app'
-import { printableBalanceToNative } from '@nymproject/nym-validator-client/dist/currency'
-
-const useStyles = makeStyles((theme) => ({
-  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',
-    },
-  },
-  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),
-    },
-  },
-  stepper: {
-    padding: theme.spacing(3, 0, 5),
-  },
-  buttons: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-  },
-  button: {
-    marginTop: theme.spacing(3),
-    marginLeft: theme.spacing(1),
-  },
-}))
 
 const steps = ['Enter addresses', 'Review & send', 'Await confirmation']
 
@@ -80,9 +42,9 @@ export default function SendFunds() {
         return (
           <Confirmation
             isLoading={isLoading}
-            progressMessage='Funds transfer is in progress...'
+            progressMessage="Funds transfer is in progress..."
             successMessage={successMessage}
-            failureMessage='Failed to complete the transfer'
+            failureMessage="Failed to complete the transfer"
             error={sendingError}
           />
         )
@@ -90,8 +52,6 @@ export default function SendFunds() {
         throw new Error('Unknown step')
     }
   }
-
-  const classes = useStyles()
   const { client } = useContext(ValidatorClientContext)
 
   console.log('client in send', client)
@@ -190,7 +150,7 @@ export default function SendFunds() {
   const getStepperContent = () => {
     return (
       <>
-        <Stepper activeStep={activeStep} className={classes.stepper}>
+        <Stepper activeStep={activeStep}>
           {steps.map((label) => (
             <Step key={label}>
               <StepLabel>{label}</StepLabel>
@@ -200,16 +160,16 @@ export default function SendFunds() {
         <>
           {activeStep === steps.length ? (
             <>
-              <Typography variant='h5' gutterBottom>
+              <Typography variant="h5" gutterBottom>
                 Payment complete.
               </Typography>
-              <Typography variant='subtitle1'>
+              <Typography variant="subtitle1">
                 You (<b>{transaction.sender}</b>)
               </Typography>
-              <Typography variant='subtitle1'>
+              <Typography variant="subtitle1">
                 have sent <b>{printableCoin(transaction.coin)}</b>
               </Typography>
-              <Typography variant='subtitle1'>
+              <Typography variant="subtitle1">
                 to <b>{transaction.recipient}</b>.
               </Typography>
             </>
@@ -217,18 +177,15 @@ export default function SendFunds() {
             <>
               <form onSubmit={handleNext}>
                 {getStepContent(activeStep)}
-                <div className={classes.buttons}>
+                <div>
                   {activeStep !== 0 && (
-                    <Button onClick={handleBack} className={classes.button}>
-                      Back
-                    </Button>
+                    <Button onClick={handleBack}>Back</Button>
                   )}
                   <Button
-                    variant='contained'
-                    color='primary'
-                    type='submit'
+                    variant="contained"
+                    color="primary"
+                    type="submit"
                     disabled={checkButtonDisabled()}
-                    className={classes.button}
                   >
                     {activeStep === 1
                       ? 'Send'
@@ -248,15 +205,11 @@ export default function SendFunds() {
   return (
     <>
       <MainNav />
-      <main className={classes.layout}>
-        <Paper className={classes.paper}>
-          <Typography component='h1' variant='h4' align='center'>
-            Send Nym
-          </Typography>
-
+      <Layout>
+        <NymCard title="Send Nym">
           {client === null ? <NoClientError /> : getStepperContent()}
-        </Paper>
-      </main>
+        </NymCard>
+      </Layout>
     </>
   )
 }
diff --git a/wallet-web/pages/unbond.tsx b/wallet-web/pages/unbond.tsx
index 880d685919..f2ac5de08f 100644
--- a/wallet-web/pages/unbond.tsx
+++ b/wallet-web/pages/unbond.tsx
@@ -1,14 +1,19 @@
-import React from "react";
-import MainNav from "../components/MainNav";
-import UnbondNode from "../components/unbond/UnbondNode";
+import React from 'react'
+import { Layout, NymCard } from '../components'
+import MainNav from '../components/MainNav'
+import UnbondNode from '../components/unbond/UnbondNode'
 
 const Unbond = () => {
-    return (
-        <React.Fragment>
-            <MainNav/>
-            <UnbondNode />
-        </React.Fragment>
-    );
+  return (
+    <>
+      <MainNav />
+      <Layout>
+        <NymCard title="Unbond" subheader="Unbond a Mixnode or Gateway">
+          <UnbondNode />
+        </NymCard>
+      </Layout>
+    </>
+  )
 }
 
-export default Unbond
\ No newline at end of file
+export default Unbond
diff --git a/wallet-web/pages/undelegateStake.tsx b/wallet-web/pages/undelegateStake.tsx
index 95b30291b6..96c80566df 100644
--- a/wallet-web/pages/undelegateStake.tsx
+++ b/wallet-web/pages/undelegateStake.tsx
@@ -1,14 +1,22 @@
-import React from "react";
-import MainNav from "../components/MainNav";
-import NodeUndelegation from "../components/undelegate/NodeUndelegation";
+import React from 'react'
+import { Layout, NymCard } from '../components'
+import MainNav from '../components/MainNav'
+import NodeUndelegation from '../components/undelegate/NodeUndelegation'
 
 const UndelegateStake = () => {
-    return (
-        <React.Fragment>
-            <MainNav />
-            <NodeUndelegation />
-        </React.Fragment>
-    );
+  return (
+    <>
+      <MainNav />
+      <Layout>
+        <NymCard
+          title="Undelegate"
+          subheader="Undelegate from a Mixnode or Gateway"
+        >
+          <NodeUndelegation />
+        </NymCard>
+      </Layout>
+    </>
+  )
 }
 
-export default UndelegateStake
\ No newline at end of file
+export default UndelegateStake

From 68956456ddd7b45487ec53511e7816c1fc319fe7 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 27 Jul 2021 17:24:23 +0100
Subject: [PATCH 05/11] style updates

---
 wallet-web/components/NymCard.tsx             |   1 +
 wallet-web/components/bond/BondNodeForm.tsx   |  80 +++++-----
 wallet-web/components/bond/NodeBond.tsx       |  22 +--
 .../components/delegate/NodeDelegation.tsx    |  21 +--
 .../delegation-check/DelegationCheck.tsx      |   7 +-
 .../components/send-funds/SendNymForm.tsx     | 141 +++++++++---------
 wallet-web/components/unbond/UnbondNode.tsx   |  18 ++-
 .../undelegate/NodeUndelegation.tsx           |  17 ++-
 wallet-web/pages/balanceCheck.tsx             |  46 +++---
 wallet-web/pages/send.tsx                     |  28 ++--
 10 files changed, 200 insertions(+), 181 deletions(-)

diff --git a/wallet-web/components/NymCard.tsx b/wallet-web/components/NymCard.tsx
index a47d114832..6c2f93c19b 100644
--- a/wallet-web/components/NymCard.tsx
+++ b/wallet-web/components/NymCard.tsx
@@ -17,6 +17,7 @@ export const NymCard = ({
         title={title}
         subheader={subheader}
         titleTypographyProps={{ variant: 'h5' }}
+        subheaderTypographyProps={{ variant: 'subtitle1' }}
         style={{
           padding: theme.spacing(2.5),
           borderBottom: `1px solid ${theme.palette.grey[200]}`,
diff --git a/wallet-web/components/bond/BondNodeForm.tsx b/wallet-web/components/bond/BondNodeForm.tsx
index 2ec27987b2..5d3735e59c 100644
--- a/wallet-web/components/bond/BondNodeForm.tsx
+++ b/wallet-web/components/bond/BondNodeForm.tsx
@@ -2,13 +2,13 @@ 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,
+  Grid,
+  TextField,
 } from '@material-ui/core'
 import bs58 from 'bs58'
 import semver from 'semver'
@@ -310,8 +310,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})`}
@@ -326,7 +326,7 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
             fullWidth
             InputProps={{
               endAdornment: (
-                <InputAdornment position='end'>{DENOM}</InputAdornment>
+                <InputAdornment position="end">{DENOM}</InputAdornment>
               ),
             }}
             onChange={handleAmountChange}
@@ -343,9 +343,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>
@@ -353,9 +353,9 @@ 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' }
@@ -366,9 +366,9 @@ 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)' }
@@ -382,9 +382,9 @@ 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' }
@@ -397,9 +397,9 @@ 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
               ? {
@@ -418,7 +418,7 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
                 onChange={handleCheckboxToggle}
               />
             }
-            label='Show advanced options'
+            label="Show advanced options"
           />
         </Grid>
 
@@ -427,10 +427,10 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
             <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
@@ -445,10 +445,10 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
                 <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}
                   />
@@ -457,10 +457,10 @@ 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}
                   />
@@ -470,10 +470,10 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
               <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}
                 />
@@ -485,9 +485,9 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
 
       <div className={classes.buttons}>
         <Button
-          variant='contained'
-          color='primary'
-          type='submit'
+          variant="contained"
+          color="primary"
+          type="submit"
           className={classes.button}
           disabled={!isValidAmount}
         >
diff --git a/wallet-web/components/bond/NodeBond.tsx b/wallet-web/components/bond/NodeBond.tsx
index 57e27139c6..f2c5727c2b 100644
--- a/wallet-web/components/bond/NodeBond.tsx
+++ b/wallet-web/components/bond/NodeBond.tsx
@@ -2,6 +2,8 @@ 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 { coin } from '@nymproject/nym-validator-client'
+import { printableBalanceToNative } from '@nymproject/nym-validator-client/dist/currency'
 import Confirmation from '../Confirmation'
 import { ValidatorClientContext } from '../../contexts/ValidatorClient'
 import NoClientError from '../NoClientError'
@@ -13,8 +15,6 @@ 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 = {
@@ -111,7 +111,7 @@ const BondNode = () => {
             <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>.
+              <Link href="/unbond">unbond the existing one</Link>.
             </Typography>
           </Grid>
         </Grid>
@@ -126,7 +126,7 @@ const BondNode = () => {
             <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>.
+              <Link href="/unbond">unbond the existing one</Link>.
             </Typography>
           </Grid>
         </Grid>
@@ -136,7 +136,7 @@ const BondNode = () => {
     // we haven't clicked bond button yet
     if (!isLoading) {
       return (
-        <>
+        <Paper style={{ padding: theme.spacing(3) }}>
           <NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType} />
           <BondNodeForm
             onSubmit={bondNode}
@@ -144,7 +144,7 @@ const BondNode = () => {
             minimumGatewayBond={minimumGatewayBond}
             minimumMixnodeBond={minimumMixnodeBond}
           />
-        </>
+        </Paper>
       )
     }
 
@@ -161,10 +161,12 @@ const BondNode = () => {
   }
 
   return (
-    <>
-      <ExecFeeNotice name='bonding' />
-      {getBondContent()}
-    </>
+    <Grid container spacing={2} direction="column">
+      <Grid item>
+        <ExecFeeNotice name="bonding" />
+      </Grid>
+      <Grid item>{getBondContent()}</Grid>
+    </Grid>
   )
 }
 
diff --git a/wallet-web/components/delegate/NodeDelegation.tsx b/wallet-web/components/delegate/NodeDelegation.tsx
index 6d50d54fad..fcad76ccad 100644
--- a/wallet-web/components/delegate/NodeDelegation.tsx
+++ b/wallet-web/components/delegate/NodeDelegation.tsx
@@ -1,15 +1,14 @@
 import React, { useContext, useEffect } from 'react'
-import { Paper } from '@material-ui/core'
-import Typography from '@material-ui/core/Typography'
+import { Grid, Paper } from '@material-ui/core'
+import { coin, printableCoin } from '@nymproject/nym-validator-client'
 import { useRouter } from 'next/router'
+import { printableBalanceToNative } from '@nymproject/nym-validator-client/dist/currency'
 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'
@@ -81,10 +80,10 @@ const DelegateToNode = () => {
     // we haven't clicked delegate button yet
     if (!isLoading) {
       return (
-        <>
+        <Paper style={{ padding: theme.spacing(3) }}>
           <NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType} />
           <DelegateForm onSubmit={delegateToNode} />
-        </>
+        </Paper>
       )
     }
 
@@ -101,10 +100,12 @@ const DelegateToNode = () => {
   }
 
   return (
-    <>
-      <ExecFeeNotice name={'delegating stake'} />
-      {getDelegationContent()}
-    </>
+    <Grid container spacing={2} direction="column">
+      <Grid item>
+        <ExecFeeNotice name={'delegating stake'} />
+      </Grid>
+      <Grid item> {getDelegationContent()}</Grid>
+    </Grid>
   )
 }
 
diff --git a/wallet-web/components/delegation-check/DelegationCheck.tsx b/wallet-web/components/delegation-check/DelegationCheck.tsx
index c9805c6294..e428397f36 100644
--- a/wallet-web/components/delegation-check/DelegationCheck.tsx
+++ b/wallet-web/components/delegation-check/DelegationCheck.tsx
@@ -1,7 +1,6 @@
 import React, { useContext, useEffect } from 'react'
-import { printableCoin } from '@nymproject/nym-validator-client'
 import { Paper } from '@material-ui/core'
-import Typography from '@material-ui/core/Typography'
+import { printableCoin } from '@nymproject/nym-validator-client'
 import { useRouter } from 'next/router'
 import { ValidatorClientContext } from '../../contexts/ValidatorClient'
 import { NodeType } from '../../common/node'
@@ -84,13 +83,13 @@ const DelegationCheck = () => {
     // we haven't clicked delegate button yet
     if (!isLoading && !stakeValue) {
       return (
-        <>
+        <Paper style={{ padding: theme.spacing(3) }}>
           <NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType} />
           <NodeIdentityForm
             onSubmit={checkDelegation}
             buttonText="Check stake value"
           />
-        </>
+        </Paper>
       )
     }
 
diff --git a/wallet-web/components/send-funds/SendNymForm.tsx b/wallet-web/components/send-funds/SendNymForm.tsx
index 76e8500aa2..a6e7ddc624 100644
--- a/wallet-web/components/send-funds/SendNymForm.tsx
+++ b/wallet-web/components/send-funds/SendNymForm.tsx
@@ -1,81 +1,78 @@
-import React from 'react';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import TextField from '@material-ui/core/TextField';
-import { DENOM } from '../../pages/_app';
-import { InputAdornment } from "@material-ui/core";
+import React from 'react'
+import Grid from '@material-ui/core/Grid'
+import Typography from '@material-ui/core/Typography'
+import TextField from '@material-ui/core/TextField'
+import { DENOM } from '../../pages/_app'
+import { InputAdornment } from '@material-ui/core'
 
 type SendNymFormProps = {
-    address: string,
-    setFormStatus: (nonEmpty: boolean) => void,
+  address: string
+  setFormStatus: (nonEmpty: boolean) => void
 }
 
-export default function SendNymForm({ address, setFormStatus }: SendNymFormProps) {
-    const [recipientHasValue, setRecipientHasValue] = React.useState(false)
-    const [amountHasValue, setAmountHasValue] = React.useState(false)
-    const [validAmount, setValidAmount] = React.useState(true)
-
-    const handleInputData = (element) => (event) => {
-        if (element === "recipient") {
-            let nonZeroRecipient = event.target.value.length > 0
-            setRecipientHasValue(nonZeroRecipient)
-            setFormStatus(nonZeroRecipient && amountHasValue)
-        } else if (element === "amount") {
-            let nonZeroAmount = event.target.value.length > 0
-            setAmountHasValue(nonZeroAmount)
-            setFormStatus(recipientHasValue && nonZeroAmount)
-            if (nonZeroAmount) {
-                // 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
-                if (isNaN(parsed)) {
-                    setValidAmount(false)
-                } else {
-                    setValidAmount(true)
-                }
-            }
+export default function SendNymForm({
+  address,
+  setFormStatus,
+}: SendNymFormProps) {
+  const [recipientHasValue, setRecipientHasValue] = React.useState(false)
+  const [amountHasValue, setAmountHasValue] = React.useState(false)
+  const [validAmount, setValidAmount] = React.useState(true)
 
+  const handleInputData = (element) => (event) => {
+    if (element === 'recipient') {
+      let nonZeroRecipient = event.target.value.length > 0
+      setRecipientHasValue(nonZeroRecipient)
+      setFormStatus(nonZeroRecipient && amountHasValue)
+    } else if (element === 'amount') {
+      let nonZeroAmount = event.target.value.length > 0
+      setAmountHasValue(nonZeroAmount)
+      setFormStatus(recipientHasValue && nonZeroAmount)
+      if (nonZeroAmount) {
+        // 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
+        if (isNaN(parsed)) {
+          setValidAmount(false)
+        } else {
+          setValidAmount(true)
         }
-
+      }
     }
+  }
 
-    return (
-        <React.Fragment>
-            <Typography variant="h6" gutterBottom>
-                Enter recipient address and the amount
-            </Typography>
-            <Grid container spacing={3}>
-                <Grid item xs={12}>
-                    <Typography variant="h6">Sending from {address}</Typography>
-                </Grid>
-                <Grid item xs={12}>
-                    <TextField
-                        required
-                        id="recipient"
-                        name="recipient"
-                        label="Recipient address"
-                        onChange={handleInputData("recipient")}
-                        fullWidth
-                    />
-                </Grid>
-                <Grid item xs={12} sm={6}>
-                    <TextField
-                        required
-                        id="amount"
-                        name="amount"
-                        label="Amount"
-                        error={!validAmount}
-                        helperText={validAmount ? "" : "Please enter a valid amount"}
-                        onChange={handleInputData("amount")}
-                        fullWidth
-                        InputProps={{
-                            endAdornment:
-                            <InputAdornment position="end">{DENOM}</InputAdornment>
-                        }}
-                    />
-                </Grid>
-            </Grid>
-        </React.Fragment>
-    );
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12}>
+        <Typography variant="subtitle1">Sending from {address}</Typography>
+      </Grid>
+      <Grid item xs={12}>
+        <TextField
+          required
+          id="recipient"
+          name="recipient"
+          label="Recipient address"
+          onChange={handleInputData('recipient')}
+          fullWidth
+        />
+      </Grid>
+      <Grid item xs={12} sm={6}>
+        <TextField
+          required
+          id="amount"
+          name="amount"
+          label="Amount"
+          error={!validAmount}
+          helperText={validAmount ? '' : 'Please enter a valid amount'}
+          onChange={handleInputData('amount')}
+          fullWidth
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">{DENOM}</InputAdornment>
+            ),
+          }}
+        />
+      </Grid>
+    </Grid>
+  )
 }
diff --git a/wallet-web/components/unbond/UnbondNode.tsx b/wallet-web/components/unbond/UnbondNode.tsx
index a7634bbf2c..87e8ae93cd 100644
--- a/wallet-web/components/unbond/UnbondNode.tsx
+++ b/wallet-web/components/unbond/UnbondNode.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useEffect } from 'react'
-import Typography from '@material-ui/core/Typography'
-import { Grid, LinearProgress, Paper } from '@material-ui/core'
+import { Grid, LinearProgress, Typography } from '@material-ui/core'
+import { Alert } from '@material-ui/lab'
 import { useRouter } from 'next/router'
 import { NodeType } from '../../common/node'
 import { ValidatorClientContext } from '../../contexts/ValidatorClient'
@@ -95,9 +95,9 @@ const UnbondNode = () => {
       return (
         <Grid container spacing={3}>
           <Grid item xs={12}>
-            <Typography gutterBottom>
+            <Alert severity="info">
               You do not currently have a mixnode or a gateway bonded.
-            </Typography>
+            </Alert>
           </Grid>
         </Grid>
       )
@@ -126,10 +126,12 @@ const UnbondNode = () => {
   }
 
   return (
-    <>
-      <ExecFeeNotice name={'unbonding'} />
-      {getUnbondContent()}
-    </>
+    <Grid container spacing={2} direction="column">
+      <Grid item>
+        <ExecFeeNotice name={'unbonding'} />
+      </Grid>
+      <Grid item> {getUnbondContent()}</Grid>
+    </Grid>
   )
 }
 
diff --git a/wallet-web/components/undelegate/NodeUndelegation.tsx b/wallet-web/components/undelegate/NodeUndelegation.tsx
index 8ca1d13372..b7e5a1b884 100644
--- a/wallet-web/components/undelegate/NodeUndelegation.tsx
+++ b/wallet-web/components/undelegate/NodeUndelegation.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useEffect } from 'react'
-import { Paper } from '@material-ui/core'
-import Typography from '@material-ui/core/Typography'
+import { Grid, Paper } from '@material-ui/core'
 import { useRouter } from 'next/router'
 import { ValidatorClientContext } from '../../contexts/ValidatorClient'
 import { NodeType } from '../../common/node'
@@ -67,13 +66,13 @@ const UndelegateFromNode = () => {
     // we haven't clicked undelegate button yet
     if (!isLoading) {
       return (
-        <React.Fragment>
+        <Paper style={{ padding: theme.spacing(3) }}>
           <NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType} />
           <NodeIdentityForm
             onSubmit={undelegateFromNode}
             buttonText={'Remove delegation'}
           />
-        </React.Fragment>
+        </Paper>
       )
     }
 
@@ -90,10 +89,12 @@ const UndelegateFromNode = () => {
   }
 
   return (
-    <>
-      <ExecFeeNotice name={'undelegating stake'} />
-      {getUndelegationContent()}
-    </>
+    <Grid container spacing={2} direction="column">
+      <Grid item>
+        <ExecFeeNotice name={'undelegating stake'} />
+      </Grid>
+      <Grid item>{getUndelegationContent()}</Grid>
+    </Grid>
   )
 }
 
diff --git a/wallet-web/pages/balanceCheck.tsx b/wallet-web/pages/balanceCheck.tsx
index 4f3e8f3e8c..025855a44c 100644
--- a/wallet-web/pages/balanceCheck.tsx
+++ b/wallet-web/pages/balanceCheck.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect } from 'react'
-import Button from '@material-ui/core/Button'
+import { Grid, Button } from '@material-ui/core'
 import RefreshIcon from '@material-ui/icons/Refresh'
 import { useRouter } from 'next/router'
 import { ValidatorClientContext } from '../contexts/ValidatorClient'
@@ -37,25 +37,31 @@ export default function CheckBalance() {
           {client === null ? (
             <NoClientError />
           ) : (
-            <>
-              <Confirmation
-                isLoading={isBalanceLoading}
-                error={balanceCheckError}
-                progressMessage="Checking balance..."
-                successMessage={balanceMessage}
-                failureMessage="Failed to check the account balance!"
-              />
-              <Button
-                variant="contained"
-                color="primary"
-                type="submit"
-                onClick={getBalance}
-                disabled={isBalanceLoading}
-                startIcon={<RefreshIcon />}
-              >
-                Refresh
-              </Button>
-            </>
+            <Grid container direction="column" spacing={2}>
+              <Grid item>
+                <Confirmation
+                  isLoading={isBalanceLoading}
+                  error={balanceCheckError}
+                  progressMessage="Checking balance..."
+                  successMessage={balanceMessage}
+                  failureMessage="Failed to check the account balance!"
+                />
+              </Grid>
+              <Grid item>
+                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    type="submit"
+                    onClick={getBalance}
+                    disabled={isBalanceLoading}
+                    startIcon={<RefreshIcon />}
+                  >
+                    Refresh
+                  </Button>
+                </div>
+              </Grid>
+            </Grid>
           )}
         </NymCard>
       </Layout>
diff --git a/wallet-web/pages/send.tsx b/wallet-web/pages/send.tsx
index 611824bbd4..3290822cb4 100644
--- a/wallet-web/pages/send.tsx
+++ b/wallet-web/pages/send.tsx
@@ -1,11 +1,15 @@
 import React, { useContext } from 'react'
 import { printableBalanceToNative } from '@nymproject/nym-validator-client/dist/currency'
 import { coin, Coin, printableCoin } from '@nymproject/nym-validator-client'
-import Stepper from '@material-ui/core/Stepper'
-import Step from '@material-ui/core/Step'
-import StepLabel from '@material-ui/core/StepLabel'
-import Button from '@material-ui/core/Button'
-import Typography from '@material-ui/core/Typography'
+import {
+  Paper,
+  Stepper,
+  Step,
+  StepLabel,
+  Button,
+  Typography,
+} from '@material-ui/core'
+import { theme } from '../lib/theme'
 import { Layout, NymCard } from '../components'
 import { Review } from '../components/send-funds/Review'
 import SendNymForm from '../components/send-funds/SendNymForm'
@@ -149,8 +153,8 @@ export default function SendFunds() {
 
   const getStepperContent = () => {
     return (
-      <>
-        <Stepper activeStep={activeStep}>
+      <Paper style={{ padding: theme.spacing(3) }}>
+        <Stepper activeStep={activeStep} style={{ paddingLeft: 0 }}>
           {steps.map((label) => (
             <Step key={label}>
               <StepLabel>{label}</StepLabel>
@@ -177,7 +181,13 @@ export default function SendFunds() {
             <>
               <form onSubmit={handleNext}>
                 {getStepContent(activeStep)}
-                <div>
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    padding: theme.spacing(1, 0),
+                  }}
+                >
                   {activeStep !== 0 && (
                     <Button onClick={handleBack}>Back</Button>
                   )}
@@ -198,7 +208,7 @@ export default function SendFunds() {
             </>
           )}
         </>
-      </>
+      </Paper>
     )
   }
 

From b034a07439553738657f463fc7b24ed9ed8ac73c Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 27 Jul 2021 17:50:42 +0100
Subject: [PATCH 06/11] display alert when no client detected

---
 wallet-web/components/Layout.tsx |  2 +-
 wallet-web/pages/receive.tsx     | 43 +++++++++++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/wallet-web/components/Layout.tsx b/wallet-web/components/Layout.tsx
index 4200d6ab88..09befee3bc 100644
--- a/wallet-web/components/Layout.tsx
+++ b/wallet-web/components/Layout.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Grid, Theme, useTheme, useMediaQuery } from '@material-ui/core'
+import { Grid, Theme, useTheme } from '@material-ui/core'
 
 export const Layout = ({ children }: { children: React.ReactElement }) => {
   const theme: Theme = useTheme()
diff --git a/wallet-web/pages/receive.tsx b/wallet-web/pages/receive.tsx
index 2cc134faf3..da250046ae 100644
--- a/wallet-web/pages/receive.tsx
+++ b/wallet-web/pages/receive.tsx
@@ -1,11 +1,52 @@
+import { useMediaQuery } from '@material-ui/core'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Grid,
+  Typography,
+} from '@material-ui/core'
 import React from 'react'
+import { useContext } from 'react'
+import { Layout, NymCard } from '../components'
 import MainNav from '../components/MainNav'
+import NoClientError from '../components/NoClientError'
+import { ValidatorClientContext } from '../contexts/ValidatorClient'
 
 const Receive = () => {
+  const { client } = useContext(ValidatorClientContext)
+  const matches = useMediaQuery('(min-width:769px)')
+
   return (
     <>
       <MainNav />
-      <div />
+      <Layout>
+        <NymCard title="Receive Nym">
+          {!client ? (
+            <NoClientError />
+          ) : (
+            <Grid container direction="column" spacing={1}>
+              <Grid item>
+                <Typography variant="subtitle1" noWrap={false}>
+                  You can receive tokens by providing this address to the sender
+                </Typography>
+              </Grid>
+              <Grid item>
+                <Card>
+                  <CardContent>
+                    <Typography
+                      variant={matches ? 'h5' : 'subtitle1'}
+                      style={{ wordBreak: 'break-word' }}
+                    >
+                      {client?.address}
+                    </Typography>
+                  </CardContent>
+                </Card>
+              </Grid>
+            </Grid>
+          )}
+        </NymCard>
+      </Layout>
     </>
   )
 }

From 75f098f002f88e939f11c2df78bcb1e8f5f5e6ac Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 27 Jul 2021 20:07:23 +0100
Subject: [PATCH 07/11] style update

---
 wallet-web/components/NymCard.tsx | 2 +-
 wallet-web/pages/bond.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/wallet-web/components/NymCard.tsx b/wallet-web/components/NymCard.tsx
index 6c2f93c19b..0c0112afa7 100644
--- a/wallet-web/components/NymCard.tsx
+++ b/wallet-web/components/NymCard.tsx
@@ -12,7 +12,7 @@ export const NymCard = ({
 }) => {
   const theme = useTheme()
   return (
-    <Card>
+    <Card variant="outlined">
       <CardHeader
         title={title}
         subheader={subheader}
diff --git a/wallet-web/pages/bond.tsx b/wallet-web/pages/bond.tsx
index f7d8573a9f..27a48a1e39 100644
--- a/wallet-web/pages/bond.tsx
+++ b/wallet-web/pages/bond.tsx
@@ -8,7 +8,7 @@ const Bond = () => {
     <>
       <MainNav />
       <Layout>
-        <NymCard title="Bond a Mixnode" subheader="Bond a mixnode or gateway">
+        <NymCard title="Bond" subheader="Bond a mixnode or gateway">
           <BondNode />
         </NymCard>
       </Layout>

From e8622a190a0f975330409621203f963d06a15e80 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Wed, 28 Jul 2021 10:53:37 +0100
Subject: [PATCH 08/11] layout and icon updates

---
 wallet-web/components/MainNav.tsx             | 34 ++++++++++++-------
 wallet-web/components/bond/NodeBond.tsx       |  8 +++--
 .../components/delegate/NodeDelegation.tsx    | 10 ++++--
 .../delegation-check/DelegationCheck.tsx      | 10 ++++--
 wallet-web/components/unbond/UnbondNode.tsx   |  8 +++--
 .../undelegate/NodeUndelegation.tsx           | 10 ++++--
 6 files changed, 53 insertions(+), 27 deletions(-)

diff --git a/wallet-web/components/MainNav.tsx b/wallet-web/components/MainNav.tsx
index 5e4fb5c031..9f5ea4cebb 100644
--- a/wallet-web/components/MainNav.tsx
+++ b/wallet-web/components/MainNav.tsx
@@ -18,12 +18,20 @@ import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet'
 import { ValidatorClientContext } from '../contexts/ValidatorClient'
 import { ADMIN_ADDRESS } from '../pages/_app'
 import MenuIcon from '@material-ui/icons/Menu'
-import MonetizationOnIcon from '@material-ui/icons/MonetizationOn'
-import AttachMoneyIcon from '@material-ui/icons/AttachMoney'
-import MoneyOffIcon from '@material-ui/icons/MoneyOff'
-import HowToVoteIcon from '@material-ui/icons/HowToVote'
-import CancelIcon from '@material-ui/icons/Cancel'
-import PageviewIcon from '@material-ui/icons/Pageview'
+import {
+  MonetizationOn,
+  AttachMoney,
+  MoneyOff,
+  HowToVote,
+  Cancel,
+  Pageview,
+  ArrowRightAlt,
+  ArrowLeft,
+  ArrowRightSharp,
+  ArrowForward,
+  ArrowBack,
+} from '@material-ui/icons'
+
 import { makeBasicStyle } from '../common/helpers'
 import { theme } from '../lib/theme'
 
@@ -88,7 +96,7 @@ export default function MainNav() {
 
                 <ListItem button>
                   <ListItemIcon>
-                    <MonetizationOnIcon />
+                    <ArrowForward />
                   </ListItemIcon>
                   <Link href="/send">
                     <ListItemText primary="Send coins" />
@@ -97,7 +105,7 @@ export default function MainNav() {
 
                 <ListItem button>
                   <ListItemIcon>
-                    <MonetizationOnIcon />
+                    <ArrowBack />
                   </ListItemIcon>
                   <Link href="/receive">
                     <ListItemText primary="Receive coins" />
@@ -112,7 +120,7 @@ export default function MainNav() {
 
                 <ListItem button>
                   <ListItemIcon>
-                    <AttachMoneyIcon />
+                    <AttachMoney />
                   </ListItemIcon>
                   <Link href="/bond">
                     <ListItemText primary="Bond node" />
@@ -121,7 +129,7 @@ export default function MainNav() {
 
                 <ListItem button>
                   <ListItemIcon>
-                    <MoneyOffIcon />
+                    <MoneyOff />
                   </ListItemIcon>
                   <Link href="/unbond">
                     <ListItemText primary="Unbond node" />
@@ -130,7 +138,7 @@ export default function MainNav() {
 
                 <ListItem button>
                   <ListItemIcon>
-                    <HowToVoteIcon />
+                    <HowToVote />
                   </ListItemIcon>
                   <Link href="/delegateStake">
                     <ListItemText primary="Delegate stake" />
@@ -139,7 +147,7 @@ export default function MainNav() {
 
                 <ListItem button>
                   <ListItemIcon>
-                    <CancelIcon />
+                    <Cancel />
                   </ListItemIcon>
                   <Link href="/undelegateStake">
                     <ListItemText primary="Undelegate stake" />
@@ -148,7 +156,7 @@ export default function MainNav() {
 
                 <ListItem button>
                   <ListItemIcon>
-                    <PageviewIcon />
+                    <Pageview />
                   </ListItemIcon>
                   <Link href="/checkDelegation">
                     <ListItemText primary="Check current delegation" />
diff --git a/wallet-web/components/bond/NodeBond.tsx b/wallet-web/components/bond/NodeBond.tsx
index f2c5727c2b..fc07e6f1a1 100644
--- a/wallet-web/components/bond/NodeBond.tsx
+++ b/wallet-web/components/bond/NodeBond.tsx
@@ -136,7 +136,7 @@ const BondNode = () => {
     // we haven't clicked bond button yet
     if (!isLoading) {
       return (
-        <Paper style={{ padding: theme.spacing(3) }}>
+        <>
           <NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType} />
           <BondNodeForm
             onSubmit={bondNode}
@@ -144,7 +144,7 @@ const BondNode = () => {
             minimumGatewayBond={minimumGatewayBond}
             minimumMixnodeBond={minimumMixnodeBond}
           />
-        </Paper>
+        </>
       )
     }
 
@@ -165,7 +165,9 @@ const BondNode = () => {
       <Grid item>
         <ExecFeeNotice name="bonding" />
       </Grid>
-      <Grid item>{getBondContent()}</Grid>
+      <Grid item>
+        <Paper style={{ padding: theme.spacing(3) }}>{getBondContent()}</Paper>
+      </Grid>
     </Grid>
   )
 }
diff --git a/wallet-web/components/delegate/NodeDelegation.tsx b/wallet-web/components/delegate/NodeDelegation.tsx
index fcad76ccad..830b18af92 100644
--- a/wallet-web/components/delegate/NodeDelegation.tsx
+++ b/wallet-web/components/delegate/NodeDelegation.tsx
@@ -80,10 +80,10 @@ const DelegateToNode = () => {
     // we haven't clicked delegate button yet
     if (!isLoading) {
       return (
-        <Paper style={{ padding: theme.spacing(3) }}>
+        <>
           <NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType} />
           <DelegateForm onSubmit={delegateToNode} />
-        </Paper>
+        </>
       )
     }
 
@@ -104,7 +104,11 @@ const DelegateToNode = () => {
       <Grid item>
         <ExecFeeNotice name={'delegating stake'} />
       </Grid>
-      <Grid item> {getDelegationContent()}</Grid>
+      <Grid item>
+        <Paper style={{ padding: theme.spacing(3) }}>
+          {getDelegationContent()}
+        </Paper>
+      </Grid>
     </Grid>
   )
 }
diff --git a/wallet-web/components/delegation-check/DelegationCheck.tsx b/wallet-web/components/delegation-check/DelegationCheck.tsx
index e428397f36..f5a29b57e5 100644
--- a/wallet-web/components/delegation-check/DelegationCheck.tsx
+++ b/wallet-web/components/delegation-check/DelegationCheck.tsx
@@ -83,13 +83,13 @@ const DelegationCheck = () => {
     // we haven't clicked delegate button yet
     if (!isLoading && !stakeValue) {
       return (
-        <Paper style={{ padding: theme.spacing(3) }}>
+        <>
           <NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType} />
           <NodeIdentityForm
             onSubmit={checkDelegation}
             buttonText="Check stake value"
           />
-        </Paper>
+        </>
       )
     }
 
@@ -106,7 +106,11 @@ const DelegationCheck = () => {
     )
   }
 
-  return <>{getDelegationCheckContent()}</>
+  return (
+    <Paper style={{ padding: theme.spacing(3) }}>
+      {getDelegationCheckContent()}
+    </Paper>
+  )
 }
 
 export default DelegationCheck
diff --git a/wallet-web/components/unbond/UnbondNode.tsx b/wallet-web/components/unbond/UnbondNode.tsx
index 87e8ae93cd..0afe08706d 100644
--- a/wallet-web/components/unbond/UnbondNode.tsx
+++ b/wallet-web/components/unbond/UnbondNode.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect } from 'react'
-import { Grid, LinearProgress, Typography } from '@material-ui/core'
+import { Grid, LinearProgress, Paper, Typography } from '@material-ui/core'
 import { Alert } from '@material-ui/lab'
 import { useRouter } from 'next/router'
 import { NodeType } from '../../common/node'
@@ -130,7 +130,11 @@ const UnbondNode = () => {
       <Grid item>
         <ExecFeeNotice name={'unbonding'} />
       </Grid>
-      <Grid item> {getUnbondContent()}</Grid>
+      <Grid item>
+        <Paper style={{ padding: theme.spacing(3) }}>
+          {getUnbondContent()}
+        </Paper>
+      </Grid>
     </Grid>
   )
 }
diff --git a/wallet-web/components/undelegate/NodeUndelegation.tsx b/wallet-web/components/undelegate/NodeUndelegation.tsx
index b7e5a1b884..08d92bd706 100644
--- a/wallet-web/components/undelegate/NodeUndelegation.tsx
+++ b/wallet-web/components/undelegate/NodeUndelegation.tsx
@@ -66,13 +66,13 @@ const UndelegateFromNode = () => {
     // we haven't clicked undelegate button yet
     if (!isLoading) {
       return (
-        <Paper style={{ padding: theme.spacing(3) }}>
+        <>
           <NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType} />
           <NodeIdentityForm
             onSubmit={undelegateFromNode}
             buttonText={'Remove delegation'}
           />
-        </Paper>
+        </>
       )
     }
 
@@ -93,7 +93,11 @@ const UndelegateFromNode = () => {
       <Grid item>
         <ExecFeeNotice name={'undelegating stake'} />
       </Grid>
-      <Grid item>{getUndelegationContent()}</Grid>
+      <Grid item>
+        <Paper style={{ padding: theme.spacing(3) }}>
+          {getUndelegationContent()}
+        </Paper>
+      </Grid>
     </Grid>
   )
 }

From de468760d6785c3df5d8a8be092b6e8d7eb01116 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Wed, 28 Jul 2021 14:17:13 +0100
Subject: [PATCH 09/11] update layout

---
 wallet-web/components/Layout.tsx            |  2 +-
 wallet-web/components/bond/BondNodeForm.tsx | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/wallet-web/components/Layout.tsx b/wallet-web/components/Layout.tsx
index 09befee3bc..e73e2b9ce3 100644
--- a/wallet-web/components/Layout.tsx
+++ b/wallet-web/components/Layout.tsx
@@ -11,7 +11,7 @@ export const Layout = ({ children }: { children: React.ReactElement }) => {
       }}
     >
       <Grid container justify="center">
-        <Grid item xs={12} md={6} lg={4}>
+        <Grid item xs={12} md={8} xl={4}>
           {children}
         </Grid>
       </Grid>
diff --git a/wallet-web/components/bond/BondNodeForm.tsx b/wallet-web/components/bond/BondNodeForm.tsx
index 5d3735e59c..c3a358a0e3 100644
--- a/wallet-web/components/bond/BondNodeForm.tsx
+++ b/wallet-web/components/bond/BondNodeForm.tsx
@@ -9,6 +9,7 @@ import {
   InputAdornment,
   Grid,
   TextField,
+  useMediaQuery,
 } from '@material-ui/core'
 import bs58 from 'bs58'
 import semver from 'semver'
@@ -81,6 +82,8 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
     getBalance()
   }, [getBalance])
 
+  const matches = useMediaQuery('(min-width:768px)')
+
   const handleCheckboxToggle = () => {
     setAdvancedShown((prevSet) => !prevSet)
   }
@@ -312,9 +315,11 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
             required
             id="amount"
             name="amount"
-            label={`Amount to bond (minimum ${nativeToPrintable(
-              minimumBond.amount
-            )} ${minimumBond.denom})`}
+            label={`Amount to bond ${
+              matches
+                ? '(minimum ' + nativeToPrintable(minimumBond.amount) + ')'
+                : ''
+            }`}
             error={!validateAmount}
             helperText={
               !validateAmount

From 87db1fd8c148a86e4326d9dd0add9c557a455b15 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Wed, 28 Jul 2021 17:45:45 +0100
Subject: [PATCH 10/11] update breakpoint for large screens

---
 wallet-web/components/Layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/wallet-web/components/Layout.tsx b/wallet-web/components/Layout.tsx
index e73e2b9ce3..26aea37b7d 100644
--- a/wallet-web/components/Layout.tsx
+++ b/wallet-web/components/Layout.tsx
@@ -11,7 +11,7 @@ export const Layout = ({ children }: { children: React.ReactElement }) => {
       }}
     >
       <Grid container justify="center">
-        <Grid item xs={12} md={8} xl={4}>
+        <Grid item xs={12} md={8} xl={6}>
           {children}
         </Grid>
       </Grid>

From c569a7a858eefea85eea577711dfe9cbba391a4b Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Wed, 28 Jul 2021 18:01:40 +0100
Subject: [PATCH 11/11] ui tweak

---
 .../components/delegate/DelegateForm.tsx      | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/wallet-web/components/delegate/DelegateForm.tsx b/wallet-web/components/delegate/DelegateForm.tsx
index 67aac7da76..cb8caecb8e 100644
--- a/wallet-web/components/delegate/DelegateForm.tsx
+++ b/wallet-web/components/delegate/DelegateForm.tsx
@@ -83,13 +83,13 @@ export default function DelegateForm(props: DelegateFormProps) {
 
   return (
     <form onSubmit={submitForm}>
-      <Grid container spacing={3}>
+      <Grid container spacing={3} direction="column">
         <Grid item xs={12}>
           <TextField
             required
-            id='identity'
-            name='identity'
-            label='Node identity'
+            id="identity"
+            name="identity"
+            label="Node identity"
             error={!validIdentity}
             helperText={
               validIdentity
@@ -100,25 +100,25 @@ export default function DelegateForm(props: DelegateFormProps) {
           />
         </Grid>
 
-        <Grid item xs={12} sm={6}>
+        <Grid item xs={12} lg={6}>
           <TextField
             required
-            id='amount'
-            name='amount'
-            label='Amount to delegate'
+            id="amount"
+            name="amount"
+            label="Amount to delegate"
             error={!isValidAmount}
             helperText={isValidAmount ? '' : 'Please enter a valid amount'}
             onChange={handleAmountChange}
             fullWidth
             InputProps={{
               endAdornment: (
-                <InputAdornment position='end'>{DENOM}</InputAdornment>
+                <InputAdornment position="end">{DENOM}</InputAdornment>
               ),
             }}
           />
         </Grid>
         {allocationWarning && (
-          <Grid item>
+          <Grid item xs={12} lg={6}>
             <Alert severity={!isValidAmount ? 'error' : 'info'}>
               {allocationWarning}
             </Alert>
@@ -140,9 +140,9 @@ 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}
           disabled={!isValidAmount}
         >