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/pages/top-up/index.tsx

@@ -0,0 +1,56 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+import { ReactElement, useContext } from 'react'
+import { Check } from 'react-feather'
+import { useNavigate } from 'react-router'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import { HistoryHeader } from '../../components/HistoryHeader'
+import { Loading } from '../../components/Loading'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDivider } from '../../components/SwarmDivider'
+import { Context } from '../../providers/Bee'
+import { TopUpProgressIndicator } from './TopUpProgressIndicator'
+
+interface Props {
+  header: string
+  title: string
+  p: ReactElement
+  next: string
+}
+
+export default function Index({ header, title, p, next }: Props): ReactElement {
+  const { nodeAddresses, balance } = useContext(Context)
+  const navigate = useNavigate()
+
+  if (!balance || !nodeAddresses) {
+    return <Loading />
+  }
+
+  const disabled = balance.dai.toDecimal.lte(1)
+
+  return (
+    <>
+      <HistoryHeader>{header}</HistoryHeader>
+      <Box mb={4}>
+        <TopUpProgressIndicator index={0} />
+      </Box>
+      <Box mb={2}>
+        <Typography style={{ fontWeight: 'bold' }}>{title}</Typography>
+      </Box>
+      <Box mb={4}>{p}</Box>
+      <SwarmDivider mb={4} />
+      <Box mb={0.25}>
+        <ExpandableListItemKey label="Funding wallet address" value={balance.address} expanded />
+      </Box>
+      <Box mb={4}>
+        <ExpandableListItem label="xDAI balance" value={balance.dai.toSignificantDigits(4)} />
+      </Box>
+      <Grid container direction="row" justifyContent="space-between">
+        <SwarmButton iconType={Check} onClick={() => navigate(next)} disabled={disabled}>
+          Proceed
+        </SwarmButton>
+        {disabled ? <Typography>Please deposit xDAI to the address above in order to proceed.</Typography> : null}
+      </Grid>
+    </>
+  )
+}