Block explorer Accounts page

This commit is contained in:
Chris Fenos 2018-08-18 19:02:49 -04:00
parent f2e8c4ec08
commit 1fc10ba082
8 changed files with 64 additions and 71 deletions

View file

@ -45,13 +45,13 @@ class AccountTable extends Component {
let combinedClasses = ['responsive-table', classes.table];
return (
<table className={combinedClasses.join(' ')}>
<thead className={classes.tHead}>
<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>
<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}

View file

@ -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 {

View file

@ -5,14 +5,14 @@ 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)}>
<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>
)

View file

@ -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 ;

View file

@ -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;

View file

@ -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>
}
/>
<Route path="/blocks" exact render={({match}) =>
<div>
{/* <BlockHeader/> */}
<BlocksRow
getBlocksMined={this.getBlocksMined}
getBlockTransactions={this.getBlockTransactions}
detailBlockHandler={this.detailBlockHandler}/>
</div>}
</div>
}
/>
<Route path="/accounts" exact render={({match}) =>
<div>
<AccountHeader/>
<AccountsRow detailAccountHandler={this.detailAccountHandler}/>
</div>}
</div>
}
/>
<Route path="/transaction/details" exact render={({match}) =>