feat: add staking for full nodes (#590)

* feat: add staking

* feat: enable staking in full mode, add loading state

* chore: revert constants

src/pages/account/AccountNavigation.tsx

@@ -1,6 +1,8 @@
+import { BeeModes } from '@ethersphere/bee-js'
 import { createStyles, makeStyles, Tab, Tabs, Theme } from '@material-ui/core'
-import { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { Context } from '../../providers/Bee'
 import { ACCOUNT_TABS } from '../../routes'
 
 const tabMap = {
@@ -8,10 +10,11 @@ const tabMap = {
   CHEQUEBOOK: 1,
   STAMPS: 2,
   FEEDS: 3,
+  STAKING: 4,
 }
 
 interface Props {
-  active: 'WALLET' | 'CHEQUEBOOK' | 'STAMPS' | 'FEEDS'
+  active: 'WALLET' | 'CHEQUEBOOK' | 'STAMPS' | 'FEEDS' | 'STAKING'
 }
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -20,16 +23,12 @@ const useStyles = makeStyles((theme: Theme) =>
       flexGrow: 1,
       marginBottom: theme.spacing(4),
       textTransform: 'none',
+      marginLeft: theme.spacing(-0.25),
+      marginRight: theme.spacing(-0.25),
     },
-    leftTab: {
-      marginRight: theme.spacing(0.125),
-    },
-    centerTab: {
-      marginLeft: theme.spacing(0.125),
-      marginRight: theme.spacing(0.125),
-    },
-    rightTab: {
-      marginLeft: theme.spacing(0.125),
+    tab: {
+      marginLeft: theme.spacing(0.25),
+      marginRight: theme.spacing(0.25),
     },
   }),
 )
@@ -37,6 +36,7 @@ const useStyles = makeStyles((theme: Theme) =>
 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])
@@ -45,10 +45,11 @@ export function AccountNavigation({ active }: Props): ReactElement {
   return (
     <div className={classes.root}>
       <Tabs value={tabMap[active]} onChange={onChange} variant="fullWidth">
-        <Tab className={classes.leftTab} key="WALLET" label="Wallet" />
-        <Tab className={classes.centerTab} key="CHEQUEBOOK" label="Chequebook" />
-        <Tab className={classes.centerTab} key="STAMPS" label="Stamps" />
-        <Tab className={classes.rightTab} key="FEEDS" label="Feeds" />
+        <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>
   )