fix: reset token selections when changing chains on /add (#7561)

* fix: reset token selections when  changing chains on /add

* fix: tests

* fix: add e2e test

* fix: remove .only

cypress/e2e/add-liquidity.test.ts

@@ -16,6 +16,16 @@ describe('Add Liquidity', () => {
     cy.contains('0.05% fee tier')
   })
 
+  it('clears the token selection when chain changes', () => {
+    cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/ETH/500')
+    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'UNI')
+    cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('contain.text', 'ETH')
+    cy.get('[data-testid="chain-selector"]').last().click()
+    cy.contains('Polygon').click()
+    cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('contain.text', 'ETH')
+    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('not.contain.text', 'UNI')
+  })
+
   it('does not crash if token is duplicated', () => {
     cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
     cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'UNI')

src/components/Pools/PoolDetails/PoolDetailsHeader.test.tsx

@@ -1,9 +1,36 @@
 import userEvent from '@testing-library/user-event'
+import store from 'state'
+import { addSerializedToken } from 'state/user/reducer'
 import { act, render, screen } from 'test-utils/render'
 
 import { PoolDetailsHeader } from './PoolDetailsHeader'
 
 describe('PoolDetailsHeader', () => {
+  beforeEach(() => {
+    store.dispatch(
+      addSerializedToken({
+        serializedToken: {
+          chainId: 1,
+          address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+          symbol: 'USDC',
+          name: 'USD Coin',
+          decimals: 6,
+        },
+      })
+    )
+    store.dispatch(
+      addSerializedToken({
+        serializedToken: {
+          chainId: 1,
+          address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
+          symbol: 'WETH',
+          name: 'Wrapped Ether',
+          decimals: 18,
+        },
+      })
+    )
+  })
+
   const mockProps = {
     chainId: 1,
     poolAddress: '0x88e6a0c2ddd26feeb64f039a2c41296fcb3f5640',

src/components/Pools/PoolDetails/PoolDetailsLink.test.tsx

@@ -1,11 +1,38 @@
 import { ChainId } from '@uniswap/sdk-core'
 import { USDC_MAINNET } from 'constants/tokens'
+import store from 'state'
+import { addSerializedToken } from 'state/user/reducer'
 import { usdcWethPoolAddress, validPoolToken0, validPoolToken1 } from 'test-utils/pools/fixtures'
 import { render, screen } from 'test-utils/render'
 
 import { PoolDetailsLink } from './PoolDetailsLink'
 
 describe('PoolDetailsHeader', () => {
+  beforeEach(() => {
+    store.dispatch(
+      addSerializedToken({
+        serializedToken: {
+          chainId: 1,
+          address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+          symbol: 'USDC',
+          name: 'USD Coin',
+          decimals: 6,
+        },
+      })
+    )
+    store.dispatch(
+      addSerializedToken({
+        serializedToken: {
+          chainId: 1,
+          address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
+          symbol: 'WETH',
+          name: 'Wrapped Ether',
+          decimals: 18,
+        },
+      })
+    )
+  })
+
   it('renders link for pool address', async () => {
     const { asFragment } = render(
       <PoolDetailsLink

src/components/Pools/PoolDetails/PoolDetailsStats.test.tsx

@@ -1,4 +1,6 @@
 import { enableNetConnect } from 'nock'
+import store from 'state'
+import { addSerializedToken } from 'state/user/reducer'
 import { validPoolDataResponse } from 'test-utils/pools/fixtures'
 import { act, render, screen } from 'test-utils/render'
 import { BREAKPOINTS } from 'theme'
@@ -15,6 +17,28 @@ describe('PoolDetailsStats', () => {
   beforeEach(() => {
     // Enable network connections for retrieving token logos
     enableNetConnect()
+    store.dispatch(
+      addSerializedToken({
+        serializedToken: {
+          chainId: 1,
+          address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+          symbol: 'USDC',
+          name: 'USD Coin',
+          decimals: 6,
+        },
+      })
+    )
+    store.dispatch(
+      addSerializedToken({
+        serializedToken: {
+          chainId: 1,
+          address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
+          symbol: 'WETH',
+          name: 'Wrapped Ether',
+          decimals: 18,
+        },
+      })
+    )
   })
 
   it('renders stats text correctly', async () => {

src/components/Pools/PoolDetails/PoolDetailsStatsButtons.test.tsx

@@ -1,5 +1,7 @@
 import userEvent from '@testing-library/user-event'
 import useMultiChainPositions from 'components/AccountDrawer/MiniPortfolio/Pools/useMultiChainPositions'
+import store from 'state'
+import { addSerializedToken } from 'state/user/reducer'
 import { mocked } from 'test-utils/mocked'
 import { useMultiChainPositionsReturnValue, validPoolToken0, validPoolToken1 } from 'test-utils/pools/fixtures'
 import { act, render, screen } from 'test-utils/render'
@@ -24,6 +26,28 @@ describe('PoolDetailsStatsButton', () => {
 
   beforeEach(() => {
     mocked(useMultiChainPositions).mockReturnValue(useMultiChainPositionsReturnValue)
+    store.dispatch(
+      addSerializedToken({
+        serializedToken: {
+          chainId: 1,
+          address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+          symbol: 'USDC',
+          name: 'USD Coin',
+          decimals: 6,
+        },
+      })
+    )
+    store.dispatch(
+      addSerializedToken({
+        serializedToken: {
+          chainId: 1,
+          address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
+          symbol: 'WETH',
+          name: 'Wrapped Ether',
+          decimals: 18,
+        },
+      })
+    )
   })
 
   it('loading skeleton shown correctly', () => {

src/components/Pools/PoolDetails/__snapshots__/PoolDetailsLink.test.tsx.snap

@@ -541,7 +541,7 @@ exports[`PoolDetailsHeader renders link for token address 1`] = `
           class="c5"
         >
           <img
-            alt="UNKNOWN logo"
+            alt="USDC logo"
             class="c6"
             loading="lazy"
             src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"

src/components/Pools/PoolDetails/__snapshots__/PoolDetailsStats.test.tsx.snap

@@ -253,7 +253,7 @@ exports[`PoolDetailsStats pool balance chart not visible on mobile 1`] = `
               class="c10"
             >
               <img
-                alt="UNKNOWN logo"
+                alt="USDC logo"
                 class="c11"
                 loading="lazy"
                 src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"

src/lib/hooks/useCurrency.ts

@@ -68,9 +68,12 @@ export function useTokenFromActiveNetwork(tokenAddress: string | undefined): Tok
     // If the token is on another chain, we cannot fetch it on-chain, and it is invalid.
     if (typeof tokenAddress !== 'string' || !isSupportedChain(chainId) || !formattedAddress) return undefined
     if (isLoading || !chainId) return null
+    if (!decimals?.result?.[0] && parsedSymbol === UNKNOWN_TOKEN_SYMBOL && parsedName === UNKNOWN_TOKEN_NAME) {
+      return undefined
+    }
 
     return new Token(chainId, formattedAddress, parsedDecimals, parsedSymbol, parsedName)
-  }, [chainId, tokenAddress, formattedAddress, isLoading, parsedDecimals, parsedSymbol, parsedName])
+  }, [tokenAddress, chainId, formattedAddress, isLoading, decimals?.result, parsedDecimals, parsedSymbol, parsedName])
 }
 
 type TokenMap = { [address: string]: Token }

src/pages/PoolDetails/__snapshots__/index.test.tsx.snap

@@ -2087,7 +2087,7 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the
                   class="c71"
                 >
                   <img
-                    alt="UNKNOWN logo"
+                    alt="USDC logo"
                     class="c72"
                     loading="lazy"
                     src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"

src/pages/PoolDetails/index.test.tsx

@@ -1,5 +1,7 @@
 import { usePoolData } from 'graphql/thegraph/PoolData'
 import Router from 'react-router-dom'
+import store from 'state'
+import { addSerializedToken } from 'state/user/reducer'
 import { mocked } from 'test-utils/mocked'
 import { validParams, validPoolDataResponse } from 'test-utils/pools/fixtures'
 import { render, screen, waitFor } from 'test-utils/render'
@@ -23,6 +25,28 @@ describe('PoolDetailsPage', () => {
   beforeEach(() => {
     jest.spyOn(Router, 'useParams').mockReturnValue(validParams)
     mocked(usePoolData).mockReturnValue(validPoolDataResponse)
+    store.dispatch(
+      addSerializedToken({
+        serializedToken: {
+          chainId: 1,
+          address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+          symbol: 'USDC',
+          name: 'USD Coin',
+          decimals: 6,
+        },
+      })
+    )
+    store.dispatch(
+      addSerializedToken({
+        serializedToken: {
+          chainId: 1,
+          address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
+          symbol: 'WETH',
+          name: 'Wrapped Ether',
+          decimals: 18,
+        },
+      })
+    )
   })
 
   it('not found page displayed when given no poolAddress', () => {