[bug] Issue auto-adding chain with WalletConnect

[venturars]

Link to minimal reproducible example

https://stackblitz.com/edit/stackblitz-starters-4r4zxcrm?file=src%2FApp.tsx

Steps to Reproduce

1. Configure Appkit for using only Arbitrum network
2. Allow unsopportedChains should be false
3. Try to connect using WalletConnet and Metamask mobile without Arbitrum network added
4. Connect it sucesfull but Arbitrum network is not added to wallet

Summary

I noticed that auto-adding a chain doesn’t behave as expected when using WalletConnect. If a user connects via WalletConnect and then switches networks from their wallet, the network change isn’t always detected, and the "switch network" modal doesn’t appear.

From what I saw in the code, the modal is only triggered under specific conditions in setActiveCaipNetwork:

if (
  !isSupported &&
  OptionsController.state.enableNetworkSwitch &&
  !OptionsController.state.allowUnsupportedChain &&
  !ConnectionController.state.wcBasic
) {
  ChainController.showUnsupportedChainUI();
}

Since this logic is tied closely to that function, maybe it would make sense to extract network handling into a separate listener for better consistency.

For now, I’ve implemented a workaround in my dApp to trigger the unsupported chain modal manually on WalletConnect:

useEffect(() => {
  const unsubscribe = ChainController.subscribeKey("activeCaipNetwork", (caipNetwork) => {
    if (caipNetwork) {
      const isSupported = ChainController.checkIfSupportedNetwork(caipNetwork.chainNamespace);

      if (!isSupported && connector?.id === "walletConnect") {
        open({ view: "UnsupportedChain" as any }); // opened issue: https://github.com/reown-com/appkit/issues/4507
      }
    }
  });

  return () => unsubscribe();
}, [open, connector]);

List of related npm package versions

"dependencies": { "@Beraborrowofficial/sdk": "2.3.3", "@emotion/react": "11.13.3", "@emotion/styled": "11.13.0", "@mui/icons-material": "5.16.7", "@mui/material": "5.16.7", "@reown/appkit": "1.7.8", "@reown/appkit-adapter-wagmi": "1.7.8", "@sentry/react": "8.50.0", "@sentry/vite-plugin": "3.0.0", "@tanstack/query-core": "5.59.6", "@tanstack/react-query": "5.59.6", "@wagmi/core": "2.16.4", "axios": "1.8.1", "jotai": "2.10.1", "jotai-effect": "1.0.3", "jotai-scope": "0.6.0", "jotai-tanstack-query": "0.8.8", "posthog-js": "1.170.1", "react": "18.3.1", "react-dom": "18.3.1", "react-error-boundary": "4.1.1", "react-gtm-module": "2.0.11", "react-router-dom": "6.27.0", "viem": "2.23.3", "wagmi": "2.14.11" }, "devDependencies": { "@types/node": "22.7.6", "@types/react": "18.3.1", "@types/react-dom": "18.3.1", "@types/react-gtm-module": "2.0.3", "@typescript-eslint/eslint-plugin": "8.9.0", "@typescript-eslint/parser": "8.9.0", "@typescript-eslint/utils": "8.9.0", "@vitejs/plugin-react": "4.3.2", "@vitejs/plugin-react-swc": "3.7.1", "dotenv": "16.4.5", "eslint": "9.12.0", "eslint-config-prettier": "9.1.0", "eslint-plugin-prettier": "5.2.1", "eslint-plugin-react-hooks": "5.0.0", "eslint-plugin-react-refresh": "0.4.12", "prettier": "3.3.3", "sass": " 1.80.1", "typescript": "5.6.3", "vite": "5.4.9", "vite-bundle-visualizer": "1.2.1", "vite-plugin-pwa": "0.20.5" },

Node.js Version

v22.16.0

Package Manager

[email protected]

[linear[bot]]

APKT-3066 [bug] Issue auto-adding chain with WalletConnect

[Sam-Newman]

Thank you! We are looking into this

[rtomas]

let's continue in this thread ....

[venturars]

@rtomas @Sam-Newman After updating Viem, Wagmi, and AppKit to the latest version, this error appears to be resolved. We're waiting for confirmation from our tester, but everything seems to be working well so far.

📎 https://imgur.com/a/U7L9Wup

Updated Dependencies:

"dependencies": {
    "@Beraborrowofficial/sdk": "file:../sdk",
    "@emotion/react": "11.13.3",
    "@emotion/styled": "11.13.0",
    "@mui/icons-material": "5.16.7",
    "@mui/material": "5.16.7",
    "@reown/appkit": "1.7.15",
    "@reown/appkit-adapter-wagmi": "1.7.15",
    "@sentry/react": "8.50.0",
    "@sentry/vite-plugin": "3.0.0",
    "@tanstack/query-core": "5.59.6",
    "@tanstack/react-query": "5.59.6",
    "@wagmi/core": "2.17.3",
    "axios": "1.8.1",
    "jotai": "2.10.1",
    "jotai-effect": "1.0.3",
    "jotai-scope": "0.6.0",
    "jotai-tanstack-query": "0.8.8",
    "posthog-js": "1.170.1",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-error-boundary": "4.1.1",
    "react-gtm-module": "2.0.11",
    "react-router-dom": "6.27.0",
    "viem": "2.31.3",
    "vite-plugin-svgr": "^4.3.0",
    "wagmi": "2.15.6"
  },
  "devDependencies": {
    "@types/node": "22.7.6",
    "@types/react": "18.3.1",
    "@types/react-dom": "18.3.1",
    "@types/react-gtm-module": "2.0.3",
    "@typescript-eslint/eslint-plugin": "8.9.0",
    "@typescript-eslint/parser": "8.9.0",
    "@typescript-eslint/utils": "8.9.0",
    "@vitejs/plugin-react": "4.3.2",
    "@vitejs/plugin-react-swc": "3.7.1",
    "dotenv": "16.4.5",
    "eslint": "9.12.0",
    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-prettier": "5.2.1",
    "eslint-plugin-react-hooks": "5.0.0",
    "eslint-plugin-react-refresh": "0.4.12",
    "prettier": "3.3.3",
    "sass": " 1.80.1",
    "typescript": "5.6.3",
    "vite": "5.4.9",
    "vite-bundle-visualizer": "1.2.1",
    "vite-plugin-pwa": "0.20.5"
  },