fix weth/eth bug

closes #47

src/components/SearchModal/CommonBases.tsx

@@ -56,7 +56,7 @@ export default function CommonBases({
             ETH
           </Text>
         </BaseWrapper>
-        {(chainId ? SUGGESTED_BASES[chainId] : []).map((token: Token) => {
+        {(typeof chainId === 'number' ? SUGGESTED_BASES[chainId] ?? [] : []).map((token: Token) => {
           const selected = selectedCurrency instanceof Token && selectedCurrency.address === token.address
           return (
             <BaseWrapper onClick={() => !selected && onSelect(token)} disable={selected} key={token.address}>

src/constants/index.ts

@@ -106,9 +106,8 @@ export const CUSTOM_BASES: { [chainId in ChainId]?: { [tokenAddress: string]: To
 }
 
 // used for display in the default list when adding liquidity
-export const SUGGESTED_BASES: ChainTokenList = {
-  ...WETH_ONLY,
-  [ChainId.MAINNET]: [...WETH_ONLY[ChainId.MAINNET], DAI, USDC, USDT, WBTC],
+export const SUGGESTED_BASES: Partial<ChainTokenList> = {
+  [ChainId.MAINNET]: [DAI, USDC, USDT, WBTC],
 }
 
 // used to construct the list of all pairs we consider by default in the frontend

src/pages/AddLiquidity/index.tsx

-import { TransactionResponse } from '@ethersproject/providers'
-import { Currency, TokenAmount, ETHER } from '@uniswap/sdk-core'
 import React, { useCallback, useContext, useMemo, useState } from 'react'
+import { TransactionResponse } from '@ethersproject/providers'
+import { Currency, TokenAmount, ETHER, currencyEquals } from '@uniswap/sdk-core'
 import { WETH9 } from '@uniswap/sdk-core'
 import { Link2, AlertTriangle } from 'react-feather'
 import ReactGA from 'react-ga'
@@ -80,11 +80,15 @@ export default function AddLiquidity({
 
   // keep track for UI display purposes of user selected base currency
   const [baseCurrency, setBaseCurrency] = useState(currencyA)
-  const quoteCurrency = useMemo(() => (baseCurrency === currencyA ? currencyB : currencyA), [
-    baseCurrency,
-    currencyA,
-    currencyB,
-  ])
+  const quoteCurrency = useMemo(
+    () =>
+      currencyA && currencyB && baseCurrency
+        ? currencyEquals(baseCurrency, currencyA)
+          ? currencyB
+          : currencyA
+        : undefined,
+    [currencyA, currencyB, baseCurrency]
+  )
 
   // mint state
   const { independentField, typedValue, startPriceTypedValue } = useMintState()
@@ -247,38 +251,53 @@ export default function AddLiquidity({
     !depositBDisabled ? currencies[Field.CURRENCY_B]?.symbol : ''
   }`
 
-  const handleCurrencyASelect = useCallback(
-    (currencyA: Currency) => {
-      const newCurrencyIdA = currencyId(currencyA)
-      //switch order if same selected
-      if (newCurrencyIdA === currencyIdB) {
-        history.push(`/add/${currencyIdB}/${currencyIdA}`)
-      } else if (chainId && newCurrencyIdA === WETH9[chainId]?.address && currencyIdB === 'ETH') {
-        // prevent eth / weth
-        history.push(`/add/${newCurrencyIdA}`)
+  const handleCurrencySelect = useCallback(
+    (currencyNew: Currency, currencyIdOther?: string): (string | undefined)[] => {
+      const currencyIdNew = currencyId(currencyNew)
+
+      if (currencyIdNew === currencyIdOther) {
+        // not ideal, but for now clobber the other if the currency ids are equal
+        return [currencyIdNew, undefined]
+      } else {
+        // prevent weth + eth
+        const isETHOrWETHNew =
+          currencyIdNew === 'ETH' || (chainId !== undefined && currencyIdNew === WETH9[chainId]?.address)
+        const isETHOrWETHOther =
+          currencyIdOther !== undefined &&
+          (currencyIdOther === 'ETH' || (chainId !== undefined && currencyIdOther === WETH9[chainId]?.address))
+
+        if (isETHOrWETHNew && isETHOrWETHOther) {
+          return [currencyIdNew, undefined]
         } else {
-        history.push(`/add/${newCurrencyIdA}/${currencyIdB ?? 'ETH'}`)
+          return [currencyIdNew, currencyIdOther]
+        }
       }
     },
-    [currencyIdB, chainId, history, currencyIdA]
+    [chainId]
   )
-  const handleCurrencyBSelect = useCallback(
-    (currencyB: Currency) => {
-      const newCurrencyIdB = currencyId(currencyB)
-      if (currencyIdA === newCurrencyIdB) {
-        if (currencyIdB) {
-          history.push(`/add/${currencyIdB}/${newCurrencyIdB}`)
+
+  const handleCurrencyASelect = useCallback(
+    (currencyANew: Currency) => {
+      const [idA, idB] = handleCurrencySelect(currencyANew, currencyIdB)
+      if (idB === undefined) {
+        history.push(`/add/${idA}`)
       } else {
-          history.push(`/add/${newCurrencyIdB}`)
+        history.push(`/add/${idA}/${idB}`)
       }
-      } else if (chainId && newCurrencyIdB === WETH9[chainId]?.address && currencyIdA === 'ETH') {
-        // prevent eth / weth
-        history.push(`/add/${newCurrencyIdB}`)
+    },
+    [handleCurrencySelect, currencyIdB, history]
+  )
+
+  const handleCurrencyBSelect = useCallback(
+    (currencyBNew: Currency) => {
+      const [idB, idA] = handleCurrencySelect(currencyBNew, currencyIdA)
+      if (idA === undefined) {
+        history.push(`/add/${idB}`)
       } else {
-        history.push(`/add/${currencyIdA ?? 'ETH'}/${newCurrencyIdB}`)
+        history.push(`/add/${idA}/${idB}`)
       }
     },
-    [currencyIdA, chainId, currencyIdB, history]
+    [handleCurrencySelect, currencyIdA, history]
   )
 
   const handleFeePoolSelect = useCallback(

src/pages/AddLiquidity/redirects.tsx

+import { useActiveWeb3React } from 'hooks'
 import React from 'react'
 import { Redirect, RouteComponentProps } from 'react-router-dom'
 import AddLiquidity from './index'
+import { WETH9 } from '@uniswap/sdk-core'
 
 export function RedirectDuplicateTokenIds(
   props: RouteComponentProps<{ currencyIdA: string; currencyIdB: string; feeAmount?: string }>
@@ -11,7 +13,17 @@ export function RedirectDuplicateTokenIds(
     },
   } = props
 
-  if (currencyIdA && currencyIdB && currencyIdA.toLowerCase() === currencyIdB.toLowerCase()) {
+  const { chainId } = useActiveWeb3React()
+
+  // prevent weth + eth
+  const isETHOrWETHA = currencyIdA === 'ETH' || (chainId !== undefined && currencyIdA === WETH9[chainId]?.address)
+  const isETHOrWETHB = currencyIdB === 'ETH' || (chainId !== undefined && currencyIdB === WETH9[chainId]?.address)
+
+  if (
+    currencyIdA &&
+    currencyIdB &&
+    (currencyIdA.toLowerCase() === currencyIdB.toLowerCase() || (isETHOrWETHA && isETHOrWETHB))
+  ) {
     return <Redirect to={`/add/${currencyIdA}`} />
   }
   return <AddLiquidity {...props} />