From 64b8db453c6e895634b94e3f75b444a87fbc884b Mon Sep 17 00:00:00 2001 From: salimtb Date: Mon, 24 Jun 2024 19:26:31 +0200 Subject: [PATCH] fix: fix large amount display (#25464) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** The goal of this PR is to fix the way we display large token amout [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25464?quickstart=1) ## **Related issues** Fixes: ## **Manual testing steps** 1. Go to wallet page 2. Import a token with large amount 3. check the way it's displayed ## **Screenshots/Recordings** ### **Before** ![Screenshot 2024-06-21 at 15 30 22](https://github.com/MetaMask/metamask-extension/assets/26223211/2d332ce7-8a6e-45b7-a367-d4214d125bca) ### **After** ![Screenshot 2024-06-21 at 15 29 09](https://github.com/MetaMask/metamask-extension/assets/26223211/1a90e5b7-6eb6-4060-9704-dc0ec3716f0f) ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- .../__snapshots__/token-cell.test.js.snap | 2 +- ui/components/app/token-cell/token-cell.js | 8 +++++++- .../app/token-cell/token-cell.test.js | 19 +++++++++++++++++++ 3 files changed, 27 insertions(+), 2 deletions(-) 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'); + }); });