fix: remove manual redirects on token page (#5752)

cypress/e2e/token.test.ts

@@ -10,6 +10,27 @@ describe('Testing tokens on uniswap page', () => {
     cy.get(getTestSelectorStartsWith('token-table')).its('length').should('be.gte', 25)
   })
 
+  it('should keep the same configuration when reloaded: ETH global, OP local', () => {
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelector('tokens-network-filter-selected')).click()
+    cy.get(getTestSelector('tokens-network-filter-option-optimism')).click()
+    cy.reload()
+    cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Optimism')
+  })
+
+  it('should have the correct network configuration when reloaded: OP global, Polygon local', () => {
+    cy.get(getTestSelector('chain-selector')).last().click()
+    cy.get(getTestSelector('chain-selector-option-optimism')).click()
+
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelector('tokens-network-filter-selected')).click()
+    cy.get(getTestSelector('tokens-network-filter-option-polygon')).click()
+    cy.reload()
+    cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Polygon')
+    // With no wallet connected, reloading the page resets the global network.
+    cy.get(getTestSelector('chain-selector')).last().should('contain', 'Ethereum')
+  })
+
   it('should load go to ethereum token and return to token list page', () => {
     cy.visit('/tokens/ethereum')
     cy.get(getTestSelector('token-table-row-Ether')).click()

src/components/NavBar/ChainSelector.tsx

@@ -93,6 +93,7 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
         gap="8"
         className={styles.ChainSelector}
         background={isOpen ? 'accentActiveSoft' : 'none'}
+        data-testid="chain-selector"
         onClick={() => setIsOpen(!isOpen)}
       >
         {!isSupported ? (

src/components/NavBar/ChainSelectorRow.tsx

@@ -76,7 +76,7 @@ export default function ChainSelectorRow({
   const theme = useTheme()
 
   return (
-    <Container onClick={() => onSelectChain(targetChain)}>
+    <Container onClick={() => onSelectChain(targetChain)} data-testid={`chain-selector-option-${label.toLowerCase()}`}>
       <Logo src={logoUrl} alt={label} />
       <Label>{label}</Label>
       {isPending && <ApproveText>Approve in wallet</ApproveText>}

src/components/Tokens/TokenTable/NetworkFilter.tsx

@@ -103,7 +103,12 @@ export default function NetworkFilter() {
 
   return (
     <StyledMenu ref={node}>
-      <NetworkFilterOption onClick={toggleMenu} aria-label="networkFilter" active={open}>
+      <NetworkFilterOption
+        onClick={toggleMenu}
+        aria-label="networkFilter"
+        active={open}
+        data-testid="tokens-network-filter-selected"
+      >
         <StyledMenuContent>
           <NetworkLabel>
             <Logo src={chainInfo?.logoUrl} /> {chainInfo?.label}
@@ -125,6 +130,7 @@ export default function NetworkFilter() {
             return (
               <InternalLinkMenuItem
                 key={network}
+                data-testid={`tokens-network-filter-option-${network.toLowerCase()}`}
                 onClick={() => {
                   navigate(`/tokens/${network.toLowerCase()}`)
                   toggleMenu()

src/graphql/data/util.tsx

@@ -74,14 +74,6 @@ export const CHAIN_NAME_TO_CHAIN_ID: { [key: string]: SupportedChainId } = {
 
 export const BACKEND_CHAIN_NAMES: Chain[] = [Chain.Ethereum, Chain.Polygon, Chain.Optimism, Chain.Arbitrum, Chain.Celo]
 
-export function isValidBackendChainName(chainName: string | undefined): chainName is Chain {
-  if (!chainName) return false
-  for (let i = 0; i < BACKEND_CHAIN_NAMES.length; i++) {
-    if (chainName === BACKEND_CHAIN_NAMES[i]) return true
-  }
-  return false
-}
-
 export function getTokenDetailsURL(address: string, chainName?: Chain, chainId?: number) {
   if (address === ZERO_ADDRESS && chainId && chainId === SupportedChainId.MAINNET) {
     return `/tokens/${CHAIN_ID_TO_BACKEND_NAME[chainId].toLowerCase()}/${NATIVE_CHAIN_ID}`

src/pages/Tokens/index.tsx

 import { Trans } from '@lingui/macro'
 import { Trace } from '@uniswap/analytics'
 import { InterfacePageName } from '@uniswap/analytics-events'
-import { useWeb3React } from '@web3-react/core'
 import { MAX_WIDTH_MEDIA_BREAKPOINT, MEDIUM_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
 import { filterStringAtom } from 'components/Tokens/state'
 import NetworkFilter from 'components/Tokens/TokenTable/NetworkFilter'
@@ -9,11 +8,9 @@ import SearchBar from 'components/Tokens/TokenTable/SearchBar'
 import TimeSelector from 'components/Tokens/TokenTable/TimeSelector'
 import TokenTable from 'components/Tokens/TokenTable/TokenTable'
 import { MouseoverTooltip } from 'components/Tooltip'
-import { chainIdToBackendName, isValidBackendChainName } from 'graphql/data/util'
-import { useOnGlobalChainSwitch } from 'hooks/useGlobalChainSwitch'
 import { useResetAtom } from 'jotai/utils'
 import { useEffect } from 'react'
-import { useLocation, useNavigate, useParams } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
@@ -72,27 +69,11 @@ const FiltersWrapper = styled.div`
 const Tokens = () => {
   const resetFilterString = useResetAtom(filterStringAtom)
   const location = useLocation()
-  const navigate = useNavigate()
-  const { chainName: chainNameParam } = useParams<{ chainName?: string }>()
-  const { chainId: connectedChainId } = useWeb3React()
-  const connectedChainName = chainIdToBackendName(connectedChainId)
 
   useEffect(() => {
     resetFilterString()
   }, [location, resetFilterString])
 
-  useEffect(() => {
-    if (!chainNameParam) {
-      navigate(`/tokens/${connectedChainName.toLowerCase()}`, { replace: true })
-    }
-  }, [chainNameParam, connectedChainName, navigate])
-
-  useOnGlobalChainSwitch((chain) => {
-    if (isValidBackendChainName(chain)) {
-      navigate(`/tokens/${chain.toLowerCase()}`, { replace: true })
-    }
-  })
-
   return (
     <Trace page={InterfacePageName.TOKENS_PAGE} shouldLogImpression>
       <ExploreContainer>