@seams/wallet 0.17.0 → 0.18.0

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

@@ -1,8 +1,10 @@
 import { isLinkedDeviceTargetEmailAddressV1 } from "../../../../../core/types/linkDevice.js";
-import { EMAIL_OTP_RECOVERY_KEY_ALPHABET } from "../../../../../shared-ts/src/utils/emailOtpRecoveryKey.js";
 import "../../../../../shared-ts/src/wallet-recovery/recoveryCodes.js";
-import { demoEmailOtpCodeFromDelivery } from "../../../../../core/signingEngine/session/emailOtp/challengeDelivery.js";
-import { AUTH_MENU_WAITING_PROMPTS, isAuthMenuActionReady, isAuthMenuGoogleActionReady, isAuthMenuLoadingStatus, isAuthMenuReady, resolveAuthMenuLoginAccount } from "../../auth-menu/domain.js";
+import { walletDisplayText, walletText } from "../../../../../core/ui/messages.js";
+import { WalletLocaleContext, WalletText } from "../../../../../core/signingEngine/uiConfirm/ui/preact/WalletLocale.js";
+import { recoveryInputCharacters, rejectedRecoveryCharacters, renderRecoveryCodeGroups } from "./recovery-code-input.js";
+import { AUTH_MENU_WAITING_PROMPTS, isAuthMenuActionReady, isAuthMenuGoogleActionReady, isAuthMenuLoadingStatus, isAuthMenuReady } from "../../auth-menu/domain.js";
+import { AUTH_MENU_ACCOUNT_LIST_ID, AUTH_MENU_TITLE_ID, accountGroups, accountSecondaryText, authViewKey, menuNotice, modeLabel, modeSwitchCopy, otpCodeDigits, passkeyButtonLabel, recoveryAnnouncement, recoveryBackLabel, recoveryCaretAtPoint, recoveryNavigationLocked, renderDemoEmailCode, renderOtpCodeDigit, savedAccountsTriggerLabel, selectedAccountPrimaryText, selectedLoginAccount } from "./presentation.js";
 import { PadlockIcon } from "../../../../../core/signingEngine/uiConfirm/ui/preact/PadlockIcon.js";
 import { blinkMenuItem } from "../../../../../utils/menuItemBlink.js";
 import { accountDropdownIcon, backIcon, chevronIcon, fingerprintIcon, googleIcon, linkDeviceIcon, linkFailedIcon, mailIcon, passkeyRingIcon, recoveryIcon, rerollIcon } from "./icons.js";
@@ -12,163 +14,9 @@ import { Component, Fragment } from "preact";
 import { Fragment as Fragment$1, jsx, jsxs } from "preact/jsx-runtime";
 //#region src/SeamsWeb/walletIframe/host/ui/auth-menu/AuthMenuSurface.tsx
 /** @jsxImportSource preact */
-function renderDemoEmailCode(delivery) {
-	const code = demoEmailOtpCodeFromDelivery(delivery);
-	if (code === null) return null;
-	return /* @__PURE__ */ jsxs("p", {
-		class: "seams-otp-description",
-		children: ["Demo email code: ", /* @__PURE__ */ jsx("code", { children: code })]
-	});
-}
-const AUTH_MENU_TITLE_ID = "seams-auth-menu-title";
-const AUTH_MENU_ACCOUNT_LIST_ID = "seams-auth-menu-account-list";
-function otpCodeDigits(code, length = 6) {
-	return code.padEnd(length, " ").slice(0, length).split("");
-}
-const RECOVERY_CODE_CHARACTERS = new Set(EMAIL_OTP_RECOVERY_KEY_ALPHABET);
-function recoveryInputCharacters(code) {
-	let characters = "";
-	for (const character of code.toUpperCase()) {
-		const read = character === "O" ? "0" : character === "I" || character === "L" ? "1" : character;
-		if (RECOVERY_CODE_CHARACTERS.has(read)) characters += read;
-	}
-	return characters;
-}
-const RECOVERY_CODE_SEPARATOR = /[\s\-\u2010-\u2015\u2212]/;
-/** Characters the input dropped because no recovery code contains them, such as U. */
-function rejectedRecoveryCharacters(input) {
-	const rejected = /* @__PURE__ */ new Set();
-	for (const character of input.toUpperCase()) {
-		if (RECOVERY_CODE_SEPARATOR.test(character)) continue;
-		if (recoveryInputCharacters(character)) continue;
-		rejected.add(character);
-	}
-	return Array.from(rejected).slice(0, 3);
-}
-function renderRecoveryCodeGroups(code, selection, arrival) {
-	const caret = selection && selection.start === selection.end ? selection.start : null;
-	const lastIndex = 31;
-	const focusIndex = selection === null ? null : Math.min(selection.start, lastIndex);
-	const groups = [];
-	for (let start = 0; start < 32; start += 4) {
-		const end = start + 4;
-		const slots = [];
-		for (let index = start; index < end; index += 1) {
-			const character = code[index] ?? "";
-			const classes = ["seams-otp-slot"];
-			if (character) classes.push("is-filled");
-			if (index === caret) classes.push("is-caret");
-			if (caret === 32 && index === lastIndex) classes.push("is-caret-after");
-			if (selection && index >= selection.start && index < selection.end) classes.push("is-selected");
-			if (arrival && index >= arrival.start && index < arrival.end) classes.push("is-new");
-			slots.push(/* @__PURE__ */ jsx("span", {
-				class: classes.join(" "),
-				"data-recovery-slot": index,
-				children: character
-			}, index));
-		}
-		const groupClasses = ["seams-recovery-code-group"];
-		if (focusIndex !== null && focusIndex >= start && focusIndex < end) groupClasses.push("is-active");
-		if (code.length >= end) groupClasses.push("is-complete");
-		groups.push(/* @__PURE__ */ jsx("div", {
-			class: groupClasses.join(" "),
-			children: slots
-		}, start));
-	}
-	return groups;
-}
-function recoveryCaretAtPoint(root, clientX, clientY, codeLength) {
-	let nearest = null;
-	for (const slot of root.querySelectorAll("[data-recovery-slot]")) {
-		const index = Number(slot.dataset.recoverySlot);
-		const box = slot.getBoundingClientRect();
-		const dx = clientX < box.left ? box.left - clientX : Math.max(0, clientX - box.right);
-		const dy = clientY < box.top ? box.top - clientY : Math.max(0, clientY - box.bottom);
-		const distance = dx * dx + dy * dy;
-		if (nearest === null || distance < nearest.distance) nearest = {
-			index,
-			distance,
-			after: clientX > box.left + box.width / 2
-		};
-	}
-	if (nearest === null) return null;
-	return Math.min(nearest.after ? nearest.index + 1 : nearest.index, codeLength);
-}
-function renderOtpCodeDigit(digit) {
-	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("span", {
-		class: `seams-otp-slot ${digit.trim() ? "is-filled" : ""}`,
-		children: digit
-	}) });
-}
-function authViewKey(viewModel) {
-	const stage = viewModel.kind === "recovery" ? `:${viewModel.stage}` : "";
-	return `${viewModel.kind}:${viewModel.mode}:${viewModel.status.kind}${stage}`;
-}
-function recoveryAnnouncement(viewModel) {
-	if (viewModel.status.kind === "busy") return viewModel.status.headline;
-	if (viewModel.status.kind === "recoverable") return viewModel.status.message;
-	if (viewModel.stage === "passkey_ready") return "Recovery code accepted.";
-	if (viewModel.stage === "sign_in_ready") return "Wallet recovered. Unlock it to continue.";
-	return "";
-}
-function recoveryBackLabel(viewModel) {
-	if (viewModel.kind !== "recovery") return "Back";
-	return viewModel.stage === "choose_method" ? "Back to recovery code" : "Back to unlock wallet";
-}
-function recoveryNavigationLocked(viewModel) {
-	return viewModel.kind === "recovery" && viewModel.stage === "finalizing";
-}
-function modeSwitchCopy(mode) {
-	return mode === "register" ? {
-		prompt: "Already have a wallet?",
-		action: "Unlock wallet",
-		nextMode: "login"
-	} : {
-		prompt: "Don't have a wallet?",
-		action: "Create a wallet",
-		nextMode: "register"
-	};
-}
-function modeLabel(mode) {
-	return mode === "register" ? "Create a wallet" : "Unlock wallet";
-}
-function passkeyButtonLabel(mode) {
-	return mode === "register" ? "Create wallet with passkey" : "Unlock with passkey";
-}
-/** The failure the footer strip reports. Only the menu itself reports there. */
-function menuNotice(viewModel) {
-	if (viewModel.kind === "google_otp_login" || viewModel.kind === "google_registration") return viewModel.error || null;
-	return viewModel.kind === "passkey" && viewModel.status.kind === "recoverable" && viewModel.status.reason === "error" ? viewModel.status.message : null;
-}
-function selectedLoginAccount(viewModel) {
-	return resolveAuthMenuLoginAccount(viewModel.accountOptions, viewModel.selectedAccount).selectedAccount;
-}
-function selectedAccountPrimaryText(account) {
-	return account.walletId;
-}
-function accountSecondaryText(account) {
-	return account.authMethod === "email_otp" ? account.emailAddress : null;
-}
-function savedAccountsTriggerLabel(account) {
-	if (!account) return "Saved wallets";
-	const emailAddress = accountSecondaryText(account);
-	return emailAddress ? `Saved wallets. Selected wallet ID ${account.walletId}, email ${emailAddress}` : `Saved wallets. Selected ${account.walletId}`;
-}
-function accountGroups(options) {
-	const passkeyAccounts = options.filter((option) => option.authMethod === "passkey");
-	const emailOtpAccounts = options.filter((option) => option.authMethod === "email_otp");
-	return [{
-		authMethod: "passkey",
-		label: "Passkey",
-		accounts: passkeyAccounts
-	}, {
-		authMethod: "email_otp",
-		label: "Email OTP",
-		accounts: emailOtpAccounts
-	}].filter((group) => group.accounts.length > 0);
-}
 const ACCOUNT_MENU_EXIT_MS = 160;
 var AuthMenuSurface = class extends Component {
+	static contextType = WalletLocaleContext;
 	state = {
 		accountMenu: "closed",
 		recoverySelection: null,
@@ -650,7 +498,7 @@ var AuthMenuSurface = class extends Component {
 						/* @__PURE__ */ jsx("button", {
 							class: `seams-back-button ${loading || linkDevice || otpPrompt || registrationPrompt || recovery ? "is-visible" : ""}`,
 							type: "button",
-							"aria-label": recoveryBackLabel(viewModel),
+							"aria-label": walletDisplayText(this.context, recoveryBackLabel(viewModel)),
 							"data-auth-menu-close": true,
 							disabled: recoveryNavigationLocked(viewModel),
 							onClick: this.onBackClick,
@@ -661,7 +509,7 @@ var AuthMenuSurface = class extends Component {
 							role: "status",
 							"aria-live": "polite",
 							"aria-atomic": "true",
-							children: recoveryAnnouncement(viewModel)
+							children: /* @__PURE__ */ jsx(WalletText, { copy: recoveryAnnouncement(viewModel) })
 						}) : null,
 						/* @__PURE__ */ jsx("div", {
 							class: "seams-content-area",
@@ -704,16 +552,16 @@ var AuthMenuSurface = class extends Component {
 			children: [
 				eyebrow === viewModel.heading ? null : /* @__PURE__ */ jsx("div", {
 					class: "seams-menu-eyebrow",
-					children: eyebrow
+					children: /* @__PURE__ */ jsx(WalletText, { copy: eyebrow })
 				}),
 				/* @__PURE__ */ jsx("div", {
 					class: "seams-title",
 					id: AUTH_MENU_TITLE_ID,
-					children: viewModel.heading
+					children: /* @__PURE__ */ jsx(WalletText, { copy: viewModel.heading })
 				}),
 				viewModel.subtitle ? /* @__PURE__ */ jsx("div", {
 					class: "seams-subhead",
-					children: viewModel.subtitle
+					children: /* @__PURE__ */ jsx(WalletText, { copy: viewModel.subtitle })
 				}) : null
 			]
 		});
@@ -724,10 +572,10 @@ var AuthMenuSurface = class extends Component {
 			children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
 				class: "seams-title",
 				id: AUTH_MENU_TITLE_ID,
-				children: viewModel.heading
+				children: /* @__PURE__ */ jsx(WalletText, { copy: viewModel.heading })
 			}), /* @__PURE__ */ jsx("div", {
 				class: "seams-subhead",
-				children: viewModel.subtitle
+				children: /* @__PURE__ */ jsx(WalletText, { copy: viewModel.subtitle })
 			})] })
 		}) });
 	}
@@ -762,7 +610,7 @@ var AuthMenuSurface = class extends Component {
 							class: "seams-account-menu-trigger",
 							type: "button",
 							"data-auth-menu-input": true,
-							"aria-label": savedAccountsTriggerLabel(selected),
+							"aria-label": walletDisplayText(this.context, savedAccountsTriggerLabel(selected)),
 							"aria-haspopup": "listbox",
 							"aria-expanded": this.accountMenuOpen ? "true" : "false",
 							"aria-controls": AUTH_MENU_ACCOUNT_LIST_ID,
@@ -781,7 +629,7 @@ var AuthMenuSurface = class extends Component {
 									children: [/* @__PURE__ */ jsx("div", {
 										id: groupLabelId,
 										class: "seams-account-menu-group-label",
-										children: group.label
+										children: /* @__PURE__ */ jsx(WalletText, { copy: group.label })
 									}), group.accounts.map((account) => {
 										const isSelected = account.walletId === listSelected.walletId && account.authMethod === listSelected.authMethod;
 										const isChosen = !isSelected && account.walletId === choice?.chosen.walletId && account.authMethod === choice.chosen.authMethod;
@@ -791,7 +639,7 @@ var AuthMenuSurface = class extends Component {
 											type: "button",
 											role: "option",
 											"aria-selected": isSelected ? "true" : "false",
-											title: secondaryText ? `${account.walletId} ${secondaryText}` : account.walletId,
+											title: walletDisplayText(this.context, secondaryText ? `${account.walletId} ${secondaryText}` : account.walletId),
 											"data-wallet-id": account.walletId,
 											"data-auth-method": account.authMethod,
 											onClick: this.onLoginAccountSelect,
@@ -805,7 +653,7 @@ var AuthMenuSurface = class extends Component {
 													children: account.walletId
 												}), secondaryText ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("span", {
 													class: "seams-account-menu-account-secondary",
-													children: secondaryText
+													children: /* @__PURE__ */ jsx(WalletText, { copy: secondaryText })
 												}) }) : null]
 											})]
 										}) });
@@ -830,7 +678,7 @@ var AuthMenuSurface = class extends Component {
 						"data-auth-menu-input": true,
 						type: "text",
 						autocomplete: "nickname",
-						placeholder: viewModel.passkeyNameLabel,
+						placeholder: walletDisplayText(this.context, viewModel.passkeyNameLabel),
 						value: viewModel.passkeyName,
 						readonly: viewModel.passkeyNameReadOnly,
 						disabled: isAuthMenuLoadingStatus(viewModel.status),
@@ -839,8 +687,8 @@ var AuthMenuSurface = class extends Component {
 				}), viewModel.passkeyNameReadOnly ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("button", {
 					class: "seams-input-action-trigger auth-menu-registration-reroll",
 					type: "button",
-					title: "Generate another name",
-					"aria-label": "Generate another name",
+					title: walletText(this.context, "Generate another name"),
+					"aria-label": walletText(this.context, "Generate another name"),
 					onClick: this.onRegistrationReroll,
 					disabled: !isAuthMenuReady(viewModel),
 					children: rerollIcon()
@@ -858,21 +706,21 @@ var AuthMenuSurface = class extends Component {
 				"data-auth-menu-primary": true,
 				disabled: !isAuthMenuActionReady(viewModel),
 				onClick: this.onPrimaryClick,
-				children: [fingerprintIcon(), /* @__PURE__ */ jsx("span", { children: passkeyButtonLabel(viewModel.mode) })]
+				children: [fingerprintIcon(), /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { copy: passkeyButtonLabel(viewModel.mode) }) })]
 			}), googleEnabled ? /* @__PURE__ */ jsxs("button", {
 				class: "seams-auth-method-btn",
 				type: "button",
 				"data-auth-menu-provider": "google",
 				disabled: !isAuthMenuGoogleActionReady(viewModel),
 				onClick: this.onGoogleClick,
-				children: [googleIcon(), /* @__PURE__ */ jsx("span", { children: "Continue with Google" })]
+				children: [googleIcon(), /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { message: "Continue with Google" }) })]
 			}) : null]
 		}) });
 	}
 	renderOtherOptions() {
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 			class: "seams-menu-options-label",
-			children: "Other options"
+			children: /* @__PURE__ */ jsx(WalletText, { message: "Other options" })
 		}), /* @__PURE__ */ jsxs("div", {
 			class: "seams-menu-options",
 			children: [/* @__PURE__ */ jsxs("button", {
@@ -886,7 +734,7 @@ var AuthMenuSurface = class extends Component {
 					}),
 					/* @__PURE__ */ jsxs("span", {
 						class: "seams-menu-option-text",
-						children: ["Link this device ", /* @__PURE__ */ jsx("small", { children: "Scan a code with your other device" })]
+						children: [/* @__PURE__ */ jsx(WalletText, { message: "Link this device" }), /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx(WalletText, { message: "Scan a code with your other device" }) })]
 					}),
 					chevronIcon()
 				]
@@ -902,7 +750,7 @@ var AuthMenuSurface = class extends Component {
 					}),
 					/* @__PURE__ */ jsxs("span", {
 						class: "seams-menu-option-text",
-						children: ["Recover wallet ", /* @__PURE__ */ jsx("small", { children: "Use your recovery code" })]
+						children: [/* @__PURE__ */ jsx(WalletText, { message: "Recover wallet" }), /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx(WalletText, { message: "Use your recovery code" }) })]
 					}),
 					chevronIcon()
 				]
@@ -924,7 +772,7 @@ var AuthMenuSurface = class extends Component {
 					class: `seams-recovery-status ${feedbackIsError ? "seams-recovery-error" : ""}`,
 					"aria-hidden": feedbackIsError ? "false" : "true",
 					role: feedbackIsError ? "alert" : "status",
-					children: feedbackMessage
+					children: /* @__PURE__ */ jsx(WalletText, { copy: feedbackMessage })
 				}),
 				/* @__PURE__ */ jsxs("form", {
 					class: "seams-recovery-form",
@@ -938,7 +786,7 @@ var AuthMenuSurface = class extends Component {
 								children: [/* @__PURE__ */ jsx("label", {
 									class: "seams-field-label",
 									for: "seams-recovery-code",
-									children: "Recovery code"
+									children: /* @__PURE__ */ jsx(WalletText, { message: "Recovery code" })
 								}), /* @__PURE__ */ jsxs("span", {
 									id: "seams-recovery-code-count",
 									class: "seams-recovery-code-count",
@@ -981,7 +829,7 @@ var AuthMenuSurface = class extends Component {
 								id: "seams-recovery-code-hint",
 								class: `seams-recovery-code-hint ${rejection ? "is-error" : ""}`,
 								"aria-live": "polite",
-								children: rejection ? `Recovery codes don’t use ${rejection.characters.join(", ")}.` : "You can paste the whole code."
+								children: rejection ? `Recovery codes don’t use ${rejection.characters.join(", ")}.` : /* @__PURE__ */ jsx(WalletText, { message: "You can paste the whole code." })
 							})
 						]
 					}), /* @__PURE__ */ jsx("button", {
@@ -989,7 +837,7 @@ var AuthMenuSurface = class extends Component {
 						type: "submit",
 						"data-auth-menu-primary": true,
 						"data-recovery-continue": true,
-						children: "Continue"
+						children: /* @__PURE__ */ jsx(WalletText, { message: "Continue" })
 					})]
 				})
 			] });
@@ -1003,7 +851,7 @@ var AuthMenuSurface = class extends Component {
 				/* @__PURE__ */ jsx("p", {
 					class: `seams-recovery-status ${viewModel.status.kind === "recoverable" ? "seams-recovery-error" : ""}`,
 					"aria-hidden": "true",
-					children: statusMessage
+					children: /* @__PURE__ */ jsx(WalletText, { copy: statusMessage })
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					class: "seams-auth-methods seams-recovery-methods",
@@ -1017,7 +865,7 @@ var AuthMenuSurface = class extends Component {
 						children: [busyTarget === "passkey" ? /* @__PURE__ */ jsx("span", {
 							class: "seams-spinner",
 							"aria-hidden": "true"
-						}) : fingerprintIcon(), /* @__PURE__ */ jsx("span", { children: "Create a passkey" })]
+						}) : fingerprintIcon(), /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { message: "Create a passkey" }) })]
 					}), googleEnabled ? /* @__PURE__ */ jsxs("button", {
 						class: "seams-auth-method-btn",
 						type: "button",
@@ -1027,12 +875,12 @@ var AuthMenuSurface = class extends Component {
 						children: [busyTarget === "google_email_otp" ? /* @__PURE__ */ jsx("span", {
 							class: "seams-spinner",
 							"aria-hidden": "true"
-						}) : googleIcon(), /* @__PURE__ */ jsx("span", { children: "Continue with Google" })]
+						}) : googleIcon(), /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { message: "Continue with Google" }) })]
 					}) : null]
 				}),
 				/* @__PURE__ */ jsx("p", {
 					class: "seams-recovery-method-note",
-					children: "This adds a new sign-in method to your wallet."
+					children: /* @__PURE__ */ jsx(WalletText, { message: "This adds a new sign-in method to your wallet." })
 				})
 			] });
 		}
@@ -1046,13 +894,13 @@ var AuthMenuSurface = class extends Component {
 				children: [
 					/* @__PURE__ */ jsx("p", {
 						class: "seams-otp-description",
-						children: deliveryMessage
+						children: /* @__PURE__ */ jsx(WalletText, { copy: deliveryMessage })
 					}),
 					renderDemoEmailCode(viewModel.delivery),
 					/* @__PURE__ */ jsx("label", {
 						class: "seams-field-label",
 						for: "seams-recovery-google-otp",
-						children: "Email code"
+						children: /* @__PURE__ */ jsx(WalletText, { message: "Email code" })
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						class: "seams-otp-code-field",
@@ -1086,7 +934,7 @@ var AuthMenuSurface = class extends Component {
 						id: "seams-recovery-google-otp-error",
 						class: "seams-recovery-status seams-recovery-error",
 						role: "alert",
-						children: viewModel.status.message
+						children: /* @__PURE__ */ jsx(WalletText, { copy: viewModel.status.message })
 					}) }) : null,
 					/* @__PURE__ */ jsx("button", {
 						class: "seams-link-device-btn seams-link-device-btn-primary",
@@ -1094,7 +942,7 @@ var AuthMenuSurface = class extends Component {
 						"data-auth-menu-primary": true,
 						disabled: !canSubmit,
 						onClick: this.onRecoveryGoogleOtpSubmit,
-						children: "Verify email code"
+						children: /* @__PURE__ */ jsx(WalletText, { message: "Verify email code" })
 					})
 				]
 			})] });
@@ -1108,13 +956,13 @@ var AuthMenuSurface = class extends Component {
 			class: "seams-recovery-confirmation",
 			children: [message === null ? null : /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("p", {
 				class: "seams-recovery-status",
-				children: message
+				children: /* @__PURE__ */ jsx(WalletText, { copy: message })
 			}) }), /* @__PURE__ */ jsxs("button", {
 				class: "seams-link-device-btn seams-link-device-btn-primary",
 				type: "button",
 				"data-auth-menu-primary": true,
 				onClick: action,
-				children: [googleTarget && !finalizationRetry ? googleIcon() : null, signIn ? googleTarget ? "Unlock with Google" : "Unlock with new passkey" : finalizationRetry ? "Retry finalization" : googleTarget ? "Continue with Google" : "Create new passkey"]
+				children: [googleTarget && !finalizationRetry ? googleIcon() : null, signIn ? googleTarget ? /* @__PURE__ */ jsx(WalletText, { message: "Unlock with Google" }) : /* @__PURE__ */ jsx(WalletText, { message: "Unlock with new passkey" }) : finalizationRetry ? /* @__PURE__ */ jsx(WalletText, { message: "Retry finalization" }) : googleTarget ? /* @__PURE__ */ jsx(WalletText, { message: "Continue with Google" }) : /* @__PURE__ */ jsx(WalletText, { message: "Create new passkey" })]
 			})]
 		})] });
 	}
@@ -1122,11 +970,11 @@ var AuthMenuSurface = class extends Component {
 		const copy = modeSwitchCopy(viewModel.mode);
 		return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
 			class: "seams-auth-intent-switch",
-			children: [/* @__PURE__ */ jsx("span", { children: copy.prompt }), /* @__PURE__ */ jsx("button", {
+			children: [/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { copy: copy.prompt }) }), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				"data-auth-menu-mode": copy.nextMode,
 				onClick: this.onIntentSwitchClick,
-				children: copy.action
+				children: /* @__PURE__ */ jsx(WalletText, { copy: copy.action })
 			})]
 		}) });
 	}
@@ -1143,7 +991,7 @@ var AuthMenuSurface = class extends Component {
 				prompt ? /* @__PURE__ */ jsx("span", {
 					class: "seams-passkey-prompt",
 					role: "img",
-					"aria-label": prompt.label,
+					"aria-label": walletDisplayText(this.context, prompt.label),
 					children: passkeyRingIcon()
 				}) : null,
 				/* @__PURE__ */ jsxs("div", {
@@ -1151,20 +999,20 @@ var AuthMenuSurface = class extends Component {
 					children: [
 						/* @__PURE__ */ jsx("span", {
 							class: "seams-waiting-text",
-							children: waitingText
+							children: /* @__PURE__ */ jsx(WalletText, { copy: waitingText })
 						}),
 						prompt ? /* @__PURE__ */ jsx("span", {
 							class: "seams-passkey-instruction",
-							children: prompt.instruction
+							children: /* @__PURE__ */ jsx(WalletText, { copy: prompt.instruction })
 						}) : null,
 						viewModel.showProgress && status.detail && status.detail !== waitingText ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("span", {
 							class: "seams-waiting-sdk-events",
-							children: status.detail
+							children: /* @__PURE__ */ jsx(WalletText, { copy: status.detail })
 						}) }) : null
 					]
 				}),
 				prompt ? null : /* @__PURE__ */ jsx("div", {
-					"aria-label": "Loading",
+					"aria-label": walletText(this.context, "Loading"),
 					class: "seams-spinner"
 				})
 			]
@@ -1218,18 +1066,18 @@ var AuthMenuSurface = class extends Component {
 								children: /* @__PURE__ */ jsx("h2", {
 									class: "qr-title",
 									id: AUTH_MENU_TITLE_ID,
-									children: viewModel.heading
+									children: /* @__PURE__ */ jsx(WalletText, { copy: viewModel.heading })
 								})
 							}),
 							/* @__PURE__ */ jsx("div", {
 								class: "qr-instruction",
-								children: ready ? viewModel.subtitle : "Preparing a one-time code for your other device."
+								children: ready ? /* @__PURE__ */ jsx(WalletText, { copy: viewModel.subtitle }) : /* @__PURE__ */ jsx(WalletText, { message: "Preparing a one-time code for your other device." })
 							}),
 							/* @__PURE__ */ jsxs("div", {
 								class: "qr-status",
 								role: "status",
 								"aria-live": "polite",
-								children: [ready ? linkDevice.message : "Generating QR code", /* @__PURE__ */ jsx("span", { class: "animated-ellipsis" })]
+								children: [ready ? /* @__PURE__ */ jsx(WalletText, { copy: linkDevice.message }) : /* @__PURE__ */ jsx(WalletText, { message: "Generating QR code" }), /* @__PURE__ */ jsx("span", { class: "animated-ellipsis" })]
 							})
 						]
 					})
@@ -1247,18 +1095,18 @@ var AuthMenuSurface = class extends Component {
 				/* @__PURE__ */ jsx("h2", {
 					class: "qr-title",
 					id: AUTH_MENU_TITLE_ID,
-					children: "Match your other device"
+					children: /* @__PURE__ */ jsx(WalletText, { message: "Match your other device" })
 				}),
 				/* @__PURE__ */ jsx("p", {
 					class: "seams-link-device-confirmation-copy",
-					children: "Choose the unlock method for Device 2. Email code sends a one-time code to the address you enter."
+					children: /* @__PURE__ */ jsx(WalletText, { message: "Choose the unlock method for Device 2. Email code sends a one-time code to the address you enter." })
 				}),
 				/* @__PURE__ */ jsxs("fieldset", {
 					class: "seams-link-device-factor-options",
 					children: [
 						/* @__PURE__ */ jsx("legend", {
 							class: "sr-only",
-							children: "Wallet unlock method"
+							children: /* @__PURE__ */ jsx(WalletText, { message: "Wallet unlock method" })
 						}),
 						/* @__PURE__ */ jsxs("label", { children: [
 							/* @__PURE__ */ jsx("span", {
@@ -1267,7 +1115,7 @@ var AuthMenuSurface = class extends Component {
 							}),
 							/* @__PURE__ */ jsx("span", {
 								class: "seams-auth-method-choice-label",
-								children: "Passkey"
+								children: /* @__PURE__ */ jsx(WalletText, { message: "Passkey" })
 							}),
 							/* @__PURE__ */ jsx("input", {
 								type: "radio",
@@ -1284,7 +1132,7 @@ var AuthMenuSurface = class extends Component {
 							}),
 							/* @__PURE__ */ jsx("span", {
 								class: "seams-auth-method-choice-label",
-								children: "Email code"
+								children: /* @__PURE__ */ jsx(WalletText, { message: "Email code" })
 							}),
 							/* @__PURE__ */ jsx("input", {
 								type: "radio",
@@ -1300,13 +1148,13 @@ var AuthMenuSurface = class extends Component {
 					class: "seams-link-device-target-email",
 					children: [/* @__PURE__ */ jsx("span", {
 						class: "seams-field-label",
-						children: "Email address"
+						children: /* @__PURE__ */ jsx(WalletText, { message: "Email address" })
 					}), /* @__PURE__ */ jsx("input", {
 						type: "email",
 						name: "linked-device-target-email",
 						autocomplete: "email",
 						value: emailAddress,
-						"aria-label": "Email address",
+						"aria-label": walletText(this.context, "Email address"),
 						"aria-invalid": emailAddress.length > 0 && !canStart ? "true" : "false",
 						onInput: this.onLinkDeviceTargetEmailInput
 					})]
@@ -1314,7 +1162,7 @@ var AuthMenuSurface = class extends Component {
 				linkDevice.error ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("p", {
 					class: "seams-link-device-inline-error",
 					role: "alert",
-					children: linkDevice.error
+					children: /* @__PURE__ */ jsx(WalletText, { copy: linkDevice.error })
 				}) }) : null,
 				/* @__PURE__ */ jsx("button", {
 					class: "seams-link-device-btn seams-link-device-btn-primary",
@@ -1322,7 +1170,7 @@ var AuthMenuSurface = class extends Component {
 					"data-auth-menu-primary": true,
 					disabled: !canStart,
 					onClick: this.onLinkDeviceStart,
-					children: "Continue"
+					children: /* @__PURE__ */ jsx(WalletText, { message: "Continue" })
 				})
 			]
 		}) });
@@ -1344,11 +1192,11 @@ var AuthMenuSurface = class extends Component {
 				/* @__PURE__ */ jsx("h2", {
 					class: "qr-title",
 					id: AUTH_MENU_TITLE_ID,
-					children: view.heading
+					children: /* @__PURE__ */ jsx(WalletText, { copy: view.heading })
 				}),
 				hint ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
 					class: "seams-link-device-email-chip",
-					title: hint,
+					title: walletDisplayText(this.context, hint),
 					children: /* @__PURE__ */ jsx("span", { children: hint })
 				}) }) : null,
 				/* @__PURE__ */ jsxs("p", {
@@ -1356,7 +1204,7 @@ var AuthMenuSurface = class extends Component {
 					id: "seams-linked-device-otp-status",
 					role: "status",
 					"aria-live": "polite",
-					children: [view.status, view.pending ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("span", {
+					children: [/* @__PURE__ */ jsx(WalletText, { copy: view.status }), view.pending ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("span", {
 						class: "animated-ellipsis",
 						"aria-hidden": "true"
 					}) }) : null]
@@ -1364,7 +1212,7 @@ var AuthMenuSurface = class extends Component {
 				showCodeField ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("label", {
 					class: "sr-only",
 					for: "seams-linked-device-email-otp",
-					children: "Email code"
+					children: /* @__PURE__ */ jsx(WalletText, { message: "Email code" })
 				}), /* @__PURE__ */ jsxs("div", {
 					class: "seams-otp-code-field",
 					"data-disabled": busy ? "true" : "false",
@@ -1377,7 +1225,7 @@ var AuthMenuSurface = class extends Component {
 						autocomplete: "one-time-code",
 						pattern: "[0-9]*",
 						maxLength: 6,
-						"aria-label": "Email verification code",
+						"aria-label": walletText(this.context, "Email verification code"),
 						"aria-describedby": "seams-linked-device-otp-status",
 						"aria-invalid": activation.kind === "incorrect" ? "true" : "false",
 						value: linkDevice.otpCode,
@@ -1404,26 +1252,26 @@ var AuthMenuSurface = class extends Component {
 			type: "button",
 			"data-link-device-error-dismiss": true,
 			onClick: this.onBackClick,
-			children: "Return to unlock wallet"
+			children: /* @__PURE__ */ jsx(WalletText, { message: "Return to unlock wallet" })
 		}) });
 		if (activation.kind === "expired") return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("button", {
 			class: "seams-link-device-btn seams-link-device-btn-primary",
 			type: "button",
 			onClick: this.onLinkDeviceEmailOtpResend,
-			children: "Send a new code"
+			children: /* @__PURE__ */ jsx(WalletText, { message: "Send a new code" })
 		}) });
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
 			class: "seams-link-device-btn seams-link-device-btn-primary",
 			type: "button",
 			disabled: !input.canSubmit,
 			onClick: this.onLinkDeviceEmailOtpSubmit,
-			children: activation.kind === "submitting" ? "Verifying" : "Verify code"
+			children: activation.kind === "submitting" ? /* @__PURE__ */ jsx(WalletText, { message: "Verifying" }) : /* @__PURE__ */ jsx(WalletText, { message: "Verify code" })
 		}), /* @__PURE__ */ jsx("button", {
 			class: "seams-otp-resend",
 			type: "button",
 			disabled: input.busy,
 			onClick: this.onLinkDeviceEmailOtpResend,
-			children: "Send another code"
+			children: /* @__PURE__ */ jsx(WalletText, { message: "Send another code" })
 		})] });
 	}
 	renderLinkDeviceFailure(linkDevice) {
@@ -1431,7 +1279,7 @@ var AuthMenuSurface = class extends Component {
 		return this.renderLinkDeviceFailurePanel({
 			dismiss: "error",
 			title: activationFailed ? "Device linked" : "Couldn't link device",
-			detail: activationFailed ? /* @__PURE__ */ jsxs(Fragment$1, { children: ["Unable to open the wallet. Go back and try again. ", linkDevice.message] }) : linkDevice.message,
+			detail: activationFailed ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(WalletText, { message: "Unable to open the wallet. Go back and try again." }), /* @__PURE__ */ jsx(WalletText, { copy: linkDevice.message })] }) : linkDevice.message,
 			action: "Return to unlock wallet"
 		});
 	}
@@ -1446,12 +1294,12 @@ var AuthMenuSurface = class extends Component {
 				/* @__PURE__ */ jsx("h2", {
 					class: "qr-title",
 					id: AUTH_MENU_TITLE_ID,
-					children: panel.title
+					children: /* @__PURE__ */ jsx(WalletText, { copy: panel.title })
 				}),
 				/* @__PURE__ */ jsx("p", {
 					class: "seams-link-device-failure-detail",
 					role: "alert",
-					children: panel.detail
+					children: typeof panel.detail === "string" ? /* @__PURE__ */ jsx(WalletText, { copy: panel.detail }) : panel.detail
 				}),
 				/* @__PURE__ */ jsx("button", {
 					class: "seams-link-device-btn",
@@ -1459,7 +1307,7 @@ var AuthMenuSurface = class extends Component {
 					"data-auth-menu-primary": true,
 					[`data-link-device-${panel.dismiss}-dismiss`]: true,
 					onClick: this.onBackClick,
-					children: panel.action
+					children: /* @__PURE__ */ jsx(WalletText, { copy: panel.action })
 				})
 			]
 		}) });
@@ -1475,13 +1323,13 @@ var AuthMenuSurface = class extends Component {
 				/* @__PURE__ */ jsx("h2", {
 					class: "qr-title",
 					id: AUTH_MENU_TITLE_ID,
-					children: "Opening linked wallet"
+					children: /* @__PURE__ */ jsx(WalletText, { message: "Opening linked wallet" })
 				}),
 				/* @__PURE__ */ jsx("p", {
 					class: "seams-link-device-confirmation-copy",
 					role: "status",
 					"aria-live": "polite",
-					children: linkDevice.message
+					children: /* @__PURE__ */ jsx(WalletText, { copy: linkDevice.message })
 				})
 			]
 		}) });
@@ -1496,7 +1344,7 @@ var AuthMenuSurface = class extends Component {
 					class: "qr-title",
 					id: AUTH_MENU_TITLE_ID,
 					"aria-live": "polite",
-					children: linkDevice.message
+					children: /* @__PURE__ */ jsx(WalletText, { copy: linkDevice.message })
 				}),
 				/* @__PURE__ */ jsx("button", {
 					class: "seams-link-device-btn seams-link-device-btn-primary",
@@ -1505,7 +1353,7 @@ var AuthMenuSurface = class extends Component {
 					"data-link-device-passkey-action": true,
 					disabled: creating,
 					onClick: this.onLinkDeviceCreatePasskey,
-					children: creating ? "Waiting for passkey" : "Create passkey"
+					children: creating ? /* @__PURE__ */ jsx(WalletText, { message: "Waiting for passkey" }) : /* @__PURE__ */ jsx(WalletText, { message: "Create passkey" })
 				})
 			]
 		}) });
@@ -1523,19 +1371,19 @@ var AuthMenuSurface = class extends Component {
 						/* @__PURE__ */ jsx("div", {
 							class: "seams-otp-title",
 							id: AUTH_MENU_TITLE_ID,
-							children: viewModel.heading
+							children: /* @__PURE__ */ jsx(WalletText, { copy: viewModel.heading })
 						}),
 						/* @__PURE__ */ jsx("p", {
 							class: "seams-otp-description",
-							children: deliveryMessage
+							children: /* @__PURE__ */ jsx(WalletText, { copy: deliveryMessage })
 						}),
 						renderDemoEmailCode(viewModel.delivery),
 						/* @__PURE__ */ jsxs("div", {
 							class: "seams-otp-account",
-							title: viewModel.walletId,
+							title: walletDisplayText(this.context, viewModel.walletId),
 							children: [/* @__PURE__ */ jsx("span", {
 								class: "seams-otp-account-label",
-								children: "Wallet"
+								children: /* @__PURE__ */ jsx(WalletText, { message: "Wallet" })
 							}), /* @__PURE__ */ jsx("span", {
 								class: "seams-otp-account-value",
 								children: viewModel.walletId
@@ -1546,7 +1394,7 @@ var AuthMenuSurface = class extends Component {
 				/* @__PURE__ */ jsx("label", {
 					class: "seams-field-label",
 					for: "seams-auth-menu-google-otp",
-					children: "Email code"
+					children: /* @__PURE__ */ jsx(WalletText, { message: "Email code" })
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					class: "seams-otp-code-field",
@@ -1574,7 +1422,7 @@ var AuthMenuSurface = class extends Component {
 				}),
 				/* @__PURE__ */ jsx("p", {
 					class: "seams-otp-helper",
-					children: viewModel.prompt.helperText ?? ""
+					children: /* @__PURE__ */ jsx(WalletText, { copy: viewModel.prompt.helperText ?? "" })
 				}),
 				/* @__PURE__ */ jsx("button", {
 					class: "seams-auth-method-btn seams-auth-method-btn-primary",
@@ -1582,14 +1430,14 @@ var AuthMenuSurface = class extends Component {
 					"data-auth-menu-primary": true,
 					disabled: !isAuthMenuActionReady(viewModel),
 					onClick: this.onPrimaryClick,
-					children: viewModel.submitBusy ? "Unlocking…" : viewModel.ctaLabel
+					children: viewModel.submitBusy ? /* @__PURE__ */ jsx(WalletText, { message: "Unlocking…" }) : /* @__PURE__ */ jsx(WalletText, { copy: viewModel.ctaLabel })
 				}),
 				/* @__PURE__ */ jsx("button", {
 					class: "seams-otp-resend auth-menu-google-resend",
 					type: "button",
 					disabled: viewModel.resendBusy || viewModel.submitBusy,
 					onClick: this.onGoogleOtpResend,
-					children: viewModel.resendBusy ? "Sending…" : "Resend Code"
+					children: viewModel.resendBusy ? /* @__PURE__ */ jsx(WalletText, { message: "Sending…" }) : /* @__PURE__ */ jsx(WalletText, { message: "Resend Code" })
 				})
 			]
 		}) });
@@ -1604,18 +1452,18 @@ var AuthMenuSurface = class extends Component {
 					/* @__PURE__ */ jsx("div", {
 						class: "seams-otp-title",
 						id: AUTH_MENU_TITLE_ID,
-						children: viewModel.heading
+						children: /* @__PURE__ */ jsx(WalletText, { copy: viewModel.heading })
 					}),
 					/* @__PURE__ */ jsx("p", {
 						class: "seams-otp-description",
-						children: viewModel.subtitle
+						children: /* @__PURE__ */ jsx(WalletText, { copy: viewModel.subtitle })
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						class: "seams-otp-account",
-						title: viewModel.walletId,
+						title: walletDisplayText(this.context, viewModel.walletId),
 						children: [/* @__PURE__ */ jsx("span", {
 							class: "seams-otp-account-label",
-							children: "Wallet"
+							children: /* @__PURE__ */ jsx(WalletText, { message: "Wallet" })
 						}), /* @__PURE__ */ jsx("span", {
 							class: "seams-otp-account-value",
 							children: viewModel.walletId
@@ -1626,7 +1474,7 @@ var AuthMenuSurface = class extends Component {
 						type: "button",
 						disabled: viewModel.rerollBusy || viewModel.submitBusy,
 						onClick: this.onGoogleRegistrationReroll,
-						children: viewModel.rerollBusy ? "Generating…" : "Generate another name"
+						children: viewModel.rerollBusy ? /* @__PURE__ */ jsx(WalletText, { message: "Generating…" }) : /* @__PURE__ */ jsx(WalletText, { message: "Generate another name" })
 					})
 				]
 			}), /* @__PURE__ */ jsx("button", {
@@ -1635,7 +1483,7 @@ var AuthMenuSurface = class extends Component {
 				"data-auth-menu-primary": true,
 				disabled: !isAuthMenuActionReady(viewModel),
 				onClick: this.onPrimaryClick,
-				children: viewModel.submitBusy ? "Creating..." : viewModel.ctaLabel
+				children: viewModel.submitBusy ? /* @__PURE__ */ jsx(WalletText, { message: "Creating..." }) : /* @__PURE__ */ jsx(WalletText, { copy: viewModel.ctaLabel })
 			})]
 		}) });
 	}