add unbond and undelegte pages

tauri-wallet/src/routes/balance.tsx

@@ -6,6 +6,7 @@ import { NoClientError } from '../components/NoClientError'
 import { Confirmation } from '../components/Confirmation'
 import { ClientContext } from '../context/main'
 import { Alert } from '@material-ui/lab'
+import { theme } from '../theme'
 
 export const Balance = () => {
   const { client } = useContext(ClientContext)
@@ -25,6 +26,7 @@ export const Balance = () => {
                   SuccessMessage={
                     <Alert
                       severity="success"
+                      style={{ padding: theme.spacing(2, 4) }}
                       action={
                         <div
                           style={{
@@ -47,7 +49,7 @@ export const Balance = () => {
                         </div>
                       }
                     >
-                      {'The current balance is ' + client.balance}
+                      {'The current wallet balance is ' + client.balance}
                     </Alert>
                   }
                   failureMessage="Failed to check the account balance!"

tauri-wallet/src/routes/bond/BondForm.tsx

@@ -25,7 +25,7 @@ export const BondNodeForm = () => {
 
   return (
     <form>
-      <div style={{ padding: theme.spacing(3) }}>
+      <div style={{ padding: theme.spacing(3, 5) }}>
         <Grid container spacing={3}>
           <Grid item xs={12}>
             <NodeTypeSelector

tauri-wallet/src/routes/index.tsx

@@ -8,6 +8,8 @@ import { Delegate } from './delegate'
 import { Receive } from './receive'
 import { Send } from './send'
 import { SignIn } from './sign-in'
+import { Unbond } from './unbond'
+import { Undelegate } from './undelegate'
 
 export const Routes = () => (
   <Router>
@@ -28,13 +30,13 @@ export const Routes = () => (
         <Bond />
       </Route>
       <Route path="/unbond">
-        <Bond />
+        <Unbond />
       </Route>
       <Route path="/delegate">
         <Delegate />
       </Route>
       <Route path="/undelegate">
-        <Delegate />
+        <Undelegate />
       </Route>
       <Route path="/signin">
         <SignIn />

tauri-wallet/src/routes/unbond/UnbondForm.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import { Alert } from '@material-ui/lab'
+import { Button, Theme } from '@material-ui/core'
+import { useTheme } from '@material-ui/styles'
+
+export const UnbondForm = () => {
+  const theme: Theme = useTheme()
+  return (
+    <div>
+      <Alert severity="info" style={{ margin: theme.spacing(3) }}>
+        You don't currently have a bonded node
+      </Alert>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          borderTop: `1px solid ${theme.palette.grey[200]}`,
+          background: theme.palette.grey[100],
+          padding: theme.spacing(2),
+        }}
+      >
+        <Button
+          variant="contained"
+          color="primary"
+          type="submit"
+          disableElevation
+        >
+          Unbond
+        </Button>
+      </div>
+    </div>
+  )
+}

tauri-wallet/src/routes/unbond/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Layout, NymCard, Page } from '../../components'
+import { UnbondForm } from './UnbondForm'
+
+export const Unbond = () => {
+  return (
+    <Page>
+      <Layout>
+        <NymCard
+          title="Unbond"
+          subheader="Unbond a mixnode or gateway"
+          noPadding
+        >
+          <UnbondForm />
+        </NymCard>
+      </Layout>
+    </Page>
+  )
+}

tauri-wallet/src/routes/undelegate/UndelegateForm.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react'
+import { Alert } from '@material-ui/lab'
+import { Button, Grid, TextField, Theme } from '@material-ui/core'
+import { useGetBalance } from '../../hooks/useGetBalance'
+import { NodeTypeSelector } from '../../components/NodeTypeSelector'
+import { EnumNodeType } from '../../types/global'
+import { useTheme } from '@material-ui/styles'
+
+export const UndelegateForm = () => {
+  const [isValidAmount, setIsValidAmount] = useState(true)
+  const [validIdentity, setValidIdentity] = useState(true)
+  const [allocationWarning, setAllocationWarning] = useState<string>()
+  const [nodeType, setNodeType] = useState(EnumNodeType.Mixnode)
+
+  const { getBalance, accountBalance } = useGetBalance()
+  const theme: Theme = useTheme()
+
+  const handleAmountChange = (event: any) => {
+    // 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
+    const parsed = +event.target.value
+
+    if (isNaN(parsed)) {
+      setIsValidAmount(false)
+    } else {
+      try {
+        const allocationCheck = { error: undefined, message: '' }
+        if (allocationCheck.error) {
+          setAllocationWarning(allocationCheck.message)
+          setIsValidAmount(false)
+        } else {
+          setAllocationWarning(allocationCheck.message)
+          setIsValidAmount(true)
+        }
+      } catch {
+        setIsValidAmount(false)
+      }
+    }
+  }
+
+  return (
+    <form onSubmit={() => {}}>
+      <div style={{ padding: theme.spacing(3, 5) }}>
+        <Grid container spacing={3} direction="column">
+          <Grid item xs={12}>
+            <NodeTypeSelector
+              nodeType={nodeType}
+              setNodeType={(nodeType) => setNodeType(nodeType)}
+            />
+          </Grid>
+          <Grid item xs={12}>
+            <TextField
+              required
+              variant="outlined"
+              id="identity"
+              name="identity"
+              label="Node identity"
+              error={!validIdentity}
+              helperText={
+                validIdentity
+                  ? ''
+                  : "Please enter a valid identity like '824WyExLUWvLE2mpSHBatN4AoByuLzfnHFeHWiBYzg4z'"
+              }
+              fullWidth
+            />
+          </Grid>
+
+          {allocationWarning && (
+            <Grid item xs={12} lg={6}>
+              <Alert severity={!isValidAmount ? 'error' : 'info'}>
+                {allocationWarning}
+              </Alert>
+            </Grid>
+          )}
+        </Grid>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          borderTop: `1px solid ${theme.palette.grey[200]}`,
+          background: theme.palette.grey[100],
+          padding: theme.spacing(2),
+        }}
+      >
+        <Button
+          variant="contained"
+          color="primary"
+          type="submit"
+          disabled={!isValidAmount}
+          disableElevation
+        >
+          Undelegate stake
+        </Button>
+      </div>
+    </form>
+  )
+}

tauri-wallet/src/routes/undelegate/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Layout, NymCard, Page } from '../../components'
+import { UndelegateForm } from './UndelegateForm'
+
+export const Undelegate = () => {
+  return (
+    <Page>
+      <Layout>
+        <NymCard
+          title="Undelegate"
+          subheader="Undelegate from a mixnode or gateway"
+          noPadding
+        >
+          <UndelegateForm />
+        </NymCard>
+      </Layout>
+    </Page>
+  )
+}