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,47 @@
+import React from 'react';
+import { Typography } from '@material-ui/core/';
+import { CheckCircle, Warning } from '@material-ui/icons/';
+import EthereumAddress from '../../../components/EthereumAddress';
+import DepositModal from '../../../components/DepositModal';
+import CodeBlockTabs from '../../../components/CodeBlockTabs';
+
+export default function ChequebookDeployFund(props: any) {
+    return (
+        <div> 
+            <p style={{marginBottom:'20px', display:'flex'}}>
+                <span style={{ marginRight:'40px'}} >Deploy chequebook and fund with BZZ</span>
+                {props.chequebookAddress?.chequebookaddress ?
+                <DepositModal />
+                : null }
+            </p>
+            <div style={{ marginBottom:'10px' }}>
+            {props.chequebookAddress?.chequebookaddress && props.chequebookBalance && props.chequebookBalance?.totalBalance > 0 ?
+                <div>
+                    <CheckCircle style={{color:'#32c48d', marginRight: '7px', height: '18px'}} />
+                    <span>Your chequebook is deployed and funded!</span>
+                </div>
+            :  
+                props.loadingChequebookAddress || props.isLoadingChequebookBalance ?
+                null 
+                :
+                <div>
+                    <Warning style={{color:'#ff9800', marginRight: '7px', height: '18px'}} />
+                    <span>Your chequebook is either not deployed or funded. Run the below commands to get your address and deposit ETH. Then visit the BZZaar here <a href='#'>https://bzz.ethswarm.org/?transaction=buy&amount=10&slippage=30&receiver=[ENTER_ADDRESS_HERE]</a> to get BZZ</span>
+                    <CodeBlockTabs
+                    showLineNumbers
+                    linux={`bee-get-addr`}
+                    mac={`bee-get-addr`}
+                    />
+                </div>
+            } 
+            </div>
+            <Typography variant="subtitle1" gutterBottom>
+            <span>Chequebook Address</span>
+            </Typography>
+            <EthereumAddress
+            address={props.chequebookAddress?.chequebookaddress}
+            network={'goerli'}
+            />
+            </div>
+    )
+}