UI block explorer changes started

shyftBlockExplorerUI/public/index.html

@@ -9,6 +9,7 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

shyftBlockExplorerUI/src/components/home/home.js

@@ -6,21 +6,23 @@ const home = props => {
 
     const combinedClasses = ["btn", "btn-primary", classes.BlockButton]
     const conjoinecdClasses = ["btn", "btn-primary", classes.AccountButton]
+
     return (
-       <div className={classes.Home}>
+        <div></div>
-            <span className={classes.Greeting}>THIS IS A WIP</span>
+    //    <div className={classes.Home}>
-           <div>
+    //         <span className={classes.Greeting}>THIS IS A WIP</span>
-           <div className={classes.Transactions}>
+    //        <div>
-               <Link to="/transactions"><button className="btn btn-primary">Transactions</button></Link>
+    //        <div className={classes.Transactions}>
-           </div>
+    //            <Link to="/transactions"><button className="btn btn-primary">Transactions</button></Link>
-           <div className={classes.Blocks}>
+    //        </div>
-               <Link to="/blocks"><button className={combinedClasses.join(" ")}>Blocks</button></Link>
+    //        <div className={classes.Blocks}>
-           </div>
+    //            <Link to="/blocks"><button className={combinedClasses.join(" ")}>Blocks</button></Link>
-           <div className={classes.Accounts}>
+    //        </div>
-               <Link to="/accounts"><button className={conjoinecdClasses.join(" ")}>Accounts</button></Link>
+    //        <div className={classes.Accounts}>
-           </div>
+    //            <Link to="/accounts"><button className={conjoinecdClasses.join(" ")}>Accounts</button></Link>
-           </div>
+    //        </div>
-       </div>
+    //        </div>
+    //    </div>
     );
 };
 

shyftBlockExplorerUI/src/components/nav/nav.css

@@ -1,21 +1,51 @@
-.Secondary {
+.navHeader {
-    display: block;
+    height: 25vh;
-    width:100%;
+    background-color: #4f2e7e;
-    height: 100px;
+    padding-top: 30pt;
-    background-color: rgb(244, 244, 244);
+    padding-left: 2.5%;
+    z-index: -10000;
+    width: 100%;
 }
 
-.Transactions {
+.headerText { 
-    font-size: 20px;
+    color: white;
-    padding-top: 25px;
+    letter-spacing: 1.7px;
-    padding-left: 15px;
+    font-family: 'Open Sans', sans-serif;
-    float: left;
+    font-size: 15px;
+    text-transform: uppercase;
+
 }
 
-.bg-light {
+.buttonContainer {
-    background-color: #fff !important;
+    flex: 1;
+    flex-direction: row;
+    padding-top: 20pt;   
 }
 
-.TopBar {
+.btn { 
-    font-size: 1.5rem;
+    color: white;
+    background-color: transparent;
+    font-size: 8px;
+    letter-spacing: 1.6px;
+    font-family: 'Open Sans', sans-serif;
+    width: 120px;
+    height: 32px;
+    margin-right: 1%;
+    font-weight: 300;
 }
+
+.btn:hover { 
+    color: #4f2e7e;
+    background-color: #ffffff;
+    font-size: 8px;
+   
+
+}
+/* 
+button:active{
+    background-color: white;
+}
+
+button:focus {
+    background-color: white;
+} */

shyftBlockExplorerUI/src/components/nav/nav.js

@@ -1,24 +1,63 @@
 import React from "react";
 import classes from './nav.css';
+import { Link } from 'react-router-dom'
 
-const navBar = props => {
+class navBar extends React.Component  {
-    let combinedClasses = ["navbar-brand", classes.TopBar];
+
-  return (
+  constructor(props) {
-    <nav className="navbar navbar-light justify-content-between">
+    super(props);
+    this.state = {
+      selected: ""
+    };
+  }
+
+  // updateSelected = (page) => {
+  //   this.setState({ selected });
+  // }
+
+  render() {
+    return (
+      <div>
+        <div className={classes.navHeader}>
+          <h5 className={classes.headerText}> Block Explorer </h5>
+          <div className={classes.buttonContainer}>
+
+            <Link to="/blocks">  
+              <button className={classes.btn} > BLOCKS </button> 
+            </Link>   
+
+            <Link to="/transactions">  
+              <button className={classes.btn} > TRANSACTIONS </button>
+            </Link>   
+
+            <button className={classes.btn}> INTERNAL TX </button>
+      
+            <Link to="/accounts">  
+              <button className={classes.btn}> ACCOUNTS </button>
+            </Link>   
+
+
+          </div>
+        </div>
+      </div>
+
+     /* <nav className="navbar navbar-light justify-content-between">
       <a className={combinedClasses.join(" ")}>Block Explorer Test UI</a>
-      {/* <form className="form-inline">
+     <form className="form-inline">
         <input
           className="form-control mr-sm-2"
           type="search"
-          placeholder="Search"
+          placeholder="Search"ls
+
           aria-label="Search"
         />
         <button className="btn btn-outline-success my-2 my-sm-0" type="submit">
           Search
         </button>
-      </form> */}
+      </form> 
-    </nav>
+    </nav>*/
-  );
+    )
+  };
 };
 
 export default navBar;

shyftBlockExplorerUI/src/components/table/blocks/blockRows.js

@@ -21,7 +21,6 @@ class BlocksTable extends Component {
         }
     }
 
-
     render() {
         const table = this.state.data.map((data, i) => {
             const conversion = data.Rewards / 10000000000000000000;
@@ -43,23 +42,25 @@ class BlocksTable extends Component {
 
         let combinedClasses = ['responsive-table', classes.table];
         return (
-            <table className={combinedClasses.join(' ')}>
+            <div className={classes.tableContainer} >
-                <thead className={classes.tHead}>
+                <table className={combinedClasses.join(' ')}>
-                <tr>
+                    <thead>
-                    <th scope="col">Height</th>
+                    <tr>
-                    <th scope="col">Block Hash</th>
+                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Height</th>
-                    <th scope="col">Age</th>
+                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Block Hash</th>
-                    <th scope="col">Txn</th>
+                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Age</th>
-                    <th scope="col">Uncles</th>
+                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Txn</th>
-                    <th scope="col">Coinbase</th>
+                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Uncles</th>
-                    <th scope="col">GasUsed</th>
+                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Coinbase</th>
-                    <th scope="col">GasLimit</th>
+                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>GasUsed</th>
-                    <th scope="col">Avg.GasPrice</th>
+                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>GasLimit</th>
-                    <th scope="col">Reward</th>
+                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Avg.GasPrice</th>
-                </tr>
+                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Reward</th>
-                </thead>
+                    </tr>
-                        {table}
+                    </thead>
-            </table>
+                    {table}
+                </table>
+            </div>
         );
     }
 }

shyftBlockExplorerUI/src/components/table/blocks/blockTable.js

@@ -6,18 +6,18 @@ const BlockTable = (props) => {
     return (
           <tbody>
             <tr>
-                <td><Link to="/blocks/detail" onClick={() => props.detailBlockHandler(props.Number)}>
+                <td style={{paddingLeft: '30pt' }} ><Link to="/blocks/detail" onClick={() => props.detailBlockHandler(props.Number)}>
                     {props.Number}
                 </Link></td>
-                <td className={classes.addressTag}>{props.Hash}</td>
+                <td style={{paddingLeft: '30pt' }} className={classes.addressTag}>{props.Hash}</td>
-                <td>{props.AgeGet}</td>
+                <td style={{paddingLeft: '30pt' }}>{props.AgeGet}</td>
-                <td>{props.TxCount}</td>
+                <td style={{paddingLeft: '30pt' }}>{props.TxCount}</td>
-                <td>{props.UncleCount}</td>
+                <td style={{paddingLeft: '30pt' }}>{props.UncleCount}</td>
-                <td className={classes.addressTag}><Link to="/mined/blocks" onClick={() => props.getBlocksMined(props.Coinbase)}>{props.Coinbase}</Link></td>
+                <td style={{paddingLeft: '30pt' }} className={classes.addressTag}><Link to="/mined/blocks" onClick={() => props.getBlocksMined(props.Coinbase)}>{props.Coinbase}</Link></td>
-                <td>{props.GasUsed}</td>
+                <td style={{paddingLeft: '30pt' }}>{props.GasUsed}</td>
-                <td>{props.GasLimit}</td>
+                <td style={{paddingLeft: '30pt' }}>{props.GasLimit}</td>
-                <td>TBD</td>
+                <td style={{paddingLeft: '30pt' }}>TBD</td>
-                <td>{props.Reward}</td>
+                <td style={{paddingLeft: '30pt' }}>{props.Reward}</td>
             </tr>
             </tbody>
     )

shyftBlockExplorerUI/src/components/table/blocks/table.css

@@ -1,21 +1,34 @@
 .table {
     border-spacing: 100rem;
-    width: 100%;
+    width: 95%;
-    margin-top: 50px;
+    margin: 0 auto;  
+    margin-top: -4%;
+    background-color: white;
 }
 
-.tHead {
+thead {
-    font-size: 1rem;
+    font-size: 7pt;
+    background-color: white;
+    font-family: 'Open Sans', sans-serif;
+    color: #593c83;
+    
 }
 
 th {
-    background-color: aliceblue;
+    background-color: white;
     padding-right: 10px;
+    padding: 25pt 30pt ;
+    color: #593c83;
+    font-family: 'Open Sans', sans-serif;
 }
 
 td {
-    padding-left: 5px;
+    font-size: 6pt;
-    font-size: .5rem;
+    background-color: white;
+    font-family: 'Open Sans', sans-serif;
+
+    /* padding: 25px;
+    margin-left: 25px; */
 }
 
 .addressTag {
@@ -23,7 +36,7 @@ td {
     vertical-align: bottom;
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 132px;
+    width: 100px;
 }
 
 .ageTag{

shyftBlockExplorerUI/src/containers/App.js

@@ -3,6 +3,9 @@ import axios from 'axios';
 import Nav from "../components/nav/nav";
 import { BrowserRouter, Route } from 'react-router-dom'
 
+import { Link } from 'react-router-dom'
+
+
 ///**LANDING PAGE**///
 import Home from '../components/home/home';
 
@@ -26,6 +29,7 @@ import DetailAccountsTable from "../components/table/accounts/detailAccountsRow"
 import AccountHeader from "../components/nav/accountHeaders/accountHeader";
 import AccountDetailHeader from "../components/nav/accountHeaders/accountDetailHeader";
 
+import classes from './App.css';
 
 class App extends Component {
   constructor(props) {
@@ -93,14 +97,15 @@ class App extends Component {
   render() {
     return (
         <BrowserRouter>
-      <div className="container">
-        <Nav />
     
-          <Route path="/" exact render={({ match }) =>
+            <div style={{backgroundColor:"#f7f8f9", paddingBottom:"5%" }}>
-              <Home/>}
+                <Nav />
-          />
              
-          <Route path="/transactions" render={({match}) =>
+            <Route path="/" exact render={({ match }) =>
+                <Home/>}
+            />
+
+            <Route path="/transactions" render={({match}) =>
               <div>
                   <TransactionHeader />
                   <TransactionRow
@@ -108,35 +113,37 @@ class App extends Component {
                       detailTransactionHandler={this.detailTransactionHandler}
                       detailAccountHandler={this.detailAccountHandler}/>
               </div>}
-          />
+            />
 
-          <Route path="/blocks" exact render={({match}) =>
+            <Route path="/blocks" exact render={({match}) =>
               <div>
-                  <BlockHeader/>
+                  {/* <BlockHeader/> */}
-                  <BlocksRow
-                      getBlocksMined={this.getBlocksMined}
-                      getBlockTransactions={this.getBlockTransactions}
-                      detailBlockHandler={this.detailBlockHandler}/>
-              </div>}
-          />
                  
-          <Route path="/accounts" exact render={({match}) =>
+                <BlocksRow
+                    getBlocksMined={this.getBlocksMined}
+                    getBlockTransactions={this.getBlockTransactions}
+                    detailBlockHandler={this.detailBlockHandler}/>
+                
+              </div>}
+            />
+
+            <Route path="/accounts" exact render={({match}) =>
               <div>
                   <AccountHeader/>
                   <AccountsRow detailAccountHandler={this.detailAccountHandler}/>
               </div>}
-          />
+            />
 
-          <Route path="/transaction/details" exact render={({match}) =>
+            <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}) =>
+            <Route path="/blocks/detail" exact render={({match}) =>
               <div>
                   <BlockDetailHeader
                       blockNumber={this.state.blockDetailData.Number}/>
@@ -144,9 +151,9 @@ class App extends Component {
                       getBlockTransactions={this.getBlockTransactions}
                       data={this.state.blockDetailData}/>
               </div>}
-          />
+            />
 
-          <Route path="/block/transactions" exact render={({match}) =>
+            <Route path="/block/transactions" exact render={({match}) =>
               <div>
                   <BlockDetailHeader
                       blockNumber={this.state.reqBlockNum}/>
@@ -157,9 +164,9 @@ class App extends Component {
                       detailAccountHandler={this.detailAccountHandler}/>
 
               </div>}
-          />
+            />
 
-          <Route path="/mined/blocks" exact render={({match}) =>
+            <Route path="/mined/blocks" exact render={({match}) =>
               <div>
                   <BlockCoinbaseHeader
                       coinbase={this.state.reqCoinbase}/>
@@ -168,9 +175,9 @@ class App extends Component {
                       getBlocksMined={this.getBlocksMined}
                       data={this.state.blocksMined}/>
               </div>}
-          />
+            />
 
-          <Route path="/account/detail" exact render={({match}) =>
+            <Route path="/account/detail" exact render={({match}) =>
               <div>
                   <AccountDetailHeader
                       addr={this.state.reqAccount}
@@ -180,9 +187,9 @@ class App extends Component {
                       addr={this.state.reqAccount}
                       data={this.state.accountDetailData}/>
               </div>}
-          />
+            />
-      </div>
+        </div>
-        </BrowserRouter>
+    </BrowserRouter>
     );
   }
 }