Upgrade WalletConnect and improve chain switching reliability

Author: joaquim-verges

packages/thirdweb/package.json

@@ -25,8 +25,8 @@
     "@tanstack/react-query": "5.81.5",
     "@thirdweb-dev/engine": "workspace:*",
     "@thirdweb-dev/insight": "workspace:*",
-    "@walletconnect/sign-client": "2.20.1",
-    "@walletconnect/universal-provider": "2.21.4",
+    "@walletconnect/sign-client": "2.21.8",
+    "@walletconnect/universal-provider": "2.21.8",
     "abitype": "1.0.8",
     "cross-spawn": "7.0.6",
     "fuse.js": "7.1.0",

packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -154,6 +154,11 @@ export function useSendTransactionCore(args: {
         await switchChain(tx.chain);
         // in smart wallet case, account may change after chain switch
         _account = wallet.getAccount();
+
+        // ensure that the account has switched to the correct chain
+        if (wallet.getChain()?.id !== tx.chain.id) {
+          throw new Error(`Could not switch to chain ${tx.chain.id}`);
+        }
       }
 
       const account = _account;

packages/thirdweb/src/wallets/create-wallet.ts

@@ -483,6 +483,8 @@ export function createWallet<const ID extends WalletId>(
         id,
         subscribe: emitter.subscribe,
         switchChain: async (c) => {
+          // TODO: this should actually throw an error if the chain switch fails
+          // but our useSwitchActiveWalletChain hook currently doesn't handle this
           try {
             await handleSwitchChain(c);
             chain = c;

packages/thirdweb/src/wallets/in-app/core/authentication/siwe.ts

@@ -1,6 +1,6 @@
 import { signLoginPayload } from "../../../../auth/core/sign-login-payload.js";
 import type { LoginPayload } from "../../../../auth/core/types.js";
-import type { Chain } from "../../../../chains/types.js";
+import { getCachedChain } from "../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getClientFetch } from "../../../../utils/fetch.js";
 import { stringify } from "../../../../utils/json.js";
@@ -14,14 +14,14 @@ import type { AuthStoredTokenWithCookieReturnType } from "./types.js";
  */
 export async function siweAuthenticate(args: {
   wallet: Wallet;
-  chain: Chain;
   client: ThirdwebClient;
   ecosystem?: Ecosystem;
 }): Promise<AuthStoredTokenWithCookieReturnType> {
-  const { wallet, chain, client, ecosystem } = args;
+  const { wallet, client, ecosystem } = args;
+  const siweChain = getCachedChain(1); // always use mainnet for SIWE for wide wallet compatibility
   // only connect if the wallet doesn't already have an account
   const account =
-    wallet.getAccount() || (await wallet.connect({ chain, client }));
+    wallet.getAccount() || (await wallet.connect({ chain: siweChain, client }));
   const clientFetch = getClientFetch(client, ecosystem);
 
   const payload = await (async () => {
@@ -31,7 +31,7 @@ export async function siweAuthenticate(args: {
       ecosystem: args.ecosystem,
     });
     const res = await clientFetch(
-      `${path}&address=${account.address}&chainId=${chain.id}`,
+      `${path}&address=${account.address}&chainId=${siweChain.id}`,
     );
 
     if (!res.ok) throw new Error("Failed to generate SIWE login payload");

packages/thirdweb/src/wallets/in-app/native/native-connector.ts

@@ -183,7 +183,6 @@ export class InAppNativeConnector implements InAppConnector {
           "../core/authentication/siwe.js"
         );
         return siweAuthenticate({
-          chain: params.chain,
           client: this.client,
           ecosystem: params.ecosystem,
           wallet: params.wallet,

packages/thirdweb/src/wallets/in-app/web/lib/web-connector.test.ts

@@ -104,7 +104,6 @@ describe("InAppWebConnector.connect", () => {
     });
 
     expect(siweAuthenticate).toHaveBeenCalledWith({
-      chain: ethereum,
       client: TEST_CLIENT,
       ecosystem: undefined,
       wallet: mockWallet,

packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts

@@ -365,7 +365,6 @@ export class InAppWebConnector implements InAppConnector {
       }
       case "wallet": {
         return siweAuthenticate({
-          chain: args.chain,
           client: this.client,
           ecosystem: this.ecosystem,
           wallet: args.wallet,

packages/thirdweb/src/wallets/wallet-connect/controller.ts

@@ -132,7 +132,7 @@ export async function connectWC(
     ...(wcOptions?.pairingTopic
       ? { pairingTopic: wcOptions?.pairingTopic }
       : {}),
-    namespaces: {
+    optionalNamespaces: {
       [NAMESPACE]: {
         chains: chainsToRequest,
         events: ["chainChanged", "accountsChanged"],
@@ -157,14 +157,8 @@ export async function connectWC(
   );
   const currentChainId = chainsToRequest[0]?.split(":")[1] || 1;
   const providerChainId = normalizeChainId(currentChainId);
-  const accounts: string[] = await provider.request(
-    {
-      method: "eth_requestAccounts",
-      params: [],
-    },
-    `eip155:${providerChainId}`,
-  );
-  const address = accounts[0];
+  const account = firstAccountOn(provider.session, `eip155:1`); // grab the address from mainnet
+  const address = account;
   if (!address) {
     throw new Error("No accounts found on provider.");
   }
@@ -202,6 +196,109 @@ export async function connectWC(
   );
 }
 
+async function ensureTargetChain(
+  provider: Awaited<ReturnType<typeof initProvider>>,
+  chain: Chain,
+  walletInfo: WalletInfo,
+) {
+  if (!provider.session) {
+    throw new Error("No session found on provider.");
+  }
+  const TARGET_CAIP = `eip155:${chain.id}`;
+  const TARGET_HEX = numberToHex(chain.id);
+
+  // Fast path: already enabled
+  if (hasChainEnabled(provider.session, TARGET_CAIP)) {
+    provider.setDefaultChain(TARGET_CAIP);
+    return;
+  }
+
+  // 1) Try switch
+  try {
+    await requestAndOpenWallet({
+      provider,
+      payload: {
+        method: "wallet_switchEthereumChain",
+        params: [{ chainId: TARGET_HEX }],
+      },
+      chain: TARGET_CAIP, // route to target
+      walletInfo,
+    });
+    provider.setDefaultChain(TARGET_CAIP);
+    return;
+  } catch (err: any) {
+    const code = err?.code ?? err?.data?.originalError?.code;
+    // 4001 user rejected; stop
+    if (code === 4001) throw new Error("User rejected chain switch");
+    // fall through on 4902 or unknown -> try add
+  }
+
+  // 2) Add the chain via any chain we already have
+  const routeChain = anyRoutableChain(provider.session);
+  if (!routeChain)
+    throw new Error("No routable chain to send wallet_addEthereumChain");
+
+  try {
+    await requestAndOpenWallet({
+      provider,
+      payload: {
+        method: "wallet_addEthereumChain",
+        params: [
+          {
+            chainId: TARGET_HEX,
+            chainName: chain.name,
+            nativeCurrency: chain.nativeCurrency,
+            rpcUrls: [chain.rpc],
+            blockExplorerUrls: [chain.blockExplorers?.[0]?.url ?? ""],
+          },
+        ],
+      },
+      chain: routeChain, // route via known-good chain, not the target
+      walletInfo,
+    });
+  } catch (err: any) {
+    const code = err?.code ?? err?.data?.originalError?.code;
+    if (code === 4001) throw new Error("User rejected add chain");
+    throw new Error(`Add chain failed: ${err?.message || String(err)}`);
+  }
+
+  // 3) Re-try switch after add
+  await requestAndOpenWallet({
+    provider,
+    payload: {
+      method: "wallet_switchEthereumChain",
+      params: [{ chainId: TARGET_HEX }],
+    },
+    chain: TARGET_CAIP,
+    walletInfo,
+  });
+  provider.setDefaultChain(TARGET_CAIP);
+
+  // 4) Verify enablement
+  if (!hasChainEnabled(provider.session, TARGET_CAIP)) {
+    throw new Error("Target chain still not enabled by wallet");
+  }
+}
+
+type WCSession = Awaited<ReturnType<typeof UniversalProvider.init>>["session"];
+
+function getNS(session: WCSession) {
+  return session?.namespaces?.eip155;
+}
+function hasChainEnabled(session: WCSession, caip: string) {
+  const ns = getNS(session);
+  return !!ns?.accounts?.some((a) => a.startsWith(`${caip}:`));
+}
+function firstAccountOn(session: WCSession, caip: string): string | null {
+  const ns = getNS(session);
+  const hit = ns?.accounts?.find((a) => a.startsWith(`${caip}:`));
+  return hit ? (hit.split(":")[2] ?? null) : null;
+}
+function anyRoutableChain(session: WCSession): string | null {
+  const ns = getNS(session);
+  return ns?.accounts?.[0]?.split(":")?.slice(0, 2)?.join(":") ?? null; // e.g. "eip155:1"
+}
+
 /**
  * Auto connect to already connected wallet connect session.
  * @internal
@@ -545,14 +642,17 @@ function onConnect(
     account,
     chain,
     disconnect,
-    (newChain) => switchChainWC(provider, newChain),
+    (newChain) => switchChainWC(provider, newChain, walletInfo),
   ];
 }
 
-async function switchChainWC(provider: WCProvider, chain: Chain) {
-  const chainId = chain.id;
+async function switchChainWC(
+  provider: WCProvider,
+  chain: Chain,
+  walletInfo: WalletInfo,
+) {
   try {
-    provider.setDefaultChain(`eip155:${chainId}`);
+    await ensureTargetChain(provider, chain, walletInfo);
   } catch (error) {
     const message =
       typeof error === "string" ? error : (error as ProviderRpcError)?.message;
@@ -605,7 +705,10 @@ function getChainsToRequest(options: {
     chainIds.push(chain.id);
   }
 
-  if (!options.chain && optionalChains.length === 0) {
+  // always include mainnet
+  // many wallets only support a handful of chains, but mainnet is always supported
+  // we will add additional chains in switchChain if needed
+  if (!chainIds.includes(1)) {
     rpcMap[1] = getCachedChain(1).rpc;
     chainIds.push(1);
   }