diff --git a/wallet-web/components/Layout.tsx b/wallet-web/components/Layout.tsx new file mode 100644 index 0000000000..26aea37b7d --- /dev/null +++ b/wallet-web/components/Layout.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { Grid, Theme, useTheme } from '@material-ui/core' + +export const Layout = ({ children }: { children: React.ReactElement }) => { + const theme: Theme = useTheme() + + return ( +
+ + + {children} + + +
+ ) +} diff --git a/wallet-web/components/MainNav.tsx b/wallet-web/components/MainNav.tsx index f545673342..e8f0828fa0 100644 --- a/wallet-web/components/MainNav.tsx +++ b/wallet-web/components/MainNav.tsx @@ -15,19 +15,20 @@ import { import React, { useContext } from 'react' import Link from 'next/link' import VpnKeyIcon from '@material-ui/icons/VpnKey' -import { - ExitToApp, - AccountBalanceWallet, - MonetizationOn, - AttachMoney, - MoneyOff, - Menu, - HowToVote, - Cancel, - Pageview, -} from '@material-ui/icons' +import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet' import { ValidatorClientContext } from '../contexts/ValidatorClient' import { ADMIN_ADDRESS } from '../pages/_app' +import { + Menu, + AttachMoney, + MoneyOff, + HowToVote, + Cancel, + ArrowForward, + ArrowBack, + ExitToApp, +} from '@material-ui/icons' + import { makeBasicStyle } from '../common/helpers' import { theme } from '../lib/theme' @@ -53,7 +54,7 @@ export default function MainNav() { } return ( - + <> - + @@ -92,13 +93,22 @@ export default function MainNav() { - + + + + + + + + + + {/**/} @@ -132,15 +142,6 @@ export default function MainNav() { - - - - - - - - - @@ -158,7 +159,7 @@ export default function MainNav() { {adminPageDisplayed && ( - + <> @@ -169,7 +170,7 @@ export default function MainNav() { - + )} @@ -185,6 +186,6 @@ export default function MainNav() { - + ) } diff --git a/wallet-web/components/NymCard.tsx b/wallet-web/components/NymCard.tsx new file mode 100644 index 0000000000..0c0112afa7 --- /dev/null +++ b/wallet-web/components/NymCard.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import { Card, CardContent, CardHeader, useTheme } from '@material-ui/core' + +export const NymCard = ({ + title, + subheader, + children, +}: { + title: string + subheader?: string + children: React.ReactElement +}) => { + const theme = useTheme() + return ( + + + + {children} + + + ) +} diff --git a/wallet-web/components/bond/BondNodeForm.tsx b/wallet-web/components/bond/BondNodeForm.tsx index 2ec27987b2..c3a358a0e3 100644 --- a/wallet-web/components/bond/BondNodeForm.tsx +++ b/wallet-web/components/bond/BondNodeForm.tsx @@ -2,13 +2,14 @@ import React, { useEffect, useState, ChangeEvent } from 'react' import { printableBalanceToNative } from '@nymproject/nym-validator-client/dist/currency' import { Coin, nativeToPrintable } from '@nymproject/nym-validator-client' import { Alert } from '@material-ui/lab' -import Grid from '@material-ui/core/Grid' -import TextField from '@material-ui/core/TextField' import { Button, Checkbox, FormControlLabel, InputAdornment, + Grid, + TextField, + useMediaQuery, } from '@material-ui/core' import bs58 from 'bs58' import semver from 'semver' @@ -81,6 +82,8 @@ export default function BondNodeForm(props: TBondNodeFormProps) { getBalance() }, [getBalance]) + const matches = useMediaQuery('(min-width:768px)') + const handleCheckboxToggle = () => { setAdvancedShown((prevSet) => !prevSet) } @@ -310,11 +313,13 @@ export default function BondNodeForm(props: TBondNodeFormProps) { {DENOM} + {DENOM} ), }} onChange={handleAmountChange} @@ -343,9 +348,9 @@ export default function BondNodeForm(props: TBondNodeFormProps) { @@ -353,9 +358,9 @@ export default function BondNodeForm(props: TBondNodeFormProps) { } - label='Show advanced options' + label="Show advanced options" /> @@ -427,10 +432,10 @@ export default function BondNodeForm(props: TBondNodeFormProps) { @@ -457,10 +462,10 @@ export default function BondNodeForm(props: TBondNodeFormProps) { @@ -470,10 +475,10 @@ export default function BondNodeForm(props: TBondNodeFormProps) { @@ -485,9 +490,9 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
-
- + + + + + +
+ +
+ + )} - - + + ) } diff --git a/wallet-web/pages/bond.tsx b/wallet-web/pages/bond.tsx index ecb98778e8..27a48a1e39 100644 --- a/wallet-web/pages/bond.tsx +++ b/wallet-web/pages/bond.tsx @@ -1,14 +1,19 @@ -import React from "react"; -import MainNav from "../components/MainNav"; -import BondNode from "../components/bond/NodeBond"; +import React from 'react' +import MainNav from '../components/MainNav' +import BondNode from '../components/bond/NodeBond' +import { Layout, NymCard } from '../components' const Bond = () => { - return ( - - - - - ); + return ( + <> + + + + + + + + ) } -export default Bond \ No newline at end of file +export default Bond diff --git a/wallet-web/pages/checkDelegation.tsx b/wallet-web/pages/checkDelegation.tsx index f3606a135f..2d592a106a 100644 --- a/wallet-web/pages/checkDelegation.tsx +++ b/wallet-web/pages/checkDelegation.tsx @@ -1,14 +1,22 @@ -import React from "react"; -import MainNav from "../components/MainNav"; -import DelegationCheck from "../components/delegation-check/DelegationCheck"; +import React from 'react' +import MainNav from '../components/MainNav' +import DelegationCheck from '../components/delegation-check/DelegationCheck' +import { Layout, NymCard } from '../components' const CheckDelegation = () => { - return ( - - - - - ); + return ( + <> + + + + + + + + ) } -export default CheckDelegation \ No newline at end of file +export default CheckDelegation diff --git a/wallet-web/pages/delegateStake.tsx b/wallet-web/pages/delegateStake.tsx index 3eed5c30ca..f2e69c013e 100644 --- a/wallet-web/pages/delegateStake.tsx +++ b/wallet-web/pages/delegateStake.tsx @@ -1,14 +1,19 @@ -import React from "react"; -import MainNav from "../components/MainNav"; -import NodeDelegation from "../components/delegate/NodeDelegation"; +import React from 'react' +import MainNav from '../components/MainNav' +import NodeDelegation from '../components/delegate/NodeDelegation' +import { Layout, NymCard } from '../components' const DelegateStake = () => { - return ( - - - - - ); + return ( + <> + + + + + + + + ) } -export default DelegateStake \ No newline at end of file +export default DelegateStake diff --git a/wallet-web/pages/receive.tsx b/wallet-web/pages/receive.tsx new file mode 100644 index 0000000000..da250046ae --- /dev/null +++ b/wallet-web/pages/receive.tsx @@ -0,0 +1,54 @@ +import { useMediaQuery } from '@material-ui/core' +import { + Card, + CardContent, + CardHeader, + Grid, + Typography, +} from '@material-ui/core' +import React from 'react' +import { useContext } from 'react' +import { Layout, NymCard } from '../components' +import MainNav from '../components/MainNav' +import NoClientError from '../components/NoClientError' +import { ValidatorClientContext } from '../contexts/ValidatorClient' + +const Receive = () => { + const { client } = useContext(ValidatorClientContext) + const matches = useMediaQuery('(min-width:769px)') + + return ( + <> + + + + {!client ? ( + + ) : ( + + + + You can receive tokens by providing this address to the sender + + + + + + + {client?.address} + + + + + + )} + + + + ) +} + +export default Receive diff --git a/wallet-web/pages/send.tsx b/wallet-web/pages/send.tsx index 223ad3e4d8..3290822cb4 100644 --- a/wallet-web/pages/send.tsx +++ b/wallet-web/pages/send.tsx @@ -1,57 +1,23 @@ import React, { useContext } from 'react' -import { makeStyles } from '@material-ui/core/styles' -import Paper from '@material-ui/core/Paper' -import Stepper from '@material-ui/core/Stepper' -import Step from '@material-ui/core/Step' -import StepLabel from '@material-ui/core/StepLabel' -import Button from '@material-ui/core/Button' -import Typography from '@material-ui/core/Typography' +import { printableBalanceToNative } from '@nymproject/nym-validator-client/dist/currency' +import { coin, Coin, printableCoin } from '@nymproject/nym-validator-client' +import { + Paper, + Stepper, + Step, + StepLabel, + Button, + Typography, +} from '@material-ui/core' +import { theme } from '../lib/theme' +import { Layout, NymCard } from '../components' import { Review } from '../components/send-funds/Review' import SendNymForm from '../components/send-funds/SendNymForm' -import { coin, Coin, printableCoin } from '@nymproject/nym-validator-client' import Confirmation from '../components/Confirmation' import MainNav from '../components/MainNav' import { ValidatorClientContext } from '../contexts/ValidatorClient' import NoClientError from '../components/NoClientError' import { UDENOM } from './_app' -import { printableBalanceToNative } from '@nymproject/nym-validator-client/dist/currency' - -const useStyles = makeStyles((theme) => ({ - appBar: { - position: 'relative', - }, - layout: { - width: 'auto', - marginLeft: theme.spacing(2), - marginRight: theme.spacing(2), - [theme.breakpoints.up(600 + theme.spacing(2) * 2)]: { - width: 600, - marginLeft: 'auto', - marginRight: 'auto', - }, - }, - paper: { - marginTop: theme.spacing(3), - marginBottom: theme.spacing(3), - padding: theme.spacing(2), - [theme.breakpoints.up(600 + theme.spacing(3) * 2)]: { - marginTop: theme.spacing(6), - marginBottom: theme.spacing(6), - padding: theme.spacing(3), - }, - }, - stepper: { - padding: theme.spacing(3, 0, 5), - }, - buttons: { - display: 'flex', - justifyContent: 'flex-end', - }, - button: { - marginTop: theme.spacing(3), - marginLeft: theme.spacing(1), - }, -})) const steps = ['Enter addresses', 'Review & send', 'Await confirmation'] @@ -90,8 +56,6 @@ export default function SendFunds() { throw new Error('Unknown step') } } - - const classes = useStyles() const { client } = useContext(ValidatorClientContext) console.log('client in send', client) @@ -189,8 +153,8 @@ export default function SendFunds() { const getStepperContent = () => { return ( - <> - + + {steps.map((label) => ( {label} @@ -217,18 +181,21 @@ export default function SendFunds() { <> {getStepContent(activeStep)} -
+
{activeStep !== 0 && ( - + )}