forks/go-ethereum
1
0
Fork 1
mirror of https://github.com/ethereum/go-ethereum.git synced 2026-08-19 10:22:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Block explorer transaction table redesign

Browse source
This commit is contained in:
Chris Fenos 2018-08-18 14:24:27 -04:00
parent 40e3a6a179
commit f2e8c4ec08
10 changed files with 139 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
shyftBlockExplorerUI/src/components/assets/arrow_right_black.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 312 B

2
shyftBlockExplorerUI/src/components/nav/nav.css
View file

@ -1,5 +1,5 @@
.navHeader { .navHeader {
height: 27.5vh; height: 150pt;
background-color: #4f2e7e; background-color: #4f2e7e;
padding-top: 30pt; padding-top: 30pt;
padding-left: 2.5%; padding-left: 2.5%;

1
shyftBlockExplorerUI/src/components/nav/nav.js
View file

@ -36,7 +36,6 @@ class navBar extends React.Component {
<button className={classes.btn}> ACCOUNTS </button> <button className={classes.btn}> ACCOUNTS </button>
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>

2
shyftBlockExplorerUI/src/components/table/blocks/blockRows.js
View file

@ -42,7 +42,7 @@ class BlocksTable extends Component {
let combinedClasses = ['responsive-table', classes.table]; let combinedClasses = ['responsive-table', classes.table];
return ( return (
<div className={classes.tableContainer} > <div>
<table className={combinedClasses.join(' ')}> <table className={combinedClasses.join(' ')}>
<thead> <thead>
<tr> <tr>

4
shyftBlockExplorerUI/src/components/table/blocks/blockTable.js
View file

@ -6,10 +6,10 @@ const BlockTable = (props) => {
return ( return (
<tbody> <tbody>
<tr style={{ borderTop: '1px solid #e0defb' }}> <tr style={{ borderTop: '1px solid #e0defb' }}>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} ><Link to="/blocks/detail" style={{ color: '#8f67c9' }} onClick={() => props.detailBlockHandler(props.Number)}> <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.height} ><Link to="/blocks/detail" style={{ color: '#8f67c9' }} onClick={() => props.detailBlockHandler(props.Number)}>
{props.Number} {props.Number}
</Link></td> </Link></td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.addressTag}>{props.Hash}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.hash}>{props.Hash}</td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.AgeGet}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.AgeGet}</td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.TxCount}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.TxCount}</td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.UncleCount}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.UncleCount}</td>

18
shyftBlockExplorerUI/src/components/table/blocks/table.css
View file

@ -3,9 +3,9 @@
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
background-color: white; background-color: white;
top: 20vh; top: 107pt;
left: 2.5%; left: 2.5%;
position: fixed; position: absolute;
} }
thead { thead {
@ -28,12 +28,24 @@ td {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} }
.height {
width: 50px;
}
.hash {
display: inline-block;
vertical-align: bottom;
text-overflow: ellipsis;
overflow: hidden;
width: 220px;
}
.addressTag { .addressTag {
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
width: 100px; width: 150px;
} }
.ageTag{ .ageTag{

28
shyftBlockExplorerUI/src/components/table/transactions/table.css
View file

@ -1,16 +1,31 @@
.table { .table {
border-spacing: 100rem; border-spacing: 100rem;
width: 100%; width: 95%;
margin-top: 50px; margin: 0 auto;
background-color: white;
top: 107pt;
left: 2.5%;
position: absolute;
} }
.tHead { .tHead {
font-size: 1rem; font-size: 7pt;
background-color: white;
font-family: 'Open Sans', sans-serif;
color: #593c83;
} }
th { th {
background-color: aliceblue; background-color: white;
padding-right: 10px; padding: 15pt 30pt ;
color: #593c83;
font-family: 'Open Sans', sans-serif;
}
td {
font-size: 6pt;
background-color: white;
font-family: 'Open Sans', sans-serif;
} }
.addressTag { .addressTag {
@ -18,7 +33,7 @@ th {
vertical-align: bottom; vertical-align: bottom;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
width: 132px; width: 250px;
} }
.ageTag{ .ageTag{
@ -56,7 +71,6 @@ th {
.arrow { .arrow {
width: 25px; width: 25px;
height: 25px; height: 25px;
margin-left: 15px;
} }
.disabled { .disabled {

19
shyftBlockExplorerUI/src/components/table/transactions/transactionRow.js
View file

@ -21,7 +21,6 @@ class TransactionTable extends Component {
} }
} }
render() { render() {
const table = this.state.data.map((data, i) => { const table = this.state.data.map((data, i) => {
@ -44,16 +43,16 @@ class TransactionTable extends Component {
let combinedClasses = ['responsive-table', classes.table]; let combinedClasses = ['responsive-table', classes.table];
return ( return (
<table key={this.state.data.TxHash} className={combinedClasses.join(' ')}> <table key={this.state.data.TxHash} className={combinedClasses.join(' ')}>
<thead className={classes.tHead}> <thead>
<tr> <tr>
<th scope="col">TxHash</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>TxHash</th>
<th scope="col">Block</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Block</th>
<th scope="col">Age</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Age</th>
<th scope="col">From</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>From</th>
<th scope="col"></th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}></th>
<th scope="col">To</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>To</th>
<th scope="col">Value</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Value</th>
<th scope="col">TxFee</th> <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >TxFee</th>
</tr> </tr>
</thead> </thead>
{table} {table}

22
shyftBlockExplorerUI/src/components/table/transactions/transactionTable.js
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import classes from './table.css'; import classes from './table.css';
import arrow from '../../assets/arrow_right.png'; import arrow from '../../assets/arrow_right_black.png';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
const TransactionTable = (props) => { const TransactionTable = (props) => {
@ -13,18 +13,18 @@ const TransactionTable = (props) => {
return ( return (
<tbody> <tbody>
<tr> <tr style={{ borderTop: '1px solid #e0defb' }}>
<td className={classes.addressTag}> <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.addressTag}>
<Link to="/transaction/details" className={flag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}> <Link to="/transaction/details" style={{ color: '#8f67c9' }} className={flag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}>
{props.txHash}</Link> {props.txHash}</Link>
</td> </td>
<td><Link to="/block/transactions" onClick={() => props.getBlockTransactions(props.blockNumber)}>{props.blockNumber}</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>{props.age}</td> <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.age}</td>
<td className={flag ? classes.fromTag : classes.disabled }><Link to="/account/detail" onClick={() => props.detailAccountHandler(props.from)}>{props.from}</Link></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><img className={classes.arrow} src={arrow} alt="arrow"/></td> <td style={{ paddingLeft: '0pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}><img className={classes.arrow} src={arrow} alt="arrow"/></td>
<td className={classes.toTag}><Link to="/account/detail" onClick={() => props.detailAccountHandler(props.to)}>{props.to}</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>{props.value}</td> <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.value}</td>
<td>{props.cost}</td> <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.cost}</td>
</tr> </tr>
</tbody> </tbody>
) )

162
shyftBlockExplorerUI/src/containers/App.js
View file

@ -97,100 +97,96 @@ class App extends Component {
render() { render() {
return ( return (
<BrowserRouter> <BrowserRouter>
<div style={{backgroundColor:"#f7f8f9", paddingBottom:"5%" }}> <div style={{backgroundColor:"#f7f8f9", paddingBottom:"5%" }}>
{/* <div className={"row"}> */}
<Nav /> <Nav />
{/* </div> */}
<Route path="/" exact render={({ match }) =>
<Route path="/" exact render={({ match }) => <Home/>}
<Home/>} />
/>
<Route path="/transactions" render={({match}) => <Route path="/transactions" render={({match}) =>
<div> <div>
<TransactionHeader /> {/* <TransactionHeader /> */}
<TransactionRow <TransactionRow
getBlockTransactions={this.getBlockTransactions} getBlockTransactions={this.getBlockTransactions}
detailTransactionHandler={this.detailTransactionHandler} detailTransactionHandler={this.detailTransactionHandler}
detailAccountHandler={this.detailAccountHandler}/> detailAccountHandler={this.detailAccountHandler}/>
</div>} </div>}
/> />
<Route path="/blocks" exact render={({match}) => <Route path="/blocks" exact render={({match}) =>
<div> <div>
{/* <BlockHeader/> */} {/* <BlockHeader/> */}
<BlocksRow <BlocksRow
getBlocksMined={this.getBlocksMined} getBlocksMined={this.getBlocksMined}
getBlockTransactions={this.getBlockTransactions} getBlockTransactions={this.getBlockTransactions}
detailBlockHandler={this.detailBlockHandler}/> detailBlockHandler={this.detailBlockHandler}/>
</div>} </div>}
/> />
<Route path="/accounts" exact render={({match}) => <Route path="/accounts" exact render={({match}) =>
<div> <div>
<AccountHeader/> <AccountHeader/>
<AccountsRow detailAccountHandler={this.detailAccountHandler}/> <AccountsRow detailAccountHandler={this.detailAccountHandler}/>
</div>} </div>}
/> />
<Route path="/transaction/details" exact render={({match}) => <Route path="/transaction/details" exact render={({match}) =>
<div> <div>
<TransactionDetailHeader <TransactionDetailHeader
txHash={this.state.transactionDetailData.TxHash}/> txHash={this.state.transactionDetailData.TxHash}/>
<DetailTransactionTable <DetailTransactionTable
data={this.state.transactionDetailData}/> data={this.state.transactionDetailData}/>
</div>} </div>}
/> />
<Route path="/blocks/detail" exact render={({match}) => <Route path="/blocks/detail" exact render={({match}) =>
<div> <div>
<BlockDetailHeader <BlockDetailHeader
blockNumber={this.state.blockDetailData.Number}/> blockNumber={this.state.blockDetailData.Number}/>
<DetailBlockTable <DetailBlockTable
getBlockTransactions={this.getBlockTransactions} getBlockTransactions={this.getBlockTransactions}
data={this.state.blockDetailData}/> data={this.state.blockDetailData}/>
</div>} </div>}
/> />
<Route path="/block/transactions" exact render={({match}) => <Route path="/block/transactions" exact render={({match}) =>
<div> <div>
<BlockDetailHeader <BlockDetailHeader
blockNumber={this.state.reqBlockNum}/> blockNumber={this.state.reqBlockNum}/>
<BlockTxs <BlockTxs
data={this.state.blockTransactions} data={this.state.blockTransactions}
getBlockTransactions={this.getBlockTransactions} getBlockTransactions={this.getBlockTransactions}
detailTransactionHandler={this.detailTransactionHandler} detailTransactionHandler={this.detailTransactionHandler}
detailAccountHandler={this.detailAccountHandler}/> detailAccountHandler={this.detailAccountHandler}/>
</div>} </div>}
/> />
<Route path="/mined/blocks" exact render={({match}) => <Route path="/mined/blocks" exact render={({match}) =>
<div> <div>
<BlockCoinbaseHeader <BlockCoinbaseHeader
coinbase={this.state.reqCoinbase}/> coinbase={this.state.reqCoinbase}/>
<BlocksMinedTable <BlocksMinedTable
getBlockTransactions={this.getBlockTransactions} getBlockTransactions={this.getBlockTransactions}
getBlocksMined={this.getBlocksMined} getBlocksMined={this.getBlocksMined}
data={this.state.blocksMined}/> data={this.state.blocksMined}/>
</div>} </div>}
/> />
<Route path="/account/detail" exact render={({match}) => <Route path="/account/detail" exact render={({match}) =>
<div> <div>
<AccountDetailHeader <AccountDetailHeader
addr={this.state.reqAccount} addr={this.state.reqAccount}
data={this.state.accountDetailData}/> data={this.state.accountDetailData}/>
<DetailAccountsTable <DetailAccountsTable
transactionDetailHandler={this.detailTransactionHandler} transactionDetailHandler={this.detailTransactionHandler}
addr={this.state.reqAccount} addr={this.state.reqAccount}
data={this.state.accountDetailData}/> data={this.state.accountDetailData}/>
</div>} </div>}
/> />
</div> </div>
</BrowserRouter> </BrowserRouter>
); );