add balance page

tauri-wallet/package.json

@@ -12,6 +12,7 @@
     "@babel/preset-typescript": "^7.15.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/styles": "^4.11.4",
     "@types/react-dom": "^17.0.9",
     "clsx": "^1.1.1",

tauri-wallet/src/components/Confirmation.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import Typography from '@material-ui/core/Typography'
+import Grid from '@material-ui/core/Grid'
+import { CircularProgress } from '@material-ui/core'
+import { Alert, AlertTitle } from '@material-ui/lab'
+
+type ConfirmationProps = {
+  isLoading: boolean
+  progressMessage: string
+  successMessage: string
+  failureMessage: string
+  error: Error
+}
+
+export const Confirmation = ({
+  isLoading,
+  progressMessage,
+  successMessage,
+  failureMessage,
+  error,
+}: ConfirmationProps) => {
+  return isLoading ? (
+    <>
+      <Typography variant="h6" gutterBottom>
+        {progressMessage}
+      </Typography>
+      <Grid item xs={12} sm={6}>
+        <CircularProgress />
+      </Grid>
+    </>
+  ) : (
+    <>
+      {error === null ? (
+        <Alert severity="success">{successMessage}</Alert>
+      ) : (
+        <Alert severity="error">
+          <AlertTitle>{error.name}</AlertTitle>
+          <strong>{failureMessage}</strong> - {error.message}
+        </Alert>
+      )}
+    </>
+  )
+}

tauri-wallet/src/components/Layout.tsx

@@ -8,6 +8,11 @@ export const Layout = ({ children }: { children: React.ReactElement }) => {
     <div
       style={{
         padding: theme.spacing(5),
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
       }}
     >
       <Grid container justifyContent="center">

tauri-wallet/src/components/NoClientError.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { Alert, AlertTitle } from '@material-ui/lab'
+
+export const NoClientError = () => {
+  return (
+    <Alert severity="error">
+      <AlertTitle>No client detected</AlertTitle>
+      Have you signed in? Try to go back to{' '}
+      <Link to="/signin">the main page</Link> and try again
+    </Alert>
+  )
+}

tauri-wallet/src/context/main.tsx

@@ -0,0 +1,20 @@
+import React, { createContext } from 'react'
+
+type TClientContext = {
+  client: {}
+}
+
+export const ClientContext = createContext({} as TClientContext)
+
+export const ClientContextProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const client = {}
+  return (
+    <ClientContext.Provider value={{ client }}>
+      {children}
+    </ClientContext.Provider>
+  )
+}

tauri-wallet/src/index.tsx

@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom'
 import { CssBaseline, ThemeProvider } from '@material-ui/core'
 import { Routes } from './routes'
 import { theme } from './theme'
+import { ClientContextProvider } from './context/main'
 
 const App = () => (
   <ThemeProvider theme={theme}>
     <CssBaseline />
-    <Routes />
+    <ClientContextProvider>
+      <Routes />
+    </ClientContextProvider>
   </ThemeProvider>
 )
 

tauri-wallet/src/routes/balance.tsx

@@ -0,0 +1,48 @@
+import React, { useContext } from 'react'
+import { Button, Grid } from '@material-ui/core'
+import { Refresh } from '@material-ui/icons'
+import { Layout, NymCard, Page } from '../components'
+import { NoClientError } from '../components/NoClientError'
+import { Confirmation } from '../components/Confirmation'
+import { ClientContext } from '../context/main'
+
+export const Balance = () => {
+  const { client } = useContext(ClientContext)
+  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={''}
+                  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={() => {}}
+                    disabled={false}
+                    startIcon={<Refresh />}
+                  >
+                    Refresh
+                  </Button>
+                </div>
+              </Grid>
+            </Grid>
+          )}
+        </NymCard>
+      </Layout>
+    </Page>
+  )
+}

tauri-wallet/src/routes/index.tsx

@@ -2,6 +2,7 @@ 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 { Receive } from './receive'
 import { Send } from './send'
 import { SignIn } from './sign-in'
@@ -12,6 +13,9 @@ export const Routes = () => (
       <Route path="/" exact>
         <SignIn />
       </Route>
+      <Route path="/balance">
+        <Balance />
+      </Route>
       <Route path="/signin">
         <SignIn />
       </Route>

tauri-wallet/src/routes/receive.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
 import { Card, CardContent, Grid, Typography } from '@material-ui/core'
+import { Alert } from '@material-ui/lab'
 import { CopyToClipboard, Layout, NymCard, Page } from '../components'
 import { useMediaQuery } from '@material-ui/core'
+import { theme } from '../theme'
 
 export const Receive = () => {
   const matches = useMediaQuery('(min-width:769px)')
@@ -13,18 +15,19 @@ export const Receive = () => {
           <NymCard title="Receive Nym">
             <Grid container direction="column" spacing={1}>
               <Grid item>
-                <Typography variant="subtitle1" noWrap={false}>
+                <Alert severity="info">
                   You can receive tokens by providing this address to the sender
-                </Typography>
+                </Alert>
               </Grid>
               <Grid item>
-                <Card>
+                <Card style={{ margin: theme.spacing(3, 0) }}>
                   <CardContent>
                     <div
                       style={{
                         display: 'flex',
                         justifyContent: 'space-between',
                         flexWrap: 'wrap',
+                        padding: theme.spacing(1),
                       }}
                     >
                       <Typography

tauri-wallet/yarn.lock

@@ -955,7 +955,7 @@
   "resolved" "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz"
   "version" "0.8.0"
 
-"@material-ui/core@^4.0.0", "@material-ui/core@^4.12.3":
+"@material-ui/core@^4.0.0", "@material-ui/core@^4.12.1", "@material-ui/core@^4.12.3":
   "integrity" "sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw=="
   "resolved" "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz"
   "version" "4.12.3"
@@ -980,6 +980,17 @@
   dependencies:
     "@babel/runtime" "^7.4.4"
 
+"@material-ui/lab@^4.0.0-alpha.60":
+  "integrity" "sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA=="
+  "resolved" "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz"
+  "version" "4.0.0-alpha.60"
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.2"
+    "clsx" "^1.0.4"
+    "prop-types" "^15.7.2"
+    "react-is" "^16.8.0 || ^17.0.0"
+
 "@material-ui/styles@^4.11.4":
   "integrity" "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew=="
   "resolved" "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz"
@@ -5878,16 +5889,11 @@
     "object-assign" "^4.1.1"
     "scheduler" "^0.20.2"
 
-"react-is@^16.6.0", "react-is@^16.7.0", "react-is@^16.8.1":
+"react-is@^16.6.0", "react-is@^16.7.0", "react-is@^16.8.0 || ^17.0.0", "react-is@^16.8.1":
   "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
   "resolved" "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz"
   "version" "16.13.1"
 
-"react-is@^16.8.0 || ^17.0.0":
-  "integrity" "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-  "resolved" "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz"
-  "version" "17.0.2"
-
 "react-router-dom@^5.2.0":
   "integrity" "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA=="
   "resolved" "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz"