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

Table scaling issue resolved, internal tx size fixed, txHash detailed transaction data issue fixed, inline styles removed for tables

Browse source
This commit is contained in:
Chris Fenos 2018-08-22 13:24:29 -04:00
parent f77a50b4e1
commit 9035fc1a9f
12 changed files with 204 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,18 +1,20 @@
import React from 'react'; import React from 'react';
import classes from './accounts.css'; import classes from './table.css';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
const AccountsTable = (props) => { const AccountsTable = (props) => {
return ( return (
<tbody> <tbody>
<tr style={{ borderTop: '1px solid #e0defb' }}> <tr className={classes.border}>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.Rank}</td> <td className={classes.tdItem}>{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 className={classes.tdItem}>
<Link className={classes.tdLink} to="/account/detail" onClick={() => props.detailAccountHandler(props.Addr)}>
{props.Addr} {props.Addr}
</Link></td> </Link>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.Balance}</td> </td>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.Percentage}%</td> <td className={classes.tdItem}> {props.Balance} </td>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.AccountNonce}</td> <td className={classes.tdItem}> {props.Percentage}% </td>
<td className={classes.tdItem}> {props.AccountNonce} </td>
</tr> </tr>
</tbody> </tbody>
) )

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

@ -1,52 +1,49 @@
.table { .table {
border-spacing: 100rem;
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
background-color: white; background-color: white;
top: 107pt; top: 107pt;
left: 2.5%; left: 2.5%;
position: absolute; position: absolute;
table-layout:fixed;
} }
th { th {
background-color: aliceblue; background-color: white;
padding-right: 10px; padding: 15pt 30pt ;
color: #593c83;
font-family: 'Open Sans', sans-serif;
}
.thItem {
font-size: 8pt;
background-color: white;
color: #4f2e7e;
} }
td { td {
font-size: 6pt; font-size: 6pt;
background-color: white; background-color: white;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
text-overflow: ellipsis;
overflow: hidden;
}
.tdItem {
padding-left: 30pt;
padding-bottom: 7.5pt;
padding-top: 7.5pt;
}
.tdLink {
color: #8f67c9;
}
.border {
border-top: 1px solid #e0defb;
} }
.disabled { .disabled {
pointer-events: none; pointer-events: none;
color: black; color: black;
} }
.incoming {
height: 25px;
width: 35px;
border: 1px forestgreen;
border-radius: 5px;
background-color: #4f2e7e;
color: white;
font-size: 1rem;
text-transform: uppercase;
text-align: center;
vertical-align: middle;
}
.out {
height: 25px;
width: 35px;
border: 1px orangered;
border-radius: 5px;
background-color: orangered;
color: white;
font-size: .8rem;
text-transform: uppercase;
text-align: center;
vertical-align: middle;
}

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

@ -45,18 +45,18 @@ class BlocksTable extends Component {
<div> <div>
<table className={combinedClasses.join(' ')}> <table className={combinedClasses.join(' ')}>
<thead> <thead>
<tr> <tr>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Height</th> <th scope="col" className={classes.thItem}> Height </th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Block Hash</th> <th scope="col" className={classes.thItem}> Block Hash </th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Age</th> <th scope="col" className={classes.thItem}> Age </th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Txn</th> <th scope="col" className={classes.thItem}> Txn </th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Uncles</th> <th scope="col" className={classes.thItem}> Uncles </th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Coinbase</th> <th scope="col" className={classes.thItem}> Coinbase </th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>GasUsed</th> <th scope="col" className={classes.thItem}> GasUsed </th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>GasLimit</th> <th scope="col" className={classes.thItem}> GasLimit </th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Avg.GasPrice</th> <th scope="col" className={classes.thItem}> Avg.GasPrice </th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Reward</th> <th scope="col" className={classes.thItem}> Reward </th>
</tr> </tr>
</thead> </thead>
{table} {table}
</table> </table>

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

@ -5,17 +5,23 @@ import { Link } from 'react-router-dom'
const BlockTable = (props) => { const BlockTable = (props) => {
return ( return (
<tbody> <tbody>
<tr style={{ borderTop: '1px solid #e0defb' }}> <tr className={classes.border}>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.height} ><Link to="/blocks" style={{ color: '#8f67c9' }} onClick={() => props.detailBlockHandler(props.Number)}> <td className={classes.tdItem}>
{props.Number} <Link to="/blocks" style={{ color: '#8f67c9' }} onClick={() => props.detailBlockHandler(props.Number)}>
</Link></td> {props.Number}
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.hash}>{props.Hash}</td> </Link>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.AgeGet}</td> </td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.TxCount}</td> <td className={classes.tdItem}> {props.Hash} </td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.UncleCount}</td> <td className={classes.tdItem}> {props.AgeGet} </td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.addressTag}><Link to="/mined/blocks" style={{ color: '#8f67c9' }} onClick={() => props.getBlocksMined(props.Coinbase)}>{props.Coinbase}</Link></td> <td className={classes.tdItem}> {props.TxCount} </td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.GasUsed}</td> <td className={classes.tdItem}> {props.UncleCount} </td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.GasLimit}</td> <td className={classes.tdItem}>
<Link to="/mined/blocks" style={{ color: '#8f67c9' }} onClick={() => props.getBlocksMined(props.Coinbase)}>
{props.Coinbase}
</Link>
</td>
<td className={classes.tdItem}> {props.GasUsed} </td>
<td className={classes.tdItem}> {props.GasLimit} </td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>TBD</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>TBD</td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.Reward}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.Reward}</td>
</tr> </tr>

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

@ -1,11 +1,11 @@
.table { .table {
border-spacing: 100rem;
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
background-color: white; background-color: white;
top: 107pt; top: 107pt;
left: 2.5%; left: 2.5%;
position: absolute; position: absolute;
table-layout:fixed;
} }
th { th {
@ -15,8 +15,35 @@ th {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} }
.thItem {
font-size: 8pt;
background-color: white;
color: #4f2e7e;
}
td { td {
font-size: 6pt; font-size: 6pt;
background-color: white; background-color: white;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
text-overflow: ellipsis;
overflow: hidden;
}
.tdItem {
padding-left: 30pt;
padding-bottom: 7.5pt;
padding-top: 7.5pt;
}
.tdLink {
color: #8f67c9;
}
.border {
border-top: 1px solid #e0defb;
}
.disabled {
pointer-events: none;
color: black;
} }

25
shyftBlockExplorerUI/src/components/table/internalTransactions/internalRow.js
View file

@ -13,9 +13,6 @@ class InternalTransactionsTable extends Component {
} }
async componentDidMount() { async componentDidMount() {
console.log("in table row component");
try { try {
const response = await axios.get("http://localhost:8080/api/get_internal_transactions/"); const response = await axios.get("http://localhost:8080/api/get_internal_transactions/");
await this.setState({data: response.data}); await this.setState({data: response.data});
@ -50,17 +47,17 @@ class InternalTransactionsTable extends Component {
<table className={combinedClasses.join(' ')}> <table className={combinedClasses.join(' ')}>
<thead> <thead>
<tr> <tr>
<th scope="col" className={classes.blockHash} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >Block Hash</th> <th scope="col" className={classes.thItem}> Block Hash </th>
<th scope="col" className={classes.action} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >Action</th> <th scope="col" className={classes.thItem}> Action </th>
<th scope="col" className={classes.to} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >To</th> <th scope="col" className={classes.thItem}> To </th>
<th scope="col" className={classes.from} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >From</th> <th scope="col" className={classes.thItem}> From </th>
<th scope="col" className={classes.gas} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >Gas</th> <th scope="col" className={classes.thItem}> Gas </th>
<th scope="col" className={classes.gasUsed} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >Gas Used</th> <th scope="col" className={classes.thItem}> Gas Used</th>
<th scope="col" className={classes.id} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>ID</th> <th scope="col" className={classes.thItem}> ID </th>
<th scope="col" className={classes.input} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>Input</th> <th scope="col" className={classes.thItem}> Input </th>
<th scope="col" className={classes.output} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>Output</th> <th scope="col" className={classes.thItem}> Output </th>
<th scope="col" className={classes.time} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>Time</th> <th scope="col" className={classes.thItem}> Time </th>
<th scope="col" className={classes.value} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>Value</th> <th scope="col" className={classes.thItem}> Value </th>
</tr> </tr>
</thead> </thead>
{table} {table}

34
shyftBlockExplorerUI/src/components/table/internalTransactions/internalTable.js
View file

@ -6,28 +6,28 @@ import Button from 'react-bootstrap/lib/Button';
const InternalTable = (props) => { const InternalTable = (props) => {
return ( return (
<tbody> <tbody>
<tr style={{ borderTop: '1px solid #e0defb' }}> <tr className={classes.border}>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} > <td className={classes.tdItem}>
<div style={{ color: '#8f67c9' }} onClick={() => props.detailInternalHandler(props.Hash)}> <div className={classes.tdLink} onClick={() => props.detailInternalHandler(props.Hash)}>
{props.Hash} {props.Hash}
</div> </div>
</td> </td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.Action}</td> <td className={classes.tdItem}>{props.Action}</td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.To}</td> <td className={classes.tdItem}>{props.To}</td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.From}</td> <td className={classes.tdItem}>{props.From}</td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.Gas}</td> <td className={classes.tdItem}>{props.Gas}</td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.GasUsed}></td> <td className={classes.tdItem}> {props.GasUsed} </td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.ID}</td> <td className={classes.tdItem}>{props.ID}</td>
<td style={{paddingLeft: '18pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}> <td className={classes.tdItem}>
<Button style={{color: '#8f67c9'}} bsStyle="link" bsSize="small" onClick={()=>alert( props.Input )}> Show Input </Button> <div className={classes.tdLink} onClick={()=>alert( props.Input )}> Show Input
<input type="hidden" id={"input" + props.Hash} value={props.Input} /> </div>
</td> </td>
<td style={{paddingLeft: '18pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}> <td className={classes.tdItem}>
<Button style={{color: '#8f67c9'}} bsStyle="link" bsSize="small" onClick={()=>alert(props.Output)}> Show Output </Button> <div className={classes.tdLink} onClick={()=>alert(props.Output)}> Show Output
<input type="hidden" id={"output" + props.Hash} value={props.Output} /> </div>
</td> </td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.Time}</td> <td className={classes.tdItem}>{props.Time}</td>
<td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.Value}</td> <td className={classes.tdItem}>{props.Value}</td>
<input type="hidden" id={"input" + props.Hash} value={props.Input} />
<input type="hidden" id={"output" + props.Hash} value={props.Output} />
</tr> </tr>
</tbody> </tbody>
) )

24
shyftBlockExplorerUI/src/components/table/internalTransactions/table.css
View file

@ -1,11 +1,11 @@
.table { .table {
border-spacing: 100rem;
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
background-color: white; background-color: white;
top: 107pt; top: 107pt;
left: 2.5%; left: 2.5%;
position: absolute; position: absolute;
table-layout:fixed;
} }
th { th {
@ -15,10 +15,32 @@ th {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} }
.thItem {
font-size: 8pt;
background-color: white;
color: #4f2e7e;
}
td { td {
font-size: 6pt; font-size: 6pt;
background-color: white; background-color: white;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
text-overflow: ellipsis;
overflow: hidden;
}
.tdItem {
padding-left: 30pt;
padding-bottom: 7.5pt;
padding-top: 7.5pt;
}
.tdLink {
color: #8f67c9;
}
.border {
border-top: 1px solid #e0defb;
} }
.disabled { .disabled {

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

@ -1,14 +1,13 @@
.table { .table {
border-spacing: 100rem;
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
background-color: white; background-color: white;
top: 107pt; top: 107pt;
left: 2.5%; left: 2.5%;
position: absolute; position: absolute;
table-layout:fixed;
} }
th { th {
background-color: white; background-color: white;
padding: 15pt 30pt ; padding: 15pt 30pt ;
@ -16,10 +15,32 @@ th {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} }
.thItem {
font-size: 8pt;
background-color: white;
color: #4f2e7e;
}
td { td {
font-size: 6pt; font-size: 6pt;
background-color: white; background-color: white;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
text-overflow: ellipsis;
overflow: hidden;
}
.tdItem {
padding-left: 30pt;
padding-bottom: 7.5pt;
padding-top: 7.5pt;
}
.tdLink {
color: #8f67c9;
}
.border {
border-top: 1px solid #e0defb;
} }
.disabled { .disabled {

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

@ -45,13 +45,13 @@ class TransactionTable extends Component {
<table key={this.state.data.TxHash} className={combinedClasses.join(' ')}> <table key={this.state.data.TxHash} className={combinedClasses.join(' ')}>
<thead> <thead>
<tr> <tr>
<th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>TxHash</th> <th scope="col" className={classes.thItem}> TxHash </th>
<th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Block</th> <th scope="col" className={classes.thItem}> Block </th>
<th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Age</th> <th scope="col" className={classes.thItem}> Age </th>
<th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>From</th> <th scope="col" className={classes.thItem}> From </th>
<th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>To</th> <th scope="col" className={classes.thItem}> To </th>
<th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Value</th> <th scope="col" className={classes.thItem}> Value </th>
<th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >TxFee</th> <th scope="col" className={classes.thItem}> TxFee </th>
</tr> </tr>
</thead> </thead>
{table} {table}

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

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import classes from './table.css'; import classes from './table.css';
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) => {
@ -16,17 +15,30 @@ const TransactionTable = (props) => {
return ( return (
<tbody> <tbody>
<tr style={{ borderTop: '1px solid #e0defb' }}> <tr className={classes.border}>
<td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'}} className={classes.addressTag}> <td className={classes.tdItem}>
<Link to="/transactions" 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> {props.txHash}
</Link>
</td> </td>
<td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}><Link style={{ color: '#8f67c9' }} to="/block/transactions" onClick={() => props.getBlockTransactions(props.blockNumber)}>{props.blockNumber}</Link></td> <td className={classes.tdItem}>
<td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.age}</td> <Link style={{ color: '#8f67c9' }} to="/block/transactions" onClick={() => props.getBlockTransactions(props.blockNumber)}>
<td style={{ paddingLeft: '15pt', 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> {props.blockNumber}
<td style={{ paddingLeft: '15pt', 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> </Link>
<td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.value}</td> </td>
<td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.cost}</td> <td className={classes.tdItem}>{props.age}</td>
<td className={[flag ? classes.fromTag : classes.disabled, classes.tdItem ]}>
<Link style={{ color: '#8f67c9' }} to="/account/detail" onClick={() => props.detailAccountHandler(props.from)}>
{props.from}
</Link>
</td>
<td className={classes.tdItem}>
<Link style={{ color: '#8f67c9' }} to="/account/detail" onClick={() => props.detailAccountHandler(props.to)}>
{props.to}
</Link>
</td>
<td className={classes.tdItem}> {props.value} </td>
<td className={classes.tdItem}> {props.cost} </td>
</tr> </tr>
</tbody> </tbody>
) )

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

@ -147,7 +147,7 @@ class App extends Component {
if (dataEntry["To"] === null) { if (dataEntry["To"] === null) {
delete dataEntry["To"] delete dataEntry["To"]
} }
if( key === "Input" || key === "Output") { if( key === "Input" || key === "Output" || key === "Data") {
components.push( components.push(
<Grid> <Grid>
<Row className="show-grid"> <Row className="show-grid">
@ -179,12 +179,10 @@ class App extends Component {
} }
renderOverlay = () => { renderOverlay = () => {
const page = this.state.overlayContent; const page = this.state.overlayContent;
let data, title; let data, title;
let keys = []; let keys = [];
let values = []; let values = [];
switch (page) { switch (page) {
case "block" : case "block" :
title = "BLOCK OVERVIEW"; title = "BLOCK OVERVIEW";
@ -204,7 +202,6 @@ class App extends Component {
break; break;
default: console.log("error"); default: console.log("error");
} }
return ( return (
<div className="static-modal"> <div className="static-modal">
<Modal.Dialog> <Modal.Dialog>
@ -233,11 +230,11 @@ class App extends Component {
this.state.overlayTriggered ? this.renderOverlay() : null this.state.overlayTriggered ? this.renderOverlay() : null
} }
<div style={ this.state.overlayTriggered ? {backgroundColor:"#f7f8f9", paddingBottom:"5%", opacity:0.5, zIndex: -10000, height: '100%'} : {backgroundColor:"#f7f8f9", paddingBottom:"5%", height: '100%' } }> <div style={ this.state.overlayTriggered ? {backgroundColor:"#f7f8f9", paddingBottom:"5%", opacity:0.5, zIndex: -10000, height: '100%', width: '100%'} : {backgroundColor:"#f7f8f9", paddingBottom:"5%", height: '100%', width: '100%' } }>
<Nav /> <Nav />
<Route path="/" exact render={({ match }) => <Route path="/" exact render={({ match }) =>
<Home/> <Home style={{width: '100%'}}/>
} }
/> />
@ -323,9 +320,9 @@ class App extends Component {
data={this.state.accountDetailData}/> data={this.state.accountDetailData}/>
</div>} </div>}
/> />
</div>
</div> </div>
</div> </BrowserRouter>
</BrowserRouter>
); );
} }
} }