@seams/wallet 0.15.6 → 0.18.0

package/dist/esm/core/signingEngine/uiConfirm/ui/preact/TransactionTree.js

@@ -1,3 +1,5 @@
+import { walletDisplayText } from "../../../../ui/messages.js";
+import { WalletLocaleContext, WalletText } from "./WalletLocale.js";
 import { announceClampedSurfaceResize } from "../confirm-surface-resize.js";
 import { TransactionLabel, transactionLabelTitle } from "./TransactionLabel.js";
 import { copySurfaceText } from "./clipboard.js";
@@ -55,123 +57,20 @@ function TransactionTree(props) {
 	});
 }
 var TransactionNode = class extends Component {
-	constructor(..._args) {
-		super(..._args);
-		this.state = {
-			mode: this.props.node.contentVariants?.defaultMode === "raw" ? "raw" : "decoded",
-			copied: false
-		};
-		this.id = `seams-tree-node-${++nextNodeId}`;
-		this.details = createRef();
-		this.shell = createRef();
-		this.disposed = false;
-		this.copiedTimer = null;
-		this.frame = null;
-		this.motionTimer = null;
-		this.motion = null;
-		this.modeHeight = null;
-		this.setHeight = (height) => {
-			if (this.disposed) return;
-			this.props.styles.setDynamicDeclarations(this.id, `#${this.id}`, { "--seams-tree__anim-target": `${height}px` });
-		};
-		this.releaseHeight = () => {
-			this.props.styles.deleteDynamicRule(this.id);
-		};
-		this.clearCopied = () => {
-			this.copiedTimer = null;
-			if (!this.disposed) this.setState({ copied: false });
-		};
-		this.copy = async (event) => {
-			event.preventDefault();
-			event.stopPropagation();
-			const value = this.props.node.copyValue;
-			if (!value) return;
-			const root = event.currentTarget.closest(".seams-tx-tree");
-			if (!root) return;
-			try {
-				if (!await copySurfaceText(root, value)) return;
-				if (this.disposed) return;
-				if (this.copiedTimer !== null) clearTimeout(this.copiedTimer);
-				this.setState({ copied: true });
-				this.copiedTimer = setTimeout(this.clearCopied, 2e3);
-				this.props.onCopy?.(value);
-			} catch {}
-		};
-		this.toggleMode = (event) => {
-			event.preventDefault();
-			event.stopPropagation();
-			if (!hasContentVariants(this.props.node)) return;
-			if (this.shell.current) {
-				this.modeHeight = this.shell.current.getBoundingClientRect().height;
-				this.setHeight(this.modeHeight);
-				this.shell.current.classList.add(...drivenClasses);
-			}
-			this.setState({ mode: this.state.mode === "decoded" ? "raw" : "decoded" });
-		};
-		this.toggle = (event) => {
-			if (event.target.closest("a, button")) {
-				event.stopPropagation();
-				return;
-			}
-			event.preventDefault();
-			event.stopPropagation();
-			const details = this.details.current;
-			if (!details || this.motion) return;
-			const body = details.querySelector(":scope > .folder-children");
-			const open = !details.open;
-			const reduced = details.ownerDocument.defaultView.matchMedia("(prefers-reduced-motion: reduce)").matches;
-			if (!body || reduced) {
-				details.open = open;
-				this.props.onToggle?.(this.props.node.id, open);
-				return;
-			}
-			this.motion = {
-				body,
-				open
-			};
-			const height = open ? 0 : body.getBoundingClientRect().height;
-			this.setHeight(height);
-			body.classList.add("anim-h", "anim-h-active", "anim-h-hold");
-			details.open = true;
-			body.offsetHeight;
-			this.frame = details.ownerDocument.defaultView.requestAnimationFrame(this.startMotion);
-		};
-		this.startMotion = () => {
-			this.frame = null;
-			if (!this.motion || this.disposed) return;
-			const { body, open } = this.motion;
-			const fromCssPx = body.getBoundingClientRect().height;
-			const toCssPx = open ? body.scrollHeight : 0;
-			if (announceClampedSurfaceResize({
-				reason: this.props.node.id,
-				element: body,
-				drivenClasses,
-				fromCssPx,
-				toCssPx,
-				setHeightCssPx: this.setHeight,
-				onSettled: this.finishMotion
-			})) return;
-			body.addEventListener("transitionend", this.onTransitionEnd);
-			body.classList.remove("anim-h-hold");
-			this.setHeight(toCssPx);
-			this.motionTimer = setTimeout(this.finishMotion, open ? 200 : 250);
-		};
-		this.onTransitionEnd = (event) => {
-			if (event.target === this.motion?.body && event.propertyName === "height") this.finishMotion();
-		};
-		this.finishMotion = () => {
-			if (this.disposed || !this.motion) return;
-			const { body, open } = this.motion;
-			this.motion = null;
-			if (this.motionTimer !== null) clearTimeout(this.motionTimer);
-			this.motionTimer = null;
-			body.removeEventListener("transitionend", this.onTransitionEnd);
-			body.classList.remove(...motionClasses);
-			if (this.details.current) this.details.current.open = open;
-			this.releaseHeight();
-			this.props.onToggle?.(this.props.node.id, open);
-		};
-	}
+	static contextType = WalletLocaleContext;
+	state = {
+		mode: this.props.node.contentVariants?.defaultMode === "raw" ? "raw" : "decoded",
+		copied: false
+	};
+	id = `seams-tree-node-${++nextNodeId}`;
+	details = createRef();
+	shell = createRef();
+	disposed = false;
+	copiedTimer = null;
+	frame = null;
+	motionTimer = null;
+	motion = null;
+	modeHeight = null;
 	componentDidUpdate(previous) {
 		if (previous.styles !== this.props.styles) previous.styles.deleteDynamicRule(this.id);
 		if (this.modeHeight !== null && this.shell.current) {
@@ -204,6 +103,107 @@ var TransactionNode = class extends Component {
 		this.motion = null;
 		this.releaseHeight();
 	}
+	setHeight = (height) => {
+		if (this.disposed) return;
+		this.props.styles.setDynamicDeclarations(this.id, `#${this.id}`, { "--seams-tree__anim-target": `${height}px` });
+	};
+	releaseHeight = () => {
+		this.props.styles.deleteDynamicRule(this.id);
+	};
+	clearCopied = () => {
+		this.copiedTimer = null;
+		if (!this.disposed) this.setState({ copied: false });
+	};
+	copy = async (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		const value = this.props.node.copyValue;
+		if (!value) return;
+		const root = event.currentTarget.closest(".seams-tx-tree");
+		if (!root) return;
+		try {
+			if (!await copySurfaceText(root, value)) return;
+			if (this.disposed) return;
+			if (this.copiedTimer !== null) clearTimeout(this.copiedTimer);
+			this.setState({ copied: true });
+			this.copiedTimer = setTimeout(this.clearCopied, 2e3);
+			this.props.onCopy?.(value);
+		} catch {}
+	};
+	toggleMode = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!hasContentVariants(this.props.node)) return;
+		if (this.shell.current) {
+			this.modeHeight = this.shell.current.getBoundingClientRect().height;
+			this.setHeight(this.modeHeight);
+			this.shell.current.classList.add(...drivenClasses);
+		}
+		this.setState({ mode: this.state.mode === "decoded" ? "raw" : "decoded" });
+	};
+	toggle = (event) => {
+		if (event.target.closest("a, button")) {
+			event.stopPropagation();
+			return;
+		}
+		event.preventDefault();
+		event.stopPropagation();
+		const details = this.details.current;
+		if (!details || this.motion) return;
+		const body = details.querySelector(":scope > .folder-children");
+		const open = !details.open;
+		const reduced = details.ownerDocument.defaultView.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		if (!body || reduced) {
+			details.open = open;
+			this.props.onToggle?.(this.props.node.id, open);
+			return;
+		}
+		this.motion = {
+			body,
+			open
+		};
+		const height = open ? 0 : body.getBoundingClientRect().height;
+		this.setHeight(height);
+		body.classList.add("anim-h", "anim-h-active", "anim-h-hold");
+		details.open = true;
+		body.offsetHeight;
+		this.frame = details.ownerDocument.defaultView.requestAnimationFrame(this.startMotion);
+	};
+	startMotion = () => {
+		this.frame = null;
+		if (!this.motion || this.disposed) return;
+		const { body, open } = this.motion;
+		const fromCssPx = body.getBoundingClientRect().height;
+		const toCssPx = open ? body.scrollHeight : 0;
+		if (announceClampedSurfaceResize({
+			reason: this.props.node.id,
+			element: body,
+			drivenClasses,
+			fromCssPx,
+			toCssPx,
+			setHeightCssPx: this.setHeight,
+			onSettled: this.finishMotion
+		})) return;
+		body.addEventListener("transitionend", this.onTransitionEnd);
+		body.classList.remove("anim-h-hold");
+		this.setHeight(toCssPx);
+		this.motionTimer = setTimeout(this.finishMotion, open ? 200 : 250);
+	};
+	onTransitionEnd = (event) => {
+		if (event.target === this.motion?.body && event.propertyName === "height") this.finishMotion();
+	};
+	finishMotion = () => {
+		if (this.disposed || !this.motion) return;
+		const { body, open } = this.motion;
+		this.motion = null;
+		if (this.motionTimer !== null) clearTimeout(this.motionTimer);
+		this.motionTimer = null;
+		body.removeEventListener("transitionend", this.onTransitionEnd);
+		body.classList.remove(...motionClasses);
+		if (this.details.current) this.details.current.open = open;
+		this.releaseHeight();
+		this.props.onToggle?.(this.props.node.id, open);
+	};
 	label(chevron) {
 		const node = this.props.node;
 		return /* @__PURE__ */ jsxs("span", {
@@ -213,7 +213,7 @@ var TransactionNode = class extends Component {
 				chevron && !node.hideChevron && /* @__PURE__ */ jsx(Chevron, {}),
 				/* @__PURE__ */ jsx("span", {
 					class: "label-text",
-					title: transactionLabelTitle(node),
+					title: walletDisplayText(this.context, transactionLabelTitle(node)),
 					children: /* @__PURE__ */ jsx(TransactionLabel, {
 						node,
 						explorers: this.props.explorers
@@ -224,7 +224,7 @@ var TransactionNode = class extends Component {
 					class: "copy-badge",
 					"data-copied": String(this.state.copied),
 					onClick: this.copy,
-					title: this.state.copied ? "Copied" : "Copy",
+					title: walletDisplayText(this.context, this.state.copied ? "Copied" : "Copy"),
 					children: this.state.copied ? "copied" : "copy"
 				})
 			]
@@ -261,10 +261,10 @@ var TransactionNode = class extends Component {
 						children: [variants && /* @__PURE__ */ jsx("button", {
 							type: "button",
 							class: "file-content-mode-toggle",
-							title: `Show ${toggleLabel}`,
-							"aria-label": `Show ${toggleLabel}`,
+							title: walletDisplayText(this.context, `Show ${toggleLabel}`),
+							"aria-label": walletDisplayText(this.context, `Show ${toggleLabel}`),
 							onClick: this.toggleMode,
-							children: toggleLabel
+							children: /* @__PURE__ */ jsx(WalletText, { copy: toggleLabel })
 						}), /* @__PURE__ */ jsx("div", {
 							class: "file-content",
 							children: content

package/dist/esm/core/signingEngine/uiConfirm/ui/preact/WalletLocale.js

@@ -0,0 +1,24 @@
+import { walletDisplayText, walletText } from "../../../../ui/messages.js";
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+import { jsx } from "preact/jsx-runtime";
+//#region src/core/signingEngine/uiConfirm/ui/preact/WalletLocale.tsx
+/** @jsxImportSource preact */
+const WalletLocaleContext = createContext("en");
+function useWalletLocale() {
+	return useContext(WalletLocaleContext);
+}
+function withWalletLocale(locale, children) {
+	return /* @__PURE__ */ jsx(WalletLocaleContext.Provider, {
+		value: locale,
+		children
+	});
+}
+function WalletText(props) {
+	const locale = useWalletLocale();
+	return props.message === void 0 ? walletDisplayText(locale, props.copy) : walletText(locale, props.message, props.values);
+}
+//#endregion
+export { WalletLocaleContext, WalletText, useWalletLocale, withWalletLocale };
+
+//# sourceMappingURL=WalletLocale.js.map

package/dist/esm/core/signingEngine/uiConfirm/ui/preact/email-otp-session.js

@@ -1,89 +1,30 @@
 //#region src/core/signingEngine/uiConfirm/ui/preact/email-otp-session.ts
 var EmailOtpSession = class {
+	codeState = {
+		kind: "editing",
+		code: ""
+	};
+	resendState = {
+		kind: "available",
+		label: "Resend code"
+	};
+	error = "";
+	countdown = null;
+	options;
 	constructor(options) {
+		this.options = options;
+	}
+	input = (rawValue) => {
+		if (this.codeState.kind !== "editing") return;
+		const code = rawValue.replace(/\D/g, "").slice(0, 6);
+		this.error = "";
 		this.codeState = {
 			kind: "editing",
-			code: ""
-		};
-		this.resendState = {
-			kind: "available",
-			label: "Resend code"
-		};
-		this.error = "";
-		this.countdown = null;
-		this.input = (rawValue) => {
-			if (this.codeState.kind !== "editing") return;
-			const code = rawValue.replace(/\D/g, "").slice(0, 6);
-			this.error = "";
-			this.codeState = {
-				kind: "editing",
-				code
-			};
-			if (code.length === 6) this.confirm();
-			else this.publish();
-		};
-		this.submit = () => {
-			if (this.codeState.kind !== "fading") return;
-			const code = this.codeState.code;
-			this.codeState = {
-				kind: "submitting",
-				code
-			};
-			this.publish();
-			if (!this.isDisposed()) this.options.onSubmit(code);
-		};
-		this.resend = async () => {
-			if (this.codeState.kind !== "editing" || this.resendState.kind !== "available") return;
-			const action = this.options.resend;
-			if (!action) return;
-			const until = Date.now() + action.cooldownMs;
-			const pending = {
-				kind: "sending",
-				until
-			};
-			this.resendState = pending;
-			this.error = "";
-			this.publish();
-			if (this.isDisposed()) return;
-			let result;
-			try {
-				result = await action.send();
-			} catch {
-				result = {
-					kind: "failed",
-					message: "Could not send code."
-				};
-			}
-			if (this.isDisposed() || this.resendState !== pending) return;
-			const label = result.kind === "sent" ? "Code sent" : "Resend code";
-			if (result.kind === "failed") this.error = result.message;
-			if (Date.now() >= until) this.resendState = {
-				kind: "available",
-				label
-			};
-			else {
-				this.resendState = {
-					kind: "cooldown",
-					until,
-					label
-				};
-				this.countdown = setInterval(this.tick, 250);
-			}
-			this.publish();
-		};
-		this.tick = () => {
-			if (this.resendState.kind !== "cooldown") return;
-			if (Date.now() >= this.resendState.until) {
-				this.resendState = {
-					kind: "available",
-					label: this.resendState.label
-				};
-				this.clearCountdown();
-			}
-			this.publish();
+			code
 		};
-		this.options = options;
-	}
+		if (code.length === 6) this.confirm();
+		else this.publish();
+	};
 	confirm() {
 		if (this.codeState.kind !== "editing") return "ignored";
 		const code = this.codeState.code;
@@ -101,6 +42,16 @@ var EmailOtpSession = class {
 		this.publish();
 		return "accepted";
 	}
+	submit = () => {
+		if (this.codeState.kind !== "fading") return;
+		const code = this.codeState.code;
+		this.codeState = {
+			kind: "submitting",
+			code
+		};
+		this.publish();
+		if (!this.isDisposed()) this.options.onSubmit(code);
+	};
 	retry(message) {
 		if (this.codeState.kind === "disposed") return;
 		this.cancelFade();
@@ -130,6 +81,56 @@ var EmailOtpSession = class {
 				return;
 		}
 	}
+	resend = async () => {
+		if (this.codeState.kind !== "editing" || this.resendState.kind !== "available") return;
+		const action = this.options.resend;
+		if (!action) return;
+		const until = Date.now() + action.cooldownMs;
+		const pending = {
+			kind: "sending",
+			until
+		};
+		this.resendState = pending;
+		this.error = "";
+		this.publish();
+		if (this.isDisposed()) return;
+		let result;
+		try {
+			result = await action.send();
+		} catch {
+			result = {
+				kind: "failed",
+				message: "Could not send code."
+			};
+		}
+		if (this.isDisposed() || this.resendState !== pending) return;
+		const label = result.kind === "sent" ? "Code sent" : "Resend code";
+		if (result.kind === "failed") this.error = result.message;
+		if (Date.now() >= until) this.resendState = {
+			kind: "available",
+			label
+		};
+		else {
+			this.resendState = {
+				kind: "cooldown",
+				until,
+				label
+			};
+			this.countdown = setInterval(this.tick, 250);
+		}
+		this.publish();
+	};
+	tick = () => {
+		if (this.resendState.kind !== "cooldown") return;
+		if (Date.now() >= this.resendState.until) {
+			this.resendState = {
+				kind: "available",
+				label: this.resendState.label
+			};
+			this.clearCountdown();
+		}
+		this.publish();
+	};
 	isDisposed() {
 		return this.codeState.kind === "disposed";
 	}

package/dist/esm/core/signingEngine/uiConfirm/ui/preact/mountConfirmationSurface.js

@@ -1,4 +1,5 @@
 import { appearanceTokenCssRule } from "../appearance-token-vars.js";
+import { withWalletLocale } from "./WalletLocale.js";
 import { PadlockIcon } from "./PadlockIcon.js";
 import { confirmationDocumentStyles } from "./confirmation-styles.js";
 import { ConfirmationContent } from "./ConfirmationContent.js";
@@ -34,45 +35,21 @@ function captureReceiptAnchors(surface) {
 }
 let nextSurfaceId = 0;
 var MountedConfirmationSurface = class {
-	constructor(input) {
-		this.receipt = null;
+	element;
+	styles;
+	presentation;
+	state;
+	receipt = null;
+	receiptMotion = [];
+	receiptShell = null;
+	clearReceiptMotion = () => {
+		for (const animation of this.receiptMotion) animation.cancel();
 		this.receiptMotion = [];
+		this.receiptShell?.remove();
 		this.receiptShell = null;
-		this.clearReceiptMotion = () => {
-			for (const animation of this.receiptMotion) animation.cancel();
-			this.receiptMotion = [];
-			this.receiptShell?.remove();
-			this.receiptShell = null;
-			this.element.removeAttribute("data-receipt-morphing");
-		};
-		this.dispose = () => {
-			if (this.state.kind === "disposed") return;
-			const onClosed = this.state.onClosed;
-			this.remove();
-			onClosed();
-		};
-		this.cancel = () => {
-			if (this.state.kind !== "mounted") return;
-			if (this.receipt) {
-				if (receiptIsPending(this.receipt.state)) this.receipt.onView("toast");
-				else this.receipt.onDismiss();
-				return;
-			}
-			const content = this.state.model.content;
-			if (content.kind === "registration") content.registration.onCancel();
-			else content.transaction.onCancel();
-		};
-		this.confirm = () => {
-			if (this.state.kind !== "mounted") return;
-			const content = this.state.model.content;
-			const decision = content.kind === "registration" ? content.registration.decision : content.transaction.decision;
-			if (decision.kind === "ready") decision.onConfirm();
-		};
-		this.submitOtp = (code, challengeId) => {
-			if (this.state.kind !== "mounted") return;
-			const content = this.state.model.content;
-			if (content.kind === "transaction" && content.prompt.kind === "email") content.prompt.email.onSubmit(code, challengeId);
-		};
+		this.element.removeAttribute("data-receipt-morphing");
+	};
+	constructor(input) {
 		const document = input.parent.ownerDocument;
 		this.styles = confirmationDocumentStyles(document);
 		this.presentation = {
@@ -103,6 +80,7 @@ var MountedConfirmationSurface = class {
 		this.state.model = model;
 		this.element.dataset.confirmationKind = model.content.kind;
 		this.element.dataset.seamsConfirmReady = String(model.content.kind === "transaction" && model.content.transaction.decision.kind === "ready");
+		this.element.lang = model.appearance.locale ?? "en";
 		this.element.dataset.theme = model.appearance.theme.mode;
 		this.styles.setDynamicRule(this.element.id, appearanceTokenCssRule(this.element.id, model.appearance));
 		this.renderSurface();
@@ -196,6 +174,12 @@ var MountedConfirmationSurface = class {
 			morph.onfinish = this.clearReceiptMotion;
 		}
 	}
+	dispose = () => {
+		if (this.state.kind === "disposed") return;
+		const onClosed = this.state.onClosed;
+		this.remove();
+		onClosed();
+	};
 	remove() {
 		this.clearReceiptMotion();
 		this.state = { kind: "disposed" };
@@ -204,6 +188,28 @@ var MountedConfirmationSurface = class {
 		this.styles.deleteDynamicRule(this.element.id);
 		this.element.remove();
 	}
+	cancel = () => {
+		if (this.state.kind !== "mounted") return;
+		if (this.receipt) {
+			if (receiptIsPending(this.receipt.state)) this.receipt.onView("toast");
+			else this.receipt.onDismiss();
+			return;
+		}
+		const content = this.state.model.content;
+		if (content.kind === "registration") content.registration.onCancel();
+		else content.transaction.onCancel();
+	};
+	confirm = () => {
+		if (this.state.kind !== "mounted") return;
+		const content = this.state.model.content;
+		const decision = content.kind === "registration" ? content.registration.decision : content.transaction.decision;
+		if (decision.kind === "ready") decision.onConfirm();
+	};
+	submitOtp = (code, challengeId) => {
+		if (this.state.kind !== "mounted") return;
+		const content = this.state.model.content;
+		if (content.kind === "transaction" && content.prompt.kind === "email") content.prompt.email.onSubmit(code, challengeId);
+	};
 	renderSurface() {
 		const state = this.state;
 		if (state.kind === "disposed") return;
@@ -220,16 +226,16 @@ var MountedConfirmationSurface = class {
 		});
 		const label = source.kind === "registration" ? source.registration.heading : source.header.heading;
 		if (this.receipt || this.presentation.variant === "modal") {
-			render(/* @__PURE__ */ jsx(ConfirmationModal, {
+			render(withWalletLocale(state.model.appearance.locale ?? "en", /* @__PURE__ */ jsx(ConfirmationModal, {
 				context: this.receipt ? "wallet-iframe" : this.presentation.context,
 				label,
 				onCancel: this.cancel,
 				children: content
-			}), this.element);
+			})), this.element);
 			return;
 		}
 		const decision = source.kind === "registration" ? source.registration.decision : source.transaction.decision;
-		render(/* @__PURE__ */ jsx(ConfirmationDrawer, {
+		render(withWalletLocale(state.model.appearance.locale ?? "en", /* @__PURE__ */ jsx(ConfirmationDrawer, {
 			context: this.presentation.context,
 			label,
 			origin: source.kind === "transaction" && source.header.website.kind === "ready" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PadlockIcon, {}), source.header.website.text] }) : void 0,
@@ -244,7 +250,7 @@ var MountedConfirmationSurface = class {
 			},
 			onCancel: this.cancel,
 			children: content
-		}), this.element);
+		})), this.element);
 	}
 	contentModel(source, closing) {
 		switch (source.kind) {

package/dist/esm/core/signingEngine/uiConfirm/ui/preact/mountRecoveryCodeBackupSurface.js

@@ -1,4 +1,5 @@
 import { appearanceTokenCssRule } from "../appearance-token-vars.js";
+import { withWalletLocale } from "./WalletLocale.js";
 import { confirmationDocumentStyles } from "./confirmation-styles.js";
 import { RecoveryCodeBackupSurface } from "./RecoveryCodeBackupSurface.js";
 import { render } from "preact";
@@ -7,21 +8,18 @@ import { jsx } from "preact/jsx-runtime";
 /** @jsxImportSource preact */
 let nextRecoverySurfaceId = 0;
 var MountedRecoveryCodeBackupSurface = class {
+	element;
+	dialog;
+	document;
+	input;
+	state = "mounted";
 	constructor(input) {
-		this.state = "mounted";
-		this.handleCancel = (event) => {
-			event.preventDefault();
-			this.input.onCancel();
-		};
-		this.handleStageChange = (stage) => {
-			if (this.state === "disposed") return;
-			this.dialog.dataset.seamsRecoveryStage = stage;
-		};
 		this.input = input;
 		this.document = input.parent.ownerDocument;
 		this.element = this.document.createElement("div");
 		this.element.id = `seams-recovery-surface-${++nextRecoverySurfaceId}`;
 		this.element.className = "seams-wallet-ui seams-recovery-code-backup-host";
+		this.element.lang = input.appearance?.locale ?? "en";
 		this.element.dataset.seamsRecoverySurface = input.surface;
 		if (input.appearance) {
 			this.element.dataset.theme = input.appearance.theme.mode;
@@ -63,12 +61,20 @@ var MountedRecoveryCodeBackupSurface = class {
 	render(experience) {
 		if (this.state === "disposed") return;
 		this.element.dataset.seamsRecoveryEntry = experience.kind;
-		render(/* @__PURE__ */ jsx(RecoveryCodeBackupSurface, {
+		render(withWalletLocale(this.input.appearance?.locale ?? "en", /* @__PURE__ */ jsx(RecoveryCodeBackupSurface, {
 			experience,
 			onClose: this.input.onClose,
 			onStageChange: this.handleStageChange
-		}), this.dialog);
+		})), this.dialog);
 	}
+	handleCancel = (event) => {
+		event.preventDefault();
+		this.input.onCancel();
+	};
+	handleStageChange = (stage) => {
+		if (this.state === "disposed") return;
+		this.dialog.dataset.seamsRecoveryStage = stage;
+	};
 	focusTitle() {
 		this.dialog.querySelector(".recovery-backup-title")?.focus();
 	}