detail looks for blocks completed

This commit is contained in:
Dustin Brickwood 2018-05-15 17:07:21 -04:00
parent 38dfd729f0
commit 7368ea7cd0
12 changed files with 271 additions and 25 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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