feat: postage stamps support (#115)

* chore: release 0.3.0 * feat: added postage stamp table to list all stamps * feat: postage stamp modal to purchase stamps * feat: postage stamps provider * chore: added formik * chore: proper form state handling * chore: revert accidental release inclusion * chore: polishing identified when developing the upload functionality Co-authored-by: bee-worker <70210089+bee-worker@users.noreply.github.com>
2021-06-02 13:13:27 +02:00
parent 9fee1aa68a
commit 4074a9de5d
14 changed files with 22086 additions and 90 deletions
@@ -0,0 +1,73 @@
+import { ReactElement, useContext, useEffect } from 'react'
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { Container, CircularProgress } from '@material-ui/core'
+
+import StampsTable from './StampsTable'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import CreatePostageStampModal from './CreatePostageStampModal'
+import LastUpdate from '../../components/LastUpdate'
+
+import { useApiHealth, useDebugApiHealth } from '../../hooks/apiHooks'
+import { Context } from '../../providers/Stamps'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      display: 'grid',
+      rowGap: theme.spacing(2),
+    },
+    actions: {
+      display: 'flex',
+      width: '100%',
+      columnGap: theme.spacing(1),
+      rowGap: theme.spacing(1),
+      flex: '0 1 auto',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+    },
+  }),
+)
+
+export default function Accounting(): ReactElement {
+  const classes = useStyles()
+
+  const { health, isLoadingHealth } = useApiHealth()
+  const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
+  const { stamps, isLoading, error, lastUpdate, start, stop } = useContext(Context)
+  useEffect(() => {
+    start()
+
+    return () => stop()
+  }, [])
+
+  if (isLoadingHealth || isLoadingNodeHealth) {
+    return (
+      <Container style={{ textAlign: 'center', padding: '50px' }}>
+        <CircularProgress />
+      </Container>
+    )
+  }
+
+  if (nodeHealth?.status !== 'ok' || !health) return <TroubleshootConnectionCard />
+
+  return (
+    <div className={classes.root}>
+      {error && (
+        <Container style={{ textAlign: 'center', padding: '50px' }}>
+          Error loading postage stamps details: {error.message}
+        </Container>
+      )}
+      {!error && (
+        <>
+          <div className={classes.actions}>
+            <CreatePostageStampModal />
+            <LastUpdate date={lastUpdate} />
+            <div style={{ height: '5px' }}>{isLoading && <CircularProgress />}</div>
+          </div>
+          <StampsTable postageStamps={stamps} />
+        </>
+      )}
+    </div>
+  )
+}