clickable overlay added for blocks

2026-08-19 10:22:23 +00:00 · 2018-08-20 16:44:51 -04:00 · 2018-08-20 16:44:51 -04:00 · ff2c27f125
commit ff2c27f125
parent c0ac8c9113
6 changed files with 418 additions and 87 deletions
--- a/shyftBlockExplorerUI/package-lock.json
+++ b/shyftBlockExplorerUI/package-lock.json
@ -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",
--- a/shyftBlockExplorerUI/package.json
+++ b/shyftBlockExplorerUI/package.json
@ -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",
--- a/shyftBlockExplorerUI/public/index.html
+++ b/shyftBlockExplorerUI/public/index.html
@ -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>
--- a/shyftBlockExplorerUI/src/components/table/blocks/blockTable.js
+++ b/shyftBlockExplorerUI/src/components/table/blocks/blockTable.js
@ -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>
--- a/shyftBlockExplorerUI/src/components/table/blocks/blocksDetailsRow.js
+++ b/shyftBlockExplorerUI/src/components/table/blocks/blocksDetailsRow.js
@ -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>
--- a/shyftBlockExplorerUI/src/containers/App.js
+++ b/shyftBlockExplorerUI/src/containers/App.js
@ -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 />
-    
-                <Route path="/" exact render={({ match }) =>
-                    <Home/> 
-                    }
-                />
+            <div>

-                <Route path="/transactions" render={({match}) =>
-                    <div>                  
-                        <TransactionRow
+                
+                {
+                    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>
+                        <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>                        
-                        <BlocksRow
-                            getBlocksMined={this.getBlocksMined}
+                    </div>}
+                    />
+
+                    <Route path="/mined/blocks" exact render={({match}) =>
+                    <div>
+                        <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}) =>
-                    <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>}
-                />
+                    <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>}
+                    />
+            </div>
        </div>
    </BrowserRouter>
    );