From f77a50b4e1e857e71d0be55bcdb888e90feb70f4 Mon Sep 17 00:00:00 2001
From: Chris Fenos <chris.m.fenos@gmail.com>
Date: Tue, 21 Aug 2018 17:12:13 -0400
Subject: [PATCH] Internal transaction by hash functionality added

---
 .../table/internalTransactions/internalRow.js | 31 ++++----
 .../internalTransactions/internalTable.js     | 22 ++++--
 .../table/transactions/transactionTable.js    |  3 +
 shyftBlockExplorerUI/src/containers/App.js    | 78 ++++++++++++-------
 4 files changed, 82 insertions(+), 52 deletions(-)

diff --git a/shyftBlockExplorerUI/src/components/table/internalTransactions/internalRow.js b/shyftBlockExplorerUI/src/components/table/internalTransactions/internalRow.js
index c5ea468852..bc7dac8533 100644
--- a/shyftBlockExplorerUI/src/components/table/internalTransactions/internalRow.js
+++ b/shyftBlockExplorerUI/src/components/table/internalTransactions/internalRow.js
@@ -25,11 +25,7 @@ class InternalTransactionsTable extends Component {
     }
 
     render() {
-        const table = this.state.data.map((data, i) => {
-
-            console.log(data);
-
-
+        const table = this.state.data.map((data, i) => {  
             const conversion = data.Rewards / 10000000000000000000;
             return <InternalTable
                 key={`${data.TxHash}${i}`}
@@ -43,7 +39,8 @@ class InternalTransactionsTable extends Component {
                 Input={data.Input}
                 Output={data.Output}
                 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(' ')}>
                     <thead>
                     <tr>                    
-                        <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", width: '5hw'}} >Action</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", width: '5hw'}} >From</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", width: '5hw'}} >Gas Used</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", width: '5hw'}}>Input</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", width: '5hw'}}>Time</th>
-                        <th scope="col"   style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e", width: '5hw'}}>Value</th>
+                        <th scope="col" className={classes.blockHash} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >Block Hash</th>
+                        <th scope="col" className={classes.action} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >Action</th>
+                        <th scope="col" className={classes.to} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >To</th>
+                        <th scope="col" className={classes.from} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >From</th>
+                        <th scope="col" className={classes.gas} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >Gas</th>
+                        <th scope="col" className={classes.gasUsed} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >Gas Used</th>
+                        <th scope="col" className={classes.id} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>ID</th>
+                        <th scope="col" className={classes.input} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>Input</th>
+                        <th scope="col" className={classes.output} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>Output</th>
+                        <th scope="col" className={classes.time} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>Time</th>
+                        <th scope="col" className={classes.value} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>Value</th>
                     </tr>
                     </thead>
                     {table}
diff --git a/shyftBlockExplorerUI/src/components/table/internalTransactions/internalTable.js b/shyftBlockExplorerUI/src/components/table/internalTransactions/internalTable.js
index e5e12988c6..8959a749fe 100644
--- a/shyftBlockExplorerUI/src/components/table/internalTransactions/internalTable.js
+++ b/shyftBlockExplorerUI/src/components/table/internalTransactions/internalTable.js
@@ -7,21 +7,27 @@ 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'  }} >
+                    <div style={{ color: '#8f67c9' }} onClick={() => props.detailInternalHandler(props.Hash)}>
+                        {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.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'  }} className={classes.GasUsed}></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>
-                <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: '18pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}> 
+                    <Button style={{color: '#8f67c9'}} bsStyle="link" bsSize="small" onClick={()=>alert( props.Input )}> Show Input </Button> 
+                </td>
+                <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.Value}</td>
+                <input type="hidden" id={"input" + props.Hash} value={props.Input} />
+                <input type="hidden" id={"output" + props.Hash} value={props.Output} /> 
             </tr>
         </tbody>
     )
diff --git a/shyftBlockExplorerUI/src/components/table/transactions/transactionTable.js b/shyftBlockExplorerUI/src/components/table/transactions/transactionTable.js
index e33dc1098e..bb62a01cff 100644
--- a/shyftBlockExplorerUI/src/components/table/transactions/transactionTable.js
+++ b/shyftBlockExplorerUI/src/components/table/transactions/transactionTable.js
@@ -4,6 +4,9 @@ import arrow from '../../assets/arrow_right_black.png';
 import { Link } from 'react-router-dom'
 
 const TransactionTable = (props) => {
+    console.log("in transaction table")
+    console.log(props)
+    window.bar = props
     let flag;
     if(props.txHash.indexOf("GENESIS") !== -1) {
         flag = false
diff --git a/shyftBlockExplorerUI/src/containers/App.js b/shyftBlockExplorerUI/src/containers/App.js
index 9503871339..59a61c56c7 100644
--- a/shyftBlockExplorerUI/src/containers/App.js
+++ b/shyftBlockExplorerUI/src/containers/App.js
@@ -24,8 +24,6 @@ import BlockTxs from "../components/table/transactions/blockTx";
 ///**INTERNAL TRANSACTIONS**///
 import InternalTransactionRow from '../components/table/internalTransactions/internalRow';
 
-
-
 ///**BLOCKS**///
 import BlocksRow from '../components/table/blocks/blockRows';
 import DetailBlockTable from '../components/table/blocks/blocksDetailsRow';
@@ -68,6 +66,7 @@ class App extends Component {
     };
 
     detailTransactionHandler = async(txHash) => {
+        console.log("detail tx handler")
         try {
             const response = await axios.get(`http://localhost:8080/api/get_transaction/${txHash}`);
             await this.setState({ transactionDetailData: response.data, overlayTriggered: true, overlayContent: "transaction" })
@@ -78,7 +77,6 @@ class App extends Component {
     };
 
     detailAccountHandler = async(addr) => {
-
         try {
             const response = await axios.get(`http://localhost:8080/api/get_account_txs/${addr}`)
             await this.setState({ accountDetailData: response.data, reqAccount: addr, overlayTriggered: false })
@@ -88,15 +86,22 @@ class App extends Component {
         }
     };
 
-    detailInternalHandler = async() => {
-
-        console.log("in internal request");
+    detailInternalHandler = async(txHash) => {
+        console.log("********* detaik Internal ")
 
+        try {
+            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)
+        }
+    };
+
+    getInternalTransactions = async() => {
         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 })
+            await this.setState({ internalTransactions: response.data,  overlayTriggered: false })
         }
         catch(error) {
             console.log(error)
@@ -131,32 +136,45 @@ class App extends Component {
     getBlockData = (data, page) => {
         let components = [];
         let dataEntry;
-        
-        if(page === "account") {
+        if(page === "account" || page === "internal") {
             dataEntry = data[0];
-        } else { 
+        }
+        else { 
             dataEntry = data;
         }
-        
         for (let key in dataEntry) {
             let value = dataEntry[key];
             if (dataEntry["To"] === null) {
                 delete dataEntry["To"]
             }
-            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>
-            );          
+            if( key === "Input" || key === "Output") {
+                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: '5pt', marginLeft:'-5pt', fontFamily: 'Open Sans, sans-serif'}}>
+                                <Button style={{color: '#8f67c9'}} bsStyle="link" bsSize="small" onClick={()=> alert( value )}> Show {key} </Button> 
+                            </Col>                          
+                        </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;
     }
 
@@ -180,6 +198,10 @@ class App extends Component {
                 title = "ACCOUNT OVERVIEW";
                 data =  this.state.accountDetailData;
             break;
+            case "internal" : 
+                title = "Internal Transaction Overview";
+                data = this.state.internalDetailData;
+            break;
             default: console.log("error");
         }
 
@@ -242,7 +264,9 @@ class App extends Component {
                     <Route path="/internalTransactions" exact render={({match}) =>
                         <div>                        
                             <InternalTransactionRow                              
-                                detailBlockHandler={this.detailInternalHandler}/>                        
+                                getInternalTransactionsHandler={this.getInternalTransactions}
+                                detailInternalHandler={this.detailInternalHandler}
+                                />                        
                         </div>
                         }
                     />