detail looks for blocks completed

shyftdb/shyft_database_util.go

@@ -24,6 +24,11 @@ type SBlock struct {
 	TxCount  string
 	UncleCount string
 	Age        string
+	ParentHash string
+	UncleHash string
+	Difficulty string
+	Size string
+	Nonce string
 }
 
 //blockRes struct
@@ -558,6 +563,11 @@ func GetBlock(sqldb *sql.DB, blockNumber string) string {
 	var txCount string
 	var uncleCount string
 	var age string
+	var parentHash string
+	var uncleHash string
+	var difficulty string
+	var size string
+	var nonce string
 	var num string
 	row.Scan(
 		&hash,
@@ -567,6 +577,11 @@ func GetBlock(sqldb *sql.DB, blockNumber string) string {
 		&txCount,
 		&uncleCount,
 		&age,
+		&parentHash,
+		&uncleHash,
+		&difficulty,
+		&size,
+		&nonce,
 		&num,)
 
 	block := SBlock{
@@ -577,6 +592,11 @@ func GetBlock(sqldb *sql.DB, blockNumber string) string {
 		TxCount: txCount,
 		UncleCount: uncleCount,
 		Age: age,
+		ParentHash:parentHash,
+		UncleHash:uncleHash,
+		Difficulty:difficulty,
+		Size: size,
+		Nonce:nonce,
 		Number:   num,
 	}
 	json, _ := json.Marshal(block)
@@ -598,7 +618,8 @@ func GetAllTransactions(sqldb *sql.DB) string {
 			gasprice,
 			gas,
 			txfee,
-			nonce
+			nonce,
+			data
 		FROM txs`)
 	if err != nil {
 		fmt.Println("err")
@@ -615,6 +636,7 @@ func GetAllTransactions(sqldb *sql.DB) string {
 		var gas uint64
 		var txfee uint64
 		var nonce uint64
+		var data []byte
 		err = rows.Scan(
 			&txhash,
 			&to_addr,
@@ -626,6 +648,7 @@ func GetAllTransactions(sqldb *sql.DB) string {
 			&gas,
 			&txfee,
 			&nonce,
+			&data,
 		)
 
 		arr.TxEntry = append(arr.TxEntry, ShyftTxEntryPretty{
@@ -639,6 +662,7 @@ func GetAllTransactions(sqldb *sql.DB) string {
 			Gas:       gas,
 			Cost:      txfee,
 			Nonce:     nonce,
+			Data: 		data,
 		})
 
 		tx, _ := json.Marshal(arr.TxEntry)
@@ -649,9 +673,9 @@ func GetAllTransactions(sqldb *sql.DB) string {
 }
 
 //GetTransaction fn returns single tx
-func GetTransaction(sqldb *sql.DB, TxHash string) string {
+func GetTransaction(sqldb *sql.DB, txHash string) string {
 	sqlStatement := `SELECT * FROM txs WHERE txhash=$1;`
-	row := sqldb.QueryRow(sqlStatement, TxHash)
+	row := sqldb.QueryRow(sqlStatement, txHash)
 		var txhash string
 		var to_addr string
 		var from_addr string
@@ -662,7 +686,9 @@ func GetTransaction(sqldb *sql.DB, TxHash string) string {
 		var gas uint64
 		var txfee uint64
 		var nonce uint64
-	row.Scan(&txhash,
+		var data []byte
+	row.Scan(
+		&txhash,
 		&to_addr,
 		&from_addr,
 		&blockhash,
@@ -670,7 +696,8 @@ func GetTransaction(sqldb *sql.DB, TxHash string) string {
 		&gasprice,
 		&gas,
 		&txfee,
-		&nonce)
+		&nonce,
+		&data)
 	tx := ShyftTxEntryPretty{
 		TxHash:    txhash,
 		To:        to_addr,
@@ -682,6 +709,7 @@ func GetTransaction(sqldb *sql.DB, TxHash string) string {
 		Gas:       gas,
 		Cost:      txfee,
 		Nonce:     nonce,
+		Data:	   data,
 	}
 	json, _ := json.Marshal(tx)
 

ui-geth/src/components/nav/blockHeaders/blockDetailHeader.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import classes from '../nav.css';
+
+const blocksDetailHeader = (props) => {
+    return (
+        <div className={classes.Secondary}>
+            <span className={classes.Transactions}>Block# {props.blockNumber}</span>
+        </div>
+    )
+}
+
+export default blocksDetailHeader;

ui-geth/src/components/nav/blockHeaders/blockHeader.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import classes from './nav.css';
+import classes from '../nav.css';
 
 const blocksHeader = (props) => {
     return (

ui-geth/src/components/nav/transactionHeader/transactionDetailHeader.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import classes from '../nav.css';
+
+const transactionDetailHeader = (props) => {
+    return (
+        <div className={classes.Secondary}>
+            <span className={classes.Transactions}>Transaction</span>
+        </div>
+    )
+}
+
+export default transactionDetailHeader;

ui-geth/src/components/nav/transactionHeader/transactionHeader.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import classes from './nav.css';
+import classes from '../nav.css';
 
 const transactionHeader = (props) => {
     return (

ui-geth/src/components/table/blocks/blockRows.js

@@ -13,9 +13,7 @@ class BlocksTable extends Component {
 
     async componentDidMount() {
         try {
-            const response = await axios.get(
+            const response = await axios.get("http://localhost:8080/api/get_all_blocks")
-                "http://localhost:8080/api/get_all_blocks"
-            )
             await this.setState({data: response.data});
         } catch (err) {
             console.log(err);
@@ -35,6 +33,7 @@ class BlocksTable extends Component {
                 GasLimit={data.GasLimit}
                 UncleCount={data.UncleCount}
                 TxCount={data.TxCount}
+                detailBlockHandler={this.props.detailBlockHandler}
             />
         })
 

ui-geth/src/components/table/blocks/blockTable.js

@@ -1,12 +1,15 @@
 import React, { Component } from 'react';
 import classes from './table.css';
 import arrow from '../../assets/arrow_right.png';
+import { Link } from 'react-router-dom'
 
 const BlockTable = (props) => {
     return (
           <tbody key={props.key}>
             <tr>
-                <td>{props.Number}</td>
+                <td><Link to="/blocks/detail" onClick={() => props.detailBlockHandler(props.Number)}>
+                    {props.Number}
+                </Link></td>
                 <td className={classes.addressTag}>{props.Hash}</td>
                 <td>{props.Age}</td>
                 <td>{props.TxCount}</td>

ui-geth/src/components/table/blocks/blocksDetailsRow.js

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import classes from './table.css';
+
+class DetailBlockTable extends Component {
+
+    render() {
+        let data = this.props.data
+        let combinedClasses = ['responsive-table', classes.table];
+        return (
+            <table className={combinedClasses.join(' ')}>
+                <tr>
+                    <th scope="col">Height:</th>
+                    <td>{data.Number}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Age:</th>
+                    <td>{data.Age}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Txn:</th>
+                    <td>{data.TxCount} transactions</td>
+                </tr>
+                <tr>
+                    <th scope="col">Block Hash:</th>
+                    <td>{data.Hash}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Parent Hash:</th>
+                    <td>{data.ParentHash}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Uncle Hash:</th>
+                    <td>{data.UncleHash}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Uncle Count:</th>
+                    <td>{data.UncleCount}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Coinbase:</th>
+                    <td>{data.Coinbase}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Difficulty:</th>
+                    <td>{data.Difficulty}</td>
+                </tr>
+                <tr>
+                    <th scope="col">GasUsed:</th>
+                    <td>{data.GasUsed}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Size:</th>
+                    <td>{data.Size}ytes</td>
+                </tr>
+                <tr>
+                    <th scope="col">GasUsed:</th>
+                    <td>{data.GasUsed}</td>
+                </tr>
+                <tr>
+                    <th scope="col">GasLimit:</th>
+                    <td>{data.GasLimit}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Nonce:</th>
+                    <td>{data.Nonce}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Reward:</th>
+                    <td>TBD</td>
+                </tr>
+            </table>
+        );
+    }
+}
+export default DetailBlockTable;

ui-geth/src/components/table/transactions/transactionDetailsRow.js

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import classes from './table.css';
+
+class DetailTransactionTable extends Component {
+
+    render() {
+        let data = this.props.data
+        let combinedClasses = ['responsive-table', classes.table];
+        return (
+            <table className={combinedClasses.join(' ')}>
+                <tr>
+                    <th scope="col">TxHash:</th>
+                    <td>{data.TxHash}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Age:</th>
+                    <td>{data.Age}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Txn:</th>
+                    <td>{data.TxCount} transactions</td>
+                </tr>
+                <tr>
+                    <th scope="col">Block Hash:</th>
+                    <td>{data.Hash}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Parent Hash:</th>
+                    <td>{data.ParentHash}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Uncle Hash:</th>
+                    <td>{data.UncleHash}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Uncle Count:</th>
+                    <td>{data.UncleCount}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Coinbase:</th>
+                    <td>{data.Coinbase}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Difficulty:</th>
+                    <td>{data.Difficulty}</td>
+                </tr>
+                <tr>
+                    <th scope="col">GasUsed:</th>
+                    <td>{data.GasUsed}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Size:</th>
+                    <td>{data.Size}ytes</td>
+                </tr>
+                <tr>
+                    <th scope="col">GasUsed:</th>
+                    <td>{data.GasUsed}</td>
+                </tr>
+                <tr>
+                    <th scope="col">GasLimit:</th>
+                    <td>{data.GasLimit}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Nonce:</th>
+                    <td>{data.Nonce}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Reward:</th>
+                    <td>TBD</td>
+                </tr>
+            </table>
+        );
+    }
+}
+export default DetailTransactionTable;

ui-geth/src/components/table/transactions/transactionRow.js

@@ -14,9 +14,7 @@ class TransactionTable extends Component {
     async componentDidMount() {
         try {
             const response = await axios.get(
-                "http://localhost:8080/api/get_all_transactions"
+                "http://localhost:8080/api/get_all_transactions")
-            )
-            console.log(response.data)
             await this.setState({data: response.data});
         } catch (err) {
             console.log(err);

ui-geth/src/components/table/transactions/transactionTable.js

@@ -1,13 +1,16 @@
 import React, { Component } from 'react';
 import classes from './table.css';
 import arrow from '../../assets/arrow_right.png';
+import { Link } from 'react-router-dom'
 
 const TransactionTable = (props) => {
-    console.log(props)
     return (
           <tbody>
             <tr>
-                <td className={classes.addressTag}>{props.txHash}</td>
+                <td className={classes.addressTag}>
+                    <Link to="/transaction/details" onClick={() => props.detailTransactionHandler(props.txHash)}>
+                        {props.txHash}</Link>
+                </td>
                 <td>{props.blockNumber}</td>
                 <td>30 secs ago</td>
                 <td className={classes.fromTag}>{props.from}</td>

ui-geth/src/containers/App.js

@@ -1,23 +1,46 @@
 import React, { Component } from "react";
+import axios from 'axios';
 import Nav from "../components/nav/nav";
-import axios from "axios";
-import BlockInfoTable from "../components/table/transactions/transactionTable";
 import { BrowserRouter, Route, Link } from 'react-router-dom'
 import TransactionRow from '../components/table/transactions/transactionRow';
 import BlocksRow from '../components/table/blocks/blockRows';
-import TransactionHeader from "../components/nav/transactionHeader";
+import DetailBlockHeader from '../components/table/blocks/blocksDetailsRow';
-import BlockHeader from "../components/nav/blockHeader";
+import TransactionHeader from "../components/nav/transactionHeader/transactionHeader";
+import TransactionDetailHeader from "../components/nav/transactionHeader/transactionDetailHeader";
+import BlockDetailHeader from "../components/nav/blockHeaders/blockDetailHeader";
+import BlockHeader from "../components/nav/blockHeaders/blockHeader";
 import Home from '../components/home/home';
-import classes from "./App.css";
+import DetailTransactionTable from "../components/table/transactions/transactionDetailsRow";
 
 class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      data: []
+        blockDetailData: [],
+        transactionDetailData: []
     };
   }
 
+    detailBlockHandler = async(blockNumber) => {
+        try {
+            const response = await axios.get(`http://localhost:8080/api/get_block/${blockNumber}`)
+            await this.setState({ blockDetailData: response.data })
+        }
+        catch(error) {
+           console.log(error)
+        }
+    }
+
+    detailTransactionHandler = async(txHash) => {
+        try {
+            const response = await axios.get(`http://localhost:8080/api/get_transaction/${txHash}`)
+            await this.setState({ transactionDetailData: response.data })
+        }
+        catch(error) {
+            console.log(error)
+        }
+    }
+
   render() {
     return (
         <BrowserRouter>
@@ -31,14 +54,32 @@ class App extends Component {
           <Route path="/transactions" render={({match}) =>
               <div>
                   <TransactionHeader />
-              <TransactionRow />
+                  <TransactionRow detailTransactionHandler={this.detailTransactionHandler}/>
               </div>}
           />
 
-          <Route path="/blocks" render={({match}) =>
+          <Route path="/blocks" exact render={({match}) =>
               <div>
                   <BlockHeader/>
-                  <BlocksRow />
+                  <BlocksRow detailBlockHandler={this.detailBlockHandler}/>
+              </div>}
+          />
+
+          <Route path="/transaction/details" exact render={({match}) =>
+              <div>
+                  <TransactionDetailHeader
+                    txHash={this.state.transactionDetailData.TxHash}/>
+                  <DetailTransactionTable
+                    data={this.state.transactionDetailData}/>
+              </div>}
+          />
+
+          <Route path="/blocks/detail" exact render={({match}) =>
+              <div>
+                  <BlockDetailHeader
+                      blockNumber={this.state.blockDetailData.Number}/>
+                  <DetailBlockHeader
+                      data={this.state.blockDetailData}/>
               </div>}
           />