1 files changed, 18 insertions, 20 deletions
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
index d63d78c9f..0f8514c81 100644
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@@ -2,12 +2,13 @@ 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 CurrencyDisplay from './currency-display'
-const { getAssetImages, conversionRateSelector, getCurrentCurrency} = require('../selectors')
+import TokenBalance from './token-balance'
+import Identicon from './identicon'
+import UserPreferencedCurrencyDisplay from './user-preferenced-currency-display'
+import { PRIMARY, SECONDARY } from '../constants/common'
+const { getNativeCurrency, getAssetImages, conversionRateSelector, getCurrentCurrency} = require('../selectors')
 
-const { formatBalance, generateBalanceObject } = require('../util')
+const { formatBalance } = require('../util')
 
 module.exports = connect(mapStateToProps)(BalanceComponent)
 
@@ -20,6 +21,7 @@ function mapStateToProps (state) {
   return {
     account,
     network,
+    nativeCurrency: getNativeCurrency(state),
     conversionRate: conversionRateSelector(state),
     currentCurrency: getCurrentCurrency(state),
     assetImages: getAssetImages(state),
@@ -65,10 +67,10 @@ BalanceComponent.prototype.renderTokenBalance = function () {
 
 BalanceComponent.prototype.renderBalance = function () {
   const props = this.props
-  const { shorten, 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 === '...') {
@@ -80,25 +82,21 @@ BalanceComponent.prototype.renderBalance = function () {
   }
 
   return h('div.flex-column.balance-display', {}, [
-    h('div.token-amount', {
-      style: {},
-    }, this.getTokenBalance(formattedBalance, shorten)),
+    h(UserPreferencedCurrencyDisplay, {
+      className: 'token-amount',
+      value: balanceValue,
+      type: PRIMARY,
+      ethNumberOfDecimals: 3,
+    }),
 
-    showFiat && h(CurrencyDisplay, {
+    showFiat && h(UserPreferencedCurrencyDisplay, {
       value: balanceValue,
+      type: SECONDARY,
+      ethNumberOfDecimals: 3,
     }),
   ])
 }
 
-BalanceComponent.prototype.getTokenBalance = function (formattedBalance, shorten) {
-  const balanceObj = generateBalanceObject(formattedBalance, shorten ? 1 : 3)
-
-  const balanceValue = shorten ? balanceObj.shortBalance : balanceObj.balance
-  const label = balanceObj.label
-
-  return `${balanceValue} ${label}`
-}
-
 BalanceComponent.prototype.getFiatDisplayNumber = function (formattedBalance, conversionRate) {
   if (formattedBalance === 'None') return formattedBalance
   if (conversionRate === 0) return 'N/A'