[bug] Switch modal is shown when the user is disconnected

[venturars]

Link to minimal reproducible example

https://imgur.com/a/UYAdva8

Steps to Reproduce

StackBlitz demo: 🔗 https://stackblitz.com/edit/stackblitz-starters-4r4zxcrm?file=README.md

---

🧪 Steps to Reproduce

1. Open the demo above
2. Connect a Metamask
3. Switch to an unsupported EVM chain
4. A modal appears asking to switch network
5. In the modal, click the option to disconnect the wallet
6. Refresh the page

Summary

✅ Expected Behavior

When using allowUnsupportedChain: false, and the user disconnects their wallet from the modal triggered by switching to an unsupported network, refreshing the page should:

• Keep the wallet disconnected
• Not show the "Switch Network" modal, since no wallet is connected

---

❌ Actual Behavior

After the refresh:

• The wallet is not connected (✅ correct)
• But the "Switch Network" modal still shows (❌ unexpected)

List of related npm package versions

{
  "dependencies": {
    "@dnd-kit/core": "6.3.1",
    "@dnd-kit/modifiers": "8.0.0",
    "@dnd-kit/sortable": "9.0.0",
    "@dnd-kit/utilities": "3.2.2",
    "@hookform/resolvers": "3.9.0",
    "@next/third-parties": "15.2.1",
    "@radix-ui/react-checkbox": "1.3.1",
    "@radix-ui/react-dialog": "1.1.13",
    "@radix-ui/react-icons": "1.3.2",
    "@radix-ui/react-label": "2.1.6",
    "@radix-ui/react-radio-group": "1.3.6",
    "@radix-ui/react-select": "2.2.4",
    "@radix-ui/react-separator": "1.1.6",
    "@radix-ui/react-slider": "1.3.4",
    "@radix-ui/react-slot": "1.2.2",
    "@radix-ui/react-switch": "1.2.4",
    "@radix-ui/react-tabs": "1.1.11",
    "@radix-ui/react-tooltip": "1.2.6",
    "@reown/appkit": "workspace:*",
    "@reown/appkit-adapter-bitcoin": "workspace:*",
    "@reown/appkit-adapter-ethers": "workspace:*",
    "@reown/appkit-adapter-solana": "workspace:*",
    "@reown/appkit-common": "workspace:*",
    "@reown/appkit-controllers": "workspace:*",
    "@reown/appkit-scaffold-ui": "workspace:*",
    "@reown/appkit-ui": "workspace:*",
    "@sentry/core": "8.55.0",
    "@sentry/nextjs": "8.55.0",
    "@solana/wallet-adapter-wallets": "0.19.36",
    "@solana/web3.js": "1.98.2",
    "@tanstack/react-query": "5.75.5",
    "@wagmi/core": "2.17.1",
    "autoprefixer": "10.4.20",
    "class-variance-authority": "0.7.1",
    "classnames": "2.5.1",
    "clsx": "2.1.1",
    "ethers": "6.14.0",
    "next": "14.2.28",
    "next-themes": "0.4.6",
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "sonner": "1.7.4",
    "tailwind-merge": "2.6.0",
    "tailwindcss-animate": "1.0.7",
    "viem": "2.29.0",
    "wagmi": "2.15.2",
    "valtio": "1.13.2"
  },
  "devDependencies": {
    "@types/node": "22.13.4",
    "@types/react": "19.1.3",
    "@types/react-dom": "19.1.3",
    "@mailsac/api": "1.0.8",
    "@playwright/test": "1.48.2",
    "eslint": "8.56.0",
    "eslint-config-next": "14.1.0",
    "dotenv": "16.4.7",
    "postcss": "8.5.3",
    "tailwindcss": "3.4.1",
    "typescript": "5.8.3"
  }
}

Node.js Version

v22.16.0

Package Manager

[email protected]

[linear[bot]]

APKT-3032 [bug] Switch modal is shown when the user is disconnected

[venturars]

I was able to resolve the issue by modifying the following code in ./packages/controllers/src/controllers/ChainController.ts:

📎 [Video demo](https://imgur.com/a/eCK9uJh)

// If no address is set, user is not connected, so return true
if (state.activeCaipAddress) {
  const isSupported = ChainController.checkIfSupportedNetwork(caipNetwork.chainNamespace);

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

This change prevents the "Switch Network" modal from being shown when the wallet is disconnected.

[venturars]

🔧 Alternate Temporary Solution

I found another workaround that resolves the issue by clearing the @appkit/active_caip_network_id from localStorage when the wallet is disconnected.

You can add this snippet to your App.tsx:

function WalletListener() {
  const { isConnected } = useAccount();

  useEffect(() => {
    if (!isConnected) {
      localStorage.removeItem("@appkit/active_caip_network_id");
    }
  }, [isConnected]);

  return null;
}

🧪 Demo: https://stackblitz.com/edit/stackblitz-starters-9rhqsht9?file=src%2FApp.tsx

[arein]

ah just saw this @venturars

[rtomas]

hi @venturars The engineer team will be looking at it. Gracias por reportar este issue.

[venturars]

@rtomas @arein

After updating viem, wagmi, and appkit to their latest versions, using the config enableNetworkSwitch: true, the wallet connection issue appears to be resolved. We’re currently waiting for final confirmation from our tester, but everything seems to be working smoothly so far. ✅

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

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"
  },

[arein]

Amazing thank you @venturars