forks/go-ethereum
1
0
Fork 1
mirror of https://github.com/ethereum/go-ethereum.git synced 2026-08-19 10:22:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

clickable overlay added for blocks

Browse source
This commit is contained in:
Chris Fenos 2018-08-20 16:44:51 -04:00
parent c0ac8c9113
commit ff2c27f125
6 changed files with 418 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

220
shyftBlockExplorerUI/package-lock.json generated
View file

@ -4,6 +4,15 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@babel/runtime": {
"version": "7.0.0-beta.42",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.42.tgz",
"integrity": "sha512-iOGRzUoONLOtmCvjUsZv3mZzgCT6ljHQY5fr1qG1QIiJQwtM7zbPWGGpa3QWETq+UqwWyJnoi5XZDZRwZDFciQ==",
"requires": {
"core-js": "2.5.6",
"regenerator-runtime": "0.11.1"
}
},
"abab": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",
@ -1843,6 +1852,11 @@
}
}
},
"classnames": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
},
"clean-css": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.11.tgz",
@ -2706,6 +2720,11 @@
}
}
},
"dom-helpers": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.3.1.tgz",
"integrity": "sha512-2Sm+JaYn74OiTM2wHvxJOo3roiq/h25Yi69Fqk269cNUwIXsCvATB6CRSFC9Am/20G2b28hGv/+7NiWydIrPvg=="
},
"dom-serializer": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
@ -2857,6 +2876,53 @@
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz",
"integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA="
},
"enzyme-adapter-react-16": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.2.0.tgz",
"integrity": "sha512-UgBra+xZFVFbU5Tw7Inw0bPrNJhM2ru4vCoO7preX6sOicXuDbOH927QJx4pk6m6vatd8jnPXTF6/GCjzytJTg==",
"requires": {
"enzyme-adapter-utils": "1.5.0",
"function.prototype.name": "1.1.0",
"object.assign": "4.1.0",
"object.values": "1.0.4",
"prop-types": "15.6.2",
"react-is": "16.4.2",
"react-reconciler": "0.7.0",
"react-test-renderer": "16.4.2"
},
"dependencies": {
"prop-types": {
"version": "15.6.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
"integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
"requires": {
"loose-envify": "1.3.1",
"object-assign": "4.1.1"
}
}
}
},
"enzyme-adapter-utils": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.5.0.tgz",
"integrity": "sha512-cLUaPYU8GEzAHi/1hiO+ylz4QiQWI8eb9SysAk8Tbul2O918dRf4cfD4s2BjijtwSvhapkOsPW9XRix1EXlJ1Q==",
"requires": {
"function.prototype.name": "1.1.0",
"object.assign": "4.1.0",
"prop-types": "15.6.2"
},
"dependencies": {
"prop-types": {
"version": "15.6.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
"integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
"requires": {
"loose-envify": "1.3.1",
"object-assign": "4.1.1"
}
}
}
},
"errno": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@ -4368,6 +4434,16 @@
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
},
"function.prototype.name": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.0.tgz",
"integrity": "sha512-Bs0VRrTz4ghD8pTmbJQD1mZ8A/mN0ur/jGz+A6FBxPDUPkm1tNfF6bhTYPA7i7aF4lZJVr+OXTNNrnnIl58Wfg==",
"requires": {
"define-properties": "1.1.2",
"function-bind": "1.1.1",
"is-callable": "1.1.3"
}
},
"functional-red-black-tree": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
@ -4612,6 +4688,11 @@
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
},
"has-symbols": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz",
"integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q="
},
"has-value": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
@ -6321,6 +6402,11 @@
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz",
"integrity": "sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE="
},
"keycode": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
"integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
},
"killable": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.0.tgz",
@ -7048,6 +7134,17 @@
"isobject": "3.0.1"
}
},
"object.assign": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
"integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
"requires": {
"define-properties": "1.1.2",
"function-bind": "1.1.1",
"has-symbols": "1.0.0",
"object-keys": "1.0.11"
}
},
"object.omit": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz",
@ -7065,6 +7162,17 @@
"isobject": "3.0.1"
}
},
"object.values": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/object.values/-/object.values-1.0.4.tgz",
"integrity": "sha1-5STaCbT2b/Bd9FdUbscqyZ8TBpo=",
"requires": {
"define-properties": "1.1.2",
"es-abstract": "1.11.0",
"function-bind": "1.1.1",
"has": "1.0.1"
}
},
"obuf": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@ -8624,6 +8732,15 @@
"object-assign": "4.1.1"
}
},
"prop-types-extra": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz",
"integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==",
"requires": {
"react-is": "16.4.2",
"warning": "3.0.0"
}
},
"proxy-addr": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.3.tgz",
@ -8809,6 +8926,26 @@
"prop-types": "15.6.1"
}
},
"react-bootstrap": {
"version": "0.32.3",
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-0.32.3.tgz",
"integrity": "sha512-vik1usdUd13M2MgB3edC0ZA0KiWi9JL0mWDElSp7HhvFIuQFbIhEhd4kaZqmGupYY0k4brl4LyyxKHp4t1idgw==",
"requires": {
"@babel/runtime": "7.0.0-beta.42",
"classnames": "2.2.6",
"dom-helpers": "3.3.1",
"enzyme-adapter-react-16": "1.2.0",
"invariant": "2.2.4",
"keycode": "2.2.0",
"prop-types": "15.6.1",
"prop-types-extra": "1.1.0",
"react-overlays": "0.8.3",
"react-prop-types": "0.4.0",
"react-transition-group": "2.4.0",
"uncontrollable": "5.1.0",
"warning": "3.0.0"
}
},
"react-dev-utils": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-5.0.1.tgz",
@ -8850,6 +8987,48 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz",
"integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw=="
},
"react-is": {
"version": "16.4.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.2.tgz",
"integrity": "sha512-rI3cGFj/obHbBz156PvErrS5xc6f1eWyTwyV4mo0vF2lGgXgS+mm7EKD5buLJq6jNgIagQescGSVG2YzgXt8Yg=="
},
"react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-overlays": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.8.3.tgz",
"integrity": "sha512-h6GT3jgy90PgctleP39Yu3eK1v9vaJAW73GOA/UbN9dJ7aAN4BTZD6793eI1D5U+ukMk17qiqN/wl3diK1Z5LA==",
"requires": {
"classnames": "2.2.6",
"dom-helpers": "3.3.1",
"prop-types": "15.6.1",
"prop-types-extra": "1.1.0",
"react-transition-group": "2.4.0",
"warning": "3.0.0"
}
},
"react-prop-types": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/react-prop-types/-/react-prop-types-0.4.0.tgz",
"integrity": "sha1-+ZsL+0AGkpya8gUefBQUpcdbk9A=",
"requires": {
"warning": "3.0.0"
}
},
"react-reconciler": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.7.0.tgz",
"integrity": "sha512-50JwZ3yNyMS8fchN+jjWEJOH3Oze7UmhxeoJLn2j6f3NjpfCRbcmih83XTWmzqtar/ivd5f7tvQhvvhism2fgg==",
"requires": {
"fbjs": "0.8.16",
"loose-envify": "1.3.1",
"object-assign": "4.1.1",
"prop-types": "15.6.1"
}
},
"react-router": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.2.0.tgz",
@ -8877,6 +9056,39 @@
"warning": "3.0.0"
}
},
"react-test-renderer": {
"version": "16.4.2",
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.2.tgz",
"integrity": "sha512-vdTPnRMDbxfv4wL4lzN4EkVGXyYs7LE2uImOsqh1FKiP6L5o1oJl8nore5sFi9vxrP9PK3l4rgb/fZ4PVUaWSA==",
"requires": {
"fbjs": "0.8.16",
"object-assign": "4.1.1",
"prop-types": "15.6.1",
"react-is": "16.4.2"
}
},
"react-transition-group": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz",
"integrity": "sha512-Xv5d55NkJUxUzLCImGSanK8Cl/30sgpOEMGc5m86t8+kZwrPxPCPcFqyx83kkr+5Lz5gs6djuvE5By+gce+VjA==",
"requires": {
"dom-helpers": "3.3.1",
"loose-envify": "1.3.1",
"prop-types": "15.6.2",
"react-lifecycles-compat": "3.0.4"
},
"dependencies": {
"prop-types": {
"version": "15.6.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
"integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
"requires": {
"loose-envify": "1.3.1",
"object-assign": "4.1.1"
}
}
}
},
"read-pkg": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@ -10317,6 +10529,14 @@
}
}
},
"uncontrollable": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-5.1.0.tgz",
"integrity": "sha512-5FXYaFANKaafg4IVZXUNtGyzsnYEvqlr9wQ3WpZxFpEUxl29A3H6Q4G1Dnnorvq9TGOGATBApWR4YpLAh+F5hw==",
"requires": {
"invariant": "2.2.4"
}
},
"union-value": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",

1
shyftBlockExplorerUI/package.json
View file

@ -34,6 +34,7 @@
"promise": "8.0.1",
"raf": "3.4.0",
"react": "^16.3.1",
"react-bootstrap": "^0.32.3",
"react-dev-utils": "^5.0.1",
"react-dom": "^16.3.1",
"react-router-dom": "^4.2.2",

15
shyftBlockExplorerUI/public/index.html
View file

@ -23,6 +23,21 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Block Explorer</title>
<style>
.modal-content {
width: 700px;
margin: 0 auto;
position:relative;
top: 50%;
left: 50%;
margin-top: 5%;
margin-left: -400px;
border: 1px solid #ccc;
background-color: white;
}
</style>
</head>
<body>
<noscript>

4
shyftBlockExplorerUI/src/components/table/blocks/blockTable.js
View file

@ -4,9 +4,9 @@ import { Link } from 'react-router-dom'
const BlockTable = (props) => {
return (
<tbody>
<tbody>
<tr style={{ borderTop: '1px solid #e0defb' }}>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.height} ><Link to="/blocks/detail" style={{ color: '#8f67c9' }} onClick={() => props.detailBlockHandler(props.Number)}>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.height} ><Link to="/blocks" style={{ color: '#8f67c9' }} onClick={() => props.detailBlockHandler(props.Number)}>
{props.Number}
</Link></td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.hash}>{props.Hash}</td>

2
shyftBlockExplorerUI/src/components/table/blocks/blocksDetailsRow.js
View file

@ -11,7 +11,7 @@ class DetailBlockTable extends Component {
<table className={combinedClasses.join(' ')}>
<tbody>
<tr>
<th scope="col">Height:</th>
<th scope="col">Height 2:</th>
<td>{data.Number}</td>
</tr>
<tr>

255
shyftBlockExplorerUI/src/containers/App.js
View file

@ -5,6 +5,11 @@ import { BrowserRouter, Route } from 'react-router-dom'
import { Link } from 'react-router-dom'
import Modal from 'react-bootstrap/lib/Modal';
import Button from 'react-bootstrap/lib/Button';
import Grid from 'react-bootstrap/lib/Grid';
import Col from 'react-bootstrap/lib/Col';
import Row from 'react-bootstrap/lib/Row';
///**LANDING PAGE**///
import Home from '../components/home/home';
@ -29,6 +34,7 @@ import AccountDetailHeader from "../components/nav/accountHeaders/accountDetailH
import classes from './App.css';
class App extends Component {
constructor(props) {
super(props);
@ -38,14 +44,16 @@ class App extends Component {
accountDetailData: [],
blocksMined: [],
blockTransactions: [],
reqAccount: ''
reqAccount: '',
overlayTriggered: false,
overlayContent: "",
};
}
detailBlockHandler = async(blockNumber) => {
try {
const response = await axios.get(`http://localhost:8080/api/get_block/${blockNumber}`)
await this.setState({ blockDetailData: response.data })
await this.setState({ blockDetailData: response.data, overlayTriggered: true, overlayContent: "block" })
}
catch(error) {
console.log(error)
@ -92,98 +100,185 @@ class App extends Component {
}
};
hideOverlay = () => {
this.setState({overlayTriggered: false})
};
getBlockData = (data) => {
let components = [];
for (let key in data) {
let value =data[key]
console.log(key, value)
components.push(
<Grid>
<Row className="show-grid">
<Col xs={3} md={3} style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}>
{key}
</Col>
<Col xs={9} md={9} style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}>
{value}
</Col>
</Row>
</Grid>
// <li style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}>
// <font>{key}: </font>
// <font style={{marginLeft: '30pt'}} > {value} </font>
// </li>
// <div style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}} >
// <div>{key}: </div> <div style={{left: '2%'}}>{value} </div>
// </div>
);
}
return components;
}
renderOverlay = () => {
const page = this.state.overlayContent;
let data, title;
let keys = [];
let values = [];
switch (page) {
case "block" :
title = "BLOCK OVERVIEW";
data = this.state.blockDetailData;
break;
default: console.log("error");
}
return (
<div className="static-modal">
<Modal.Dialog>
<Modal.Header>
<Modal.Title style={{color: '#593c83', fontSize: '8pt', letterSpacing: '2pt', fontFamily: 'Open Sans, sans-serif' }}> {title} </Modal.Title>
</Modal.Header>
<Modal.Body>
<ul>
{this.getBlockData(data)}
</ul>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.hideOverlay}>Close</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
);
};
render() {
return (
<BrowserRouter>
<div style={{backgroundColor:"#f7f8f9", paddingBottom:"5%" }}>
<Nav />
<div>
<Route path="/" exact render={({ match }) =>
<Home/>
}
/>
<Route path="/transactions" render={({match}) =>
{
this.state.overlayTriggered ? this.renderOverlay() : null
}
<div style={ this.state.overlayTriggered ? {backgroundColor:"#f7f8f9", paddingBottom:"5%", opacity:0.5, zIndex: -10000} : {backgroundColor:"#f7f8f9", paddingBottom:"5%" } }>
<Nav />
<Route path="/" exact render={({ match }) =>
<Home/>
}
/>
<Route path="/transactions" render={({match}) =>
<div>
<TransactionRow
getBlockTransactions={this.getBlockTransactions}
detailTransactionHandler={this.detailTransactionHandler}
detailAccountHandler={this.detailAccountHandler}/>
</div>
}
/>
<Route path="/blocks" exact render={({match}) =>
<div>
<BlocksRow
getBlocksMined={this.getBlocksMined}
getBlockTransactions={this.getBlockTransactions}
detailBlockHandler={this.detailBlockHandler}/>
</div>
}
/>
<Route path="/accounts" exact render={({match}) =>
<div>
<AccountsRow detailAccountHandler={this.detailAccountHandler}/>
</div>
}
/>
<Route path="/transaction/details" exact render={({match}) =>
<div>
<TransactionRow
<TransactionDetailHeader
txHash={this.state.transactionDetailData.TxHash}/>
<DetailTransactionTable
data={this.state.transactionDetailData}/>
</div>}
/>
<Route path="/blocks/detail" exact render={({match}) =>
<div>
<BlockDetailHeader
blockNumber={this.state.blockDetailData.Number}/>
<DetailBlockTable
getBlockTransactions={this.getBlockTransactions}
data={this.state.blockDetailData}/>
</div>}
/>
<Route path="/block/transactions" exact render={({match}) =>
<div>
<BlockDetailHeader
blockNumber={this.state.reqBlockNum}/>
<BlockTxs
data={this.state.blockTransactions}
getBlockTransactions={this.getBlockTransactions}
detailTransactionHandler={this.detailTransactionHandler}
detailAccountHandler={this.detailAccountHandler}/>
</div>
}
/>
<Route path="/blocks" exact render={({match}) =>
</div>}
/>
<Route path="/mined/blocks" exact render={({match}) =>
<div>
<BlocksRow
getBlocksMined={this.getBlocksMined}
<BlockCoinbaseHeader
coinbase={this.state.reqCoinbase}/>
<BlocksMinedTable
getBlockTransactions={this.getBlockTransactions}
detailBlockHandler={this.detailBlockHandler}/>
</div>
}
/>
getBlocksMined={this.getBlocksMined}
data={this.state.blocksMined}/>
</div>}
/>
<Route path="/accounts" exact render={({match}) =>
<Route path="/account/detail" exact render={({match}) =>
<div>
<AccountsRow detailAccountHandler={this.detailAccountHandler}/>
</div>
}
/>
<Route path="/transaction/details" exact render={({match}) =>
<div>
<TransactionDetailHeader
txHash={this.state.transactionDetailData.TxHash}/>
<DetailTransactionTable
data={this.state.transactionDetailData}/>
</div>}
/>
<Route path="/blocks/detail" exact render={({match}) =>
<div>
<BlockDetailHeader
blockNumber={this.state.blockDetailData.Number}/>
<DetailBlockTable
getBlockTransactions={this.getBlockTransactions}
data={this.state.blockDetailData}/>
</div>}
/>
<Route path="/block/transactions" exact render={({match}) =>
<div>
<BlockDetailHeader
blockNumber={this.state.reqBlockNum}/>
<BlockTxs
data={this.state.blockTransactions}
getBlockTransactions={this.getBlockTransactions}
detailTransactionHandler={this.detailTransactionHandler}
detailAccountHandler={this.detailAccountHandler}/>
</div>}
/>
<Route path="/mined/blocks" exact render={({match}) =>
<div>
<BlockCoinbaseHeader
coinbase={this.state.reqCoinbase}/>
<BlocksMinedTable
getBlockTransactions={this.getBlockTransactions}
getBlocksMined={this.getBlocksMined}
data={this.state.blocksMined}/>
</div>}
/>
<Route path="/account/detail" exact render={({match}) =>
<div>
<AccountDetailHeader
addr={this.state.reqAccount}
data={this.state.accountDetailData}/>
<DetailAccountsTable
transactionDetailHandler={this.detailTransactionHandler}
addr={this.state.reqAccount}
data={this.state.accountDetailData}/>
</div>}
/>
<AccountDetailHeader
addr={this.state.reqAccount}
data={this.state.accountDetailData}/>
<DetailAccountsTable
transactionDetailHandler={this.detailTransactionHandler}
addr={this.state.reqAccount}
data={this.state.accountDetailData}/>
</div>}
/>
</div>
</div>
</BrowserRouter>
);