From 2cbe9dbb283cce261be4cef473e6ef0cad777fdf Mon Sep 17 00:00:00 2001
From: salimtb <salim.toubal@outlook.com>
Date: Fri, 21 Jun 2024 15:23:45 +0200
Subject: [PATCH] fix: fix large amount display

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