fix: remove error popup when switching chains from URL param (#6866)

cypress/e2e/wallet-connection/switch-network.test.ts

@@ -119,3 +119,12 @@ describe('network switching', () => {
     cy.get(`#swap-currency-output .token-symbol-container`).should('contain.text', 'Select token')
   })
 })
+
+describe('network switching from URL param', () => {
+  it('should switch network from URL param', () => {
+    cy.visit('/swap?chain=polygon', { ethereum: 'hardhat' })
+    cy.get(getTestSelector('web3-status-connected'))
+    cy.wait('@wallet_switchEthereumChain')
+    waitsForActiveChain('Polygon')
+  })
+})

src/hooks/useSelectChain.ts

@@ -22,7 +22,7 @@ export default function useSelectChain() {
       try {
         await switchChain(connector, targetChain)
       } catch (error) {
-        if (!didUserReject(connection, error)) {
+        if (!didUserReject(connection, error) && error.code !== -32002 /* request already pending */) {
           console.error('Failed to switch networks', error)
           dispatch(addPopup({ content: { failedSwitchNetwork: targetChain }, key: 'failed-network-switch' }))
         }

src/hooks/useSyncChainQuery.ts

@@ -1,11 +1,10 @@
 import { useWeb3React } from '@web3-react/core'
 import { CHAIN_IDS_TO_NAMES } from 'constants/chains'
 import { ParsedQs } from 'qs'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { useSearchParams } from 'react-router-dom'
 
 import useParsedQueryString from './useParsedQueryString'
-import usePrevious from './usePrevious'
 import useSelectChain from './useSelectChain'
 
 function getChainIdFromName(name: string) {
@@ -26,28 +25,14 @@ export default function useSyncChainQuery() {
   const parsedQs = useParsedQueryString()
 
   const urlChainId = getParsedChainId(parsedQs)
-  const previousUrlChainId = usePrevious(urlChainId)
 
   const selectChain = useSelectChain()
 
-  // Can't use `usePrevious` because `chainId` can be undefined while activating.
-  const [previousChainId, setPreviousChainId] = useState<number | undefined>(undefined)
-  useEffect(() => {
-    if (chainId && chainId !== previousChainId) {
-      setPreviousChainId(chainId)
-    }
-  }, [chainId, previousChainId])
-
   const [searchParams, setSearchParams] = useSearchParams()
 
-  const chainQueryManuallyUpdated = urlChainId && urlChainId !== previousUrlChainId && isActive
-
-  return useEffect(() => {
-    if (chainQueryManuallyUpdated) {
-      // If the query param changed, and the chain didn't change, then activate the new chain
+  useEffect(() => {
+    if (isActive && urlChainId && chainId !== urlChainId) {
       selectChain(urlChainId)
-      searchParams.delete('chain')
-      setSearchParams(searchParams)
     }
-  }, [chainQueryManuallyUpdated, urlChainId, selectChain, searchParams, setSearchParams])
+  }, [urlChainId, selectChain, searchParams, setSearchParams, isActive, chainId])
 }