Internal transaction routes and table created - not styled for input column

shyftBlockExplorerUI/src/components/nav/nav.js

@@ -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") }> 

shyftBlockExplorerUI/src/components/table/internalTransactions/internalRow.js

@@ -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;

shyftBlockExplorerUI/src/components/table/internalTransactions/internalTable.js

@@ -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;

shyftBlockExplorerUI/src/components/table/internalTransactions/table.css

@@ -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;
+} 
+

shyftBlockExplorerUI/src/components/table/transactions/transactionRow.js

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

shyftBlockExplorerUI/src/components/table/transactions/transactionTable.js

@@ -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: '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: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.age}</td>
+                <td style={{ paddingLeft: '15pt', 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: '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: '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: '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: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.value}</td>
+                <td style={{ paddingLeft: '15pt', 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'  }}>{props.cost}</td>
             </tr>
         </tbody>
     )

shyftBlockExplorerUI/src/containers/App.js

@@ -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}/>