thirdweb 5.105.7-nightly-4c6a421d64336d7c18956a4128fea40866b9c9b1-20250706232018 → 5.105.7

package/dist/types/wallets/wallet-connect/types.d.ts

@@ -1,19 +1,10 @@
+import type { EthereumProvider } from "@walletconnect/ethereum-provider";
 import type { Chain } from "../../chains/types.js";
 import type { ThirdwebClient } from "../../client/client.js";
 import type { Prettify } from "../../utils/type-utils.js";
 import type { AppMetadata } from "../types.js";
-type WalletConnectQRCodeModalOptions = {
-    themeMode?: "light" | "dark";
-    themeVariables?: Record<string, string>;
-    desktopWallets?: Record<string, unknown>[];
-    enableExplorer?: boolean;
-    explorerRecommendedWalletIds?: string[];
-    explorerExcludedWalletIds?: string[];
-    mobileWallets?: Record<string, unknown>[];
-    privacyPolicyUrl?: string;
-    termsOfServiceUrl?: string;
-    walletImages?: Record<string, string>;
-};
+type EthereumProviderOptions = Parameters<(typeof EthereumProvider)["init"]>[0];
+type WalletConnectQRCodeModalOptions = Pick<NonNullable<EthereumProviderOptions["qrModalOptions"]>, "themeMode" | "themeVariables" | "desktopWallets" | "enableExplorer" | "explorerRecommendedWalletIds" | "explorerExcludedWalletIds" | "mobileWallets" | "privacyPolicyUrl" | "termsOfServiceUrl" | "walletImages">;
 export type WalletConnectConfig = {
     /**
      * Your project’s unique identifier that can be obtained at https://cloud.walletconnect.com/

package/dist/types/wallets/wallet-connect/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/wallets/wallet-connect/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,KAAK,+BAA+B,GAAG;IACrC,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4BAA4B,CAAC,EAAE,MAAM,EAAE,CAAC;IACxC,yBAAyB,CAAC,EAAE,MAAM,EAAE,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;;;;;OAeG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;;;;;;;;;;;;OAcG;IACH,MAAM,EAAE,cAAc,CAAC;IAEvB,aAAa,CAAC,EAAE,QAAQ,CACtB,mBAAmB,GAAG;QACpB;;;;;;;;;;;;;;;;;;;;;;;;;WAyBG;QACH,cAAc,CAAC,EAAE,KAAK,EAAE,CAAC;QACzB;;;;;;;;;;;;;;;;;WAiBG;QACH,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB;;;WAGG;QACH,cAAc,CAAC,EAAE,+BAA+B,CAAC;QACjD;;;;;;;;;;;;;WAaG;QACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;KACvC,CACF,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;;;;;;;;;;;;OAcG;IACH,MAAM,EAAE,cAAc,CAAC;IAEvB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IAExC,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,cAAc,CAAC,EAAE,KAAK,EAAE,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/wallets/wallet-connect/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,KAAK,uBAAuB,GAAG,UAAU,CAAC,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAEhF,KAAK,+BAA+B,GAAG,IAAI,CACzC,WAAW,CAAC,uBAAuB,CAAC,gBAAgB,CAAC,CAAC,EACpD,WAAW,GACX,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,8BAA8B,GAC9B,2BAA2B,GAC3B,eAAe,GACf,kBAAkB,GAClB,mBAAmB,GACnB,cAAc,CACjB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;;;;;OAeG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;;;;;;;;;;;;OAcG;IACH,MAAM,EAAE,cAAc,CAAC;IAEvB,aAAa,CAAC,EAAE,QAAQ,CACtB,mBAAmB,GAAG;QACpB;;;;;;;;;;;;;;;;;;;;;;;;;WAyBG;QACH,cAAc,CAAC,EAAE,KAAK,EAAE,CAAC;QACzB;;;;;;;;;;;;;;;;;WAiBG;QACH,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB;;;WAGG;QACH,cAAc,CAAC,EAAE,+BAA+B,CAAC;QACjD;;;;;;;;;;;;;WAaG;QACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;KACvC,CACF,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;;;;;;;;;;;;OAcG;IACH,MAAM,EAAE,cAAc,CAAC;IAEvB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IAExC,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,cAAc,CAAC,EAAE,KAAK,EAAE,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

package/package.json

@@ -23,8 +23,8 @@
     "@radix-ui/react-tooltip": "1.2.7",
     "@storybook/react": "9.0.15",
     "@tanstack/react-query": "5.81.5",
+    "@walletconnect/ethereum-provider": "2.20.1",
     "@walletconnect/sign-client": "2.20.1",
-    "@walletconnect/universal-provider": "2.21.4",
     "abitype": "1.0.8",
     "cross-spawn": "7.0.6",
     "fuse.js": "7.1.0",
@@ -375,7 +375,7 @@
     }
   },
   "typings": "./dist/types/exports/thirdweb.d.ts",
-  "version": "5.105.7-nightly-4c6a421d64336d7c18956a4128fea40866b9c9b1-20250706232018",
+  "version": "5.105.7",
   "scripts": {
     "bench": "vitest -c ./test/vitest.config.ts bench",
     "bench:compare": "bun run ./benchmarks/run.ts",

package/src/react/web/ui/Bridge/BridgeOrchestrator.tsx

@@ -292,7 +292,6 @@ export function BridgeOrchestrator({
             amount={state.context.destinationAmount}
             client={client}
             destinationToken={state.context.destinationToken}
-            mode={uiOptions.mode}
             onBack={() => {
               send({ type: "BACK" });
             }}
@@ -302,6 +301,7 @@ export function BridgeOrchestrator({
             paymentMethod={state.context.selectedPaymentMethod}
             purchaseData={purchaseData}
             receiver={state.context.receiverAddress}
+            uiOptions={uiOptions}
           />
         )}
 

package/src/react/web/ui/Bridge/BuyWidget.tsx

@@ -282,7 +282,6 @@ export function BuyWidget(props: BuyWidgetProps) {
         toChainId: props.chain.id,
         toToken: props.tokenAddress,
       });
-      return true;
     },
     queryKey: ["buy_widget:render"],
   });

package/src/react/web/ui/Bridge/CheckoutWidget.tsx

@@ -265,7 +265,6 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
         toChainId: props.chain.id,
         toToken: props.tokenAddress,
       });
-      return true;
     },
     queryKey: ["checkout_widget:render"],
   });

package/src/react/web/ui/Bridge/QuoteLoader.tsx

@@ -17,6 +17,7 @@ import { Container } from "../components/basic.js";
 import { Spacer } from "../components/Spacer.js";
 import { Spinner } from "../components/Spinner.js";
 import { Text } from "../components/text.js";
+import type { UIOptions } from "./BridgeOrchestrator.js";
 
 interface QuoteLoaderProps {
   /**
@@ -78,14 +79,13 @@ interface QuoteLoaderProps {
   paymentLinkId?: string;
 
   /**
-   * Fee payer for direct transfers (defaults to sender)
+   * UI options
    */
-  feePayer?: "sender" | "receiver";
-  mode: "fund_wallet" | "direct_payment" | "transaction";
+  uiOptions: UIOptions;
 }
 
 export function QuoteLoader({
-  mode,
+  uiOptions,
   destinationToken,
   paymentMethod,
   amount,
@@ -96,10 +96,14 @@ export function QuoteLoader({
   onError,
   purchaseData,
   paymentLinkId,
-  feePayer,
 }: QuoteLoaderProps) {
   // For now, we'll use a simple buy operation
   // This will be expanded to handle different bridge types based on the payment method
+  const feePayer =
+    uiOptions.mode === "direct_payment"
+      ? uiOptions.paymentInfo.feePayer
+      : undefined;
+  const mode = uiOptions.mode;
   const request: BridgePrepareRequest = getBridgeParams({
     amount,
     client,

package/src/react/web/ui/Bridge/TransactionWidget.tsx

@@ -292,7 +292,6 @@ export function TransactionWidget(props: TransactionWidgetProps) {
         event: "ub:ui:transaction_widget:render",
         toToken: props.tokenAddress,
       });
-      return true;
     },
     queryKey: ["transaction_widget:render"],
   });

package/src/react/web/ui/PayEmbed.tsx

@@ -380,6 +380,9 @@ export function PayEmbed(props: PayEmbedProps) {
         chain={props.payOptions.paymentInfo.chain}
         client={props.client}
         description={metadata?.description}
+        feePayer={
+          props.payOptions.paymentInfo.feePayer === "sender" ? "user" : "seller"
+        }
         image={metadata?.image}
         name={metadata?.name || "Checkout"}
         onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.105.7-nightly-4c6a421d64336d7c18956a4128fea40866b9c9b1-20250706232018";
+export const version = "5.105.7";

package/src/wallets/create-wallet.ts

@@ -399,14 +399,7 @@ export function createWallet<const ID extends WalletId>(
         getConfig: () => args[1],
         id,
         subscribe: emitter.subscribe,
-        switchChain: async (c) => {
-          try {
-            await handleSwitchChain(c);
-            chain = c;
-          } catch (e) {
-            console.error("Error switching chain", e);
-          }
-        },
+        switchChain: (c) => handleSwitchChain(c),
       };
       return wallet;
     }

package/src/wallets/native/create-wallet.ts

@@ -230,14 +230,7 @@ export function createWallet<const ID extends WalletId>(
         getConfig: () => args[1],
         id,
         subscribe: emitter.subscribe,
-        switchChain: async (c) => {
-          try {
-            await handleSwitchChain(c);
-            chain = c;
-          } catch (e) {
-            console.error("Error switching chain", e);
-          }
-        },
+        switchChain: (c) => handleSwitchChain(c),
       };
       return wallet;
     }

package/src/wallets/wallet-connect/controller.ts

@@ -1,4 +1,4 @@
-import type { UniversalProvider } from "@walletconnect/universal-provider";
+import type { EthereumProvider } from "@walletconnect/ethereum-provider";
 import type { Address } from "abitype";
 import {
   getTypesForEIP712Domain,
@@ -11,7 +11,11 @@ import {
 } from "viem";
 import { trackTransaction } from "../../analytics/track/transaction.js";
 import type { Chain } from "../../chains/types.js";
-import { getCachedChain, getRpcUrlForChain } from "../../chains/utils.js";
+import {
+  getCachedChain,
+  getChainMetadata,
+  getRpcUrlForChain,
+} from "../../chains/utils.js";
 import type { ThirdwebClient } from "../../client/client.js";
 import { getAddress } from "../../utils/address.js";
 import {
@@ -36,6 +40,7 @@ import type {
   Wallet,
 } from "../interfaces/wallet.js";
 import type { DisconnectFn, SwitchChainFn } from "../types.js";
+import { getValidPublicRPCUrl } from "../utils/chains.js";
 import { getDefaultAppMetadata } from "../utils/defaultDappMetadata.js";
 import { normalizeChainId } from "../utils/normalizeChainId.js";
 import type { WalletEmitter } from "../wallet-emitter.js";
@@ -43,9 +48,7 @@ import type { WalletId } from "../wallet-types.js";
 import { DEFAULT_PROJECT_ID, NAMESPACE } from "./constants.js";
 import type { WCAutoConnectOptions, WCConnectOptions } from "./types.js";
 
-type WCProvider = InstanceType<typeof UniversalProvider>;
-
-let cachedProvider: WCProvider | null = null;
+type WCProvider = InstanceType<typeof EthereumProvider>;
 
 type SavedConnectParams = {
   optionalChains?: Chain[];
@@ -53,6 +56,10 @@ type SavedConnectParams = {
   pairingTopic?: string;
 };
 
+const ADD_ETH_CHAIN_METHOD = "wallet_addEthereumChain";
+
+const defaultShowQrModal = true;
+
 const storageKeys = {
   lastUsedChainId: "tw.wc.lastUsedChainId",
   requestedChains: "tw.wc.requestedChains",
@@ -116,56 +123,37 @@ export async function connectWC(
     }
   }
 
-  // For UniversalProvider, we still need chain configuration for session management
-  const { chains: chainsToRequest, rpcMap } = getChainsToRequest({
+  const {
+    rpcMap,
+    requiredChain,
+    optionalChains: chainsToRequest,
+  } = getChainsToRequest({
     chain: chainToRequest,
     client: options.client,
     optionalChains: optionalChains,
   });
 
-  if (!provider.session) {
-    // For UniversalProvider, we need to connect with namespaces
+  if (provider.session) {
     await provider.connect({
       ...(wcOptions?.pairingTopic
         ? { pairingTopic: wcOptions?.pairingTopic }
         : {}),
-      namespaces: {
-        [NAMESPACE]: {
-          chains: chainsToRequest,
-          events: ["chainChanged", "accountsChanged"],
-          methods: [
-            "eth_sendTransaction",
-            "eth_signTransaction",
-            "eth_sign",
-            "personal_sign",
-            "eth_signTypedData",
-            "wallet_switchEthereumChain",
-            "wallet_addEthereumChain",
-          ],
-          rpcMap,
-        },
-      },
+      chains: requiredChain ? [requiredChain.id] : undefined,
+      optionalChains: chainsToRequest,
+      rpcMap: rpcMap,
     });
   }
 
-  setRequestedChainsIds(
-    chainsToRequest.map((x) => Number(x.split(":")[1])),
-    storage,
-  );
-  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];
+  setRequestedChainsIds(chainsToRequest, storage);
+  // If session exists and chains are authorized, enable provider for required chain
+  const addresses = await provider.enable();
+  const address = addresses[0];
   if (!address) {
     throw new Error("No accounts found on provider.");
   }
 
+  const providerChainId = normalizeChainId(provider.chainId);
+
   const chain =
     options.chain && options.chain.id === providerChainId
       ? options.chain
@@ -221,19 +209,16 @@ export async function autoConnectWC(
         },
     walletId,
     sessionHandler,
+    true, // is auto connect
   );
 
-  // For UniversalProvider, get accounts from enable() method
-  const addresses = await provider.enable();
-  const address = addresses[0];
+  const address = provider.accounts[0];
 
   if (!address) {
     throw new Error("No accounts found on provider.");
   }
 
-  // For UniversalProvider, get chainId from the session namespaces or use default
-  const currentChainId = options.chain?.id || 1;
-  const providerChainId = normalizeChainId(currentChainId);
+  const providerChainId = normalizeChainId(provider.chainId);
 
   const chain =
     options.chain && options.chain.id === providerChainId
@@ -249,15 +234,12 @@ async function initProvider(
   options: WCConnectOptions,
   walletId: WCSupportedWalletIds | "walletConnect",
   sessionRequestHandler?: (uri: string) => void | Promise<void>,
+  isAutoConnect = false,
 ) {
-  if (cachedProvider) {
-    return cachedProvider;
-  }
-
   const walletInfo = await getWalletInfo(walletId);
   const wcOptions = options.walletConnect;
-  const { UniversalProvider } = await import(
-    "@walletconnect/universal-provider"
+  const { EthereumProvider, OPTIONAL_EVENTS, OPTIONAL_METHODS } = await import(
+    "@walletconnect/ethereum-provider"
   );
 
   let optionalChains: Chain[] | undefined = wcOptions?.optionalChains;
@@ -271,7 +253,19 @@ async function initProvider(
     }
   }
 
-  const provider = await UniversalProvider.init({
+  const {
+    rpcMap,
+    requiredChain,
+    optionalChains: chainsToRequest,
+  } = getChainsToRequest({
+    chain: chainToRequest,
+    client: options.client,
+    optionalChains: optionalChains,
+  });
+
+  const provider = await EthereumProvider.init({
+    chains: requiredChain ? [requiredChain.id] : undefined,
+    disableProviderPing: true,
     metadata: {
       description:
         wcOptions?.appMetadata?.description ||
@@ -282,11 +276,31 @@ async function initProvider(
       name: wcOptions?.appMetadata?.name || getDefaultAppMetadata().name,
       url: wcOptions?.appMetadata?.url || getDefaultAppMetadata().url,
     },
+    optionalChains: chainsToRequest,
+    optionalEvents: OPTIONAL_EVENTS,
+    optionalMethods: OPTIONAL_METHODS,
     projectId: wcOptions?.projectId || DEFAULT_PROJECT_ID,
+    qrModalOptions: wcOptions?.qrModalOptions,
+    rpcMap: rpcMap,
+    showQrModal:
+      wcOptions?.showQrModal === undefined
+        ? sessionRequestHandler
+          ? false
+          : defaultShowQrModal
+        : wcOptions.showQrModal,
   });
 
   provider.events.setMaxListeners(Number.POSITIVE_INFINITY);
 
+  // disconnect the provider if chains are stale when (if not auto connecting)
+  if (!isAutoConnect) {
+    // const isStale = await isChainsStale(provider, chainsToRequest);
+
+    if (provider.session) {
+      await provider.disconnect();
+    }
+  }
+
   if (walletId !== "walletConnect") {
     async function handleSessionRequest() {
       const walletLinkToOpen =
@@ -300,16 +314,12 @@ async function initProvider(
       }
     }
 
-    // For UniversalProvider, use different event handling
-    provider.on("session_request_sent", handleSessionRequest);
+    provider.signer.client.on("session_request_sent", handleSessionRequest);
     provider.events.addListener("disconnect", () => {
-      provider.off("session_request_sent", handleSessionRequest);
-      cachedProvider = null;
+      provider.signer.client.off("session_request_sent", handleSessionRequest);
     });
   }
 
-  cachedProvider = provider;
-
   return provider;
 }
 
@@ -317,31 +327,26 @@ function createAccount({
   provider,
   address,
   client,
-  chain,
 }: {
   provider: WCProvider;
   address: string;
   client: ThirdwebClient;
-  chain: Chain;
 }) {
   const account: Account = {
     address: getAddress(address),
     async sendTransaction(tx: SendTransactionOption) {
-      const transactionHash = (await provider.request(
-        {
-          method: "eth_sendTransaction",
-          params: [
-            {
-              data: tx.data,
-              from: getAddress(address),
-              gas: tx.gas ? numberToHex(tx.gas) : undefined,
-              to: tx.to as Address,
-              value: tx.value ? numberToHex(tx.value) : undefined,
-            },
-          ],
-        },
-        `eip155:${tx.chainId}`,
-      )) as Hex;
+      const transactionHash = (await provider.request({
+        method: "eth_sendTransaction",
+        params: [
+          {
+            data: tx.data,
+            from: getAddress(address),
+            gas: tx.gas ? numberToHex(tx.gas) : undefined,
+            to: tx.to as Address,
+            value: tx.value ? numberToHex(tx.value) : undefined,
+          },
+        ],
+      })) as Hex;
 
       trackTransaction({
         chainId: tx.chainId,
@@ -367,13 +372,10 @@ function createAccount({
         }
         return message.raw;
       })();
-      return provider.request(
-        {
-          method: "personal_sign",
-          params: [messageToSign, this.address],
-        },
-        `eip155:${chain.id}`,
-      );
+      return provider.request({
+        method: "personal_sign",
+        params: [messageToSign, this.address],
+      });
     },
     async signTypedData(_data) {
       const data = parseTypedData(_data);
@@ -396,13 +398,10 @@ function createAccount({
         types,
       });
 
-      return await provider.request(
-        {
-          method: "eth_signTypedData_v4",
-          params: [this.address, typedData],
-        },
-        `eip155:${chain.id}`,
-      );
+      return await provider.request({
+        method: "eth_signTypedData_v4",
+        params: [this.address, typedData],
+      });
     },
   };
 
@@ -417,14 +416,13 @@ function onConnect(
   storage: AsyncStorage,
   client: ThirdwebClient,
 ): [Account, Chain, DisconnectFn, SwitchChainFn] {
-  const account = createAccount({ address, chain, client, provider });
+  const account = createAccount({ address, client, provider });
 
   async function disconnect() {
     provider.removeListener("accountsChanged", onAccountsChanged);
     provider.removeListener("chainChanged", onChainChanged);
     provider.removeListener("disconnect", onDisconnect);
     await provider.disconnect();
-    cachedProvider = null;
   }
 
   function onDisconnect() {
@@ -438,7 +436,6 @@ function onConnect(
     if (accounts[0]) {
       const newAccount = createAccount({
         address: getAddress(accounts[0]),
-        chain,
         client,
         provider,
       });
@@ -464,14 +461,66 @@ function onConnect(
     account,
     chain,
     disconnect,
-    (newChain) => switchChainWC(provider, newChain),
+    (newChain) => switchChainWC(provider, newChain, storage),
   ];
 }
 
-async function switchChainWC(provider: WCProvider, chain: Chain) {
+// Storage utils  -----------------------------------------------------------------------------------------------
+
+function getNamespaceMethods(provider: WCProvider) {
+  return provider.session?.namespaces[NAMESPACE]?.methods || [];
+}
+
+function getNamespaceChainsIds(provider: WCProvider): number[] {
+  const chainIds = provider.session?.namespaces[NAMESPACE]?.chains?.map(
+    (chain) => Number.parseInt(chain.split(":")[1] || ""),
+  );
+
+  return chainIds ?? [];
+}
+
+async function switchChainWC(
+  provider: WCProvider,
+  chain: Chain,
+  storage: AsyncStorage,
+) {
   const chainId = chain.id;
   try {
-    provider.setDefaultChain(`eip155:${chainId}`);
+    const namespaceChains = getNamespaceChainsIds(provider);
+    const namespaceMethods = getNamespaceMethods(provider);
+    const isChainApproved = namespaceChains.includes(chainId);
+
+    if (!isChainApproved && namespaceMethods.includes(ADD_ETH_CHAIN_METHOD)) {
+      const apiChain = await getChainMetadata(chain);
+
+      const blockExplorerUrls = [
+        ...new Set([
+          ...(chain.blockExplorers?.map((x) => x.url) || []),
+          ...(apiChain.explorers?.map((x) => x.url) || []),
+        ]),
+      ];
+
+      await provider.request({
+        method: ADD_ETH_CHAIN_METHOD,
+        params: [
+          {
+            blockExplorerUrls:
+              blockExplorerUrls.length > 0 ? blockExplorerUrls : undefined,
+            chainId: numberToHex(apiChain.chainId),
+            chainName: apiChain.name,
+            nativeCurrency: apiChain.nativeCurrency, // no clientId on purpose
+            rpcUrls: getValidPublicRPCUrl(apiChain),
+          },
+        ],
+      });
+      const requestedChains = await getRequestedChainsIds(storage);
+      requestedChains.push(chainId);
+      setRequestedChainsIds(requestedChains, storage);
+    }
+    await provider.request({
+      method: "wallet_switchEthereumChain",
+      params: [{ chainId: numberToHex(chainId) }],
+    });
   } catch (error) {
     const message =
       typeof error === "string" ? error : (error as ProviderRpcError)?.message;
@@ -494,23 +543,35 @@ function setRequestedChainsIds(
   storage?.setItem(storageKeys.requestedChains, stringify(chains));
 }
 
+/**
+ * Get the last requested chains from the storage.
+ * @internal
+ */
+async function getRequestedChainsIds(storage: AsyncStorage): Promise<number[]> {
+  const data = await storage.getItem(storageKeys.requestedChains);
+  return data ? JSON.parse(data) : [];
+}
+
+type ArrayOneOrMore<T> = {
+  0: T;
+} & Array<T>;
+
 function getChainsToRequest(options: {
   chain?: Chain;
   optionalChains?: Chain[];
   client: ThirdwebClient;
 }): {
   rpcMap: Record<number, string>;
-  chains: string[];
+  requiredChain: Chain | undefined;
+  optionalChains: ArrayOneOrMore<number>;
 } {
   const rpcMap: Record<number, string> = {};
-  const chainIds: number[] = [];
 
   if (options.chain) {
     rpcMap[options.chain.id] = getRpcUrlForChain({
       chain: options.chain,
       client: options.client,
     });
-    chainIds.push(options.chain.id);
   }
 
   // limit optional chains to 10
@@ -521,16 +582,18 @@ function getChainsToRequest(options: {
       chain: chain,
       client: options.client,
     });
-    chainIds.push(chain.id);
   }
 
   if (!options.chain && optionalChains.length === 0) {
     rpcMap[1] = getCachedChain(1).rpc;
-    chainIds.push(1);
   }
 
   return {
-    chains: chainIds.map((x) => `eip155:${x}`),
+    optionalChains:
+      optionalChains.length > 0
+        ? (optionalChains.map((x) => x.id) as ArrayOneOrMore<number>)
+        : [1],
+    requiredChain: options.chain ? options.chain : undefined,
     rpcMap,
   };
 }