@cartridge/controller 0.10.6 → 0.11.1

package/dist/types.d.ts

@@ -13,8 +13,12 @@ export type KeychainSession = {
         privateKey: string;
     };
 };
-export type AuthOption = "google" | "webauthn" | "discord" | "walletconnect" | "password" | ExternalWalletType;
-export type AuthOptions = Omit<AuthOption, "phantom" | "argent">[];
+export declare const EMBEDDED_WALLETS: readonly ["google", "webauthn", "discord", "walletconnect", "password"];
+export type EmbeddedWallet = (typeof EMBEDDED_WALLETS)[number];
+export declare const ALL_AUTH_OPTIONS: readonly ["google", "webauthn", "discord", "walletconnect", "password", "metamask", "rabby", "argent", "braavos", "phantom", "base"];
+export type AuthOption = (typeof ALL_AUTH_OPTIONS)[number];
+export declare const IMPLEMENTED_AUTH_OPTIONS: ("metamask" | "rabby" | "google" | "webauthn" | "discord" | "walletconnect" | "password")[];
+export type AuthOptions = (typeof IMPLEMENTED_AUTH_OPTIONS)[number][];
 export declare enum ResponseCodes {
     SUCCESS = "SUCCESS",
     NOT_CONNECTED = "NOT_CONNECTED",
@@ -75,7 +79,7 @@ type CartridgeID = string;
 export type ControllerAccounts = Record<ContractAddress, CartridgeID>;
 export interface Keychain {
     probe(rpcUrl: string): Promise<ProbeReply | ConnectError>;
-    connect(policies: SessionPolicies, rpcUrl: string, signupOptions?: AuthOptions): Promise<ConnectReply | ConnectError>;
+    connect(signupOptions?: AuthOptions): Promise<ConnectReply | ConnectError>;
     disconnect(): void;
     reset(): void;
     revoke(origin: string): void;
@@ -92,8 +96,9 @@ export interface Keychain {
     openPurchaseCredits(): void;
     openExecute(calls: Call[]): Promise<void>;
     switchChain(rpcUrl: string): Promise<void>;
-    openStarterPack(options: string | StarterPack): Promise<void>;
+    openStarterPack(starterpackId: string | number): Promise<void>;
     navigate(path: string): Promise<void>;
+    hasStorageAccess(): Promise<boolean>;
     externalDetectWallets(): Promise<ExternalWallet[]>;
     externalConnectWallet(type: ExternalWalletType, address?: string): Promise<ExternalWalletResponse>;
     externalSignMessage(type: ExternalWalletType, message: string): Promise<ExternalWalletResponse>;
@@ -132,6 +137,8 @@ export type KeychainOptions = IFrameOptions & {
     url?: string;
     /** The origin of keychain */
     origin?: string;
+    /** The RPC URL to use (derived from defaultChainId) */
+    rpcUrl?: string;
     /** Propagate transaction errors back to caller instead of showing modal */
     propagateSessionErrors?: boolean;
     /** The fee source to use for execute from outside */
@@ -154,23 +161,8 @@ export type Token = "eth" | "strk" | "lords" | "usdc" | "usdt";
 export type Tokens = {
     erc20?: Token[];
 };
-export declare enum StarterPackItemType {
-    NONFUNGIBLE = "NONFUNGIBLE",
-    FUNGIBLE = "FUNGIBLE"
-}
-export interface StarterPackItem {
-    type: StarterPackItemType;
-    name: string;
-    description: string;
-    iconURL?: string;
-    amount?: number;
-    price?: bigint;
-    call?: Call[];
-}
-export interface StarterPack {
-    name: string;
-    description: string;
-    iconURL?: string;
-    items: StarterPackItem[];
-}
+export type OpenOptions = {
+    /** The URL to redirect to after authentication (defaults to current page) */
+    redirectUrl?: string;
+};
 export {};

package/dist/url-validator.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Validates a redirect URL to prevent XSS and open redirect attacks.
+ *
+ * This validator is designed for the standalone auth flow where we want to
+ * support redirecting to external game domains (e.g., lootsurvivor.io)
+ * after authentication, while blocking dangerous attack vectors.
+ *
+ * @param redirectUrl - The URL to validate (from redirectUrl option)
+ * @returns Object with isValid boolean and optional error message
+ */
+export declare function validateRedirectUrl(redirectUrl: string): {
+    isValid: boolean;
+    error?: string;
+};

package/dist/utils.d.ts

@@ -1,7 +1,7 @@
-import { Call } from 'starknet';
 import { Policy } from '@cartridge/controller-wasm/controller';
 import { Policies, SessionPolicies } from '@cartridge/presets';
 import { ChainId } from '@starknet-io/types-js';
+import { Call } from 'starknet';
 import { ParsedSessionPolicies } from './policies';
 export declare function normalizeCalls(calls: Call | Call[]): {
     entrypoint: string;
@@ -13,3 +13,4 @@ export declare function toWasmPolicies(policies: ParsedSessionPolicies): Policy[
 export declare function toArray<T>(val: T | T[]): T[];
 export declare function humanizeString(str: string): string;
 export declare function parseChainId(url: URL): ChainId;
+export declare function isMobile(): boolean;

package/dist/wallets/types.d.ts

@@ -1,4 +1,9 @@
-export type ExternalWalletType = "argent" | "braavos" | "metamask" | "phantom" | "rabby" | "base";
+export declare const AUTH_EXTERNAL_WALLETS: readonly ["metamask", "rabby"];
+export type AuthExternalWallet = (typeof AUTH_EXTERNAL_WALLETS)[number];
+export declare const EXTRA_EXTERNAL_WALLETS: readonly ["argent", "braavos", "phantom", "base"];
+export type ExtraExternalWallet = (typeof EXTRA_EXTERNAL_WALLETS)[number];
+export declare const EXTERNAL_WALLETS: readonly ["metamask", "rabby", "argent", "braavos", "phantom", "base"];
+export type ExternalWalletType = (typeof EXTERNAL_WALLETS)[number];
 export type ExternalPlatform = "starknet" | "ethereum" | "solana" | "base" | "arbitrum" | "optimism";
 export interface ExternalWallet {
     type: ExternalWalletType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cartridge/controller",
-  "version": "0.10.6",
+  "version": "0.11.1",
   "description": "Cartridge Controller",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@cartridge/controller-wasm": "^0.3.6",
+    "@cartridge/controller-wasm": "0.3.16",
     "@cartridge/penpal": "^6.2.4",
     "micro-sol-signer": "^0.5.0",
     "bs58": "^6.0.0",
@@ -50,7 +50,7 @@
     "vite-plugin-node-polyfills": "^0.23.0",
     "vite-plugin-top-level-await": "^1.4.4",
     "vite-plugin-wasm": "^3.4.1",
-    "@cartridge/tsconfig": "0.10.6"
+    "@cartridge/tsconfig": "0.11.1"
   },
   "scripts": {
     "build:deps": "pnpm build",

package/src/__tests__/connectDefaultChainId.test.ts

@@ -0,0 +1,85 @@
+import { constants } from "starknet";
+import ControllerProvider from "../controller";
+
+// Mock the KeychainIFrame
+jest.mock("../iframe/keychain", () => ({
+  KeychainIFrame: jest.fn().mockImplementation(() => ({
+    open: jest.fn(),
+    close: jest.fn(),
+  })),
+}));
+
+describe("ControllerProvider connect with defaultChainId", () => {
+  let originalConsoleError: any;
+  let originalConsoleWarn: any;
+  let originalConsoleLog: any;
+
+  beforeEach(() => {
+    // Mock console methods to suppress expected errors/warnings
+    originalConsoleError = console.error;
+    originalConsoleWarn = console.warn;
+    originalConsoleLog = console.log;
+    console.error = jest.fn();
+    console.warn = jest.fn();
+    console.log = jest.fn();
+  });
+
+  afterEach(() => {
+    console.error = originalConsoleError;
+    console.warn = originalConsoleWarn;
+    console.log = originalConsoleLog;
+  });
+
+  test("should use defaultChainId when connecting with Sepolia", async () => {
+    const controller = new ControllerProvider({
+      defaultChainId: constants.StarknetChainId.SN_SEPOLIA,
+    });
+
+    // The controller should be initialized with Sepolia RPC
+    expect(controller.rpcUrl()).toBe(
+      "https://api.cartridge.gg/x/starknet/sepolia/rpc/v0_9",
+    );
+  });
+
+  test("should use defaultChainId when connecting with Mainnet", async () => {
+    const controller = new ControllerProvider({
+      defaultChainId: constants.StarknetChainId.SN_MAIN,
+    });
+
+    // The controller should be initialized with Mainnet RPC
+    expect(controller.rpcUrl()).toBe(
+      "https://api.cartridge.gg/x/starknet/mainnet/rpc/v0_9",
+    );
+  });
+
+  test("should prioritize custom chains over default chains based on defaultChainId", async () => {
+    const customChains = [
+      { rpcUrl: "https://api.cartridge.gg/x/starknet/sepolia/rpc/v0_9" },
+    ];
+
+    const controller = new ControllerProvider({
+      chains: customChains,
+      defaultChainId: constants.StarknetChainId.SN_SEPOLIA,
+    });
+
+    // Should use the Sepolia RPC since defaultChainId is set to Sepolia
+    expect(controller.rpcUrl()).toBe(
+      "https://api.cartridge.gg/x/starknet/sepolia/rpc/v0_9",
+    );
+  });
+
+  test("should use defaultChainId with custom chain configuration", async () => {
+    const controller = new ControllerProvider({
+      chains: [
+        { rpcUrl: "https://api.cartridge.gg/x/starknet/sepolia/rpc/v0_9" },
+        { rpcUrl: "https://api.cartridge.gg/x/starknet/mainnet/rpc/v0_9" },
+      ],
+      defaultChainId: constants.StarknetChainId.SN_SEPOLIA,
+    });
+
+    // Should respect the defaultChainId and use Sepolia
+    expect(controller.rpcUrl()).toBe(
+      "https://api.cartridge.gg/x/starknet/sepolia/rpc/v0_9",
+    );
+  });
+});

package/src/controller.ts

@@ -9,6 +9,7 @@ import {
 import { constants, shortString, WalletAccount } from "starknet";
 import { version } from "../package.json";
 import ControllerAccount from "./account";
+import { KEYCHAIN_URL } from "./constants";
 import { NotReadyToConnect } from "./errors";
 import { KeychainIFrame } from "./iframe";
 import BaseProvider from "./provider";
@@ -22,16 +23,18 @@ import {
   ProbeReply,
   ProfileContextTypeVariant,
   ResponseCodes,
-  StarterPack,
+  OpenOptions,
 } from "./types";
+import { validateRedirectUrl } from "./url-validator";
 import { parseChainId } from "./utils";
 
 export default class ControllerProvider extends BaseProvider {
   private keychain?: AsyncMethodReturns<Keychain>;
   private options: ControllerOptions;
-  private iframes: IFrames;
+  private iframes?: IFrames;
   private selectedChain: ChainId;
   private chains: Map<ChainId, Chain>;
+  private referral: { ref?: string; refGroup?: string };
 
   isReady(): boolean {
     return !!this.keychain;
@@ -54,14 +57,89 @@ export default class ControllerProvider extends BaseProvider {
 
     this.selectedChain = defaultChainId;
     this.chains = new Map<ChainId, Chain>();
+
+    // Auto-extract referral parameters from URL
+    // This allows games to pass referrals via their own URL: game.com/?ref=alice&ref_group=campaign1
+    const urlParams =
+      typeof window !== "undefined"
+        ? new URLSearchParams(window.location.search)
+        : null;
+    this.referral = {
+      ref: urlParams?.get("ref") ?? undefined,
+      refGroup: urlParams?.get("ref_group") ?? undefined,
+    };
+
     this.options = { ...options, chains, defaultChainId };
 
+    // Handle automatic redirect to keychain for standalone flow
+    // When controller_redirect is present, automatically redirect to keychain
+    // This establishes first-party storage access for the keychain
+    // IMPORTANT: Check this BEFORE cleaning up URL parameters
+    if (typeof window !== "undefined") {
+      // Check if controller_redirect flag is present (any value or just the key)
+      const hasControllerRedirect = urlParams?.has("controller_redirect");
+      if (hasControllerRedirect) {
+        // Use configured keychain URL (not user-provided)
+        const keychainUrl = new URL(options.url || KEYCHAIN_URL);
+
+        // Build redirect URL preserving all query params and hash except controller_redirect
+        // This matches the behavior of open() method which uses window.location.href
+        const currentUrl = new URL(window.location.href);
+        currentUrl.searchParams.delete("controller_redirect");
+        const redirectUrl = currentUrl.toString();
+
+        keychainUrl.searchParams.set("redirect_url", redirectUrl);
+
+        // Preserve the preset if it was configured in options
+        if (options.preset) {
+          keychainUrl.searchParams.set("preset", options.preset);
+        }
+
+        // Redirect to keychain
+        window.location.href = keychainUrl.toString();
+        return; // Stop further initialization
+      }
+    }
+
+    // Auto-detect and set lastUsedConnector from URL parameter
+    // This is set by the keychain after redirect flow completion
+    if (typeof window !== "undefined" && typeof localStorage !== "undefined") {
+      const lastUsedConnector = urlParams?.get("lastUsedConnector");
+      if (lastUsedConnector) {
+        localStorage.setItem("lastUsedConnector", lastUsedConnector);
+      }
+
+      // Clean up the URL by removing controller flow parameters
+      if (urlParams && window.history?.replaceState) {
+        let needsCleanup = false;
+
+        if (lastUsedConnector) {
+          urlParams.delete("lastUsedConnector");
+          needsCleanup = true;
+        }
+
+        // Also remove controller_redirect if present (shouldn't be after redirect, but just in case)
+        if (urlParams.has("controller_redirect")) {
+          urlParams.delete("controller_redirect");
+          needsCleanup = true;
+        }
+
+        if (needsCleanup) {
+          const newUrl =
+            window.location.pathname +
+            (urlParams.toString() ? "?" + urlParams.toString() : "") +
+            window.location.hash;
+          window.history.replaceState({}, "", newUrl);
+        }
+      }
+    }
+
+    this.initializeChains(chains);
+
     this.iframes = {
       keychain: options.lazyload ? undefined : this.createKeychainIframe(),
     };
 
-    this.initializeChains(chains);
-
     if (typeof window !== "undefined") {
       (window as any).starknet_controller = this;
     }
@@ -105,6 +183,10 @@ export default class ControllerProvider extends BaseProvider {
   }
 
   async probe(): Promise<WalletAccount | undefined> {
+    if (!this.iframes) {
+      return;
+    }
+
     try {
       // Ensure iframe is created if using lazy loading
       if (!this.iframes.keychain) {
@@ -139,6 +221,10 @@ export default class ControllerProvider extends BaseProvider {
   }
 
   async connect(): Promise<WalletAccount | undefined> {
+    if (!this.iframes) {
+      return;
+    }
+
     if (this.account) {
       return this.account;
     }
@@ -165,19 +251,7 @@ export default class ControllerProvider extends BaseProvider {
     this.iframes.keychain.open();
 
     try {
-      let response = await this.keychain.connect(
-        // Policy precedence logic:
-        // 1. If shouldOverridePresetPolicies is true and policies are provided, use policies
-        // 2. Otherwise, if preset is defined, use empty object (let preset take precedence)
-        // 3. Otherwise, use provided policies or empty object
-        this.options.shouldOverridePresetPolicies && this.options.policies
-          ? this.options.policies
-          : this.options.preset
-            ? {}
-            : this.options.policies || {},
-        this.rpcUrl(),
-        this.options.signupOptions,
-      );
+      let response = await this.keychain.connect(this.options.signupOptions);
       if (response.code !== ResponseCodes.SUCCESS) {
         throw new Error(response.message);
       }
@@ -201,6 +275,10 @@ export default class ControllerProvider extends BaseProvider {
   }
 
   async switchStarknetChain(chainId: string): Promise<boolean> {
+    if (!this.iframes) {
+      return false;
+    }
+
     if (!this.keychain || !this.iframes.keychain) {
       console.error(new NotReadyToConnect().message);
       return false;
@@ -243,6 +321,10 @@ export default class ControllerProvider extends BaseProvider {
   }
 
   async openProfile(tab: ProfileContextTypeVariant = "inventory") {
+    if (!this.iframes) {
+      return;
+    }
+
     // Profile functionality is now integrated into keychain
     // Navigate keychain iframe to profile page
     if (!this.keychain || !this.iframes.keychain) {
@@ -267,6 +349,10 @@ export default class ControllerProvider extends BaseProvider {
   }
 
   async openProfileTo(to: string) {
+    if (!this.iframes) {
+      return;
+    }
+
     // Profile functionality is now integrated into keychain
     if (!this.keychain || !this.iframes.keychain) {
       console.error(new NotReadyToConnect().message);
@@ -289,6 +375,10 @@ export default class ControllerProvider extends BaseProvider {
   }
 
   async openProfileAt(at: string) {
+    if (!this.iframes) {
+      return;
+    }
+
     // Profile functionality is now integrated into keychain
     if (!this.keychain || !this.iframes.keychain) {
       console.error(new NotReadyToConnect().message);
@@ -304,6 +394,10 @@ export default class ControllerProvider extends BaseProvider {
   }
 
   openSettings() {
+    if (!this.iframes) {
+      return;
+    }
+
     if (!this.keychain || !this.iframes.keychain) {
       console.error(new NotReadyToConnect().message);
       return;
@@ -344,27 +438,38 @@ export default class ControllerProvider extends BaseProvider {
   }
 
   openPurchaseCredits() {
+    if (!this.iframes) {
+      return;
+    }
+
     if (!this.keychain || !this.iframes.keychain) {
       console.error(new NotReadyToConnect().message);
       return;
     }
     this.keychain.navigate("/purchase/credits").then(() => {
-      this.iframes.keychain?.open();
+      this.iframes!.keychain?.open();
     });
   }
 
-  async openStarterPack(options: string | StarterPack): Promise<void> {
+  async openStarterPack(starterpackId: string | number): Promise<void> {
+    if (!this.iframes) {
+      return;
+    }
+
     if (!this.keychain || !this.iframes.keychain) {
       console.error(new NotReadyToConnect().message);
       return;
     }
 
-    // Pass options directly to keychain's unified openStarterPack method
-    await this.keychain.openStarterPack(options);
+    await this.keychain.openStarterPack(starterpackId);
     this.iframes.keychain?.open();
   }
 
   async openExecute(calls: any, chainId?: string) {
+    if (!this.iframes) {
+      return;
+    }
+
     if (!this.keychain || !this.iframes.keychain) {
       console.error(new NotReadyToConnect().message);
       return;
@@ -404,6 +509,84 @@ export default class ControllerProvider extends BaseProvider {
     return await this.keychain.delegateAccount();
   }
 
+  /**
+   * Opens the keychain in standalone mode (first-party context) for authentication.
+   * This establishes first-party storage, enabling seamless iframe access across all games.
+   * @param options - Configuration for redirect after authentication
+   */
+  open(options: OpenOptions = {}) {
+    if (typeof window === "undefined") {
+      console.error("open can only be called in browser context");
+      return;
+    }
+
+    const keychainUrl = new URL(this.options.url || KEYCHAIN_URL);
+
+    // Add redirect target (defaults to current page)
+    const redirectUrl = options.redirectUrl || window.location.href;
+
+    // Validate redirect URL to prevent XSS and open redirect attacks
+    const validation = validateRedirectUrl(redirectUrl);
+    if (!validation.isValid) {
+      console.error(
+        `Invalid redirect URL: ${validation.error}`,
+        `URL: ${redirectUrl}`,
+      );
+      return;
+    }
+
+    keychainUrl.searchParams.set("redirect_url", redirectUrl);
+
+    // Add preset if provided
+    if (this.options.preset) {
+      keychainUrl.searchParams.set("preset", this.options.preset);
+    }
+
+    // Add controller configuration parameters
+    if (this.options.slot) {
+      keychainUrl.searchParams.set("ps", this.options.slot);
+    }
+
+    if (this.options.namespace) {
+      keychainUrl.searchParams.set("ns", this.options.namespace);
+    }
+
+    if (this.options.tokens?.erc20) {
+      keychainUrl.searchParams.set(
+        "erc20",
+        this.options.tokens.erc20.toString(),
+      );
+    }
+
+    if (this.rpcUrl()) {
+      keychainUrl.searchParams.set("rpc_url", this.rpcUrl());
+    }
+
+    // Navigate to standalone keychain
+    window.location.href = keychainUrl.toString();
+  }
+
+  /**
+   * Checks if the keychain iframe has first-party storage access.
+   * Returns true if the user has previously authenticated via standalone mode.
+   * @returns Promise<boolean> indicating if storage access is available
+   */
+  async hasFirstPartyAccess(): Promise<boolean> {
+    if (!this.keychain) {
+      console.error(new NotReadyToConnect().message);
+      return false;
+    }
+
+    try {
+      // Ask the keychain iframe if it has storage access
+      const hasAccess = await this.keychain.hasStorageAccess();
+      return hasAccess;
+    } catch (error) {
+      console.error("Error checking storage access:", error);
+      return false;
+    }
+  }
+
   private initializeChains(chains: Chain[]) {
     for (const chain of chains) {
       try {
@@ -442,11 +625,14 @@ export default class ControllerProvider extends BaseProvider {
   private createKeychainIframe(): KeychainIFrame {
     return new KeychainIFrame({
       ...this.options,
+      rpcUrl: this.rpcUrl(),
       onClose: this.keychain?.reset,
       onConnect: (keychain) => {
         this.keychain = keychain;
       },
       version: version,
+      ref: this.referral.ref,
+      refGroup: this.referral.refGroup,
     });
   }
 

package/src/iframe/base.ts

@@ -1,5 +1,5 @@
 import { AsyncMethodReturns, connectToChild } from "@cartridge/penpal";
-import { ControllerOptions, Modal } from "../types";
+import { Modal } from "../types";
 
 export type IFrameOptions<CallSender> = Omit<
   ConstructorParameters<typeof IFrame>[0],
@@ -20,11 +20,10 @@ export class IFrame<CallSender extends {}> implements Modal {
   constructor({
     id,
     url,
-    preset,
     onClose,
     onConnect,
     methods = {},
-  }: Pick<ControllerOptions, "preset"> & {
+  }: {
     id: string;
     url: URL;
     onClose?: () => void;
@@ -35,12 +34,17 @@ export class IFrame<CallSender extends {}> implements Modal {
       return;
     }
 
-    if (preset) {
-      url.searchParams.set("preset", preset);
-    }
-
     this.url = url;
 
+    const docHead = document.head;
+
+    const meta = document.createElement("meta");
+    meta.name = "viewport";
+    meta.id = "controller-viewport";
+    meta.content =
+      "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, interactive-widget=resizes-content";
+    docHead.appendChild(meta);
+
     const iframe = document.createElement("iframe");
     iframe.src = url.toString();
     iframe.id = id;
@@ -52,6 +56,12 @@ export class IFrame<CallSender extends {}> implements Modal {
     iframe.sandbox.add("allow-same-origin");
     iframe.allow =
       "publickey-credentials-create *; publickey-credentials-get *; clipboard-write";
+    iframe.style.scrollbarWidth = "none";
+    iframe.style.setProperty("-ms-overflow-style", "none");
+    iframe.style.setProperty("-webkit-scrollbar", "none");
+    // Enable Storage Access API for the iframe
+    // This allows the keychain iframe to request access to its first-party storage
+    // when embedded in third-party contexts (other games/apps)
     if (!!document.hasStorageAccess) {
       iframe.sandbox.add("allow-storage-access-by-user-activation");
     }
@@ -71,8 +81,43 @@ export class IFrame<CallSender extends {}> implements Modal {
     container.style.transition = "opacity 0.2s ease";
     container.style.opacity = "0";
     container.style.pointerEvents = "auto";
+    container.style.overscrollBehaviorY = "contain";
+    container.style.scrollbarWidth = "none";
+    container.style.setProperty("-ms-overflow-style", "none");
+    container.style.setProperty("-webkit-scrollbar", "none");
     container.appendChild(iframe);
 
+    // Disables pinch to zoom
+    container.addEventListener(
+      "touchstart",
+      (e) => {
+        if (e.touches.length > 1) {
+          e.preventDefault();
+        }
+      },
+      { passive: false },
+    );
+
+    container.addEventListener(
+      "touchmove",
+      (e) => {
+        if (e.touches.length > 1) {
+          e.preventDefault();
+        }
+      },
+      { passive: false },
+    );
+
+    container.addEventListener(
+      "touchend",
+      (e) => {
+        if (e.touches.length > 1) {
+          e.preventDefault();
+        }
+      },
+      { passive: false },
+    );
+
     // Add click event listener to close iframe when clicking outside
     container.addEventListener("click", (e) => {
       if (e.target === container) {