fix: show empty state on /add and /remove (#6346)

* fix: handle invalid chainId on position page

* fix

* add test

* Revert "add test"

This reverts commit d18742aa506b210a6600d6ec2e8b5166d514f988.

* fix: prevent crashes on /add and /remove on unsupported chains

* handle v3 rm

* chainId

* lint

* Update src/pages/RemoveLiquidity/V3.tsx
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

src/pages/AddLiquidity/index.tsx

@@ -10,8 +10,10 @@ import { useToggleAccountDrawer } from 'components/AccountDrawer'
 import OwnershipWarning from 'components/addLiquidity/OwnershipWarning'
 import { sendEvent } from 'components/analytics'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
+import { isSupportedChain } from 'constants/chains'
 import usePrevious from 'hooks/usePrevious'
 import { useSingleCallResult } from 'lib/hooks/multicall'
+import { PositionPageUnsupportedContent } from 'pages/Pool/PositionPage'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { AlertTriangle } from 'react-feather'
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
@@ -80,7 +82,16 @@ import {
 
 const DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE = new Percent(50, 10_000)
 
-export default function AddLiquidity() {
+export default function AddLiquidityWrapper() {
+  const { chainId } = useWeb3React()
+  if (isSupportedChain(chainId)) {
+    return <AddLiquidity />
+  } else {
+    return <PositionPageUnsupportedContent />
+  }
+}
+
+function AddLiquidity() {
   const navigate = useNavigate()
   const {
     currencyIdA,

src/pages/Pool/PositionPage.tsx

@@ -346,7 +346,7 @@ const useInverter = ({
   }
 }
 
-function PositionPageUnsupportedContent() {
+export function PositionPageUnsupportedContent() {
   return (
     <PageWrapper>
       <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>

src/pages/RemoveLiquidity/V3.tsx

@@ -18,11 +18,13 @@ import { AddRemoveTabs } from 'components/NavigationTabs'
 import { AutoRow, RowBetween, RowFixed } from 'components/Row'
 import Slider from 'components/Slider'
 import Toggle from 'components/Toggle'
+import { isSupportedChain } from 'constants/chains'
 import { useV3NFTPositionManagerContract } from 'hooks/useContract'
 import useDebouncedChangeHandler from 'hooks/useDebouncedChangeHandler'
 import useTransactionDeadline from 'hooks/useTransactionDeadline'
 import { useV3PositionFromTokenId } from 'hooks/useV3Positions'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
+import { PositionPageUnsupportedContent } from 'pages/Pool/PositionPage'
 import { useCallback, useMemo, useState } from 'react'
 import { Navigate, useLocation, useParams } from 'react-router-dom'
 import { Text } from 'rebass'
@@ -44,6 +46,7 @@ const DEFAULT_REMOVE_V3_LIQUIDITY_SLIPPAGE_TOLERANCE = new Percent(5, 100)
 
 // redirect invalid tokenIds
 export default function RemoveLiquidityV3() {
+  const { chainId } = useWeb3React()
   const { tokenId } = useParams<{ tokenId: string }>()
   const location = useLocation()
   const parsedTokenId = useMemo(() => {
@@ -58,7 +61,11 @@ export default function RemoveLiquidityV3() {
     return <Navigate to={{ ...location, pathname: '/pools' }} replace />
   }
 
+  if (isSupportedChain(chainId)) {
     return <Remove tokenId={parsedTokenId} />
+  } else {
+    return <PositionPageUnsupportedContent />
+  }
 }
 function Remove({ tokenId }: { tokenId: BigNumber }) {
   const { position } = useV3PositionFromTokenId(tokenId)

src/pages/RemoveLiquidity/index.tsx

@@ -8,7 +8,9 @@ import { Currency, Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { useToggleAccountDrawer } from 'components/AccountDrawer'
 import { sendEvent } from 'components/analytics'
+import { isSupportedChain } from 'constants/chains'
 import { useV2LiquidityTokenPermit } from 'hooks/useV2LiquidityTokenPermit'
+import { PositionPageUnsupportedContent } from 'pages/Pool/PositionPage'
 import { useCallback, useMemo, useState } from 'react'
 import { ArrowDown, Plus } from 'react-feather'
 import { useNavigate, useParams } from 'react-router-dom'
@@ -47,7 +49,16 @@ import { ClickableText, MaxButton, Wrapper } from '../Pool/styleds'
 
 const DEFAULT_REMOVE_LIQUIDITY_SLIPPAGE_TOLERANCE = new Percent(5, 100)
 
-export default function RemoveLiquidity() {
+export default function RemoveLiquidityWrapper() {
+  const { chainId } = useWeb3React()
+  if (isSupportedChain(chainId)) {
+    return <RemoveLiquidity />
+  } else {
+    return <PositionPageUnsupportedContent />
+  }
+}
+
+function RemoveLiquidity() {
   const navigate = useNavigate()
   const { currencyIdA, currencyIdB } = useParams<{ currencyIdA: string; currencyIdB: string }>()
   const [currencyA, currencyB] = [useCurrency(currencyIdA) ?? undefined, useCurrency(currencyIdB) ?? undefined]