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
@@ -1,22 +1,94 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import {BrowserRouter as Router} from 'react-router-dom';
 import './App.css';

+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
+
+import BaseRouter from './routes/routes';
+
+
+declare global {
+  interface Window {
+      ethereum: {};
+      web3: {};
+  }
+}
+
+const lightTheme = createMuiTheme({
+  typography: {
+    fontFamily: [
+      'Montserrat',
+      'Nunito',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif'
+    ].join(','),
+  }
+});
+
+const darkTheme = createMuiTheme({
+  palette: {
+    type: "dark",
+    background: {
+      default: '#0d1117', //'#111827',
+      paper: '#161b22', //'#1f2937',
+    },
+    primary: {
+      // light: will be calculated from palette.primary.main,
+      main: '#5e72e4' //'#3f51b5',
+      // dark: will be calculated from palette.primary.main,
+      // contrastText: will be calculated to contrast with palette.primary.main
+    },
+    secondary: {
+      main: '#1f2937',
+    },
+  },
+  typography: {
+    fontFamily: [
+      'Montserrat',
+      'Nunito',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif'
+    ].join(','),
+  }
+});
+
+
 function App() {
+  const [themeMode, toggleThemeMode] = useState('light');
+
+  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")
+    })
+  
+  }, []);
+
  return (
    <div className="App">
-      <header className="App-header">
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <ThemeProvider theme={themeMode === 'light' ? lightTheme : darkTheme}>
+        <CssBaseline />
+        <Router>
+          <BaseRouter />
+        </Router>
+      </ThemeProvider>
    </div>
  );
 }