fix(ui): display wrapped currency symbol with current chain (#3441)

src/pages/Pool/PositionPage.tsx

@@ -23,6 +23,7 @@ import useUSDCPrice from 'hooks/useUSDCPrice'
 import { useV3PositionFees } from 'hooks/useV3PositionFees'
 import { useV3PositionFromTokenId } from 'hooks/useV3Positions'
 import { useSingleCallResult } from 'lib/hooks/multicall'
+import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import ReactGA from 'react-ga'
 import { Link, RouteComponentProps } from 'react-router-dom'
@@ -345,6 +346,8 @@ export function PositionPage({
 
   // flag for receiving WETH
   const [receiveWETH, setReceiveWETH] = useState(false)
+  const nativeCurrency = useNativeCurrency()
+  const nativeWrappedSymbol = nativeCurrency.wrapped.symbol
 
   // construct Position from details returned
   const [poolState, pool] = usePool(token0 ?? undefined, token1 ?? undefined, feeAmount)
@@ -778,7 +781,7 @@ export function PositionPage({
                     <AutoColumn gap="md">
                       <RowBetween>
                         <ThemedText.Main>
-                          <Trans>Collect as WETH</Trans>
+                          <Trans>Collect as {nativeWrappedSymbol}</Trans>
                         </ThemedText.Main>
                         <Toggle
                           id="receive-as-weth"

src/pages/RemoveLiquidity/V3.tsx

@@ -22,6 +22,7 @@ import useDebouncedChangeHandler from 'hooks/useDebouncedChangeHandler'
 import useTheme from 'hooks/useTheme'
 import useTransactionDeadline from 'hooks/useTransactionDeadline'
 import { useV3PositionFromTokenId } from 'hooks/useV3Positions'
+import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { useCallback, useMemo, useState } from 'react'
 import ReactGA from 'react-ga'
 import { Redirect, RouteComponentProps } from 'react-router-dom'
@@ -69,6 +70,8 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
 
   // flag for receiving WETH
   const [receiveWETH, setReceiveWETH] = useState(false)
+  const nativeCurrency = useNativeCurrency()
+  const nativeWrappedSymbol = nativeCurrency.wrapped.symbol
 
   // burn state
   const { percent } = useBurnV3State()
@@ -394,7 +397,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
               {showCollectAsWeth && (
                 <RowBetween>
                   <ThemedText.Main>
-                    <Trans>Collect as WETH</Trans>
+                    <Trans>Collect as {nativeWrappedSymbol}</Trans>
                   </ThemedText.Main>
                   <Toggle
                     id="receive-as-weth"