fix: match PendingModalContent number formatting w/ SwapModalHeader (#7053)

* fix: match PendingModalContent number formatting w/ SwapModalHeader

* fix: typo

* fix: remove argument

src/components/swap/PendingModalContent/TradeSummary.tsx

@@ -1,10 +1,10 @@
-import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
 import Row from 'components/Row'
 import { ArrowRight } from 'react-feather'
 import { InterfaceTrade } from 'state/routing/types'
 import { useTheme } from 'styled-components/macro'
 import { ThemedText } from 'theme'
+import { formatReviewSwapCurrencyAmount } from 'utils/formatNumbers'
 
 export function TradeSummary({ trade }: { trade: Pick<InterfaceTrade, 'inputAmount' | 'outputAmount'> }) {
   const theme = useTheme()
@@ -12,12 +12,12 @@ export function TradeSummary({ trade }: { trade: Pick<InterfaceTrade, 'inputAmou
     <Row gap="sm" justify="center" align="center">
       <CurrencyLogo currency={trade.inputAmount.currency} size="16px" />
       <ThemedText.LabelSmall color="textPrimary">
-        {formatCurrencyAmount(trade.inputAmount, NumberType.SwapTradeAmount)} {trade.inputAmount.currency.symbol}
+        {formatReviewSwapCurrencyAmount(trade.inputAmount)} {trade.inputAmount.currency.symbol}
       </ThemedText.LabelSmall>
       <ArrowRight color={theme.textPrimary} size="12px" />
       <CurrencyLogo currency={trade.outputAmount.currency} size="16px" />
       <ThemedText.LabelSmall color="textPrimary">
-        {formatCurrencyAmount(trade.outputAmount, NumberType.SwapTradeAmount)} {trade.outputAmount.currency.symbol}
+        {formatReviewSwapCurrencyAmount(trade.outputAmount)} {trade.outputAmount.currency.symbol}
       </ThemedText.LabelSmall>
     </Row>
   )

src/components/swap/SwapModalHeaderAmount.tsx

@@ -1,4 +1,4 @@
-import { formatCurrencyAmount, formatNumber, NumberType } from '@uniswap/conedison/format'
+import { formatNumber, NumberType } from '@uniswap/conedison/format'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import Column from 'components/Column'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
@@ -10,8 +10,7 @@ import { TextProps } from 'rebass'
 import { Field } from 'state/swap/actions'
 import styled from 'styled-components/macro'
 import { BREAKPOINTS, ThemedText } from 'theme'
-
-const MAX_AMOUNT_STR_LENGTH = 9
+import { formatReviewSwapCurrencyAmount } from 'utils/formatNumbers'
 
 export const Label = styled(ThemedText.BodySmall)<{ cursor?: string }>`
   cursor: ${({ cursor }) => cursor};
@@ -46,11 +45,6 @@ interface AmountProps {
 }
 
 export function SwapModalHeaderAmount({ tooltipText, label, amount, usdAmount, field, currency }: AmountProps) {
-  let formattedAmount = formatCurrencyAmount(amount, NumberType.TokenTx)
-  if (formattedAmount.length > MAX_AMOUNT_STR_LENGTH) {
-    formattedAmount = formatCurrencyAmount(amount, NumberType.SwapTradeAmount)
-  }
-
   return (
     <Row align="center" justify="space-between" gap="md">
       <Column gap="xs">
@@ -61,7 +55,7 @@ export function SwapModalHeaderAmount({ tooltipText, label, amount, usdAmount, f
         </ThemedText.BodySecondary>
         <Column gap="xs">
           <ResponsiveHeadline data-testid={`${field}-amount`}>
-            {formattedAmount} {currency?.symbol}
+            {formatReviewSwapCurrencyAmount(amount)} {currency?.symbol}
           </ResponsiveHeadline>
           {usdAmount && (
             <ThemedText.BodySmall color="textTertiary">

src/utils/formatNumbers.test.ts

@@ -1,7 +1,12 @@
 import { CurrencyAmount, Price } from '@uniswap/sdk-core'
 import { renBTC, USDC_MAINNET } from 'constants/tokens'
 
-import { currencyAmountToPreciseFloat, formatTransactionAmount, priceToPreciseFloat } from './formatNumbers'
+import {
+  currencyAmountToPreciseFloat,
+  formatReviewSwapCurrencyAmount,
+  formatTransactionAmount,
+  priceToPreciseFloat,
+} from './formatNumbers'
 
 describe('currencyAmountToPreciseFloat', () => {
   it('small number', () => {
@@ -87,3 +92,14 @@ describe('formatTransactionAmount', () => {
     expect(formatTransactionAmount(1234567890123456.789)).toEqual('1.234568e+15')
   })
 })
+
+describe('formatReviewSwapCurrencyAmount', () => {
+  it('should use TokenTx formatting under a default length', () => {
+    const currencyAmount = CurrencyAmount.fromRawAmount(USDC_MAINNET, '2000000000') // 2,000 USDC
+    expect(formatReviewSwapCurrencyAmount(currencyAmount)).toBe('2,000')
+  })
+  it('should use SwapTradeAmount formatting over the default length', () => {
+    const currencyAmount = CurrencyAmount.fromRawAmount(USDC_MAINNET, '2000000000000') // 2,000,000 USDC
+    expect(formatReviewSwapCurrencyAmount(currencyAmount)).toBe('2000000')
+  })
+})

src/utils/formatNumbers.ts

@@ -1,4 +1,5 @@
 /* Copied from Uniswap/v-3: https://github.com/Uniswap/v3-info/blob/master/src/utils/numbers.ts */
+import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
 import { Currency, CurrencyAmount, Price } from '@uniswap/sdk-core'
 import { DEFAULT_LOCALE } from 'constants/locales'
 
@@ -59,3 +60,13 @@ export const formatTransactionAmount = (num: number | undefined | null, maxDigit
   }
   return `${Number(num.toFixed(2)).toLocaleString(DEFAULT_LOCALE, { minimumFractionDigits: 2 })}`
 }
+
+const MAX_AMOUNT_STR_LENGTH = 9
+
+export function formatReviewSwapCurrencyAmount(amount: CurrencyAmount<Currency>): string {
+  let formattedAmount = formatCurrencyAmount(amount, NumberType.TokenTx)
+  if (formattedAmount.length > MAX_AMOUNT_STR_LENGTH) {
+    formattedAmount = formatCurrencyAmount(amount, NumberType.SwapTradeAmount)
+  }
+  return formattedAmount
+}