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,143 @@
+import axios, { AxiosInstance } from 'axios';
+import { Bee } from "@ethersphere/bee-js";
+
+const beeJSClient = () => {
+    let apiHost
+  
+    if (sessionStorage.getItem('api_host')) {
+      apiHost = String(sessionStorage.getItem('api_host') || '')
+    } else {
+      apiHost = process.env.REACT_APP_BEE_HOST
+    }
+
+    return new Bee(`${apiHost}`)
+}
+
+const beeApiClient = (): AxiosInstance => {
+    let apiHost
+  
+    if (sessionStorage.getItem('api_host')) {
+      apiHost = String(sessionStorage.getItem('api_host') || '')
+    } else {
+      apiHost = process.env.REACT_APP_BEE_HOST
+    }
+
+    return axios.create({
+        baseURL: apiHost
+    })
+}
+
+const beeDebugApiClient = (): AxiosInstance => {
+    let debugApiHost
+  
+    if (sessionStorage.getItem('debug_api_host')) {
+      debugApiHost = String(sessionStorage.getItem('debug_api_host') || '')
+    } else {
+      debugApiHost = process.env.REACT_APP_BEE_DEBUG_HOST
+    }
+
+    return axios.create({
+        baseURL: debugApiHost
+    })
+}
+
+export const beeApi = {
+    status: {
+        health() {
+            return beeApiClient().get('/')
+        }
+    },
+    files: {
+        uploadFile(file: any) {
+            return beeJSClient().uploadFile(file)
+        },
+        uploadData(file: any) { 
+            return beeJSClient().uploadData(file)
+        },
+        downloadFile(hash: string) {
+            return beeJSClient().downloadFile(hash)
+        },
+        downloadData(hash: string) {
+            return beeJSClient().downloadData(hash)
+        },
+    },
+}
+
+export const beeDebugApi = {
+    status: {
+        nodeHealth() {
+            return beeDebugApiClient().get(`/health`)
+        },
+        nodeReadiness() {
+            return beeDebugApiClient().get(`/readiness`)
+        },
+    },
+    connectivity: {
+        addresses() {
+            return beeDebugApiClient().get(`/addresses`)
+        },
+        listPeers() {
+            return beeDebugApiClient().get(`/peers`)
+        },
+        blockListedPeers() {
+            return beeDebugApiClient().get(`/blocklist`)
+        },
+        removePeer(peerId: string) {
+            return beeDebugApiClient().delete(`/peers/${peerId}`)
+        },
+        topology() {
+            return beeDebugApiClient().get(`/topology`)
+        },
+        ping(peerId: string) {
+            return beeDebugApiClient().post(`/pingpong/${peerId}`)
+        }
+    },
+    balance: {
+        balances() {
+            return beeDebugApiClient().get(`/balances`)
+        },
+        peerBalance(peerId: string) {
+            return beeDebugApiClient().get(`/balances/${peerId}`)
+        },
+        consumed() {
+            return beeDebugApiClient().get(`/consumed`)
+        },
+        peerConsumed(peerId: string) {
+            return beeDebugApiClient().get(`/consumed/${peerId}`)
+        }
+    },
+    chequebook: {
+        address() {
+            return beeDebugApiClient().get(`/chequebook/address`)
+        },
+        balance() {
+            return beeDebugApiClient().get(`/chequebook/balance`)
+        },
+        getLastCheques() {
+            return beeDebugApiClient().get(`/chequebook/cheque`)
+        },
+        peerCashout(peerId: string) {
+            return beeDebugApiClient().post(`/chequebook/cashout/${peerId}`)
+        },
+        getPeerLastCashout(peerId: string) {
+            return beeDebugApiClient().get(`/chequebook/cashout/${peerId}`)
+        },
+        getPeerLastCheques(peerId: string) {
+            return beeDebugApiClient().get(`/chequebook/cheque/${peerId}`)
+        },
+        withdraw(amount: bigint) {
+            return beeDebugApiClient().post(`/chequebook/withdraw?amount=${amount}`)
+        },
+        deposit(amount: bigint) {
+            return beeDebugApiClient().post(`/chequebook/deposit?amount=${amount}`)
+        },
+    },
+    settlements: {
+        getSettlements() {
+            return beeDebugApiClient().get(`/settlements`)
+        },
+        peerSettlement(peerId: string) {
+            return beeDebugApiClient().get(`/settlements/${peerId}`)
+        }
+    }
+}