mirror of
https://github.com/ethereum/go-ethereum.git
synced 2026-08-19 10:22:23 +00:00
Internal transaction routes and table created - not styled for input column
This commit is contained in:
Chris Fenos
parent
8f19d6f4cd
commit
354834749d
7 changed files with 176 additions and 15 deletions
|
|
@ -35,7 +35,7 @@ class navBar extends React.Component {
|
|||
TRANSACTIONS
|
||||
</button>
|
||||
</Link>
|
||||
<Link to="/transactions">
|
||||
<Link to="/internalTransactions">
|
||||
<button
|
||||
className={this.state.active === "internal" ? classes.btnActive : classes.btn}
|
||||
onClick={ ()=> this.updateActive("internal") }>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
import React, { Component } from 'react';
|
||||
import InternalTable from './internalTable';
|
||||
import Loading from '../../UI materials/loading'
|
||||
import classes from './table.css';
|
||||
import axios from "axios/index";
|
||||
|
||||
class InternalTransactionsTable extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: []
|
||||
};
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
|
||||
console.log("in table row component");
|
||||
|
||||
try {
|
||||
const response = await axios.get("http://localhost:8080/api/get_internal_transactions/");
|
||||
await this.setState({data: response.data});
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const table = this.state.data.map((data, i) => {
|
||||
|
||||
console.log(data);
|
||||
|
||||
|
||||
const conversion = data.Rewards / 10000000000000000000;
|
||||
return <InternalTable
|
||||
key={`${data.TxHash}${i}`}
|
||||
Hash={data.Hash}
|
||||
Action={data.Action}
|
||||
To={data.To}
|
||||
From= {data.From}
|
||||
Gas={data.Gas}
|
||||
GasUsed={data.GasUsed}
|
||||
ID={data.ID}
|
||||
Input={data.Input}
|
||||
Output={data.Output}
|
||||
Time={data.Time}
|
||||
Value={data.Value}
|
||||
/>
|
||||
});
|
||||
|
||||
let combinedClasses = ['responsive-table', classes.table];
|
||||
return (
|
||||
<div>
|
||||
<table className={combinedClasses.join(' ')}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >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"}} >To</th>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >From</th>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >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"}}>ID</th>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Input</th>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Output</th>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Time</th>
|
||||
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{table}
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default InternalTransactionsTable;
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import React from 'react';
|
||||
import classes from './table.css';
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
const InternalTable = (props) => {
|
||||
return (
|
||||
<tbody>
|
||||
<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)}>
|
||||
{props.Hash}
|
||||
</Link></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.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' }} 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.Input}</td>
|
||||
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.Output}</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>
|
||||
</tr>
|
||||
</tbody>
|
||||
)
|
||||
}
|
||||
|
||||
export default InternalTable;
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
.table {
|
||||
border-spacing: 100rem;
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
top: 107pt;
|
||||
left: 2.5%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: white;
|
||||
padding: 15pt 30pt ;
|
||||
color: #593c83;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 6pt;
|
||||
background-color: white;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
|
@ -45,13 +45,13 @@ class TransactionTable extends Component {
|
|||
<table key={this.state.data.TxHash} className={combinedClasses.join(' ')}>
|
||||
<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"}}>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" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>TxHash</th>
|
||||
<th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Block</th>
|
||||
<th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Age</th>
|
||||
<th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>From</th>
|
||||
<th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>To</th>
|
||||
<th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Value</th>
|
||||
<th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >TxFee</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{table}
|
||||
|
|
|
|||
|
|
@ -14,16 +14,16 @@ const TransactionTable = (props) => {
|
|||
return (
|
||||
<tbody>
|
||||
<tr style={{ borderTop: '1px solid #e0defb' }}>
|
||||
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.addressTag}>
|
||||
<td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'}} className={classes.addressTag}>
|
||||
<Link to="/transactions" style={{ color: '#8f67c9' }} className={flag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}>
|
||||
{props.txHash}</Link>
|
||||
</td>
|
||||
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}><Link style={{ color: '#8f67c9' }} to="/block/transactions" onClick={() => props.getBlockTransactions(props.blockNumber)}>{props.blockNumber}</Link></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={flag ? classes.fromTag : classes.disabled }><Link style={{ color: '#8f67c9' }} to="/account/detail" onClick={() => props.detailAccountHandler(props.from)}>{props.from}</Link></td>
|
||||
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.toTag}><Link style={{ color: '#8f67c9' }} to="/account/detail" onClick={() => props.detailAccountHandler(props.to)}>{props.to}</Link></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 style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}><Link style={{ color: '#8f67c9' }} to="/block/transactions" onClick={() => props.getBlockTransactions(props.blockNumber)}>{props.blockNumber}</Link></td>
|
||||
<td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.age}</td>
|
||||
<td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={flag ? classes.fromTag : classes.disabled }><Link style={{ color: '#8f67c9' }} to="/account/detail" onClick={() => props.detailAccountHandler(props.from)}>{props.from}</Link></td>
|
||||
<td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.toTag}><Link style={{ color: '#8f67c9' }} to="/account/detail" onClick={() => props.detailAccountHandler(props.to)}>{props.to}</Link></td>
|
||||
<td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.value}</td>
|
||||
<td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.cost}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -20,6 +20,12 @@ import TransactionDetailHeader from "../components/nav/transactionHeader/transac
|
|||
import DetailTransactionTable from "../components/table/transactions/transactionDetailsRow";
|
||||
import BlockTxs from "../components/table/transactions/blockTx";
|
||||
|
||||
|
||||
|
||||
import InternalTransactionRow from '../components/table/internalTransactions/internalRow';
|
||||
|
||||
|
||||
|
||||
///**BLOCKS**///
|
||||
import BlocksRow from '../components/table/blocks/blockRows';
|
||||
import DetailBlockTable from '../components/table/blocks/blocksDetailsRow';
|
||||
|
|
@ -42,6 +48,7 @@ class App extends Component {
|
|||
blockDetailData: [],
|
||||
transactionDetailData: [],
|
||||
accountDetailData: [],
|
||||
internalDetailData: [],
|
||||
blocksMined: [],
|
||||
blockTransactions: [],
|
||||
reqAccount: '',
|
||||
|
|
@ -81,6 +88,22 @@ class App extends Component {
|
|||
}
|
||||
};
|
||||
|
||||
detailInternalHandler = async() => {
|
||||
|
||||
console.log("in internal request");
|
||||
|
||||
try {
|
||||
const response = await axios.get(`http://localhost:8080/api/get_internal_transactions/`)
|
||||
|
||||
console.log(response.data);
|
||||
await this.setState({ internalDetailData: 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}`)
|
||||
|
|
@ -215,6 +238,14 @@ class App extends Component {
|
|||
}
|
||||
/>
|
||||
|
||||
<Route path="/internalTransactions" exact render={({match}) =>
|
||||
<div>
|
||||
<InternalTransactionRow
|
||||
detailBlockHandler={this.detailInternalHandler}/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route path="/accounts" exact render={({match}) =>
|
||||
<div>
|
||||
<AccountsRow detailAccountHandler={this.detailAccountHandler}/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue