thirdweb 5.121.3 → 5.121.5

package/src/react/web/ui/prebuilt/Chain/name.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "~test/react-render.js";
 import { ethereum } from "../../../../../chains/chain-definitions/ethereum.js";

package/src/react/web/ui/prebuilt/Chain/provider.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "~test/react-render.js";
 import { ethereum } from "../../../../../chains/chain-definitions/ethereum.js";

package/src/react/web/ui/prebuilt/NFT/description.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import {
   DOODLES_CONTRACT,

package/src/react/web/ui/prebuilt/NFT/media.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import {
   DOODLES_CONTRACT,

package/src/react/web/ui/prebuilt/NFT/name.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import {
   DOODLES_CONTRACT,

package/src/react/web/ui/prebuilt/NFT/provider.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { type FC, useContext } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { render, renderHook, screen, waitFor } from "~test/react-render.js";

package/src/react/web/ui/prebuilt/Token/name.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { ANVIL_CHAIN } from "~test/chains.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/ui/prebuilt/Token/provider.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/ui/prebuilt/Token/symbol.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { ANVIL_CHAIN } from "~test/chains.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/ui/prebuilt/Wallet/icon.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 /** biome-ignore-all lint/nursery/useUniqueElementIds: "id" is not a html attribute here - TODO: stop using 'id' as a prop on JSX elements */
 import { describe, expect, it } from "vitest";
 import { render, waitFor } from "~test/react-render.js";

package/src/react/web/ui/prebuilt/Wallet/name.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 /** biome-ignore-all lint/nursery/useUniqueElementIds: FIXME: do not use "id" as a prop on JSX elements */
 import { describe, expect, it } from "vitest";
 import { render, waitFor } from "~test/react-render.js";

package/src/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/BuyDirectListingButton.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render, screen } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/ui/prebuilt/thirdweb/ClaimButton/ClaimButton.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { ANVIL_CHAIN } from "~test/chains.js";
 import { TEST_CONTRACT_URI } from "~test/ipfs-uris.js";

package/src/react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/CreateDirectListingButton.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render, screen } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/utils/canFitWideModal.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { wideModalScreenThreshold } from "../ui/ConnectWallet/constants.js";
 import { canFitWideModal } from "./canFitWideModal.js";

package/src/react/web/wallets/in-app/CountrySelector.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it, vi } from "vitest";
 import {
   fireEvent,

package/src/react/web/wallets/in-app/InputSelectionUI.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it, vi } from "vitest";
 import { render, screen } from "../../../../../test/src/react-render.js";
 import { getCountrySelector } from "./CountrySelector.js";

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it, vi } from "vitest";
 import {
   fireEvent,

package/src/utils/web/isMobile.test.ts

@@ -0,0 +1,43 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { isMobile } from "./isMobile.js";
+
+const DESKTOP_UA =
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36";
+const IPHONE_UA =
+  "Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Mobile/15E148 Safari/604.1";
+const ANDROID_UA =
+  "Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Mobile Safari/537.36";
+
+function setUserAgent(userAgent: string) {
+  vi.spyOn(navigator, "userAgent", "get").mockReturnValue(userAgent);
+}
+
+function setViewportWidth(width: number) {
+  vi.spyOn(window, "innerWidth", "get").mockReturnValue(width);
+}
+
+describe("isMobile", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("returns false for a desktop browser with a narrow viewport", () => {
+    setUserAgent(DESKTOP_UA);
+    setViewportWidth(500);
+
+    expect(isMobile()).toBe(false);
+  });
+
+  it("returns true for iOS", () => {
+    setUserAgent(IPHONE_UA);
+
+    expect(isMobile()).toBe(true);
+  });
+
+  it("returns true for Android", () => {
+    setUserAgent(ANDROID_UA);
+
+    expect(isMobile()).toBe(true);
+  });
+});

package/src/utils/web/isMobile.ts

@@ -71,12 +71,5 @@ export function isMobile(): boolean {
     return true;
   }
 
-  const isMobileViewport =
-    typeof window !== "undefined" && window.innerWidth < 640;
-
-  if (isMobileViewport) {
-    return true;
-  }
-
   return false;
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.121.3";
+export const version = "5.121.5";

package/src/wallets/__generated__/wallet/io.rabby/index.ts

@@ -9,25 +9,26 @@ export const wallet = {
   app: {
     browser:
       "https://chrome.google.com/webstore/detail/rabby/acmacodkjbdgmoleebolmdjonilkdbch",
-    ios: null,
-    android: null,
-    mac: null,
-    windows: null,
-    linux: null,
+    ios: "https://apps.apple.com/us/app/rabby-wallet-crypto-evm/id6474381673",
+    android:
+      "https://play.google.com/store/apps/details?id=com.debank.rabbymobile",
+    mac: "",
+    windows: "",
+    linux: "",
     chrome:
       "https://chrome.google.com/webstore/detail/rabby-wallet/acmacodkjbdgmoleebolmdjonilkdbch",
-    firefox: null,
-    safari: null,
-    edge: null,
-    opera: null,
+    firefox: "",
+    safari: "",
+    edge: "",
+    opera: "",
   },
   rdns: "io.rabby",
   mobile: {
-    native: null,
-    universal: null,
+    native: "rabby://",
+    universal: "",
   },
   desktop: {
-    native: null,
+    native: "",
     universal:
       "https://chrome.google.com/webstore/detail/rabby/acmacodkjbdgmoleebolmdjonilkdbch",
   },

package/src/wallets/__generated__/wallet-ids.ts

@@ -2,7 +2,7 @@
 // This file is auto-generated by the `scripts/wallets/generate.ts` script.
 // Do not modify this file manually.
 
-// 476 wallets
+// 477 wallets
 export type WCSupportedWalletIds =
   | "io.1inch.wallet"
   | "com.binance.wallet"
@@ -32,6 +32,7 @@ export type WCSupportedWalletIds =
   | "com.roninchain.wallet"
   | "com.okex.wallet"
   | "com.wemixplay"
+  | "io.rabby"
   | "com.tangem"
   | "com.exodus"
   | "com.hashpack.wallet"

package/src/wallets/__generated__/wallet-infos.ts

@@ -2357,7 +2357,7 @@ const ALL_MINIMAL_WALLET_INFOS = [
   {
     id: "io.rabby",
     name: "Rabby",
-    hasMobileSupport: false,
+    hasMobileSupport: true,
   },
   {
     id: "com.brave.wallet",

package/src/wallets/in-app/web/lib/auth/redirect-state.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { beforeEach, describe, expect, it } from "vitest";
 import { consumeRedirectState, storeRedirectState } from "./redirect-state.js";
 

package/src/wallets/in-app/web/lib/get-url-token.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { getUrlToken } from "./get-url-token.js";
 

package/src/wallets/in-app/web/utils/iFrameCommunication/IframeCommunicator.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { IframeCommunicator } from "./IframeCommunicator.js";
 

package/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);
+  });
+});

package/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,7 +72,10 @@ 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;
@@ -77,6 +83,7 @@ export function createQROverlay(
     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) {