@cartridge/controller 0.5.0-alpha.4 → 0.5.0-alpha.6

package/dist/iframe/keychain.js

@@ -1,16 +1,297 @@
-import { KEYCHAIN_URL } from "../constants";
-import { IFrame } from "./base";
-export class KeychainIFrame extends IFrame {
-    constructor({ url, policies, ...iframeOptions }) {
-        const _url = new URL(url ?? KEYCHAIN_URL);
-        if (policies) {
-            _url.searchParams.set("policies", encodeURIComponent(JSON.stringify(policies)));
+// src/constants.ts
+var KEYCHAIN_URL = "https://x.cartridge.gg";
+
+// src/iframe/base.ts
+import { connectToChild } from "@cartridge/penpal";
+
+// src/presets.ts
+var defaultPresets = {
+  cartridge: {
+    id: "cartridge",
+    name: "Cartridge",
+    icon: "/whitelabel/cartridge/icon.svg",
+    cover: {
+      light: "/whitelabel/cartridge/cover-light.png",
+      dark: "/whitelabel/cartridge/cover-dark.png"
+    }
+  },
+  "force-prime": {
+    id: "force-prime",
+    name: "Force Prime",
+    icon: "/whitelabel/force-prime/icon.png",
+    cover: "/whitelabel/force-prime/cover.png",
+    colors: {
+      primary: "#E1CC89"
+    }
+  },
+  paved: {
+    id: "paved",
+    name: "Paved",
+    icon: "/whitelabel/paved/icon.svg",
+    cover: "/whitelabel/paved/cover.png",
+    colors: {
+      primary: "#B0CAF8"
+    }
+  },
+  eternum: {
+    id: "eternum",
+    name: "Eternum",
+    icon: "/whitelabel/eternum/icon.gif",
+    cover: "/whitelabel/eternum/cover.png",
+    colors: {
+      primary: "#CE9822"
+    }
+  },
+  pistols: {
+    id: "pistols",
+    name: "Pistols at Ten Blocks",
+    icon: "/whitelabel/pistols/icon.png",
+    cover: "/whitelabel/pistols/cover.png",
+    colors: {
+      primary: "#EF9758"
+    }
+  },
+  pixelaw: {
+    id: "pixelaw",
+    name: "Pixelaw",
+    icon: "/whitelabel/pixelaw/icon.svg",
+    cover: "/whitelabel/pixelaw/cover.png",
+    colors: {
+      primary: "#7C00B1",
+      primaryForeground: "white"
+    }
+  },
+  "dope-wars": {
+    id: "dope-wars",
+    name: "Dope Wars",
+    icon: "/whitelabel/dope-wars/icon.png",
+    cover: "/whitelabel/dope-wars/cover.png",
+    colors: {
+      primary: "#11ED83"
+    }
+  },
+  zkastle: {
+    id: "zkastle",
+    name: "zKastle",
+    icon: "/whitelabel/zkastle/icon.svg",
+    cover: "/whitelabel/zkastle/cover.png",
+    colors: {
+      primary: "#E50D2C"
+    }
+  },
+  "loot-survivor": {
+    id: "loot-survivor",
+    name: "Loot Survivor",
+    icon: "/whitelabel/loot-survivor/icon.png",
+    cover: "/whitelabel/loot-survivor/cover.png",
+    colors: {
+      primary: "#33FF33"
+    }
+  },
+  "tale-weaver": {
+    id: "tale-weaver",
+    name: "Tale Weaver",
+    icon: "/whitelabel/tale-weaver/icon.png",
+    cover: "/whitelabel/tale-weaver/cover.png",
+    colors: {
+      primary: "#fce377"
+    }
+  },
+  "realm-of-ra": {
+    id: "realm-of-ra",
+    name: "Realm of Ra",
+    icon: "/whitelabel/realm-of-ra/icon.png",
+    cover: "/whitelabel/realm-of-ra/cover.png",
+    colors: {
+      primary: "#de9534"
+    }
+  },
+  "jokers-of-neon": {
+    id: "jokers-of-neon",
+    name: "Jokers of Neon",
+    icon: "/whitelabel/jokers-of-neon/icon.png",
+    cover: "/whitelabel/jokers-of-neon/cover.png",
+    colors: {
+      primary: "#A144B2"
+    }
+  },
+  flippyflop: {
+    id: "flippyflop",
+    name: "FlippyFlop",
+    icon: "/whitelabel/flippyflop/icon.png",
+    cover: "/whitelabel/flippyflop/cover.png",
+    colors: {
+      primary: "#F38332"
+    }
+  },
+  "savage-summit": {
+    id: "savage-summit",
+    name: "Savage Summit",
+    icon: "/whitelabel/savage-summit/icon.png",
+    cover: "/whitelabel/savage-summit/cover.png",
+    colors: {
+      primary: "#fbf7da"
+    }
+  },
+  "dark-shuffle": {
+    id: "dark-shuffle",
+    name: "Dark Shuffle",
+    icon: "/whitelabel/dark-shuffle/icon.svg",
+    cover: "/whitelabel/dark-shuffle/cover.png",
+    colors: {
+      primary: "#F59100"
+    }
+  },
+  "blob-arena": {
+    id: "blob-arena",
+    name: "Blob Arena",
+    icon: "/whitelabel/blob-arena/icon.png",
+    cover: "/whitelabel/blob-arena/cover.png",
+    colors: {
+      primary: "#980f06"
+    }
+  },
+  zkube: {
+    id: "zkube",
+    name: "zKube",
+    icon: "/whitelabel/zkube/icon.png",
+    cover: "/whitelabel/zkube/cover.png",
+    colors: {
+      primary: "#5bc3e6"
+    }
+  }
+};
+
+// src/iframe/base.ts
+var IFrame = class {
+  constructor({
+    id,
+    url,
+    theme,
+    config,
+    colorMode,
+    onClose,
+    onConnect,
+    methods = {}
+  }) {
+    if (typeof document === "undefined") {
+      return;
+    }
+    url.searchParams.set(
+      "theme",
+      encodeURIComponent(
+        JSON.stringify(
+          config?.presets?.[theme ?? "cartridge"] ?? defaultPresets.cartridge
+        )
+      )
+    );
+    if (colorMode) {
+      url.searchParams.set("colorMode", colorMode);
+    }
+    this.url = url;
+    const iframe = document.createElement("iframe");
+    iframe.src = url.toString();
+    iframe.id = id;
+    iframe.style.border = "none";
+    iframe.sandbox.add("allow-forms");
+    iframe.sandbox.add("allow-popups");
+    iframe.sandbox.add("allow-scripts");
+    iframe.sandbox.add("allow-same-origin");
+    iframe.allow = "publickey-credentials-create *; publickey-credentials-get *; clipboard-write";
+    if (!!document.hasStorageAccess) {
+      iframe.sandbox.add("allow-storage-access-by-user-activation");
+    }
+    const container = document.createElement("div");
+    container.id = "controller";
+    container.style.position = "fixed";
+    container.style.height = "100%";
+    container.style.width = "100%";
+    container.style.top = "0";
+    container.style.left = "0";
+    container.style.zIndex = "10000";
+    container.style.backgroundColor = "rgba(0,0,0,0.6)";
+    container.style.display = "flex";
+    container.style.alignItems = "center";
+    container.style.justifyContent = "center";
+    container.style.visibility = "hidden";
+    container.style.opacity = "0";
+    container.style.transition = "opacity 0.2s ease";
+    container.appendChild(iframe);
+    this.iframe = iframe;
+    this.container = container;
+    connectToChild({
+      iframe: this.iframe,
+      methods: { close: () => this.close(), ...methods }
+    }).promise.then(onConnect);
+    this.resize();
+    window.addEventListener("resize", () => this.resize());
+    const observer = new MutationObserver(() => {
+      const existingController2 = document.getElementById("controller");
+      if (document.body) {
+        if (id === "controller-keychain" && !existingController2 || id === "controller-profile") {
+          document.body.appendChild(container);
+          observer.disconnect();
         }
-        super({
-            ...iframeOptions,
-            id: "controller-keychain",
-            url: _url,
-        });
+      }
+    });
+    observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true
+    });
+    const existingController = document.getElementById("controller");
+    if (document.body) {
+      if (id === "controller-keychain" && !existingController || id === "controller-profile") {
+        document.body.appendChild(container);
+      }
+    }
+    this.onClose = onClose;
+  }
+  open() {
+    if (!this.container) return;
+    document.body.style.overflow = "hidden";
+    this.container.style.visibility = "visible";
+    this.container.style.opacity = "1";
+  }
+  close() {
+    if (!this.container) return;
+    this.onClose?.();
+    document.body.style.overflow = "auto";
+    this.container.style.visibility = "hidden";
+    this.container.style.opacity = "0";
+  }
+  resize() {
+    if (!this.iframe) return;
+    this.iframe.style.userSelect = "none";
+    if (window.innerWidth < 768) {
+      this.iframe.style.height = "100%";
+      this.iframe.style.width = "100%";
+      this.iframe.style.borderRadius = "0";
+      return;
+    }
+    this.iframe.style.height = "600px";
+    this.iframe.style.width = "432px";
+    this.iframe.style.borderRadius = "8px";
+  }
+};
+
+// src/iframe/keychain.ts
+var KeychainIFrame = class extends IFrame {
+  constructor({ url, policies, ...iframeOptions }) {
+    const _url = new URL(url ?? KEYCHAIN_URL);
+    if (policies) {
+      _url.searchParams.set(
+        "policies",
+        encodeURIComponent(JSON.stringify(policies))
+      );
     }
-}
+    super({
+      ...iframeOptions,
+      id: "controller-keychain",
+      url: _url
+    });
+  }
+};
+export {
+  KeychainIFrame
+};
 //# sourceMappingURL=keychain.js.map

package/dist/iframe/keychain.js.map

@@ -1 +1 @@
-{"version":3,"file":"keychain.js","sourceRoot":"","sources":["../../src/iframe/keychain.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAiB,MAAM,QAAQ,CAAC;AAI/C,MAAM,OAAO,cAAe,SAAQ,MAAgB;IAClD,YAAY,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAyB;QACpE,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,YAAY,CAAC,CAAC;QAE1C,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,YAAY,CAAC,GAAG,CACnB,UAAU,EACV,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAC7C,CAAC;QACJ,CAAC;QAED,KAAK,CAAC;YACJ,GAAG,aAAa;YAChB,EAAE,EAAE,qBAAqB;YACzB,GAAG,EAAE,IAAI;SACV,CAAC,CAAC;IACL,CAAC;CACF"}
+{"version":3,"sources":["../../src/constants.ts","../../src/iframe/base.ts","../../src/presets.ts","../../src/iframe/keychain.ts"],"sourcesContent":["export const KEYCHAIN_URL = \"https://x.cartridge.gg\";\nexport const PROFILE_URL = \"https://profile.cartridge.gg\";\n","import { AsyncMethodReturns, connectToChild } from \"@cartridge/penpal\";\nimport { defaultPresets } from \"../presets\";\nimport { ControllerOptions, Modal } from \"../types\";\n\nexport type IFrameOptions<CallSender> = Omit<\n  ConstructorParameters<typeof IFrame>[0],\n  \"id\" | \"url\" | \"onConnect\"\n> & {\n  url?: string;\n  onConnect: (child: AsyncMethodReturns<CallSender>) => void;\n};\n\nexport class IFrame<CallSender extends {}> implements Modal {\n  url?: URL;\n  private iframe?: HTMLIFrameElement;\n  private container?: HTMLDivElement;\n  private onClose?: () => void;\n\n  constructor({\n    id,\n    url,\n    theme,\n    config,\n    colorMode,\n    onClose,\n    onConnect,\n    methods = {},\n  }: Pick<ControllerOptions, \"theme\" | \"config\" | \"colorMode\"> & {\n    id: string;\n    url: URL;\n    onClose?: () => void;\n    onConnect: (child: AsyncMethodReturns<CallSender>) => void;\n    methods?: { [key: string]: (...args: any[]) => void };\n  }) {\n    if (typeof document === \"undefined\") {\n      return;\n    }\n\n    url.searchParams.set(\n      \"theme\",\n      encodeURIComponent(\n        JSON.stringify(\n          config?.presets?.[theme ?? \"cartridge\"] ?? defaultPresets.cartridge,\n        ),\n      ),\n    );\n\n    if (colorMode) {\n      url.searchParams.set(\"colorMode\", colorMode);\n    }\n\n    this.url = url;\n\n    const iframe = document.createElement(\"iframe\");\n    iframe.src = url.toString();\n    iframe.id = id;\n    iframe.style.border = \"none\";\n    iframe.sandbox.add(\"allow-forms\");\n    iframe.sandbox.add(\"allow-popups\");\n    iframe.sandbox.add(\"allow-scripts\");\n    iframe.sandbox.add(\"allow-same-origin\");\n    iframe.allow =\n      \"publickey-credentials-create *; publickey-credentials-get *; clipboard-write\";\n    if (!!document.hasStorageAccess) {\n      iframe.sandbox.add(\"allow-storage-access-by-user-activation\");\n    }\n\n    const container = document.createElement(\"div\");\n    container.id = \"controller\";\n    container.style.position = \"fixed\";\n    container.style.height = \"100%\";\n    container.style.width = \"100%\";\n    container.style.top = \"0\";\n    container.style.left = \"0\";\n    container.style.zIndex = \"10000\";\n    container.style.backgroundColor = \"rgba(0,0,0,0.6)\";\n    container.style.display = \"flex\";\n    container.style.alignItems = \"center\";\n    container.style.justifyContent = \"center\";\n    container.style.visibility = \"hidden\";\n    container.style.opacity = \"0\";\n    container.style.transition = \"opacity 0.2s ease\";\n    container.appendChild(iframe);\n\n    this.iframe = iframe;\n    this.container = container;\n\n    connectToChild<CallSender>({\n      iframe: this.iframe,\n      methods: { close: () => this.close(), ...methods },\n    }).promise.then(onConnect);\n\n    this.resize();\n    window.addEventListener(\"resize\", () => this.resize());\n\n    const observer = new MutationObserver(() => {\n      const existingController = document.getElementById(\"controller\");\n      if (document.body) {\n        if (\n          (id === \"controller-keychain\" && !existingController) ||\n          id === \"controller-profile\"\n        ) {\n          document.body.appendChild(container);\n          observer.disconnect();\n        }\n      }\n    });\n\n    observer.observe(document.documentElement, {\n      childList: true,\n      subtree: true,\n    });\n\n    const existingController = document.getElementById(\"controller\");\n    if (document.body) {\n      if (\n        (id === \"controller-keychain\" && !existingController) ||\n        id === \"controller-profile\"\n      ) {\n        document.body.appendChild(container);\n      }\n    }\n\n    this.onClose = onClose;\n  }\n\n  open() {\n    if (!this.container) return;\n    document.body.style.overflow = \"hidden\";\n\n    this.container.style.visibility = \"visible\";\n    this.container.style.opacity = \"1\";\n  }\n\n  close() {\n    if (!this.container) return;\n    this.onClose?.();\n\n    document.body.style.overflow = \"auto\";\n\n    this.container.style.visibility = \"hidden\";\n    this.container.style.opacity = \"0\";\n  }\n\n  private resize() {\n    if (!this.iframe) return;\n\n    this.iframe.style.userSelect = \"none\";\n\n    if (window.innerWidth < 768) {\n      this.iframe.style.height = \"100%\";\n      this.iframe.style.width = \"100%\";\n      this.iframe.style.borderRadius = \"0\";\n      return;\n    }\n\n    this.iframe.style.height = \"600px\";\n    this.iframe.style.width = \"432px\";\n    this.iframe.style.borderRadius = \"8px\";\n  }\n}\n","import { ControllerThemePresets } from \"./types\";\n\nexport const defaultPresets: ControllerThemePresets = {\n  cartridge: {\n    id: \"cartridge\",\n    name: \"Cartridge\",\n    icon: \"/whitelabel/cartridge/icon.svg\",\n    cover: {\n      light: \"/whitelabel/cartridge/cover-light.png\",\n      dark: \"/whitelabel/cartridge/cover-dark.png\",\n    },\n  },\n  \"force-prime\": {\n    id: \"force-prime\",\n    name: \"Force Prime\",\n    icon: \"/whitelabel/force-prime/icon.png\",\n    cover: \"/whitelabel/force-prime/cover.png\",\n    colors: {\n      primary: \"#E1CC89\",\n    },\n  },\n  paved: {\n    id: \"paved\",\n    name: \"Paved\",\n    icon: \"/whitelabel/paved/icon.svg\",\n    cover: \"/whitelabel/paved/cover.png\",\n    colors: {\n      primary: \"#B0CAF8\",\n    },\n  },\n  eternum: {\n    id: \"eternum\",\n    name: \"Eternum\",\n    icon: \"/whitelabel/eternum/icon.gif\",\n    cover: \"/whitelabel/eternum/cover.png\",\n    colors: {\n      primary: \"#CE9822\",\n    },\n  },\n  pistols: {\n    id: \"pistols\",\n    name: \"Pistols at Ten Blocks\",\n    icon: \"/whitelabel/pistols/icon.png\",\n    cover: \"/whitelabel/pistols/cover.png\",\n    colors: {\n      primary: \"#EF9758\",\n    },\n  },\n  pixelaw: {\n    id: \"pixelaw\",\n    name: \"Pixelaw\",\n    icon: \"/whitelabel/pixelaw/icon.svg\",\n    cover: \"/whitelabel/pixelaw/cover.png\",\n    colors: {\n      primary: \"#7C00B1\",\n      primaryForeground: \"white\",\n    },\n  },\n  \"dope-wars\": {\n    id: \"dope-wars\",\n    name: \"Dope Wars\",\n    icon: \"/whitelabel/dope-wars/icon.png\",\n    cover: \"/whitelabel/dope-wars/cover.png\",\n    colors: {\n      primary: \"#11ED83\",\n    },\n  },\n  zkastle: {\n    id: \"zkastle\",\n    name: \"zKastle\",\n    icon: \"/whitelabel/zkastle/icon.svg\",\n    cover: \"/whitelabel/zkastle/cover.png\",\n    colors: {\n      primary: \"#E50D2C\",\n    },\n  },\n  \"loot-survivor\": {\n    id: \"loot-survivor\",\n    name: \"Loot Survivor\",\n    icon: \"/whitelabel/loot-survivor/icon.png\",\n    cover: \"/whitelabel/loot-survivor/cover.png\",\n    colors: {\n      primary: \"#33FF33\",\n    },\n  },\n  \"tale-weaver\": {\n    id: \"tale-weaver\",\n    name: \"Tale Weaver\",\n    icon: \"/whitelabel/tale-weaver/icon.png\",\n    cover: \"/whitelabel/tale-weaver/cover.png\",\n    colors: {\n      primary: \"#fce377\",\n    },\n  },\n  \"realm-of-ra\": {\n    id: \"realm-of-ra\",\n    name: \"Realm of Ra\",\n    icon: \"/whitelabel/realm-of-ra/icon.png\",\n    cover: \"/whitelabel/realm-of-ra/cover.png\",\n    colors: {\n      primary: \"#de9534\",\n    },\n  },\n  \"jokers-of-neon\": {\n    id: \"jokers-of-neon\",\n    name: \"Jokers of Neon\",\n    icon: \"/whitelabel/jokers-of-neon/icon.png\",\n    cover: \"/whitelabel/jokers-of-neon/cover.png\",\n    colors: {\n      primary: \"#A144B2\",\n    },\n  },\n  flippyflop: {\n    id: \"flippyflop\",\n    name: \"FlippyFlop\",\n    icon: \"/whitelabel/flippyflop/icon.png\",\n    cover: \"/whitelabel/flippyflop/cover.png\",\n    colors: {\n      primary: \"#F38332\",\n    },\n  },\n  \"savage-summit\": {\n    id: \"savage-summit\",\n    name: \"Savage Summit\",\n    icon: \"/whitelabel/savage-summit/icon.png\",\n    cover: \"/whitelabel/savage-summit/cover.png\",\n    colors: {\n      primary: \"#fbf7da\",\n    },\n  },\n  \"dark-shuffle\": {\n    id: \"dark-shuffle\",\n    name: \"Dark Shuffle\",\n    icon: \"/whitelabel/dark-shuffle/icon.svg\",\n    cover: \"/whitelabel/dark-shuffle/cover.png\",\n    colors: {\n      primary: \"#F59100\",\n    },\n  },\n  \"blob-arena\": {\n    id: \"blob-arena\",\n    name: \"Blob Arena\",\n    icon: \"/whitelabel/blob-arena/icon.png\",\n    cover: \"/whitelabel/blob-arena/cover.png\",\n    colors: {\n      primary: \"#980f06\",\n    },\n  },\n  zkube: {\n    id: \"zkube\",\n    name: \"zKube\",\n    icon: \"/whitelabel/zkube/icon.png\",\n    cover: \"/whitelabel/zkube/cover.png\",\n    colors: {\n      primary: \"#5bc3e6\",\n    },\n  },\n};\n","import { KEYCHAIN_URL } from \"../constants\";\nimport { Keychain, KeychainOptions } from \"../types\";\nimport { IFrame, IFrameOptions } from \"./base\";\n\ntype KeychainIframeOptions = IFrameOptions<Keychain> & KeychainOptions;\n\nexport class KeychainIFrame extends IFrame<Keychain> {\n  constructor({ url, policies, ...iframeOptions }: KeychainIframeOptions) {\n    const _url = new URL(url ?? KEYCHAIN_URL);\n\n    if (policies) {\n      _url.searchParams.set(\n        \"policies\",\n        encodeURIComponent(JSON.stringify(policies)),\n      );\n    }\n\n    super({\n      ...iframeOptions,\n      id: \"controller-keychain\",\n      url: _url,\n    });\n  }\n}\n"],"mappings":"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","names":["existingController"]}

package/dist/iframe/profile.d.ts

@@ -1,11 +1,5 @@
-import { Profile, ProfileOptions } from "../types";
-import { IFrame, IFrameOptions } from "./base";
-export type ProfileIFrameOptions = IFrameOptions<Profile> & ProfileOptions & {
-    username: string;
-    indexerUrl: string;
-    namespace: string;
-    rpcUrl: string;
-};
-export declare class ProfileIFrame extends IFrame<Profile> {
-    constructor({ profileUrl, username, indexerUrl, namespace, rpcUrl, tokens, ...iframeOptions }: ProfileIFrameOptions);
-}
+export { x as ProfileIFrame, w as ProfileIFrameOptions } from '../types-DIeWpu0p.js';
+import 'starknet';
+import '@starknet-io/types-js';
+import '@cartridge/penpal';
+import '@cartridge/account-wasm/controller';

package/dist/iframe/profile.js

@@ -1,19 +1,311 @@
-import { PROFILE_URL } from "../constants";
-import { IFrame } from "./base";
-export class ProfileIFrame extends IFrame {
-    constructor({ profileUrl, username, indexerUrl, namespace, rpcUrl, tokens, ...iframeOptions }) {
-        const _url = new URL(`${profileUrl ?? PROFILE_URL}/account/${username}`);
-        _url.searchParams.set("indexerUrl", encodeURIComponent(indexerUrl));
-        _url.searchParams.set("namespace", encodeURIComponent(namespace));
-        _url.searchParams.set("rpcUrl", encodeURIComponent(rpcUrl));
-        if (tokens?.erc20) {
-            _url.searchParams.set("erc20", encodeURIComponent(tokens.erc20.toString()));
+// src/constants.ts
+var PROFILE_URL = "https://profile.cartridge.gg";
+
+// src/iframe/base.ts
+import { connectToChild } from "@cartridge/penpal";
+
+// src/presets.ts
+var defaultPresets = {
+  cartridge: {
+    id: "cartridge",
+    name: "Cartridge",
+    icon: "/whitelabel/cartridge/icon.svg",
+    cover: {
+      light: "/whitelabel/cartridge/cover-light.png",
+      dark: "/whitelabel/cartridge/cover-dark.png"
+    }
+  },
+  "force-prime": {
+    id: "force-prime",
+    name: "Force Prime",
+    icon: "/whitelabel/force-prime/icon.png",
+    cover: "/whitelabel/force-prime/cover.png",
+    colors: {
+      primary: "#E1CC89"
+    }
+  },
+  paved: {
+    id: "paved",
+    name: "Paved",
+    icon: "/whitelabel/paved/icon.svg",
+    cover: "/whitelabel/paved/cover.png",
+    colors: {
+      primary: "#B0CAF8"
+    }
+  },
+  eternum: {
+    id: "eternum",
+    name: "Eternum",
+    icon: "/whitelabel/eternum/icon.gif",
+    cover: "/whitelabel/eternum/cover.png",
+    colors: {
+      primary: "#CE9822"
+    }
+  },
+  pistols: {
+    id: "pistols",
+    name: "Pistols at Ten Blocks",
+    icon: "/whitelabel/pistols/icon.png",
+    cover: "/whitelabel/pistols/cover.png",
+    colors: {
+      primary: "#EF9758"
+    }
+  },
+  pixelaw: {
+    id: "pixelaw",
+    name: "Pixelaw",
+    icon: "/whitelabel/pixelaw/icon.svg",
+    cover: "/whitelabel/pixelaw/cover.png",
+    colors: {
+      primary: "#7C00B1",
+      primaryForeground: "white"
+    }
+  },
+  "dope-wars": {
+    id: "dope-wars",
+    name: "Dope Wars",
+    icon: "/whitelabel/dope-wars/icon.png",
+    cover: "/whitelabel/dope-wars/cover.png",
+    colors: {
+      primary: "#11ED83"
+    }
+  },
+  zkastle: {
+    id: "zkastle",
+    name: "zKastle",
+    icon: "/whitelabel/zkastle/icon.svg",
+    cover: "/whitelabel/zkastle/cover.png",
+    colors: {
+      primary: "#E50D2C"
+    }
+  },
+  "loot-survivor": {
+    id: "loot-survivor",
+    name: "Loot Survivor",
+    icon: "/whitelabel/loot-survivor/icon.png",
+    cover: "/whitelabel/loot-survivor/cover.png",
+    colors: {
+      primary: "#33FF33"
+    }
+  },
+  "tale-weaver": {
+    id: "tale-weaver",
+    name: "Tale Weaver",
+    icon: "/whitelabel/tale-weaver/icon.png",
+    cover: "/whitelabel/tale-weaver/cover.png",
+    colors: {
+      primary: "#fce377"
+    }
+  },
+  "realm-of-ra": {
+    id: "realm-of-ra",
+    name: "Realm of Ra",
+    icon: "/whitelabel/realm-of-ra/icon.png",
+    cover: "/whitelabel/realm-of-ra/cover.png",
+    colors: {
+      primary: "#de9534"
+    }
+  },
+  "jokers-of-neon": {
+    id: "jokers-of-neon",
+    name: "Jokers of Neon",
+    icon: "/whitelabel/jokers-of-neon/icon.png",
+    cover: "/whitelabel/jokers-of-neon/cover.png",
+    colors: {
+      primary: "#A144B2"
+    }
+  },
+  flippyflop: {
+    id: "flippyflop",
+    name: "FlippyFlop",
+    icon: "/whitelabel/flippyflop/icon.png",
+    cover: "/whitelabel/flippyflop/cover.png",
+    colors: {
+      primary: "#F38332"
+    }
+  },
+  "savage-summit": {
+    id: "savage-summit",
+    name: "Savage Summit",
+    icon: "/whitelabel/savage-summit/icon.png",
+    cover: "/whitelabel/savage-summit/cover.png",
+    colors: {
+      primary: "#fbf7da"
+    }
+  },
+  "dark-shuffle": {
+    id: "dark-shuffle",
+    name: "Dark Shuffle",
+    icon: "/whitelabel/dark-shuffle/icon.svg",
+    cover: "/whitelabel/dark-shuffle/cover.png",
+    colors: {
+      primary: "#F59100"
+    }
+  },
+  "blob-arena": {
+    id: "blob-arena",
+    name: "Blob Arena",
+    icon: "/whitelabel/blob-arena/icon.png",
+    cover: "/whitelabel/blob-arena/cover.png",
+    colors: {
+      primary: "#980f06"
+    }
+  },
+  zkube: {
+    id: "zkube",
+    name: "zKube",
+    icon: "/whitelabel/zkube/icon.png",
+    cover: "/whitelabel/zkube/cover.png",
+    colors: {
+      primary: "#5bc3e6"
+    }
+  }
+};
+
+// src/iframe/base.ts
+var IFrame = class {
+  constructor({
+    id,
+    url,
+    theme,
+    config,
+    colorMode,
+    onClose,
+    onConnect,
+    methods = {}
+  }) {
+    if (typeof document === "undefined") {
+      return;
+    }
+    url.searchParams.set(
+      "theme",
+      encodeURIComponent(
+        JSON.stringify(
+          config?.presets?.[theme ?? "cartridge"] ?? defaultPresets.cartridge
+        )
+      )
+    );
+    if (colorMode) {
+      url.searchParams.set("colorMode", colorMode);
+    }
+    this.url = url;
+    const iframe = document.createElement("iframe");
+    iframe.src = url.toString();
+    iframe.id = id;
+    iframe.style.border = "none";
+    iframe.sandbox.add("allow-forms");
+    iframe.sandbox.add("allow-popups");
+    iframe.sandbox.add("allow-scripts");
+    iframe.sandbox.add("allow-same-origin");
+    iframe.allow = "publickey-credentials-create *; publickey-credentials-get *; clipboard-write";
+    if (!!document.hasStorageAccess) {
+      iframe.sandbox.add("allow-storage-access-by-user-activation");
+    }
+    const container = document.createElement("div");
+    container.id = "controller";
+    container.style.position = "fixed";
+    container.style.height = "100%";
+    container.style.width = "100%";
+    container.style.top = "0";
+    container.style.left = "0";
+    container.style.zIndex = "10000";
+    container.style.backgroundColor = "rgba(0,0,0,0.6)";
+    container.style.display = "flex";
+    container.style.alignItems = "center";
+    container.style.justifyContent = "center";
+    container.style.visibility = "hidden";
+    container.style.opacity = "0";
+    container.style.transition = "opacity 0.2s ease";
+    container.appendChild(iframe);
+    this.iframe = iframe;
+    this.container = container;
+    connectToChild({
+      iframe: this.iframe,
+      methods: { close: () => this.close(), ...methods }
+    }).promise.then(onConnect);
+    this.resize();
+    window.addEventListener("resize", () => this.resize());
+    const observer = new MutationObserver(() => {
+      const existingController2 = document.getElementById("controller");
+      if (document.body) {
+        if (id === "controller-keychain" && !existingController2 || id === "controller-profile") {
+          document.body.appendChild(container);
+          observer.disconnect();
         }
-        super({
-            ...iframeOptions,
-            id: "controller-profile",
-            url: _url,
-        });
+      }
+    });
+    observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true
+    });
+    const existingController = document.getElementById("controller");
+    if (document.body) {
+      if (id === "controller-keychain" && !existingController || id === "controller-profile") {
+        document.body.appendChild(container);
+      }
+    }
+    this.onClose = onClose;
+  }
+  open() {
+    if (!this.container) return;
+    document.body.style.overflow = "hidden";
+    this.container.style.visibility = "visible";
+    this.container.style.opacity = "1";
+  }
+  close() {
+    if (!this.container) return;
+    this.onClose?.();
+    document.body.style.overflow = "auto";
+    this.container.style.visibility = "hidden";
+    this.container.style.opacity = "0";
+  }
+  resize() {
+    if (!this.iframe) return;
+    this.iframe.style.userSelect = "none";
+    if (window.innerWidth < 768) {
+      this.iframe.style.height = "100%";
+      this.iframe.style.width = "100%";
+      this.iframe.style.borderRadius = "0";
+      return;
+    }
+    this.iframe.style.height = "600px";
+    this.iframe.style.width = "432px";
+    this.iframe.style.borderRadius = "8px";
+  }
+};
+
+// src/iframe/profile.ts
+var ProfileIFrame = class extends IFrame {
+  constructor({
+    profileUrl,
+    rpcUrl,
+    namespace,
+    slot,
+    username,
+    tokens,
+    ...iframeOptions
+  }) {
+    const _profileUrl = profileUrl || PROFILE_URL;
+    const _url = new URL(
+      slot ? namespace ? `${_profileUrl}/account/${username}/slot/${slot}?ns=${encodeURIComponent(
+        namespace
+      )}` : `${_profileUrl}/account/${username}/slot/${slot}` : `${_profileUrl}/account/${username}`
+    );
+    _url.searchParams.set("rpcUrl", encodeURIComponent(rpcUrl));
+    if (tokens?.erc20) {
+      _url.searchParams.set(
+        "erc20",
+        encodeURIComponent(tokens.erc20.toString())
+      );
     }
-}
+    super({
+      ...iframeOptions,
+      id: "controller-profile",
+      url: _url
+    });
+  }
+};
+export {
+  ProfileIFrame
+};
 //# sourceMappingURL=profile.js.map