ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: pool page currency conversion (#7416)

Browse Source
This commit is contained in:
Jack Short 2023-10-31 13:44:38 -04:00 committed by GitHub
parent 0937e35095
commit 719f82c7c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 77 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/e2e/add-liquidity.test.ts
View File

@ -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')
})
})

11
src/components/CurrencyInputPanel/index.tsx
View File

@ -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) && (

5
src/components/FeeSelector/FeeOption.tsx
View File

@ -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}

4
src/components/FeeSelector/index.tsx
View File

@ -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 && (

7
src/components/LiquidityChartRangeInput/index.tsx
View File

@ -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)

4
src/components/PositionListItem/index.tsx
View File

@ -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} />

19
src/components/PositionPreview/index.tsx
View File

@ -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}

13
src/pages/AddLiquidity/index.tsx
View File

@ -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}>

9
src/pages/Pool/PositionPage.test.tsx
View File

@ -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

32
src/pages/Pool/PositionPage.tsx
View File

@ -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>

19
src/pages/RemoveLiquidity/V3.tsx
View File

@ -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>