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>
This commit is contained in:
matmertz25
GitHub
@@ -0,0 +1,172 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
|
||||
import { Card, CardContent, Typography, Chip, Button } from '@material-ui/core/';
|
||||
import { CheckCircle, Error, ArrowRight, ArrowDropUp } from '@material-ui/icons/';
|
||||
import { Skeleton } from '@material-ui/lab';
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
root: {
|
||||
display: 'flex',
|
||||
},
|
||||
details: {
|
||||
display: 'flex',
|
||||
flex: '1 0 auto',
|
||||
|
||||
flexDirection: 'column',
|
||||
},
|
||||
content: {
|
||||
flex: '1 0 auto',
|
||||
},
|
||||
status: {
|
||||
color: '#2145a0',
|
||||
backgroundColor: '#e1effe',
|
||||
}
|
||||
}),
|
||||
);
|
||||
|
||||
|
||||
interface NodeHealth {
|
||||
status?: string,
|
||||
version?: string
|
||||
}
|
||||
|
||||
interface NodeReadiness {
|
||||
status?: string,
|
||||
version?: string
|
||||
}
|
||||
|
||||
interface NodeAddresses {
|
||||
overlay: string,
|
||||
underlay: string[],
|
||||
ethereum: string,
|
||||
public_key: string,
|
||||
pss_public_key: string
|
||||
}
|
||||
|
||||
interface NodeTopology {
|
||||
baseAddr: string,
|
||||
bins: string[],
|
||||
connected: number,
|
||||
depth: number,
|
||||
nnLowWatermark: number,
|
||||
population: number,
|
||||
timestamp: string,
|
||||
}
|
||||
|
||||
|
||||
interface IProps{
|
||||
nodeHealth: NodeHealth,
|
||||
loadingNodeHealth: boolean,
|
||||
nodeReadiness: NodeReadiness | null,
|
||||
loadingNodeReadiness: boolean,
|
||||
beeRelease: any,
|
||||
loadingBeeRelease: boolean,
|
||||
nodeAddresses: NodeAddresses,
|
||||
nodeTopology: NodeTopology,
|
||||
loadingNodeTopology: boolean,
|
||||
setStatusChecksVisible: any,
|
||||
}
|
||||
|
||||
function StatusCard(props: IProps) {
|
||||
const classes = useStyles();
|
||||
|
||||
const [underlayAddressesVisible, setUnderlayAddresessVisible] = useState<Boolean>(false)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card className={classes.root}>
|
||||
{ !props.loadingNodeHealth && props.nodeHealth ?
|
||||
<div className={classes.details}>
|
||||
<CardContent className={classes.content}>
|
||||
<Typography component="h5" variant="h5" style={{display:'flex', justifyContent:'space-between'}}>
|
||||
{ props.nodeHealth.status === 'ok' ?
|
||||
<div>
|
||||
<CheckCircle style={{color:'#32c48d', marginRight: '7px'}} />
|
||||
<span>Connected to Bee Node</span>
|
||||
</div>
|
||||
:
|
||||
<div>
|
||||
<Error style={{color:'#c9201f', marginRight: '7px'}} />
|
||||
<span>Could not connect to Bee Node</span>
|
||||
</div>
|
||||
}
|
||||
<Button variant='outlined' color='primary' size='small' style={{marginLeft:'12px'}} onClick={() => props.setStatusChecksVisible(true)}>View Status Checks</Button>
|
||||
</Typography>
|
||||
<div style={{marginBottom: '20px' }}>
|
||||
<span style={{marginRight:'20px'}}>Discovered Nodes: { props.nodeTopology.population }</span>
|
||||
<span style={{marginRight:'20px'}}>
|
||||
<span>Connected Peers: </span>
|
||||
<Link to='/peers/'>
|
||||
{ props.nodeTopology.connected }
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant="subtitle2" gutterBottom>
|
||||
<span>AGENT: </span>
|
||||
<a href='https://github.com/ethersphere/bee' rel='noreferrer' target='_blank'>Bee</a>
|
||||
<span>{props.nodeReadiness?.version ? ` v${props.nodeReadiness.version}` : '-'}</span>
|
||||
{props.beeRelease && props.beeRelease.name === `v${props.nodeReadiness?.version?.split('-')[0]}` ?
|
||||
<Chip
|
||||
style={{ marginLeft: '7px', color: '#2145a0' }}
|
||||
size="small"
|
||||
label='latest'
|
||||
className={classes.status}
|
||||
/>
|
||||
:
|
||||
props.loadingBeeRelease ?
|
||||
''
|
||||
:
|
||||
<a href='#'>update</a>
|
||||
}
|
||||
</Typography>
|
||||
<Typography variant="subtitle2" gutterBottom>
|
||||
<span>PUBLIC KEY: </span>
|
||||
<span>{ props.nodeAddresses.public_key ? props.nodeAddresses.public_key : '-' }</span>
|
||||
</Typography>
|
||||
<Typography variant="subtitle2" gutterBottom>
|
||||
<span>PSS PUBLIC KEY: </span>
|
||||
<span>{ props.nodeAddresses.pss_public_key ? props.nodeAddresses.pss_public_key : '-' }</span>
|
||||
</Typography>
|
||||
<Typography variant="subtitle2" gutterBottom>
|
||||
<Typography style={{marginTop:'20px'}}>
|
||||
<span>OVERLAY ADDRESS (PEER ID): </span>
|
||||
<span>{ props.nodeAddresses.overlay ? props.nodeAddresses.overlay : '-' }</span>
|
||||
</Typography>
|
||||
<Typography onClick={() => setUnderlayAddresessVisible(!underlayAddressesVisible)}>
|
||||
<Button color="primary" style={{padding: 0, marginTop:'6px'}}>
|
||||
{ underlayAddressesVisible ?
|
||||
<ArrowDropUp style={{fontSize:'12px'}} /> :
|
||||
<ArrowRight style={{fontSize:'12px'}} />
|
||||
}
|
||||
<span>Underlay Addresses</span>
|
||||
</Button>
|
||||
</Typography>
|
||||
{underlayAddressesVisible ?
|
||||
<div>
|
||||
|
||||
{ props.nodeAddresses.underlay ?
|
||||
props.nodeAddresses.underlay.map(item => (<li>{item}</li>))
|
||||
: '-' }
|
||||
</div>
|
||||
: null}
|
||||
</Typography>
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
:
|
||||
<div style={{padding: '16px'}}>
|
||||
<Skeleton width={650} height={32} animation="wave" />
|
||||
<Skeleton width={650} height={24} animation="wave" />
|
||||
<Skeleton width={650} height={24} animation="wave" />
|
||||
</div>
|
||||
}
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default StatusCard
|
||||
Reference in New Issue
Block a user