1 files changed, 12 insertions, 16 deletions
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
index d63d78c9f..e1fcf08e0 100644
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@@ -4,10 +4,11 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TokenBalance = require('./token-balance')
 const Identicon = require('./identicon')
-import CurrencyDisplay from './currency-display'
+import UserPreferencedCurrencyDisplay from './user-preferenced-currency-display'
+import { PRIMARY, SECONDARY } from '../constants/common'
 const { getAssetImages, conversionRateSelector, getCurrentCurrency} = require('../selectors')
 
-const { formatBalance, generateBalanceObject } = require('../util')
+const { formatBalance } = require('../util')
 
 module.exports = connect(mapStateToProps)(BalanceComponent)
 
@@ -65,7 +66,7 @@ BalanceComponent.prototype.renderTokenBalance = function () {
 
 BalanceComponent.prototype.renderBalance = function () {
   const props = this.props
-  const { shorten, account } = props
+  const { account } = props
   const balanceValue = account && account.balance
   const needsParse = 'needsParse' in props ? props.needsParse : true
   const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, needsParse) : '...'
@@ -80,25 +81,20 @@ BalanceComponent.prototype.renderBalance = function () {
   }
 
   return h('div.flex-column.balance-display', {}, [
-    h('div.token-amount', {
-      style: {},
-    }, this.getTokenBalance(formattedBalance, shorten)),
+    h('div.token-amount', {}, h(UserPreferencedCurrencyDisplay, {
+      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'