fix: add formatting to USDC values (#3478)

* add formatting to USDC values

* update formatting of USDC amounts to en

* apply same formatting to summary

src/lib/components/Swap/Input.tsx

@@ -122,7 +122,9 @@ export default function Input({ disabled, focused }: InputProps) {
       >
         <ThemedText.Body2 color="secondary" userSelect>
           <Row>
-            <USDC isLoading={isRouteLoading}>{inputUSDC ? `$${inputUSDC.toFixed(2)}` : '-'}</USDC>
+            <USDC isLoading={isRouteLoading}>
+              {inputUSDC ? `$${formatCurrencyAmount(inputUSDC, 6, 'en', 2)}` : '-'}
+            </USDC>
             {balance && (
               <Balance color={balanceColor} focused={focused}>
                 Balance: <span>{formatCurrencyAmount(balance, 4, i18n.locale)}</span>

src/lib/components/Swap/Output.tsx

@@ -87,7 +87,7 @@ export default function Output({ disabled, focused, children }: PropsWithChildre
           <ThemedText.Body2 color="secondary" userSelect>
             <Row>
               <USDC gap={0.5} isLoading={isRouteLoading}>
-                {outputUSDC ? `$${outputUSDC.toFixed(2)}` : '-'}{' '}
+                {outputUSDC ? `$${formatCurrencyAmount(outputUSDC, 6, 'en', 2)}` : '-'}{' '}
                 {priceImpact && (
                   <ThemedText.Body2 color={priceImpactWarning}>
                     ({toHumanReadablePriceImpact(priceImpact)})

src/lib/components/Swap/Summary/Summary.tsx

@@ -31,7 +31,7 @@ function TokenValue({ input, usdc, priceImpact }: TokenValueProps) {
       {usdc && (
         <ThemedText.Caption color="secondary" userSelect>
           <Row justify="flex-start" gap={0.25}>
-            ${formatCurrencyAmount(usdc, 2, i18n.locale)}
+            ${formatCurrencyAmount(usdc, 6, 'en', 2)}
             {priceImpact && (
               <ThemedText.Caption color={priceImpactWarning}>
                 ({toHumanReadablePriceImpact(priceImpact)})

src/lib/components/Swap/Toolbar/Caption.tsx

@@ -10,6 +10,7 @@ import { AlertTriangle, Icon, Info, InlineSpinner } from 'lib/icons'
 import styled, { ThemedText } from 'lib/theme'
 import { ReactNode, useCallback, useMemo, useState } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
+import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 import { getPriceImpactWarning } from 'utils/prices'
 
 import { TextButton } from '../../Button'
@@ -92,10 +93,10 @@ export function Trade({ trade }: { trade: InterfaceTrade<Currency, Currency, Tra
     const ratio = `1 ${a.currency.symbol} = ${priceString} ${b.currency.symbol}`
     const usdc = !flip
       ? inputUSDC
-        ? ` ($${inputUSDC.toSignificant(6)})`
+        ? ` ($${formatCurrencyAmount(inputUSDC, 6, 'en', 2)})`
         : null
       : outputUSDC
-      ? ` ($${outputUSDC.toSignificant(6)})`
+      ? ` ($${formatCurrencyAmount(outputUSDC, 6, 'en', 2)})`
       : null
 
     return (
@@ -106,7 +107,7 @@ export function Trade({ trade }: { trade: InterfaceTrade<Currency, Currency, Tra
         </Row>
       </ThemedText.Caption>
     )
-  }, [executionPrice, inputUSDC, outputUSDC, flip, input, output])
+  }, [flip, output, input, executionPrice, inputUSDC, outputUSDC])
 
   return (
     <>

src/lib/utils/formatLocaleNumber.ts

@@ -6,9 +6,16 @@ interface FormatLocaleNumberArgs {
   locale: string | null | undefined
   options?: Intl.NumberFormatOptions
   sigFigs?: number
+  fixedDecimals?: number
 }
 
-export default function formatLocaleNumber({ number, locale, sigFigs, options = {} }: FormatLocaleNumberArgs): string {
+export default function formatLocaleNumber({
+  number,
+  locale,
+  sigFigs,
+  fixedDecimals,
+  options = {},
+}: FormatLocaleNumberArgs): string {
   let localeArg: string | string[]
   if (!locale || (locale && !SUPPORTED_LOCALES.includes(locale))) {
     localeArg = DEFAULT_LOCALE
@@ -16,9 +23,14 @@ export default function formatLocaleNumber({ number, locale, sigFigs, options =
     localeArg = [locale, DEFAULT_LOCALE]
   }
   options.maximumSignificantDigits = options.maximumSignificantDigits || sigFigs
+
+  let numberString: number
   if (typeof number === 'number') {
-    return number.toLocaleString(localeArg, options)
+    numberString = fixedDecimals ? parseFloat(number.toFixed(fixedDecimals)) : number
   } else {
-    return parseFloat(number.toSignificant(sigFigs)).toLocaleString(localeArg, options)
+    const baseString = parseFloat(number.toSignificant(sigFigs))
+    numberString = fixedDecimals ? parseFloat(baseString.toFixed(fixedDecimals)) : baseString
   }
+
+  return numberString.toLocaleString(localeArg, options)
 }

src/utils/formatCurrencyAmount.ts

@@ -6,7 +6,8 @@ import formatLocaleNumber from 'lib/utils/formatLocaleNumber'
 export function formatCurrencyAmount(
   amount: CurrencyAmount<Currency> | undefined,
   sigFigs: number,
-  locale: SupportedLocale = DEFAULT_LOCALE
+  locale: SupportedLocale = DEFAULT_LOCALE,
+  fixedDecimals?: number
 ): string {
   if (!amount) {
     return '-'
@@ -20,7 +21,7 @@ export function formatCurrencyAmount(
     return `<${formatLocaleNumber({ number: 0.00001, locale })}`
   }
 
-  return formatLocaleNumber({ number: amount, locale, sigFigs })
+  return formatLocaleNumber({ number: amount, locale, sigFigs, fixedDecimals })
 }
 
 export function formatPrice(