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,93 @@
+import React from 'react'
+
+import { Theme, createStyles, makeStyles, useTheme } from '@material-ui/core/styles';
+import { Card, CardContent, Typography } from '@material-ui/core/';
+
+import EthereumAddress from '../components/EthereumAddress';
+import { Skeleton } from '@material-ui/lab';
+
+import type { ChequebookAddressResponse } from '@ethersphere/bee-js';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      marginTop: '20px',
+    },
+    details: {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    content: {
+      flex: '1 0 auto',
+    },
+    status: {
+        color: '#fff',
+        backgroundColor: '#76a9fa',
+    }
+  }),
+);  
+
+
+interface NodeAddresses {
+    overlay: string,
+    underlay: string[],
+    ethereum: string,
+    public_key: string, 
+    pss_public_key: string
+}
+
+interface IProps{
+    nodeAddresses: NodeAddresses | null,
+    isLoadingNodeAddresses: boolean,
+    chequebookAddress: ChequebookAddressResponse | null,
+    isLoadingChequebookAddress: boolean,
+}
+
+function EthereumAddressCard(props: IProps) {
+    const classes = useStyles();
+    const theme = useTheme();
+
+    return (
+        <div>
+            <Card className={classes.root}>
+                {props.isLoadingNodeAddresses ? 
+                <div style={{padding: '16px'}}>
+                    <Skeleton width={300} height={30} animation="wave" />
+                    <Skeleton width={300} height={50} animation="wave" />
+                </div>
+                :
+                <div className={classes.details}>
+                    <CardContent className={classes.content}>
+                        <Typography variant="subtitle1" gutterBottom>
+                            <span>Ethereum Address</span>
+                        </Typography>
+                        <EthereumAddress
+                        address={props.nodeAddresses?.ethereum}
+                        network={'goerli'}
+                        />   
+                    </CardContent>
+                </div>}
+                {props.isLoadingChequebookAddress ? 
+                <div style={{padding: '16px'}}>
+                    <Skeleton width={300} height={30} animation="wave" />
+                    <Skeleton width={300} height={50} animation="wave" />
+                </div>
+                :
+                <div className={classes.details}>
+                    <CardContent className={classes.content}>
+                        <Typography variant="subtitle1" gutterBottom>
+                            <span>Chequebook Contract Address</span>
+                        </Typography>
+                        <EthereumAddress
+                        address={props.chequebookAddress?.chequebookaddress}
+                        network={'goerli'}
+                        />   
+                    </CardContent>
+                </div>}
+            </Card>
+        </div>
+    )
+}
+
+export default EthereumAddressCard