Merge branch 'develop' of github.com:MetaMask/metamask-extension into sentry-enhancements2

1 files changed, 9 insertions, 7 deletions

diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
index e1fcf08e0..0f8514c81 100644
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@@ -2,11 +2,11 @@ const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const TokenBalance = require('./token-balance')
-const Identicon = require('./identicon')
+import TokenBalance from './token-balance'
+import Identicon from './identicon'
 import UserPreferencedCurrencyDisplay from './user-preferenced-currency-display'
 import { PRIMARY, SECONDARY } from '../constants/common'
-const { getAssetImages, conversionRateSelector, getCurrentCurrency} = require('../selectors')
+const { getNativeCurrency, getAssetImages, conversionRateSelector, getCurrentCurrency} = require('../selectors')
 
 const { formatBalance } = require('../util')
 
@@ -21,6 +21,7 @@ function mapStateToProps (state) {
   return {
     account,
     network,
+    nativeCurrency: getNativeCurrency(state),
     conversionRate: conversionRateSelector(state),
     currentCurrency: getCurrentCurrency(state),
     assetImages: getAssetImages(state),
@@ -66,10 +67,10 @@ BalanceComponent.prototype.renderTokenBalance = function () {
 
 BalanceComponent.prototype.renderBalance = function () {
   const props = this.props
-  const { account } = props
+  const { account, nativeCurrency } = props
   const balanceValue = account && account.balance
   const needsParse = 'needsParse' in props ? props.needsParse : true
-  const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, needsParse) : '...'
+  const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, needsParse, nativeCurrency) : '...'
   const showFiat = 'showFiat' in props ? props.showFiat : true
 
   if (formattedBalance === 'None' || formattedBalance === '...') {
@@ -81,11 +82,12 @@ BalanceComponent.prototype.renderBalance = function () {
   }
 
   return h('div.flex-column.balance-display', {}, [
-    h('div.token-amount', {}, h(UserPreferencedCurrencyDisplay, {
+    h(UserPreferencedCurrencyDisplay, {
+      className: 'token-amount',
       value: balanceValue,
       type: PRIMARY,
       ethNumberOfDecimals: 3,
-    })),
+    }),
 
     showFiat && h(UserPreferencedCurrencyDisplay, {
       value: balanceValue,