diff options
Diffstat (limited to 'ui/app/components/currency-input')
4 files changed, 203 insertions, 33 deletions
diff --git a/ui/app/components/currency-input/currency-input.component.js b/ui/app/components/currency-input/currency-input.component.js index 8fa3131ae..30e0e919b 100644 --- a/ui/app/components/currency-input/currency-input.component.js +++ b/ui/app/components/currency-input/currency-input.component.js @@ -11,6 +11,10 @@ import { ETH } from '../../constants/common' * gets converted into a decimal value depending on the currency (ETH or Fiat). */ export default class CurrencyInput extends PureComponent { + static contextTypes = { + t: PropTypes.func, + } + static propTypes = { conversionRate: PropTypes.number, currentCurrency: PropTypes.string, @@ -18,6 +22,7 @@ export default class CurrencyInput extends PureComponent { onChange: PropTypes.func, onBlur: PropTypes.func, useFiat: PropTypes.bool, + hideFiat: PropTypes.bool, value: PropTypes.string, fiatSuffix: PropTypes.string, nativeSuffix: PropTypes.string, @@ -61,8 +66,13 @@ export default class CurrencyInput extends PureComponent { } shouldUseFiat = () => { - const { useFiat } = this.props + const { useFiat, hideFiat } = this.props const { isSwapped } = this.state || {} + + if (hideFiat) { + return false + } + return isSwapped ? !useFiat : useFiat } @@ -93,10 +103,18 @@ export default class CurrencyInput extends PureComponent { } renderConversionComponent () { - const { currentCurrency, nativeCurrency } = this.props + const { currentCurrency, nativeCurrency, hideFiat } = this.props const { hexValue } = this.state let currency, numberOfDecimals + if (hideFiat) { + return ( + <div className="currency-input__conversion-component"> + { this.context.t('noConversionRateAvailable') } + </div> + ) + } + if (this.shouldUseFiat()) { // Display ETH currency = nativeCurrency || ETH diff --git a/ui/app/components/currency-input/currency-input.container.js b/ui/app/components/currency-input/currency-input.container.js index 4c89d6c1d..428be4557 100644 --- a/ui/app/components/currency-input/currency-input.container.js +++ b/ui/app/components/currency-input/currency-input.container.js @@ -1,14 +1,18 @@ import { connect } from 'react-redux' import CurrencyInput from './currency-input.component' import { ETH } from '../../constants/common' +import {getIsMainnet, preferencesSelector} from '../../selectors' const mapStateToProps = state => { const { metamask: { nativeCurrency, currentCurrency, conversionRate } } = state + const { showFiatInTestnets } = preferencesSelector(state) + const isMainnet = getIsMainnet(state) return { nativeCurrency, currentCurrency, conversionRate, + hideFiat: (!isMainnet && !showFiatInTestnets), } } diff --git a/ui/app/components/currency-input/tests/currency-input.component.test.js b/ui/app/components/currency-input/tests/currency-input.component.test.js index e1ab29187..6d4612e3c 100644 --- a/ui/app/components/currency-input/tests/currency-input.component.test.js +++ b/ui/app/components/currency-input/tests/currency-input.component.test.js @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import assert from 'assert' import { shallow, mount } from 'enzyme' import sinon from 'sinon' @@ -111,6 +112,45 @@ describe('CurrencyInput Component', () => { assert.equal(wrapper.find('.unit-input__input').props().value, '1') assert.equal(wrapper.find('.currency-display-component').text(), '0.004328ETH') }) + + it('should render properly with a native value when hideFiat is true', () => { + const mockStore = { + metamask: { + nativeCurrency: 'ETH', + currentCurrency: 'usd', + conversionRate: 231.06, + }, + } + const store = configureMockStore()(mockStore) + + const wrapper = mount( + <Provider store={store}> + <CurrencyInput + value="f602f2234d0ea" + fiatSuffix="USD" + nativeSuffix="ETH" + useFiat + hideFiat={true} + nativeCurrency="ETH" + currentCurrency="usd" + conversionRate={231.06} + /> + </Provider>, + { + context: { t: str => str + '_t' }, + childContextTypes: { t: PropTypes.func }, + } + ) + + assert.ok(wrapper) + const currencyInputInstance = wrapper.find(CurrencyInput).at(0).instance() + assert.equal(currencyInputInstance.state.decimalValue, 0.004328) + assert.equal(currencyInputInstance.state.hexValue, 'f602f2234d0ea') + assert.equal(wrapper.find('.unit-input__suffix').length, 1) + assert.equal(wrapper.find('.unit-input__suffix').text(), 'ETH') + assert.equal(wrapper.find('.unit-input__input').props().value, '0.004328') + assert.equal(wrapper.find('.currency-input__conversion-component').text(), 'noConversionRateAvailable_t') + }) }) describe('handling actions', () => { diff --git a/ui/app/components/currency-input/tests/currency-input.container.test.js b/ui/app/components/currency-input/tests/currency-input.container.test.js index 10f530eff..6109d29b6 100644 --- a/ui/app/components/currency-input/tests/currency-input.container.test.js +++ b/ui/app/components/currency-input/tests/currency-input.container.test.js @@ -15,47 +15,155 @@ proxyquire('../currency-input.container.js', { describe('CurrencyInput container', () => { describe('mapStateToProps()', () => { - it('should return the correct props', () => { - const mockState = { - metamask: { + const tests = [ + // Test # 1 + { + comment: 'should return correct props in mainnet', + mockState: { + metamask: { + conversionRate: 280.45, + currentCurrency: 'usd', + nativeCurrency: 'ETH', + preferences: { + showFiatInTestnets: false, + }, + provider: { + type: 'mainnet', + }, + }, + }, + expected: { + conversionRate: 280.45, + currentCurrency: 'usd', + nativeCurrency: 'ETH', + hideFiat: false, + }, + }, + // Test # 2 + { + comment: 'should return correct props when not in mainnet and showFiatInTestnets is false', + mockState: { + metamask: { + conversionRate: 280.45, + currentCurrency: 'usd', + nativeCurrency: 'ETH', + preferences: { + showFiatInTestnets: false, + }, + provider: { + type: 'rinkeby', + }, + }, + }, + expected: { conversionRate: 280.45, currentCurrency: 'usd', nativeCurrency: 'ETH', + hideFiat: true, }, - } + }, + // Test # 3 + { + comment: 'should return correct props when not in mainnet and showFiatInTestnets is true', + mockState: { + metamask: { + conversionRate: 280.45, + currentCurrency: 'usd', + nativeCurrency: 'ETH', + preferences: { + showFiatInTestnets: true, + }, + provider: { + type: 'rinkeby', + }, + }, + }, + expected: { + conversionRate: 280.45, + currentCurrency: 'usd', + nativeCurrency: 'ETH', + hideFiat: false, + }, + }, + // Test # 4 + { + comment: 'should return correct props when in mainnet and showFiatInTestnets is true', + mockState: { + metamask: { + conversionRate: 280.45, + currentCurrency: 'usd', + nativeCurrency: 'ETH', + preferences: { + showFiatInTestnets: true, + }, + provider: { + type: 'mainnet', + }, + }, + }, + expected: { + conversionRate: 280.45, + currentCurrency: 'usd', + nativeCurrency: 'ETH', + hideFiat: false, + }, + }, + ] - assert.deepEqual(mapStateToProps(mockState), { - conversionRate: 280.45, - currentCurrency: 'usd', - nativeCurrency: 'ETH', - }) + tests.forEach(({ mockState, expected, comment }) => { + it(comment, () => assert.deepEqual(mapStateToProps(mockState), expected)) }) }) describe('mergeProps()', () => { - it('should return the correct props', () => { - const mockStateProps = { - conversionRate: 280.45, - currentCurrency: 'usd', - nativeCurrency: 'ETH', - } - const mockDispatchProps = {} - - assert.deepEqual(mergeProps(mockStateProps, mockDispatchProps, { useFiat: true }), { - conversionRate: 280.45, - currentCurrency: 'usd', - nativeCurrency: 'ETH', - useFiat: true, - nativeSuffix: 'ETH', - fiatSuffix: 'USD', - }) + const tests = [ + // Test # 1 + { + comment: 'should return the correct props', + mock: { + stateProps: { + conversionRate: 280.45, + currentCurrency: 'usd', + nativeCurrency: 'ETH', + }, + dispatchProps: {}, + ownProps: {}, + }, + expected: { + conversionRate: 280.45, + currentCurrency: 'usd', + nativeCurrency: 'ETH', + // useFiat: true, + nativeSuffix: 'ETH', + fiatSuffix: 'USD', + }, + }, + // Test # 1 + { + comment: 'should return the correct props when useFiat is true', + mock: { + stateProps: { + conversionRate: 280.45, + currentCurrency: 'usd', + nativeCurrency: 'ETH', + }, + dispatchProps: {}, + ownProps: { useFiat: true }, + }, + expected: { + conversionRate: 280.45, + currentCurrency: 'usd', + nativeCurrency: 'ETH', + useFiat: true, + nativeSuffix: 'ETH', + fiatSuffix: 'USD', + }, + }, + ] - assert.deepEqual(mergeProps(mockStateProps, mockDispatchProps, {}), { - conversionRate: 280.45, - currentCurrency: 'usd', - nativeCurrency: 'ETH', - nativeSuffix: 'ETH', - fiatSuffix: 'USD', + tests.forEach(({ mock: { stateProps, dispatchProps, ownProps }, expected, comment }) => { + it(comment, () => { + assert.deepEqual(mergeProps(stateProps, dispatchProps, ownProps), expected) }) }) }) |