diff --git a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap index 5fd87d103c47..139f516bdc95 100644 --- a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap +++ b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap @@ -75,7 +75,7 @@ exports[`Token Cell should match snapshot 1`] = ` class="mm-box mm-text mm-text--body-md mm-text--text-align-end mm-box--color-text-alternative" data-testid="multichain-token-list-item-value" > - 5.000 + 5 TEST

diff --git a/ui/components/app/token-cell/token-cell.js b/ui/components/app/token-cell/token-cell.js index 0052096254be..e58fda03918a 100644 --- a/ui/components/app/token-cell/token-cell.js +++ b/ui/components/app/token-cell/token-cell.js @@ -6,6 +6,7 @@ import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount'; import { TokenListItem } from '../../multichain'; import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils'; import { useIsOriginalTokenSymbol } from '../../../hooks/useIsOriginalTokenSymbol'; +import { getIntlLocale } from '../../../ducks/locale/locale'; export default function TokenCell({ address, image, symbol, string, onClick }) { const tokenList = useSelector(getTokenList); @@ -17,6 +18,11 @@ export default function TokenCell({ address, image, symbol, string, onClick }) { const title = tokenData?.name || symbol; const tokenImage = tokenData?.iconUrl || image; const formattedFiat = useTokenFiatAmount(address, string, symbol); + const locale = useSelector(getIntlLocale); + const primary = new Intl.NumberFormat(locale, { + minimumSignificantDigits: 1, + }).format(string.toString()); + const isOriginalTokenSymbol = useIsOriginalTokenSymbol(address, symbol); return ( @@ -24,7 +30,7 @@ export default function TokenCell({ address, image, symbol, string, onClick }) { onClick={onClick ? () => onClick(address) : undefined} tokenSymbol={symbol} tokenImage={tokenImage} - primary={`${string || 0}`} + primary={`${primary || 0}`} secondary={isOriginalTokenSymbol ? formattedFiat : null} title={title} isOriginalTokenSymbol={isOriginalTokenSymbol} diff --git a/ui/components/app/token-cell/token-cell.test.js b/ui/components/app/token-cell/token-cell.test.js index 8312000d3ed2..731361de7df6 100644 --- a/ui/components/app/token-cell/token-cell.test.js +++ b/ui/components/app/token-cell/token-cell.test.js @@ -86,6 +86,13 @@ describe('Token Cell', () => { onClick: jest.fn(), }; + const propsLargeAmount = { + address: '0xAnotherToken', + symbol: 'TEST', + string: '5000000', + currentCurrency: 'usd', + onClick: jest.fn(), + }; useSelector.mockReturnValue(MOCK_GET_TOKEN_LIST); useTokenFiatAmount.mockReturnValue('5.00'); @@ -121,4 +128,16 @@ describe('Token Cell', () => { expect(image).toBeInTheDocument(); expect(image).toHaveAttribute('src', './images/test_image.svg'); }); + + it('should render amount with the correct format', () => { + const { getByTestId } = renderWithProvider( + , + mockStore, + ); + + const amountElement = getByTestId('multichain-token-list-item-value'); + + expect(amountElement).toBeInTheDocument(); + expect(amountElement.textContent).toBe('5,000,000 TEST'); + }); });