Add Contract Tx List Item; Update Token Tx on select

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) && (!oldTokenAddress || !newTokenAddress)) return
-  if (oldAddress === newAddress) return
+  if ((oldAddress === newAddress) && (oldTokenAddress === newTokenAddress)) return
 
   this.setState({ isLoading: true })
   this.createFreshTokenTracker()

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),

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,
+    this.renderTranstions(),
-
-    txsToRender.map((transaction) => {
-      return this.renderTransactionListItem(transaction)
-    }),
 
   ])
 }
 
+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.tx-list-item', {
-
-  return h('div', {
     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,
 
   ])
 }

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: {},

ui/app/css/itcss/components/newui-sections.scss

@@ -6,13 +6,6 @@
 $tx-view-bg: $white;
 $wallet-view-bg: $wild-sand;
 
-html {
-
-  @media screen and (max-width: 575px) {
-    height: 500px;
-  }
-}
-
 // Main container
 .main-container {
   position: absolute;

ui/app/css/itcss/components/token-list.scss

@@ -10,6 +10,23 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   transition: linear 200ms;
   background-color: rgba($wallet-balance-bg, 0);
 
+  &__token-balance {
+    font-size: 130%;
+
+    @media #{$wallet-balance-breakpoint-range} {
+      font-size: 105%;
+    }
+  }
+
+  &__fiat-amount {
+    margin-top: .25%;
+    font-size: 105%;
+
+    @media #{$wallet-balance-breakpoint-range} {
+      font-size: 95%;
+    }
+  }
+
   @media #{$wallet-balance-breakpoint-range} {
     padding: 10% 4%;
   }
@@ -21,14 +38,9 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   &__identicon {
     margin-right: 15px;
     border: '1px solid #dedede';
-  }
 
-  &__token-balance {
+    @media #{$wallet-balance-breakpoint-range} {
-    font-size: 130%;
+      margin-right: 4%;
     }
-
-  &__fiat-amount {
-    margin-top: .25%;
-    font-size: 105%;
   }
 }

ui/app/css/itcss/components/transaction-list.scss

@@ -61,14 +61,6 @@
   flex: 0 0 70px;
   align-items: stretch;
   justify-content: flex-start;
-
-  @media screen and (max-width: $break-small) {
-    margin: 0 1.3em .95em;
-  }
-
-  @media screen and (min-width: $break-large) {
-    margin: 0 2.37em;
-  }
 }
 
 .tx-list-date-wrapper {
@@ -93,11 +85,13 @@
 .tx-list-date {
   color: $dusty-gray;
   font-size: 12px;
+  font-family: "Montserrat UltraLight";
 }
 
 .tx-list-identicon-wrapper {
   align-self: center;
-  flex: 0.5 1 auto;
+  flex: 0 0 auto;
+  margin-right: 16px;
 }
 
 .tx-list-account-and-status-wrapper {
@@ -118,6 +112,7 @@
 
     .tx-list-account-wrapper {
       flex: 1.3 2 auto;
+      min-width: 153px;
     }
 
     .tx-list-status-wrapper {
@@ -137,7 +132,23 @@
   }
 }
 
-.tx-list-details-wrapper {
+.tx-list-item {
+  border-top: 1px solid rgb(231, 231, 231);
+
+  @media screen and (max-width: $break-small) {
+    margin: 0 1.3em .95em;
+  }
+
+  @media screen and (min-width: $break-large) {
+    margin: 0 2.37em;
+  }
+
+  &:last-of-type {
+    border-bottom: 1px solid rgb(231, 231, 231);
+    margin-bottom: 32px;
+  }
+
+  &__wrapper {
     align-self: center;
     flex: 2 2 auto;
     color: $dusty-gray;
@@ -151,4 +162,11 @@
       font-size: 12px;
       text-align: right;
     }
+  }
+
+  &--empty {
+    text-align: center;
+    border-bottom: none !important;
+    padding: 16px;
+  }
 }

ui/app/selectors.js

@@ -45,11 +45,16 @@ function conversionRateSelector (state) {
 }
 
 function transactionsSelector (state) {
-  const { network } = state.metamask
+  const { network, selectedTokenAddress } = state.metamask
   const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs)
   const shapeShiftTxList = (network === '1') ? state.metamask.shapeShiftTxList : undefined
   const transactions = state.metamask.selectedAddressTxList || []
   const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList)
 
-  return txsToRender.sort((a, b) => b.time - a.time)
+  return selectedTokenAddress
+    ? txsToRender
+      .filter(({ to }) => to === selectedTokenAddress)
+      .sort((a, b) => b.time - a.time)
+    : txsToRender
+      .sort((a, b) => b.time - a.time)
 }