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,77 @@
+import React, { useState } from 'react'
+import { Paper, Container, TextField, Typography, Button } from '@material-ui/core';
+
+export default function Settings() {
+
+    const [refreshVisibility, toggleRefreshVisibility] = useState(false)
+    const [host, setHost] = useState('')
+    const [debugHost, setDebugHost] = useState('')
+
+    const handleNewHostConnection = () => {
+        if (host) {
+            sessionStorage.setItem('api_host', host)
+        }
+        if (debugHost) {
+            sessionStorage.setItem('debug_api_host', debugHost)
+        }
+        if (host || debugHost) {
+            toggleRefreshVisibility(!refreshVisibility)
+            window.location.reload();
+        }
+    }
+
+    return (
+        <div>
+            <Container>
+                <Typography variant="h4" gutterBottom>
+                    Settings
+                </Typography>
+                <Paper>
+                    <TextField
+                    id="filled-full-width"
+                    label="API Endpoint"
+                    style={{ margin: 0 }}
+                    placeholder="ex: 127.0.0.0.1:1633"
+                    helperText="Enter node host override / port"
+                    fullWidth
+                    defaultValue={sessionStorage.getItem('api_host') ? sessionStorage.getItem('api_host') : process.env.REACT_APP_BEE_HOST}
+                    margin="normal"
+                    InputLabelProps={{
+                        shrink: true,
+                    }}
+                    onChange={(e) => {
+                        setHost(e.target.value)
+                        toggleRefreshVisibility(true)
+                    }}
+                    variant="filled"
+                    />
+                </Paper>
+                <Paper style={{marginTop:'20px'}}>
+                    <TextField
+                    id="filled-full-width"
+                    label="Debug API Endpoint"
+                    style={{ margin: 0 }}
+                    placeholder="ex: 127.0.0.0.1:1635"
+                    helperText="Enter node debug host override / port"
+                    fullWidth
+                    defaultValue={sessionStorage.getItem('debug_api_host') ? sessionStorage.getItem('debug_api_host') : process.env.REACT_APP_BEE_DEBUG_HOST}
+                    onChange={(e) => {
+                        setDebugHost(e.target.value)
+                        toggleRefreshVisibility(true)
+                    }}
+                    margin="normal"
+                    InputLabelProps={{
+                        shrink: true,
+                    }}
+                    variant="filled"
+                    />
+                </Paper>
+                {refreshVisibility ?
+                <div style={{marginTop:'20px'}}>
+                <Button variant='outlined' color='primary' onClick={() => handleNewHostConnection()}>Save</Button>
+                </div> 
+                : null}
+            </Container>
+        </div>
+    )
+}