Internal transaction by hash functionality added

This commit is contained in:
Chris Fenos 2018-08-21 17:12:13 -04:00
parent 41c5f04c9f
commit f77a50b4e1
4 changed files with 82 additions and 52 deletions

View file

@ -26,10 +26,6 @@ class InternalTransactionsTable extends Component {
render() { render() {
const table = this.state.data.map((data, i) => { const table = this.state.data.map((data, i) => {
console.log(data);
const conversion = data.Rewards / 10000000000000000000; const conversion = data.Rewards / 10000000000000000000;
return <InternalTable return <InternalTable
key={`${data.TxHash}${i}`} key={`${data.TxHash}${i}`}
@ -44,6 +40,7 @@ class InternalTransactionsTable extends Component {
Output={data.Output} Output={data.Output}
Time={data.Time} Time={data.Time}
Value={data.Value} Value={data.Value}
detailInternalHandler={this.props.detailInternalHandler}
/> />
}); });
@ -53,17 +50,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", width: '5hw'}} >Block Hash</th> <th scope="col" className={classes.blockHash} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >Block Hash</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}} >Action</th> <th scope="col" className={classes.action} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >Action</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}} >To</th> <th scope="col" className={classes.to} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >To</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}} >From</th> <th scope="col" className={classes.from} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >From</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}} >Gas</th> <th scope="col" className={classes.gas} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >Gas</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}} >Gas Used</th> <th scope="col" className={classes.gasUsed} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >Gas Used</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}}>ID</th> <th scope="col" className={classes.id} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>ID</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}}>Input</th> <th scope="col" className={classes.input} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>Input</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}}>Output</th> <th scope="col" className={classes.output} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>Output</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}}>Time</th> <th scope="col" className={classes.time} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>Time</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}}>Value</th> <th scope="col" className={classes.value} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>Value</th>
</tr> </tr>
</thead> </thead>
{table} {table}

View file

@ -7,21 +7,27 @@ const InternalTable = (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' }} ><Link to="/blocks" style={{ color: '#8f67c9' }} onClick={() => props.detailBlockHandler(props.Number)}> <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >
{props.Hash} <div style={{ color: '#8f67c9' }} onClick={() => props.detailInternalHandler(props.Hash)}>
</Link></td> {props.Hash}
</div>
</td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.Action}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.Action}</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.To}</td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.From}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.From}</td>
<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}></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: '18pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}> <Button style={{color: '#8f67c9'}} bsStyle="link" onClick={()=>alert( props.Input )}> Show Input </Button> </td> <td style={{paddingLeft: '18pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>
<input type="hidden" id={"input" + props.Hash} value={props.Input} /> <Button style={{color: '#8f67c9'}} bsStyle="link" bsSize="small" onClick={()=>alert( props.Input )}> Show Input </Button>
<td style={{paddingLeft: '18pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}> <Button style={{color: '#8f67c9'}} bsStyle="link" onClick={()=>alert(props.Output)}> Show Output </Button> </td> </td>
<input type="hidden" id={"output" + props.Hash} value={props.Output} /> <td style={{paddingLeft: '18pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>
<Button style={{color: '#8f67c9'}} bsStyle="link" bsSize="small" onClick={()=>alert(props.Output)}> Show Output </Button>
</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.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>
<input type="hidden" id={"input" + props.Hash} value={props.Input} />
<input type="hidden" id={"output" + props.Hash} value={props.Output} />
</tr> </tr>
</tbody> </tbody>
) )

View file

@ -4,6 +4,9 @@ import arrow from '../../assets/arrow_right_black.png';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
const TransactionTable = (props) => { const TransactionTable = (props) => {
console.log("in transaction table")
console.log(props)
window.bar = props
let flag; let flag;
if(props.txHash.indexOf("GENESIS") !== -1) { if(props.txHash.indexOf("GENESIS") !== -1) {
flag = false flag = false

View file

@ -24,8 +24,6 @@ import BlockTxs from "../components/table/transactions/blockTx";
///**INTERNAL TRANSACTIONS**/// ///**INTERNAL TRANSACTIONS**///
import InternalTransactionRow from '../components/table/internalTransactions/internalRow'; import InternalTransactionRow from '../components/table/internalTransactions/internalRow';
///**BLOCKS**/// ///**BLOCKS**///
import BlocksRow from '../components/table/blocks/blockRows'; import BlocksRow from '../components/table/blocks/blockRows';
import DetailBlockTable from '../components/table/blocks/blocksDetailsRow'; import DetailBlockTable from '../components/table/blocks/blocksDetailsRow';
@ -68,6 +66,7 @@ class App extends Component {
}; };
detailTransactionHandler = async(txHash) => { detailTransactionHandler = async(txHash) => {
console.log("detail tx handler")
try { try {
const response = await axios.get(`http://localhost:8080/api/get_transaction/${txHash}`); const response = await axios.get(`http://localhost:8080/api/get_transaction/${txHash}`);
await this.setState({ transactionDetailData: response.data, overlayTriggered: true, overlayContent: "transaction" }) await this.setState({ transactionDetailData: response.data, overlayTriggered: true, overlayContent: "transaction" })
@ -78,7 +77,6 @@ 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 })
@ -88,15 +86,22 @@ class App extends Component {
} }
}; };
detailInternalHandler = async() => { detailInternalHandler = async(txHash) => {
console.log("********* detaik Internal ")
console.log("in internal request");
try { try {
const response = await axios.get(`http://localhost:8080/api/get_internal_transactions/`) const response = await axios.get(`http://localhost:8080/api/get_internal_transactions/${txHash}`)
await this.setState({ internalDetailData: response.data, reqAccount: txHash, overlayTriggered: true, overlayContent: "internal" })
}
catch(error) {
console.log(error)
}
};
console.log(response.data); getInternalTransactions = async() => {
await this.setState({ internalDetailData: response.data, overlayTriggered: false }) try {
const response = await axios.get(`http://localhost:8080/api/get_internal_transactions/`)
await this.setState({ internalTransactions: response.data, overlayTriggered: false })
} }
catch(error) { catch(error) {
console.log(error) console.log(error)
@ -131,32 +136,45 @@ class App extends Component {
getBlockData = (data, page) => { getBlockData = (data, page) => {
let components = []; let components = [];
let dataEntry; let dataEntry;
if(page === "account" || page === "internal") {
if(page === "account") {
dataEntry = data[0]; dataEntry = data[0];
} else { }
else {
dataEntry = data; dataEntry = data;
} }
for (let key in dataEntry) { for (let key in dataEntry) {
let value = dataEntry[key]; let value = dataEntry[key];
if (dataEntry["To"] === null) { if (dataEntry["To"] === null) {
delete dataEntry["To"] delete dataEntry["To"]
} }
components.push( if( key === "Input" || key === "Output") {
<Grid> components.push(
<Row className="show-grid"> <Grid>
<Col xs={3} md={3} style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}> <Row className="show-grid">
{key} <Col xs={3} md={3} style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}>
</Col> {key}
<Col xs={9} md={9} style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}> </Col>
{value} <Col xs={9} md={9} style={{fontSize:'6.5pt', color: '#565656', paddingTop: '5pt', marginLeft:'-5pt', fontFamily: 'Open Sans, sans-serif'}}>
</Col> <Button style={{color: '#8f67c9'}} bsStyle="link" bsSize="small" onClick={()=> alert( value )}> Show {key} </Button>
</Row> </Col>
</Grid> </Row>
); </Grid>
);
} else {
components.push(
<Grid>
<Row className="show-grid">
<Col xs={3} md={3} style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}>
{key}
</Col>
<Col xs={9} md={9} style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}>
{value}
</Col>
</Row>
</Grid>
);
}
} }
return components; return components;
} }
@ -180,6 +198,10 @@ class App extends Component {
title = "ACCOUNT OVERVIEW"; title = "ACCOUNT OVERVIEW";
data = this.state.accountDetailData; data = this.state.accountDetailData;
break; break;
case "internal" :
title = "Internal Transaction Overview";
data = this.state.internalDetailData;
break;
default: console.log("error"); default: console.log("error");
} }
@ -242,7 +264,9 @@ class App extends Component {
<Route path="/internalTransactions" exact render={({match}) => <Route path="/internalTransactions" exact render={({match}) =>
<div> <div>
<InternalTransactionRow <InternalTransactionRow
detailBlockHandler={this.detailInternalHandler}/> getInternalTransactionsHandler={this.getInternalTransactions}
detailInternalHandler={this.detailInternalHandler}
/>
</div> </div>
} }
/> />