diff --git a/ui/components/ui/token-input/token-input.component.js b/ui/components/ui/token-input/token-input.component.js index 3b8d2eefb..6de1191dc 100644 --- a/ui/components/ui/token-input/token-input.component.js +++ b/ui/components/ui/token-input/token-input.component.js @@ -11,6 +11,7 @@ import { import { ETH } from '../../../helpers/constants/common'; import { addHexPrefix } from '../../../../app/scripts/lib/util'; +import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils'; /** * Component that allows user to enter token values as a number, and props receive a converted @@ -34,6 +35,7 @@ export default class TokenInput extends PureComponent { symbol: PropTypes.string, }).isRequired, tokenExchangeRates: PropTypes.object, + tokens: PropTypes.array.isRequired, }; constructor(props) { @@ -108,10 +110,15 @@ export default class TokenInput extends PureComponent { currentCurrency, hideConversion, token, + tokens, } = this.props; const { decimalValue } = this.state; - const tokenExchangeRate = tokenExchangeRates?.[token.address] || 0; + const existingToken = tokens.find(({ address }) => + isEqualCaseInsensitive(address, token.address), + ); + + const tokenExchangeRate = tokenExchangeRates?.[existingToken.address] || 0; let currency, numberOfDecimals; if (hideConversion) { diff --git a/ui/components/ui/token-input/token-input.component.test.js b/ui/components/ui/token-input/token-input.component.test.js index ac8d55fe8..a7245c54e 100644 --- a/ui/components/ui/token-input/token-input.component.test.js +++ b/ui/components/ui/token-input/token-input.component.test.js @@ -28,6 +28,15 @@ describe('TokenInput Component', () => { decimals: 4, symbol: 'ABC', }} + tokens={[ + { + address: '0x1', + decimals: 4, + symbol: 'ABC', + image: null, + isERC721: false, + }, + ]} /> , { @@ -66,6 +75,15 @@ describe('TokenInput Component', () => { decimals: 4, symbol: 'ABC', }} + tokens={[ + { + address: '0x1', + decimals: 4, + symbol: 'ABC', + image: null, + isERC721: false, + }, + ]} tokenExchangeRates={{ '0x1': 2 }} /> , @@ -101,6 +119,15 @@ describe('TokenInput Component', () => { decimals: 4, symbol: 'ABC', }} + tokens={[ + { + address: '0x1', + decimals: 4, + symbol: 'ABC', + image: null, + isERC721: false, + }, + ]} tokenExchangeRates={{ '0x1': 2 }} /> , @@ -138,6 +165,15 @@ describe('TokenInput Component', () => { decimals: 4, symbol: 'ABC', }} + tokens={[ + { + address: '0x1', + decimals: 4, + symbol: 'ABC', + image: null, + isERC721: false, + }, + ]} tokenExchangeRates={{ '0x1': 2 }} showFiat currentCurrency="usd" @@ -177,6 +213,15 @@ describe('TokenInput Component', () => { decimals: 4, symbol: 'ABC', }} + tokens={[ + { + address: '0x1', + decimals: 4, + symbol: 'ABC', + image: null, + isERC721: false, + }, + ]} tokenExchangeRates={{ '0x1': 2 }} showFiat hideConversion @@ -229,6 +274,15 @@ describe('TokenInput Component', () => { decimals: 4, symbol: 'ABC', }} + tokens={[ + { + address: '0x1', + decimals: 4, + symbol: 'ABC', + image: null, + isERC721: false, + }, + ]} tokenExchangeRates={{ '0x1': 2 }} /> , @@ -273,6 +327,15 @@ describe('TokenInput Component', () => { decimals: 4, symbol: 'ABC', }} + tokens={[ + { + address: '0x1', + decimals: 4, + symbol: 'ABC', + image: null, + isERC721: false, + }, + ]} tokenExchangeRates={{ '0x1': 2 }} showFiat currentCurrency="usd" @@ -319,6 +382,15 @@ describe('TokenInput Component', () => { decimals: 4, symbol: 'ABC', }} + tokens={[ + { + address: '0x1', + decimals: 4, + symbol: 'ABC', + image: null, + isERC721: false, + }, + ]} tokenExchangeRates={{ '0x1': 2 }} showFiat /> @@ -365,6 +437,15 @@ describe('TokenInput Component', () => { decimals: 4, symbol: 'ABC', }} + tokens={[ + { + address: '0x1', + decimals: 4, + symbol: 'ABC', + image: null, + isERC721: false, + }, + ]} tokenExchangeRates={{ '0x1': 2 }} showFiat currentCurrency="usd" @@ -404,6 +485,15 @@ describe('TokenInput Component', () => { decimals: 4, symbol: 'ABC', }} + tokens={[ + { + address: '0x1', + decimals: 4, + symbol: 'ABC', + image: null, + isERC721: false, + }, + ]} tokenExchangeRates={{ '0x1': 2 }} showFiat currentCurrency="usd" diff --git a/ui/components/ui/token-input/token-input.container.js b/ui/components/ui/token-input/token-input.container.js index 9f964feec..98082a3db 100644 --- a/ui/components/ui/token-input/token-input.container.js +++ b/ui/components/ui/token-input/token-input.container.js @@ -5,13 +5,14 @@ import TokenInput from './token-input.component'; const mapStateToProps = (state) => { const { - metamask: { currentCurrency }, + metamask: { currentCurrency, tokens }, } = state; return { currentCurrency, tokenExchangeRates: getTokenExchangeRates(state), hideConversion: !getShouldShowFiat(state), + tokens, }; };