Rounding large numbers

src/entries/popup/pages/swap/SwapReviewSheet/SwapAssetCard.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import { useCurrentCurrencyStore } from '~/core/state';
 import { ParsedSearchAsset } from '~/core/types/assets';
+import { formatCurrency } from '~/core/utils/formatNumber';
 import {
   convertRawAmountToBalance,
   convertRawAmountToNativeDisplay,
@@ -49,6 +50,18 @@ export const SwapAssetCard = ({
       ).display,
     [asset.decimals, asset.price?.value, assetAmount, currentCurrency],
   );
+  const cleanNumber = (n: number | string | null | undefined): number => {
+    if (typeof n === 'string') {
+      return parseFloat(n.replace(/,/g, ''));
+    }
+    return n || 0;
+  };
+
+  const formatNumber = (n?: number | string | null) =>
+    formatCurrency(cleanNumber(n), {
+      notation: 'compact',
+      maximumSignificantDigits: 4,
+    });
 
   return (
     <AccentColorProvider
@@ -75,7 +88,7 @@ export const SwapAssetCard = ({
                 <Columns space="4px" alignVertical="center">
                   <Column>
                     <TextOverflow color="label" size="14pt" weight="bold">
-                      {`${amount}`}
+                      {`${formatNumber(amount)}`}
                     </TextOverflow>
                   </Column>
                   <Column width="content">

src/entries/popup/pages/swap/SwapReviewSheet/SwapReviewSheet.tsx

@@ -20,6 +20,7 @@ import { useSwapAssetsToRefreshStore } from '~/core/state/swapAssetsToRefresh';
 import { ParsedSearchAsset } from '~/core/types/assets';
 import { ChainId } from '~/core/types/chains';
 import { truncateAddress } from '~/core/utils/address';
+import { formatCurrency } from '~/core/utils/formatNumber';
 import { isLowerCaseMatch } from '~/core/utils/strings';
 import { isUnwrapEth, isWrapEth } from '~/core/utils/swaps';
 import {
@@ -243,6 +244,33 @@ const SwapReviewSheetWithQuote = ({
   const { minimumReceived, swappingRoute, includedFee, exchangeRate } =
     useSwapReviewDetails({ quote, assetToBuy, assetToSell });
 
+  const cleanNumber = (n: string): number => {
+    return parseFloat(n.replace(/,/g, ''));
+  };
+
+  const formatNumber = (n: string) =>
+    formatCurrency(cleanNumber(n), {
+      notation: 'compact',
+      maximumSignificantDigits: 4,
+    });
+
+  const processArray = (arr: string[]): string[] => {
+    return arr.map((item) => {
+      const parts = item.split(' ');
+      if (parts.length === 5) {
+        const formattedAmount = formatNumber(parts[3]);
+        return `${parts[0]} ${parts[1]} ${parts[2]} ${formattedAmount} ${parts[4]}`;
+      }
+      return item;
+    });
+  };
+
+  const formattedExchangeRate = useMemo(
+    () => processArray(exchangeRate),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [exchangeRate],
+  );
+
   const { explainerSheetParams, showExplainerSheet, hideExplainerSheet } =
     useExplainerSheetParams();
 
@@ -615,7 +643,7 @@ const SwapReviewSheetWithQuote = ({
                         <CarrouselButton
                           testId="exchange-rate"
                           symbol="arrow.2.squarepath"
-                          textArray={exchangeRate}
+                          textArray={formattedExchangeRate}
                         />
                       </ReviewDetailsRow>
                       {!assetToSell.isNativeAsset && (