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,141 @@
+import React, { useState, useEffect } from 'react'
+import axios from 'axios';
+import { Container, CircularProgress } from '@material-ui/core';
+
+import NodeSetupWorkflow from './NodeSetupWorkflow';
+import StatusCard from './StatusCard';
+import EthereumAddressCard from '../../components/EthereumAddressCard';
+import { useApiHealth, useDebugApiHealth, useApiReadiness, useApiNodeAddresses, useApiChequebookAddress, useApiNodeTopology, useApiChequebookBalance } from '../../hooks/apiHooks';
+
+export default function Status() {
+    const [beeRelease, setBeeRelease] = useState({ name: ''});
+    const [isLoadingBeeRelease, setIsLoadingBeeRelease] = useState<boolean>(false);
+
+    const [apiHost, setApiHost] = useState('');
+    const [debugApiHost, setDebugApiHost] = useState('');
+
+    const [statusChecksVisible, setStatusChecksVisible] = useState<boolean>(false);
+
+    const { health, isLoadingHealth } = useApiHealth()
+    const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
+    const { nodeReadiness, isLoadingNodeReadiness } = useApiReadiness()
+    const { nodeAddresses, isLoadingNodeAddresses } = useApiNodeAddresses()
+    const { chequebookAddress, isLoadingChequebookAddress } = useApiChequebookAddress()
+    const { nodeTopology, isLoadingNodeTopology } = useApiNodeTopology()
+    const { chequebookBalance, isLoadingChequebookBalance } = useApiChequebookBalance()
+
+
+    const fetchLatestBeeRelease = async () => {
+        setIsLoadingBeeRelease(true)
+        axios.get(`${process.env.REACT_APP_BEE_GITHUB_REPO_URL}/releases/latest`)
+        .then(res => {
+            setBeeRelease(res.data)
+        })
+        .catch(error => {
+            console.log(error)
+        })
+        .finally(() => {
+            setIsLoadingBeeRelease(false)
+        })
+    }
+
+    const fetchApiHost = () => {
+        let apiHost
+  
+        if (sessionStorage.getItem('api_host')) {
+            apiHost = String(sessionStorage.getItem('api_host') || '')
+        } else {
+            apiHost = String(process.env.REACT_APP_BEE_HOST)
+        }
+        setApiHost(apiHost)
+    }
+
+    const fetchDebugApiHost = () => {
+        let debugApiHost
+  
+        if (sessionStorage.getItem('debug_api_host')) {
+            debugApiHost = String(sessionStorage.getItem('debug_api_host') || '')
+        } else {
+            debugApiHost = String(process.env.REACT_APP_BEE_DEBUG_HOST)
+        }
+        setDebugApiHost(debugApiHost)
+    }
+
+    useEffect(() => {
+        fetchApiHost()
+        fetchDebugApiHost()
+        fetchLatestBeeRelease() 
+    }, []);
+
+    return (
+        <div>
+            {nodeHealth?.status === 'ok' && 
+            health && 
+            beeRelease && 
+            beeRelease.name === `v${nodeHealth?.version?.split('-')[0]}` &&
+            nodeAddresses?.ethereum && 
+            chequebookAddress?.chequebookaddress && chequebookBalance && chequebookBalance?.totalBalance > 0 &&
+            nodeTopology.connected && nodeTopology.connected > 0 &&
+            !statusChecksVisible  ? 
+                <div>
+                    <StatusCard 
+                    nodeHealth={nodeHealth} 
+                    loadingNodeHealth={isLoadingNodeHealth} 
+                    nodeReadiness={nodeReadiness} 
+                    loadingNodeReadiness={isLoadingNodeReadiness} 
+                    beeRelease={beeRelease}
+                    loadingBeeRelease={isLoadingBeeRelease}
+                    nodeAddresses={nodeAddresses} 
+                    loadingNodeTopology={isLoadingNodeTopology}
+                    nodeTopology={nodeTopology}
+                    setStatusChecksVisible={setStatusChecksVisible}
+                    />
+                    <EthereumAddressCard 
+                    nodeAddresses={nodeAddresses} 
+                    isLoadingNodeAddresses={isLoadingNodeAddresses}
+                    chequebookAddress={chequebookAddress}
+                    isLoadingChequebookAddress={isLoadingChequebookAddress} 
+                    />
+                </div>
+                :
+                ( isLoadingNodeHealth || isLoadingHealth || isLoadingNodeReadiness || isLoadingChequebookAddress ||
+                    isLoadingNodeTopology || isLoadingBeeRelease || isLoadingNodeAddresses || isLoadingBeeRelease || isLoadingChequebookBalance
+                ) 
+                ? 
+                <Container style={{textAlign:'center', padding:'50px'}}>
+                    <CircularProgress />
+                </Container>
+                :
+                <NodeSetupWorkflow
+                beeRelease={beeRelease}
+                isLoadingBeeRelease={isLoadingBeeRelease}
+
+                nodeHealth={nodeHealth} 
+                isLoadingNodeHealth={isLoadingNodeHealth} 
+
+                nodeReadiness={nodeReadiness} 
+                isLoadingNodeReadiness={isLoadingNodeReadiness} 
+
+                nodeAddresses={nodeAddresses} 
+                isLoadingNodeAddresses={isLoadingNodeAddresses} 
+
+                nodeTopology={nodeTopology}
+                isLoadingNodeTopology={isLoadingNodeTopology}
+
+                nodeApiHealth={health}
+                isLoadingHealth={isLoadingHealth}
+
+                chequebookAddress={chequebookAddress}
+                isLoadingChequebookAddress={isLoadingChequebookAddress}
+                
+                chequebookBalance={chequebookBalance}
+                isLoadingChequebookBalance={isLoadingChequebookBalance}
+
+                apiHost={apiHost}
+                debugApiHost={debugApiHost}
+                setStatusChecksVisible={setStatusChecksVisible}
+                />
+            }
+        </div>
+    )
+}