diff --git a/tauri-wallet/package.json b/tauri-wallet/package.json index 3da57e9d6f..631cd97f0f 100644 --- a/tauri-wallet/package.json +++ b/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", diff --git a/tauri-wallet/public/favicon.ico b/tauri-wallet/public/favicon.ico new file mode 100644 index 0000000000..bc951a1c6f Binary files /dev/null and b/tauri-wallet/public/favicon.ico differ diff --git a/tauri-wallet/src/components/BalanceCard.tsx b/tauri-wallet/src/components/BalanceCard.tsx index 65116de259..39bbbb6cd1 100644 --- a/tauri-wallet/src/components/BalanceCard.tsx +++ b/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 ( - - - - - - } - /> - - - - } - lastChild - /> - - - ) -}) -const BalanceCardField = ({ - primaryText, - subText, - Action, - lastChild, -}: { - primaryText: string - subText: string - Action?: React.ReactNode - lastChild?: boolean -}) => { return ( -
- - {primaryText} - -
+ + + + } > - - {subText} - - {Action} -
+ + {client.balance} + + +
+ ) +} + +export const AddressCard = () => { + const theme = useTheme() + const { client } = useContext(ClientContext) + return ( +
+ + + + } + > + {client.address} +
) } diff --git a/tauri-wallet/src/components/Nav.tsx b/tauri-wallet/src/components/Nav.tsx index f0c1a564b1..9c6678192c 100644 --- a/tauri-wallet/src/components/Nav.tsx +++ b/tauri-wallet/src/components/Nav.tsx @@ -84,7 +84,6 @@ export const Nav = () => { display: 'flex', alignItems: 'center', justifyContent: 'center', - marginTop: theme.spacing(6), }} > diff --git a/tauri-wallet/src/components/NymCard.tsx b/tauri-wallet/src/components/NymCard.tsx index a73d0866dd..3ba0820662 100644 --- a/tauri-wallet/src/components/NymCard.tsx +++ b/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]}`, diff --git a/tauri-wallet/src/components/Page.tsx b/tauri-wallet/src/components/Page.tsx index 198da00e08..4f9ee67ee1 100644 --- a/tauri-wallet/src/components/Page.tsx +++ b/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), }} /> -