side bar updates

tauri-wallet/src/components/BalanceCard.tsx

@@ -0,0 +1,109 @@
+import React, { useContext } from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import {
+  Card,
+  CardMedia,
+  CardContent,
+  Typography,
+  CardHeader,
+  IconButton,
+} from '@material-ui/core'
+import logo from '../images/logo.png'
+import { theme } from '../theme'
+import { ClientContext } from '../context/main'
+import { FileCopy, Refresh } from '@material-ui/icons'
+
+const useStyles = makeStyles(({ spacing }) => ({
+  root: {
+    margin: spacing(10, 5, 3, 7),
+    borderRadius: spacing(2), // 16px
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingBottom: spacing(2),
+    paddingTop: spacing(2),
+    minWidth: 300,
+    position: 'relative',
+  },
+  media: {
+    marginLeft: spacing(-7),
+    position: 'fixed',
+  },
+  content: {
+    marginLeft: theme.spacing(4),
+  },
+}))
+
+export const BalanceCard = React.memo(function BlogCard() {
+  const styles = useStyles()
+  const { client } = useContext(ClientContext)
+  return (
+    <Card className={styles.root}>
+      <CardHeader
+        avatar={<img src={logo} style={{ width: 75 }} />}
+        className={styles.media}
+      />
+      <CardContent className={styles.content}>
+        <BalanceCardField
+          primaryText="Balance"
+          subText={client.balance}
+          Action={
+            <IconButton size="small">
+              <Refresh fontSize="small" />
+            </IconButton>
+          }
+        />
+        <BalanceCardField
+          primaryText="Address"
+          subText={client.address}
+          Action={
+            <IconButton size="small">
+              <FileCopy fontSize="small" />
+            </IconButton>
+          }
+          lastChild
+        />
+      </CardContent>
+    </Card>
+  )
+})
+
+const BalanceCardField = ({
+  primaryText,
+  subText,
+  Action,
+  lastChild,
+}: {
+  primaryText: string
+  subText: string
+  Action?: React.ReactNode
+  lastChild?: boolean
+}) => {
+  return (
+    <div style={!lastChild ? { marginBottom: theme.spacing(1) } : {}}>
+      <Typography variant="body2" style={{}}>
+        {primaryText}
+      </Typography>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'ceneter',
+        }}
+      >
+        <Typography
+          variant="caption"
+          style={{
+            wordBreak: 'break-all',
+            fontWeight: theme.typography.fontWeightBold,
+            color: theme.palette.grey[600],
+            marginRight: theme.spacing(1),
+          }}
+        >
+          {subText}
+        </Typography>
+        {Action}
+      </div>
+    </div>
+  )
+}

tauri-wallet/src/components/Nav.tsx

@@ -19,6 +19,7 @@ import {
 } from '@material-ui/icons'
 import { makeStyles } from '@material-ui/styles'
 import clsx from 'clsx'
+import { theme } from '../theme'
 
 const routesSchema = [
   {
@@ -78,28 +79,37 @@ export const Nav = () => {
   const location = useLocation()
 
   return (
-    <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>
-          <ListItemText
-            primary={r.label}
-            primaryTypographyProps={{
-              className: clsx([
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: theme.spacing(10),
+      }}
+    >
+      <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,
-              ]),
-            }}
-          />
-        </ListItem>
-      ))}
-    </List>
+              ])}
+            >
+              {r.Icon}
+            </ListItemIcon>
+            <ListItemText
+              primary={r.label}
+              primaryTypographyProps={{
+                className: clsx([
+                  classes.navItem,
+                  location.pathname === r.route ? classes.selected : undefined,
+                ]),
+              }}
+            />
+          </ListItem>
+        ))}
+      </List>
+    </div>
   )
 }

tauri-wallet/src/components/Page.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { BalanceCard } from './BalanceCard'
 import { Nav } from './Nav'
 
 export const Page = ({ children }: { children: React.ReactElement }) => {
@@ -18,14 +19,14 @@ export const Page = ({ children }: { children: React.ReactElement }) => {
         style={{
           gridArea: '1 / 1 / 2 / 2',
           background: '#121726',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
+
           borderTopRightRadius: 10,
           borderBottomRightRadius: 10,
         }}
       >
+        <BalanceCard />
         <Nav />
+        <div />
       </div>
       <div
         style={{

tauri-wallet/src/context/main.tsx

@@ -1,7 +1,7 @@
 import React, { createContext } from 'react'
 
 type TClientContext = {
-  client: {}
+  client: { address: string; balance: string }
 }
 
 export const ClientContext = createContext({} as TClientContext)
@@ -11,7 +11,10 @@ export const ClientContextProvider = ({
 }: {
   children: React.ReactNode
 }) => {
-  const client = {}
+  const client = {
+    address: 'punk1s63y29jf8f3ft64z0vh80g3c76ty8lnyr74eur',
+    balance: '2000 PUNKS',
+  }
   return (
     <ClientContext.Provider value={{ client }}>
       {children}

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

@@ -6,12 +6,8 @@ import {
   Typography,
   Grid,
   Link,
-  Container,
-  Card,
-  CardHeader,
   Theme,
 } from '@material-ui/core'
-import { Layout, NymCard } from '../components'
 import { useTheme } from '@material-ui/styles'
 import logo from '../images/logo.png'
 import { useHistory } from 'react-router-dom'
@@ -95,109 +91,5 @@ export const SignIn = () => {
         </div>
       </div>
     </div>
-    // <Layout>
-    //   <div
-    //     style={{ maxWidth: 500, margin: 'auto', marginTop: 'calc(100vh/4)' }}
-    //   >
-    //     <img src={logo} style={{ width: 300 }} />
-    //     <NymCard title="Sign in">
-    //       <>
-    //         <form noValidate onSubmit={() => {}}>
-    //           <Grid container direction="column" spacing={1}>
-    //             <Grid item>
-    //               <TextField
-    //                 variant="outlined"
-    //                 margin="normal"
-    //                 required
-    //                 fullWidth
-    //                 id="mnemonic"
-    //                 label="BIP-39 Mnemonic"
-    //                 name="mnemonic"
-    //                 autoComplete="mnemonic"
-    //                 autoFocus
-    //                 style={{ background: 'white' }}
-    //               />
-    //             </Grid>
-    //             <Grid item>
-    //               <Button
-    //                 fullWidth
-    //                 variant="contained"
-    //                 color="primary"
-    //                 type="submit"
-    //                 disabled={loading}
-    //               >
-    //                 Sign In
-    //               </Button>
-    //             </Grid>
-    //             <Grid item style={{ marginTop: theme.spacing(1) }}>
-    //               <Typography variant="body2" component="span">
-    //                 Don't have an account?
-    //               </Typography>{' '}
-    //               <Link>Create one</Link>
-    //             </Grid>
-    //           </Grid>
-    //         </form>
-    //       </>
-    //     </NymCard>
-    //   </div>
-    // </Layout>
   )
 }
-
-{
-  /* <Grid container style={{ height: '100%' }}>
-<Grid
-  item
-  style={{
-    width: 400,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    background: '#121726',
-  }}
->
-  <img src={logo} style={{ width: 100 }} />
-</Grid>
-<Grid item xs={11}>
-  <NymCard title="Sign in">
-    <>
-      <form noValidate onSubmit={() => {}}>
-        <Grid container direction="column" spacing={1}>
-          <Grid item>
-            <TextField
-              variant="outlined"
-              margin="normal"
-              required
-              fullWidth
-              id="mnemonic"
-              label="BIP-39 Mnemonic"
-              name="mnemonic"
-              autoComplete="mnemonic"
-              autoFocus
-              style={{ background: 'white' }}
-            />
-          </Grid>
-          <Grid item>
-            <Button
-              fullWidth
-              variant="contained"
-              color="primary"
-              type="submit"
-              disabled={loading}
-            >
-              Sign In
-            </Button>
-          </Grid>
-          <Grid item style={{ marginTop: theme.spacing(1) }}>
-            <Typography variant="body2" component="span">
-              Don't have an account?
-            </Typography>{' '}
-            <Link>Create one</Link>
-          </Grid>
-        </Grid>
-      </form>
-    </>
-  </NymCard>
-</Grid>
-</Grid> */
-}