feat: initial Proof of Concept UI (#1)

* initial dashboard layout * add node status card * add accounting section, pull peer data * add file functionality with bee-js, first iteration of accounts page * Add balances and chequebook table * add blockie / identicon for addresses * add basic settlements table * implement theme overrides * cleanup logging * Add troubleshooting block * add initial dark theme support, add copy to clipboard, QR code support * show active element on sidebar * remove duplicate status page and make status page index * Update package.json Co-authored-by: Vojtech Simetka <vojtech@simetka.cz> * Update public/index.html Co-authored-by: Vojtech Simetka <vojtech@simetka.cz> * Update src/pages/accounting/AccountCard.tsx Co-authored-by: Vojtech Simetka <vojtech@simetka.cz> * change bee api client to use beeJS library * add initial setup workflow * breakout ethereum address component, define initial setup workflow * add types to responses, add additional node troubleshooting info to workflow * make setup steps nonlinear and interactive * make host endpoint dynamic on setup * split out api calls into custom hooks, add component loading indicators * add depost / withdrawl functionality, show transactions in BZZ * add multiOS code support troubleshooting, check for balance in chequebook on setup * add ability to change apis in settings page * show file loading status * Style active sidebar item * reload on theme change * modify troubleshooting verbage, add cashout functionality and details, * facilitate file upload with beeJS * update readme to show UI samples * remove nnPeersWatermark from peers page * split node steps into separate components, make status page visible at anytime * minor UI/UX enhancements * format accounting page * remove WIP wallet connection code * Update src/components/CashoutModal.tsx Co-authored-by: Vojtech Simetka <vojtech@simetka.cz> * use bigint for deposits/withdrawls * revise status card * clean up unused imports and variables * add api status to sidebar * obfuscate pages with troubleshooting component when apis not connected * add localhost OS detection for troubleshooting code * cleanup extra logos * monospace BZZ in tables * hide troubleshooting page while loading API status * Remove ability to remove peers * add null types to API responses Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>
2021-03-12 12:01:56 -05:00
parent f4ce271479
commit 34d2dfda5a
60 changed files with 6155 additions and 364 deletions
@@ -0,0 +1,89 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Input from '@material-ui/core/Input';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import { Snackbar } from '@material-ui/core';
+
+import { beeDebugApi } from '../services/bee';
+
+export default function DepositModal() {
+  const [open, setOpen] = React.useState(false);
+  const [peerId, setPeerId] = React.useState('');
+
+  const [showToast, setToastVisibility] = React.useState(false);
+  const [toastContent, setToastContent] = React.useState('');
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleCashout = () => {
+    if (peerId) {
+        beeDebugApi.chequebook.peerCashout(peerId)
+        .then(res => {
+            setOpen(false);
+            handleToast(`Successfully cashed out cheque. Transaction ${res.data.transactionHash}`)
+        })
+        .catch(error => {
+            handleToast('Error with cashout')
+        })
+    } else {
+        handleToast('Peer Id invalid')
+    }
+  };
+
+  const handleToast = (text: string) => {
+    setToastContent(text)
+    setToastVisibility(true);
+    setTimeout(
+      () => setToastVisibility(false), 
+      7000
+    );
+  };
+
+  return (
+    <div>
+      <Button variant="contained" color="primary" onClick={handleClickOpen} style={{marginLeft:'7px'}}>
+        Cashout
+      </Button>
+        <Snackbar
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        open={showToast}
+        message={toastContent}
+        />
+      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+        <DialogTitle id="form-dialog-title">Cashout Cheque</DialogTitle>
+        <DialogContent>
+          <DialogContentText style={{marginTop: '20px'}}>
+            Specify the peer Id of the peer you would like to cashout.
+          </DialogContentText>
+          <Input
+            autoFocus
+            margin="dense"
+            id="peerId"
+            type="text"
+            placeholder='Peer Id'
+            fullWidth
+            onChange={(e) => setPeerId(e.target.value)}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            Cancel
+          </Button>
+          <Button onClick={handleCashout} color="primary">
+            Cashout
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+}