From dae7314aa9ee5c84a73d884e219c7c18c89d8610 Mon Sep 17 00:00:00 2001
From: Vignesh Mohankumar <vignesh@vigneshmohankumar.com>
Date: Wed, 22 Mar 2023 12:02:18 -0400
Subject: [PATCH] feat: show error state when on invalid position (#6214)

---
 src/pages/Pool/PositionPage.tsx | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/pages/Pool/PositionPage.tsx b/src/pages/Pool/PositionPage.tsx
index d0b6539f3b..56869571cc 100644
--- a/src/pages/Pool/PositionPage.tsx
+++ b/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 />