From 784fbfe7b13bfe8e35d62af20e13a5cc4b60d450 Mon Sep 17 00:00:00 2001
From: Kristie Huang <kristiehuang01@gmail.com>
Date: Fri, 15 Sep 2023 16:05:56 -0400
Subject: [PATCH] test: add remove-liquidity interface tests (#7309)

* fix: duplicate or single-token remove-liquidity routes should show error page

* use maxUint256 for nonexistent pool

* move tests back to rem-liq

* rename pooled token id

* nit: use uni address from sdk core

* nit: use maxuint256 from sdk core

* nit: use liqudityValue for doublecurrencylogo

---------

Co-authored-by: Kristie Huang <kristie.huang@uniswap.org>
---
 cypress/e2e/remove-liquidity.test.ts | 30 ++++++++++++++++++++++++++--
 src/pages/RemoveLiquidity/V3.tsx     | 15 +++++++-------
 src/pages/RemoveLiquidity/index.tsx  |  4 +++-
 3 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/cypress/e2e/remove-liquidity.test.ts b/cypress/e2e/remove-liquidity.test.ts
index dc448bdb17..b09f021ed0 100644
--- a/cypress/e2e/remove-liquidity.test.ts
+++ b/cypress/e2e/remove-liquidity.test.ts
@@ -1,7 +1,33 @@
+import { ChainId, MaxUint256, UNI_ADDRESSES } from '@uniswap/sdk-core'
+
+const UNI_MAINNET = UNI_ADDRESSES[ChainId.MAINNET]
+
 describe('Remove Liquidity', () => {
-  it('loads the token pair', () => {
-    cy.visit('/remove/v2/ETH/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
+  it('loads the token pair in v2', () => {
+    cy.visit(`/remove/v2/ETH/${UNI_MAINNET}`)
     cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'ETH')
     cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'UNI')
   })
+
+  it('loads the token pair in v3', () => {
+    cy.visit(`/remove/1`)
+    cy.get('#remove-liquidity-tokens').should('contain.text', 'UNI/ETH')
+
+    cy.get('#remove-pooled-tokena-symbol').should('contain.text', 'Pooled UNI')
+    cy.get('#remove-pooled-tokenb-symbol').should('contain.text', 'Pooled ETH')
+  })
+
+  it('should redirect to error pages if pool does not exist', () => {
+    // Duplicate-token v2 pools redirect to position unavailable
+    cy.visit(`/remove/v2/ETH/ETH`)
+    cy.contains('Position unavailable')
+
+    // Single-token pools don't exist
+    cy.visit('/remove/v2/ETH')
+    cy.url().should('match', /\/not-found/)
+
+    // Nonexistent v3 pool
+    cy.visit(`/remove/${MaxUint256}`)
+    cy.contains('Position unavailable')
+  })
 })
diff --git a/src/pages/RemoveLiquidity/V3.tsx b/src/pages/RemoveLiquidity/V3.tsx
index 7349577466..80f010b5b7 100644
--- a/src/pages/RemoveLiquidity/V3.tsx
+++ b/src/pages/RemoveLiquidity/V3.tsx
@@ -59,11 +59,11 @@ export default function RemoveLiquidityV3() {
     }
   }, [tokenId])
 
+  const { position, loading } = useV3PositionFromTokenId(parsedTokenId ?? undefined)
   if (parsedTokenId === null || parsedTokenId.eq(0)) {
     return <Navigate to={{ ...location, pathname: '/pools' }} replace />
   }
-
-  if (isSupportedChain(chainId)) {
+  if (isSupportedChain(chainId) && (loading || position)) {
     return <Remove tokenId={parsedTokenId} />
   } else {
     return <PositionPageUnsupportedContent />
@@ -312,15 +312,16 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
               <RowBetween>
                 <RowFixed>
                   <DoubleCurrencyLogo
-                    currency0={feeValue0?.currency}
-                    currency1={feeValue1?.currency}
+                    currency0={liquidityValue0?.currency}
+                    currency1={liquidityValue1?.currency}
                     size={20}
                     margin={true}
                   />
                   <ThemedText.DeprecatedLabel
                     ml="10px"
                     fontSize="20px"
-                  >{`${feeValue0?.currency?.symbol}/${feeValue1?.currency?.symbol}`}</ThemedText.DeprecatedLabel>
+                    id="remove-liquidity-tokens"
+                  >{`${liquidityValue0?.currency?.symbol}/${liquidityValue1?.currency?.symbol}`}</ThemedText.DeprecatedLabel>
                 </RowFixed>
                 <RangeBadge removed={removed} inRange={!outOfRange} />
               </RowBetween>
@@ -354,7 +355,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
               <LightCard>
                 <AutoColumn gap="md">
                   <RowBetween>
-                    <Text fontSize={16} fontWeight={535}>
+                    <Text fontSize={16} fontWeight={535} id="remove-pooled-tokena-symbol">
                       <Trans>Pooled {liquidityValue0?.currency?.symbol}:</Trans>
                     </Text>
                     <RowFixed>
@@ -365,7 +366,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
                     </RowFixed>
                   </RowBetween>
                   <RowBetween>
-                    <Text fontSize={16} fontWeight={535}>
+                    <Text fontSize={16} fontWeight={535} id="remove-pooled-tokenb-symbol">
                       <Trans>Pooled {liquidityValue1?.currency?.symbol}:</Trans>
                     </Text>
                     <RowFixed>
diff --git a/src/pages/RemoveLiquidity/index.tsx b/src/pages/RemoveLiquidity/index.tsx
index 9d949eec1d..17816e11fe 100644
--- a/src/pages/RemoveLiquidity/index.tsx
+++ b/src/pages/RemoveLiquidity/index.tsx
@@ -52,7 +52,9 @@ const DEFAULT_REMOVE_LIQUIDITY_SLIPPAGE_TOLERANCE = new Percent(5, 100)
 
 export default function RemoveLiquidityWrapper() {
   const { chainId } = useWeb3React()
-  if (isSupportedChain(chainId)) {
+  const { currencyIdA, currencyIdB } = useParams<{ currencyIdA: string; currencyIdB: string }>()
+  const [currencyA, currencyB] = [useCurrency(currencyIdA) ?? undefined, useCurrency(currencyIdB) ?? undefined]
+  if (isSupportedChain(chainId) && currencyA !== currencyB) {
     return <RemoveLiquidity />
   } else {
     return <PositionPageUnsupportedContent />