[SDK] Fix: Rabby mobile connections, and a click-dead WalletConnect QR overlay

.changeset/rabby-qr-overlay.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix Rabby mobile connections and keep the WalletConnect QR overlay interactive and unstacked

packages/thirdweb/src/wallets/wallet-connect/qr-overlay.test.ts

@@ -0,0 +1,61 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createQROverlay } from "./qr-overlay.js";
+
+const URI = "wc:1234@2?relay-protocol=irn&symKey=abcd";
+
+function overlayElements(): HTMLElement[] {
+  return Array.from(document.body.children).filter(
+    (el): el is HTMLElement =>
+      el instanceof HTMLElement && el.style.zIndex === "9999",
+  );
+}
+
+function pressEscape() {
+  document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+}
+
+describe("createQROverlay", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    document.body.style.pointerEvents = "";
+  });
+
+  it("stays interactive when pointer events are disabled on body", () => {
+    document.body.style.pointerEvents = "none";
+
+    const overlay = createQROverlay(URI);
+
+    expect(overlayElements()[0]?.style.pointerEvents).toBe("auto");
+    overlay.destroy();
+  });
+
+  it("replaces the previous overlay instead of stacking", () => {
+    createQROverlay(URI);
+    const overlay = createQROverlay(URI);
+
+    expect(overlayElements()).toHaveLength(1);
+    overlay.destroy();
+  });
+
+  it("detaches the replaced overlay's listeners", () => {
+    const firstCancel = vi.fn();
+    const secondCancel = vi.fn();
+    createQROverlay(URI, { onCancel: firstCancel });
+    createQROverlay(URI, { onCancel: secondCancel });
+
+    pressEscape();
+
+    expect(firstCancel).not.toHaveBeenCalled();
+    expect(secondCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not remove a newer overlay when an older one is destroyed", () => {
+    const first = createQROverlay(URI);
+    createQROverlay(URI);
+
+    first.destroy();
+
+    expect(overlayElements()).toHaveLength(1);
+  });
+});

packages/thirdweb/src/wallets/wallet-connect/qr-overlay.ts

@@ -53,6 +53,9 @@ export interface QROverlay {
   show: () => void;
 }
 
+// Only one overlay is shown at a time; creating a new one replaces the previous one.
+let removeActiveOverlay: (() => void) | undefined;
+
 /**
  * Creates a QR code overlay for the given WalletConnect URI
  */
@@ -69,14 +72,18 @@ export function createQROverlay(
     onCancel,
   } = options;
 
+  removeActiveOverlay?.();
+
   // Create overlay backdrop
+  // pointer-events is explicit so the overlay stays interactive when the host page disables it on body
   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;
+    pointer-events: auto;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -252,9 +259,23 @@ export function createQROverlay(
   // Append to container
   container.appendChild(overlay);
 
+  function removeNow() {
+    document.removeEventListener("keydown", handleEscapeKey);
+    overlay.removeEventListener("click", handleOverlayClick);
+    overlay.remove();
+    style.remove();
+    if (removeActiveOverlay === removeNow) {
+      removeActiveOverlay = undefined;
+    }
+  }
+  removeActiveOverlay = removeNow;
+
   function destroyOverlay(userInitiated = false) {
     document.removeEventListener("keydown", handleEscapeKey);
     overlay.removeEventListener("click", handleOverlayClick);
+    if (removeActiveOverlay === removeNow) {
+      removeActiveOverlay = undefined;
+    }
 
     // Call onCancel callback only if user initiated the close action
     if (userInitiated && onCancel) {