mirror of
https://github.com/ethereum/go-ethereum.git
synced 2026-08-19 10:22:23 +00:00
Internal transaction by hash functionality added
This commit is contained in:
parent
41c5f04c9f
commit
f77a50b4e1
4 changed files with 82 additions and 52 deletions
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue