update routing and use new sign in function

tauri-wallet/src/components/BalanceCard.tsx

@@ -1,6 +1,7 @@
-import React, { useContext } from 'react'
+import React, { useContext, useEffect } from 'react'
 import {
   CardContent,
+  CircularProgress,
   IconButton,
   Typography,
   useTheme,
@@ -8,10 +9,16 @@ import {
 import { ClientContext } from '../context/main'
 import { FileCopy, Refresh } from '@material-ui/icons'
 import { NymCard } from './NymCard'
+import { Alert } from '@material-ui/lab'
 
 export const BalanceCard = () => {
   const theme = useTheme()
-  const { client } = useContext(ClientContext)
+  const { balance, balanceError, balanceLoading, getBalance } =
+    useContext(ClientContext)
+
+  useEffect(() => {
+    getBalance()
+  }, [])
 
   return (
     <div style={{ margin: theme.spacing(3) }}>
@@ -20,13 +27,23 @@ export const BalanceCard = () => {
         subheader="Current wallet balance"
         noPadding
         Action={
-          <IconButton>
+          <IconButton onClick={getBalance}>
             <Refresh />
           </IconButton>
         }
       >
         <CardContent>
-          <Typography>{client.balance}</Typography>
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            {balanceLoading ? (
+              <CircularProgress size={28} />
+            ) : balanceError ? (
+              <Alert severity="error" style={{ width: '100%' }}>
+                {balanceError}
+              </Alert>
+            ) : (
+              <Typography>{balance}</Typography>
+            )}
+          </div>
         </CardContent>
       </NymCard>
     </div>
@@ -35,7 +52,7 @@ export const BalanceCard = () => {
 
 export const AddressCard = () => {
   const theme = useTheme()
-  const { client } = useContext(ClientContext)
+  const { address } = useContext(ClientContext)
   return (
     <div style={{ margin: theme.spacing(3) }}>
       <NymCard
@@ -48,7 +65,7 @@ export const AddressCard = () => {
           </IconButton>
         }
       >
-        <CardContent>{client.address}</CardContent>
+        <CardContent>{address}</CardContent>
       </NymCard>
     </div>
   )

tauri-wallet/src/components/Nav.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import {
   List,
@@ -18,8 +18,7 @@ import {
   MoneyOff,
 } from '@material-ui/icons'
 import { makeStyles } from '@material-ui/styles'
-import clsx from 'clsx'
-import { theme } from '../theme'
+import { ClientContext } from '../context/main'
 
 const routesSchema = [
   {
@@ -57,11 +56,6 @@ const routesSchema = [
     route: '/undelegate',
     Icon: <Cancel />,
   },
-  {
-    label: 'Log out',
-    route: '/signin',
-    Icon: <ExitToApp />,
-  },
 ]
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -76,7 +70,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 export const Nav = () => {
   const classes = useStyles()
-  const location = useLocation()
+  const { logOut } = useContext(ClientContext)
 
   return (
     <div
@@ -89,25 +83,26 @@ export const Nav = () => {
       <List>
         {routesSchema.map((r, i) => (
           <ListItem button component={Link} to={r.route} key={i}>
-            <ListItemIcon
-              className={clsx([
-                classes.navItem,
-                location.pathname === r.route ? classes.selected : undefined,
-              ])}
-            >
-              {r.Icon}
-            </ListItemIcon>
+            <ListItemIcon className={classes.navItem}>{r.Icon}</ListItemIcon>
             <ListItemText
               primary={r.label}
               primaryTypographyProps={{
-                className: clsx([
-                  classes.navItem,
-                  location.pathname === r.route ? classes.selected : undefined,
-                ]),
+                className: classes.navItem,
               }}
             />
           </ListItem>
         ))}
+        <ListItem button onClick={logOut}>
+          <ListItemIcon className={classes.navItem}>
+            <ExitToApp />
+          </ListItemIcon>
+          <ListItemText
+            primary="Log out"
+            primaryTypographyProps={{
+              className: classes.navItem,
+            }}
+          />
+        </ListItem>
       </List>
     </div>
   )

tauri-wallet/src/context/main.tsx

@@ -1,7 +1,16 @@
-import React, { createContext } from 'react'
+import { invoke } from '@tauri-apps/api/tauri'
+import React, { createContext, useEffect, useState } from 'react'
+import { useHistory } from 'react-router-dom'
 
 type TClientContext = {
-  client: { address: string; balance: string }
+  isLoggedIn: boolean
+  address: string
+  balance?: string
+  balanceLoading: boolean
+  balanceError?: string
+  logIn: () => void
+  logOut: () => void
+  getBalance: () => void
 }
 
 export const ClientContext = createContext({} as TClientContext)
@@ -11,12 +20,44 @@ export const ClientContextProvider = ({
 }: {
   children: React.ReactNode
 }) => {
-  const client = {
-    address: 'punk1s63y29jf8f3ft64z0vh80g3c76ty8lnyr74eur',
-    balance: '2000 PUNKS',
+  const [isLoggedIn, setIsLoggedIn] = useState(false)
+  const [balance, setBalance] = useState<string>()
+  const [balanceError, setBalanceError] = useState<string>()
+  const [balanceLoading, setBalanceLoading] = useState(false)
+
+  const history = useHistory()
+
+  const getBalance = () => {
+    setBalanceLoading(true)
+    setBalanceError(undefined)
+    invoke('get_balance')
+      .then((balance) => {
+        setBalance(balance as string)
+      })
+      .catch((e) => setBalanceError(e))
+    setBalanceLoading(false)
   }
+
+  const logIn = () => setIsLoggedIn(true)
+  const logOut = () => setIsLoggedIn(false)
+
+  useEffect(() => {
+    !isLoggedIn ? history.push('/signin') : history.push('/bond')
+  }, [isLoggedIn])
+
   return (
-    <ClientContext.Provider value={{ client }}>
+    <ClientContext.Provider
+      value={{
+        isLoggedIn,
+        balance,
+        balanceError,
+        address: 'punk1s63y29jf8f3ft64z0vh80g3c76ty8lnyr74eur',
+        balanceLoading,
+        logIn,
+        logOut,
+        getBalance,
+      }}
+    >
       {children}
     </ClientContext.Provider>
   )

tauri-wallet/src/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { CssBaseline, ThemeProvider } from '@material-ui/core'
+import { BrowserRouter as Router } from 'react-router-dom'
 import { Routes } from './routes'
 import { theme } from './theme'
 import { ClientContextProvider } from './context/main'
@@ -8,9 +9,11 @@ import { ClientContextProvider } from './context/main'
 const App = () => (
   <ThemeProvider theme={theme}>
     <CssBaseline />
-    <ClientContextProvider>
-      <Routes />
-    </ClientContextProvider>
+    <Router>
+      <ClientContextProvider>
+        <Routes />
+      </ClientContextProvider>
+    </Router>
   </ThemeProvider>
 )
 

tauri-wallet/src/routes/balance.tsx

@@ -9,47 +9,45 @@ import { Alert } from '@material-ui/lab'
 import { theme } from '../theme'
 
 export const Balance = () => {
-  const { client } = useContext(ClientContext)
+  const { balance, balanceError, getBalance } = useContext(ClientContext)
+
+  const RefreshAction = () => (
+    <Button
+      variant="contained"
+      size="small"
+      color="primary"
+      type="submit"
+      onClick={getBalance}
+      disabled={false}
+      disableElevation
+      startIcon={<Refresh />}
+    >
+      Refresh
+    </Button>
+  )
+
   return (
     <Page>
       <Layout>
         <NymCard title="Check Balance">
-          {client === null ? (
-            <NoClientError />
-          ) : (
-            <Grid container direction="column" spacing={2}>
-              <Grid item>
-                <Confirmation
-                  isLoading={false}
-                  error={null}
-                  progressMessage="Checking balance..."
-                  SuccessMessage={
-                    <Alert
-                      severity="success"
-                      style={{ padding: theme.spacing(2, 3) }}
-                      action={
-                        <Button
-                          variant="contained"
-                          size="small"
-                          color="primary"
-                          type="submit"
-                          onClick={() => {}}
-                          disabled={false}
-                          disableElevation
-                          startIcon={<Refresh />}
-                        >
-                          Refresh
-                        </Button>
-                      }
-                    >
-                      {'The current balance is ' + client.balance}
-                    </Alert>
-                  }
-                  failureMessage="Failed to check the account balance!"
-                />
-              </Grid>
+          <Grid container direction="column" spacing={2}>
+            <Grid item>
+              {balanceError && (
+                <Alert severity="error" action={<RefreshAction />}>
+                  {balanceError}
+                </Alert>
+              )}
+              {!balanceError && (
+                <Alert
+                  severity="success"
+                  style={{ padding: theme.spacing(2, 3) }}
+                  action={<RefreshAction />}
+                >
+                  {'The current balance is ' + balance}
+                </Alert>
+              )}
             </Grid>
-          )}
+          </Grid>
         </NymCard>
       </Layout>
     </Page>

tauri-wallet/src/routes/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Switch, Route } from 'react-router-dom'
-import { BrowserRouter as Router } from 'react-router-dom'
 import { NotFound } from './404'
 import { Balance } from './balance'
 import { Bond } from './bond'
@@ -12,38 +11,36 @@ import { Unbond } from './unbond'
 import { Undelegate } from './undelegate'
 
 export const Routes = () => (
-  <Router>
-    <Switch>
-      <Route path="/" exact>
-        <SignIn />
-      </Route>
-      <Route path="/balance">
-        <Balance />
-      </Route>
-      <Route path="/send">
-        <Send />
-      </Route>
-      <Route path="/receive">
-        <Receive />
-      </Route>
-      <Route path="/bond">
-        <Bond />
-      </Route>
-      <Route path="/unbond">
-        <Unbond />
-      </Route>
-      <Route path="/delegate">
-        <Delegate />
-      </Route>
-      <Route path="/undelegate">
-        <Undelegate />
-      </Route>
-      <Route path="/signin">
-        <SignIn />
-      </Route>
-      <Route path="*">
-        <NotFound />
-      </Route>
-    </Switch>
-  </Router>
+  <Switch>
+    <Route path="/" exact>
+      <SignIn />
+    </Route>
+    <Route path="/balance">
+      <Balance />
+    </Route>
+    <Route path="/send">
+      <Send />
+    </Route>
+    <Route path="/receive">
+      <Receive />
+    </Route>
+    <Route path="/bond">
+      <Bond />
+    </Route>
+    <Route path="/unbond">
+      <Unbond />
+    </Route>
+    <Route path="/delegate">
+      <Delegate />
+    </Route>
+    <Route path="/undelegate">
+      <Undelegate />
+    </Route>
+    <Route path="/signin">
+      <SignIn />
+    </Route>
+    <Route path="*">
+      <NotFound />
+    </Route>
+  </Switch>
 )

tauri-wallet/src/routes/receive.tsx

@@ -7,43 +7,41 @@ import { theme } from '../theme'
 import { ClientContext } from '../context/main'
 
 export const Receive = () => {
-  const { client } = useContext(ClientContext)
+  const { address } = useContext(ClientContext)
   const matches = useMediaQuery('(min-width:769px)')
 
   return (
     <Page>
       <Layout>
-        <>
-          <NymCard title="Receive Nym">
-            <Grid container direction="column" spacing={1}>
-              <Grid item>
-                <Alert severity="info">
-                  You can receive tokens by providing this address to the sender
-                </Alert>
-              </Grid>
-              <Grid item>
-                <Card
-                  style={{
-                    margin: theme.spacing(1, 0),
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    flexWrap: 'wrap',
-                    padding: theme.spacing(3),
-                  }}
-                  variant="outlined"
-                >
-                  <Typography
-                    variant={matches ? 'h5' : 'subtitle1'}
-                    style={{ wordBreak: 'break-word' }}
-                  >
-                    {client.address}
-                  </Typography>
-                  <CopyToClipboard text={client.address} />
-                </Card>
-              </Grid>
+        <NymCard title="Receive Nym">
+          <Grid container direction="column" spacing={1}>
+            <Grid item>
+              <Alert severity="info">
+                You can receive tokens by providing this address to the sender
+              </Alert>
             </Grid>
-          </NymCard>
-        </>
+            <Grid item>
+              <Card
+                style={{
+                  margin: theme.spacing(1, 0),
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  flexWrap: 'wrap',
+                  padding: theme.spacing(3),
+                }}
+                variant="outlined"
+              >
+                <Typography
+                  variant={matches ? 'h5' : 'subtitle1'}
+                  style={{ wordBreak: 'break-word' }}
+                >
+                  {address}
+                </Typography>
+                <CopyToClipboard text={address} />
+              </Card>
+            </Grid>
+          </Grid>
+        </NymCard>
       </Layout>
     </Page>
   )

tauri-wallet/src/routes/send/SendForm.tsx

@@ -11,7 +11,7 @@ export const SendForm = ({
   updateRecipAddress: (address: string) => void
   updateAmount: (amount: string) => void
 }) => {
-  const { client } = useContext(ClientContext)
+  const { address } = useContext(ClientContext)
 
   return (
     <Grid container spacing={3}>
@@ -23,7 +23,7 @@ export const SendForm = ({
           name="sender"
           label="Sender address"
           fullWidth
-          value={client.address}
+          value={address}
           disabled={true}
         />
       </Grid>

tauri-wallet/src/routes/sign-in.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useContext, useState } from 'react'
 import {
   TextField,
   CircularProgress,
@@ -14,12 +14,15 @@ import { useTheme } from '@material-ui/styles'
 import logo from '../images/logo.png'
 import { useHistory } from 'react-router-dom'
 import { invoke } from '@tauri-apps/api'
+import { ClientContext } from '../context/main'
 
 export const SignIn = () => {
   const [mnemonic, setMnemonic] = useState<string>('')
   const [inputError, setInputError] = useState<string | undefined>()
   const [isLoading, setIsLoading] = useState(false)
 
+  const { logIn } = useContext(ClientContext)
+
   const theme: Theme = useTheme()
   const history = useHistory()
 
@@ -30,15 +33,14 @@ export const SignIn = () => {
     setInputError(undefined)
 
     invoke('connect_with_mnemonic', { mnemonic })
-      .then((res) => {
-        setIsLoading(false)
-        console.log(res)
-        history.push('/bond')
+      .then(() => {
+        logIn()
       })
       .catch((e) => {
-        setIsLoading(false)
         setInputError(e)
       })
+
+    setIsLoading(false)
   }
 
   return (

tauri-wallet/src/theme.tsx

@@ -29,9 +29,6 @@ export const theme = createTheme({
       containedPrimary: {
         color: 'white',
       },
-      text: {
-        padding: 'default',
-      },
     },
 
     MuiStepIcon: {