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

accounts overlay fixed

Browse source
This commit is contained in:
Chris Fenos 2018-08-21 12:15:42 -04:00
parent ff2c27f125
commit ffbaa8b20f
7 changed files with 52 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
shyftBlockExplorerUI/public/index.html
View file

@ -36,6 +36,11 @@
border: 1px solid #ccc;
background-color: white;
}
html {
background-color: #f7f8f9;
}
</style>
</head>

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

@ -7,7 +7,7 @@ class navBar extends React.Component {
constructor(props) {
super(props);
this.state = {
active: "blocks"
active: ""
};
}

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

@ -3,11 +3,14 @@ import classes from './accounts.css';
import { Link } from 'react-router-dom'
const AccountsTable = (props) => {
console.log(props);
return (
<tbody>
<tr style={{ borderTop: '1px solid #e0defb' }}>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.Rank}</td>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.addressTag}><Link style={{ color: '#8f67c9' }} to="/account/detail" onClick={() => props.detailAccountHandler(props.Addr)}>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.addressTag}><Link style={{ color: '#8f67c9' }} to="/account" onClick={() => props.detailAccountHandler(props.Addr)}>
{props.Addr}
</Link></td>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.Balance}</td>

7
shyftBlockExplorerUI/src/components/table/accounts/detailAccountsRow.js
View file

@ -4,12 +4,19 @@ import ErrorHandler from "./errorMessage";
import classes from './table.css';
class AccountTransactionTable extends Component {
render() {
console.log("inr");
let table;
if(this.props.data.length <= 1) {
return <ErrorHandler />
}else {
table = this.props.data.map((data, i) => {
console.log("DATA FROM MAP [AccountTransactionTable]", data)
const costConversion = data.Cost / 10000000000000000000;
const amountConversion = data.Amount / 10000000000000000000;
return <DetailAccountsTable

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

@ -2,7 +2,7 @@ import React from 'react';
import classes from './table.css';
import { Link } from 'react-router-dom'
const DetailAccountsTable = (props) => {
const DetailAccountsTable = (props) => {
let flag;
if(props.addr === props.to) {
flag = true

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

@ -15,7 +15,7 @@ const TransactionTable = (props) => {
<tbody>
<tr style={{ borderTop: '1px solid #e0defb' }}>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.addressTag}>
<Link to="/transaction/details" style={{ color: '#8f67c9' }} className={flag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}>
<Link to="/transactions" style={{ color: '#8f67c9' }} className={flag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}>
{props.txHash}</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>

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

@ -63,7 +63,7 @@ class App extends Component {
detailTransactionHandler = async(txHash) => {
try {
const response = await axios.get(`http://localhost:8080/api/get_transaction/${txHash}`);
await this.setState({ transactionDetailData: response.data })
await this.setState({ transactionDetailData: response.data, overlayTriggered: true, overlayContent: "transaction" })
}
catch(error) {
console.log(error)
@ -71,9 +71,12 @@ class App extends Component {
};
detailAccountHandler = async(addr) => {
console.log("[DETAIL ACCOUNT Handler]");
try {
const response = await axios.get(`http://localhost:8080/api/get_account_txs/${addr}`)
await this.setState({ accountDetailData: response.data, reqAccount: addr })
await this.setState({ accountDetailData: response.data, reqAccount: addr, overlayTriggered: true, overlayContent: "account" })
}
catch(error) {
console.log(error)
@ -104,33 +107,31 @@ class App extends Component {
this.setState({overlayTriggered: false})
};
getBlockData = (data) => {
let components = [];
for (let key in data) {
let value =data[key]
console.log(key, value)
getBlockData = (data, page) => {
let components = [];
console.log("ACCOUNT DATA", data)
let dataEntry;
if(page === "account") {
dataEntry = data[0];
} else {
dataEntry = data;
}
for (let key in dataEntry) {
let value = dataEntry[key]
// console.log(key, value)
components.push(
<Grid>
<Row className="show-grid">
<Col xs={3} md={3} style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}>
<Col xs={3} md={3} style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}>
{key}
</Col>
<Col xs={9} md={9} style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}>
<Col xs={9} md={9} style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}>
{value}
</Col>
</Row>
</Grid>
// <li style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}>
// <font>{key}: </font>
// <font style={{marginLeft: '30pt'}} > {value} </font>
// </li>
// <div style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}} >
// <div>{key}: </div> <div style={{left: '2%'}}>{value} </div>
// </div>
);
}
@ -149,47 +150,46 @@ class App extends Component {
title = "BLOCK OVERVIEW";
data = this.state.blockDetailData;
break;
case "transaction" :
title = "TRANSACTION OVERVIEW";
data = this.state.transactionDetailData;
break;
case "account" :
title = "ACCOUNT OVERVIEW";
data = this.state.accountDetailData;
break;
default: console.log("error");
}
return (
<div className="static-modal">
<Modal.Dialog>
<Modal.Header>
<Modal.Title style={{color: '#593c83', fontSize: '8pt', letterSpacing: '2pt', fontFamily: 'Open Sans, sans-serif' }}> {title} </Modal.Title>
</Modal.Header>
<Modal.Body>
<ul>
{this.getBlockData(data)}
{this.getBlockData(data, page)}
</ul>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.hideOverlay}>Close</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
);
};
render() {
return (
<BrowserRouter>
<div>
{
this.state.overlayTriggered ? this.renderOverlay() : null
}
<div style={ this.state.overlayTriggered ? {backgroundColor:"#f7f8f9", paddingBottom:"5%", opacity:0.5, zIndex: -10000} : {backgroundColor:"#f7f8f9", paddingBottom:"5%" } }>
<div style={ this.state.overlayTriggered ? {backgroundColor:"#f7f8f9", paddingBottom:"5%", opacity:0.5, zIndex: -10000, height: '100%'} : {backgroundColor:"#f7f8f9", paddingBottom:"5%", height: '100%' } }>
<Nav />
<Route path="/" exact render={({ match }) =>
@ -269,9 +269,9 @@ class App extends Component {
<Route path="/account/detail" exact render={({match}) =>
<div>
<AccountDetailHeader
{/* <AccountDetailHeader
addr={this.state.reqAccount}
data={this.state.accountDetailData}/>
data={this.state.accountDetailData}/> */}
<DetailAccountsTable
transactionDetailHandler={this.detailTransactionHandler}
addr={this.state.reqAccount}