feat: pool page currency conversion (#7416)

cypress/e2e/add-liquidity.test.ts

@@ -52,7 +52,7 @@ describe('Add Liquidity', () => {
 
       cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/ETH')
       cy.wait('@FeeTierDistribution')
-      cy.get('#add-liquidity-selected-fee .selected-fee-label').should('contain.text', '0.3% fee tier')
+      cy.get('#add-liquidity-selected-fee .selected-fee-label').should('contain.text', '0.30% fee tier')
       cy.get('#add-liquidity-selected-fee .selected-fee-percentage').should('contain.text', '40% select')
     })
   })

src/components/CurrencyInputPanel/index.tsx

@@ -12,7 +12,7 @@ import { ReactNode, useCallback, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
 import { ThemedText } from 'theme/components'
 import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
-import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
+import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
 import { useCurrencyBalance } from '../../state/connection/hooks'
@@ -212,6 +212,7 @@ export default function CurrencyInputPanel({
   const { account, chainId } = useWeb3React()
   const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
   const theme = useTheme()
+  const { formatCurrencyAmount } = useFormatter()
 
   const handleDismissSearch = useCallback(() => {
     setModalOpen(false)
@@ -297,7 +298,13 @@ export default function CurrencyInputPanel({
                       >
                         {Boolean(!hideBalance && currency && selectedCurrencyBalance) &&
                           (renderBalance?.(selectedCurrencyBalance as CurrencyAmount<Currency>) || (
-                            <Trans>Balance: {formatCurrencyAmount(selectedCurrencyBalance, 4)}</Trans>
+                            <Trans>
+                              Balance:{' '}
+                              {formatCurrencyAmount({
+                                amount: selectedCurrencyBalance,
+                                type: NumberType.TokenNonTx,
+                              })}
+                            </Trans>
                           ))}
                       </ThemedText.DeprecatedBody>
                       {Boolean(showMaxButton && selectedCurrencyBalance) && (

src/components/FeeSelector/FeeOption.tsx

@@ -7,6 +7,7 @@ import { PoolState } from 'hooks/usePools'
 import React from 'react'
 import styled from 'styled-components'
 import { ThemedText } from 'theme/components'
+import { useFormatter } from 'utils/formatNumbers'
 
 import { FeeTierPercentageBadge } from './FeeTierPercentageBadge'
 import { FEE_AMOUNT_DETAIL } from './shared'
@@ -30,12 +31,14 @@ interface FeeOptionProps {
 }
 
 export function FeeOption({ feeAmount, active, poolState, distributions, onClick }: FeeOptionProps) {
+  const { formatDelta } = useFormatter()
+
   return (
     <ButtonRadioChecked active={active} onClick={onClick}>
       <AutoColumn gap="sm" justify="flex-start">
         <AutoColumn justify="flex-start" gap="6px">
           <ResponsiveText>
-            <Trans>{FEE_AMOUNT_DETAIL[feeAmount].label}%</Trans>
+            <Trans>{formatDelta(parseFloat(FEE_AMOUNT_DETAIL[feeAmount].label))}</Trans>
           </ResponsiveText>
           <ThemedText.DeprecatedMain fontWeight={485} fontSize="12px" textAlign="left">
             {FEE_AMOUNT_DETAIL[feeAmount].description}

src/components/FeeSelector/index.tsx

@@ -16,6 +16,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Box } from 'rebass'
 import styled, { keyframes } from 'styled-components'
 import { ThemedText } from 'theme/components'
+import { useFormatter } from 'utils/formatNumbers'
 
 import { FeeOption } from './FeeOption'
 import { FeeTierPercentageBadge } from './FeeTierPercentageBadge'
@@ -62,6 +63,7 @@ export default function FeeSelector({
 }) {
   const { chainId } = useWeb3React()
   const trace = useTrace()
+  const { formatDelta } = useFormatter()
 
   const { isLoading, isError, largestUsageFeeTier, distributions } = useFeeTierDistribution(currencyA, currencyB)
 
@@ -161,7 +163,7 @@ export default function FeeSelector({
               ) : (
                 <>
                   <ThemedText.DeprecatedLabel className="selected-fee-label">
-                    <Trans>{FEE_AMOUNT_DETAIL[feeAmount].label}% fee tier</Trans>
+                    <Trans>{formatDelta(parseFloat(FEE_AMOUNT_DETAIL[feeAmount].label))} fee tier</Trans>
                   </ThemedText.DeprecatedLabel>
                   <Box style={{ width: 'fit-content', marginTop: '8px' }} className="selected-fee-percentage">
                     {distributions && (

src/components/LiquidityChartRangeInput/index.tsx

@@ -3,7 +3,6 @@ import { Currency, Price, Token } from '@uniswap/sdk-core'
 import { FeeAmount } from '@uniswap/v3-sdk'
 import { AutoColumn, ColumnCenter } from 'components/Column'
 import Loader from 'components/Icons/LoadingSpinner'
-import { format } from 'd3'
 import { useColor } from 'hooks/useColor'
 import { saturate } from 'polished'
 import { ReactNode, useCallback, useMemo } from 'react'
@@ -12,6 +11,7 @@ import { batch } from 'react-redux'
 import { Bound } from 'state/mint/v3/actions'
 import styled, { useTheme } from 'styled-components'
 import { ThemedText } from 'theme/components'
+import { useFormatter } from 'utils/formatNumbers'
 
 import { Chart } from './Chart'
 import { useDensityChartData } from './hooks'
@@ -142,6 +142,7 @@ export default function LiquidityChartRangeInput({
       : undefined
   }, [isSorted, priceLower, priceUpper])
 
+  const { formatDelta } = useFormatter()
   const brushLabelValue = useCallback(
     (d: 'w' | 'e', x: number) => {
       if (!price) return ''
@@ -151,9 +152,9 @@ export default function LiquidityChartRangeInput({
 
       const percent = (x < price ? -1 : 1) * ((Math.max(x, price) - Math.min(x, price)) / price) * 100
 
-      return price ? `${format(Math.abs(percent) > 1 ? '.2~s' : '.2~f')(percent)}%` : ''
+      return price ? `${(Math.sign(percent) < 0 ? '-' : '') + formatDelta(percent)}` : ''
     },
-    [isSorted, price, ticksAtLimit]
+    [formatDelta, isSorted, price, ticksAtLimit]
   )
 
   const isUninitialized = !currencyA || !currencyB || (formattedData === undefined && !isLoading)

src/components/PositionListItem/index.tsx

@@ -173,7 +173,7 @@ export default function PositionListItem({
   tickLower,
   tickUpper,
 }: PositionListItemProps) {
-  const { formatTickPrice } = useFormatter()
+  const { formatDelta, formatTickPrice } = useFormatter()
 
   const token0 = useToken(token0Address)
   const token1 = useToken(token1Address)
@@ -216,7 +216,7 @@ export default function PositionListItem({
           </ThemedText.SubHeader>
 
           <FeeTierText>
-            <Trans>{new Percent(feeAmount, 1_000_000).toSignificant()}%</Trans>
+            <Trans>{formatDelta(parseFloat(new Percent(feeAmount, 1_000_000).toSignificant()))}</Trans>
           </FeeTierText>
         </PrimaryPositionIdData>
         <RangeBadge removed={removed} inRange={!outOfRange} />

src/components/PositionPreview/index.tsx

@@ -15,7 +15,7 @@ import { ReactNode, useCallback, useState } from 'react'
 import { Bound } from 'state/mint/v3/actions'
 import { useTheme } from 'styled-components'
 import { ThemedText } from 'theme/components'
-import { useFormatter } from 'utils/formatNumbers'
+import { NumberType, useFormatter } from 'utils/formatNumbers'
 import { unwrappedToken } from 'utils/unwrappedToken'
 
 export const PositionPreview = ({
@@ -32,7 +32,7 @@ export const PositionPreview = ({
   ticksAtLimit: { [bound: string]: boolean | undefined }
 }) => {
   const theme = useTheme()
-  const { formatTickPrice } = useFormatter()
+  const { formatCurrencyAmount, formatDelta, formatPrice, formatTickPrice } = useFormatter()
 
   const currency0 = unwrappedToken(position.pool.token0)
   const currency1 = unwrappedToken(position.pool.token1)
@@ -87,7 +87,9 @@ export const PositionPreview = ({
               <ThemedText.DeprecatedLabel ml="8px">{currency0?.symbol}</ThemedText.DeprecatedLabel>
             </RowFixed>
             <RowFixed>
-              <ThemedText.DeprecatedLabel mr="8px">{position.amount0.toSignificant(4)}</ThemedText.DeprecatedLabel>
+              <ThemedText.DeprecatedLabel mr="8px">
+                {formatCurrencyAmount({ amount: position.amount0 })}
+              </ThemedText.DeprecatedLabel>
             </RowFixed>
           </RowBetween>
           <RowBetween>
@@ -96,7 +98,9 @@ export const PositionPreview = ({
               <ThemedText.DeprecatedLabel ml="8px">{currency1?.symbol}</ThemedText.DeprecatedLabel>
             </RowFixed>
             <RowFixed>
-              <ThemedText.DeprecatedLabel mr="8px">{position.amount1.toSignificant(4)}</ThemedText.DeprecatedLabel>
+              <ThemedText.DeprecatedLabel mr="8px">
+                {formatCurrencyAmount({ amount: position.amount1 })}
+              </ThemedText.DeprecatedLabel>
             </RowFixed>
           </RowBetween>
           <Break />
@@ -105,7 +109,7 @@ export const PositionPreview = ({
               <Trans>Fee tier</Trans>
             </ThemedText.DeprecatedLabel>
             <ThemedText.DeprecatedLabel>
-              <Trans>{position?.pool?.fee / BIPS_BASE}%</Trans>
+              <Trans>{formatDelta(position?.pool?.fee / BIPS_BASE)}</Trans>
             </ThemedText.DeprecatedLabel>
           </RowBetween>
         </AutoColumn>
@@ -173,7 +177,10 @@ export const PositionPreview = ({
             <ThemedText.DeprecatedMain fontSize="12px">
               <Trans>Current price</Trans>
             </ThemedText.DeprecatedMain>
-            <ThemedText.DeprecatedMediumHeader>{`${price.toSignificant(5)} `}</ThemedText.DeprecatedMediumHeader>
+            <ThemedText.DeprecatedMediumHeader>{`${formatPrice({
+              price,
+              type: NumberType.TokenTx,
+            })} `}</ThemedText.DeprecatedMediumHeader>
             <ThemedText.DeprecatedMain textAlign="center" fontSize="12px">
               <Trans>
                 {quoteCurrency.symbol} per {baseCurrency.symbol}

src/pages/AddLiquidity/index.tsx

@@ -28,6 +28,7 @@ import styled, { useTheme } from 'styled-components'
 import { ThemedText } from 'theme/components'
 import { addressesAreEquivalent } from 'utils/addressesAreEquivalent'
 import { WrongChainError } from 'utils/errors'
+import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 import { ButtonError, ButtonLight, ButtonPrimary, ButtonText } from '../../components/Button'
 import { BlueCard, OutlineCard, YellowCard } from '../../components/Card'
@@ -154,6 +155,11 @@ function AddLiquidity() {
     existingPosition
   )
 
+  const { formatPrice } = useFormatter()
+  const formattedPrice = formatPrice({
+    price: invertPrice ? price?.invert() : price,
+    type: NumberType.TokenTx,
+  })
   const { onFieldAInput, onFieldBInput, onLeftRangeInput, onRightRangeInput, onStartPriceInput } =
     useV3MintActionHandlers(noLiquidity)
 
@@ -765,12 +771,7 @@ function AddLiquidity() {
                                 Current price:
                               </ThemedText.DeprecatedMain>
                               <ThemedText.DeprecatedBody fontWeight={535} fontSize={20} color="text1">
-                                {price && (
-                                  <HoverInlineText
-                                    maxCharacters={20}
-                                    text={invertPrice ? price.invert().toSignificant(6) : price.toSignificant(6)}
-                                  />
-                                )}
+                                {price && <HoverInlineText maxCharacters={20} text={formattedPrice} />}
                               </ThemedText.DeprecatedBody>
                               {baseCurrency && (
                                 <ThemedText.DeprecatedBody color="text2" fontSize={12}>

src/pages/Pool/PositionPage.test.tsx

@@ -7,9 +7,9 @@ import { PoolState, usePool } from 'hooks/usePools'
 import { useV3PositionFees } from 'hooks/useV3PositionFees'
 import * as useV3Positions from 'hooks/useV3Positions'
 import { mocked } from 'test-utils/mocked'
-import { fireEvent, render, screen } from 'test-utils/render'
+import { fireEvent, render, renderHook, screen } from 'test-utils/render'
 import { PositionDetails } from 'types/position'
-import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
+import { useFormatter } from 'utils/formatNumbers'
 
 import PositionPage from './PositionPage'
 
@@ -68,13 +68,14 @@ describe('position page', () => {
       return [USDC_AMOUNT, WETH_AMOUNT]
     })
 
+    const { formatCurrencyAmount } = renderHook(() => useFormatter()).result.current
     render(<PositionPage />)
 
     const collectFeesButton = screen.queryByTestId('collect-fees-button') as HTMLButtonElement
     expect(collectFeesButton).toBeInTheDocument()
     expect(screen.getByText('Collect fees')).toBeInTheDocument()
-    expect(screen.getByText(formatCurrencyAmount(USDC_AMOUNT, 4))).toBeInTheDocument()
-    expect(screen.getByText(formatCurrencyAmount(WETH_AMOUNT, 4))).toBeInTheDocument()
+    expect(screen.getByText(formatCurrencyAmount({ amount: USDC_AMOUNT }))).toBeInTheDocument()
+    expect(screen.getByText(formatCurrencyAmount({ amount: WETH_AMOUNT }))).toBeInTheDocument()
     fireEvent.click(collectFeesButton)
     expect(screen.getByText('Collecting fees will withdraw currently available fees for you.')).toBeInTheDocument()
     const modalCollectFeesButton = screen.queryByTestId('modal-collect-fees-button') as HTMLButtonElement

src/pages/Pool/PositionPage.tsx

@@ -36,7 +36,6 @@ import styled, { useTheme } from 'styled-components'
 import { ExternalLink, HideExtraSmall, HideSmall, StyledRouterLink, ThemedText } from 'theme/components'
 import { currencyId } from 'utils/currencyId'
 import { WrongChainError } from 'utils/errors'
-import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 import { unwrappedToken } from 'utils/unwrappedToken'
 
@@ -397,7 +396,7 @@ function PositionPageContent() {
   const { tokenId: tokenIdFromUrl } = useParams<{ tokenId?: string }>()
   const { chainId, account, provider } = useWeb3React()
   const theme = useTheme()
-  const { formatTickPrice } = useFormatter()
+  const { formatCurrencyAmount, formatDelta, formatTickPrice } = useFormatter()
 
   const parsedTokenId = parseTokenId(tokenIdFromUrl)
   const { loading, position: positionDetails } = useV3PositionFromTokenId(parsedTokenId)
@@ -606,7 +605,7 @@ function PositionPageContent() {
               <RowFixed>
                 <CurrencyLogo currency={feeValueUpper?.currency} size="20px" style={{ marginRight: '0.5rem' }} />
                 <ThemedText.DeprecatedMain>
-                  {feeValueUpper ? formatCurrencyAmount(feeValueUpper, 4) : '-'}
+                  {feeValueUpper ? formatCurrencyAmount({ amount: feeValueUpper }) : '-'}
                 </ThemedText.DeprecatedMain>
               </RowFixed>
               <ThemedText.DeprecatedMain>{feeValueUpper?.currency?.symbol}</ThemedText.DeprecatedMain>
@@ -615,7 +614,7 @@ function PositionPageContent() {
               <RowFixed>
                 <CurrencyLogo currency={feeValueLower?.currency} size="20px" style={{ marginRight: '0.5rem' }} />
                 <ThemedText.DeprecatedMain>
-                  {feeValueLower ? formatCurrencyAmount(feeValueLower, 4) : '-'}
+                  {feeValueLower ? formatCurrencyAmount({ amount: feeValueLower }) : '-'}
                 </ThemedText.DeprecatedMain>
               </RowFixed>
               <ThemedText.DeprecatedMain>{feeValueLower?.currency?.symbol}</ThemedText.DeprecatedMain>
@@ -697,7 +696,7 @@ function PositionPageContent() {
                   </ThemedText.DeprecatedLabel>
                   <Badge style={{ marginRight: '8px' }}>
                     <BadgeText>
-                      <Trans>{new Percent(feeAmount, 1_000_000).toSignificant()}%</Trans>
+                      <Trans>{formatDelta(parseFloat(new Percent(feeAmount, 1_000_000).toSignificant()))}</Trans>
                     </BadgeText>
                   </Badge>
                   <RangeBadge removed={removed} inRange={inRange} />
@@ -780,11 +779,16 @@ function PositionPageContent() {
                       </Label>
                       {fiatValueOfLiquidity?.greaterThan(new Fraction(1, 100)) ? (
                         <ThemedText.DeprecatedLargeHeader fontSize="36px" fontWeight={535}>
-                          <Trans>${fiatValueOfLiquidity.toFixed(2, { groupSeparator: ',' })}</Trans>
+                          <Trans>
+                            {formatCurrencyAmount({
+                              amount: fiatValueOfLiquidity,
+                              type: NumberType.FiatTokenPrice,
+                            })}
+                          </Trans>
                         </ThemedText.DeprecatedLargeHeader>
                       ) : (
                         <ThemedText.DeprecatedLargeHeader color={theme.neutral1} fontSize="36px" fontWeight={535}>
-                          <Trans>$-</Trans>
+                          <Trans>-</Trans>
                         </ThemedText.DeprecatedLargeHeader>
                       )}
                     </AutoColumn>
@@ -794,7 +798,7 @@ function PositionPageContent() {
                           <LinkedCurrency chainId={chainId} currency={currencyQuote} />
                           <RowFixed>
                             <ThemedText.DeprecatedMain>
-                              {inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)}
+                              {formatCurrencyAmount({ amount: inverted ? position?.amount0 : position?.amount1 })}
                             </ThemedText.DeprecatedMain>
                             {typeof ratio === 'number' && !removed ? (
                               <Badge style={{ marginLeft: '10px' }}>
@@ -809,7 +813,7 @@ function PositionPageContent() {
                           <LinkedCurrency chainId={chainId} currency={currencyBase} />
                           <RowFixed>
                             <ThemedText.DeprecatedMain>
-                              {inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)}
+                              {formatCurrencyAmount({ amount: inverted ? position?.amount1 : position?.amount0 })}
                             </ThemedText.DeprecatedMain>
                             {typeof ratio === 'number' && !removed ? (
                               <Badge style={{ marginLeft: '10px' }}>
@@ -834,11 +838,13 @@ function PositionPageContent() {
                           </Label>
                           {fiatValueOfFees?.greaterThan(new Fraction(1, 100)) ? (
                             <ThemedText.DeprecatedLargeHeader color={theme.success} fontSize="36px" fontWeight={535}>
-                              <Trans>${fiatValueOfFees.toFixed(2, { groupSeparator: ',' })}</Trans>
+                              <Trans>
+                                {formatCurrencyAmount({ amount: fiatValueOfFees, type: NumberType.FiatTokenPrice })}
+                              </Trans>
                             </ThemedText.DeprecatedLargeHeader>
                           ) : (
                             <ThemedText.DeprecatedLargeHeader color={theme.neutral1} fontSize="36px" fontWeight={535}>
-                              <Trans>$-</Trans>
+                              <Trans>-</Trans>
                             </ThemedText.DeprecatedLargeHeader>
                           )}
                         </AutoColumn>
@@ -888,7 +894,7 @@ function PositionPageContent() {
                           </RowFixed>
                           <RowFixed>
                             <ThemedText.DeprecatedMain>
-                              {feeValueUpper ? formatCurrencyAmount(feeValueUpper, 4) : '-'}
+                              {feeValueUpper ? formatCurrencyAmount({ amount: feeValueUpper }) : '-'}
                             </ThemedText.DeprecatedMain>
                           </RowFixed>
                         </RowBetween>
@@ -903,7 +909,7 @@ function PositionPageContent() {
                           </RowFixed>
                           <RowFixed>
                             <ThemedText.DeprecatedMain>
-                              {feeValueLower ? formatCurrencyAmount(feeValueLower, 4) : '-'}
+                              {feeValueLower ? formatCurrencyAmount({ amount: feeValueLower }) : '-'}
                             </ThemedText.DeprecatedMain>
                           </RowFixed>
                         </RowBetween>

src/pages/RemoveLiquidity/V3.tsx

@@ -12,7 +12,6 @@ import { LightCard } from 'components/Card'
 import { AutoColumn } from 'components/Column'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
 import { Break } from 'components/earn/styled'
-import FormattedCurrencyAmount from 'components/FormattedCurrencyAmount'
 import Loader from 'components/Icons/LoadingSpinner'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
 import { AddRemoveTabs } from 'components/NavigationTabs'
@@ -35,6 +34,7 @@ import { useUserSlippageToleranceWithDefault } from 'state/user/hooks'
 import { useTheme } from 'styled-components'
 import { ThemedText } from 'theme/components'
 import { WrongChainError } from 'utils/errors'
+import { useFormatter } from 'utils/formatNumbers'
 
 import TransactionConfirmationModal, { ConfirmationModalContent } from '../../components/TransactionConfirmationModal'
 import { WRAPPED_NATIVE_CURRENCY } from '../../constants/tokens'
@@ -74,6 +74,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
   const theme = useTheme()
   const { account, chainId, provider } = useWeb3React()
   const trace = useTrace()
+  const { formatCurrencyAmount } = useFormatter()
 
   // flag for receiving WETH
   const [receiveWETH, setReceiveWETH] = useState(false)
@@ -223,7 +224,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
           </Text>
           <RowFixed>
             <Text fontSize={16} fontWeight={535} marginLeft="6px">
-              {liquidityValue0 && <FormattedCurrencyAmount currencyAmount={liquidityValue0} />}
+              {liquidityValue0 && formatCurrencyAmount({ amount: liquidityValue0 })}
             </Text>
             <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={liquidityValue0?.currency} />
           </RowFixed>
@@ -234,7 +235,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
           </Text>
           <RowFixed>
             <Text fontSize={16} fontWeight={535} marginLeft="6px">
-              {liquidityValue1 && <FormattedCurrencyAmount currencyAmount={liquidityValue1} />}
+              {liquidityValue1 && formatCurrencyAmount({ amount: liquidityValue1 })}
             </Text>
             <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={liquidityValue1?.currency} />
           </RowFixed>
@@ -250,7 +251,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
               </Text>
               <RowFixed>
                 <Text fontSize={16} fontWeight={535} marginLeft="6px">
-                  {feeValue0 && <FormattedCurrencyAmount currencyAmount={feeValue0} />}
+                  {feeValue0 && formatCurrencyAmount({ amount: feeValue0 })}
                 </Text>
                 <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={feeValue0?.currency} />
               </RowFixed>
@@ -261,7 +262,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
               </Text>
               <RowFixed>
                 <Text fontSize={16} fontWeight={535} marginLeft="6px">
-                  {feeValue1 && <FormattedCurrencyAmount currencyAmount={feeValue1} />}
+                  {feeValue1 && formatCurrencyAmount({ amount: feeValue1 })}
                 </Text>
                 <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={feeValue1?.currency} />
               </RowFixed>
@@ -360,7 +361,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
                     </Text>
                     <RowFixed>
                       <Text fontSize={16} fontWeight={535} marginLeft="6px">
-                        {liquidityValue0 && <FormattedCurrencyAmount currencyAmount={liquidityValue0} />}
+                        {liquidityValue0 && formatCurrencyAmount({ amount: liquidityValue0 })}
                       </Text>
                       <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={liquidityValue0?.currency} />
                     </RowFixed>
@@ -371,7 +372,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
                     </Text>
                     <RowFixed>
                       <Text fontSize={16} fontWeight={535} marginLeft="6px">
-                        {liquidityValue1 && <FormattedCurrencyAmount currencyAmount={liquidityValue1} />}
+                        {liquidityValue1 && formatCurrencyAmount({ amount: liquidityValue1 })}
                       </Text>
                       <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={liquidityValue1?.currency} />
                     </RowFixed>
@@ -385,7 +386,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
                         </Text>
                         <RowFixed>
                           <Text fontSize={16} fontWeight={535} marginLeft="6px">
-                            {feeValue0 && <FormattedCurrencyAmount currencyAmount={feeValue0} />}
+                            {feeValue0 && formatCurrencyAmount({ amount: feeValue0 })}
                           </Text>
                           <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={feeValue0?.currency} />
                         </RowFixed>
@@ -396,7 +397,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
                         </Text>
                         <RowFixed>
                           <Text fontSize={16} fontWeight={535} marginLeft="6px">
-                            {feeValue1 && <FormattedCurrencyAmount currencyAmount={feeValue1} />}
+                            {feeValue1 && formatCurrencyAmount({ amount: feeValue1 })}
                           </Text>
                           <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={feeValue1?.currency} />
                         </RowFixed>