Merge branch 'develop' of github.com:MetaMask/metamask-extension into initial-trezor-support

3 files changed, 42 insertions, 31 deletions

diff --git a/ui/app/components/send/currency-display/currency-display.js b/ui/app/components/send/currency-display/currency-display.js
index 1b9f7738c..2b8eaa41f 100644
--- a/ui/app/components/send/currency-display/currency-display.js
+++ b/ui/app/components/send/currency-display/currency-display.js
@@ -6,6 +6,11 @@ const { removeLeadingZeroes } = require('../send.utils')
 const currencyFormatter = require('currency-formatter')
 const currencies = require('currency-formatter/currencies')
 const ethUtil = require('ethereumjs-util')
+const PropTypes = require('prop-types')
+
+CurrencyDisplay.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = CurrencyDisplay
 
@@ -75,6 +80,12 @@ CurrencyDisplay.prototype.getValueToRender = function ({ selectedToken, conversi
 CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValue) {
   const { primaryCurrency, convertedCurrency, conversionRate } = this.props
 
+  if (conversionRate === 0 || conversionRate === null || conversionRate === undefined) {
+    if (nonFormattedValue !== 0) {
+      return null
+    }
+  }
+
   let convertedValue = conversionUtil(nonFormattedValue, {
     fromNumericBase: 'dec',
     fromCurrency: primaryCurrency,
@@ -82,16 +93,15 @@ CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValu
     numberOfDecimals: 2,
     conversionRate,
   })
-  convertedValue = Number(convertedValue).toFixed(2)
 
+  convertedValue = Number(convertedValue).toFixed(2)
   const upperCaseCurrencyCode = convertedCurrency.toUpperCase()
-
   return currencies.find(currency => currency.code === upperCaseCurrencyCode)
     ? currencyFormatter.format(Number(convertedValue), {
       code: upperCaseCurrencyCode,
     })
-    : convertedValue
-}
+      : convertedValue
+  }
 
 CurrencyDisplay.prototype.handleChange = function (newVal) {
   this.setState({ valueToRender: removeLeadingZeroes(newVal) })
@@ -105,13 +115,24 @@ CurrencyDisplay.prototype.getInputWidth = function (valueToRender, readOnly) {
   return (valueLength + decimalPointDeficit + 0.75) + 'ch'
 }
 
+CurrencyDisplay.prototype.onlyRenderConversions = function (convertedValueToRender) {
+  const {
+    convertedBalanceClassName = 'currency-display__converted-value',
+    convertedCurrency,
+  } = this.props
+    return h('div', {
+    className: convertedBalanceClassName,
+    }, convertedValueToRender == null
+      ? this.context.t('noConversionRateAvailable')
+      : `${convertedValueToRender} ${convertedCurrency.toUpperCase()}`
+)
+  }
+
 CurrencyDisplay.prototype.render = function () {
   const {
     className = 'currency-display',
     primaryBalanceClassName = 'currency-display__input',
-    convertedBalanceClassName = 'currency-display__converted-value',
     primaryCurrency,
-    convertedCurrency,
     readOnly = false,
     inError = false,
     onBlur,
@@ -157,11 +178,7 @@ CurrencyDisplay.prototype.render = function () {
 
       ]),
 
-    ]),
-
-    h('div', {
-      className: convertedBalanceClassName,
-    }, `${convertedValueToRender} ${convertedCurrency.toUpperCase()}`),
+    ]), this.onlyRenderConversions(convertedValueToRender),
 
   ])
 
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index e539514ec..0d693b805 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -307,20 +307,16 @@ TxListItem.prototype.render = function () {
         ]),
       ]),
 
-      this.showRetryButton() && h('div.tx-list-item-retry-container', [
-
-        h('span.tx-list-item-retry-copy', 'Taking too long?'),
-
-        h('span.tx-list-item-retry-link', {
-          onClick: (event) => {
-            event.stopPropagation()
-            if (isTokenTx) {
-              this.setSelectedToken(txParams.to)
-            }
-            this.resubmit()
-          },
-        }, 'Increase the gas price on your transaction'),
-
+      this.showRetryButton() && h('.tx-list-item-retry-container', {
+        onClick: (event) => {
+          event.stopPropagation()
+          if (isTokenTx) {
+            this.setSelectedToken(txParams.to)
+          }
+          this.resubmit()
+        },
+      }, [
+        h('span', 'Taking too long? Increase the gas price on your transaction'),
       ]),
 
     ]), // holding on icon from design
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index d03faf486..1d45ff13b 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -129,12 +129,14 @@
 .tx-list-item-retry-container {
   background: #d1edff;
   width: 100%;
-  border-radius: 4px;
-  font-size: 0.8em;
+  border-radius: 12px;
+  font-size: .75rem;
   display: flex;
   justify-content: center;
   margin-left: 44px;
   width: calc(100% - 44px);
+  padding: 4px;
+  cursor: pointer;
 
   @media screen and (min-width: 576px) and (max-width: 679px) {
     flex-flow: column;
@@ -151,10 +153,6 @@
   }
 }
 
-.tx-list-item-retry-copy {
-  font-family: Roboto;
-}
-
 .tx-list-item-retry-link {
   text-decoration: underline;
   margin-left: 6px;