GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #703 from nymtech/feature/user-sign-out

Browse Source 
Allow users to sign out
This commit is contained in:
Fouad
2021-07-28 15:58:43 +01:00
committed by GitHub
parent 91250f199a 30a78df986
commit b949d7b221
7 changed files with 205 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wallet-web/components/MainNav.tsx
+165 -147
View File
@@ -1,172 +1,190 @@
import {
AppBar,
Divider,
Drawer,
IconButton,
List,
ListItem,
ListItemIcon,
ListItemText,
ListSubheader,
Toolbar,
Typography
} from "@material-ui/core";
import React, { useContext } from "react";
AppBar,
Button,
Divider,
Drawer,
IconButton,
List,
ListItem,
ListItemIcon,
ListItemText,
ListSubheader,
Toolbar,
Typography,
} from '@material-ui/core'
import React, { useContext } from 'react'
import Link from 'next/link'
import VpnKeyIcon from "@material-ui/icons/VpnKey"
import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet';
import { ValidatorClientContext } from "../contexts/ValidatorClient";
import { ADMIN_ADDRESS } from "../pages/_app";
import MenuIcon from '@material-ui/icons/Menu';
import MonetizationOnIcon from '@material-ui/icons/MonetizationOn';
import AttachMoneyIcon from '@material-ui/icons/AttachMoney';
import MoneyOffIcon from '@material-ui/icons/MoneyOff';
import HowToVoteIcon from '@material-ui/icons/HowToVote';
import CancelIcon from '@material-ui/icons/Cancel';
import PageviewIcon from '@material-ui/icons/Pageview';
import { makeBasicStyle } from "../common/helpers";
import { theme } from "../lib/theme";
import VpnKeyIcon from '@material-ui/icons/VpnKey'
import {
ExitToApp,
AccountBalanceWallet,
MonetizationOn,
AttachMoney,
MoneyOff,
Menu,
HowToVote,
Cancel,
Pageview,
} from '@material-ui/icons'
import { ValidatorClientContext } from '../contexts/ValidatorClient'
import { ADMIN_ADDRESS } from '../pages/_app'
import { makeBasicStyle } from '../common/helpers'
import { theme } from '../lib/theme'
export default function MainNav() {
const classes = makeBasicStyle(theme);
const classes = makeBasicStyle(theme)
const { client } = useContext(ValidatorClientContext)
const { client, setClient } = useContext(ValidatorClientContext)
let adminPageDisplayed = false
let adminPageDisplayed = false
if (client !== null && client.address === ADMIN_ADDRESS) {
adminPageDisplayed = true
}
if (client !== null && client.address === ADMIN_ADDRESS) {
adminPageDisplayed = true
}
const [open, setOpen] = React.useState(false)
const [open, setOpen] = React.useState(false)
const toggleDrawer = () => {
setOpen((prevOpen) => !prevOpen)
}
const toggleDrawer = () => {
setOpen((prevOpen) => !prevOpen);
};
const closeDrawer = () => {
setOpen(false)
}
const closeDrawer = () => {
setOpen(false)
}
return (
<React.Fragment>
<AppBar position="absolute" color="default" className={classes.appBar}>
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="menu"
onClick={toggleDrawer}
>
<Menu />
</IconButton>
return (
<React.Fragment>
<AppBar position="absolute" color="default" className={classes.appBar}>
<Toolbar>
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu" onClick={toggleDrawer}>
<MenuIcon />
</IconButton>
<Drawer anchor={'left'} open={open} onClose={closeDrawer}>
<div
className={classes.list}
role="presentation"
onClick={closeDrawer}
>
<List
component="nav"
aria-labelledby="list-header"
subheader={
<ListSubheader id="list-header">Nym Wallet</ListSubheader>
}
>
<Divider />
<Drawer anchor={'left'} open={open} onClose={closeDrawer}>
<div
className={classes.list}
role="presentation"
onClick={closeDrawer}
>
<List
component="nav"
aria-labelledby="list-header"
subheader={
<ListSubheader id="list-header">
Nym Wallet
</ListSubheader>
}
>
<Divider />
<ListItem button>
<ListItemIcon>
<AccountBalanceWallet />
</ListItemIcon>
<Link href="/balanceCheck">
<ListItemText primary="Check Balance" />
</Link>
</ListItem>
<ListItem button>
<ListItemIcon>
<AccountBalanceWalletIcon />
</ListItemIcon>
<Link href="/balanceCheck">
<ListItemText primary="Check Balance" />
</Link>
</ListItem>
<ListItem button>
<ListItemIcon>
<MonetizationOn />
</ListItemIcon>
<Link href="/send">
<ListItemText primary="Send coins" />
</Link>
</ListItem>
<ListItem button>
<ListItemIcon>
<MonetizationOnIcon />
</ListItemIcon>
<Link href="/send">
<ListItemText primary="Send coins" />
</Link>
</ListItem>
<Divider />
<Divider />
{/*<ListItem>*/}
{/* <ListItemText primary="Node management" secondary="bottom text"/>*/}
{/*</ListItem>*/}
{/*<ListItem>*/}
{/* <ListItemText primary="Node management" secondary="bottom text"/>*/}
{/*</ListItem>*/}
<ListItem button>
<ListItemIcon>
<AttachMoney />
</ListItemIcon>
<Link href="/bond">
<ListItemText primary="Bond node" />
</Link>
</ListItem>
<ListItem button>
<ListItemIcon>
<AttachMoneyIcon />
</ListItemIcon>
<Link href="/bond">
<ListItemText primary="Bond node" />
</Link>
</ListItem>
<ListItem button>
<ListItemIcon>
<MoneyOff />
</ListItemIcon>
<Link href="/unbond">
<ListItemText primary="Unbond node" />
</Link>
</ListItem>
<ListItem button>
<ListItemIcon>
<MoneyOffIcon />
</ListItemIcon>
<Link href="/unbond">
<ListItemText primary="Unbond node" />
</Link>
</ListItem>
<ListItem button>
<ListItemIcon>
<HowToVote />
</ListItemIcon>
<Link href="/delegateStake">
<ListItemText primary="Delegate stake" />
</Link>
</ListItem>
<ListItem button>
<ListItemIcon>
<HowToVoteIcon />
</ListItemIcon>
<Link href="/delegateStake">
<ListItemText primary="Delegate stake" />
</Link>
</ListItem>
<ListItem button>
<ListItemIcon>
<Pageview />
</ListItemIcon>
<Link href="/checkDelegation">
<ListItemText primary="Check current delegation" />
</Link>
</ListItem>
<ListItem button>
<ListItemIcon>
<PageviewIcon />
</ListItemIcon>
<Link href="/checkDelegation">
<ListItemText primary="Check current delegation" />
</Link>
</ListItem>
<ListItem button>
<ListItemIcon>
<Cancel />
</ListItemIcon>
<Link href="/undelegateStake">
<ListItemText primary="Undelegate stake" />
</Link>
</ListItem>
<ListItem button>
<ListItemIcon>
<CancelIcon />
</ListItemIcon>
<Link href="/undelegateStake">
<ListItemText primary="Undelegate stake" />
</Link>
</ListItem>
<ListItem button onClick={() => setClient(null)}>
<ListItemIcon>
<ExitToApp />
</ListItemIcon>
<ListItemText primary="Log out" />
</ListItem>
{adminPageDisplayed &&
<React.Fragment>
<Divider />
<ListItem button>
<ListItemIcon>
<VpnKeyIcon />
</ListItemIcon>
{adminPageDisplayed && (
<React.Fragment>
<Divider />
<ListItem button>
<ListItemIcon>
<VpnKeyIcon />
</ListItemIcon>
<Link href="/admin">
<ListItemText primary="Admin" />
</Link>
</ListItem>
</React.Fragment>
}
</List>
</div>
</Drawer>
<Link href="/admin">
<ListItemText primary="Admin" />
</Link>
</ListItem>
</React.Fragment>
)}
</List>
</div>
</Drawer>
<Typography variant="h6" color="inherit" noWrap>
Nym
</Typography>
</Toolbar>
</AppBar>
</React.Fragment>
)
}
<Typography variant="h6" color="inherit" noWrap>
Nym
</Typography>
<div style={{ marginLeft: 'auto' }}>
<Button variant="outlined" onClick={() => setClient(null)}>
Log out
</Button>
</div>
</Toolbar>
</AppBar>
</React.Fragment>
)
}
wallet-web/components/bond/NodeBond.tsx
+8 -8
View File
@@ -27,7 +27,7 @@ const BondNode = () => {
const router = useRouter()
const { client } = useContext(ValidatorClientContext)
const [isLoading, setIsLoading] = React.useState(false)
const [isLoading, setIsLoading] = React.useState<boolean>()
const [bondingError, setBondingError] = React.useState(null)
const [checkedOwnership, setCheckedOwnership] = React.useState(false)
@@ -111,7 +111,7 @@ const BondNode = () => {
<Typography gutterBottom>
You have already have a bonded mixnode. If you wish to bond a
different one, you need to first{' '}
<Link href='/unbond'>unbond the existing one</Link>.
<Link href="/unbond">unbond the existing one</Link>.
</Typography>
</Grid>
</Grid>
@@ -126,7 +126,7 @@ const BondNode = () => {
<Typography gutterBottom>
You have already have a bonded gateway. If you wish to bond a
different one, you need to first{' '}
<Link href='/unbond'>unbond the existing one</Link>.
<Link href="/unbond">unbond the existing one</Link>.
</Typography>
</Grid>
</Grid>
@@ -134,7 +134,7 @@ const BondNode = () => {
}
// we haven't clicked bond button yet
if (!isLoading) {
if (isLoading === undefined) {
return (
<>
<NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType} />
@@ -164,11 +164,11 @@ const BondNode = () => {
<>
<main className={classes.layout}>
<Paper className={classes.paper}>
<ExecFeeNotice name='bonding' />
<ExecFeeNotice name="bonding" />
<Typography
component='h1'
variant='h4'
align='center'
component="h1"
variant="h4"
align="center"
className={classes.wrapper}
>
Bond a {nodeType}
wallet-web/components/delegate/NodeDelegation.tsx
+5 -5
View File
@@ -21,7 +21,7 @@ const DelegateToNode = () => {
const router = useRouter()
const { client } = useContext(ValidatorClientContext)
const [isLoading, setIsLoading] = React.useState(false)
const [isLoading, setIsLoading] = React.useState<boolean>()
const [delegationError, setDelegationError] = React.useState(null)
const [nodeType, setNodeType] = React.useState(NodeType.Mixnode)
@@ -79,7 +79,7 @@ const DelegateToNode = () => {
}
// we haven't clicked delegate button yet
if (!isLoading) {
if (isLoading === undefined) {
return (
<>
<NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType} />
@@ -106,9 +106,9 @@ const DelegateToNode = () => {
<Paper className={classes.paper}>
<ExecFeeNotice name={'delegating stake'} />
<Typography
component='h1'
variant='h4'
align='center'
component="h1"
variant="h4"
align="center"
className={classes.wrapper}
>
Delegate to {nodeType}
wallet-web/components/delegation-check/DelegationCheck.tsx
+4 -5
View File
@@ -75,7 +75,6 @@ const DelegationCheck = () => {
}
const getDelegationCheckContent = () => {
console.log(isLoading)
// we're not signed in
if (client === null) {
return <NoClientError />
@@ -88,7 +87,7 @@ const DelegationCheck = () => {
<NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType} />
<NodeIdentityForm
onSubmit={checkDelegation}
buttonText='Check stake value'
buttonText="Check stake value"
/>
</>
)
@@ -112,9 +111,9 @@ const DelegationCheck = () => {
<main className={classes.layout}>
<Paper className={classes.paper}>
<Typography
component='h1'
variant='h4'
align='center'
component="h1"
variant="h4"
align="center"
className={classes.wrapper}
>
Check your stake on a {nodeType}
wallet-web/components/unbond/UnbondNode.tsx
+5 -5
View File
@@ -16,7 +16,7 @@ const UnbondNode = () => {
const router = useRouter()
const { client } = useContext(ValidatorClientContext)
const [isLoading, setIsLoading] = React.useState(false)
const [isLoading, setIsLoading] = React.useState<boolean>()
const [unbondingError, setUnbondingError] = React.useState(null)
const [checkedOwnership, setCheckedOwnership] = React.useState(false)
@@ -104,7 +104,7 @@ const UnbondNode = () => {
}
// we haven't clicked unbond button yet
if (!isLoading) {
if (isLoading === undefined) {
return <UnbondNotice onClick={unbondNode} />
}
@@ -131,9 +131,9 @@ const UnbondNode = () => {
<Paper className={classes.paper}>
<ExecFeeNotice name={'unbonding'} />
<Typography
component='h1'
variant='h4'
align='center'
component="h1"
variant="h4"
align="center"
className={classes.wrapper}
>
Unbond a {headerText}
wallet-web/components/undelegate/NodeUndelegation.tsx
+8 -8
View File
@@ -1,4 +1,4 @@
import React, { useContext, useEffect } from 'react'
import React, { useContext, useEffect, useState } from 'react'
import { Paper } from '@material-ui/core'
import Typography from '@material-ui/core/Typography'
import { useRouter } from 'next/router'
@@ -17,7 +17,7 @@ const UndelegateFromNode = () => {
const router = useRouter()
const { client } = useContext(ValidatorClientContext)
const [isLoading, setIsLoading] = React.useState(false)
const [isLoading, setIsLoading] = React.useState<boolean>()
const [undelegationError, setUndelegationError] = React.useState(null)
const [nodeType, setNodeType] = React.useState(NodeType.Mixnode)
@@ -65,15 +65,15 @@ const UndelegateFromNode = () => {
}
// we haven't clicked undelegate button yet
if (!undelegationStarted) {
if (isLoading === undefined) {
return (
<React.Fragment>
<>
<NodeTypeChooser nodeType={nodeType} setNodeType={setNodeType} />
<NodeIdentityForm
onSubmit={undelegateFromNode}
buttonText={'Remove delegation'}
/>
</React.Fragment>
</>
)
}
@@ -95,9 +95,9 @@ const UndelegateFromNode = () => {
<Paper className={classes.paper}>
<ExecFeeNotice name={'undelegating stake'} />
<Typography
component='h1'
variant='h4'
align='center'
component="h1"
variant="h4"
align="center"
className={classes.wrapper}
>
Undelegate stake from {nodeType}
wallet-web/pages/send.tsx
+10 -11
View File
@@ -80,9 +80,9 @@ export default function SendFunds() {
return (
<Confirmation
isLoading={isLoading}
progressMessage='Funds transfer is in progress...'
progressMessage="Funds transfer is in progress..."
successMessage={successMessage}
failureMessage='Failed to complete the transfer'
failureMessage="Failed to complete the transfer"
error={sendingError}
/>
)
@@ -200,16 +200,16 @@ export default function SendFunds() {
<>
{activeStep === steps.length ? (
<>
<Typography variant='h5' gutterBottom>
<Typography variant="h5" gutterBottom>
Payment complete.
</Typography>
<Typography variant='subtitle1'>
<Typography variant="subtitle1">
You (<b>{transaction.sender}</b>)
</Typography>
<Typography variant='subtitle1'>
<Typography variant="subtitle1">
have sent <b>{printableCoin(transaction.coin)}</b>
</Typography>
<Typography variant='subtitle1'>
<Typography variant="subtitle1">
to <b>{transaction.recipient}</b>.
</Typography>
</>
@@ -224,9 +224,9 @@ export default function SendFunds() {
</Button>
)}
<Button
variant='contained'
color='primary'
type='submit'
variant="contained"
color="primary"
type="submit"
disabled={checkButtonDisabled()}
className={classes.button}
>
@@ -250,10 +250,9 @@ export default function SendFunds() {
<MainNav />
<main className={classes.layout}>
<Paper className={classes.paper}>
<Typography component='h1' variant='h4' align='center'>
<Typography component="h1" variant="h4" align="center">
Send Nym
</Typography>
{client === null ? <NoClientError /> : getStepperContent()}
</Paper>
</main>