mirror of
https://github.com/ethereum/go-ethereum.git
synced 2026-08-19 02:12:23 +00:00
UI block explorer changes started
This commit is contained in:
Chris Fenos
parent
05ebc5899b
commit
6791890c21
8 changed files with 196 additions and 103 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
<span className={classes.Greeting}>THIS IS A WIP</span>
|
||||
<div>
|
||||
<div className={classes.Transactions}>
|
||||
<Link to="/transactions"><button className="btn btn-primary">Transactions</button></Link>
|
||||
</div>
|
||||
<div className={classes.Blocks}>
|
||||
<Link to="/blocks"><button className={combinedClasses.join(" ")}>Blocks</button></Link>
|
||||
</div>
|
||||
<div className={classes.Accounts}>
|
||||
<Link to="/accounts"><button className={conjoinecdClasses.join(" ")}>Accounts</button></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
// <div className={classes.Home}>
|
||||
// <span className={classes.Greeting}>THIS IS A WIP</span>
|
||||
// <div>
|
||||
// <div className={classes.Transactions}>
|
||||
// <Link to="/transactions"><button className="btn btn-primary">Transactions</button></Link>
|
||||
// </div>
|
||||
// <div className={classes.Blocks}>
|
||||
// <Link to="/blocks"><button className={combinedClasses.join(" ")}>Blocks</button></Link>
|
||||
// </div>
|
||||
// <div className={classes.Accounts}>
|
||||
// <Link to="/accounts"><button className={conjoinecdClasses.join(" ")}>Accounts</button></Link>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,51 @@
|
|||
.Secondary {
|
||||
display: block;
|
||||
width:100%;
|
||||
height: 100px;
|
||||
background-color: rgb(244, 244, 244);
|
||||
.navHeader {
|
||||
height: 25vh;
|
||||
background-color: #4f2e7e;
|
||||
padding-top: 30pt;
|
||||
padding-left: 2.5%;
|
||||
z-index: -10000;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Transactions {
|
||||
font-size: 20px;
|
||||
padding-top: 25px;
|
||||
padding-left: 15px;
|
||||
float: left;
|
||||
.headerText {
|
||||
color: white;
|
||||
letter-spacing: 1.7px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 15px;
|
||||
text-transform: uppercase;
|
||||
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: #fff !important;
|
||||
.buttonContainer {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
padding-top: 20pt;
|
||||
}
|
||||
|
||||
.TopBar {
|
||||
font-size: 1.5rem;
|
||||
.btn {
|
||||
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;
|
||||
} */
|
||||
|
|
|
|||
|
|
@ -1,24 +1,63 @@
|
|||
import React from "react";
|
||||
import classes from './nav.css';
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
const navBar = props => {
|
||||
let combinedClasses = ["navbar-brand", classes.TopBar];
|
||||
class navBar extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selected: ""
|
||||
};
|
||||
}
|
||||
|
||||
// updateSelected = (page) => {
|
||||
// this.setState({ selected });
|
||||
// }
|
||||
|
||||
render() {
|
||||
return (
|
||||
<nav className="navbar navbar-light justify-content-between">
|
||||
<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> */}
|
||||
</nav>
|
||||
);
|
||||
</form>
|
||||
</nav>*/
|
||||
)
|
||||
};
|
||||
};
|
||||
|
||||
export default navBar;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className={classes.tableContainer} >
|
||||
<table className={combinedClasses.join(' ')}>
|
||||
<thead className={classes.tHead}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Height</th>
|
||||
<th scope="col">Block Hash</th>
|
||||
<th scope="col">Age</th>
|
||||
<th scope="col">Txn</th>
|
||||
<th scope="col">Uncles</th>
|
||||
<th scope="col">Coinbase</th>
|
||||
<th scope="col">GasUsed</th>
|
||||
<th scope="col">GasLimit</th>
|
||||
<th scope="col">Avg.GasPrice</th>
|
||||
<th scope="col">Reward</th>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Height</th>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Block Hash</th>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Age</th>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Txn</th>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Uncles</th>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Coinbase</th>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>GasUsed</th>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>GasLimit</th>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Avg.GasPrice</th>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Reward</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{table}
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>{props.AgeGet}</td>
|
||||
<td>{props.TxCount}</td>
|
||||
<td>{props.UncleCount}</td>
|
||||
<td className={classes.addressTag}><Link to="/mined/blocks" onClick={() => props.getBlocksMined(props.Coinbase)}>{props.Coinbase}</Link></td>
|
||||
<td>{props.GasUsed}</td>
|
||||
<td>{props.GasLimit}</td>
|
||||
<td>TBD</td>
|
||||
<td>{props.Reward}</td>
|
||||
<td style={{paddingLeft: '30pt' }} className={classes.addressTag}>{props.Hash}</td>
|
||||
<td style={{paddingLeft: '30pt' }}>{props.AgeGet}</td>
|
||||
<td style={{paddingLeft: '30pt' }}>{props.TxCount}</td>
|
||||
<td style={{paddingLeft: '30pt' }}>{props.UncleCount}</td>
|
||||
<td style={{paddingLeft: '30pt' }} className={classes.addressTag}><Link to="/mined/blocks" onClick={() => props.getBlocksMined(props.Coinbase)}>{props.Coinbase}</Link></td>
|
||||
<td style={{paddingLeft: '30pt' }}>{props.GasUsed}</td>
|
||||
<td style={{paddingLeft: '30pt' }}>{props.GasLimit}</td>
|
||||
<td style={{paddingLeft: '30pt' }}>TBD</td>
|
||||
<td style={{paddingLeft: '30pt' }}>{props.Reward}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,21 +1,34 @@
|
|||
.table {
|
||||
border-spacing: 100rem;
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
margin-top: -4%;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.tHead {
|
||||
font-size: 1rem;
|
||||
thead {
|
||||
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: .5rem;
|
||||
font-size: 6pt;
|
||||
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{
|
||||
|
|
|
|||
|
|
@ -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,7 +97,8 @@ class App extends Component {
|
|||
render() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<div className="container">
|
||||
|
||||
<div style={{backgroundColor:"#f7f8f9", paddingBottom:"5%" }}>
|
||||
<Nav />
|
||||
|
||||
<Route path="/" exact render={({ match }) =>
|
||||
|
|
@ -112,11 +117,13 @@ class App extends Component {
|
|||
|
||||
<Route path="/blocks" exact render={({match}) =>
|
||||
<div>
|
||||
<BlockHeader/>
|
||||
{/* <BlockHeader/> */}
|
||||
|
||||
<BlocksRow
|
||||
getBlocksMined={this.getBlocksMined}
|
||||
getBlockTransactions={this.getBlockTransactions}
|
||||
detailBlockHandler={this.detailBlockHandler}/>
|
||||
|
||||
</div>}
|
||||
/>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue