diff --git a/shyftdb/shyft_database_util.go b/shyftdb/shyft_database_util.go
index a3de91d12d..0e86b8ec31 100644
--- a/shyftdb/shyft_database_util.go
+++ b/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)
diff --git a/ui-geth/src/components/nav/blockHeaders/blockDetailHeader.js b/ui-geth/src/components/nav/blockHeaders/blockDetailHeader.js
new file mode 100644
index 0000000000..34e552c21d
--- /dev/null
+++ b/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 (
+
+ Block# {props.blockNumber}
+
+ )
+}
+
+export default blocksDetailHeader;
\ No newline at end of file
diff --git a/ui-geth/src/components/nav/blockHeader.js b/ui-geth/src/components/nav/blockHeaders/blockHeader.js
similarity index 87%
rename from ui-geth/src/components/nav/blockHeader.js
rename to ui-geth/src/components/nav/blockHeaders/blockHeader.js
index 1e3adec9bd..cc46079750 100644
--- a/ui-geth/src/components/nav/blockHeader.js
+++ b/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 (
diff --git a/ui-geth/src/components/nav/transactionHeader/transactionDetailHeader.js b/ui-geth/src/components/nav/transactionHeader/transactionDetailHeader.js
new file mode 100644
index 0000000000..4a8922e90d
--- /dev/null
+++ b/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 (
+
+ Transaction
+
+ )
+}
+
+export default transactionDetailHeader;
\ No newline at end of file
diff --git a/ui-geth/src/components/nav/transactionHeader.js b/ui-geth/src/components/nav/transactionHeader/transactionHeader.js
similarity index 87%
rename from ui-geth/src/components/nav/transactionHeader.js
rename to ui-geth/src/components/nav/transactionHeader/transactionHeader.js
index f504715c35..654961b2ed 100644
--- a/ui-geth/src/components/nav/transactionHeader.js
+++ b/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 (
diff --git a/ui-geth/src/components/table/blocks/blockRows.js b/ui-geth/src/components/table/blocks/blockRows.js
index bd550d5c2c..1258db7b55 100644
--- a/ui-geth/src/components/table/blocks/blockRows.js
+++ b/ui-geth/src/components/table/blocks/blockRows.js
@@ -13,9 +13,7 @@ class BlocksTable extends Component {
async componentDidMount() {
try {
- const response = await axios.get(
- "http://localhost:8080/api/get_all_blocks"
- )
+ const response = await axios.get("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}
/>
})
diff --git a/ui-geth/src/components/table/blocks/blockTable.js b/ui-geth/src/components/table/blocks/blockTable.js
index e0c0f36683..e073ad1ca8 100644
--- a/ui-geth/src/components/table/blocks/blockTable.js
+++ b/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 (
- | {props.Number} |
+ props.detailBlockHandler(props.Number)}>
+ {props.Number}
+ |
{props.Hash} |
{props.Age} |
{props.TxCount} |
diff --git a/ui-geth/src/components/table/blocks/blocksDetailsRow.js b/ui-geth/src/components/table/blocks/blocksDetailsRow.js
new file mode 100644
index 0000000000..74c45681a1
--- /dev/null
+++ b/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 (
+
+
+ | Height: |
+ {data.Number} |
+
+
+ | Age: |
+ {data.Age} |
+
+
+ | Txn: |
+ {data.TxCount} transactions |
+
+
+ | Block Hash: |
+ {data.Hash} |
+
+
+ | Parent Hash: |
+ {data.ParentHash} |
+
+
+ | Uncle Hash: |
+ {data.UncleHash} |
+
+
+ | Uncle Count: |
+ {data.UncleCount} |
+
+
+ | Coinbase: |
+ {data.Coinbase} |
+
+
+ | Difficulty: |
+ {data.Difficulty} |
+
+
+ | GasUsed: |
+ {data.GasUsed} |
+
+
+ | Size: |
+ {data.Size}ytes |
+
+
+ | GasUsed: |
+ {data.GasUsed} |
+
+
+ | GasLimit: |
+ {data.GasLimit} |
+
+
+ | Nonce: |
+ {data.Nonce} |
+
+
+ | Reward: |
+ TBD |
+
+
+ );
+ }
+}
+export default DetailBlockTable;
diff --git a/ui-geth/src/components/table/transactions/transactionDetailsRow.js b/ui-geth/src/components/table/transactions/transactionDetailsRow.js
new file mode 100644
index 0000000000..a4d51fccb0
--- /dev/null
+++ b/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 (
+
+
+ | TxHash: |
+ {data.TxHash} |
+
+
+ | Age: |
+ {data.Age} |
+
+
+ | Txn: |
+ {data.TxCount} transactions |
+
+
+ | Block Hash: |
+ {data.Hash} |
+
+
+ | Parent Hash: |
+ {data.ParentHash} |
+
+
+ | Uncle Hash: |
+ {data.UncleHash} |
+
+
+ | Uncle Count: |
+ {data.UncleCount} |
+
+
+ | Coinbase: |
+ {data.Coinbase} |
+
+
+ | Difficulty: |
+ {data.Difficulty} |
+
+
+ | GasUsed: |
+ {data.GasUsed} |
+
+
+ | Size: |
+ {data.Size}ytes |
+
+
+ | GasUsed: |
+ {data.GasUsed} |
+
+
+ | GasLimit: |
+ {data.GasLimit} |
+
+
+ | Nonce: |
+ {data.Nonce} |
+
+
+ | Reward: |
+ TBD |
+
+
+ );
+ }
+}
+export default DetailTransactionTable;
diff --git a/ui-geth/src/components/table/transactions/transactionRow.js b/ui-geth/src/components/table/transactions/transactionRow.js
index 616ca80ded..abde6e9bef 100644
--- a/ui-geth/src/components/table/transactions/transactionRow.js
+++ b/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"
- )
- console.log(response.data)
+ "http://localhost:8080/api/get_all_transactions")
await this.setState({data: response.data});
} catch (err) {
console.log(err);
diff --git a/ui-geth/src/components/table/transactions/transactionTable.js b/ui-geth/src/components/table/transactions/transactionTable.js
index e1a713b06c..f8fb0d1713 100644
--- a/ui-geth/src/components/table/transactions/transactionTable.js
+++ b/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 (
- | {props.txHash} |
+
+ props.detailTransactionHandler(props.txHash)}>
+ {props.txHash}
+ |
{props.blockNumber} |
30 secs ago |
{props.from} |
diff --git a/ui-geth/src/containers/App.js b/ui-geth/src/containers/App.js
index 3ef12e88af..6029f37e68 100644
--- a/ui-geth/src/containers/App.js
+++ b/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 BlockHeader from "../components/nav/blockHeader";
+import DetailBlockHeader from '../components/table/blocks/blocksDetailsRow';
+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 (
@@ -31,14 +54,32 @@ class App extends Component {
-
+
}
/>
-
+
-
+
+
}
+ />
+
+
+
+
+
+
}
+ />
+
+
+
+
+
}
/>