fix: EVM wallets being allowed to stay on unsupported networks (#368)

.changeset/shy-ravens-know.md

@@ -0,0 +1,6 @@
+---
+"@fuel-connectors/walletconnect-connector": patch
+"@fuels/connectors": patch
+---
+
+Fixed EVM wallets being allowed to stay on unsupported networks.

examples/react-app/src/main.tsx

@@ -39,6 +39,7 @@ const wagmiConfig = createConfig({
     [mainnet.id]: http(),
     [sepolia.id]: http(),
   },
+  syncConnectedChain: true,
   connectors: [
     injected({ shimDisconnect: false }),
     walletConnect({

packages/walletconnect-connector/src/WalletConnectConnector.ts

@@ -46,6 +46,7 @@ import {
   WINDOW,
 } from './constants';
 import type { WalletConnectConfig } from './types';
+import { subscribeAndEnforceChain } from './utils';
 import { createWagmiConfig, createWeb3ModalInstance } from './web3Modal';
 
 export class WalletConnectConnector extends PredicateConnector {
@@ -72,6 +73,11 @@ export class WalletConnectConnector extends PredicateConnector {
     this.storage =
       config.storage || new LocalStorage(WINDOW?.localStorage as Storage);
     const wagmiConfig = config?.wagmiConfig ?? createWagmiConfig();
+
+    if (wagmiConfig._internal.syncConnectedChain !== false) {
+      subscribeAndEnforceChain(wagmiConfig);
+    }
+
     this.customPredicate = config.predicateConfig || null;
     if (HAS_WINDOW) {
       this.configProviders({ ...config, wagmiConfig });

packages/walletconnect-connector/src/index.ts

@@ -1,2 +1,3 @@
 export * from './WalletConnectConnector';
 export * from './types';
+export * from './utils';

packages/walletconnect-connector/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './subscribeAndEnforceChain';

packages/walletconnect-connector/src/utils/subscribeAndEnforceChain.ts

@@ -0,0 +1,54 @@
+import {
+  type Config,
+  type State,
+  disconnect,
+  getChains,
+  switchChain,
+} from '@wagmi/core';
+
+function getCurrentChainId(state: Pick<State, 'connections' | 'current'>) {
+  return state.current
+    ? state.connections.get(state.current)?.chainId
+    : undefined;
+}
+
+export function subscribeAndEnforceChain(config: Config) {
+  if (!config) throw new Error('config is required');
+
+  config.subscribe(
+    (state) => ({
+      connections: state.connections,
+      status: state.status,
+      current: state.current,
+    }),
+    (state, _prev) => {
+      const chains = getChains(config);
+      if (state.status !== 'connected' || state.current == null) return;
+      const connector = state.connections.get(state.current)?.connector;
+      const currentChain = getCurrentChainId(state);
+      if (
+        currentChain != null &&
+        !chains.some((chain) => chain.id === currentChain)
+      ) {
+        // Some EVM Wallets (like MetaMask) will auto-reject calls made too quickly.
+        setTimeout(() => {
+          switchChain(config, {
+            chainId: chains[0].id,
+            connector,
+          }).catch((error) => {
+            console.log(error);
+            disconnect(config);
+          });
+        }, 2000);
+      }
+    },
+    {
+      equalityFn: (a, b) => {
+        return (
+          getCurrentChainId(a) === getCurrentChainId(b) && a.status === b.status
+        );
+      },
+    },
+  );
+  // wagmiCo
+}

packages/walletconnect-connector/src/web3Modal.ts

@@ -11,6 +11,7 @@ interface CreateWeb3ModalProps {
 export const createWagmiConfig = (): Config =>
   createConfig({
     chains: [sepolia, mainnet],
+    syncConnectedChain: true,
     transports: {
       [mainnet.id]: http(),
       [sepolia.id]: http(),