Add token exchange rates

2 files changed, 31 insertions, 4 deletions

diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js
index 2b59ace4a..d777f0aea 100644
--- a/ui/app/components/send/currency-toggle.js
+++ b/ui/app/components/send/currency-toggle.js
@@ -12,11 +12,11 @@ function CurrencyToggle () {
 
 const defaultCurrencies = [ 'ETH', 'USD' ]
 
-CurrencyToggle.prototype.render = function () {
+CurrencyToggle.prototype.renderToggles = function () {
   const { onClick, currentCurrency } = this.props
   const [currencyA, currencyB] = this.props.currencies || defaultCurrencies
 
-  return h('span.currency-toggle', {}, [
+  return [
     h('span', {
       className: classnames('currency-toggle__item', {
         'currency-toggle__item--selected': currencyA === currentCurrency,
@@ -30,6 +30,15 @@ CurrencyToggle.prototype.render = function () {
       }),
       onClick: () => onClick(currencyB),
     }, [ currencyB ]),
-  ]) // holding on icon from design
+  ]
+}
+
+CurrencyToggle.prototype.render = function () {
+  const currencies = this.props.currencies || defaultCurrencies
+
+  return h('span.currency-toggle', currencies.length
+    ? this.renderToggles()
+    : []
+  )
 }
 
diff --git a/ui/app/components/send/gas-fee-display.js b/ui/app/components/send/gas-fee-display.js
index 5336be8a3..979062882 100644
--- a/ui/app/components/send/gas-fee-display.js
+++ b/ui/app/components/send/gas-fee-display.js
@@ -3,6 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const USDFeeDisplay = require('./usd-fee-display')
 const EthFeeDisplay = require('./eth-fee-display')
+const { getTxFeeBn, formatBalance, shortenBalance } = require('../../util')
 
 module.exports = GasFeeDisplay
 
@@ -11,6 +12,20 @@ function GasFeeDisplay () {
   Component.call(this)
 }
 
+GasFeeDisplay.prototype.getTokenValue = function () {
+  const {
+    tokenExchangeRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  const value = formatBalance(getTxFeeBn(gas, gasPrice, blockGasLimit), 6, true)
+  const [ethNumber] = value.split(' ')
+
+  return shortenBalance(Number(ethNumber) / tokenExchangeRate, 6)
+}
+
 GasFeeDisplay.prototype.render = function () {
   const {
     currentCurrency,
@@ -38,7 +53,10 @@ GasFeeDisplay.prototype.render = function () {
         blockGasLimit,
       })
     default:
-      return h('noscript');
+      return h('div.token-gas', [
+        h('div.token-gas__amount', this.getTokenValue()),
+        h('div.token-gas__symbol', currentCurrency),
+      ])
   }
 }