mirror of
https://github.com/ethereum/go-ethereum.git
synced 2026-08-19 10:22:23 +00:00
added addr table
This commit is contained in:
parent
8f19d6f4cd
commit
7eb16ceaf1
5 changed files with 50 additions and 34 deletions
|
|
@ -3,14 +3,11 @@ import classes from './accounts.css';
|
|||
import { Link } from 'react-router-dom'
|
||||
|
||||
const AccountsTable = (props) => {
|
||||
|
||||
console.log(props);
|
||||
|
||||
return (
|
||||
<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" 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}
|
||||
</Link></td>
|
||||
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.Balance}</td>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,12 @@ class AccountTransactionTable extends Component {
|
|||
|
||||
|
||||
render() {
|
||||
|
||||
console.log("inr");
|
||||
|
||||
|
||||
console.log(this.props);
|
||||
let table;
|
||||
if(this.props.data.length <= 1) {
|
||||
if(this.props.data.length < 1) {
|
||||
return <ErrorHandler />
|
||||
}else {
|
||||
table = this.props.data.map((data, i) => {
|
||||
console.log("DATA FROM MAP [AccountTransactionTable]", data)
|
||||
const costConversion = data.Cost / 10000000000000000000;
|
||||
const amountConversion = data.Amount / 10000000000000000000;
|
||||
return <DetailAccountsTable
|
||||
|
|
@ -39,14 +35,14 @@ class AccountTransactionTable extends Component {
|
|||
<table key={this.props.data.TxHash} className={combinedClasses.join(' ')}>
|
||||
<thead className={classes.tHead}>
|
||||
<tr>
|
||||
<th scope="col">TxHash</th>
|
||||
<th scope="col">Block</th>
|
||||
<th scope="col">Age</th>
|
||||
<th scope="col">From</th>
|
||||
<th scope="col"></th>
|
||||
<th scope="col">To</th>
|
||||
<th scope="col">Value</th>
|
||||
<th scope="col">TxFee</th>
|
||||
<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}
|
||||
|
|
|
|||
|
|
@ -17,18 +17,18 @@ const DetailAccountsTable = (props) => {
|
|||
}
|
||||
return (
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className={classes.addressTag}>
|
||||
<Link to="/transaction/details" className={genFlag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}>
|
||||
<tr style={{ borderTop: '1px solid #e0defb' }}>
|
||||
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.addressTag}>
|
||||
<Link to="/block/transactions" className={genFlag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}>
|
||||
{props.txHash}</Link>
|
||||
</td>
|
||||
<td>{props.blockNumber}</td>
|
||||
<td>{props.age}</td>
|
||||
<td className={classes.fromTag}>{props.from}</td>
|
||||
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.blockNumber}</td>
|
||||
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.age}</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>{props.to}</td>
|
||||
<td>{props.value}</td>
|
||||
<td>{props.cost}</td>
|
||||
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.to}</td>
|
||||
<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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -24,3 +24,29 @@ td {
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -107,7 +107,6 @@ class App extends Component {
|
|||
|
||||
getBlockData = (data, page) => {
|
||||
let components = [];
|
||||
console.log("ACCOUNT DATA", data)
|
||||
let dataEntry;
|
||||
|
||||
if(page === "account") {
|
||||
|
|
@ -117,8 +116,10 @@ class App extends Component {
|
|||
}
|
||||
|
||||
for (let key in dataEntry) {
|
||||
let value = dataEntry[key]
|
||||
// console.log(key, value)
|
||||
let value = dataEntry[key];
|
||||
if (dataEntry["To"] === null) {
|
||||
delete dataEntry["To"]
|
||||
}
|
||||
components.push(
|
||||
<Grid>
|
||||
<Row className="show-grid">
|
||||
|
|
@ -224,8 +225,6 @@ class App extends Component {
|
|||
|
||||
<Route path="/transaction/details" exact render={({match}) =>
|
||||
<div>
|
||||
<TransactionDetailHeader
|
||||
txHash={this.state.transactionDetailData.TxHash}/>
|
||||
<DetailTransactionTable
|
||||
data={this.state.transactionDetailData}/>
|
||||
</div>}
|
||||
|
|
@ -243,8 +242,6 @@ class App extends Component {
|
|||
|
||||
<Route path="/block/transactions" exact render={({match}) =>
|
||||
<div>
|
||||
<BlockDetailHeader
|
||||
blockNumber={this.state.reqBlockNum}/>
|
||||
<BlockTxs
|
||||
data={this.state.blockTransactions}
|
||||
getBlockTransactions={this.getBlockTransactions}
|
||||
|
|
|
|||
Loading…
Reference in a new issue