thirdweb 5.105.20 → 5.105.21

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,6 +34,7 @@
     "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",
@@ -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.21",
   "scripts": {
     "bench": "vitest -c ./test/vitest.config.ts bench",
     "bench:compare": "bun run ./benchmarks/run.ts",

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/version.ts

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

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") {

package/src/wallets/in-app/core/wallet/in-app-core.ts

@@ -57,7 +57,7 @@ export function createInAppWallet(args: {
   let client: ThirdwebClient | undefined;
   let authToken: string | null = null;
 
-  const resolveSmartAccountOptionsFromEcosystem = async (options: {
+  const resolveSmartAccountOptionsFromEcosystem = async (options?: {
     chain?: Chain;
   }) => {
     if (ecosystem) {
@@ -78,7 +78,7 @@ export function createInAppWallet(args: {
           // default to 4337
           const { defaultChainId } = ecosystemOptions.smartAccountOptions;
           const preferredChain =
-            options.chain ??
+            options?.chain ??
             (defaultChainId ? getCachedChain(defaultChainId) : undefined);
           if (!preferredChain) {
             throw new Error(
@@ -108,7 +108,7 @@ export function createInAppWallet(args: {
         ecosystem,
       );
 
-      await resolveSmartAccountOptionsFromEcosystem(options);
+      await resolveSmartAccountOptionsFromEcosystem();
 
       const {
         account: connectedAccount,
@@ -145,7 +145,7 @@ export function createInAppWallet(args: {
         ecosystem,
       );
 
-      await resolveSmartAccountOptionsFromEcosystem(options);
+      await resolveSmartAccountOptionsFromEcosystem();
 
       const {
         account: connectedAccount,

package/src/wallets/in-app/web/in-app.ts

@@ -299,6 +299,24 @@ import type {
  * });
  * ```
  *
+ * ### Get the auth token for the wallet
+ *
+ * You can get the auth token for the wallet by calling `wallet.getAuthToken()`.
+ *
+ * ```ts
+ * import { inAppWallet } from "thirdweb/wallets";
+ *
+ * const wallet = inAppWallet();
+ *
+ * await wallet.connect({
+ *   client,
+ *   strategy: "google",
+ * });
+ *
+ * const authToken = await wallet.getAuthToken(); // this will return a JWT token that can be used to authenticate the user in the backend
+ * console.log(authToken);
+ * ```
+ *
  * @returns The created in-app wallet.
  * @wallet
  */

package/src/wallets/smart/index.ts

@@ -80,7 +80,7 @@ export async function connectSmartAccount(
   connectionOptions: SmartWalletConnectionOptions,
   creationOptions: SmartWalletOptions,
 ): Promise<[Account, Chain]> {
-  const { personalAccount, client, chain: connectChain } = connectionOptions;
+  const { personalAccount, client } = connectionOptions;
 
   if (!personalAccount) {
     throw new Error(
@@ -89,7 +89,7 @@ export async function connectSmartAccount(
   }
 
   const options = creationOptions;
-  const chain = connectChain ?? options.chain;
+  const chain = creationOptions.chain;
   const sponsorGas =
     "gasless" in options ? options.gasless : options.sponsorGas;
   if (await isZkSyncChain(chain)) {

package/src/wallets/smart/smart-wallet.ts

@@ -229,7 +229,7 @@ export function smartWallet(
       const { connectSmartAccount } = await import("./index.js");
       const [connectedAccount, connectedChain] = await connectSmartAccount(
         { ...lastConnectOptions, chain: newChain },
-        createOptions,
+        { ...createOptions, chain: newChain },
       );
       // set the states
       account = connectedAccount;

package/src/wallets/wallet-connect/qr-overlay.ts

@@ -0,0 +1,322 @@
+/**
+ * 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 function createQROverlay(
+  uri: string,
+  options: QROverlayOptions = {},
+): QROverlay {
+  const {
+    qrSize = 280,
+    showCloseButton = true,
+    closeButtonText = "×",
+    theme = "light",
+    container = document.body,
+    onCancel,
+  } = options;
+
+  // Create overlay backdrop
+  const overlay = document.createElement("div");
+  overlay.style.cssText = `
+    position: fixed;
+    inset: 0;
+    background-color: ${theme === "dark" ? "rgba(0, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.5)"};
+    backdrop-filter: blur(10px);
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: fadeIn 300ms ease-out;
+  `;
+
+  // Apply custom overlay styles
+  if (options.overlayStyles) {
+    Object.assign(overlay.style, options.overlayStyles);
+  }
+
+  // Create modal container
+  const modal = document.createElement("div");
+  modal.style.cssText = `
+    background: ${theme === "dark" ? "#1f1f1f" : "#ffffff"};
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    max-width: 90vw;
+    max-height: 90vh;
+    position: relative;
+    animation: scaleIn 300ms ease-out;
+  `;
+
+  // Apply custom modal styles
+  if (options.modalStyles) {
+    Object.assign(modal.style, options.modalStyles);
+  }
+
+  // Create close button
+  if (showCloseButton) {
+    const closeButton = document.createElement("button");
+    closeButton.textContent = closeButtonText;
+    closeButton.style.cssText = `
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      background: none;
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+      color: ${theme === "dark" ? "#ffffff" : "#000000"};
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 8px;
+      transition: background-color 0.2s;
+    `;
+
+    closeButton.addEventListener("mouseenter", () => {
+      closeButton.style.backgroundColor =
+        theme === "dark" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
+    });
+
+    closeButton.addEventListener("mouseleave", () => {
+      closeButton.style.backgroundColor = "transparent";
+    });
+
+    closeButton.addEventListener("click", () => {
+      destroyOverlay(true);
+    });
+
+    modal.appendChild(closeButton);
+  }
+
+  // Create QR code container
+  const qrContainer = document.createElement("div");
+  qrContainer.style.cssText = `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  `;
+
+  // Create title
+  const title = document.createElement("h3");
+  title.textContent = "Scan to Connect";
+  title.style.cssText = `
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: ${theme === "dark" ? "#ffffff" : "#000000"};
+    text-align: center;
+  `;
+
+  // Create QR code canvas
+  const qrCanvas = document.createElement("canvas");
+  qrCanvas.width = qrSize;
+  qrCanvas.height = qrSize;
+  qrCanvas.style.cssText = `
+    border: 1px solid ${theme === "dark" ? "#333333" : "#e5e5e5"};
+    border-radius: 12px;
+  `;
+
+  // Generate QR code
+  generateQRCode(uri, qrCanvas, qrSize).catch(console.error);
+
+  // Create copy button for the URI
+  const copyButton = document.createElement("button");
+  copyButton.textContent = "Copy URI";
+  copyButton.style.cssText = `
+    background: ${theme === "dark" ? "#333333" : "#f5f5f5"};
+    border: 1px solid ${theme === "dark" ? "#444444" : "#e5e5e5"};
+    color: ${theme === "dark" ? "#ffffff" : "#000000"};
+    padding: 8px 16px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.2s;
+  `;
+
+  copyButton.addEventListener("click", async () => {
+    try {
+      await navigator.clipboard.writeText(uri);
+      const originalText = copyButton.textContent;
+      copyButton.textContent = "Copied!";
+      setTimeout(() => {
+        copyButton.textContent = originalText;
+      }, 2000);
+    } catch (err) {
+      console.error("Failed to copy URI:", err);
+    }
+  });
+
+  // Assemble the modal
+  qrContainer.appendChild(title);
+  qrContainer.appendChild(qrCanvas);
+  qrContainer.appendChild(copyButton);
+  modal.appendChild(qrContainer);
+  overlay.appendChild(modal);
+
+  // Add CSS animations
+  const style = document.createElement("style");
+  style.textContent = `
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    @keyframes fadeOut {
+      from { opacity: 1; }
+      to { opacity: 0; }
+    }
+    @keyframes scaleIn {
+      from { transform: scale(0.9); opacity: 0; }
+      to { transform: scale(1); opacity: 1; }
+    }
+    @keyframes scaleOut {
+      from { transform: scale(1); opacity: 1; }
+      to { transform: scale(0.9); opacity: 0; }
+    }
+  `;
+  document.head.appendChild(style);
+
+  // Event handlers
+  const handleEscapeKey = (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      destroyOverlay(true);
+    }
+  };
+
+  const handleOverlayClick = (event: MouseEvent) => {
+    if (event.target === overlay) {
+      destroyOverlay(true);
+    }
+  };
+
+  // Add event listeners
+  document.addEventListener("keydown", handleEscapeKey);
+  overlay.addEventListener("click", handleOverlayClick);
+
+  // Append to container
+  container.appendChild(overlay);
+
+  function destroyOverlay(userInitiated = false) {
+    document.removeEventListener("keydown", handleEscapeKey);
+    overlay.removeEventListener("click", handleOverlayClick);
+
+    // Call onCancel callback only if user initiated the close action
+    if (userInitiated && onCancel) {
+      onCancel();
+    }
+
+    // Animate both overlay and modal out
+    overlay.style.animation = "fadeOut 200ms ease-in";
+    modal.style.animation = "scaleOut 200ms ease-in";
+
+    const cleanup = () => {
+      if (overlay.parentNode) {
+        overlay.parentNode.removeChild(overlay);
+      }
+      if (style.parentNode) {
+        style.parentNode.removeChild(style);
+      }
+    };
+
+    overlay.addEventListener("animationend", cleanup, { once: true });
+
+    // Fallback cleanup in case animation doesn't fire
+    setTimeout(cleanup, 250);
+  }
+
+  function hideOverlay() {
+    overlay.style.display = "none";
+  }
+
+  function showOverlay() {
+    overlay.style.display = "flex";
+  }
+
+  return {
+    destroy: () => destroyOverlay(false), // Programmatic cleanup, don't call onCancel
+    hide: hideOverlay,
+    show: showOverlay,
+  };
+}
+
+/**
+ * QR code generator that tries to use a real QR library if available,
+ * otherwise falls back to a placeholder
+ */
+async function generateQRCode(
+  text: string,
+  canvas: HTMLCanvasElement,
+  size: number,
+) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+
+  // Try to dynamically import a QR code library if available
+  // This allows the overlay to work with or without a QR code dependency
+  const { toCanvas } = await import("qrcode");
+  await toCanvas(canvas, text, {
+    width: size,
+    margin: 2,
+    color: {
+      dark: "#000000",
+      light: "#ffffff",
+    },
+  });
+  return;
+}