feat: allow WETH when adding liquidity to an existsing LP position

src/pages/AddLiquidity/WrappedCurrencyToggle.tsx

@@ -0,0 +1,65 @@
+import { Trans } from '@lingui/macro'
+import { useWeb3React } from '@web3-react/core'
+import { ToggleElement, ToggleWrapper } from 'components/Toggle/MultiToggle'
+import { useCurrency } from 'hooks/Tokens'
+
+import { WRAPPED_NATIVE_CURRENCY } from '../../constants/tokens'
+
+function isNative(currencyId?: string) {
+  return currencyId === 'ETH'
+}
+
+function isWrappedNative(currencyId?: string, chainId?: number) {
+  return chainId !== undefined && currencyId === WRAPPED_NATIVE_CURRENCY[chainId]?.address
+}
+
+type WrappedCurrencyToggleProps = {
+  currencyIdA?: string
+  currencyIdB?: string
+  onChangeCurrencies: (CurrencyAId?: string, currencyBId?: string) => void
+}
+
+export function WrappedCurrencyToggle({ currencyIdA, currencyIdB, onChangeCurrencies }: WrappedCurrencyToggleProps) {
+  const { chainId } = useWeb3React()
+
+  // Get native and wrapped native Currencies
+  const native = useCurrency('ETH', chainId)
+  const wrappedNative = chainId ? WRAPPED_NATIVE_CURRENCY[chainId] : undefined
+
+  // checking to see if currencyIdA of currencyIdB is native or wrapped native
+  const currencyIsNative = isNative(currencyIdA) || isNative(currencyIdB)
+  const currencyIsWrappedNative = isWrappedNative(currencyIdA, chainId) || isWrappedNative(currencyIdB, chainId)
+
+  if (!currencyIsNative && !currencyIsWrappedNative) return null
+
+  const handleToggle = () => {
+    if (currencyIsNative) {
+      if (isNative(currencyIdA)) onChangeCurrencies(wrappedNative?.address, currencyIdB)
+      else onChangeCurrencies(currencyIdA, wrappedNative?.address)
+    }
+
+    if (currencyIsWrappedNative) {
+      if (isWrappedNative(currencyIdA)) onChangeCurrencies('ETH', currencyIdA)
+      else onChangeCurrencies(currencyIdA, 'ETH')
+    }
+  }
+
+  if (!currencyIsNative && !currencyIsWrappedNative) return null
+
+  return (
+    <>
+      {native && wrappedNative ? (
+        <div style={{ width: 'fit-content', display: 'flex', alignItems: 'center' }} onClick={handleToggle}>
+          <ToggleWrapper width="fit-content">
+            <ToggleElement isActive={currencyIsNative} fontSize="12px">
+              <Trans>{native.symbol}</Trans>
+            </ToggleElement>
+            <ToggleElement isActive={currencyIsWrappedNative} fontSize="12px">
+              <Trans>{wrappedNative.symbol}</Trans>
+            </ToggleElement>
+          </ToggleWrapper>
+        </div>
+      ) : null}
+    </>
+  )
+}

src/pages/AddLiquidity/index.tsx

@@ -66,6 +66,7 @@ import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import { Dots } from '../Pool/styled'
 import { Review } from './Review'
 import { DynamicSection, MediumOnly, ResponsiveTwoColumns, ScrollablePage, StyledInput, Wrapper } from './styled'
+import { WrappedCurrencyToggle } from './WrappedCurrencyToggle'
 
 const DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE = new Percent(50, 10_000)
 
@@ -86,8 +87,8 @@ export default function AddLiquidityWrapper() {
 function AddLiquidity() {
   const navigate = useNavigate()
   const {
-    currencyIdA,
-    currencyIdB,
+    currencyIdA: currencyIdAParam,
+    currencyIdB: currencyIdBParam,
     feeAmount: feeAmountFromUrl,
     tokenId,
   } = useParams<{
@@ -116,6 +117,8 @@ function AddLiquidity() {
     feeAmountFromUrl && Object.values(FeeAmount).includes(parseFloat(feeAmountFromUrl))
       ? parseFloat(feeAmountFromUrl)
       : undefined
+  const [currencyIdA, setCurrencyIdA] = useState<string | undefined>(currencyIdAParam)
+  const [currencyIdB, setCurrencyIdB] = useState<string | undefined>(currencyIdBParam)
 
   const baseCurrency = useCurrency(currencyIdA)
   const currencyB = useCurrency(currencyIdB)
@@ -564,6 +567,11 @@ function AddLiquidity() {
     addressesAreEquivalent(owner, account) || addressesAreEquivalent(existingPositionDetails?.operator, account)
   const showOwnershipWarning = Boolean(hasExistingPosition && account && !ownsNFT)
 
+  const handleChangeCurrencies = (currencyA?: string, currencyB?: string) => {
+    setCurrencyIdA(currencyA)
+    setCurrencyIdB(currencyB)
+  }
+
   return (
     <>
       <ScrollablePage>
@@ -863,9 +871,17 @@ function AddLiquidity() {
               <div>
                 <DynamicSection disabled={invalidPool || invalidRange || (noLiquidity && !startPriceTypedValue)}>
                   <AutoColumn gap="md">
-                    <ThemedText.DeprecatedLabel>
-                      {hasExistingPosition ? <Trans>Add more liquidity</Trans> : <Trans>Deposit amounts</Trans>}
-                    </ThemedText.DeprecatedLabel>
+                    <Row justify="space-between">
+                      <ThemedText.DeprecatedLabel>
+                        {hasExistingPosition ? <Trans>Add more liquidity</Trans> : <Trans>Deposit amounts</Trans>}
+                      </ThemedText.DeprecatedLabel>
+
+                      <WrappedCurrencyToggle
+                        currencyIdA={currencyIdA}
+                        currencyIdB={currencyIdB}
+                        onChangeCurrencies={handleChangeCurrencies}
+                      />
+                    </Row>
 
                     <CurrencyInputPanel
                       value={formattedAmounts[Field.CURRENCY_A]}