Update yarn.lock; Fix tx-list-item overflow; Fix gas exchange rate

4 files changed, 111 insertions, 28 deletions

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 99769e4e6..6eb2fb2b2 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -48,7 +48,7 @@ function mapDispatchToProps (dispatch) {
   return {
     setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('USD')),
     backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
-    cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id }))
+    cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
   }
 }
 
@@ -77,28 +77,55 @@ PendingTx.prototype.getTotal = function () {
   const amountBn = name === '_value'
     ? value
     : txParams.value
-  
-  const USD = conversionUtil(amountBn, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-    fromCurrency: 'ETH',
-    toCurrency: 'USD',
-    numberOfDecimals: 2,
-    conversionRate,
-  })
-  const ETH = conversionUtil(amountBn, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-    fromCurrency: 'ETH',
-    toCurrency: 'ETH',
-    conversionRate,
-    numberOfDecimals: 6,
-  })
 
-  return {
-    USD,
-    ETH,
+  if (name === '_value') {
+    const token = util.getContractAtAddress(txParams.to)
+    token.symbol().then(symbol => console.log({symbol}))
+    console.log({txParams, txMeta, decodedData, token})
+    const USD = conversionUtil(amountBn, {
+      fromNumericBase: 'hex',
+      toNumericBase: 'dec',
+      fromCurrency: 'ETH',
+      toCurrency: 'USD',
+      numberOfDecimals: 2,
+      conversionRate,
+    })
+    const ETH = conversionUtil(amountBn, {
+      fromNumericBase: 'hex',
+      toNumericBase: 'dec',
+      fromCurrency: 'ETH',
+      toCurrency: 'ETH',
+      conversionRate,
+      numberOfDecimals: 6,
+    })
+    return {
+      USD,
+      ETH,
+    }
+  } else {
+    const USD = conversionUtil(amountBn, {
+      fromNumericBase: 'hex',
+      toNumericBase: 'dec',
+      fromCurrency: 'ETH',
+      toCurrency: 'USD',
+      numberOfDecimals: 2,
+      conversionRate,
+    })
+    const ETH = conversionUtil(amountBn, {
+      fromNumericBase: 'hex',
+      toNumericBase: 'dec',
+      fromCurrency: 'ETH',
+      toCurrency: 'ETH',
+      conversionRate,
+      numberOfDecimals: 6,
+    })
+
+    return {
+      USD,
+      ETH,
+    }
   }
+
 }
 
 PendingTx.prototype.getGasFee = function () {
@@ -400,12 +427,11 @@ PendingTx.prototype.getFormEl = function () {
 
 // After a customizable state value has been updated,
 PendingTx.prototype.gatherTxMeta = function () {
-  log.debug(`pending-tx gatherTxMeta`)
   const props = this.props
   const state = this.state
   const txData = clone(state.txData) || clone(props.txData)
 
-  log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
+  // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
   return txData
 }
 
diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js
index 851d463eb..a3332ca9e 100644
--- a/ui/app/components/send-token/index.js
+++ b/ui/app/components/send-token/index.js
@@ -292,7 +292,7 @@ SendTokenScreen.prototype.renderGasInput = function () {
         conversionRate,
         tokenExchangeRate,
         gasPrice,
-        currentCurrency: selectedCurrency,
+        activeCurrency: selectedCurrency,
         gas: gasLimit,
         blockGasLimit: currentBlockGasLimit,
       }),
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index 50bdb3cd5..589d18b72 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -39,7 +39,7 @@
   }
 
   .tx-list-container::-webkit-scrollbar {
-    display: none; 
+    display: none;
   }
 }
 
@@ -58,9 +58,12 @@
 }
 
 .tx-list-item-wrapper {
-  flex: 0 0 70px;
+  flex: 1 1 auto;
+  width: 0;
   align-items: stretch;
   justify-content: flex-start;
+  display: flex;
+  flex-flow: column nowrap;
 
   @media screen and (max-width: $break-small) {
     padding: 0 1.3em .95em;
@@ -76,6 +79,10 @@
 
   &:hover {
     background: rgba($alto, .2);
+
+    .tx-list-details-wrapper {
+      background: transparent;
+    }
   }
 }
 
@@ -101,6 +108,30 @@
   align-items: stretch;
   margin-bottom: 4px;
   margin-top: 2px;
+  flex: 1 0 auto;
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+
+  @media screen and (max-width: $break-small) {
+    font-size: 12px;
+
+    .tx-list-status {
+      font-size: 12px !important;
+    }
+
+    .tx-list-account {
+      font-size: 14px !important;
+    }
+
+    .tx-list-value {
+      font-size: 14px;
+    }
+
+    .tx-list-fiat-value {
+      font-size: 12px;
+    }
+  }
 }
 
 .tx-list-date {
@@ -117,7 +148,8 @@
 
 .tx-list-account-and-status-wrapper {
   display: flex;
-  flex: 8 8 auto;
+  flex: 1 1 auto;
+  width: 0;
 
   @media screen and (max-width: $break-small) {
     flex-direction: column;
@@ -159,9 +191,12 @@
 
 .tx-list-item {
   border-top: 1px solid rgb(231, 231, 231);
+  flex: 0 0 auto;
+  display: flex;
+  flex-flow: row nowrap;
 
   @media screen and (max-width: $break-small) {
-    margin: 0 1.3em .95em;
+    // margin: 0 1.3em .95em; !important
   }
 
   @media screen and (min-width: $break-large) {
@@ -200,9 +235,25 @@
   }
 }
 
+.tx-list-details-wrapper {
+  overflow: hidden;
+  flex: 0 0 35%;
+  background: rgba($white, .8);
+}
+
 .tx-list-value {
   font-size: 16px;
   text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.tx-list-fiat-value {
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .tx-list-value--confirmed {
diff --git a/ui/app/util.js b/ui/app/util.js
index e058dc92b..6596ebafb 100644
--- a/ui/app/util.js
+++ b/ui/app/util.js
@@ -1,3 +1,4 @@
+const abi = require('human-standard-token-abi')
 const ethUtil = require('ethereumjs-util')
 const hexToBn = require('../../app/scripts/lib/hex-to-bn')
 const vreme = new (require('vreme'))()
@@ -51,6 +52,7 @@ module.exports = {
   bnMultiplyByFraction,
   getTxFeeBn,
   shortenBalance,
+  getContractAtAddress,
 }
 
 function valuesFor (obj) {
@@ -244,3 +246,7 @@ function getTxFeeBn (gas, gasPrice = MIN_GAS_PRICE_BN.toString(16), blockGasLimi
 
   return txFeeBn.toString(16)
 }
+
+function getContractAtAddress (tokenAddress) {
+  return global.eth.contract(abi).at(tokenAddress)
+}