This repository has been archived by the owner on Feb 27, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 121
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from etclabscore/feature/add-dashboard
Feature/add dashboard
- Loading branch information
Showing
12 changed files
with
664 additions
and
574 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import * as React from 'react'; | ||
| import { VictoryChart, VictoryLine, VictoryLabel } from 'victory'; | ||
|
|
||
| export default function HashChart(props: any) { | ||
| const { title, data, width, height } = props; | ||
|
|
||
|
|
||
| return ( | ||
| <VictoryChart title={title} height={height} width={width}> | ||
| <VictoryLabel x={25} y={24} text={title}/> | ||
| <VictoryLine data={data} height={height} width={width}/> | ||
| </VictoryChart> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| import HashChart from './HashChart'; | ||
| export default HashChart; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,12 @@ | ||
| export function hashesToGH(hashes: number) { | ||
| return (hashes / 1000000000).toFixed(2); | ||
| return parseInt((hashes / 1000000000).toFixed(2), 10); | ||
| } | ||
|
|
||
|
|
||
| export function weiToGwei(wei: any) { | ||
| if (wei === 0) { | ||
| return wei; | ||
| } | ||
|
|
||
| return wei / 1000000000; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,143 @@ | ||
| import * as React from 'react'; | ||
| import HashRate from '../components/HashRate'; | ||
| import HashChart from '../components/HashChart'; | ||
| import BlockList from './BlockList'; | ||
| import { EthRpc } from 'emerald-js-ui'; | ||
| import Card from '@material-ui/core/Card'; | ||
| import CardContent from '@material-ui/core/CardContent'; | ||
| import Typography from '@material-ui/core/Typography'; | ||
| import { hashesToGH } from '../components/formatters'; | ||
| import { VictoryChart, VictoryBar, VictoryLabel } from 'victory'; | ||
| import { weiToGwei } from '../components/formatters'; | ||
| import Button from '@material-ui/core/Button'; | ||
| import Grid from '@material-ui/core/Grid'; | ||
|
|
||
|
|
||
| const config = { | ||
| blockTime: 15, // seconds | ||
| blockHistoryLength: 1200, | ||
| chartHeight: 200, | ||
| chartWidth: 400 | ||
| } | ||
|
|
||
| const blockMapGasUsed = (block) => { | ||
| return { | ||
| x: block.number, | ||
| y: block.gasUsed / 1000000 | ||
| } | ||
| } | ||
|
|
||
| const blockMapUncles = (block) => { | ||
| return { | ||
| x: block.number, | ||
| y: block.uncles.length | ||
| } | ||
| } | ||
|
|
||
| const blockMapHashRate = (block) => { | ||
| return { | ||
| x: block.number, | ||
| y: hashesToGH(block.difficulty.dividedBy(config.blockTime)) | ||
| } | ||
| } | ||
|
|
||
| const blockMapTransactionCount = (block) => { | ||
| return { | ||
| x: block.number, | ||
| y: block.transactions.length | ||
| } | ||
| } | ||
|
|
||
| const getStyles = () => { | ||
| return { | ||
| topItems: { | ||
| display: 'flex', | ||
| justifyContent: 'space-between', | ||
| alignItems: 'center' | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export default (props: any) => { | ||
| const styles = getStyles(); | ||
| return ( | ||
| <div style={{display: 'flex'}}> | ||
| <Card style={{width: '350px', marginRight: '10px'}}> | ||
| <CardContent> | ||
| <Typography variant="headline"> | ||
| Network Hash Rate | ||
| </Typography> | ||
| <EthRpc method="eth.getBlock" params={['latest', true]} refresh={3000}> | ||
| {block => ( | ||
| <HashRate block={block} blockTime={15}> | ||
| {hashRate => <Typography>{hashRate} GH/s</Typography>} | ||
| </HashRate> | ||
| )} | ||
| </EthRpc> | ||
| </CardContent> | ||
| </Card> | ||
| <Card style={{width: '350px'}}> | ||
| <CardContent> | ||
| <Typography variant="headline"> | ||
| Block Height | ||
| </Typography> | ||
| <EthRpc method="eth.getBlock" params={['latest', true]} refresh={3000}> | ||
| {block => <Typography>{block.number}</Typography>} | ||
| </EthRpc> | ||
| </CardContent> | ||
| </Card> | ||
| </div> | ||
| <EthRpc method="eth.getBlock" params={['latest', true]}> | ||
| {block => ( | ||
| <EthRpc method="eth.gasPrice"> | ||
| {gasPrice => ( | ||
| <div> | ||
| <Grid container spacing={24}> | ||
| <Grid style={styles.topItems} item xs={12}> | ||
| <div> | ||
| <Typography variant="headline"> | ||
| Block Height | ||
| </Typography> | ||
| <Typography>{block.number}</Typography> | ||
| </div> | ||
| <div> | ||
| <Typography variant="headline"> | ||
| Gas Price | ||
| </Typography> | ||
| <Typography>{weiToGwei(gasPrice.toNumber())} Gwei</Typography> | ||
| </div> | ||
| <div> | ||
| <Typography variant="headline"> | ||
| Network Hash Rate | ||
| </Typography> | ||
| <HashRate block={block} blockTime={config.blockTime}> | ||
| {hashRate => <Typography>{hashRate} GH/s</Typography>} | ||
| </HashRate> | ||
| </div> | ||
| <div> | ||
| <Typography variant="headline"> | ||
| Peers | ||
| </Typography> | ||
| <EthRpc method="net.peerCount"> | ||
| {peerCount => <Typography>{peerCount}</Typography>} | ||
| </EthRpc> | ||
| </div> | ||
| </Grid> | ||
|
|
||
| <EthRpc method="ext.getBlocks" params={[Math.max(block.number - config.blockHistoryLength + 1, 0), block.number]}> | ||
| {blocks => { | ||
| if (gasPrice.toNumber() === 0) { | ||
| return null; | ||
| } | ||
| return [ | ||
| <Grid item xs={12} sm={6} lg={3}> | ||
| <HashChart height={config.chartHeight} title={`Hash Rate Last ${blocks.length} blocks`} data={blocks.map(blockMapHashRate)} />, | ||
| </Grid>, | ||
| <Grid item xs={12} sm={6} lg={3}> | ||
| <VictoryChart height={config.chartHeight} width={config.chartWidth}> | ||
| <VictoryLabel x={25} y={24} text={`Transaction count last ${blocks.length} blocks`}/> | ||
| <VictoryBar data={blocks.map(blockMapTransactionCount)} /> | ||
| </VictoryChart> | ||
| </Grid>, | ||
| <Grid item xs={12} sm={6} lg={3}> | ||
| <VictoryChart height={config.chartHeight} width={config.chartWidth}> | ||
| <VictoryLabel x={25} y={24} text={`Gas Used Last ${blocks.length} blocks`}/> | ||
| <VictoryBar data={blocks.map(blockMapGasUsed)} /> | ||
| </VictoryChart> | ||
| </Grid>, | ||
| <Grid item xs={12} sm={6} lg={3}> | ||
| <VictoryChart height={config.chartHeight} width={config.chartWidth}> | ||
| <VictoryLabel x={25} y={24} text={`Uncles Last ${blocks.length} blocks`}/> | ||
| <VictoryBar data={blocks.map(blockMapUncles)} /> | ||
| </VictoryChart> | ||
| </Grid>, | ||
| ] | ||
| }} | ||
| </EthRpc> | ||
| <Grid item> | ||
| <Typography variant="headline"> | ||
| Last 10 blocks | ||
| </Typography> | ||
| <Button href={"#/blocks"}>View All</Button> | ||
| <BlockList from={Math.max(block.number - 11, 0)} to={block.number} /> | ||
| </Grid> | ||
| </Grid> | ||
| </div> | ||
| )} | ||
| </EthRpc> | ||
| )} | ||
| </EthRpc> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,13 @@ | ||
| import * as React from 'react'; | ||
| import BlockList from './BlockList'; | ||
| import { EthRpc } from 'emerald-js-ui'; | ||
| import Button from '@material-ui/core/Button'; | ||
|
|
||
| export default function NodeView(props: any) { | ||
| return ( | ||
| return [ | ||
| <EthRpc method="eth.getBlockNumber"> | ||
| {blockNumber => (<BlockList from={Math.max(blockNumber - 15, 0)} to={blockNumber} />)} | ||
| </EthRpc> | ||
| ); | ||
| </EthRpc>, | ||
| <Button>Load More</Button> | ||
| ]; | ||
| } |