Add Contract Tx List Item; Update Token Tx on select

4 files changed, 32 insertions, 22 deletions

diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js
index d7fe168eb..b4a249300 100644
--- a/ui/app/components/token-balance.js
+++ b/ui/app/components/token-balance.js
@@ -77,13 +77,15 @@ TokenBalance.prototype.createFreshTokenTracker = function () {
 TokenBalance.prototype.componentDidUpdate = function (nextProps) {
   const {
     userAddress: oldAddress,
+    token: { address: oldTokenAddress },
   } = this.props
   const {
     userAddress: newAddress,
+    token: { address: newTokenAddress },
   } = nextProps
 
-  if (!oldAddress || !newAddress) return
-  if (oldAddress === newAddress) return
+  if ((!oldAddress || !newAddress) && (!oldTokenAddress || !newTokenAddress)) return
+  if ((oldAddress === newAddress) && (oldTokenAddress === newTokenAddress)) return
 
   this.setState({ isLoading: true })
   this.createFreshTokenTracker()
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index e3ed734f4..a6fe8fc61 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -42,7 +42,7 @@ TokenCell.prototype.render = function () {
 
   return (
     h('div.token-list-item', {
-      className: `token-list-item ${selectedTokenAddress ? 'token-list-item--active' : ''}`,
+      className: `token-list-item ${selectedTokenAddress === address ? 'token-list-item--active' : ''}`,
       // style: { cursor: network === '1' ? 'pointer' : 'default' },
       // onClick: this.view.bind(this, address, userAddress, network),
       onClick: () => setSelectedToken(address),
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 524808e2e..04d2eaa79 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -20,14 +20,9 @@ function TxList () {
   Component.call(this)
 }
 
-const contentDivider = h('div.tx-list-content-divider', {
-  style: {},
-})
-
 TxList.prototype.render = function () {
 
-  const { txsToRender } = this.props
-  console.log('transactions to render', txsToRender)
+  // console.log('transactions to render', txsToRender)
 
   return h('div.flex-column.tx-list-container', {}, [
 
@@ -46,15 +41,31 @@ TxList.prototype.render = function () {
 
     ]),
 
-    contentDivider,
-
-    txsToRender.map((transaction) => {
-      return this.renderTransactionListItem(transaction)
-    }),
+    this.renderTranstions(),
 
   ])
 }
 
+TxList.prototype.getAddressText = function (transaction) {
+  const {
+    txParams: { to },
+  } = transaction
+
+  return to
+    ? `${to.slice(0, 10)}...${to.slice(-4)}`
+    : 'Contract Published'
+}
+
+TxList.prototype.renderTranstions = function () {
+  const { txsToRender } = this.props
+
+  return txsToRender.length
+    ? txsToRender.map((transaction) => {
+      return this.renderTransactionListItem(transaction)
+    })
+    : h('div.tx-list-item.tx-list-item--empty', [ 'No Transactions' ])
+}
+
 // TODO: Consider moving TxListItem into a separate component
 TxList.prototype.renderTransactionListItem = function (transaction) {
   const props = {
@@ -70,12 +81,10 @@ TxList.prototype.renderTransactionListItem = function (transaction) {
     dateString,
   } = props
 
-  if (!address) return null
-
-  return h('div', {
+  return h('div.tx-list-item', {
     key: transaction.id,
   }, [
-    h('div.flex-column.tx-list-item-wrapper', {
+    h('div.flex-column.tx-list-item__wrapper', {
       style: {},
     }, [
 
@@ -105,7 +114,7 @@ TxList.prototype.renderTransactionListItem = function (transaction) {
             style: {},
           }, [
             h('span.tx-list-account', {}, [
-              `${address.slice(0, 10)}...${address.slice(-4)}`,
+              this.getAddressText(transaction),
             ]),
           ]),
 
@@ -134,7 +143,6 @@ TxList.prototype.renderTransactionListItem = function (transaction) {
 
       ]),
     ]),
-    contentDivider,
 
   ])
 }
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 08c28f1dc..b306fb7d4 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -64,11 +64,11 @@ WalletView.prototype.renderWalletBalance = function () {
 WalletView.prototype.render = function () {
   const {
     network, responsiveDisplayClassname, identities,
-    selectedAddress, selectedAccount, accounts,
+    selectedAddress, accounts,
     selectedIdentity,
   } = this.props
   // temporary logs + fake extra wallets
-  console.log('walletview, selectedAccount:', selectedAccount)
+  // console.log('walletview, selectedAccount:', selectedAccount)
 
   return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
     style: {},