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,55 @@
+import type { ReactElement } from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import { Table, TableBody, TableCell, TableContainer, TableRow, TableHead, Paper } from '@material-ui/core'
+
+import ClipboardCopy from '../../components/ClipboardCopy'
+import PeerDetailDrawer from '../../components/PeerDetail'
+import { PostageBatch } from '@ethersphere/bee-js'
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 650,
+  },
+  values: {
+    textAlign: 'right',
+    fontFamily: 'monospace, monospace',
+  },
+})
+interface Props {
+  postageStamps: PostageBatch[] | null
+}
+
+function StampsTable({ postageStamps }: Props): ReactElement | null {
+  if (postageStamps === null) return null
+  const classes = useStyles()
+
+  return (
+    <TableContainer component={Paper}>
+      <Table className={classes.table} size="small" aria-label="Balances Table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Batch ID</TableCell>
+            <TableCell align="right">Utilization</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {postageStamps.map(({ batchID, utilization }) => (
+            <TableRow key={batchID}>
+              <TableCell>
+                <div style={{ display: 'flex' }}>
+                  <small>
+                    <PeerDetailDrawer peerId={batchID} />
+                  </small>
+                  <ClipboardCopy value={batchID} />
+                </div>
+              </TableCell>
+              <TableCell className={classes.values}>{utilization}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+}
+
+export default StampsTable