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,155 @@
|
||||
import React, { useState } from 'react';
|
||||
import { beeApi } from '../../services/bee';
|
||||
|
||||
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
|
||||
import { Paper, InputBase, IconButton, Button, Container, CircularProgress } from '@material-ui/core';
|
||||
import { Search } from '@material-ui/icons';
|
||||
import {DropzoneArea} from 'material-ui-dropzone'
|
||||
import ClipboardCopy from '../../components/ClipboardCopy';
|
||||
|
||||
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard';
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
root: {
|
||||
padding: '2px 4px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: 400,
|
||||
},
|
||||
input: {
|
||||
marginLeft: theme.spacing(1),
|
||||
flex: 1,
|
||||
},
|
||||
iconButton: {
|
||||
padding: 10,
|
||||
},
|
||||
divider: {
|
||||
height: 28,
|
||||
margin: 4,
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
export default function Files(props: any) {
|
||||
const classes = useStyles();
|
||||
|
||||
const [inputMode, setInputMode] = useState<'browse' | 'upload'>('browse');
|
||||
const [searchInput, setSearchInput] = useState('');
|
||||
const [searchResult, setSearchResult] = useState('');
|
||||
const [loadingSearch, setLoadingSearch] = useState(false);
|
||||
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
const [uploadReference, setUploadReference] = useState('');
|
||||
const [uploadingFile, setUploadingFile] = useState(false);
|
||||
|
||||
const getFile = () => {
|
||||
setLoadingSearch(true)
|
||||
beeApi.files.downloadFile(searchInput)
|
||||
.then(res => {
|
||||
setSearchResult(new TextDecoder("utf-8").decode(res.data))
|
||||
const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
|
||||
const link = document.createElement('a');
|
||||
link.href = downloadUrl;
|
||||
link.setAttribute('download', 'file.zip'); //any other extension
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
})
|
||||
.catch(error => {
|
||||
})
|
||||
.finally(() => {
|
||||
setLoadingSearch(false)
|
||||
})
|
||||
}
|
||||
|
||||
const uploadFile = () => {
|
||||
setUploadingFile(true)
|
||||
beeApi.files.uploadFile(files[0])
|
||||
.then(hash => {
|
||||
setUploadReference(hash)
|
||||
setFiles([])
|
||||
})
|
||||
.catch(error => {
|
||||
})
|
||||
.finally(() => {
|
||||
setUploadingFile(false)
|
||||
})
|
||||
}
|
||||
|
||||
const handleChange = (files: any) => {
|
||||
if (files) {
|
||||
setFiles(files)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{props.nodeHealth?.status === 'ok' && props.health ?
|
||||
<Container maxWidth="sm">
|
||||
<div style={{marginBottom: '7px'}}>
|
||||
<Button color="primary" style={{marginRight: '7px'}} onClick={() => setInputMode('browse')}>Browse</Button>
|
||||
<Button color="primary" onClick={() => setInputMode('upload')}>Upload</Button>
|
||||
</div>
|
||||
{inputMode === 'browse' ?
|
||||
<Paper component="form" className={classes.root}>
|
||||
<InputBase
|
||||
className={classes.input}
|
||||
placeholder="Enter hash e.g. 0773a91efd6547c754fc1d95fb1c62c7d1b47f959c2caa685dfec8736da95c1c"
|
||||
inputProps={{ 'aria-label': 'search swarm nodes' }}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
/>
|
||||
<IconButton onClick={() => getFile()} className={classes.iconButton} aria-label="search">
|
||||
<Search />
|
||||
</IconButton>
|
||||
</Paper>
|
||||
:
|
||||
<div>
|
||||
{uploadingFile ?
|
||||
<Container style={{textAlign:'center', padding:'50px'}}>
|
||||
<CircularProgress />
|
||||
</Container>
|
||||
:
|
||||
<div>
|
||||
{uploadReference ?
|
||||
<Paper component="form" className={classes.root} style={{marginBottom:'15px', display: 'flex'}}>
|
||||
<span>{uploadReference}</span>
|
||||
<ClipboardCopy
|
||||
value={uploadReference}
|
||||
/>
|
||||
</Paper>
|
||||
:
|
||||
null
|
||||
}
|
||||
<DropzoneArea
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<div style={{marginTop:'15px'}}>
|
||||
<Button onClick={() => uploadFile()} className={classes.iconButton}>
|
||||
Upload
|
||||
</Button>
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
}
|
||||
{loadingSearch ?
|
||||
<Container style={{textAlign:'center', padding:'50px'}}>
|
||||
<CircularProgress />
|
||||
</Container>
|
||||
:
|
||||
<div style={{padding:'20px'}} >
|
||||
{searchResult}
|
||||
</div>
|
||||
}
|
||||
</Container>
|
||||
:
|
||||
props.isLoadingHealth || props.isLoadingNodeHealth ?
|
||||
<Container style={{textAlign:'center', padding:'50px'}}>
|
||||
<CircularProgress />
|
||||
</Container>
|
||||
:
|
||||
<TroubleshootConnectionCard
|
||||
/>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user