thirdweb 5.105.20 → 5.105.22

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

@@ -0,0 +1,58 @@
+/**
+ * Vanilla JavaScript QR Code overlay utility for WalletConnect URIs
+ * Works in any browser context without requiring React or other frameworks
+ */
+interface QROverlayOptions {
+    /**
+     * Custom styles to apply to the overlay
+     */
+    overlayStyles?: Partial<CSSStyleDeclaration>;
+    /**
+     * Custom styles to apply to the modal container
+     */
+    modalStyles?: Partial<CSSStyleDeclaration>;
+    /**
+     * QR code size in pixels
+     */
+    qrSize?: number;
+    /**
+     * Show close button
+     */
+    showCloseButton?: boolean;
+    /**
+     * Custom close button text
+     */
+    closeButtonText?: string;
+    /**
+     * Theme preference
+     */
+    theme?: "light" | "dark";
+    /**
+     * Custom container element to append the overlay to
+     */
+    container?: HTMLElement;
+    /**
+     * Callback called when user cancels the overlay (closes without connecting)
+     */
+    onCancel?: () => void;
+}
+export interface QROverlay {
+    /**
+     * Remove the overlay from the DOM
+     */
+    destroy: () => void;
+    /**
+     * Hide the overlay (without removing from DOM)
+     */
+    hide: () => void;
+    /**
+     * Show the overlay
+     */
+    show: () => void;
+}
+/**
+ * Creates a QR code overlay for the given WalletConnect URI
+ */
+export declare function createQROverlay(uri: string, options?: QROverlayOptions): QROverlay;
+export {};
+//# sourceMappingURL=qr-overlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"qr-overlay.d.ts","sourceRoot":"","sources":["../../../../src/wallets/wallet-connect/qr-overlay.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,UAAU,gBAAgB;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC7C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC3C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,MAAM,EACX,OAAO,GAAE,gBAAqB,GAC7B,SAAS,CA0OX"}

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

@@ -151,6 +151,19 @@ export type WCConnectOptions = {
          * ```
          */
         onDisplayUri?: (_uri: string) => void;
+        /**
+         * Callback that gets called when the user cancels the connection process (e.g., closes the QR modal).
+         * This is only called for user-initiated cancellations, not for programmatic cleanup.
+         *
+         * ```tsx
+         * await wallet.connect({
+         *  onCancel: () => {
+         *    console.log("User cancelled wallet connection");
+         *  }
+         * })
+         * ```
+         */
+        onCancel?: () => void;
     }>;
 };
 export type WCAutoConnectOptions = {

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,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;QACtC;;;;;;;;;;;WAWG;QACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;KACvB,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

@@ -34,12 +34,13 @@
     "ora": "8.2.0",
     "ox": "0.7.0",
     "prompts": "2.4.2",
+    "qrcode": "1.5.3",
     "toml": "3.0.0",
     "uqr": "0.1.2",
     "viem": "2.28.1",
     "zod": "3.25.75",
     "@thirdweb-dev/engine": "3.2.1",
-    "@thirdweb-dev/insight": "1.1.0"
+    "@thirdweb-dev/insight": "1.1.1"
   },
   "devDependencies": {
     "@aws-sdk/client-kms": "3.592.0",
@@ -61,6 +62,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/cross-spawn": "^6.0.6",
     "@types/prompts": "2.4.9",
+    "@types/qrcode": "1.5.5",
     "@types/react": "19.1.8",
     "@viem/anvil": "0.0.10",
     "@vitejs/plugin-react": "^4.6.0",
@@ -375,7 +377,7 @@
     }
   },
   "typings": "./dist/types/exports/thirdweb.d.ts",
-  "version": "5.105.20",
+  "version": "5.105.22",
   "scripts": {
     "bench": "vitest -c ./test/vitest.config.ts bench",
     "bench:compare": "bun run ./benchmarks/run.ts",

package/src/extensions/erc1155/read/getOwnedNFTs.ts

@@ -62,6 +62,7 @@ async function getOwnedNFTsFromInsight(
       chains: [options.contract.chain],
       client: options.contract.client,
       ownerAddress: options.address,
+      contractAddress: options.contract.address,
       queryOptions: {
         limit,
         page,

package/src/extensions/erc721/read/getOwnedNFTs.ts

@@ -78,6 +78,7 @@ async function getOwnedNFTsFromInsight(
       chains: [options.contract.chain],
       client: options.contract.client,
       ownerAddress: options.owner,
+      contractAddress: options.contract.address,
       queryOptions: {
         limit,
         page,

package/src/insight/get-nfts.ts

@@ -33,6 +33,7 @@ export async function getOwnedNFTs(args: {
   client: ThirdwebClient;
   chains: Chain[];
   ownerAddress: string;
+  contractAddress?: string;
   includeMetadata?: boolean;
   queryOptions?: Omit<GetV1NftsData["query"], "owner_address" | "chain">;
 }): Promise<(NFT & { quantityOwned: bigint })[]> {
@@ -50,8 +51,7 @@ export async function getOwnedNFTs(args: {
     import("viem"),
   ]);
 
-  // TODO (insight): add support for contract address filters
-  const { client, chains, ownerAddress, queryOptions } = args;
+  const { client, chains, ownerAddress, contractAddress, queryOptions } = args;
 
   await assertInsightEnabled(chains);
 
@@ -59,7 +59,8 @@ export async function getOwnedNFTs(args: {
     chain: chains.map((chain) => chain.id),
     // metadata: includeMetadata ? "true" : "false", TODO (insight): add support for this
     limit: 50,
-    owner_address: ownerAddress,
+    owner_address: [ownerAddress],
+    contract_address: contractAddress ? [contractAddress] : undefined,
   };
 
   const result = await getV1Nfts({

package/src/insight/get-tokens.ts

@@ -26,6 +26,7 @@ export async function getOwnedTokens(args: {
   client: ThirdwebClient;
   chains: Chain[];
   ownerAddress: string;
+  tokenAddress?: string;
   queryOptions?: Omit<
     GetV1TokensData["query"],
     "owner_address" | "chain_id" | "chain"
@@ -45,7 +46,7 @@ export async function getOwnedTokens(args: {
     import("../utils/json.js"),
   ]);
 
-  const { client, chains, ownerAddress, queryOptions } = args;
+  const { client, chains, ownerAddress, tokenAddress, queryOptions } = args;
 
   await assertInsightEnabled(chains);
 
@@ -55,7 +56,8 @@ export async function getOwnedTokens(args: {
     include_spam: "false",
     limit: 50,
     metadata: "true",
-    owner_address: ownerAddress,
+    owner_address: [ownerAddress],
+    token_address: tokenAddress ? [tokenAddress] : undefined,
   };
 
   const result = await getV1Tokens({

package/src/react/core/hooks/wallets/useConnect.ts

@@ -79,5 +79,15 @@ export function useConnect(options?: ConnectManagerOptions) {
     [connect, options, setConnectionStatus],
   );
 
-  return { connect: handleConnection, error, isConnecting } as const;
+  const cancelConnection = useCallback(() => {
+    setIsConnecting(false);
+    setConnectionStatus("disconnected");
+  }, [setConnectionStatus]);
+
+  return {
+    connect: handleConnection,
+    error,
+    isConnecting,
+    cancelConnection,
+  } as const;
 }

package/src/transaction/actions/estimate-gas.ts

@@ -2,7 +2,6 @@ import * as ox__Hex from "ox/Hex";
 import { formatTransactionRequest } from "viem";
 import { roundUpGas } from "../../gas/op-gas-fee-reducer.js";
 import { getAddress } from "../../utils/address.js";
-import { hexToBytes } from "../../utils/encoding/to-bytes.js";
 import { resolvePromisedValue } from "../../utils/promise/resolve-promised-value.js";
 import type { Prettify } from "../../utils/type-utils.js";
 import type { Account } from "../../wallets/interfaces/wallet.js";
@@ -117,31 +116,20 @@ export async function estimateGas(
 
     const rpcRequest = getRpcClient(options.transaction);
     try {
-      let gas = await eth_estimateGas(
-        rpcRequest,
-        formatTransactionRequest({
-          authorizationList: authorizationList?.map((auth) => ({
-            ...auth,
-            contractAddress: getAddress(auth.address),
-            nonce: Number(auth.nonce),
-            r: ox__Hex.fromNumber(auth.r),
-            s: ox__Hex.fromNumber(auth.s),
-          })),
-          data: encodedData,
-          from: fromAddress ? getAddress(fromAddress) : undefined,
-          to: toAddress ? getAddress(toAddress) : undefined,
-          value,
-          ...(authorizationList && authorizationList?.length > 0
-            ? {
-                gas:
-                  minGas(
-                    hexToBytes(encodedData),
-                    BigInt(authorizationList?.length ?? 0),
-                  ) + 100_000n,
-              }
-            : {}),
-        }),
-      );
+      const formattedTx = formatTransactionRequest({
+        authorizationList: authorizationList?.map((auth) => ({
+          ...auth,
+          contractAddress: getAddress(auth.address),
+          nonce: Number(auth.nonce),
+          r: ox__Hex.fromNumber(auth.r),
+          s: ox__Hex.fromNumber(auth.s),
+        })),
+        data: encodedData,
+        from: fromAddress ? getAddress(fromAddress) : undefined,
+        to: toAddress ? getAddress(toAddress) : undefined,
+        value,
+      });
+      let gas = await eth_estimateGas(rpcRequest, formattedTx);
 
       if (options.transaction.chain.experimental?.increaseZeroByteCount) {
         gas = roundUpGas(gas);
@@ -158,19 +146,3 @@ export async function estimateGas(
   cache.set(txWithFrom, promise);
   return promise;
 }
-
-// EIP-7623 + EIP-7702 floor calculation
-const TxGas = 21_000n;
-const TxCostFloorPerToken = 10n; // params.TxCostFloorPerToken
-const TxTokenPerNonZero = 4n; // params.TxTokenPerNonZeroByte
-const TxAuthTupleGas = 12_500n;
-
-function minGas(data: Uint8Array, authCount = 0n) {
-  let nz = 0n;
-  for (const b of data) if (b !== 0) nz++;
-  const z = BigInt(data.length) - nz;
-  const tokens = nz * TxTokenPerNonZero + z;
-  const floor = TxGas + tokens * TxCostFloorPerToken;
-  const intrinsic = TxGas + authCount * TxAuthTupleGas;
-  return floor > intrinsic ? floor : intrinsic;
-}

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.105.20";
+export const version = "5.105.22";

package/src/wallets/coinbase/coinbase-web.ts

@@ -14,8 +14,16 @@ import {
   stringToHex,
   uint8ArrayToHex,
 } from "../../utils/encoding/hex.js";
+import { stringify } from "../../utils/json.js";
 import { parseTypedData } from "../../utils/signatures/helpers/parse-typed-data.js";
 import { COINBASE } from "../constants.js";
+import { toGetCallsStatusResponse } from "../eip5792/get-calls-status.js";
+import { toGetCapabilitiesResult } from "../eip5792/get-capabilities.js";
+import { toProviderCallParams } from "../eip5792/send-calls.js";
+import type {
+  GetCallsStatusRawResponse,
+  WalletCapabilities,
+} from "../eip5792/types.js";
 import type {
   Account,
   SendTransactionOption,
@@ -269,6 +277,64 @@ function createAccount({
       }
       return res;
     },
+    sendCalls: async (options) => {
+      try {
+        const { callParams, chain } = await toProviderCallParams(
+          options,
+          account,
+        );
+        const callId = await provider.request({
+          method: "wallet_sendCalls",
+          params: callParams,
+        });
+        if (callId && typeof callId === "object" && "id" in callId) {
+          return { chain, client, id: callId.id as string };
+        }
+        return { chain, client, id: callId as string };
+      } catch (error) {
+        if (/unsupport|not support/i.test((error as Error).message)) {
+          throw new Error(
+            `${COINBASE} errored calling wallet_sendCalls, with error: ${error instanceof Error ? error.message : stringify(error)}`,
+          );
+        }
+        throw error;
+      }
+    },
+    async getCallsStatus(options) {
+      try {
+        const rawResponse = (await provider.request({
+          method: "wallet_getCallsStatus",
+          params: [options.id],
+        })) as GetCallsStatusRawResponse;
+        return toGetCallsStatusResponse(rawResponse);
+      } catch (error) {
+        if (/unsupport|not support/i.test((error as Error).message)) {
+          throw new Error(
+            `${COINBASE} does not support wallet_getCallsStatus, reach out to them directly to request EIP-5792 support.`,
+          );
+        }
+        throw error;
+      }
+    },
+    async getCapabilities(options) {
+      const chainId = options.chainId;
+      try {
+        const result = (await provider.request({
+          method: "wallet_getCapabilities",
+          params: [getAddress(account.address)],
+        })) as Record<string, WalletCapabilities>;
+        return toGetCapabilitiesResult(result, chainId);
+      } catch (error: unknown) {
+        if (
+          /unsupport|not support|not available/i.test((error as Error).message)
+        ) {
+          return {
+            message: `${COINBASE} does not support wallet_getCapabilities, reach out to them directly to request EIP-5792 support.`,
+          };
+        }
+        throw error;
+      }
+    },
   };
 
   return account;

package/src/wallets/create-wallet.ts

@@ -17,6 +17,7 @@ import { inAppWallet } from "./in-app/web/in-app.js";
 import { getInjectedProvider } from "./injected/index.js";
 import type { Account, Wallet } from "./interfaces/wallet.js";
 import { smartWallet } from "./smart/smart-wallet.js";
+import type { QROverlay } from "./wallet-connect/qr-overlay.js";
 import type { WCConnectOptions } from "./wallet-connect/types.js";
 import { createWalletEmitter } from "./wallet-emitter.js";
 import type {
@@ -299,30 +300,90 @@ export function createWallet<const ID extends WalletId>(
               "./wallet-connect/controller.js"
             );
 
-            const [
-              connectedAccount,
-              connectedChain,
-              doDisconnect,
-              doSwitchChain,
-            ] = await connectWC(
-              wcOptions,
-              emitter,
-              wallet.id as WCSupportedWalletIds | "walletConnect",
-              webLocalStorage,
-              sessionHandler,
-            );
-            // set the states
-            account = connectedAccount;
-            chain = connectedChain;
-            handleDisconnect = doDisconnect;
-            handleSwitchChain = doSwitchChain;
-            trackConnect({
-              chainId: chain.id,
-              client: wcOptions.client,
-              walletAddress: account.address,
-              walletType: id,
-            });
-            return account;
+            let qrOverlay: QROverlay | undefined;
+
+            try {
+              const [
+                connectedAccount,
+                connectedChain,
+                doDisconnect,
+                doSwitchChain,
+              ] = await connectWC(
+                {
+                  ...wcOptions,
+                  walletConnect: {
+                    ...wcOptions.walletConnect,
+                    onDisplayUri: wcOptions.walletConnect?.showQrModal
+                      ? async (uri) => {
+                          // Check if we're in a browser environment
+                          if (
+                            typeof window !== "undefined" &&
+                            typeof document !== "undefined"
+                          ) {
+                            try {
+                              const { createQROverlay } = await import(
+                                "./wallet-connect/qr-overlay.js"
+                              );
+
+                              // Clean up any existing overlay
+                              if (qrOverlay) {
+                                qrOverlay.destroy();
+                              }
+
+                              // Create new QR overlay
+                              qrOverlay = createQROverlay(uri, {
+                                theme:
+                                  wcOptions.walletConnect?.qrModalOptions
+                                    ?.themeMode ?? "dark",
+                                qrSize: 280,
+                                showCloseButton: true,
+                                onCancel: () => {
+                                  wcOptions.walletConnect?.onCancel?.();
+                                },
+                              });
+                            } catch (error) {
+                              console.error(
+                                "Failed to create QR overlay:",
+                                error,
+                              );
+                            }
+                          }
+                        }
+                      : undefined,
+                  },
+                },
+                emitter,
+                wallet.id as WCSupportedWalletIds | "walletConnect",
+                webLocalStorage,
+                sessionHandler,
+              );
+
+              // Clean up QR overlay on successful connection
+              if (qrOverlay) {
+                qrOverlay.destroy();
+                qrOverlay = undefined;
+              }
+
+              // set the states
+              account = connectedAccount;
+              chain = connectedChain;
+              handleDisconnect = doDisconnect;
+              handleSwitchChain = doSwitchChain;
+              trackConnect({
+                chainId: chain.id,
+                client: wcOptions.client,
+                walletAddress: account.address,
+                walletType: id,
+              });
+              return account;
+            } catch (error) {
+              // Clean up QR overlay on connection error
+              if (qrOverlay) {
+                qrOverlay.destroy();
+                qrOverlay = undefined;
+              }
+              throw error;
+            }
           }
 
           if (id === "walletConnect") {