From da0df790472c816d933e9b697e4dab1a429740a3 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 15 Aug 2018 19:18:01 -0700 Subject: Add CurrencyDisplay and TokenCurrencyDisplay components --- .../tests/token-view-balance.component.test.js | 71 ++++++++++++++++++++++ .../token-view-balance.component.js | 26 ++++---- .../token-view-balance.container.js | 18 +----- 3 files changed, 88 insertions(+), 27 deletions(-) create mode 100644 ui/app/components/token-view-balance/tests/token-view-balance.component.test.js (limited to 'ui/app/components/token-view-balance') 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(, { 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(, { 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 { /> ) : (
-
- { `${ethBalance} ETH` } -
-
- { formattedFiatBalance } -
+ +
) } 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, } } -- cgit v1.2.3