chore: updating numberFormat for other currencies and languages (#7239)

* adding currency settings option

* moving menu item to shared component

* adding supported currencies

* currency menu items

* currency url params

* currency selector e2e tests

* fixing tests

* currency icons

* removing eslint

* removing another eslint disable

* renaming to local currency

* more name changes

* design updates

* adding currencies

* changing formatter rules to formatter options

* renaming file

* fixing lint

* custom currency symbol in number formatting

* refactoring input to number formatter

* locale selection

* updating all format numbers with currency and locale

* updating portfolio

* better formatting symbols

* removing adding locale and currency

* upgrading constants to be translatable

* refactoring

* adding tests

* updating comment

* removing 0 from hardcoded input and comment

src/components/AccountDrawer/AuthenticatedHeader.tsx

@@ -279,16 +279,20 @@ export default function AuthenticatedHeader({ account, openSettings }: { account
         {totalBalance !== undefined ? (
           <FadeInColumn gap="xs">
             <ThemedText.HeadlineLarge fontWeight={535} data-testid="portfolio-total-balance">
-              {formatNumber(totalBalance, NumberType.PortfolioBalance)}
+              {formatNumber({
+                input: totalBalance,
+                type: NumberType.PortfolioBalance,
+              })}
             </ThemedText.HeadlineLarge>
             <AutoRow marginBottom="20px">
               {absoluteChange !== 0 && percentChange && (
                 <>
                   <PortfolioArrow change={absoluteChange as number} />
                   <ThemedText.BodySecondary>
-                    {`${formatNumber(Math.abs(absoluteChange as number), NumberType.PortfolioBalance)} (${formatDelta(
-                      percentChange
-                    )})`}
+                    {`${formatNumber({
+                      input: Math.abs(absoluteChange as number),
+                      type: NumberType.PortfolioBalance,
+                    })} (${formatDelta(percentChange)})`}
                   </ThemedText.BodySecondary>
                 </>
               )}

src/components/AccountDrawer/MiniPortfolio/Pools/index.tsx

@@ -167,18 +167,21 @@ function PositionListItem({ positionInfo }: { positionInfo: PositionInfo }) {
               placement="left"
               text={
                 <div style={{ padding: '4px 0px' }}>
-                  <ThemedText.BodySmall>{`${formatNumber(
-                    liquidityValue,
-                    NumberType.PortfolioBalance
-                  )} (liquidity) + ${formatNumber(
-                    feeValue,
-                    NumberType.PortfolioBalance
-                  )} (fees)`}</ThemedText.BodySmall>
+                  <ThemedText.BodySmall>{`${formatNumber({
+                    input: liquidityValue,
+                    type: NumberType.PortfolioBalance,
+                  })} (liquidity) + ${formatNumber({
+                    input: feeValue,
+                    type: NumberType.PortfolioBalance,
+                  })} (fees)`}</ThemedText.BodySmall>
                 </div>
               }
             >
               <ThemedText.SubHeader>
-                {formatNumber((liquidityValue ?? 0) + (feeValue ?? 0), NumberType.PortfolioBalance)}
+                {formatNumber({
+                  input: (liquidityValue ?? 0) + (feeValue ?? 0),
+                  type: NumberType.PortfolioBalance,
+                })}
               </ThemedText.SubHeader>
             </MouseoverTooltip>
 

src/components/AccountDrawer/MiniPortfolio/Tokens/index.tsx

@@ -101,7 +101,7 @@ function TokenRow({ token, quantity, denominatedValue, tokenProjectMarket }: Tok
         title={<TokenNameText>{token?.name}</TokenNameText>}
         descriptor={
           <TokenBalanceText>
-            {formatNumber(quantity, NumberType.TokenNonTx)} {token?.symbol}
+            {formatNumber({ input: quantity, type: NumberType.TokenNonTx })} {token?.symbol}
           </TokenBalanceText>
         }
         onClick={navigateToTokenDetails}
@@ -109,7 +109,10 @@ function TokenRow({ token, quantity, denominatedValue, tokenProjectMarket }: Tok
           denominatedValue && (
             <>
               <ThemedText.SubHeader>
-                {formatNumber(denominatedValue?.value, NumberType.PortfolioBalance)}
+                {formatNumber({
+                  input: denominatedValue?.value,
+                  type: NumberType.PortfolioBalance,
+                })}
               </ThemedText.SubHeader>
               <Row justify="flex-end">
                 <PortfolioArrow change={percentChange} size={20} strokeWidth={1.75} />

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -39,7 +39,10 @@ export function FiatValue({
     <Row gap="sm">
       <ThemedText.BodySmall color="neutral2">
         {fiatValue.data ? (
-          formatNumber(fiatValue.data, NumberType.FiatTokenPrice)
+          formatNumber({
+            input: fiatValue.data,
+            type: NumberType.FiatTokenPrice,
+          })
         ) : (
           <MouseoverTooltip text={<Trans>Not enough liquidity to show accurate USD value.</Trans>}>-</MouseoverTooltip>
         )}

src/components/Tokens/TokenDetails/StatsSection.tsx

@@ -62,7 +62,12 @@ function Stat({
   return (
     <StatWrapper data-cy={`${dataCy}`}>
       <MouseoverTooltip text={description}>{title}</MouseoverTooltip>
-      <StatPrice>{formatNumber(value, NumberType.FiatTokenStats)}</StatPrice>
+      <StatPrice>
+        {formatNumber({
+          input: value,
+          type: NumberType.FiatTokenStats,
+        })}
+      </StatPrice>
     </StatWrapper>
   )
 }

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -503,11 +503,19 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
           }
           tvl={
             <ClickableContent>
-              {formatNumber(token.market?.totalValueLocked?.value, NumberType.FiatTokenStats)}
+              {formatNumber({
+                input: token.market?.totalValueLocked?.value,
+                type: NumberType.FiatTokenStats,
+              })}
             </ClickableContent>
           }
           volume={
-            <ClickableContent>{formatNumber(token.market?.volume?.value, NumberType.FiatTokenStats)}</ClickableContent>
+            <ClickableContent>
+              {formatNumber({
+                input: token.market?.volume?.value,
+                type: NumberType.FiatTokenStats,
+              })}
+            </ClickableContent>
           }
           sparkLine={
             <SparkLine>

src/components/swap/AdvancedSwapDetails.tsx

@@ -73,10 +73,10 @@ export function AdvancedSwapDetails({ trade, allowedSlippage, syncing = false }:
           >
             <TextWithLoadingPlaceholder syncing={syncing} width={50}>
               <ThemedText.BodySmall>
-                {`${trade.totalGasUseEstimateUSD ? '~' : ''}${formatNumber(
-                  trade.totalGasUseEstimateUSD,
-                  NumberType.FiatGasPrice
-                )}`}
+                {`${trade.totalGasUseEstimateUSD ? '~' : ''}${formatNumber({
+                  input: trade.totalGasUseEstimateUSD,
+                  type: NumberType.FiatGasPrice,
+                })}`}
               </ThemedText.BodySmall>
             </TextWithLoadingPlaceholder>
           </MouseoverTooltip>

src/components/swap/GasBreakdownTooltip.tsx

@@ -39,7 +39,11 @@ const GasCostItem = ({
     <Row justify="space-between">
       <ThemedText.SubHeaderSmall>{title}</ThemedText.SubHeaderSmall>
       <ThemedText.SubHeaderSmall color="neutral1">
-        {itemValue ?? formatNumber(amount, NumberType.FiatGasPrice)}
+        {itemValue ??
+          formatNumber({
+            input: amount,
+            type: NumberType.FiatGasPrice,
+          })}
       </ThemedText.SubHeaderSmall>
     </Row>
   )

src/components/swap/GasEstimateTooltip.tsx

@@ -47,10 +47,20 @@ export default function GasEstimateTooltip({ trade, loading }: { trade?: Interfa
           {isUniswapXTrade(trade) ? <UniswapXRouterIcon testId="gas-estimate-uniswapx-icon" /> : <StyledGasIcon />}
           <ThemedText.BodySmall color="neutral2">
             <Row gap="xs">
-              <div>{formatNumber(trade.totalGasUseEstimateUSD, NumberType.FiatGasPrice)}</div>
+              <div>
+                {formatNumber({
+                  input: trade.totalGasUseEstimateUSD,
+                  type: NumberType.FiatGasPrice,
+                })}
+              </div>
               {isUniswapXTrade(trade) && (
                 <div>
-                  <s>{formatNumber(trade.classicGasUseEstimateUSD, NumberType.FiatGasPrice)}</s>
+                  <s>
+                    {formatNumber({
+                      input: trade.classicGasUseEstimateUSD,
+                      type: NumberType.FiatGasPrice,
+                    })}
+                  </s>
                 </div>
               )}
             </Row>

src/components/swap/SwapModalFooter.tsx

@@ -109,7 +109,12 @@ export default function SwapModalFooter({
               </Label>
             </MouseoverTooltip>
             <MouseoverTooltip placement="right" size={TooltipSize.Small} text={<GasBreakdownTooltip trade={trade} />}>
-              <DetailRowValue>{formatNumber(trade.totalGasUseEstimateUSD, NumberType.FiatGasPrice)}</DetailRowValue>
+              <DetailRowValue>
+                {formatNumber({
+                  input: trade.totalGasUseEstimateUSD,
+                  type: NumberType.FiatGasPrice,
+                })}
+              </DetailRowValue>
             </MouseoverTooltip>
           </Row>
         </ThemedText.BodySmall>

src/components/swap/SwapModalHeaderAmount.tsx

@@ -59,7 +59,10 @@ export function SwapModalHeaderAmount({ tooltipText, label, amount, usdAmount, f
           </ResponsiveHeadline>
           {usdAmount && (
             <ThemedText.BodySmall color="neutral2">
-              {formatNumber(usdAmount, NumberType.FiatTokenQuantity)}
+              {formatNumber({
+                input: usdAmount,
+                type: NumberType.FiatTokenQuantity,
+              })}
             </ThemedText.BodySmall>
           )}
         </Column>

src/components/swap/TradePrice.tsx

@@ -58,7 +58,14 @@ export default function TradePrice({ price }: TradePriceProps) {
       <ThemedText.BodySmall>{text}</ThemedText.BodySmall>{' '}
       {usdPrice && (
         <ThemedText.BodySmall color="neutral2">
-          <Trans>({formatNumber(usdPrice, NumberType.FiatTokenPrice)})</Trans>
+          <Trans>
+            (
+            {formatNumber({
+              input: usdPrice,
+              type: NumberType.FiatTokenPrice,
+            })}
+            )
+          </Trans>
         </ThemedText.BodySmall>
       )}
     </StyledPriceContainer>

src/constants/localCurrencies.tsx

@@ -46,6 +46,31 @@ export type SupportedLocalCurrency = (typeof SUPPORTED_LOCAL_CURRENCIES)[number]
 
 export const DEFAULT_LOCAL_CURRENCY: SupportedLocalCurrency = 'USD'
 
+// some currencies need to be forced to use the narrow symbol and others need to be forced to use symbol
+// for example: when CAD is set to narrowSymbol it is displayed as $ which offers no differentiation from USD
+// but when set to symbol it is displayed as CA$ which is correct
+// On the other hand when TBH is set to symbol it is displayed as THB, but when set to narrowSymbol it is ฿ which is correct
+export const LOCAL_CURRENCY_SYMBOL_DISPLAY_TYPE: Record<SupportedLocalCurrency, 'narrowSymbol' | 'symbol'> = {
+  USD: 'narrowSymbol',
+  EUR: 'narrowSymbol',
+  RUB: 'narrowSymbol',
+  INR: 'narrowSymbol',
+  GBP: 'narrowSymbol',
+  JPY: 'narrowSymbol',
+  VND: 'narrowSymbol',
+  SGD: 'symbol',
+  BRL: 'symbol',
+  HKD: 'symbol',
+  CAD: 'symbol',
+  IDR: 'narrowSymbol',
+  TRY: 'narrowSymbol',
+  NGN: 'narrowSymbol',
+  UAH: 'narrowSymbol',
+  PKR: 'narrowSymbol',
+  AUD: 'symbol',
+  THB: 'narrowSymbol',
+}
+
 export function getLocalCurrencyIcon(localCurrency: SupportedLocalCurrency, size = 20): ReactNode {
   switch (localCurrency) {
     case 'USD':