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