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,79 @@
+import React, { useState, useEffect } from 'react'
+
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+
+import SideBar from '../components/SideBar';
+import NavBar from '../components/NavBar';
+
+import { useApiHealth, useDebugApiHealth } from '../hooks/apiHooks';
+
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    toolbar: theme.mixins.toolbar,
+    content: {
+      marginLeft: '240px',
+      marginTop: '64px',
+      flexGrow: 1,
+      backgroundColor: theme.palette.background.default,
+      padding: theme.spacing(3),
+      paddingBottom:'65px',
+    },
+    footer: {
+      marginLeft: '240px',
+      backgroundColor: theme.palette.background.default,
+      position: 'fixed',
+      bottom: 0,
+      flexGrow: 1,
+      width:'-webkit-fill-available',
+      padding: theme.spacing(2),
+      textAlign:'center'
+    },
+    logo: {
+      height: '20px',
+      marginRight: '7px',
+    }
+  }),
+);
+
+
+const Dashboard = (props: any) => {
+    const classes = useStyles();
+
+    const [themeMode, toggleThemeMode] = useState('light');
+
+    const { health, isLoadingHealth } = useApiHealth()
+    const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
+
+    useEffect(() => {
+      let theme = localStorage.getItem('theme')
+
+      if (theme) {
+        toggleThemeMode(String(localStorage.getItem('theme')))
+      } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        toggleThemeMode('dark')
+      }
+  
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+        toggleThemeMode(e.matches ? "dark" : "light")
+      });
+
+      return () => window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', e => {
+        toggleThemeMode(e.matches ? "dark" : "light")
+      })
+    }, [])
+
+    let childrenInjectedWithProps = React.cloneElement(props.children, { health, nodeHealth, isLoadingHealth, isLoadingNodeHealth })
+
+    return (
+        <div>
+            <SideBar {...props} themeMode={themeMode} health={health} nodeHealth={nodeHealth} />
+            <NavBar themeMode={themeMode} />
+            <main className={classes.content} >
+                {childrenInjectedWithProps}
+            </main>
+        </div>
+    )
+}
+
+export default Dashboard