feat: add account tabs (#378)

* feat: add account tabs * chore: bump * refactor: change network tab for old accounting * feat: new fonts and text transformation, chequebook tab * feat: polishing
2022-06-17 11:39:56 +02:00
parent 199516d60c
commit 41432bc346
46 changed files with 507 additions and 201 deletions
@@ -0,0 +1,67 @@
+import { Box, Grid, Typography } from '@material-ui/core'
+import { ReactElement, useContext } from 'react'
+import { Download, Gift, Link } from 'react-feather'
+import { useNavigate } from 'react-router'
+import ExpandableListItem from '../../../components/ExpandableListItem'
+import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
+import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
+import { Loading } from '../../../components/Loading'
+import { SwarmButton } from '../../../components/SwarmButton'
+import { Context } from '../../../providers/Bee'
+import { ROUTES } from '../../../routes'
+import { AccountNavigation } from '../AccountNavigation'
+import { Header } from '../Header'
+
+export function AccountWallet(): ReactElement {
+  const { balance } = useContext(Context)
+
+  const navigate = useNavigate()
+
+  if (!balance) {
+    return <Loading />
+  }
+
+  function onCheckTransactions() {
+    window.open(`https://blockscout.com/xdai/mainnet/address/${balance?.address}/transactions`, '_blank')
+  }
+
+  function onInvite() {
+    navigate(ROUTES.ACCOUNT_INVITATIONS)
+  }
+
+  function onDeposit() {
+    navigate(ROUTES.WALLET)
+  }
+
+  return (
+    <>
+      <Header />
+      <AccountNavigation active="WALLET" />
+      <Box mb={4}>
+        <Grid container direction="row" justifyContent="space-between" alignItems="center">
+          <Typography variant="h2">Wallet balance</Typography>
+          <SwarmButton onClick={onDeposit} iconType={Download}>
+            Deposit
+          </SwarmButton>
+        </Grid>
+      </Box>
+      <Box mb={0.25}>
+        <ExpandableListItemKey label="Node wallet address" value={balance.address} expanded />
+      </Box>
+      <Box mb={0.25}>
+        <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
+      </Box>
+      <Box mb={2}>
+        <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton onClick={onCheckTransactions} iconType={Link}>
+          Check transactions on Blockscout
+        </SwarmButton>
+        <SwarmButton onClick={onInvite} iconType={Gift}>
+          Invite to Swarm...
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </>
+  )
+}