diff options
Diffstat (limited to 'ui/app/components/token-input')
4 files changed, 182 insertions, 2 deletions
diff --git a/ui/app/components/token-input/tests/token-input.component.test.js b/ui/app/components/token-input/tests/token-input.component.test.js index 2dacb9bc4..881101880 100644 --- a/ui/app/components/token-input/tests/token-input.component.test.js +++ b/ui/app/components/token-input/tests/token-input.component.test.js @@ -159,6 +159,48 @@ describe('TokenInput Component', () => { assert.equal(wrapper.find('.unit-input__input').props().value, '1') assert.equal(wrapper.find('.currency-display-component').text(), '$462.12USD') }) + + it('should render properly with a token value for fiat, but hideConversion is true', () => { + const mockStore = { + metamask: { + currentCurrency: 'usd', + conversionRate: 231.06, + }, + } + const store = configureMockStore()(mockStore) + + const wrapper = mount( + <Provider store={store}> + <TokenInput + value="2710" + selectedToken={{ + address: '0x1', + decimals: '4', + symbol: 'ABC', + }} + suffix="ABC" + selectedTokenExchangeRate={2} + showFiat + hideConversion + /> + </Provider>, + { + context: { t }, + childContextTypes: { + t: PropTypes.func, + }, + }, + ) + + assert.ok(wrapper) + const tokenInputInstance = wrapper.find(TokenInput).at(0).instance() + assert.equal(tokenInputInstance.state.decimalValue, 1) + assert.equal(tokenInputInstance.state.hexValue, '2710') + assert.equal(wrapper.find('.unit-input__suffix').length, 1) + assert.equal(wrapper.find('.unit-input__suffix').text(), 'ABC') + assert.equal(wrapper.find('.unit-input__input').props().value, '1') + assert.equal(wrapper.find('.currency-input__conversion-component').text(), 'translate noConversionRateAvailable') + }) }) describe('handling actions', () => { diff --git a/ui/app/components/token-input/tests/token-input.container.test.js b/ui/app/components/token-input/tests/token-input.container.test.js index d73bc9a94..2b1c102c8 100644 --- a/ui/app/components/token-input/tests/token-input.container.test.js +++ b/ui/app/components/token-input/tests/token-input.container.test.js @@ -29,6 +29,12 @@ describe('TokenInput container', () => { selectedTokenAddress: '0x1', contractExchangeRates: {}, send: {}, + preferences: { + showFiatInTestnets: false, + }, + provider: { + type: 'mainnet', + }, }, } @@ -40,6 +46,7 @@ describe('TokenInput container', () => { symbol: 'ABC', }, selectedTokenExchangeRate: 0, + hideConversion: false, }) }) @@ -59,6 +66,12 @@ describe('TokenInput container', () => { send: { token: { address: 'test' }, }, + preferences: { + showFiatInTestnets: false, + }, + provider: { + type: 'mainnet', + }, }, } @@ -68,6 +81,7 @@ describe('TokenInput container', () => { address: 'test', }, selectedTokenExchangeRate: 0, + hideConversion: false, }) }) @@ -87,6 +101,12 @@ describe('TokenInput container', () => { '0x1': 5, }, send: {}, + preferences: { + showFiatInTestnets: false, + }, + provider: { + type: 'mainnet', + }, }, } @@ -98,6 +118,112 @@ describe('TokenInput container', () => { symbol: 'ABC', }, selectedTokenExchangeRate: 5, + hideConversion: false, + }) + }) + + it('should return the correct props when not in mainnet and showFiatInTestnets is false', () => { + const mockState = { + metamask: { + currentCurrency: 'usd', + tokens: [ + { + address: '0x1', + decimals: '4', + symbol: 'ABC', + }, + ], + selectedTokenAddress: '0x1', + contractExchangeRates: {}, + send: {}, + preferences: { + showFiatInTestnets: false, + }, + provider: { + type: 'rinkeby', + }, + }, + } + + assert.deepEqual(mapStateToProps(mockState), { + currentCurrency: 'usd', + selectedToken: { + address: '0x1', + decimals: '4', + symbol: 'ABC', + }, + selectedTokenExchangeRate: 0, + hideConversion: true, + }) + }) + + it('should return the correct props when not in mainnet and showFiatInTestnets is true', () => { + const mockState = { + metamask: { + currentCurrency: 'usd', + tokens: [ + { + address: '0x1', + decimals: '4', + symbol: 'ABC', + }, + ], + selectedTokenAddress: '0x1', + contractExchangeRates: {}, + send: {}, + preferences: { + showFiatInTestnets: true, + }, + provider: { + type: 'rinkeby', + }, + }, + } + + assert.deepEqual(mapStateToProps(mockState), { + currentCurrency: 'usd', + selectedToken: { + address: '0x1', + decimals: '4', + symbol: 'ABC', + }, + selectedTokenExchangeRate: 0, + hideConversion: false, + }) + }) + + it('should return the correct props when in mainnet and showFiatInTestnets is true', () => { + const mockState = { + metamask: { + currentCurrency: 'usd', + tokens: [ + { + address: '0x1', + decimals: '4', + symbol: 'ABC', + }, + ], + selectedTokenAddress: '0x1', + contractExchangeRates: {}, + send: {}, + preferences: { + showFiatInTestnets: true, + }, + provider: { + type: 'mainnet', + }, + }, + } + + assert.deepEqual(mapStateToProps(mockState), { + currentCurrency: 'usd', + selectedToken: { + address: '0x1', + decimals: '4', + symbol: 'ABC', + }, + selectedTokenExchangeRate: 0, + hideConversion: false, }) }) }) diff --git a/ui/app/components/token-input/token-input.component.js b/ui/app/components/token-input/token-input.component.js index 10fa1151e..398b762ec 100644 --- a/ui/app/components/token-input/token-input.component.js +++ b/ui/app/components/token-input/token-input.component.js @@ -24,6 +24,7 @@ export default class TokenInput extends PureComponent { value: PropTypes.string, suffix: PropTypes.string, showFiat: PropTypes.bool, + hideConversion: PropTypes.bool, selectedToken: PropTypes.object, selectedTokenExchangeRate: PropTypes.number, } @@ -81,10 +82,18 @@ export default class TokenInput extends PureComponent { } renderConversionComponent () { - const { selectedTokenExchangeRate, showFiat, currentCurrency } = this.props + const { selectedTokenExchangeRate, showFiat, currentCurrency, hideConversion } = this.props const { decimalValue } = this.state let currency, numberOfDecimals + if (hideConversion) { + return ( + <div className="currency-input__conversion-component"> + { this.context.t('noConversionRateAvailable') } + </div> + ) + } + if (showFiat) { // Display Fiat currency = currentCurrency diff --git a/ui/app/components/token-input/token-input.container.js b/ui/app/components/token-input/token-input.container.js index ec233b1b8..a00d200f7 100644 --- a/ui/app/components/token-input/token-input.container.js +++ b/ui/app/components/token-input/token-input.container.js @@ -1,14 +1,17 @@ import { connect } from 'react-redux' import TokenInput from './token-input.component' -import { getSelectedToken, getSelectedTokenExchangeRate } from '../../selectors' +import {getIsMainnet, getSelectedToken, getSelectedTokenExchangeRate, preferencesSelector} from '../../selectors' const mapStateToProps = state => { const { metamask: { currentCurrency } } = state + const { showFiatInTestnets } = preferencesSelector(state) + const isMainnet = getIsMainnet(state) return { currentCurrency, selectedToken: getSelectedToken(state), selectedTokenExchangeRate: getSelectedTokenExchangeRate(state), + hideConversion: (!isMainnet && !showFiatInTestnets), } } |