@tatchi-xyz/sdk 0.21.0 → 0.31.1

package/dist/esm/sdk/getDeviceNumber-y3mMtky6.js

@@ -0,0 +1,26 @@
+import { toAccountId } from "./accountIds-DVDhXwVA.js";
+
+//#region src/core/WebAuthnManager/SignerWorkerManager/getDeviceNumber.ts
+function parseDeviceNumber(value, options = {}) {
+	const deviceNumber = Number(value);
+	const min = options.min ?? 1;
+	if (!Number.isSafeInteger(deviceNumber) || deviceNumber < min) return null;
+	return deviceNumber;
+}
+/**
+* Return the deviceNumber for the last logged-in user for the given account.
+* This uses the app-state "last user" pointer only; if it does not match the
+* requested account, an error is thrown instead of silently falling back.
+*/
+async function getLastLoggedInDeviceNumber(nearAccountId, clientDB) {
+	const accountId = toAccountId(nearAccountId);
+	const last = await clientDB.getLastUser();
+	if (last && last.nearAccountId === accountId) {
+		const deviceNumber = parseDeviceNumber(last.deviceNumber, { min: 1 });
+		if (deviceNumber !== null) return deviceNumber;
+	}
+	throw new Error(`No last user session for account ${accountId}`);
+}
+
+//#endregion
+export { getLastLoggedInDeviceNumber, parseDeviceNumber };

package/dist/esm/sdk/halo-border.js

@@ -1,3 +1,3 @@
-import { HaloBorderElement, HaloBorder_default } from "./HaloBorder-D7vjXHnY.js";
+import { HaloBorderElement, HaloBorder_default } from "./HaloBorder-DYOOQFjI.js";
 
 export { HaloBorderElement, HaloBorder_default as default };

package/dist/esm/sdk/host-mode-BIUqo9hg.js

@@ -0,0 +1,44 @@
+import { W3A_EXPORT_VIEWER_IFRAME_ID } from "./tags-ByzxP7Cc.js";
+
+//#region src/core/WebAuthnManager/LitComponents/ensure-defined.ts
+const TAG_LOADERS = { [W3A_EXPORT_VIEWER_IFRAME_ID]: () => import("./iframe-host-BVt1hvOt.js") };
+/**
+* Small utility that guarantees a custom element definition exists in the
+* current runtime before creating/using it. If the tag is not yet defined,
+* it runs the provided dynamic import loader to execute the module that calls
+* customElements.define().
+*/
+async function ensureDefined(tag, loader) {
+	try {
+		if (!customElements.get(tag)) await loader();
+	} catch {}
+}
+/** Attempt to ensure a known W3A element by tag; returns true if a loader ran. */
+async function ensureKnownW3aElement(tag) {
+	try {
+		const t = (tag || "").toLowerCase();
+		const loader = TAG_LOADERS[t];
+		if (!loader) return false;
+		await ensureDefined(t, loader);
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+//#endregion
+//#region src/core/WalletIframe/host-mode.ts
+let IS_WALLET_IFRAME_HOST = false;
+function __setWalletIframeHostMode(enabled = true) {
+	IS_WALLET_IFRAME_HOST = !!enabled;
+}
+function __isWalletIframeHostMode() {
+	try {
+		const forced = globalThis?.__W3A_TEST_WALLET_IFRAME_HOST_MODE__;
+		if (typeof forced === "boolean") return forced;
+	} catch {}
+	return IS_WALLET_IFRAME_HOST;
+}
+
+//#endregion
+export { __isWalletIframeHostMode, __setWalletIframeHostMode, ensureDefined, ensureKnownW3aElement };

package/dist/esm/sdk/host-mode-CgqmYAwZ.js

@@ -0,0 +1,13 @@
+//#region src/core/WalletIframe/host-mode.ts
+let IS_WALLET_IFRAME_HOST = false;
+function __isWalletIframeHostMode() {
+	try {
+		const forced = globalThis?.__W3A_TEST_WALLET_IFRAME_HOST_MODE__;
+		if (typeof forced === "boolean") return forced;
+	} catch {}
+	return IS_WALLET_IFRAME_HOST;
+}
+
+//#endregion
+export { __isWalletIframeHostMode };
+//# sourceMappingURL=host-mode-CgqmYAwZ.js.map

package/dist/esm/sdk/host-mode-CgqmYAwZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"host-mode-CgqmYAwZ.js","names":[],"sources":["../../../src/core/WalletIframe/host-mode.ts"],"sourcesContent":["// Internal process-wide flag to mark wallet iframe host mode\nlet IS_WALLET_IFRAME_HOST = false;\n\nexport function __setWalletIframeHostMode(enabled: boolean = true): void {\n  IS_WALLET_IFRAME_HOST = !!enabled;\n}\n\nexport function __isWalletIframeHostMode(): boolean {\n  // Test-only escape hatch: allow Playwright/unit tests to force host-mode behavior\n  // without importing internal host bootstrap modules (which may be tree-shaken from dist/esm).\n  try {\n    const forced = (globalThis as any)?.__W3A_TEST_WALLET_IFRAME_HOST_MODE__;\n    if (typeof forced === 'boolean') return forced;\n  } catch { }\n  return IS_WALLET_IFRAME_HOST;\n}\n"],"mappings":";AACA,IAAI,wBAAwB;AAM5B,SAAgB,2BAAoC;AAGlD,KAAI;EACF,MAAM,SAAU,YAAoB;AACpC,MAAI,OAAO,WAAW,UAAW,QAAO;SAClC;AACR,QAAO"}

package/dist/esm/sdk/iframe-export-bootstrap.js

@@ -1,9 +1,8 @@
-import { init_validation, isBoolean, isObject, isString } from "./validation-DtLVzHDY.js";
-import { W3A_DRAWER_ID, W3A_EXPORT_KEY_VIEWER_ID } from "./tags-C2Wlhqjd.js";
-import { LitComponentEvents } from "./lit-events-C-jpeT5r.js";
+import { isBoolean, isObject, isString } from "./validation-BTq6LGPp.js";
+import { W3A_DRAWER_ID, W3A_EXPORT_KEY_VIEWER_ID } from "./tags-ByzxP7Cc.js";
+import { LitComponentEvents } from "./lit-events-Bb4tAEO2.js";
 
 //#region src/core/WebAuthnManager/LitComponents/ExportPrivateKey/iframe-export-bootstrap-script.ts
-init_validation();
 let PARENT_ORIGIN;
 function whenDefined(tag) {
 	if (window.customElements?.whenDefined) return window.customElements.whenDefined(tag).then(() => void 0);

package/dist/esm/sdk/iframe-host-BVt1hvOt.js

@@ -0,0 +1,213 @@
+import { LitElementWithProps, e, ensureExternalStyles, n, resolveEmbeddedBase, x } from "./css-loader-CAIkFQ3i.js";
+import { isObject, isString } from "./validation-BTq6LGPp.js";
+import { EXPORT_VIEWER_BUNDLE, IFRAME_EXPORT_BOOTSTRAP_MODULE, W3A_EXPORT_VIEWER_IFRAME_ID } from "./tags-ByzxP7Cc.js";
+import { dispatchLitCancel, dispatchLitConfirm, dispatchLitCopy } from "./lit-events-Bb4tAEO2.js";
+
+//#region src/core/WebAuthnManager/LitComponents/ExportPrivateKey/iframe-host.ts
+var IframeExportHost = class extends LitElementWithProps {
+	static properties = {
+		theme: { type: String },
+		variant: { type: String },
+		accountId: {
+			type: String,
+			attribute: "account-id"
+		},
+		publicKey: {
+			type: String,
+			attribute: "public-key"
+		},
+		privateKey: {
+			type: String,
+			attribute: "private-key"
+		},
+		loading: { type: Boolean },
+		errorMessage: { type: String }
+	};
+	iframeRef = e();
+	messageHandler;
+	iframeInitialized = false;
+	_bootstrapTimer = null;
+	_stylesReady = false;
+	_stylePromises = [];
+	_stylesAwaiting = null;
+	constructor() {
+		super();
+		this.theme = "dark";
+		this.variant = "drawer";
+		this.accountId = "";
+		this.publicKey = "";
+		this.privateKey = void 0;
+		this.loading = false;
+	}
+	createRenderRoot() {
+		const root = super.createRenderRoot();
+		const p = ensureExternalStyles(root, "export-iframe.css", "data-w3a-export-iframe-css");
+		this._stylePromises.push(p);
+		p.catch(() => {});
+		return root;
+	}
+	getComponentPrefix() {
+		return "export-iframe";
+	}
+	shouldUpdate(_changed) {
+		if (this._stylesReady) return true;
+		if (!this._stylesAwaiting) {
+			const settle = Promise.all(this._stylePromises).then(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r()))));
+			this._stylesAwaiting = settle.then(() => {
+				this._stylesReady = true;
+				this.requestUpdate();
+			});
+		}
+		return false;
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (!this.iframeInitialized) {
+			this.initializeIframe();
+			this.iframeInitialized = true;
+			return;
+		}
+		this.postToIframe("SET_EXPORT_DATA", {
+			theme: this.theme,
+			variant: this.variant,
+			accountId: this.accountId,
+			publicKey: this.publicKey
+		});
+		if (changed.has("loading")) this.postToIframe("SET_LOADING", !!this.loading);
+		if (changed.has("errorMessage") && typeof this.errorMessage === "string") this.postToIframe("SET_ERROR", this.errorMessage);
+		if (changed.has("privateKey") && this.privateKey) this.postToIframe("SET_PRIVATE_KEY", { privateKey: this.privateKey });
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.messageHandler) {
+			window.removeEventListener("message", this.messageHandler);
+			this.messageHandler = void 0;
+		}
+	}
+	generateIframeHtml() {
+		const base = resolveEmbeddedBase();
+		const isAbsoluteBase = /^https?:/i.test(base);
+		if (!isAbsoluteBase) try {
+			console.warn("[W3A][IframeExportHost] Embedded SDK base is not absolute. Skipping CSS preloads. Configure an absolute base so assets resolve: React → set TatchiPasskeyProvider config { iframeWallet: { walletOrigin: \"https://wallet.example.com\", sdkBasePath: \"/sdk\" } }, ");
+		} catch {}
+		const viewerBundle = EXPORT_VIEWER_BUNDLE;
+		const bootstrap = IFRAME_EXPORT_BOOTSTRAP_MODULE;
+		return `<!DOCTYPE html>
+      <html>
+        <head>
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+          ${isAbsoluteBase ? `<link rel="preload" href="${base}export-viewer.css" as="style" />` : ""}
+          ${isAbsoluteBase ? `<link rel="preload" href="${base}export-iframe.css" as="style" />` : ""}
+          <link rel="stylesheet" href="${base}wallet-service.css" />
+          <!-- Component palette/tokens for host elements (e.g., <w3a-drawer>) -->
+          ${isAbsoluteBase ? `<link rel="stylesheet" href="${base}w3a-components.css" />` : ""}
+          <!-- Ensure critical component styles (strict CSP: external only, no inline) -->
+          ${isAbsoluteBase ? `<link rel="stylesheet" href="${base}drawer.css" data-w3a-drawer-css />` : ""}
+          ${isAbsoluteBase ? `<link rel="stylesheet" href="${base}export-viewer.css" data-w3a-export-viewer-css />` : ""}
+          <script type="module" crossorigin="anonymous" src="${base}${viewerBundle}"><\/script>
+          <script type="module" crossorigin="anonymous" src="${base}${bootstrap}"><\/script>
+        </head>
+        <body>
+          <w3a-drawer id="exp" theme="dark"></w3a-drawer>
+        </body>
+      </html>`;
+	}
+	initializeIframe() {
+		const iframeEl = this.iframeRef.value;
+		if (!iframeEl) return;
+		this.setupMessageHandling();
+		iframeEl.srcdoc = this.generateIframeHtml();
+	}
+	postToIframe(type, payload) {
+		const win = this.iframeRef.value?.contentWindow;
+		if (!win) return;
+		win.postMessage({
+			type,
+			payload
+		}, "*");
+	}
+	setupMessageHandling() {
+		const onMessage = async (event) => {
+			const data = event?.data;
+			if (!isObject(data) || !isString(data.type)) return;
+			const type = data.type;
+			const payload = data.payload;
+			switch (type) {
+				case "READY":
+					this.iframeInitialized = true;
+					this.postToIframe("SET_INIT", { targetOrigin: window.location.origin });
+					this.postToIframe("SET_EXPORT_DATA", {
+						theme: this.theme,
+						variant: this.variant,
+						accountId: this.accountId,
+						publicKey: this.publicKey
+					});
+					this.postToIframe("SET_LOADING", !!this.loading);
+					if (this.errorMessage) this.postToIframe("SET_ERROR", this.errorMessage);
+					if (this.privateKey) this.postToIframe("SET_PRIVATE_KEY", { privateKey: this.privateKey });
+					return;
+				case "IFRAME_ERROR":
+				case "IFRAME_UNHANDLED_REJECTION":
+					console.error("[IframeExportHost] iframe error:", payload);
+					return;
+				case "CONFIRM":
+					dispatchLitConfirm(this);
+					this.remove();
+					window.parent?.postMessage({ type: "WALLET_UI_CLOSED" }, "*");
+					return;
+				case "CANCEL":
+					dispatchLitCancel(this);
+					this.remove();
+					window.parent?.postMessage({ type: "WALLET_UI_CLOSED" }, "*");
+					return;
+				case "COPY":
+					if (isObject(payload)) {
+						const { type: type$1, value } = payload;
+						if (isString(type$1) && (type$1 === "publicKey" || type$1 === "privateKey") && isString(value)) dispatchLitCopy(this, {
+							type: type$1,
+							value
+						});
+						else console.warn("[IframeExportHost] Ignoring COPY message with invalid payload", payload);
+					}
+					return;
+				default: return;
+			}
+		};
+		if (this.messageHandler) window.removeEventListener("message", this.messageHandler);
+		this.messageHandler = onMessage;
+		window.addEventListener("message", onMessage);
+	}
+	render() {
+		return x`
+      <div class="iframe-host">
+        <!--
+          About this ExportPrivateKey iframe:
+          - sandbox="allow-scripts allow-same-origin":
+            Allows module scripts to run while preserving the wallet origin inside
+            the iframe (no opaque origin). Keeping same-origin is required so the
+            document matches the parent Permissions-Policy allowlist (e.g.,
+            clipboard-read/write and WebAuthn) rather than being blocked as a
+            null/opaque origin.
+          - allow="clipboard-read; clipboard-write":
+            Opts in to the clipboard features at the frame level. This must be
+            used in combination with a Permissions-Policy header on the parent
+            page that allows clipboard for the wallet origin.
+          - srcdoc (set in initializeIframe):
+            Loads wallet-service.css, component tokens (w3a-components.css),
+            preloads drawer + export-viewer CSS, and imports the viewer +
+            bootstrap modules; no inline scripts/styles to satisfy strict CSP.
+        -->
+        <iframe ${n(this.iframeRef)}
+          sandbox="allow-scripts allow-same-origin"
+          allow="clipboard-read; clipboard-write"
+          ></iframe>
+      </div>
+    `;
+	}
+};
+customElements.define(W3A_EXPORT_VIEWER_IFRAME_ID, IframeExportHost);
+var iframe_host_default = IframeExportHost;
+
+//#endregion
+export { IframeExportHost, iframe_host_default as default };

package/dist/esm/sdk/iframe-host-d_rrsoyL.js

@@ -0,0 +1,212 @@
+import { isObject, isString } from "./validation-hUZgySTx.js";
+import { EXPORT_VIEWER_BUNDLE, IFRAME_EXPORT_BOOTSTRAP_MODULE, LitElementWithProps, W3A_EXPORT_VIEWER_IFRAME_ID, dispatchLitCancel, dispatchLitConfirm, dispatchLitCopy, e, ensureExternalStyles, n, resolveEmbeddedBase, x } from "./css-loader-DWW-_Vli.js";
+
+//#region src/core/WebAuthnManager/LitComponents/ExportPrivateKey/iframe-host.ts
+var IframeExportHost = class extends LitElementWithProps {
+	static properties = {
+		theme: { type: String },
+		variant: { type: String },
+		accountId: {
+			type: String,
+			attribute: "account-id"
+		},
+		publicKey: {
+			type: String,
+			attribute: "public-key"
+		},
+		privateKey: {
+			type: String,
+			attribute: "private-key"
+		},
+		loading: { type: Boolean },
+		errorMessage: { type: String }
+	};
+	iframeRef = e();
+	messageHandler;
+	iframeInitialized = false;
+	_bootstrapTimer = null;
+	_stylesReady = false;
+	_stylePromises = [];
+	_stylesAwaiting = null;
+	constructor() {
+		super();
+		this.theme = "dark";
+		this.variant = "drawer";
+		this.accountId = "";
+		this.publicKey = "";
+		this.privateKey = void 0;
+		this.loading = false;
+	}
+	createRenderRoot() {
+		const root = super.createRenderRoot();
+		const p = ensureExternalStyles(root, "export-iframe.css", "data-w3a-export-iframe-css");
+		this._stylePromises.push(p);
+		p.catch(() => {});
+		return root;
+	}
+	getComponentPrefix() {
+		return "export-iframe";
+	}
+	shouldUpdate(_changed) {
+		if (this._stylesReady) return true;
+		if (!this._stylesAwaiting) {
+			const settle = Promise.all(this._stylePromises).then(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r()))));
+			this._stylesAwaiting = settle.then(() => {
+				this._stylesReady = true;
+				this.requestUpdate();
+			});
+		}
+		return false;
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (!this.iframeInitialized) {
+			this.initializeIframe();
+			this.iframeInitialized = true;
+			return;
+		}
+		this.postToIframe("SET_EXPORT_DATA", {
+			theme: this.theme,
+			variant: this.variant,
+			accountId: this.accountId,
+			publicKey: this.publicKey
+		});
+		if (changed.has("loading")) this.postToIframe("SET_LOADING", !!this.loading);
+		if (changed.has("errorMessage") && typeof this.errorMessage === "string") this.postToIframe("SET_ERROR", this.errorMessage);
+		if (changed.has("privateKey") && this.privateKey) this.postToIframe("SET_PRIVATE_KEY", { privateKey: this.privateKey });
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.messageHandler) {
+			window.removeEventListener("message", this.messageHandler);
+			this.messageHandler = void 0;
+		}
+	}
+	generateIframeHtml() {
+		const base = resolveEmbeddedBase();
+		const isAbsoluteBase = /^https?:/i.test(base);
+		if (!isAbsoluteBase) try {
+			console.warn("[W3A][IframeExportHost] Embedded SDK base is not absolute. Skipping CSS preloads. Configure an absolute base so assets resolve: React → set TatchiPasskeyProvider config { iframeWallet: { walletOrigin: \"https://wallet.example.com\", sdkBasePath: \"/sdk\" } }, ");
+		} catch {}
+		const viewerBundle = EXPORT_VIEWER_BUNDLE;
+		const bootstrap = IFRAME_EXPORT_BOOTSTRAP_MODULE;
+		return `<!DOCTYPE html>
+      <html>
+        <head>
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+          ${isAbsoluteBase ? `<link rel="preload" href="${base}export-viewer.css" as="style" />` : ""}
+          ${isAbsoluteBase ? `<link rel="preload" href="${base}export-iframe.css" as="style" />` : ""}
+          <link rel="stylesheet" href="${base}wallet-service.css" />
+          <!-- Component palette/tokens for host elements (e.g., <w3a-drawer>) -->
+          ${isAbsoluteBase ? `<link rel="stylesheet" href="${base}w3a-components.css" />` : ""}
+          <!-- Ensure critical component styles (strict CSP: external only, no inline) -->
+          ${isAbsoluteBase ? `<link rel="stylesheet" href="${base}drawer.css" data-w3a-drawer-css />` : ""}
+          ${isAbsoluteBase ? `<link rel="stylesheet" href="${base}export-viewer.css" data-w3a-export-viewer-css />` : ""}
+          <script type="module" crossorigin="anonymous" src="${base}${viewerBundle}"><\/script>
+          <script type="module" crossorigin="anonymous" src="${base}${bootstrap}"><\/script>
+        </head>
+        <body>
+          <w3a-drawer id="exp" theme="dark"></w3a-drawer>
+        </body>
+      </html>`;
+	}
+	initializeIframe() {
+		const iframeEl = this.iframeRef.value;
+		if (!iframeEl) return;
+		this.setupMessageHandling();
+		iframeEl.srcdoc = this.generateIframeHtml();
+	}
+	postToIframe(type, payload) {
+		const win = this.iframeRef.value?.contentWindow;
+		if (!win) return;
+		win.postMessage({
+			type,
+			payload
+		}, "*");
+	}
+	setupMessageHandling() {
+		const onMessage = async (event) => {
+			const data = event?.data;
+			if (!isObject(data) || !isString(data.type)) return;
+			const type = data.type;
+			const payload = data.payload;
+			switch (type) {
+				case "READY":
+					this.iframeInitialized = true;
+					this.postToIframe("SET_INIT", { targetOrigin: window.location.origin });
+					this.postToIframe("SET_EXPORT_DATA", {
+						theme: this.theme,
+						variant: this.variant,
+						accountId: this.accountId,
+						publicKey: this.publicKey
+					});
+					this.postToIframe("SET_LOADING", !!this.loading);
+					if (this.errorMessage) this.postToIframe("SET_ERROR", this.errorMessage);
+					if (this.privateKey) this.postToIframe("SET_PRIVATE_KEY", { privateKey: this.privateKey });
+					return;
+				case "IFRAME_ERROR":
+				case "IFRAME_UNHANDLED_REJECTION":
+					console.error("[IframeExportHost] iframe error:", payload);
+					return;
+				case "CONFIRM":
+					dispatchLitConfirm(this);
+					this.remove();
+					window.parent?.postMessage({ type: "WALLET_UI_CLOSED" }, "*");
+					return;
+				case "CANCEL":
+					dispatchLitCancel(this);
+					this.remove();
+					window.parent?.postMessage({ type: "WALLET_UI_CLOSED" }, "*");
+					return;
+				case "COPY":
+					if (isObject(payload)) {
+						const { type: type$1, value } = payload;
+						if (isString(type$1) && (type$1 === "publicKey" || type$1 === "privateKey") && isString(value)) dispatchLitCopy(this, {
+							type: type$1,
+							value
+						});
+						else console.warn("[IframeExportHost] Ignoring COPY message with invalid payload", payload);
+					}
+					return;
+				default: return;
+			}
+		};
+		if (this.messageHandler) window.removeEventListener("message", this.messageHandler);
+		this.messageHandler = onMessage;
+		window.addEventListener("message", onMessage);
+	}
+	render() {
+		return x`
+      <div class="iframe-host">
+        <!--
+          About this ExportPrivateKey iframe:
+          - sandbox="allow-scripts allow-same-origin":
+            Allows module scripts to run while preserving the wallet origin inside
+            the iframe (no opaque origin). Keeping same-origin is required so the
+            document matches the parent Permissions-Policy allowlist (e.g.,
+            clipboard-read/write and WebAuthn) rather than being blocked as a
+            null/opaque origin.
+          - allow="clipboard-read; clipboard-write":
+            Opts in to the clipboard features at the frame level. This must be
+            used in combination with a Permissions-Policy header on the parent
+            page that allows clipboard for the wallet origin.
+          - srcdoc (set in initializeIframe):
+            Loads wallet-service.css, component tokens (w3a-components.css),
+            preloads drawer + export-viewer CSS, and imports the viewer +
+            bootstrap modules; no inline scripts/styles to satisfy strict CSP.
+        -->
+        <iframe ${n(this.iframeRef)}
+          sandbox="allow-scripts allow-same-origin"
+          allow="clipboard-read; clipboard-write"
+          ></iframe>
+      </div>
+    `;
+	}
+};
+customElements.define(W3A_EXPORT_VIEWER_IFRAME_ID, IframeExportHost);
+var iframe_host_default = IframeExportHost;
+
+//#endregion
+export { IframeExportHost, iframe_host_default as default };
+//# sourceMappingURL=iframe-host-d_rrsoyL.js.map

package/dist/esm/sdk/iframe-host-d_rrsoyL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iframe-host-d_rrsoyL.js","names":["createRef","type","ref"],"sources":["../../../src/core/WebAuthnManager/LitComponents/ExportPrivateKey/iframe-host.ts"],"sourcesContent":["// Iframe host for the Export Private Key viewer (drawer or modal variant)\nimport { html, type PropertyValues } from 'lit';\nimport { ref, createRef, Ref } from 'lit/directives/ref.js';\nimport { LitElementWithProps } from '../LitElementWithProps';\nimport { IFRAME_EXPORT_BOOTSTRAP_MODULE, EXPORT_VIEWER_BUNDLE } from '../tags';\nimport { resolveEmbeddedBase } from '../asset-base';\nimport { OFFLINE_EXPORT_FALLBACK } from '../../../OfflineExport/messages';\nimport type { ExportViewerVariant, ExportViewerTheme } from './viewer';\nimport { isObject, isString, isBoolean } from '@/utils/validation';\nimport { dispatchLitCancel, dispatchLitConfirm, dispatchLitCopy } from '../lit-events';\nimport { ensureExternalStyles } from '../css/css-loader';\n\ntype MessageType =\n  | 'READY'\n  | 'ETX_DEFINED'\n  | 'SET_INIT'\n  | 'SET_EXPORT_DATA'\n  | 'SET_LOADING'\n  | 'SET_ERROR'\n  | 'SET_PRIVATE_KEY'\n  | 'CONFIRM'\n  | 'CANCEL'\n  | 'COPY'\n  | 'IFRAME_ERROR'\n  | 'IFRAME_UNHANDLED_REJECTION';\n\ntype MessagePayloads = {\n  READY: undefined;\n  ETX_DEFINED: undefined;\n  SET_INIT: { targetOrigin: string };\n  SET_EXPORT_DATA: {\n    theme?: 'dark' | 'light';\n    variant?: 'drawer' | 'modal';\n    accountId: string;\n    publicKey: string;\n  };\n  SET_LOADING: boolean;\n  SET_ERROR: string;\n  SET_PRIVATE_KEY: { privateKey: string };\n  CONFIRM: undefined;\n  CANCEL: undefined;\n  COPY: { type: 'publicKey' | 'privateKey'; value: string };\n  IFRAME_ERROR: string;\n  IFRAME_UNHANDLED_REJECTION: string;\n};\n\nexport class IframeExportHost extends LitElementWithProps {\n  static properties = {\n    theme: { type: String },\n    variant: { type: String },\n    accountId: { type: String, attribute: 'account-id' },\n    publicKey: { type: String, attribute: 'public-key' },\n    privateKey: { type: String, attribute: 'private-key' },\n    loading: { type: Boolean },\n    errorMessage: { type: String },\n  } as const;\n\n  declare theme: 'dark' | 'light';\n  declare variant: 'drawer' | 'modal';\n  declare accountId: string;\n  declare publicKey: string;\n  declare privateKey?: string;\n  declare loading: boolean;\n  declare errorMessage?: string;\n\n  private iframeRef: Ref<HTMLIFrameElement> = createRef();\n  private messageHandler?: (event: MessageEvent) => void | Promise<void>;\n  private iframeInitialized = false;\n  private _bootstrapTimer: number | null = null;\n  // Styles gating to avoid FOUC: wait for export-iframe.css before first render\n  private _stylesReady = false;\n  private _stylePromises: Promise<void>[] = [];\n  private _stylesAwaiting: Promise<void> | null = null;\n\n  constructor() {\n    super();\n    this.theme = 'dark';\n    this.variant = 'drawer';\n    this.accountId = '';\n    this.publicKey = '';\n    this.privateKey = undefined;\n    this.loading = false;\n  }\n\n  protected createRenderRoot(): HTMLElement | DocumentFragment {\n    const root = super.createRenderRoot();\n    const p = ensureExternalStyles(root as ShadowRoot | DocumentFragment | HTMLElement, 'export-iframe.css', 'data-w3a-export-iframe-css');\n    this._stylePromises.push(p);\n    p.catch(() => {});\n    return root;\n  }\n\n  protected getComponentPrefix(): string { return 'export-iframe'; }\n\n  // Avoid FOUC: block first paint until external styles are applied\n  protected shouldUpdate(_changed: Map<string | number | symbol, unknown>): boolean {\n    if (this._stylesReady) return true;\n    if (!this._stylesAwaiting) {\n      const settle = Promise.all(this._stylePromises)\n        .then(() => new Promise<void>((r) => requestAnimationFrame(() => requestAnimationFrame(() => r()))));\n      this._stylesAwaiting = settle.then(() => { this._stylesReady = true; this.requestUpdate(); });\n    }\n    return false;\n  }\n\n  updated(changed: PropertyValues) {\n    super.updated(changed);\n    // Initialize iframe once; contentWindow can exist for about:blank, so use a flag\n    if (!this.iframeInitialized) {\n      this.initializeIframe();\n      this.iframeInitialized = true;\n      return;\n    }\n    // Push data on update\n    this.postToIframe('SET_EXPORT_DATA', {\n      theme: this.theme,\n      variant: this.variant,\n      accountId: this.accountId,\n      publicKey: this.publicKey,\n    });\n    if (changed.has('loading')) {\n      this.postToIframe('SET_LOADING', !!this.loading);\n    }\n    if (changed.has('errorMessage') && typeof this.errorMessage === 'string') {\n      this.postToIframe('SET_ERROR', this.errorMessage);\n    }\n    if (changed.has('privateKey') && this.privateKey) {\n      this.postToIframe('SET_PRIVATE_KEY', { privateKey: this.privateKey });\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.messageHandler) {\n      window.removeEventListener('message', this.messageHandler);\n      this.messageHandler = undefined;\n    }\n  }\n\n  private generateIframeHtml(): string {\n    const base = resolveEmbeddedBase();\n    const isAbsoluteBase = /^https?:/i.test(base);\n    if (!isAbsoluteBase) {\n      try {\n        console.warn(\n          '[W3A][IframeExportHost] Embedded SDK base is not absolute. Skipping CSS preloads. ' +\n          'Configure an absolute base so assets resolve: React → set TatchiPasskeyProvider config ' +\n          '{ iframeWallet: { walletOrigin: \"https://wallet.example.com\", sdkBasePath: \"/sdk\" } }, '\n        );\n      } catch {}\n    }\n    const viewerBundle = EXPORT_VIEWER_BUNDLE;\n    const bootstrap = IFRAME_EXPORT_BOOTSTRAP_MODULE;\n    return `<!DOCTYPE html>\n      <html>\n        <head>\n          <meta charset=\"utf-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\" />\n          ${isAbsoluteBase ? `<link rel=\"preload\" href=\"${base}export-viewer.css\" as=\"style\" />` : ''}\n          ${isAbsoluteBase ? `<link rel=\"preload\" href=\"${base}export-iframe.css\" as=\"style\" />` : ''}\n          <link rel=\"stylesheet\" href=\"${base}wallet-service.css\" />\n          <!-- Component palette/tokens for host elements (e.g., <w3a-drawer>) -->\n          ${isAbsoluteBase ? `<link rel=\"stylesheet\" href=\"${base}w3a-components.css\" />` : ''}\n          <!-- Ensure critical component styles (strict CSP: external only, no inline) -->\n          ${isAbsoluteBase ? `<link rel=\"stylesheet\" href=\"${base}drawer.css\" data-w3a-drawer-css />` : ''}\n          ${isAbsoluteBase ? `<link rel=\"stylesheet\" href=\"${base}export-viewer.css\" data-w3a-export-viewer-css />` : ''}\n          <script type=\"module\" crossorigin=\"anonymous\" src=\"${base}${viewerBundle}\"></script>\n          <script type=\"module\" crossorigin=\"anonymous\" src=\"${base}${bootstrap}\"></script>\n        </head>\n        <body>\n          <w3a-drawer id=\"exp\" theme=\"dark\"></w3a-drawer>\n        </body>\n      </html>`;\n  }\n\n  private initializeIframe() {\n    const iframeEl = this.iframeRef.value;\n    if (!iframeEl) return;\n    this.setupMessageHandling();\n    iframeEl.srcdoc = this.generateIframeHtml();\n  }\n\n  private postToIframe<T extends MessageType>(type: T, payload?: MessagePayloads[T]) {\n    const win = this.iframeRef.value?.contentWindow;\n    if (!win) return;\n    win.postMessage({ type, payload }, '*');\n  }\n\n  private setupMessageHandling() {\n    const onMessage = async (event: MessageEvent) => {\n      const data = event?.data;\n      if (!isObject(data) || !isString((data as { type?: unknown }).type)) return;\n      const type = (data as { type?: string }).type as MessageType;\n      const payload = (data as { payload?: unknown }).payload;\n      switch (type) {\n        case 'READY': {\n          // Mark initialized in case parent missed initial flag set\n          this.iframeInitialized = true;\n          // Push init and initial data\n          this.postToIframe('SET_INIT', { targetOrigin: window.location.origin });\n          this.postToIframe('SET_EXPORT_DATA', {\n            theme: this.theme,\n            variant: this.variant,\n            accountId: this.accountId,\n            publicKey: this.publicKey,\n          });\n          this.postToIframe('SET_LOADING', !!this.loading);\n          if (this.errorMessage) this.postToIframe('SET_ERROR', this.errorMessage);\n          if (this.privateKey) this.postToIframe('SET_PRIVATE_KEY', { privateKey: this.privateKey });\n          return;\n        }\n        case 'IFRAME_ERROR':\n        case 'IFRAME_UNHANDLED_REJECTION': {\n          console.error('[IframeExportHost] iframe error:', payload);\n          return;\n        }\n        case 'CONFIRM': {\n          dispatchLitConfirm(this);\n          // Close viewer and notify parent to contract overlay\n          this.remove();\n          window.parent?.postMessage({ type: 'WALLET_UI_CLOSED' }, '*');\n          return;\n        }\n        case 'CANCEL': {\n          dispatchLitCancel(this);\n          // Child waits for transitionend before posting CANCEL, so it's safe to remove immediately\n          this.remove();\n          // Notify parent app (outside wallet iframe) to contract overlay\n          window.parent?.postMessage({ type: 'WALLET_UI_CLOSED' }, '*');\n          return;\n        }\n        case 'COPY': {\n          if (isObject(payload)) {\n            const { type, value } = payload as Partial<{ type: unknown; value: unknown }>;\n            if (isString(type) && (type === 'publicKey' || type === 'privateKey') && isString(value)) {\n              dispatchLitCopy(this, { type, value });\n            } else {\n              console.warn('[IframeExportHost] Ignoring COPY message with invalid payload', payload);\n            }\n          }\n          return;\n        }\n        default:\n          return;\n      }\n    };\n\n    if (this.messageHandler) window.removeEventListener('message', this.messageHandler);\n    this.messageHandler = onMessage;\n    window.addEventListener('message', onMessage);\n  }\n\n  render() {\n    return html`\n      <div class=\"iframe-host\">\n        <!--\n          About this ExportPrivateKey iframe:\n          - sandbox=\"allow-scripts allow-same-origin\":\n            Allows module scripts to run while preserving the wallet origin inside\n            the iframe (no opaque origin). Keeping same-origin is required so the\n            document matches the parent Permissions-Policy allowlist (e.g.,\n            clipboard-read/write and WebAuthn) rather than being blocked as a\n            null/opaque origin.\n          - allow=\"clipboard-read; clipboard-write\":\n            Opts in to the clipboard features at the frame level. This must be\n            used in combination with a Permissions-Policy header on the parent\n            page that allows clipboard for the wallet origin.\n          - srcdoc (set in initializeIframe):\n            Loads wallet-service.css, component tokens (w3a-components.css),\n            preloads drawer + export-viewer CSS, and imports the viewer +\n            bootstrap modules; no inline scripts/styles to satisfy strict CSP.\n        -->\n        <iframe ${ref(this.iframeRef)}\n          sandbox=\"allow-scripts allow-same-origin\"\n          allow=\"clipboard-read; clipboard-write\"\n          ></iframe>\n      </div>\n    `;\n  }\n}\n\n// Strongly-typed element shape for 'w3a-export-viewer-iframe'\nexport type ExportViewerIframeElement = HTMLElement & {\n  theme?: ExportViewerTheme;\n  variant?: ExportViewerVariant;\n  accountId?: string;\n  publicKey?: string;\n  privateKey?: string;\n  loading?: boolean;\n  errorMessage?: string;\n};\n\nimport { W3A_EXPORT_VIEWER_IFRAME_ID } from '../tags';\ncustomElements.define(W3A_EXPORT_VIEWER_IFRAME_ID, IframeExportHost);\n\nexport default IframeExportHost;\n"],"mappings":"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"}