Rounding large numbers (#1612)

rainbow-me · Jul 13, 2024 · 4140d8c · 4140d8c
1 parent 31652e2
commit 4140d8c
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/src/core/utils/numbers.ts b/src/core/utils/numbers.ts
@@ -5,6 +5,7 @@ import { isNil } from 'lodash';
 
 import { supportedCurrencies } from '~/core/references';
 
+import { formatCurrency } from './formatNumber';
 import { BigNumberish } from './hex';
 
 type nativeCurrencyType = typeof supportedCurrencies;
@@ -473,3 +474,32 @@ export const convertDecimalFormatToRawAmount = (
 
 export const fromWei = (number: BigNumberish): string =>
   convertRawAmountToDecimalFormat(number, 18);
+
+const cleanNumber = (n: number | string | null | undefined): number => {
+  if (typeof n === 'string') {
+    return parseFloat(n.replace(/,/g, ''));
+  }
+  return n || 0;
+};
+
+export const formatNumber = (n?: number | string | null) => {
+  let value = formatCurrency(cleanNumber(n), {
+    notation: 'compact',
+    maximumSignificantDigits: 4,
+  });
+  while (value.charAt(0) === '$') {
+    value = value.substring(1);
+  }
+  return value;
+};
+
+export const processExchangeRateArray = (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;
+  });
+};
diff --git a/src/entries/popup/pages/swap/SwapReviewSheet/SwapAssetCard.tsx b/src/entries/popup/pages/swap/SwapReviewSheet/SwapAssetCard.tsx
@@ -5,6 +5,7 @@ import { ParsedSearchAsset } from '~/core/types/assets';
 import {
   convertRawAmountToBalance,
   convertRawAmountToNativeDisplay,
+  formatNumber,
 } from '~/core/utils/numbers';
 import {
   Box,
@@ -75,7 +76,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">

diff --git a/src/entries/popup/pages/swap/SwapReviewSheet/SwapReviewSheet.tsx b/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 { processExchangeRateArray } from '~/core/utils/numbers';
 import { isLowerCaseMatch } from '~/core/utils/strings';
 import { isUnwrapEth, isWrapEth } from '~/core/utils/swaps';
 import {
@@ -243,6 +244,12 @@ const SwapReviewSheetWithQuote = ({
   const { minimumReceived, swappingRoute, includedFee, exchangeRate } =
     useSwapReviewDetails({ quote, assetToBuy, assetToSell });
 
+  const formattedExchangeRate = useMemo(
+    () => processExchangeRateArray(exchangeRate),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [exchangeRate],
+  );
+
   const { explainerSheetParams, showExplainerSheet, hideExplainerSheet } =
     useExplainerSheetParams();
 
@@ -615,7 +622,7 @@ const SwapReviewSheetWithQuote = ({
                         <CarrouselButton
                           testId="exchange-rate"
                           symbol="arrow.2.squarepath"
-                          textArray={exchangeRate}
+                          textArray={formattedExchangeRate}
                         />
                       </ReviewDetailsRow>
                       {!assetToSell.isNativeAsset && (