Account detail overlay fixed

This commit is contained in:
Chris Fenos 2018-08-22 14:17:09 -04:00
parent 9035fc1a9f
commit 8746797bb0
5 changed files with 47 additions and 27 deletions

View file

@ -47,11 +47,11 @@ class AccountTable extends Component {
<table className={combinedClasses.join(' ')}>
<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>
<th scope="col" className={classes.thItem}>Rank</th>
<th scope="col" className={classes.thItem}>Address</th>
<th scope="col" className={classes.thItem}>Balance</th>
<th scope="col" className={classes.thItem}>Percentage</th>
<th scope="col" className={classes.thItem}>TxCount</th>
</tr>
</thead>
{table}

View file

@ -35,14 +35,14 @@ class AccountTransactionTable extends Component {
<table key={this.props.data.TxHash} className={combinedClasses.join(' ')}>
<thead className={classes.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>
<th scope="col" className={classes.thItem}>TxHash</th>
<th scope="col" className={classes.thItem}>Block</th>
<th scope="col" className={classes.thItem}>Age</th>
<th scope="col" className={classes.thItem}>From</th>
<th scope="col" className={classes.thItem}> </th>
<th scope="col" className={classes.thItem}>To</th>
<th scope="col" className={classes.thItem}>Value</th>
<th scope="col" className={classes.thItem}>TxFee</th>
</tr>
</thead>
{table}

View file

@ -16,21 +16,26 @@ const DetailAccountsTable = (props) => {
genFlag = true
}
return (
<tbody>
<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>
<tbody>
<tr className={classes.border}>
<td className={classes.tdItem}>
<div className={[genFlag ? "" : classes.disabled, classes.tdLink]} onClick={() => props.detailTransactionHandler(props.txHash)}>
{props.txHash}
</div>
</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 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>
<td className={classes.tdItem}> {props.blockNumber} </td>
<td className={classes.tdItem}> {props.age} </td>
<td className={classes.tdItem}> {props.from} </td>
<td>
<div className={ [flag ? classes.incoming : classes.out, classes.tdItem ]}>
{ flag ? "IN" : "OUT" }
</div>
</td>
<td className={classes.tdItem}> {props.to} </td>
<td className={classes.tdItem}> {props.value} </td>
<td className={classes.tdItem}> {props.cost} </td>
</tr>
</tbody>
</tbody>
)
};

View file

@ -47,3 +47,4 @@ td {
pointer-events: none;
color: black;
}

View file

@ -49,6 +49,7 @@ class App extends Component {
internalDetailData: [],
blocksMined: [],
blockTransactions: [],
accounts: [],
reqAccount: '',
overlayTriggered: false,
overlayContent: "",
@ -76,10 +77,11 @@ class App extends Component {
}
};
detailAccountHandler = async(addr) => {
try {
const response = await axios.get(`http://localhost:8080/api/get_account_txs/${addr}`)
await this.setState({ accountDetailData: response.data, reqAccount: addr, overlayTriggered: false })
await this.setState({ accountDetailData: response.data, reqAccount: addr, overlayTriggered: false, overlayContent: "account" })
}
catch(error) {
console.log(error)
@ -109,6 +111,18 @@ class App extends Component {
};
getAccounts = async() => {
try {
const response = await axios.get(`http://localhost:8080/api/get_all_accounts`)
await this.setState({ accounts: response.data, overlayTriggered: false })
}
catch(error) {
console.log(error)
}
};
getBlockTransactions = async(blockNumber) => {
try {
const response = await axios.get(`http://localhost:8080/api/get_all_transactions_from_block/${blockNumber}`)