Cafe137
fac72b1299
* feat: add staking * feat: enable staking in full mode, add loading state * chore: revert constants
57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { BeeModes } from '@ethersphere/bee-js'
|
|
import { createStyles, makeStyles, Tab, Tabs, Theme } from '@material-ui/core'
|
|
import { ReactElement, useContext } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { Context } from '../../providers/Bee'
|
|
import { ACCOUNT_TABS } from '../../routes'
|
|
|
|
const tabMap = {
|
|
WALLET: 0,
|
|
CHEQUEBOOK: 1,
|
|
STAMPS: 2,
|
|
FEEDS: 3,
|
|
STAKING: 4,
|
|
}
|
|
|
|
interface Props {
|
|
active: 'WALLET' | 'CHEQUEBOOK' | 'STAMPS' | 'FEEDS' | 'STAKING'
|
|
}
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
root: {
|
|
flexGrow: 1,
|
|
marginBottom: theme.spacing(4),
|
|
textTransform: 'none',
|
|
marginLeft: theme.spacing(-0.25),
|
|
marginRight: theme.spacing(-0.25),
|
|
},
|
|
tab: {
|
|
marginLeft: theme.spacing(0.25),
|
|
marginRight: theme.spacing(0.25),
|
|
},
|
|
}),
|
|
)
|
|
|
|
export function AccountNavigation({ active }: Props): ReactElement {
|
|
const classes = useStyles()
|
|
const navigate = useNavigate()
|
|
const { nodeInfo } = useContext(Context)
|
|
|
|
function onChange(event: React.ChangeEvent<Record<string, never>>, newValue: number) {
|
|
navigate(ACCOUNT_TABS[newValue])
|
|
}
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<Tabs value={tabMap[active]} onChange={onChange} variant="fullWidth">
|
|
<Tab className={classes.tab} key="WALLET" label="Wallet" />
|
|
<Tab className={classes.tab} key="CHEQUEBOOK" label="Chequebook" />
|
|
<Tab className={classes.tab} key="STAMPS" label="Stamps" />
|
|
<Tab className={classes.tab} key="FEEDS" label="Feeds" />
|
|
{nodeInfo?.beeMode === BeeModes.FULL ? <Tab className={classes.tab} key="STAKING" label="Staking" /> : null}
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|