@seams/wallet 0.10.2 → 0.11.0

package/dist/.build-inputs.sha256

@@ -1 +1 @@
-d81ed62ded3b255b97cd863f1d3164d0b6e3a092fba5f99021a38a72eb8c2988
+6d2e6b22efe3f00372c471ea3e8fa79ef5f85a847e71a1b1fffffb303b5d669f

package/dist/esm/SeamsWeb/operations/recovery/walletRecoveryCodeBackup.js

@@ -0,0 +1,100 @@
+import { createWalletIframeSurfaceMeasurementReporter } from "../../walletIframe/host/surface-measurement-reporter.js";
+//#region src/SeamsWeb/operations/recovery/walletRecoveryCodeBackup.ts
+const CANCELLED_MESSAGE = "Recovery-code backup was cancelled before acknowledgement";
+/**
+* Shows the recovery-code backup dialog and resolves with the user's
+* acknowledgement. This wrapper owns the promise contract: an acknowledged
+* close resolves as backed-up, an unacknowledged close defers during
+* registration and cancels from the account menu, and Escape always cancels.
+*/
+async function showRecoveryCodeExperience(experience, measurementBinding = { kind: "disabled" }, options = {}) {
+	if (typeof document === "undefined") throw new Error("Wallet recovery-code backup requires a browser or a backup handler");
+	const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+	if (options.shouldCancel?.()) throw new Error(CANCELLED_MESSAGE);
+	const surfaceModule = await import("../../../core/signingEngine/uiConfirm/ui/preact/mountRecoveryCodeBackupSurface.js");
+	if (options.shouldCancel?.()) throw new Error(CANCELLED_MESSAGE);
+	let measurementReporter = null;
+	let surface = null;
+	let settled = false;
+	return await new Promise((resolve, reject) => {
+		const cleanup = () => {
+			measurementReporter?.disconnect();
+			measurementReporter = null;
+			surface?.dispose();
+			surface = null;
+			previousFocus?.focus();
+		};
+		const settle = (result) => {
+			if (settled) return;
+			settled = true;
+			cleanup();
+			if (result instanceof Error) reject(result);
+			else resolve(result);
+		};
+		const handleClose = (detail) => {
+			switch (detail.kind) {
+				case "dismissed":
+					settle(new Error(CANCELLED_MESSAGE));
+					return;
+				case "recovery_codes":
+					if (detail.acknowledged) {
+						settle({ kind: "wallet_recovery_codes_backed_up_v1" });
+						return;
+					}
+					if (experience.kind === "direct_backup" && experience.request.continuation === "registration_may_defer") {
+						settle({ kind: "wallet_recovery_code_backup_deferred_v1" });
+						return;
+					}
+					settle(new Error(CANCELLED_MESSAGE));
+					return;
+			}
+		};
+		try {
+			surface = surfaceModule.mountRecoveryCodeBackupSurface({
+				parent: document.body,
+				appearance: options.appearance,
+				experience,
+				surface: measurementBinding.kind === "wallet_iframe" ? "wallet-iframe" : "standalone",
+				onClose: handleClose,
+				onCancel: () => settle(new Error(CANCELLED_MESSAGE)),
+				onShown: (dialog) => {
+					if (settled || measurementBinding.kind !== "wallet_iframe") return;
+					measurementReporter = createWalletIframeSurfaceMeasurementReporter({
+						kind: "request_scroll_surface",
+						requestId: measurementBinding.requestId,
+						element: dialog,
+						postMeasurement: postRecoveryMeasurement.bind(null, dialog, measurementBinding.postMeasurement)
+					});
+				}
+			});
+		} catch (error) {
+			settle(error instanceof Error ? error : new Error(String(error)));
+		}
+	});
+}
+async function showWalletRecoveryCodeBackupUi(request, measurementBinding = { kind: "disabled" }) {
+	return await showRecoveryCodeExperience({
+		kind: "direct_backup",
+		request
+	}, measurementBinding);
+}
+async function showWalletRecoveryCodesUi(request, measurementBinding = { kind: "disabled" }, options = {}) {
+	return await showRecoveryCodeExperience({
+		kind: "account_menu",
+		...request
+	}, measurementBinding, options);
+}
+function postRecoveryMeasurement(dialog, postMeasurement, measurement) {
+	if (measurement.kind !== "measured_v1") throw new Error("Recovery codes require a request surface measurement");
+	postMeasurement({
+		kind: "measured_v1",
+		requestId: measurement.requestId,
+		sequence: measurement.sequence,
+		widthCssPx: dialog.dataset.seamsRecoveryStage === "recovery_codes" ? 688 : 480,
+		heightCssPx: measurement.heightCssPx
+	});
+}
+//#endregion
+export { showWalletRecoveryCodeBackupUi, showWalletRecoveryCodesUi };
+
+//# sourceMappingURL=walletRecoveryCodeBackup.js.map

package/dist/esm/SeamsWeb/walletIframe/host/ui/auth-menu/AuthMenuSurface.js

@@ -1,4 +1,5 @@
 import { isLinkedDeviceTargetEmailAddressV1 } from "../../../../../core/types/linkDevice.js";
+import "../../../../../shared-ts/src/wallet-recovery/recoveryCodes.js";
 import { demoEmailOtpCodeFromDelivery } from "../../../../../core/signingEngine/session/emailOtp/challengeDelivery.js";
 import { isAuthMenuActionReady, isAuthMenuGoogleActionReady, isAuthMenuLoadingStatus, isAuthMenuReady, resolveAuthMenuLoginAccount } from "../../auth-menu/domain.js";
 import { PadlockIcon } from "../../../../../core/signingEngine/uiConfirm/ui/preact/PadlockIcon.js";
@@ -19,8 +20,22 @@ function renderDemoEmailCode(delivery) {
 }
 const AUTH_MENU_TITLE_ID = "seams-auth-menu-title";
 const AUTH_MENU_ACCOUNT_LIST_ID = "seams-auth-menu-account-list";
-function otpCodeDigits(code) {
-	return code.padEnd(6, " ").slice(0, 6).split("");
+function otpCodeDigits(code, length = 6) {
+	return code.padEnd(length, " ").slice(0, length).split("");
+}
+function recoveryInputCharacters(code) {
+	return code.replace(/[\s\-\u2010-\u2015\u2212]/g, "").toUpperCase();
+}
+function recoveryCodeGroups(digits) {
+	const groups = [];
+	for (let index = 0; index < digits.length; index += 4) groups.push(digits.slice(index, index + 4));
+	return groups;
+}
+function renderRecoveryCodeGroup(digits, index) {
+	return /* @__PURE__ */ jsx("div", {
+		class: "seams-recovery-code-group",
+		children: digits.map(renderOtpCodeDigit)
+	}, index);
 }
 function renderOtpCodeDigit(digit) {
 	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("span", {
@@ -352,9 +367,20 @@ var AuthMenuSurface = class extends Component {
 		};
 		this.onRecoveryCodeInput = (event) => {
 			if (!(event.currentTarget instanceof HTMLInputElement)) return;
+			const viewModel = this.viewModel;
+			if (viewModel.kind !== "recovery") return;
+			const input = event.currentTarget;
+			const length = viewModel.recoveryCodeSlotCount ?? 32;
+			const raw = input.value;
+			const caret = recoveryInputCharacters(raw.slice(0, input.selectionStart ?? raw.length)).length;
+			const code = recoveryInputCharacters(raw).slice(0, length);
+			if (input.value !== code) {
+				input.value = code;
+				input.setSelectionRange(Math.min(caret, code.length), Math.min(caret, code.length));
+			}
 			this.emitIntent({
 				kind: "recovery_code_changed",
-				recoveryCode: event.currentTarget.value
+				recoveryCode: code
 			});
 		};
 		this.onRecoverySubmit = (event) => {
@@ -554,40 +580,51 @@ var AuthMenuSurface = class extends Component {
 			"aria-busy": loading ? "true" : "false",
 			tabIndex: -1,
 			onKeyDown: this.onKeydown,
-			children: [/* @__PURE__ */ jsxs("div", {
-				class: "seams-content-switcher",
-				children: [
-					/* @__PURE__ */ jsx("button", {
-						class: `seams-back-button ${loading || linkDevice || otpPrompt || registrationPrompt || recovery ? "is-visible" : ""}`,
-						type: "button",
-						"aria-label": recovery ? "Back to unlock wallet" : "Back",
-						"data-auth-menu-close": true,
-						disabled: recoveryNavigationLocked(viewModel),
-						onClick: this.onBackClick,
-						children: backIcon()
-					}),
-					recovery ? /* @__PURE__ */ jsx("div", {
-						class: "sr-only",
-						role: "status",
-						"aria-live": "polite",
-						"aria-atomic": "true",
-						children: recoveryAnnouncement(viewModel)
-					}) : null,
-					/* @__PURE__ */ jsx("div", {
-						class: "seams-content-area",
-						children: /* @__PURE__ */ jsx("div", {
-							class: "seams-content-sizer",
-							children: loading ? this.renderWaiting(viewModel) : /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
-								class: "seams-signin-menu",
-								children: /* @__PURE__ */ jsx(Fragment, { children: this.renderActiveView(viewModel) }, authViewKey(viewModel))
-							}) })
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					class: "seams-menu-origin",
+					children: [
+						/* @__PURE__ */ jsx(PadlockIcon, {}),
+						" ",
+						/* @__PURE__ */ jsx("span", { children: viewModel.hostname })
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					class: "seams-content-switcher",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							class: `seams-back-button ${loading || linkDevice || otpPrompt || registrationPrompt || recovery ? "is-visible" : ""}`,
+							type: "button",
+							"aria-label": recovery ? "Back to unlock wallet" : "Back",
+							"data-auth-menu-close": true,
+							disabled: recoveryNavigationLocked(viewModel),
+							onClick: this.onBackClick,
+							children: backIcon()
+						}),
+						recovery ? /* @__PURE__ */ jsx("div", {
+							class: "sr-only",
+							role: "status",
+							"aria-live": "polite",
+							"aria-atomic": "true",
+							children: recoveryAnnouncement(viewModel)
+						}) : null,
+						/* @__PURE__ */ jsx("div", {
+							class: "seams-content-area",
+							children: /* @__PURE__ */ jsx("div", {
+								class: "seams-content-sizer",
+								children: loading ? this.renderWaiting(viewModel) : /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
+									class: "seams-signin-menu",
+									children: /* @__PURE__ */ jsx(Fragment, { children: this.renderActiveView(viewModel) }, authViewKey(viewModel))
+								}) })
+							})
 						})
-					})
-				]
-			}), /* @__PURE__ */ jsx(AuthMenuFooter, {
-				notice: menuNotice(viewModel),
-				onRetry: this.onNoticeRetry
-			})]
+					]
+				}),
+				/* @__PURE__ */ jsx(AuthMenuFooter, {
+					notice: menuNotice(viewModel),
+					onRetry: this.onNoticeRetry
+				})
+			]
 		}) });
 	}
 	renderActiveView(viewModel) {
@@ -610,14 +647,6 @@ var AuthMenuSurface = class extends Component {
 		return /* @__PURE__ */ jsxs("div", {
 			class: "seams-menu-header",
 			children: [
-				/* @__PURE__ */ jsxs("div", {
-					class: "seams-menu-origin",
-					children: [
-						/* @__PURE__ */ jsx(PadlockIcon, {}),
-						" ",
-						/* @__PURE__ */ jsx("span", { children: viewModel.hostname })
-					]
-				}),
 				eyebrow === viewModel.heading ? null : /* @__PURE__ */ jsx("div", {
 					class: "seams-menu-eyebrow",
 					children: eyebrow
@@ -827,6 +856,9 @@ var AuthMenuSurface = class extends Component {
 	}
 	renderRecovery(viewModel) {
 		if (viewModel.stage === "enter_code") {
+			const codeLength = viewModel.recoveryCodeSlotCount ?? 32;
+			const code = recoveryInputCharacters(viewModel.recoveryCode).slice(0, codeLength);
+			const digits = otpCodeDigits(code, codeLength);
 			const statusMessage = viewModel.status.kind === "recoverable" ? viewModel.status.message : "";
 			const feedbackMessage = viewModel.recoveryCodeError ?? statusMessage;
 			const feedbackIsError = feedbackMessage.length > 0;
@@ -849,20 +881,28 @@ var AuthMenuSurface = class extends Component {
 							class: "seams-field-label",
 							for: "seams-recovery-code",
 							children: "Recovery code"
-						}), /* @__PURE__ */ jsx("input", {
-							id: "seams-recovery-code",
-							class: "seams-recovery-input seams-recovery-code-input",
-							"data-recovery-code": true,
-							name: "recoveryCode",
-							type: "text",
-							autocomplete: "one-time-code",
-							autocapitalize: "characters",
-							autocorrect: "off",
-							spellcheck: false,
-							"aria-invalid": viewModel.recoveryCodeError ? "true" : "false",
-							"aria-describedby": viewModel.recoveryCodeError ? "seams-recovery-code-feedback" : "",
-							value: viewModel.recoveryCode,
-							onInput: this.onRecoveryCodeInput
+						}), /* @__PURE__ */ jsxs("div", {
+							class: "seams-otp-code-field seams-recovery-code-field",
+							children: [/* @__PURE__ */ jsx("input", {
+								id: "seams-recovery-code",
+								class: "seams-otp-input",
+								"data-recovery-code": true,
+								name: "recoveryCode",
+								type: "text",
+								inputmode: codeLength === 16 ? "numeric" : "text",
+								autocomplete: "off",
+								autocapitalize: "characters",
+								autocorrect: "off",
+								spellcheck: false,
+								"aria-invalid": viewModel.recoveryCodeError ? "true" : "false",
+								"aria-describedby": viewModel.recoveryCodeError ? "seams-recovery-code-feedback" : void 0,
+								value: code,
+								onInput: this.onRecoveryCodeInput
+							}), /* @__PURE__ */ jsx("div", {
+								class: "seams-otp-slots seams-recovery-code-slots",
+								"aria-hidden": "true",
+								children: recoveryCodeGroups(digits).map(renderRecoveryCodeGroup)
+							})]
 						})]
 					}), /* @__PURE__ */ jsxs("div", {
 						class: "seams-secondary-actions",
@@ -991,19 +1031,35 @@ var AuthMenuSurface = class extends Component {
 			class: "seams-waiting",
 			role: "status",
 			"aria-live": "polite",
-			children: [/* @__PURE__ */ jsxs("div", {
-				class: "seams-waiting-message",
-				children: [/* @__PURE__ */ jsx("span", {
-					class: "seams-waiting-text",
-					children: waitingText
-				}), viewModel.showProgress && status.detail && status.detail !== waitingText ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("span", {
-					class: "seams-waiting-sdk-events",
-					children: status.detail
-				}) }) : null]
-			}), /* @__PURE__ */ jsx("div", {
-				"aria-label": "Loading",
-				class: "seams-spinner"
-			})]
+			children: [
+				status.illustration === "passkey" ? /* @__PURE__ */ jsx("span", {
+					class: "seams-passkey-prompt",
+					role: "img",
+					"aria-label": "Passkey authentication",
+					children: fingerprintIcon()
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					class: "seams-waiting-message",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							class: "seams-waiting-text",
+							children: waitingText
+						}),
+						status.illustration === "passkey" ? /* @__PURE__ */ jsx("span", {
+							class: "seams-passkey-instruction",
+							children: "Complete the prompt on your device."
+						}) : null,
+						viewModel.showProgress && status.detail && status.detail !== waitingText ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("span", {
+							class: "seams-waiting-sdk-events",
+							children: status.detail
+						}) }) : null
+					]
+				}),
+				status.illustration !== "passkey" ? /* @__PURE__ */ jsx("div", {
+					"aria-label": "Loading",
+					class: "seams-spinner"
+				}) : null
+			]
 		}) });
 	}
 	renderLinkDevice(viewModel) {