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,64 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Table, TableBody, TableCell, TableContainer, TableRow, TableHead, Paper, Container, CircularProgress } from '@material-ui/core';
+
+import { ConvertBalanceToBZZ } from '../../utils/common';
+
+const useStyles = makeStyles({
+    table: {
+      minWidth: 650,
+    },
+  });
+
+interface PeerBalance {
+    balance: number,
+    peer: string,
+}
+
+interface PeerBalances {
+    balances: Array<PeerBalance>
+}
+
+interface IProps {
+    peerBalances: PeerBalances | null,
+    loading?: boolean,
+}
+  
+function BalancesTable(props: IProps) {
+    const classes = useStyles();
+
+    return (
+        <div>
+            {props.loading ? 
+            <Container style={{textAlign:'center', padding:'50px'}}>
+                <CircularProgress />
+            </Container>
+            :
+             <TableContainer component={Paper}>
+                <Table className={classes.table} size="small" aria-label="simple table">
+                    <TableHead>
+                    <TableRow>
+                        <TableCell>Peer</TableCell>
+                        <TableCell style={{textAlign:'right'}}>Balance (BZZ)</TableCell>
+                        <TableCell align="right"></TableCell>
+                    </TableRow>
+                    </TableHead>
+                    <TableBody>
+                    {props.peerBalances?.balances.map((peerBalance: PeerBalance, idx: number) => (
+                        <TableRow key={peerBalance.peer}>
+                        <TableCell>{peerBalance.peer}</TableCell>
+                        <TableCell style={{ color: ConvertBalanceToBZZ(peerBalance.balance) > 0 ? '#32c48d' : '#c9201f', textAlign:'right', fontFamily: 'monospace, monospace' }}>
+                            {ConvertBalanceToBZZ(peerBalance.balance).toFixed(7).toLocaleString() }
+                        </TableCell>
+                        <TableCell align="right">
+                        </TableCell>
+                        </TableRow>
+                    ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>}
+        </div>
+    )
+}
+
+export default BalancesTable;