@cartridge/controller 0.11.2 → 0.11.3

package/dist/toast/components/close-button.d.ts

@@ -0,0 +1 @@
+export declare const CloseButton: (translucent?: boolean) => HTMLDivElement;

package/dist/toast/components/progress-bar.d.ts

@@ -0,0 +1,6 @@
+export interface ProgressBarOptions {
+    duration: number;
+    onComplete?: () => void;
+    borderRadius?: number;
+}
+export declare const ProgressBar: (options: ProgressBarOptions) => HTMLDivElement;

package/dist/toast/index.d.ts

@@ -0,0 +1,57 @@
+import { ToastOptions } from './types';
+/**
+ * Show a toast notification
+ *
+ * The toast will always appear on the parent page, even if called from within an iframe.
+ * This ensures toasts are visible above all content, including the keychain iframe.
+ *
+ * @param options - Toast options with variant-specific properties
+ * @returns A function to manually dismiss the toast
+ *
+ * @example
+ * ```ts
+ * import { toast } from "@cartridge/controller";
+ *
+ * // Error toast
+ * toast({
+ *   variant: "error",
+ *   message: "Transaction failed",
+ * });
+ *
+ * // Transaction toast
+ * toast({
+ *   variant: "transaction",
+ *   hash: "0x1234...",
+ *   status: "success",
+ *   amount: "100",
+ *   token: "ETH"
+ * });
+ *
+ * // Network switch toast
+ * toast({
+ *   variant: "network-switch",
+ *   networkName: "Mainnet",
+ *   networkIcon: <url to icon image>
+ * });
+ *
+ * // Achievement toast
+ * toast({
+ *   variant: "achievement",
+ *   itemName: "First Achievement",
+ *   itemImage: "https://example.com/trophy.png"
+ *   action: "purchased" | "sold",
+ * });
+ *
+ * // Marketplace toast
+ * toast({
+ *   variant: "marketplace",
+ *   itemName: "Cool NFT #123",
+ *   action: "purchased",
+ *   price: "0.5",
+ *   currency: "ETH",
+ *   image: "https://example.com/nft.png"
+ * });
+ * ```
+ */
+export declare function toast(options: ToastOptions): () => void;
+export * from './types';

package/dist/toast/styles.d.ts

@@ -0,0 +1 @@
+export declare function injectStyles(targetDoc: Document): void;

package/dist/toast/types.d.ts

@@ -0,0 +1,39 @@
+export type ToastPosition = "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center";
+export interface BaseToastOptions {
+    duration?: number;
+    position?: ToastPosition;
+}
+export interface ErrorToastOptions extends BaseToastOptions {
+    variant: "error";
+    message: string;
+}
+export interface TransactionToastOptions extends BaseToastOptions {
+    variant: "transaction";
+    status: "confirming" | "confirmed";
+    isExpanded?: boolean;
+    label?: string;
+}
+export interface NetworkSwitchToastOptions extends BaseToastOptions {
+    variant: "network-switch";
+    networkName: string;
+    networkIcon?: string;
+}
+export interface AchievementToastOptions extends BaseToastOptions {
+    variant: "achievement";
+    title: string;
+    subtitle?: string;
+    xpAmount: number;
+    isDraft?: boolean;
+}
+export interface QuestToastOptions extends BaseToastOptions {
+    variant: "quest";
+    title: string;
+    subtitle: string;
+}
+export interface MarketplaceToastOptions extends BaseToastOptions {
+    variant: "marketplace";
+    itemName: string;
+    itemImage: string;
+    action: "purchased" | "sold";
+}
+export type ToastOptions = ErrorToastOptions | TransactionToastOptions | NetworkSwitchToastOptions | AchievementToastOptions | QuestToastOptions | MarketplaceToastOptions;

package/dist/toast/utils/progress-bar.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Add a progress bar to a toast element
+ *
+ * @param toast - The toast element to add the progress bar to
+ * @param duration - Duration in milliseconds
+ * @param onComplete - Callback when progress completes
+ * @param borderRadius - Optional border radius in pixels (default: 8px)
+ */
+export declare function addProgressBarToToast(toast: HTMLElement, duration: number, onComplete: () => void, borderRadius?: number): void;

package/dist/toast/utils.d.ts

@@ -0,0 +1,8 @@
+export declare const TOAST_CONTAINER_ID = "cartridge-toast-container";
+export declare const DEFAULT_DURATION = 3000;
+export declare const DEFAULT_POSITION = "bottom-right";
+export declare const TOAST_MESSAGE_TYPE = "cartridge-toast-show";
+export declare function isInIframe(): boolean;
+export declare function getTargetDocument(): Document | null;
+export declare function getToastContainer(targetDoc: Document, position: string): HTMLElement;
+export declare function removeToast(toast: HTMLElement): void;

package/dist/toast/variants/achievement.d.ts

@@ -0,0 +1,3 @@
+import { AchievementToastOptions } from '../types';
+export declare function injectAchievementStyles(targetDoc: Document): void;
+export declare function createAchievementToast(options: AchievementToastOptions): HTMLElement;

package/dist/toast/variants/error.d.ts

@@ -0,0 +1,3 @@
+import { ErrorToastOptions } from '../types';
+export declare function injectErrorStyles(targetDoc: Document): void;
+export declare function createErrorToast(options: ErrorToastOptions): HTMLElement;

package/dist/toast/variants/index.d.ts

@@ -0,0 +1,6 @@
+export * from './error';
+export * from './transaction';
+export * from './network-switch';
+export * from './achievement';
+export * from './marketplace';
+export * from './quest';

package/dist/toast/variants/marketplace.d.ts

@@ -0,0 +1,3 @@
+import { MarketplaceToastOptions } from '../types';
+export declare function injectMarketplaceStyles(targetDoc: Document): void;
+export declare function createMarketplaceToast(options: MarketplaceToastOptions): HTMLElement;

package/dist/toast/variants/network-switch.d.ts

@@ -0,0 +1,3 @@
+import { NetworkSwitchToastOptions } from '../types';
+export declare function injectNetworkSwitchStyles(targetDoc: Document): void;
+export declare function createNetworkSwitchToast(options: NetworkSwitchToastOptions): HTMLElement;

package/dist/toast/variants/quest.d.ts

@@ -0,0 +1,3 @@
+import { QuestToastOptions } from '../types';
+export declare function injectQuestStyles(targetDoc: Document): void;
+export declare function createQuestToast(options: QuestToastOptions): HTMLElement;

package/dist/toast/variants/transaction.d.ts

@@ -0,0 +1,3 @@
+import { TransactionToastOptions } from '../types';
+export declare function injectTransactionStyles(targetDoc: Document): void;
+export declare function createTransactionToast(options: TransactionToastOptions): HTMLElement;

package/dist/types.d.ts

@@ -15,9 +15,9 @@ export type KeychainSession = {
 };
 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 declare const ALL_AUTH_OPTIONS: readonly ["google", "webauthn", "discord", "walletconnect", "password", "metamask", "rabby", "phantom-evm", "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 declare const IMPLEMENTED_AUTH_OPTIONS: ("metamask" | "rabby" | "phantom-evm" | "google" | "webauthn" | "discord" | "walletconnect" | "password")[];
 export type AuthOptions = (typeof IMPLEMENTED_AUTH_OPTIONS)[number][];
 export declare enum ResponseCodes {
     SUCCESS = "SUCCESS",
@@ -155,7 +155,7 @@ export type KeychainOptions = IFrameOptions & {
     /** When true, defer iframe mounting until connect() is called. Reduces initial load and resource fetching. */
     lazyload?: boolean;
 };
-export type ProfileContextTypeVariant = "inventory" | "trophies" | "achievements" | "leaderboard" | "activity";
+export type ProfileContextTypeVariant = "inventory" | "trophies" | "achievements" | "quests" | "leaderboard" | "activity";
 export type Token = "eth" | "strk" | "lords" | "usdc" | "usdt";
 export type Tokens = {
     erc20?: Token[];

package/dist/utils.d.ts

@@ -14,3 +14,4 @@ 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;
+export declare function sanitizeImageSrc(src: string): string;

package/dist/wallets/index.d.ts

@@ -5,6 +5,7 @@ export * from './bridge';
 export * from './ethereum-base';
 export * from './metamask';
 export * from './phantom';
+export * from './phantom-evm';
 export * from './rabby';
 export * from './types';
 export * from './platform';

package/dist/wallets/phantom-evm/index.d.ts

@@ -0,0 +1,7 @@
+import { ExternalWalletType } from '../types';
+import { EthereumWalletBase } from '../ethereum-base';
+export declare class PhantomEVMWallet extends EthereumWalletBase {
+    readonly type: ExternalWalletType;
+    readonly rdns = "app.phantom";
+    readonly displayName = "Phantom";
+}

package/dist/wallets/types.d.ts

@@ -1,8 +1,8 @@
-export declare const AUTH_EXTERNAL_WALLETS: readonly ["metamask", "rabby"];
+export declare const AUTH_EXTERNAL_WALLETS: readonly ["metamask", "rabby", "phantom-evm"];
 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 declare const EXTERNAL_WALLETS: readonly ["metamask", "rabby", "phantom-evm", "argent", "braavos", "phantom", "base"];
 export type ExternalWalletType = (typeof EXTERNAL_WALLETS)[number];
 export type ExternalPlatform = "starknet" | "ethereum" | "solana" | "base" | "arbitrum" | "optimism";
 export interface ExternalWallet {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cartridge/controller",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "description": "Cartridge Controller",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -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.11.2"
+    "@cartridge/tsconfig": "0.11.3"
   },
   "scripts": {
     "build:deps": "pnpm build",
@@ -58,7 +58,6 @@
     "build:browser": "vite build",
     "build:node": "tsup --config tsup.node.config.ts",
     "build": "pnpm build:browser && pnpm build:node",
-    "build:compat": "pnpm build:browser && pnpm build:node",
     "format": "prettier --write \"src/**/*.ts\"",
     "format:check": "prettier --check \"src/**/*.ts\"",
     "test": "jest",

package/src/iframe/base.ts

@@ -14,7 +14,6 @@ export class IFrame<CallSender extends {}> implements Modal {
   private iframe?: HTMLIFrameElement;
   private container?: HTMLDivElement;
   private onClose?: () => void;
-  private child?: AsyncMethodReturns<CallSender>;
   private closeTimeout?: NodeJS.Timeout;
 
   constructor({
@@ -55,7 +54,7 @@ export class IFrame<CallSender extends {}> implements Modal {
     iframe.sandbox.add("allow-scripts");
     iframe.sandbox.add("allow-same-origin");
     iframe.allow =
-      "publickey-credentials-create *; publickey-credentials-get *; clipboard-write";
+      "publickey-credentials-create *; publickey-credentials-get *; clipboard-write; local-network-access *; payment *";
     iframe.style.scrollbarWidth = "none";
     iframe.style.setProperty("-ms-overflow-style", "none");
     iframe.style.setProperty("-webkit-scrollbar", "none");
@@ -118,20 +117,6 @@ export class IFrame<CallSender extends {}> implements Modal {
       { passive: false },
     );
 
-    // Add click event listener to close iframe when clicking outside
-    container.addEventListener("click", (e) => {
-      if (e.target === container) {
-        // Attempting to reset(clear context) for keychain iframe (identified by ID)
-        if (id === "controller-keychain" && this.child) {
-          // Type assertion for keychain child only
-          (this.child as any)
-            .reset?.()
-            .catch((e: any) => console.error("Error resetting context:", e));
-        }
-        this.close();
-      }
-    });
-
     this.iframe = iframe;
     this.container = container;
 
@@ -142,10 +127,7 @@ export class IFrame<CallSender extends {}> implements Modal {
         reload: (_origin: string) => () => window.location.reload(),
         ...methods,
       },
-    }).promise.then((child) => {
-      this.child = child;
-      onConnect(child);
-    });
+    }).promise.then(onConnect);
 
     this.resize();
     window.addEventListener("resize", () => this.resize());

package/src/index.ts

@@ -4,4 +4,5 @@ export * from "./types";
 export * from "./lookup";
 export * from "./utils";
 export * from "./wallets";
+export * from "./toast";
 export * from "@cartridge/presets";

package/src/toast/components/close-button.ts

@@ -0,0 +1,82 @@
+export const CloseButton = (translucent = false): HTMLDivElement => {
+  const container = document.createElement("div");
+  container.id = "close-button";
+  container.style.display = "flex";
+  container.style.alignItems = "center";
+  container.style.justifyContent = "center";
+
+  const button = document.createElement("button");
+  button.className = translucent
+    ? "cartridge-close-button translucent"
+    : "cartridge-close-button";
+
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("width", "20");
+  svg.setAttribute("height", "20");
+  svg.setAttribute("viewBox", "0 0 20 20");
+  svg.setAttribute("fill", "none");
+  svg.style.pointerEvents = "none"; // Ensure clicks pass through to button
+
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute(
+    "d",
+    "M15.5465 14.343C15.8881 14.6837 15.8881 15.2364 15.5465 15.5772C15.2049 15.9179 14.6506 15.9178 14.309 15.5772L10.0006 11.2484L5.66162 15.5757C5.32001 15.9164 4.76575 15.9164 4.4241 15.5757C4.08245 15.235 4.08249 14.6822 4.4241 14.3415L8.76455 10.0157L4.4229 5.65573C4.08128 5.31504 4.08128 4.76227 4.4229 4.42155C4.76451 4.08082 5.31877 4.08086 5.66042 4.42155L10.0006 8.78299L14.3396 4.45573C14.6812 4.11504 15.2355 4.11504 15.5771 4.45573C15.9188 4.79642 15.9187 5.34918 15.5771 5.68991L11.2367 10.0157L15.5465 14.343Z",
+  );
+  path.setAttribute("class", "cartridge-close-icon");
+
+  svg.appendChild(path);
+  button.appendChild(svg);
+
+  // Inline critical button styles
+  button.style.display = "flex";
+  button.style.alignItems = "center";
+  button.style.justifyContent = "center";
+  button.style.border = "none";
+  button.style.background = "transparent";
+  button.style.cursor = "pointer";
+  button.style.borderRadius = "4px";
+  button.style.padding = "10px";
+  button.style.gap = "4px";
+  button.style.transition = "background-color 0.2s ease";
+
+  // Add styles dynamically to the correct document
+  const targetDoc = container.ownerDocument;
+  if (!targetDoc.getElementById("cartridge-close-button-style")) {
+    const style = targetDoc.createElement("style");
+    style.id = "cartridge-close-button-style";
+    style.textContent = `
+      .cartridge-close-button .cartridge-close-icon {
+        fill: rgba(0, 0, 0, 0.48);
+        transition: fill 0.2s ease;
+      }
+
+      .cartridge-close-button:not(.translucent):hover {
+        background-color: #181c19;
+      }
+
+      .cartridge-close-button:not(.translucent):hover .cartridge-close-icon {
+        fill: rgba(255, 255, 255, 0.72);
+      }
+
+      .cartridge-close-button.translucent .cartridge-close-icon {
+        fill: rgba(0, 0, 0, 0.48);
+      }
+
+      .cartridge-close-button.translucent:hover {
+        background-color: rgba(0, 0, 0, 0.04);
+      }
+
+      .cartridge-close-button.translucent:hover .cartridge-close-icon {
+        fill: rgba(0, 0, 0, 0.72);
+      }
+
+      .cartridge-close-button:active {
+        transform: scale(0.95);
+      }
+    `;
+    targetDoc.head.appendChild(style);
+  }
+
+  container.appendChild(button);
+  return container;
+};

package/src/toast/components/progress-bar.ts

@@ -0,0 +1,60 @@
+export interface ProgressBarOptions {
+  duration: number; // in milliseconds (0 or Infinity for static full bar)
+  onComplete?: () => void;
+  borderRadius?: number; // Optional border radius in pixels (default: 8px)
+}
+
+export const ProgressBar = (options: ProgressBarOptions): HTMLDivElement => {
+  const borderRadius = options.borderRadius ?? 8;
+  const isInfiniteDuration =
+    !isFinite(options.duration) || options.duration <= 0;
+
+  const container = document.createElement("div");
+  container.className = "cartridge-toast-progress-bar";
+  container.style.position = "absolute";
+  container.style.bottom = "0";
+  container.style.left = "0";
+  container.style.right = "0";
+  container.style.height = "4px";
+  container.style.overflow = "hidden";
+  container.style.borderBottomLeftRadius = `${borderRadius}px`;
+  container.style.borderBottomRightRadius = `${borderRadius}px`;
+  container.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+
+  const inside = document.createElement("div");
+  inside.className = "cartridge-toast-progress-bar-fill";
+  inside.style.position = "absolute";
+  inside.style.bottom = "0";
+  inside.style.left = "0";
+  inside.style.height = "100%";
+  inside.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
+  inside.style.borderBottomLeftRadius = `${borderRadius}px`;
+
+  if (isInfiniteDuration) {
+    // For infinite duration, show full bar immediately without animation
+    inside.style.width = "100%";
+    inside.style.transition = "none";
+  } else {
+    // For finite duration, animate the progress bar
+    inside.style.width = "0%";
+    inside.style.transition = `width ${options.duration}ms linear`;
+
+    // Start animation after a brief delay to ensure styles are applied
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        inside.style.width = "100%";
+      });
+    });
+
+    // Call onComplete when animation finishes
+    if (options.onComplete) {
+      setTimeout(() => {
+        options.onComplete?.();
+      }, options.duration);
+    }
+  }
+
+  container.appendChild(inside);
+
+  return container;
+};