fix: Update router query always when on wallet connect

apps/web/src/hooks/useWalletConnectRouterSync.ts

@@ -0,0 +1,63 @@
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { Connector, useAccount } from 'wagmi'
+
+const checkIsWalletConnect = async (connector: Connector) => {
+  try {
+    if (typeof connector.getProvider !== 'function') return false
+
+    const provider = (await connector.getProvider()) as any
+
+    return Boolean(
+      provider &&
+        !provider.isSafePal &&
+        !provider.isMetaMask &&
+        !provider.isTrust &&
+        !provider.isCoinbaseWallet &&
+        !provider.isTokenPocket &&
+        provider.isWalletConnect,
+    )
+  } catch (error) {
+    console.error(error, 'Error detecting WalletConnect provider')
+    return false
+  }
+}
+
+export const useWalletConnectRouterSync = () => {
+  const { connector } = useAccount()
+  const router = useRouter()
+  const [isWalletConnect, setIsWalletConnect] = useState(false)
+
+  useEffect(() => {
+    if (!connector) return
+
+    const checkProvider = async () => {
+      const result = await checkIsWalletConnect(connector)
+      setIsWalletConnect(result)
+    }
+
+    checkProvider()
+  }, [connector])
+
+  useEffect(() => {
+    if (!isWalletConnect) return undefined
+
+    const onUrlChange = async () => {
+      const params = new URLSearchParams(window.location.search)
+      await router.replace(
+        {
+          pathname: window.location.pathname,
+          query: Object.fromEntries(params.entries()),
+          hash: window.location.hash,
+        },
+        undefined,
+        { shallow: true },
+      )
+    }
+
+    window.addEventListener('popstate#pcs', onUrlChange)
+    return () => {
+      window.removeEventListener('popstate#pcs', onUrlChange)
+    }
+  }, [router, isWalletConnect])
+}

apps/web/src/pages/_app.tsx

@@ -41,6 +41,7 @@ import { useWeb3WalletView } from 'hooks/useWeb3WalletView'
 import { useInitGlobalWorker } from 'hooks/useWorker'
 import { persistor, useStore } from 'state'
 import { usePollBlockNumber } from 'state/block/hooks'
+import { useWalletConnectRouterSync } from 'hooks/useWalletConnectRouterSync'
 import { Blocklist, Updaters } from '..'
 import { SEO } from '../../next-seo.config'
 import Providers from '../Providers'
@@ -69,6 +70,7 @@ function GlobalHooks() {
   useThemeCookie()
   useLockedEndNotification()
   useInitNotificationsClient()
+  useWalletConnectRouterSync()
   return null
 }
 

apps/web/src/views/SwapSimplify/V4Swap/SwapCommitButton.tsx

@@ -157,10 +157,13 @@ const SwapCommitButtonInner = memo(function SwapCommitButtonInner({
     inputCurrency ?? undefined,
     outputCurrency ?? undefined,
   ])
-  const currencyBalances = {
-    [Field.INPUT]: relevantTokenBalances[0],
-    [Field.OUTPUT]: relevantTokenBalances[1],
-  }
+  const currencyBalances = useMemo(
+    () => ({
+      [Field.INPUT]: relevantTokenBalances[0],
+      [Field.OUTPUT]: relevantTokenBalances[1],
+    }),
+    [relevantTokenBalances],
+  )
   const parsedAmounts = useParsedAmounts(order?.trade, currencyBalances, false)
   const parsedIndependentFieldAmount = parsedAmounts[independentField]
   const swapInputError = useSwapInputError(order, currencyBalances)

packages/utils/replaceBrowserHistory.ts

@@ -9,6 +9,7 @@ const replaceBrowserHistory = (key: string, value?: string | number | null) => {
   }
   const urlString = url.toString()
   window.history.replaceState({ ...window.history.state, as: urlString, url: urlString }, '', url)
+  window.dispatchEvent(new Event('popstate#pcs'))
 }
 
 export default replaceBrowserHistory

packages/utils/replaceBrowserHistoryMultiple.ts

@@ -13,6 +13,7 @@ const replaceBrowserHistoryMultiple = (params: { [key: string]: string | number
 
   const urlString = url.toString()
   window.history.replaceState({ ...window.history.state, as: urlString, url: urlString }, '', url)
+  window.dispatchEvent(new Event('popstate#pcs'))
 }
 
 export default replaceBrowserHistoryMultiple