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,70 @@
+import React, { useState } from 'react';
+
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import { AppBar, Toolbar, Chip, IconButton } from '@material-ui/core/';
+
+import { Sun, Moon } from 'react-feather';
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    appBar: {
+      width: `calc(100% - ${drawerWidth}px)`,
+      marginLeft: drawerWidth,
+      background:'linear-gradient(35deg,#fb6340,#fbb140)!important'
+    },
+    network: {
+
+    }
+  }),
+);
+
+
+export default function SideBar(props: any) {
+  const [darkMode, toggleDarkMode] = useState(false);
+
+  const switchTheme = () => {
+    let theme = localStorage.getItem('theme')
+    if (theme) {
+      localStorage.setItem('theme', theme === 'light' ? 'dark' : 'light')
+    } else {
+      localStorage.setItem('theme', darkMode ? 'dark' : 'light')
+    }
+    
+    toggleDarkMode(!darkMode)
+    window.location.reload()
+  }
+
+  const classes = useStyles();
+
+  return (
+    <div>
+      <AppBar position="fixed" className={classes.appBar}>
+        <Toolbar style={{display: 'flex'}}>
+          <Chip
+          style={{ marginLeft: '7px'}}
+          size="small"
+          label='Goerli'
+          className={classes.network}
+          />
+          <div style={{width:'100%'}}>
+            <div style={{float:'right'}} >
+              <IconButton style={{marginRight:'10px'}} aria-label="dark-mode" onClick={() => switchTheme()}>
+                {props.themeMode === 'dark' ?
+                <Moon />
+                :
+                <Sun />
+                }
+              </IconButton>
+              {/* <Chip 
+              label="Connect Wallet"
+              color="primary"
+              /> */}
+            </div>
+          </div>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}