Add CurrencyDisplay and TokenCurrencyDisplay components

3 files changed, 88 insertions, 27 deletions

diff --git a/ui/app/components/token-view-balance/tests/token-view-balance.component.test.js b/ui/app/components/token-view-balance/tests/token-view-balance.component.test.js
new file mode 100644
index 000000000..909b4dc7f
--- /dev/null
+++ b/ui/app/components/token-view-balance/tests/token-view-balance.component.test.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import TokenBalance from '../../token-balance'
+import CurrencyDisplay from '../../currency-display'
+import { SEND_ROUTE } from '../../../routes'
+import TokenViewBalance from '../token-view-balance.component'
+
+const propsMethodSpies = {
+  showDepositModal: sinon.spy(),
+}
+
+const historySpies = {
+  push: sinon.spy(),
+}
+
+const t = (str1, str2) => str2 ? str1 + str2 : str1
+
+describe('TokenViewBalance Component', () => {
+  afterEach(() => {
+    propsMethodSpies.showDepositModal.resetHistory()
+    historySpies.push.resetHistory()
+  })
+
+  it('should render ETH balance properly', () => {
+    const wrapper = shallow(<TokenViewBalance
+      showDepositModal={propsMethodSpies.showDepositModal}
+      history={historySpies}
+      network="3"
+      ethBalance={123}
+      fiatBalance={456}
+      currentCurrency="usd"
+    />, { context: { t } })
+
+    assert.equal(wrapper.find('.token-view-balance').length, 1)
+    assert.equal(wrapper.find('.token-view-balance__button').length, 2)
+    assert.equal(wrapper.find(CurrencyDisplay).length, 2)
+
+    const buttons = wrapper.find('.token-view-balance__buttons')
+    assert.equal(propsMethodSpies.showDepositModal.callCount, 0)
+    buttons.childAt(0).simulate('click')
+    assert.equal(propsMethodSpies.showDepositModal.callCount, 1)
+    assert.equal(historySpies.push.callCount, 0)
+    buttons.childAt(1).simulate('click')
+    assert.equal(historySpies.push.callCount, 1)
+    assert.equal(historySpies.push.getCall(0).args[0], SEND_ROUTE)
+  })
+
+  it('should render token balance properly', () => {
+    const token = {
+      address: '0x35865238f0bec9d5ce6abff0fdaebe7b853dfcc5',
+      decimals: '2',
+      symbol: 'ABC',
+    }
+
+    const wrapper = shallow(<TokenViewBalance
+      showDepositModal={propsMethodSpies.showDepositModal}
+      history={historySpies}
+      network="3"
+      ethBalance={123}
+      fiatBalance={456}
+      currentCurrency="usd"
+      selectedToken={token}
+    />, { context: { t } })
+
+    assert.equal(wrapper.find('.token-view-balance').length, 1)
+    assert.equal(wrapper.find('.token-view-balance__button').length, 1)
+    assert.equal(wrapper.find(TokenBalance).length, 1)
+  })
+})
diff --git a/ui/app/components/token-view-balance/token-view-balance.component.js b/ui/app/components/token-view-balance/token-view-balance.component.js
index f74cc4926..89e9246e2 100644
--- a/ui/app/components/token-view-balance/token-view-balance.component.js
+++ b/ui/app/components/token-view-balance/token-view-balance.component.js
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types'
 import Button from '../button'
 import Identicon from '../identicon'
 import TokenBalance from '../token-balance'
+import CurrencyDisplay from '../currency-display'
 import { SEND_ROUTE } from '../../routes'
-import { formatCurrency } from '../../helpers/confirm-transaction/util'
+import { ETH } from '../../constants/common'
 
 export default class TokenViewBalance extends PureComponent {
   static contextTypes = {
@@ -16,14 +17,11 @@ export default class TokenViewBalance extends PureComponent {
     selectedToken: PropTypes.object,
     history: PropTypes.object,
     network: PropTypes.string,
-    ethBalance: PropTypes.string,
-    fiatBalance: PropTypes.string,
-    currentCurrency: PropTypes.string,
+    balance: PropTypes.string,
   }
 
   renderBalance () {
-    const { selectedToken, ethBalance, fiatBalance, currentCurrency } = this.props
-    const formattedFiatBalance = formatCurrency(fiatBalance, currentCurrency)
+    const { selectedToken, balance } = this.props
 
     return selectedToken
       ? (
@@ -34,12 +32,16 @@ export default class TokenViewBalance extends PureComponent {
         />
       ) : (
         <div className="token-view-balance__balance">
-          <div className="token-view-balance__primary-balance">
-            { `${ethBalance} ETH` }
-          </div>
-          <div className="token-view-balance__secondary-balance">
-            { formattedFiatBalance }
-          </div>
+          <CurrencyDisplay
+            className="token-view-balance__primary-balance"
+            value={balance}
+            currency={ETH}
+            numberOfDecimals={3}
+          />
+          <CurrencyDisplay
+            className="token-view-balance__secondary-balance"
+            value={balance}
+          />
         </div>
       )
   }
diff --git a/ui/app/components/token-view-balance/token-view-balance.container.js b/ui/app/components/token-view-balance/token-view-balance.container.js
index 692e6e32f..f6cdc30e1 100644
--- a/ui/app/components/token-view-balance/token-view-balance.container.js
+++ b/ui/app/components/token-view-balance/token-view-balance.container.js
@@ -4,29 +4,17 @@ import { compose } from 'recompose'
 import TokenViewBalance from './token-view-balance.component'
 import { getSelectedToken, getSelectedAddress } from '../../selectors'
 import { showModal } from '../../actions'
-import { getValueFromWeiHex } from '../../helpers/confirm-transaction/util'
 
 const mapStateToProps = state => {
   const selectedAddress = getSelectedAddress(state)
-  const { metamask } = state
-  const { network, accounts, currentCurrency, conversionRate } = metamask
+  const { metamask: { network, accounts } } = state
   const account = accounts[selectedAddress]
-  const { balance: value } = account
-
-  const ethBalance = getValueFromWeiHex({
-    value, toCurrency: 'ETH', conversionRate, numberOfDecimals: 3,
-  })
-
-  const fiatBalance = getValueFromWeiHex({
-    value, toCurrency: currentCurrency, conversionRate, numberOfDecimals: 2,
-  })
+  const { balance } = account
 
   return {
     selectedToken: getSelectedToken(state),
     network,
-    ethBalance,
-    fiatBalance,
-    currentCurrency,
+    balance,
   }
 }