fix: fix large amount display

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
             </p>

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,14 +18,19 @@ 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 (
     <TokenListItem
       onClick={onClick ? () => onClick(address) : undefined}
       tokenSymbol={symbol}
       tokenImage={tokenImage}
-      primary={`${string || 0}`}
+      primary={`${primary || 0}`}
       secondary={isOriginalTokenSymbol ? formattedFiat : null}
       title={title}
       isOriginalTokenSymbol={isOriginalTokenSymbol}

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(
+      <TokenCell {...propsLargeAmount} />,
+      mockStore,
+    );
+
+    const amountElement = getByTestId('multichain-token-list-item-value');
+
+    expect(amountElement).toBeInTheDocument();
+    expect(amountElement.textContent).toBe('5,000,000 TEST');
+  });
 });