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.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Block Explorer</title>
</head>
<body>
<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 {
padding-top: 5%;
padding-bottom: 5%;
display: block;
}

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

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

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

@ -21,15 +21,26 @@ class AccountTable extends Component {
}
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
key={`${data.addr}${i}`}
Rank={startNum++}
Percentage={percentage.toFixed(2)}
Addr={data.Addr}
Balance={data.Balance}
Balance={conversion}
TxCountAccount={data.TxCountAccount}
detailAccountHandler={this.props.detailAccountHandler}
/>
})
});
let combinedClasses = ['responsive-table', classes.table];
return (

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

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

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

@ -9,11 +9,17 @@ const DetailAccountsTable = (props) => {
}else {
flag = false
}
let genFlag;
if(props.txHash.indexOf("GENESIS") !== -1) {
genFlag = false
}else {
genFlag = true
}
return (
<tbody>
<tr>
<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>
</td>
<td>{props.blockNumber}</td>

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

@ -78,3 +78,8 @@ th {
text-align: center;
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 BlockTable from './blockTable';
import Loading from '../../UI materials/loading'
import classes from './table.css';
import axios from "axios/index";
@ -35,7 +36,7 @@ class BlocksTable extends Component {
TxCount={data.TxCount}
detailBlockHandler={this.props.detailBlockHandler}
/>
})
});
let combinedClasses = ['responsive-table', classes.table];
return (
@ -54,7 +55,7 @@ class BlocksTable extends Component {
<th scope="col">Reward</th>
</tr>
</thead>
{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>{props.GasUsed}</td>
<td>{props.GasLimit}</td>
<td>12.01</td>
<td>3.2</td>
<td>TBD</td>
<td>TBD</td>
</tr>
</tbody>
)

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

@ -35,6 +35,7 @@ class TransactionTable extends Component {
value={data.Amount}
cost={data.Cost}
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) => {
let flag;
if(props.txHash.indexOf("GENESIS") != -1) {
if(props.txHash.indexOf("GENESIS") !== -1) {
flag = false
}else {
flag = true
@ -20,9 +20,9 @@ const TransactionTable = (props) => {
</td>
<td>{props.blockNumber}</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 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.cost}</td>
</tr>

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

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