Merge branch 'NewUI-flat' into uat

11 files changed, 74 insertions, 62 deletions

diff --git a/ui/app/add-token.js b/ui/app/add-token.js
index 90edc8de1..e313babf3 100644
--- a/ui/app/add-token.js
+++ b/ui/app/add-token.js
@@ -7,7 +7,9 @@ const Fuse = require('fuse.js')
 const contractMap = require('eth-contract-metadata')
 const TokenBalance = require('./components/token-balance')
 const Identicon = require('./components/identicon')
-const contractList = Object.entries(contractMap).map(([ _, tokenData]) => tokenData)
+const contractList = Object.entries(contractMap)
+  .map(([ _, tokenData]) => tokenData)
+  .filter(tokenData => Boolean(tokenData.erc20))
 const fuse = new Fuse(contractList, {
     shouldSort: true,
     threshold: 0.45,
@@ -105,6 +107,7 @@ AddTokenScreen.prototype.tokenAddressDidChange = function (e) {
 }
 
 AddTokenScreen.prototype.checkExistingAddresses = function (address) {
+  if (!address) return false
   const tokensList = this.props.tokens
   const matchesAddress = existingToken => {
     return existingToken.address.toLowerCase() === address.toLowerCase()
diff --git a/ui/app/app.js b/ui/app/app.js
index cf82248e4..ae38fad7f 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -137,8 +137,7 @@ App.prototype.render = function () {
 
       h(AccountMenu),
 
-      h(Loading, {
-        isLoading: isLoading || isLoadingNetwork,
+      (isLoading || isLoadingNetwork) && h(Loading, {
         loadingMessage: loadMessage,
       }),
 
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index 6cf6e9eb9..a36f41df5 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -87,7 +87,7 @@ BuyButtonSubview.prototype.headerSubview = function () {
           left: '49vw',
         },
       }, [
-        h(Loading, { isLoading }),
+        isLoading && h(Loading),
       ]),
 
       // account panel
diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js
index 163792584..e6d841aa0 100644
--- a/ui/app/components/loading.js
+++ b/ui/app/components/loading.js
@@ -1,45 +1,38 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
+const { Component } = require('react')
 const h = require('react-hyperscript')
 
-
-inherits(LoadingIndicator, Component)
-module.exports = LoadingIndicator
-
-function LoadingIndicator () {
-  Component.call(this)
-}
-
-LoadingIndicator.prototype.render = function () {
-  const { isLoading, loadingMessage } = this.props
-
-  return (
-    isLoading ? h('.full-flex-height', {
-      style: {
-        left: '0px',
-        zIndex: 10,
-        position: 'absolute',
-        flexDirection: 'column',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100%',
-        width: '100%',
-        background: 'rgba(255, 255, 255, 0.8)',
-      },
-    }, [
-      h('img', {
-        src: 'images/loading.svg',
-      }),
-
-      h('br'),
-
-      showMessageIfAny(loadingMessage),
-    ]) : null
-  )
+class LoadingIndicator extends Component {
+  renderMessage () {
+    const { loadingMessage } = this.props
+    return loadingMessage && h('span', loadingMessage)
+  }
+
+  render () {
+    return (
+      h('.full-flex-height', {
+        style: {
+          left: '0px',
+          zIndex: 50,
+          position: 'absolute',
+          flexDirection: 'column',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+          width: '100%',
+          background: 'rgba(255, 255, 255, 0.8)',
+        },
+      }, [
+        h('img', {
+          src: 'images/loading.svg',
+        }),
+
+        h('br'),
+
+        this.renderMessage(),
+      ])
+    )
+  }
 }
 
-function showMessageIfAny (loadingMessage) {
-  if (!loadingMessage) return null
-  return h('span', loadingMessage)
-}
+module.exports = LoadingIndicator
diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js
index d19cec755..a0ba94045 100644
--- a/ui/app/components/pending-tx/confirm-deploy-contract.js
+++ b/ui/app/components/pending-tx/confirm-deploy-contract.js
@@ -195,14 +195,16 @@ ConfirmDeployContract.prototype.getGasFee = function () {
     eth: Number(ETH),
   }
 }
+
 ConfirmDeployContract.prototype.renderGasFee = function () {
+  const { currentCurrency } = this.props
   const { fiat: fiatGas, eth: ethGas } = this.getGasFee()
 
   return (
     h('section.flex-row.flex-center.confirm-screen-row', [
       h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]),
       h('div.confirm-screen-section-column', [
-        h('div.confirm-screen-row-info', `${fiatGas} FIAT`),
+        h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`),
 
         h(
           'div.confirm-screen-row-detail',
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 51c36ba42..7162c7122 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -241,7 +241,7 @@ ConfirmSendEther.prototype.render = function () {
         //   `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
         // ]),
 
-        h('h3.flex-center.confirm-screen-send-amount', [`$${amountInFIAT}`]),
+        h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]),
         h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
         h('div.flex-center.confirm-memo-wrapper', [
           h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 42b676954..a4c3d16e3 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -36,6 +36,7 @@ function mapStateToProps (state, ownProps) {
   const {
     conversionRate,
     identities,
+    currentCurrency,
   } = state.metamask
   const accounts = state.metamask.accounts
   const selectedAddress = getSelectedAddress(state)
@@ -47,6 +48,7 @@ function mapStateToProps (state, ownProps) {
     selectedAddress,
     tokenExchangeRate,
     tokenData: tokenData || {},
+    currentCurrency: currentCurrency.toUpperCase(),
   }
 }
 
@@ -83,7 +85,9 @@ ConfirmSendToken.prototype.getAmount = function () {
     fiat: tokenExchangeRate
       ? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2)
       : null,
-    token: +sendTokenAmount.toFixed(decimals),
+    token: typeof value === 'undefined'
+      ? 'Unknown'
+      : +sendTokenAmount.toFixed(decimals),
   }
 
 }
@@ -101,7 +105,7 @@ ConfirmSendToken.prototype.getGasFee = function () {
     multiplierBase: 16,
   })
 
-  const FIAT = conversionUtil(txFeeBn, {
+  const FIAT = conversionUtil(gasTotal, {
     fromNumericBase: 'BN',
     toNumericBase: 'dec',
     fromDenomination: 'WEI',
@@ -211,8 +215,6 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
   const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
   const { fiat: fiatGas, token: tokenGas } = this.getGasFee()
 
-  const tokenTotal = addCurrencies(tokenAmount, tokenGas || '0')
-
   return fiatAmount && fiatGas
     ? (
       h('section.flex-row.flex-center.confirm-screen-total-box ', [
@@ -223,7 +225,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
 
         h('div.confirm-screen-section-column', [
           h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency}`),
-          h('div.confirm-screen-row-detail', `${tokenAmount + tokenGas} ${symbol}`),
+          h('div.confirm-screen-row-detail', `${addCurrencies(tokenAmount, tokenGas || '0')} ${symbol}`),
         ]),
       ])
     )
@@ -319,7 +321,7 @@ ConfirmSendToken.prototype.render = function () {
             ]),
           ]),
 
-          h('section.flex-row.flex-center.confirm-screen-row', [
+          toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
             h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]),
             h('div.confirm-screen-section-column', [
               h('div.confirm-screen-row-info', toName),
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 2c9a2d33b..7180b94d3 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -36,6 +36,16 @@ function toHexWei (value) {
   })
 }
 
+CurrencyDisplay.prototype.getAmount = function (value) {
+  const { selectedToken } = this.props
+  const { decimals } = selectedToken || {}
+  const multiplier = Math.pow(10, Number(decimals || 0))
+  const sendAmount = '0x' + Number(value * multiplier).toString(16)
+  return selectedToken
+    ? sendAmount
+    : toHexWei(value)
+}
+
 CurrencyDisplay.prototype.render = function () {
   const {
     className = 'currency-display',
@@ -102,7 +112,7 @@ CurrencyDisplay.prototype.render = function () {
               this.setState({ value: newValue })
             }
           },
-          onBlur: event => !readOnly && handleChange(toHexWei(event.target.value.split(' ')[0])),
+          onBlur: event => !readOnly && handleChange(this.getAmount(event.target.value.split(' ')[0])),
           onKeyUp: event => {
             if (!readOnly) {
               validate(toHexWei(value || initValueToRender))
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index ad431df69..6bb42204e 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -13,6 +13,7 @@ const TokenMenuDropdown = require('./dropdowns/token-menu-dropdown.js')
 function mapStateToProps (state) {
   return {
     network: state.metamask.network,
+    currentCurrency: state.metamask.currentCurrency,
     selectedTokenAddress: state.metamask.selectedTokenAddress,
     userAddress: selectors.getSelectedAddress(state),
     tokenExchangeRates: state.metamask.tokenExchangeRates,
@@ -63,18 +64,19 @@ TokenCell.prototype.render = function () {
     ethToUSDRate,
     hideSidebar,
     sidebarOpen,
+    currentCurrency,
     // userAddress,
   } = props
   
   const pair = `${symbol.toLowerCase()}_eth`;
 
   let currentTokenToEthRate;
-  let currentTokenInUSD;
+  let currentTokenInFiat;
   let formattedUSD = ''
 
   if (tokenExchangeRates[pair]) {
     currentTokenToEthRate = tokenExchangeRates[pair].rate;
-    currentTokenInUSD = conversionUtil(string, {
+    currentTokenInFiat = conversionUtil(string, {
       fromNumericBase: 'dec',
       fromCurrency: symbol,
       toCurrency: 'USD',
@@ -82,7 +84,7 @@ TokenCell.prototype.render = function () {
       conversionRate: currentTokenToEthRate,
       ethToUSDRate,
     })
-    formattedUSD = `$${currentTokenInUSD} USD`;
+    formattedUSD = `${currentTokenInFiat} ${currentCurrency.toUpperCase()}`;
   }
  
   return (
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index f201010fc..dfa6f88c4 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -84,7 +84,7 @@ ConfirmTxScreen.prototype.render = function () {
   */
 
   log.info(`rendering a combined ${unconfTxList.length} unconf msg & txs`)
-  if (unconfTxList.length === 0) return h(Loading, { isLoading: true })
+  if (unconfTxList.length === 0) return h(Loading)
 
   return currentTxView({
     // Properties
@@ -130,7 +130,7 @@ function currentTxView (opts) {
       return h(PendingTypedMsg, opts)
     }
   }
-  return h(Loading, { isLoading: true })
+  return h(Loading)
 }
 
 ConfirmTxScreen.prototype.buyEth = function (address, event) {
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index effa68b4b..5e64daceb 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -296,6 +296,7 @@ SendTransactionScreen.prototype.renderAmountRow = function () {
         inError: Boolean(errors.amount),
         primaryCurrency,
         convertedCurrency,
+        selectedToken,
         value: amount,
         conversionRate: amountConversionRate,
         handleChange: this.handleAmountChange,
@@ -326,14 +327,14 @@ SendTransactionScreen.prototype.renderGasRow = function () {
         convertedCurrency,
         onClick: showCustomizeGasModal,
       }),
-    
+
       h('div.send-v2__sliders-icon-container', {
         onClick: showCustomizeGasModal,
       }, [
         h('i.fa.fa-sliders.send-v2__sliders-icon'),
       ]),
 
-    ]),          
+    ]),
 
   ])
 }
@@ -350,7 +351,7 @@ SendTransactionScreen.prototype.renderMemoRow = function () {
       h(MemoTextArea, {
         memo,
         onChange: (event) => updateSendMemo(event.target.value),
-      })
+      }),
     ]),
 
   ])