mirror of
https://github.com/ethereum/go-ethereum.git
synced 2026-08-19 10:22:23 +00:00
Block explorer Accounts page
This commit is contained in:
parent
f2e8c4ec08
commit
1fc10ba082
8 changed files with 64 additions and 71 deletions
|
|
@ -45,13 +45,13 @@ class AccountTable extends Component {
|
||||||
let combinedClasses = ['responsive-table', classes.table];
|
let combinedClasses = ['responsive-table', classes.table];
|
||||||
return (
|
return (
|
||||||
<table className={combinedClasses.join(' ')}>
|
<table className={combinedClasses.join(' ')}>
|
||||||
<thead className={classes.tHead}>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">Rank</th>
|
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Rank</th>
|
||||||
<th scope="col">Address</th>
|
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Address</th>
|
||||||
<th scope="col">Balance</th>
|
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Balance</th>
|
||||||
<th scope="col">Percentage</th>
|
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Percentage</th>
|
||||||
<th scope="col">TxCount</th>
|
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>TxCount</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
{table}
|
{table}
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,24 @@
|
||||||
.table {
|
.table {
|
||||||
border-spacing: 100rem;
|
border-spacing: 100rem;
|
||||||
width: 100%;
|
width: 95%;
|
||||||
margin-top: 50px;
|
margin: 0 auto;
|
||||||
}
|
background-color: white;
|
||||||
|
top: 107pt;
|
||||||
.tHead {
|
left: 2.5%;
|
||||||
font-size: 1rem;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
background-color: aliceblue;
|
background-color: white;
|
||||||
padding-right: 10px;
|
padding: 15pt 30pt ;
|
||||||
|
color: #593c83;
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
padding-left: 5px;
|
font-size: 6pt;
|
||||||
font-size: .5rem;
|
background-color: white;
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.addressTag {
|
.addressTag {
|
||||||
|
|
|
||||||
|
|
@ -5,14 +5,14 @@ import { Link } from 'react-router-dom'
|
||||||
const AccountsTable = (props) => {
|
const AccountsTable = (props) => {
|
||||||
return (
|
return (
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr style={{ borderTop: '1px solid #e0defb' }}>
|
||||||
<td>{props.Rank}</td>
|
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.Rank}</td>
|
||||||
<td className={classes.addressTag}><Link to="/account/detail" onClick={() => props.detailAccountHandler(props.Addr)}>
|
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.addressTag}><Link style={{ color: '#8f67c9' }} to="/account/detail" onClick={() => props.detailAccountHandler(props.Addr)}>
|
||||||
{props.Addr}
|
{props.Addr}
|
||||||
</Link></td>
|
</Link></td>
|
||||||
<td>{props.Balance}</td>
|
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.Balance}</td>
|
||||||
<td>{props.Percentage}%</td>
|
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.Percentage}%</td>
|
||||||
<td>{props.AccountNonce}</td>
|
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.AccountNonce}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -8,13 +8,6 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
|
||||||
font-size: 7pt;
|
|
||||||
background-color: white;
|
|
||||||
font-family: 'Open Sans', sans-serif;
|
|
||||||
color: #593c83;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
th {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
padding: 15pt 30pt ;
|
padding: 15pt 30pt ;
|
||||||
|
|
|
||||||
|
|
@ -8,12 +8,12 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tHead {
|
/* .tHead {
|
||||||
font-size: 7pt;
|
font-size: 7pt;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
font-family: 'Open Sans', sans-serif;
|
font-family: 'Open Sans', sans-serif;
|
||||||
color: #593c83;
|
color: #593c83;
|
||||||
}
|
} */
|
||||||
|
|
||||||
th {
|
th {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,6 @@ import Home from '../components/home/home';
|
||||||
|
|
||||||
///**TRANSACTIONS**///
|
///**TRANSACTIONS**///
|
||||||
import TransactionRow from '../components/table/transactions/transactionRow';
|
import TransactionRow from '../components/table/transactions/transactionRow';
|
||||||
import TransactionHeader from "../components/nav/transactionHeader/transactionHeader";
|
|
||||||
import TransactionDetailHeader from "../components/nav/transactionHeader/transactionDetailHeader";
|
import TransactionDetailHeader from "../components/nav/transactionHeader/transactionDetailHeader";
|
||||||
import DetailTransactionTable from "../components/table/transactions/transactionDetailsRow";
|
import DetailTransactionTable from "../components/table/transactions/transactionDetailsRow";
|
||||||
import BlockTxs from "../components/table/transactions/blockTx";
|
import BlockTxs from "../components/table/transactions/blockTx";
|
||||||
|
|
@ -20,13 +19,12 @@ import BlockTxs from "../components/table/transactions/blockTx";
|
||||||
import BlocksRow from '../components/table/blocks/blockRows';
|
import BlocksRow from '../components/table/blocks/blockRows';
|
||||||
import DetailBlockTable from '../components/table/blocks/blocksDetailsRow';
|
import DetailBlockTable from '../components/table/blocks/blocksDetailsRow';
|
||||||
import BlockDetailHeader from "../components/nav/blockHeaders/blockDetailHeader";
|
import BlockDetailHeader from "../components/nav/blockHeaders/blockDetailHeader";
|
||||||
import BlockHeader from "../components/nav/blockHeaders/blockHeader";
|
|
||||||
import BlocksMinedTable from "../components/table/blocks/blocksMined";
|
import BlocksMinedTable from "../components/table/blocks/blocksMined";
|
||||||
import BlockCoinbaseHeader from "../components/nav/blockHeaders/blockCoinbaseHeader";
|
import BlockCoinbaseHeader from "../components/nav/blockHeaders/blockCoinbaseHeader";
|
||||||
|
|
||||||
///**ACCOUNTS**///
|
///**ACCOUNTS**///
|
||||||
import AccountsRow from '../components/table/accounts/accountRows';
|
import AccountsRow from '../components/table/accounts/accountRows';
|
||||||
import DetailAccountsTable from "../components/table/accounts/detailAccountsRow";
|
import DetailAccountsTable from "../components/table/accounts/detailAccountsRow";
|
||||||
import AccountHeader from "../components/nav/accountHeaders/accountHeader";
|
|
||||||
import AccountDetailHeader from "../components/nav/accountHeaders/accountDetailHeader";
|
import AccountDetailHeader from "../components/nav/accountHeaders/accountDetailHeader";
|
||||||
|
|
||||||
import classes from './App.css';
|
import classes from './App.css';
|
||||||
|
|
@ -101,36 +99,35 @@ class App extends Component {
|
||||||
<Nav />
|
<Nav />
|
||||||
|
|
||||||
<Route path="/" exact render={({ match }) =>
|
<Route path="/" exact render={({ match }) =>
|
||||||
<Home/>}
|
<Home/>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Route path="/transactions" render={({match}) =>
|
<Route path="/transactions" render={({match}) =>
|
||||||
<div>
|
<div>
|
||||||
{/* <TransactionHeader /> */}
|
|
||||||
<TransactionRow
|
<TransactionRow
|
||||||
getBlockTransactions={this.getBlockTransactions}
|
getBlockTransactions={this.getBlockTransactions}
|
||||||
detailTransactionHandler={this.detailTransactionHandler}
|
detailTransactionHandler={this.detailTransactionHandler}
|
||||||
detailAccountHandler={this.detailAccountHandler}/>
|
detailAccountHandler={this.detailAccountHandler}/>
|
||||||
</div>}
|
</div>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Route path="/blocks" exact render={({match}) =>
|
<Route path="/blocks" exact render={({match}) =>
|
||||||
<div>
|
<div>
|
||||||
{/* <BlockHeader/> */}
|
|
||||||
|
|
||||||
<BlocksRow
|
<BlocksRow
|
||||||
getBlocksMined={this.getBlocksMined}
|
getBlocksMined={this.getBlocksMined}
|
||||||
getBlockTransactions={this.getBlockTransactions}
|
getBlockTransactions={this.getBlockTransactions}
|
||||||
detailBlockHandler={this.detailBlockHandler}/>
|
detailBlockHandler={this.detailBlockHandler}/>
|
||||||
|
</div>
|
||||||
</div>}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Route path="/accounts" exact render={({match}) =>
|
<Route path="/accounts" exact render={({match}) =>
|
||||||
<div>
|
<div>
|
||||||
<AccountHeader/>
|
|
||||||
<AccountsRow detailAccountHandler={this.detailAccountHandler}/>
|
<AccountsRow detailAccountHandler={this.detailAccountHandler}/>
|
||||||
</div>}
|
</div>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Route path="/transaction/details" exact render={({match}) =>
|
<Route path="/transaction/details" exact render={({match}) =>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue