fix: handle invalid chainId on position page (#6338)

* fix: handle invalid chainId on position page

* fix

* add test

* Revert "add test"

This reverts commit d18742aa506b210a6600d6ec2e8b5166d514f988.

* pr comments

* rename

* fix

src/pages/App.tsx

@@ -36,7 +36,7 @@ import MigrateV2 from './MigrateV2'
 import MigrateV2Pair from './MigrateV2/MigrateV2Pair'
 import NotFound from './NotFound'
 import Pool from './Pool'
-import { PositionPage } from './Pool/PositionPage'
+import PositionPage from './Pool/PositionPage'
 import PoolV2 from './Pool/v2'
 import PoolFinder from './PoolFinder'
 import RemoveLiquidity from './RemoveLiquidity'

src/pages/Pool/PositionPage.tsx

@@ -20,7 +20,7 @@ import { RowBetween, RowFixed } from 'components/Row'
 import { Dots } from 'components/swap/styleds'
 import Toggle from 'components/Toggle'
 import TransactionConfirmationModal, { ConfirmationModalContent } from 'components/TransactionConfirmationModal'
-import { CHAIN_IDS_TO_NAMES } from 'constants/chains'
+import { CHAIN_IDS_TO_NAMES, isSupportedChain } from 'constants/chains'
 import { isGqlSupportedChain } from 'graphql/data/util'
 import { useToken } from 'hooks/Tokens'
 import { useV3NFTPositionManagerContract } from 'hooks/useContract'
@@ -346,7 +346,34 @@ const useInverter = ({
   }
 }
 
-export function PositionPage() {
+function PositionPageUnsupportedContent() {
+  return (
+    <PageWrapper>
+      <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+        <ThemedText.HeadlineLarge style={{ marginBottom: '8px' }}>
+          <Trans>Position unavailable</Trans>
+        </ThemedText.HeadlineLarge>
+        <ThemedText.BodyPrimary style={{ marginBottom: '32px' }}>
+          <Trans>To view a position, you must be connected to the network it belongs to.</Trans>
+        </ThemedText.BodyPrimary>
+        <PositionPageButtonPrimary as={Link} to="/pools" width="fit-content">
+          <Trans>Back to Pools</Trans>
+        </PositionPageButtonPrimary>
+      </div>
+    </PageWrapper>
+  )
+}
+
+export default function PositionPage() {
+  const { chainId } = useWeb3React()
+  if (isSupportedChain(chainId)) {
+    return <PositionPageContent />
+  } else {
+    return <PositionPageUnsupportedContent />
+  }
+}
+
+function PositionPageContent() {
   const { tokenId: tokenIdFromUrl } = useParams<{ tokenId?: string }>()
   const { chainId, account, provider } = useWeb3React()
   const theme = useTheme()
@@ -588,21 +615,7 @@ export function PositionPage() {
   )
 
   if (!positionDetails && !loading) {
-    return (
-      <PageWrapper>
-        <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
-          <ThemedText.HeadlineLarge style={{ marginBottom: '8px' }}>
-            <Trans>Position unavailable</Trans>
-          </ThemedText.HeadlineLarge>
-          <ThemedText.BodyPrimary style={{ marginBottom: '32px' }}>
-            <Trans>To view a position, you must be connected to the network it belongs to.</Trans>
-          </ThemedText.BodyPrimary>
-          <PositionPageButtonPrimary as={Link} to="/pools" width="fit-content">
-            <Trans>Back to Pools</Trans>
-          </PositionPageButtonPrimary>
-        </div>
-      </PageWrapper>
-    )
+    return <PositionPageUnsupportedContent />
   }
 
   return loading || poolState === PoolState.LOADING || !feeAmount ? (