feat: show error state when on invalid position (#6214)

src/pages/Pool/PositionPage.tsx

@@ -61,6 +61,14 @@ const getTokenLink = (chainId: SupportedChainId, address: string) => {
   }
 }
 
+const PositionPageButtonPrimary = styled(ButtonPrimary)`
+  width: 228px;
+  height: 40px;
+  font-size: 16px;
+  line-height: 20px;
+  border-radius: 12px;
+`
+
 const PageWrapper = styled.div`
   padding: 68px 16px 16px 16px;
 
@@ -578,6 +586,24 @@ export function PositionPage() {
       !collectMigrationHash
   )
 
+  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 loading || poolState === PoolState.LOADING || !feeAmount ? (
     <LoadingRows>
       <div />