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

changed a few UI components

Browse source
This commit is contained in:
Dustin Brickwood 2018-05-22 17:29:29 -04:00
parent 076b975878
commit 8e6ff5f621
14 changed files with 122 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
shyftBlockExplorerUI/public/index.html
View file

@ -21,7 +21,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Block Explorer</title>
</head> </head>
<body> <body>
<noscript> <noscript>

67
shyftBlockExplorerUI/src/components/UI materials/loading.css Normal file
View file

@ -0,0 +1,67 @@
.Loader,
.Loader:before,
.Loader:after {
border-radius: 50%;
}
.Loader {
color: #521751;
font-size: 11px;
text-indent: -99999em;
margin: 55px auto;
position: relative;
width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.Loader:before,
.Loader:after {
position: absolute;
content: '';
}
.Loader:before {
width: 5.2em;
height: 10.2em;
background: #fff;
border-radius: 10.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
-webkit-transform-origin: 5.2em 5.1em;
transform-origin: 5.2em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
.Loader:after {
width: 5.2em;
height: 10.2em;
background: #fff;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 5.1em;
-webkit-transform-origin: 0px 5.1em;
transform-origin: 0px 5.1em;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

8
shyftBlockExplorerUI/src/components/UI materials/loading.js Normal file
View file

@ -0,0 +1,8 @@
import React from 'react';
import classes from './loading.css';
const loading = () => (
<div className={classes.Loader}>Loading...</div>
);
export default loading;

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

@ -10,6 +10,8 @@
} }
.Greeting { .Greeting {
padding-top: 5%;
padding-bottom: 5%;
display: block; display: block;
} }

2
shyftBlockExplorerUI/src/components/home/home.js
View file

@ -9,7 +9,7 @@ const home = props => {
return ( return (
<div className={classes.Home}> <div className={classes.Home}>
<span className={classes.Greeting}>THIS IS A WIP</span> <span className={classes.Greeting}>THIS IS A WIP</span>
<div className={classes.ButtonNav}> <div>
<div className={classes.Transactions}> <div className={classes.Transactions}>
<Link to="/transactions"><button className="btn btn-primary">Transactions</button></Link> <Link to="/transactions"><button className="btn btn-primary">Transactions</button></Link>
</div> </div>

17
shyftBlockExplorerUI/src/components/table/accounts/accountRows.js
View file

@ -21,15 +21,26 @@ class AccountTable extends Component {
} }
render() { render() {
const table = this.state.data.map((data, i) => {
let startNum = 1;
const sorted = [...this.state.data];
sorted.sort((a, b) => a.Balance > b.Balance);
const table = sorted.reverse().map((data, i) => {
const conversion = data.Balance / 1000000000000000000;
const total = sorted
.map(num => num.Balance / 1000000000000000000)
.reduce((acc, cur) => acc + cur ,0);
const percentage = ( (conversion / total) *100);
return <AccountsTable return <AccountsTable
key={`${data.addr}${i}`} key={`${data.addr}${i}`}
Rank={startNum++}
Percentage={percentage.toFixed(2)}
Addr={data.Addr} Addr={data.Addr}
Balance={data.Balance} Balance={conversion}
TxCountAccount={data.TxCountAccount} TxCountAccount={data.TxCountAccount}
detailAccountHandler={this.props.detailAccountHandler} detailAccountHandler={this.props.detailAccountHandler}
/> />
}) });
let combinedClasses = ['responsive-table', classes.table]; let combinedClasses = ['responsive-table', classes.table];
return ( return (

4
shyftBlockExplorerUI/src/components/table/accounts/accountsTable.js
View file

@ -6,12 +6,12 @@ const AccountsTable = (props) => {
return ( return (
<tbody> <tbody>
<tr> <tr>
<td>1</td> <td>{props.Rank}</td>
<td className={classes.addressTag}><Link to="/account/detail" onClick={() => props.detailAccountHandler(props.Addr)}> <td className={classes.addressTag}><Link to="/account/detail" onClick={() => props.detailAccountHandler(props.Addr)}>
{props.Addr} {props.Addr}
</Link></td> </Link></td>
<td>{props.Balance}</td> <td>{props.Balance}</td>
<td>12.01%</td> <td>{props.Percentage}%</td>
<td>{props.TxCountAccount}</td> <td>{props.TxCountAccount}</td>
</tr> </tr>
</tbody> </tbody>

8
shyftBlockExplorerUI/src/components/table/accounts/detailAccountsTable.js
View file

@ -9,11 +9,17 @@ const DetailAccountsTable = (props) => {
}else { }else {
flag = false flag = false
} }
let genFlag;
if(props.txHash.indexOf("GENESIS") !== -1) {
genFlag = false
}else {
genFlag = true
}
return ( return (
<tbody> <tbody>
<tr> <tr>
<td className={classes.addressTag}> <td className={classes.addressTag}>
<Link to="/transaction/details" onClick={() => props.detailTransactionHandler(props.txHash)}> <Link to="/transaction/details" className={genFlag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}>
{props.txHash}</Link> {props.txHash}</Link>
</td> </td>
<td>{props.blockNumber}</td> <td>{props.blockNumber}</td>

5
shyftBlockExplorerUI/src/components/table/accounts/table.css
View file

@ -78,3 +78,8 @@ th {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
.disabled {
pointer-events: none;
color: black;
}

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

@ -1,5 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import BlockTable from './blockTable'; import BlockTable from './blockTable';
import Loading from '../../UI materials/loading'
import classes from './table.css'; import classes from './table.css';
import axios from "axios/index"; import axios from "axios/index";
@ -35,7 +36,7 @@ class BlocksTable extends Component {
TxCount={data.TxCount} TxCount={data.TxCount}
detailBlockHandler={this.props.detailBlockHandler} detailBlockHandler={this.props.detailBlockHandler}
/> />
}) });
let combinedClasses = ['responsive-table', classes.table]; let combinedClasses = ['responsive-table', classes.table];
return ( return (
@ -54,7 +55,7 @@ class BlocksTable extends Component {
<th scope="col">Reward</th> <th scope="col">Reward</th>
</tr> </tr>
</thead> </thead>
{table} {table}
</table> </table>
); );
} }

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

@ -16,8 +16,8 @@ const BlockTable = (props) => {
<td className={classes.addressTag}>{props.Coinbase}</td> <td className={classes.addressTag}>{props.Coinbase}</td>
<td>{props.GasUsed}</td> <td>{props.GasUsed}</td>
<td>{props.GasLimit}</td> <td>{props.GasLimit}</td>
<td>12.01</td> <td>TBD</td>
<td>3.2</td> <td>TBD</td>
</tr> </tr>
</tbody> </tbody>
) )

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

@ -35,6 +35,7 @@ class TransactionTable extends Component {
value={data.Amount} value={data.Amount}
cost={data.Cost} cost={data.Cost}
detailTransactionHandler={this.props.detailTransactionHandler} detailTransactionHandler={this.props.detailTransactionHandler}
detailAccountHandler={this.props.detailAccountHandler}
/> />
}) })

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

@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'
const TransactionTable = (props) => { const TransactionTable = (props) => {
let flag; let flag;
if(props.txHash.indexOf("GENESIS") != -1) { if(props.txHash.indexOf("GENESIS") !== -1) {
flag = false flag = false
}else { }else {
flag = true flag = true
@ -20,9 +20,9 @@ const TransactionTable = (props) => {
</td> </td>
<td>{props.blockNumber}</td> <td>{props.blockNumber}</td>
<td>{props.age}</td> <td>{props.age}</td>
<td className={classes.fromTag}>{props.from}</td> <td className={flag ? classes.fromTag : classes.disabled }><Link to="/account/detail" onClick={() => props.detailAccountHandler(props.from)}>{props.from}</Link></td>
<td><img className={classes.arrow} src={arrow} alt="arrow"/></td> <td><img className={classes.arrow} src={arrow} alt="arrow"/></td>
<td className={classes.toTag}>{props.to}</td> <td className={classes.toTag}><Link to="/account/detail" onClick={() => props.detailAccountHandler(props.to)}>{props.to}</Link></td>
<td>{props.value}</td> <td>{props.value}</td>
<td>{props.cost}</td> <td>{props.cost}</td>
</tr> </tr>

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

@ -43,7 +43,7 @@ class App extends Component {
catch(error) { catch(error) {
console.log(error) console.log(error)
} }
} };
detailTransactionHandler = async(txHash) => { detailTransactionHandler = async(txHash) => {
try { try {
@ -53,7 +53,7 @@ class App extends Component {
catch(error) { catch(error) {
console.log(error) console.log(error)
} }
} };
detailAccountHandler = async(addr) => { detailAccountHandler = async(addr) => {
try { try {
@ -63,7 +63,7 @@ class App extends Component {
catch(error) { catch(error) {
console.log(error) console.log(error)
} }
} };
render() { render() {
return ( return (
@ -78,7 +78,9 @@ class App extends Component {
<Route path="/transactions" render={({match}) => <Route path="/transactions" render={({match}) =>
<div> <div>
<TransactionHeader /> <TransactionHeader />
<TransactionRow detailTransactionHandler={this.detailTransactionHandler}/> <TransactionRow
detailTransactionHandler={this.detailTransactionHandler}
detailAccountHandler={this.detailAccountHandler}/>
</div>} </div>}
/> />