Merge branch 'feature/tauri-wallet-ui' into tauri-wallet

merge with rust updates

tauri-wallet/package.json

@@ -32,6 +32,7 @@
     "@types/react-router-dom": "^5.1.8",
     "babel-loader": "^8.2.2",
     "css-loader": "^6.2.0",
+    "favicons-webpack-plugin": "^5.0.2",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.2",
     "style-loader": "^3.2.1",

tauri-wallet/src/components/BalanceCard.tsx

@@ -1,98 +1,55 @@
 import React, { useContext } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
 import {
-  Card,
-  CardMedia,
   CardContent,
-  Typography,
-  CardHeader,
   IconButton,
+  Typography,
+  useTheme,
 } 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'
+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"
+        subheader="Current wallet 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>
+          <Typography>{client.balance}</Typography>
+        </CardContent>
+      </NymCard>
+    </div>
+  )
+}
+
+export const AddressCard = () => {
+  const theme = useTheme()
+  const { client } = useContext(ClientContext)
+  return (
+    <div style={{ margin: theme.spacing(3) }}>
+      <NymCard
+        title="Address"
+        subheader="Wallet payments 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

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

@@ -27,7 +27,7 @@ export const SendWizard = () => {
   }
 
   return (
-    <div style={{ padding: theme.spacing(3, 0) }}>
+    <div style={{ paddingTop: theme.spacing(3) }}>
       <Stepper
         activeStep={activeStep}
         style={{

tauri-wallet/src/theme.tsx

@@ -27,8 +27,10 @@ export const theme = createTheme({
         borderRadius: 50,
         background: '#fff',
       },
-      notchedOutline: {
-        margin: -2,
+    },
+    MuiStepIcon: {
+      text: {
+        fill: '#fff',
       },
     },
   },

tauri-wallet/webpack.config.js

@@ -1,4 +1,5 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
 var path = require('path')
 
 module.exports = {
@@ -15,6 +16,7 @@ module.exports = {
       template: path.resolve(__dirname, 'public/index.html'),
       filename: 'index.html',
     }),
+    new FaviconsWebpackPlugin(path.resolve(__dirname, 'public/favicon.ico')),
   ],
   module: {
     rules: [