From 7eb16ceaf1fc2cd227c759edd62b806dad419169 Mon Sep 17 00:00:00 2001
From: Dustin Brickwood <dustinbrickwood204@gmail.com>
Date: Tue, 21 Aug 2018 14:42:50 -0400
Subject: [PATCH] added addr table

---
 .../table/accounts/accountsTable.js           |  5 +---
 .../table/accounts/detailAccountsRow.js       | 24 +++++++----------
 .../table/accounts/detailAccountsTable.js     | 18 ++++++-------
 .../src/components/table/accounts/table.css   | 26 +++++++++++++++++++
 shyftBlockExplorerUI/src/containers/App.js    | 11 +++-----
 5 files changed, 50 insertions(+), 34 deletions(-)

diff --git a/shyftBlockExplorerUI/src/components/table/accounts/accountsTable.js b/shyftBlockExplorerUI/src/components/table/accounts/accountsTable.js
index 910bc0918e..a273875d80 100644
--- a/shyftBlockExplorerUI/src/components/table/accounts/accountsTable.js
+++ b/shyftBlockExplorerUI/src/components/table/accounts/accountsTable.js
@@ -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>
diff --git a/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsRow.js b/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsRow.js
index 22f7655aca..84a814e173 100644
--- a/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsRow.js
+++ b/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsRow.js
@@ -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}
diff --git a/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsTable.js b/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsTable.js
index 7017b444b5..d8ee77b005 100644
--- a/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsTable.js
+++ b/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsTable.js
@@ -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>
     )
diff --git a/shyftBlockExplorerUI/src/components/table/accounts/table.css b/shyftBlockExplorerUI/src/components/table/accounts/table.css
index cfe347bdd1..5f7c847b1f 100644
--- a/shyftBlockExplorerUI/src/components/table/accounts/table.css
+++ b/shyftBlockExplorerUI/src/components/table/accounts/table.css
@@ -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;
+}
+
diff --git a/shyftBlockExplorerUI/src/containers/App.js b/shyftBlockExplorerUI/src/containers/App.js
index 224f3a3dab..e75db4b580 100644
--- a/shyftBlockExplorerUI/src/containers/App.js
+++ b/shyftBlockExplorerUI/src/containers/App.js
@@ -107,7 +107,6 @@ class App extends Component {
 
     getBlockData = (data, page) => {
         let components = [];
-        console.log("ACCOUNT DATA", data)   
         let dataEntry;
         
         if(page === "account") {
@@ -117,8 +116,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">
@@ -224,8 +225,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>}
@@ -243,8 +242,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}