address and balance cards

tauri-wallet/src/components/BalanceCard.tsx

@@ -1,98 +1,46 @@
 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 { CardContent, IconButton, useTheme } from '@material-ui/core'
 import { ClientContext } from '../context/main'
 import { FileCopy, Refresh } from '@material-ui/icons'
+import { NymCard } from './NymCard'
 
-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',
-  },
-}))
-
-export const BalanceCard = React.memo(function BlogCard() {
-  const styles = useStyles()
+export const BalanceCard = () => {
+  const theme = useTheme()
   const { client } = useContext(ClientContext)
-  return (
-    <Card className={styles.root}>
-      <CardContent>
-        <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',
-        }}
+    <div style={{ margin: theme.spacing(3) }}>
+      <NymCard
+        title="Balance"
+        noPadding
+        Action={
+          <IconButton>
+            <Refresh />
+          </IconButton>
+        }
       >
-        <Typography
-          variant="caption"
-          style={{
-            wordBreak: 'break-all',
-            fontWeight: theme.typography.fontWeightBold,
-            color: theme.palette.grey[600],
-            marginRight: theme.spacing(1),
-          }}
-        >
-          {subText}
-        </Typography>
-        {Action}
-      </div>
+        <CardContent>{client.balance}</CardContent>
+      </NymCard>
+    </div>
+  )
+}
+
+export const AddressCard = () => {
+  const theme = useTheme()
+  const { client } = useContext(ClientContext)
+  return (
+    <div style={{ margin: theme.spacing(3) }}>
+      <NymCard
+        title="Address"
+        noPadding
+        Action={
+          <IconButton>
+            <FileCopy />
+          </IconButton>
+        }
+      >
+        <CardContent>{client.address}</CardContent>
+      </NymCard>
     </div>
   )
 }

tauri-wallet/src/components/Nav.tsx

@@ -84,7 +84,6 @@ export const Nav = () => {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        marginTop: theme.spacing(6),
       }}
     >
       <List>

tauri-wallet/src/components/NymCard.tsx

@@ -4,11 +4,13 @@ import { Card, CardContent, CardHeader, useTheme } from '@material-ui/core'
 export const NymCard = ({
   title,
   subheader,
+  Action,
   noPadding,
   children,
 }: {
   title: string
   subheader?: string
+  Action?: React.ReactNode
   noPadding?: boolean
   children: React.ReactElement
 }) => {
@@ -20,6 +22,7 @@ export const NymCard = ({
         subheader={subheader}
         titleTypographyProps={{ variant: 'h5' }}
         subheaderTypographyProps={{ variant: 'subtitle1' }}
+        action={Action}
         style={{
           padding: theme.spacing(2.5),
           borderBottom: `1px solid ${theme.palette.grey[200]}`,

tauri-wallet/src/components/Page.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BalanceCard } from './BalanceCard'
+import { AddressCard, BalanceCard } from './BalanceCard'
 import { Nav } from './Nav'
 import Logo from '../images/logo.png'
 import { theme } from '../theme'
@@ -44,7 +44,14 @@ export const Page = ({ children }: { children: React.ReactElement }) => {
             marginTop: theme.spacing(6),
           }}
         />
-        <Nav />
+        <div style={{ marginTop: theme.spacing(10) }}>
+          <BalanceCard />
+          <AddressCard />
+        </div>
+
+        <div style={{ marginTop: theme.spacing(7) }}>
+          <Nav />
+        </div>
         <div />
       </div>
       <div