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(' ')}> <table className={combinedClasses.join(' ')}>
<thead> <thead>
<tr> <tr>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Rank</th> <th scope="col" className={classes.thItem}>Rank</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Address</th> <th scope="col" className={classes.thItem}>Address</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Balance</th> <th scope="col" className={classes.thItem}>Balance</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Percentage</th> <th scope="col" className={classes.thItem}>Percentage</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>TxCount</th> <th scope="col" className={classes.thItem}>TxCount</th>
</tr> </tr>
</thead> </thead>
{table} {table}

View file

@ -35,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" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>TxHash</th> <th scope="col" className={classes.thItem}>TxHash</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Block</th> <th scope="col" className={classes.thItem}>Block</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Age</th> <th scope="col" className={classes.thItem}>Age</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>From</th> <th scope="col" className={classes.thItem}>From</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}> </th> <th scope="col" className={classes.thItem}> </th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>To</th> <th scope="col" className={classes.thItem}>To</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Value</th> <th scope="col" className={classes.thItem}>Value</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>TxFee</th> <th scope="col" className={classes.thItem}>TxFee</th>
</tr> </tr>
</thead> </thead>
{table} {table}

View file

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

View file

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

View file

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