feat: add light node upgrade top up methods (#372)

* feat: add top up

* chore: remove console.log

* build: add pseudo-missing dependency

* feat: add missing top up components

* fix: crypto route

* feat(wip): add gift wallet logic

* fix: fix gift wallet flows

* feat: simplify flow without fund step

* feat: add loading screens

* fix: remove alert

* fix: prepend http if needed

* fix: fix bug that was reintroduced with merge

* refactor: rename minusEther to minusBaseUnits

* fix: remove unused setStartedAt

* build: remove unused dependency

src/components/AlertVersion.tsx

@@ -1,54 +0,0 @@
-import { ReactElement, useState, useContext } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Alert, AlertTitle } from '@material-ui/lab'
-import Collapse from '@material-ui/core/Collapse'
-import IconButton from '@material-ui/core/IconButton'
-import CloseIcon from '@material-ui/icons/Close'
-import { Context } from '../providers/Bee'
-import { SUPPORTED_BEE_VERSION_EXACT } from '@ethersphere/bee-js'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      marginBottom: theme.spacing(2),
-    },
-  }),
-)
-
-export default function VersionAlert(): ReactElement | null {
-  const classes = useStyles()
-  const { isLoading, latestUserVersionExact } = useContext(Context)
-  const [open, setOpen] = useState<boolean>(true)
-
-  const isExactlySupportedBeeVersion = SUPPORTED_BEE_VERSION_EXACT === latestUserVersionExact
-
-  if (isLoading || !latestUserVersionExact) return null
-
-  return (
-    <Collapse in={!isExactlySupportedBeeVersion && open}>
-      <div className={classes.root}>
-        <Alert
-          severity="warning"
-          action={
-            <IconButton
-              aria-label="close"
-              color="inherit"
-              size="small"
-              onClick={() => {
-                setOpen(false)
-              }}
-            >
-              <CloseIcon fontSize="inherit" />
-            </IconButton>
-          }
-        >
-          <AlertTitle>Warning</AlertTitle>
-          Your Bee node version (<code>{latestUserVersionExact}</code>) does not exactly match the Bee version we tested
-          the Bee Dashboard against (<code>{SUPPORTED_BEE_VERSION_EXACT}</code>). Please note that some functionality
-          may not work properly.
-        </Alert>
-      </div>
-    </Collapse>
-  )
-}

src/components/CashoutModal.tsx

@@ -6,7 +6,7 @@ import DialogContent from '@material-ui/core/DialogContent'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { useSnackbar } from 'notistack'
-import { ReactElement, useState, useContext } from 'react'
+import { ReactElement, useContext, useState } from 'react'
 import { Zap } from 'react-feather'
 import { Context as SettingsContext } from '../providers/Settings'
 import EthereumAddress from './EthereumAddress'
@@ -61,7 +61,7 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
   return (
     <div>
       <Button variant="contained" onClick={handleClickOpen} startIcon={<Zap size="1rem" />}>
-        Cash out peer {peerId.substr(0, 8)}[…]
+        Cash out peer {peerId.slice(0, 8)}[…]
       </Button>
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
         <DialogTitle id="form-dialog-title">Cashout Cheque</DialogTitle>

src/components/ExpandableListItemKey.tsx

@@ -38,6 +38,7 @@ const useStyles = makeStyles((theme: Theme) =>
 interface Props {
   label: string
   value: string
+  expanded?: boolean
 }
 
 const lengthWithoutPrefix = (s: string) => s.replace(/^0x/i, '').length
@@ -54,9 +55,9 @@ const split = (s: string): string[] => {
   return s.match(/(0x|.{1,8})/gi) || []
 }
 
-export default function ExpandableListItemKey({ label, value }: Props): ReactElement | null {
+export default function ExpandableListItemKey({ label, value, expanded }: Props): ReactElement | null {
   const classes = useStyles()
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(expanded || false)
   const [copied, setCopied] = useState(false)
   const toggleOpen = () => setOpen(!open)
 

src/components/SideBar.tsx

@@ -2,7 +2,7 @@ import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { OpenInNewSharp } from '@material-ui/icons'
 import type { ReactElement } from 'react'
-import { Bookmark, BookOpen, DollarSign, FileText, Home, Layers, Settings } from 'react-feather'
+import { Bookmark, BookOpen, Briefcase, DollarSign, FileText, Gift, Home, Layers, Settings } from 'react-feather'
 import { Link } from 'react-router-dom'
 import Logo from '../assets/logo.svg'
 import { config } from '../config'
@@ -41,6 +41,16 @@ const navBarItems = [
     path: ROUTES.SETTINGS,
     icon: Settings,
   },
+  {
+    label: 'Account',
+    path: ROUTES.WALLET,
+    icon: Briefcase,
+  },
+  {
+    label: 'Gift Wallets',
+    path: ROUTES.GIFT_CODES,
+    icon: Gift,
+  },
 ]
 
 const drawerWidth = 300

src/components/SwarmDivider.tsx

@@ -0,0 +1,17 @@
+import { Box, Divider } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+interface Props {
+  my?: number
+  mt?: number
+  mb?: number
+  color?: string
+}
+
+export function SwarmDivider({ my, mt, mb, color = '#cbcbcb' }: Props): ReactElement {
+  return (
+    <Box my={my} mt={mt} mb={mb}>
+      <Divider style={{ borderColor: color }} />
+    </Box>
+  )
+}