fix: use `chain` query param properly when activating (#6114)

* fix: use `chain` query param properly when activating

* move

* Update src/hooks/useSyncChainQuery.ts
Co-authored-by: Jordan Frankfurt <jordanwfrankfurt@gmail.com>

---------
Co-authored-by: Jordan Frankfurt <jordanwfrankfurt@gmail.com>

src/hooks/useSyncChainQuery.ts

@@ -32,6 +32,8 @@ export default function useSyncChainQuery() {
 
   // Can't use `usePrevious` because `chainId` can be undefined while activating.
   const [previousChainId, setPreviousChainId] = useState<number | undefined>(undefined)
+  const [nextChainId, setNextChainId] = useState<number | undefined>(undefined)
+
   useEffect(() => {
     if (chainId && chainId !== previousChainId) {
       setPreviousChainId(chainId)
@@ -40,14 +42,21 @@ export default function useSyncChainQuery() {
 
   const [searchParams, setSearchParams] = useSearchParams()
 
-  const chainQueryManuallyUpdated = urlChainId && urlChainId !== previousUrlChainId && isActive
+  useEffect(() => {
+    const chainQueryManuallyUpdated = urlChainId && urlChainId !== previousUrlChainId
+    if (chainQueryManuallyUpdated) {
+      setNextChainId(urlChainId)
+    }
+  }, [previousUrlChainId, urlChainId])
 
   return useEffect(() => {
-    if (chainQueryManuallyUpdated) {
+    if (nextChainId && isActive) {
       // If the query param changed, and the chain didn't change, then activate the new chain
-      selectChain(urlChainId)
+      selectChain(nextChainId).then(() => {
         searchParams.delete('chain')
         setSearchParams(searchParams)
+        setNextChainId(undefined)
+      })
     }
-  }, [chainQueryManuallyUpdated, urlChainId, selectChain, searchParams, setSearchParams])
+  }, [nextChainId, urlChainId, selectChain, searchParams, setSearchParams, isActive])
 }