Internal transaction table fixed with dynamic input output data displays

This commit is contained in:
Chris Fenos 2018-08-21 15:58:33 -04:00
parent 081a7421e4
commit 41c5f04c9f
3 changed files with 19 additions and 16 deletions

View file

@ -53,17 +53,17 @@ class InternalTransactionsTable extends Component {
<table className={combinedClasses.join(' ')}> <table className={combinedClasses.join(' ')}>
<thead> <thead>
<tr> <tr>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Block Hash</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}} >Block Hash</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Action</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}} >Action</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >To</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}} >To</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >From</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}} >From</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Gas</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}} >Gas</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Gas Used</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}} >Gas Used</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>ID</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}}>ID</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Input</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}}>Input</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Output</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}}>Output</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Time</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}}>Time</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Value</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}}>Value</th>
</tr> </tr>
</thead> </thead>
{table} {table}

View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import classes from './table.css'; import classes from './table.css';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import Button from 'react-bootstrap/lib/Button';
const InternalTable = (props) => { const InternalTable = (props) => {
return ( return (
@ -15,12 +16,14 @@ const InternalTable = (props) => {
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.Gas}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.Gas}</td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.GasUsed}><Link to="/mined/blocks" style={{ color: '#8f67c9' }} onClick={() => props.getBlocksMined(props.Coinbase)}>{props.Coinbase}</Link></td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.GasUsed}><Link to="/mined/blocks" style={{ color: '#8f67c9' }} onClick={() => props.getBlocksMined(props.Coinbase)}>{props.Coinbase}</Link></td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.ID}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.ID}</td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.Input}</td> <td style={{paddingLeft: '18pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}> <Button style={{color: '#8f67c9'}} bsStyle="link" onClick={()=>alert( props.Input )}> Show Input </Button> </td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.Output}</td> <input type="hidden" id={"input" + props.Hash} value={props.Input} />
<td style={{paddingLeft: '18pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}> <Button style={{color: '#8f67c9'}} bsStyle="link" onClick={()=>alert(props.Output)}> Show Output </Button> </td>
<input type="hidden" id={"output" + props.Hash} value={props.Output} />
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.Time}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.Time}</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.Value}</td>
</tr> </tr>
</tbody> </tbody>
) )
} }

View file

@ -21,7 +21,7 @@ import DetailTransactionTable from "../components/table/transactions/transaction
import BlockTxs from "../components/table/transactions/blockTx"; import BlockTxs from "../components/table/transactions/blockTx";
///**INTERNAL TRANSACTIONS**///
import InternalTransactionRow from '../components/table/internalTransactions/internalRow'; import InternalTransactionRow from '../components/table/internalTransactions/internalRow';