added addr table

This commit is contained in:
Dustin Brickwood 2018-08-21 14:42:50 -04:00
parent 8f19d6f4cd
commit 7eb16ceaf1
5 changed files with 50 additions and 34 deletions

View file

@ -3,14 +3,11 @@ import classes from './accounts.css';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
const AccountsTable = (props) => { const AccountsTable = (props) => {
console.log(props);
return ( return (
<tbody> <tbody>
<tr style={{ borderTop: '1px solid #e0defb' }}> <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' }} >{props.Rank}</td>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.addressTag}><Link style={{ color: '#8f67c9' }} to="/account" 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 style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.Balance}</td> <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.Balance}</td>

View file

@ -7,16 +7,12 @@ class AccountTransactionTable extends Component {
render() { render() {
console.log(this.props);
console.log("inr");
let table; let table;
if(this.props.data.length <= 1) { if(this.props.data.length < 1) {
return <ErrorHandler /> return <ErrorHandler />
}else { }else {
table = this.props.data.map((data, i) => { table = this.props.data.map((data, i) => {
console.log("DATA FROM MAP [AccountTransactionTable]", data)
const costConversion = data.Cost / 10000000000000000000; const costConversion = data.Cost / 10000000000000000000;
const amountConversion = data.Amount / 10000000000000000000; const amountConversion = data.Amount / 10000000000000000000;
return <DetailAccountsTable return <DetailAccountsTable
@ -39,14 +35,14 @@ class AccountTransactionTable extends Component {
<table key={this.props.data.TxHash} className={combinedClasses.join(' ')}> <table key={this.props.data.TxHash} className={combinedClasses.join(' ')}>
<thead className={classes.tHead}> <thead className={classes.tHead}>
<tr> <tr>
<th scope="col">TxHash</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>TxHash</th>
<th scope="col">Block</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Block</th>
<th scope="col">Age</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Age</th>
<th scope="col">From</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>From</th>
<th scope="col"></th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}> </th>
<th scope="col">To</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>To</th>
<th scope="col">Value</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Value</th>
<th scope="col">TxFee</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>TxFee</th>
</tr> </tr>
</thead> </thead>
{table} {table}

View file

@ -17,18 +17,18 @@ const DetailAccountsTable = (props) => {
} }
return ( return (
<tbody> <tbody>
<tr> <tr style={{ borderTop: '1px solid #e0defb' }}>
<td className={classes.addressTag}> <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.addressTag}>
<Link to="/transaction/details" className={genFlag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}> <Link to="/block/transactions" className={genFlag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}>
{props.txHash}</Link> {props.txHash}</Link>
</td> </td>
<td>{props.blockNumber}</td> <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.blockNumber}</td>
<td>{props.age}</td> <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.age}</td>
<td className={classes.fromTag}>{props.from}</td> <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.fromTag}>{props.from}</td>
<td><div className={ flag ? classes.incoming : classes.out }>{ flag ? "IN" : "OUT" }</div></td> <td><div className={ flag ? classes.incoming : classes.out }>{ flag ? "IN" : "OUT" }</div></td>
<td>{props.to}</td> <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.to}</td>
<td>{props.value}</td> <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.value}</td>
<td>{props.cost}</td> <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.cost}</td>
</tr> </tr>
</tbody> </tbody>
) )

View file

@ -24,3 +24,29 @@ td {
color: black; color: black;
} }
.incoming {
height: 25px;
width: 35px;
border: 1px forestgreen;
border-radius: 5px;
background-color: #4f2e7e;
color: white;
font-size: 1rem;
text-transform: uppercase;
text-align: center;
vertical-align: middle;
}
.out {
height: 25px;
width: 35px;
border: 1px orangered;
border-radius: 5px;
background-color: orangered;
color: white;
font-size: .8rem;
text-transform: uppercase;
text-align: center;
vertical-align: middle;
}

View file

@ -107,7 +107,6 @@ class App extends Component {
getBlockData = (data, page) => { getBlockData = (data, page) => {
let components = []; let components = [];
console.log("ACCOUNT DATA", data)
let dataEntry; let dataEntry;
if(page === "account") { if(page === "account") {
@ -117,8 +116,10 @@ class App extends Component {
} }
for (let key in dataEntry) { for (let key in dataEntry) {
let value = dataEntry[key] let value = dataEntry[key];
// console.log(key, value) if (dataEntry["To"] === null) {
delete dataEntry["To"]
}
components.push( components.push(
<Grid> <Grid>
<Row className="show-grid"> <Row className="show-grid">
@ -224,8 +225,6 @@ class App extends Component {
<Route path="/transaction/details" exact render={({match}) => <Route path="/transaction/details" exact render={({match}) =>
<div> <div>
<TransactionDetailHeader
txHash={this.state.transactionDetailData.TxHash}/>
<DetailTransactionTable <DetailTransactionTable
data={this.state.transactionDetailData}/> data={this.state.transactionDetailData}/>
</div>} </div>}
@ -243,8 +242,6 @@ class App extends Component {
<Route path="/block/transactions" exact render={({match}) => <Route path="/block/transactions" exact render={({match}) =>
<div> <div>
<BlockDetailHeader
blockNumber={this.state.reqBlockNum}/>
<BlockTxs <BlockTxs
data={this.state.blockTransactions} data={this.state.blockTransactions}
getBlockTransactions={this.getBlockTransactions} getBlockTransactions={this.getBlockTransactions}