Merge branch 'refactor/stylesAccount' of github.com:ShyftNetwork/go-empyrean into refactor/stylesBlockExplorer

This commit is contained in:
Chris Fenos 2018-08-21 14:43:55 -04:00
commit 081a7421e4
5 changed files with 50 additions and 34 deletions

View file

@ -3,14 +3,11 @@ 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" onClick={() => props.detailAccountHandler(props.Addr)}>
<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)}>
{props.Addr}
</Link></td>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} >{props.Balance}</td>

View file

@ -7,16 +7,12 @@ class AccountTransactionTable extends Component {
render() {
console.log("inr");
console.log(this.props);
let table;
if(this.props.data.length <= 1) {
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
@ -39,14 +35,14 @@ class AccountTransactionTable extends Component {
<table key={this.props.data.TxHash} className={combinedClasses.join(' ')}>
<thead className={classes.tHead}>
<tr>
<th scope="col">TxHash</th>
<th scope="col">Block</th>
<th scope="col">Age</th>
<th scope="col">From</th>
<th scope="col"></th>
<th scope="col">To</th>
<th scope="col">Value</th>
<th scope="col">TxFee</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>TxHash</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Block</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Age</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>From</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}> </th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>To</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Value</th>
<th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>TxFee</th>
</tr>
</thead>
{table}

View file

@ -17,18 +17,18 @@ const DetailAccountsTable = (props) => {
}
return (
<tbody>
<tr>
<td className={classes.addressTag}>
<Link to="/transaction/details" className={genFlag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}>
<tr style={{ borderTop: '1px solid #e0defb' }}>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.addressTag}>
<Link to="/block/transactions" className={genFlag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}>
{props.txHash}</Link>
</td>
<td>{props.blockNumber}</td>
<td>{props.age}</td>
<td className={classes.fromTag}>{props.from}</td>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.blockNumber}</td>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.age}</td>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.fromTag}>{props.from}</td>
<td><div className={ flag ? classes.incoming : classes.out }>{ flag ? "IN" : "OUT" }</div></td>
<td>{props.to}</td>
<td>{props.value}</td>
<td>{props.cost}</td>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.to}</td>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.value}</td>
<td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.cost}</td>
</tr>
</tbody>
)

View file

@ -24,3 +24,29 @@ td {
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;
}

View file

@ -130,7 +130,6 @@ class App extends Component {
getBlockData = (data, page) => {
let components = [];
console.log("ACCOUNT DATA", data)
let dataEntry;
if(page === "account") {
@ -140,8 +139,10 @@ class App extends Component {
}
for (let key in dataEntry) {
let value = dataEntry[key]
// console.log(key, value)
let value = dataEntry[key];
if (dataEntry["To"] === null) {
delete dataEntry["To"]
}
components.push(
<Grid>
<Row className="show-grid">
@ -255,8 +256,6 @@ class App extends Component {
<Route path="/transaction/details" exact render={({match}) =>
<div>
<TransactionDetailHeader
txHash={this.state.transactionDetailData.TxHash}/>
<DetailTransactionTable
data={this.state.transactionDetailData}/>
</div>}
@ -274,8 +273,6 @@ class App extends Component {
<Route path="/block/transactions" exact render={({match}) =>
<div>
<BlockDetailHeader
blockNumber={this.state.reqBlockNum}/>
<BlockTxs
data={this.state.blockTransactions}
getBlockTransactions={this.getBlockTransactions}