@seams/wallet 0.17.0 → 0.18.0

package/dist/esm/react/components/AccountMenuButton/WalletRegionSection.js

@@ -1,5 +1,7 @@
 import { base64UrlEncode } from "../../../shared-ts/src/utils/base64.js";
 import { parseWalletMoveId } from "../../../SeamsWeb/publicApi/placement.js";
+import { walletText } from "../../../core/ui/messages.js";
+import { WalletLocaleContext, WalletText } from "../../context/WalletLocale.js";
 import { Component } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/WalletRegionSection.tsx
@@ -30,7 +32,7 @@ function matchesRegion(value, region) {
 function renderRegion(region) {
 	return /* @__PURE__ */ jsx("option", {
 		value: region.value,
-		children: region.label
+		children: /* @__PURE__ */ jsx(WalletText, { copy: region.label })
 	}, region.value);
 }
 function progressText(status) {
@@ -73,6 +75,7 @@ function assertNever(value) {
 	throw new Error(`Unexpected wallet region state: ${String(value)}`);
 }
 var WalletRegionSection = class extends Component {
+	static contextType = WalletLocaleContext;
 	state = { view: { kind: "loading" } };
 	mounted = false;
 	requestRevision = 0;
@@ -234,40 +237,44 @@ var WalletRegionSection = class extends Component {
 	render() {
 		const state = this.state.view;
 		return /* @__PURE__ */ jsxs("section", {
-			"aria-label": "Wallet region",
+			"aria-label": walletText(this.context, "Wallet region"),
 			children: [/* @__PURE__ */ jsx("p", {
 				role: "status",
-				children: statusText(state)
+				children: /* @__PURE__ */ jsx(WalletText, { copy: statusText(state) })
 			}), this.renderContent(state)]
 		});
 	}
 	renderContent(state) {
 		switch (state.kind) {
 			case "loading":
-			case "submitting": return /* @__PURE__ */ jsx("p", { children: "You can lock this wallet. An accepted move continues on the server." });
+			case "submitting": return /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(WalletText, { message: "You can lock this wallet. An accepted move continues on the server." }) });
 			case "unavailable": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
 				role: "alert",
-				children: state.message
+				children: /* @__PURE__ */ jsx(WalletText, { copy: state.message })
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				className: "seams-settings-action",
 				onClick: this.load,
-				children: "Check again"
+				children: /* @__PURE__ */ jsx(WalletText, { message: "Check again" })
 			})] });
 			case "uncertain": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
 				role: "alert",
-				children: state.message
+				children: /* @__PURE__ */ jsx(WalletText, { copy: state.message })
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				className: "seams-settings-action",
 				onClick: this.retry,
-				children: "Retry same move"
+				children: /* @__PURE__ */ jsx(WalletText, { message: "Retry same move" })
 			})] });
-			case "progress": return /* @__PURE__ */ jsx("p", { children: state.status.state === "completed" || state.status.move.progress.availability === "active" ? "Your wallet is active in the new region. Another move must wait until cleanup completes." : "Signing and wallet changes are paused. Closing or locking this wallet does not cancel the move." });
+			case "progress": return /* @__PURE__ */ jsx("p", { children: state.status.state === "completed" || state.status.move.progress.availability === "active" ? /* @__PURE__ */ jsx(WalletText, { message: "Your wallet is active in the new region. Another move must wait until cleanup completes." }) : /* @__PURE__ */ jsx(WalletText, { message: "Signing and wallet changes are paused. Closing or locking this wallet does not cancel the move." }) });
 			case "ready": return /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsxs("p", { children: ["Current region: ", /* @__PURE__ */ jsx("strong", { children: regionName(state.placement.region) })] }),
+				/* @__PURE__ */ jsxs("p", { children: [
+					/* @__PURE__ */ jsx(WalletText, { message: "Current region:" }),
+					" ",
+					/* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx(WalletText, { copy: regionName(state.placement.region) }) })
+				] }),
 				/* @__PURE__ */ jsxs("label", { children: [
-					"Destination region",
+					/* @__PURE__ */ jsx(WalletText, { message: "Destination region" }),
 					" ",
 					/* @__PURE__ */ jsx("select", {
 						value: state.selected,
@@ -275,11 +282,11 @@ var WalletRegionSection = class extends Component {
 						children: REGIONS.map(renderRegion)
 					})
 				] }),
-				/* @__PURE__ */ jsx("p", { children: "Moving your wallet ends signing sessions on all devices. After the move, unlock your wallet again to sign." }),
+				/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(WalletText, { message: "Moving your wallet ends signing sessions on all devices. After the move, unlock your wallet again to sign." }) }),
 				state.placement.nextMoveAtMs > Date.now() ? /* @__PURE__ */ jsxs("p", { children: [
-					"Another move is available after",
+					/* @__PURE__ */ jsx(WalletText, { message: "Another move is available after" }),
 					" ",
-					new Date(state.placement.nextMoveAtMs).toLocaleString(),
+					new Date(state.placement.nextMoveAtMs).toLocaleString(this.context),
 					"."
 				] }) : null,
 				/* @__PURE__ */ jsx("button", {
@@ -287,7 +294,7 @@ var WalletRegionSection = class extends Component {
 					className: "seams-settings-action",
 					disabled: state.selected === state.placement.region || state.placement.nextMoveAtMs > Date.now(),
 					onClick: this.submit,
-					children: "Move wallet"
+					children: /* @__PURE__ */ jsx(WalletText, { message: "Move wallet" })
 				})
 			] });
 			default: return assertNever(state);

package/dist/esm/react/components/AccountMenuButton/WalletSettingsLayout.js

@@ -1,5 +1,7 @@
+import { walletDisplayText, walletText } from "../../../core/ui/messages.js";
 import { blinkMenuItem } from "../../../utils/menuItemBlink.js";
 import { SEAMS_STANDARD_WORDMARK_PATH } from "../../../core/signingEngine/uiConfirm/ui/seamsWordmarkPaths.js";
+import { WalletLocaleContext, WalletText, useWalletLocale } from "../../context/WalletLocale.js";
 import { useSeams } from "../../context/index.js";
 import { useTheme } from "../theme/ThemeProvider.js";
 import { ScanIcon } from "./icons/ScanIcon.js";
@@ -69,6 +71,7 @@ const SETTINGS_ITEMS = [
 	}
 ];
 function WalletSettingsHeader() {
+	const locale = useWalletLocale();
 	const { theme } = useTheme();
 	const { seams } = useSeams();
 	const nextTheme = theme === "dark" ? "light" : "dark";
@@ -86,11 +89,11 @@ function WalletSettingsHeader() {
 					fillRule: "evenodd"
 				})
 			}),
-			/* @__PURE__ */ jsx("span", { children: "Wallet" }),
+			/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { message: "Wallet" }) }),
 			/* @__PURE__ */ jsxs("button", {
 				className: "seams-settings-theme-toggle",
 				type: "button",
-				"aria-label": `Switch to ${nextTheme} mode`,
+				"aria-label": walletDisplayText(locale, `Switch to ${nextTheme} mode`),
 				onClick: seams.config.setTheme.bind(null, nextTheme),
 				children: [theme === "dark" ? /* @__PURE__ */ jsx(SunIcon, {
 					size: 20,
@@ -98,12 +101,13 @@ function WalletSettingsHeader() {
 				}) : /* @__PURE__ */ jsx(MoonIcon, {
 					size: 20,
 					animate: false
-				}), /* @__PURE__ */ jsx("span", { children: theme === "dark" ? "Light mode" : "Dark mode" })]
+				}), /* @__PURE__ */ jsx("span", { children: theme === "dark" ? /* @__PURE__ */ jsx(WalletText, { message: "Light mode" }) : /* @__PURE__ */ jsx(WalletText, { message: "Dark mode" }) })]
 			})
 		]
 	});
 }
 var WalletSettingsLayout = class extends Component {
+	static contextType = WalletLocaleContext;
 	state = {
 		regionReady: true,
 		selected: "authentication-methods",
@@ -161,7 +165,7 @@ var WalletSettingsLayout = class extends Component {
 			className: "seams-settings-nav-icon",
 			"aria-hidden": "true",
 			children: item.icon
-		}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("strong", { children: item.label }), /* @__PURE__ */ jsx("small", { children: item.description })] })]
+		}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx(WalletText, { copy: item.label }) }), /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx(WalletText, { copy: item.description }) })] })]
 	}, item.id);
 	render() {
 		const selectedId = this.state.regionReady ? this.state.selected : "wallet-region";
@@ -177,7 +181,7 @@ var WalletSettingsLayout = class extends Component {
 					children: [
 						/* @__PURE__ */ jsxs("div", {
 							className: "seams-settings-identity",
-							children: [/* @__PURE__ */ jsx(TouchIcon, {}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: this.props.walletId }), /* @__PURE__ */ jsx("small", { children: "Unlocked on this device" })] })]
+							children: [/* @__PURE__ */ jsx(TouchIcon, {}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: this.props.walletId }), /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx(WalletText, { message: "Unlocked on this device" }) })] })]
 						}),
 						/* @__PURE__ */ jsx("button", {
 							className: "seams-settings-mobile-toggle",
@@ -185,20 +189,20 @@ var WalletSettingsLayout = class extends Component {
 							onClick: this.toggleMobileMenu,
 							"aria-expanded": this.state.mobileMenuOpen,
 							"aria-controls": "seams-settings-navigation",
-							children: "All settings"
+							children: /* @__PURE__ */ jsx(WalletText, { message: "All settings" })
 						}),
 						/* @__PURE__ */ jsxs("nav", {
 							id: "seams-settings-navigation",
 							className: "seams-settings-navigation",
 							"data-expanded": this.state.mobileMenuOpen,
-							"aria-label": "Wallet settings",
+							"aria-label": walletText(this.context, "Wallet settings"),
 							children: [SETTINGS_ITEMS.map(this.renderItem), /* @__PURE__ */ jsx("div", {
 								className: "seams-settings-lock",
 								children: /* @__PURE__ */ jsxs("button", {
 									type: "button",
 									onClick: this.lock,
 									disabled: this.state.lock.kind === "locking",
-									children: [/* @__PURE__ */ jsx(LockIcon, {}), /* @__PURE__ */ jsx("strong", { children: this.state.lock.kind === "locking" ? "Locking…" : "Lock wallet" })]
+									children: [/* @__PURE__ */ jsx(LockIcon, {}), /* @__PURE__ */ jsx("strong", { children: this.state.lock.kind === "locking" ? /* @__PURE__ */ jsx(WalletText, { message: "Locking…" }) : /* @__PURE__ */ jsx(WalletText, { message: "Lock wallet" }) })]
 								})
 							})]
 						})
@@ -208,24 +212,24 @@ var WalletSettingsLayout = class extends Component {
 					children: [
 						/* @__PURE__ */ jsx("p", {
 							className: "seams-settings-breadcrumb",
-							children: "Wallet settings"
+							children: /* @__PURE__ */ jsx(WalletText, { message: "Wallet settings" })
 						}),
 						/* @__PURE__ */ jsx("h1", {
 							ref: this.heading,
 							tabIndex: -1,
-							children: selected.label
+							children: /* @__PURE__ */ jsx(WalletText, { copy: selected.label })
 						}),
 						/* @__PURE__ */ jsx("p", {
 							className: "seams-settings-description",
-							children: selected.description
+							children: /* @__PURE__ */ jsx(WalletText, { copy: selected.description })
 						}),
 						this.props.error ? /* @__PURE__ */ jsx("p", {
 							role: "alert",
-							children: this.props.error
+							children: /* @__PURE__ */ jsx(WalletText, { copy: this.props.error })
 						}) : null,
 						this.state.lock.kind === "failed" ? /* @__PURE__ */ jsx("p", {
 							role: "alert",
-							children: this.state.lock.message
+							children: /* @__PURE__ */ jsx(WalletText, { copy: this.state.lock.message })
 						}) : null,
 						/* @__PURE__ */ jsx("div", {
 							className: "seams-settings-content",
@@ -234,16 +238,16 @@ var WalletSettingsLayout = class extends Component {
 								walletId: this.props.walletId,
 								placement: this.props.placement,
 								onAvailability: this.regionAvailability
-							}, this.props.walletId) : /* @__PURE__ */ jsx("p", { children: "This setting is unavailable for the current wallet or device." })
+							}, this.props.walletId) : /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(WalletText, { message: "This setting is unavailable for the current wallet or device." }) })
 						}),
 						selected.id !== "wallet-region" ? /* @__PURE__ */ jsx("div", {
 							className: "seams-settings-content",
 							children: available && !available.disabled ? this.props.sections[selected.id] : /* @__PURE__ */ jsx("p", {
 								role: "status",
-								children: "This setting is unavailable for the current wallet or device."
+								children: /* @__PURE__ */ jsx(WalletText, { message: "This setting is unavailable for the current wallet or device." })
 							})
 						}, selected.id) : null,
-						/* @__PURE__ */ jsx("footer", { children: "Your wallet. Your control." })
+						/* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(WalletText, { message: "Your wallet. Your control." }) })
 					]
 				})]
 			})]

package/dist/esm/react/components/AccountMenuButton/index.js

@@ -2,6 +2,8 @@ import { parseVerifiedEmailAddress } from "../../../shared-ts/src/utils/domainId
 import { requirePrimaryChainByFamily, resolvePrimaryExplorerUrl } from "../../../core/config/chains.js";
 import { thresholdEcdsaChainTargetFromConfig, toWalletId } from "../../../core/signingEngine/interfaces/ecdsaChainTarget.js";
 import { WALLET_AUTH_METHODS } from "../../../shared-ts/src/utils/signerDomain.js";
+import { walletText } from "../../../core/ui/messages.js";
+import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
 import { accountMenuCapabilitiesForLoginState } from "../../context/reactLoginStateBuilders.js";
 import { useSeams } from "../../context/index.js";
 import { Theme, useTheme } from "../theme/ThemeProvider.js";
@@ -115,6 +117,7 @@ async function resolveNearAccountIdForExport(input) {
 * ```
 */
 const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp, nearExplorerBaseUrl = "https://nearblocks.io", username: usernameProp, hideUsername = false, onLock, onExportKeyError, onExportKeyEvent, deviceLinkingScannerParams, toggleColors, style, className, isMenuOpen, onMenuOpenChange, highlightedMenuItem }) => {
+	const locale = useWalletLocale();
 	const { accountInputState, loginState, seams, lock } = useSeams();
 	const recovery = useMemo(() => seams.recovery, [seams]);
 	const accountName = usernameProp || nearAccountIdProp?.split(".")?.[0] || loginState.nearAccountId?.split(".")?.[0] || "User";
@@ -416,7 +419,7 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 	const screens = {
 		overview: null,
 		"transaction-settings": /* @__PURE__ */ jsx(AccountMenuScreen, {
-			title: "Transaction settings",
+			title: walletText(locale, "Transaction settings"),
 			onBack: backToMenu,
 			children: currentConfirmConfig ? /* @__PURE__ */ jsx(TransactionSettingsSection, {
 				currentConfirmConfig,
@@ -427,15 +430,15 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 				theme
 			}) : /* @__PURE__ */ jsx("p", {
 				role: "status",
-				children: "Loading transaction settings…"
+				children: /* @__PURE__ */ jsx(WalletText, { message: "Loading transaction settings…" })
 			})
 		}),
 		accounts: /* @__PURE__ */ jsxs(AccountMenuScreen, {
-			title: "Accounts",
+			title: walletText(locale, "Accounts"),
 			onBack: backToMenu,
 			children: [/* @__PURE__ */ jsx("p", {
 				className: "seams-account-description",
-				children: "Your addresses across networks."
+				children: /* @__PURE__ */ jsx(WalletText, { message: "Your addresses across networks." })
 			}), /* @__PURE__ */ jsx(AccountsSection, { rows: accountsRows })]
 		}),
 		"export-keys": /* @__PURE__ */ jsx(ExportKeysScreen, {
@@ -446,23 +449,23 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 			onSelectChain: startExportKeyFlow
 		}),
 		"recovery-codes": /* @__PURE__ */ jsxs(AccountMenuScreen, {
-			title: "Recovery codes",
+			title: walletText(locale, "Recovery codes"),
 			onBack: backToMenu,
 			children: [
 				/* @__PURE__ */ jsx("p", {
 					className: "seams-account-description",
-					children: "Keep a recovery code somewhere safe. Use it to restore access to your wallet."
+					children: /* @__PURE__ */ jsx(WalletText, { message: "Keep a recovery code somewhere safe. Use it to restore access to your wallet." })
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "seams-account-inset",
-					children: "Only you should have this code. Anyone with it can start recovering your wallet."
+					children: /* @__PURE__ */ jsx(WalletText, { message: "Only you should have this code. Anyone with it can start recovering your wallet." })
 				}),
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
 					className: "seams-account-action primary",
 					disabled: recoveryCodesOpen,
 					onClick: startRecoveryCodesFlow,
-					children: recoveryCodesOpen ? "Opening recovery codes…" : "View recovery codes"
+					children: recoveryCodesOpen ? /* @__PURE__ */ jsx(WalletText, { message: "Opening recovery codes…" }) : /* @__PURE__ */ jsx(WalletText, { message: "View recovery codes" })
 				})
 			]
 		}),
@@ -511,7 +514,7 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 				className: "seams-settings-action",
 				disabled: recoveryCodesOpen,
 				onClick: startRecoveryCodesFlow,
-				children: recoveryCodesOpen ? "Opening recovery codes…" : "View recovery codes"
+				children: recoveryCodesOpen ? /* @__PURE__ */ jsx(WalletText, { message: "Opening recovery codes…" }) : /* @__PURE__ */ jsx(WalletText, { message: "View recovery codes" })
 			}),
 			"authentication-methods": /* @__PURE__ */ jsx(AuthenticationMethodsModal, {
 				walletId,
@@ -523,7 +526,7 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 				type: "button",
 				className: "seams-settings-action",
 				onClick: setShowQRScanner.bind(null, true),
-				children: "Scan QR code"
+				children: /* @__PURE__ */ jsx(WalletText, { message: "Scan QR code" })
 			}),
 			"linked-devices": /* @__PURE__ */ jsx(LinkedDevicesModal, {
 				walletId,
@@ -540,7 +543,7 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 				theme
 			}) : /* @__PURE__ */ jsx("p", {
 				role: "status",
-				children: "Loading transaction settings…"
+				children: /* @__PURE__ */ jsx(WalletText, { message: "Loading transaction settings…" })
 			})
 		}
 	}), /* @__PURE__ */ jsx(QRCodeScanner, {
@@ -577,7 +580,7 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 		children: screen === "overview" ? null : /* @__PURE__ */ jsxs(Fragment, { children: [screens[screen], settingsError ? /* @__PURE__ */ jsx("p", {
 			className: "seams-account-error",
 			role: "alert",
-			children: settingsError
+			children: /* @__PURE__ */ jsx(WalletText, { copy: settingsError })
 		}) : null] })
 	});
 };
@@ -606,11 +609,11 @@ function WalletSettingsPage(props) {
 		children: [/* @__PURE__ */ jsx(WalletSettingsHeader, {}), /* @__PURE__ */ jsxs("main", {
 			className: "seams-settings-sign-in",
 			children: [
-				/* @__PURE__ */ jsx("h1", { children: "Wallet settings" }),
-				/* @__PURE__ */ jsx("p", { children: "Unlock your wallet to manage your accounts, security, and devices." }),
+				/* @__PURE__ */ jsx("h1", { children: /* @__PURE__ */ jsx(WalletText, { message: "Wallet settings" }) }),
+				/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(WalletText, { message: "Unlock your wallet to manage your accounts, security, and devices." }) }),
 				error ? /* @__PURE__ */ jsx("p", {
 					role: "alert",
-					children: error
+					children: /* @__PURE__ */ jsx(WalletText, { copy: error })
 				}) : null,
 				/* @__PURE__ */ jsx(HostedSeamsAuthMenu, {
 					externalAuthBroker: props.externalAuthBroker,

package/dist/esm/react/components/HostedSeamsAuthMenu/SeamsAuthMenuMock.js

@@ -1,3 +1,4 @@
+import { WalletLocaleContext, WalletText } from "../../context/WalletLocale.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/HostedSeamsAuthMenu/SeamsAuthMenuMock.tsx
 const shellStyle = {
@@ -20,32 +21,35 @@ const rowStyle = {
 	opacity: .08
 };
 /** Inert artwork for loading and previews; contains no auth controls or wallet logic. */
-function SeamsAuthMenuMock({ initialMode = "login" }) {
-	return /* @__PURE__ */ jsxs("span", {
-		"data-seams-auth-menu-mock": "true",
-		"aria-hidden": "true",
-		style: shellStyle,
-		children: [
-			/* @__PURE__ */ jsx("strong", {
-				style: { fontSize: 24 },
-				children: initialMode === "register" ? "Create a wallet" : "Unlock wallet"
-			}),
-			/* @__PURE__ */ jsx("span", { style: {
-				...rowStyle,
-				height: 12,
-				width: "65%"
-			} }),
-			/* @__PURE__ */ jsx("span", { style: rowStyle }),
-			/* @__PURE__ */ jsx("span", { style: rowStyle }),
-			/* @__PURE__ */ jsx("span", { style: {
-				...rowStyle,
-				height: 12,
-				width: "30%",
-				justifySelf: "center"
-			} }),
-			/* @__PURE__ */ jsx("span", { style: rowStyle }),
-			/* @__PURE__ */ jsx("span", { style: rowStyle })
-		]
+function SeamsAuthMenuMock({ initialMode = "login", locale = "en" }) {
+	return /* @__PURE__ */ jsx(WalletLocaleContext.Provider, {
+		value: locale,
+		children: /* @__PURE__ */ jsxs("span", {
+			"data-seams-auth-menu-mock": "true",
+			"aria-hidden": "true",
+			style: shellStyle,
+			children: [
+				/* @__PURE__ */ jsx("strong", {
+					style: { fontSize: 24 },
+					children: initialMode === "register" ? /* @__PURE__ */ jsx(WalletText, { message: "Create a wallet" }) : /* @__PURE__ */ jsx(WalletText, { message: "Unlock wallet" })
+				}),
+				/* @__PURE__ */ jsx("span", { style: {
+					...rowStyle,
+					height: 12,
+					width: "65%"
+				} }),
+				/* @__PURE__ */ jsx("span", { style: rowStyle }),
+				/* @__PURE__ */ jsx("span", { style: rowStyle }),
+				/* @__PURE__ */ jsx("span", { style: {
+					...rowStyle,
+					height: 12,
+					width: "30%",
+					justifySelf: "center"
+				} }),
+				/* @__PURE__ */ jsx("span", { style: rowStyle }),
+				/* @__PURE__ */ jsx("span", { style: rowStyle })
+			]
+		})
 	});
 }
 //#endregion

package/dist/esm/react/components/QRCodeScanner.js

@@ -1,5 +1,7 @@
 import { classifyLinkDeviceFlowEvent } from "../../core/types/sdkSentEvents.js";
 import { DeviceLinkingErrorCode } from "../../core/types/linkDevice.js";
+import { walletText } from "../../core/ui/messages.js";
+import { WalletText, useWalletLocale } from "../context/WalletLocale.js";
 import { useSeams } from "../context/index.js";
 import { Theme, useTheme } from "./theme/ThemeProvider.js";
 import { useDeviceLinking } from "../hooks/useDeviceLinking.js";
@@ -29,12 +31,13 @@ function restorableFocusElement() {
 	return activeElement;
 }
 function ScannerFrame({ presentation, onClose, theme, tokens, children }) {
+	const locale = useWalletLocale();
 	if (presentation === "embedded") return /* @__PURE__ */ jsxs(AccountMenuScreen, {
-		title: "Link a device",
+		title: walletText(locale, "Link a device"),
 		onBack: onClose,
 		children: [/* @__PURE__ */ jsx("p", {
 			className: "seams-account-description",
-			children: "Open your wallet on the other device, then scan its pairing code."
+			children: /* @__PURE__ */ jsx(WalletText, { message: "Open your wallet on the other device, then scan its pairing code." })
 		}), children]
 	});
 	return /* @__PURE__ */ jsx(Theme, {
@@ -44,6 +47,7 @@ function ScannerFrame({ presentation, onClose, theme, tokens, children }) {
 	});
 }
 const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = true, cameraId, className, style, showCamera = true, presentation = "modal" }) => {
+	const locale = useWalletLocale();
 	const { theme, tokens } = useTheme();
 	const { cancelLinking } = useSeams();
 	const scopedTokens = React.useMemo(() => theme === "dark" ? { dark: tokens } : { light: tokens }, [theme, tokens]);
@@ -339,24 +343,24 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 				children: [
 					/* @__PURE__ */ jsx("h2", {
 						id: "qr-scanner-error-title",
-						children: "Unable to scan a QR code"
+						children: /* @__PURE__ */ jsx(WalletText, { message: "Unable to scan a QR code" })
 					}),
 					/* @__PURE__ */ jsx("p", {
 						role: "alert",
-						children: qrCamera.error
+						children: /* @__PURE__ */ jsx(WalletText, { copy: qrCamera.error })
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: qrCamera.startScanning,
 						className: "qr-scanner-error-button",
-						children: "Try Again"
+						children: /* @__PURE__ */ jsx(WalletText, { message: "Try Again" })
 					}),
 					/* @__PURE__ */ jsx("button", {
 						ref: closeButtonRef,
 						type: "button",
 						onClick: handleClose,
 						className: "qr-scanner-error-button",
-						children: "Close"
+						children: /* @__PURE__ */ jsx(WalletText, { message: "Close" })
 					})
 				]
 			})
@@ -389,14 +393,14 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 				children: [
 					/* @__PURE__ */ jsx("h2", {
 						id: "qr-scanner-email-selection-title",
-						children: "Choose an Email OTP method"
+						children: /* @__PURE__ */ jsx(WalletText, { message: "Choose an Email OTP method" })
 					}),
-					/* @__PURE__ */ jsx("p", { children: "Select the masked address to authorize this linked device." }),
+					/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(WalletText, { message: "Select the masked address to authorize this linked device." }) }),
 					emailOtpSelection.kind === "required" ? /* @__PURE__ */ jsxs("fieldset", {
 						className: "qr-scanner-email-choice-list",
 						children: [/* @__PURE__ */ jsx("legend", {
 							className: "qr-scanner-email-choice-legend",
-							children: "Available methods"
+							children: /* @__PURE__ */ jsx(WalletText, { message: "Available methods" })
 						}), emailOtpSelection.choices.map((choice) => {
 							const choiceId = `qr-email-method-${String(choice.baseWalletAuthMethodId)}`;
 							return /* @__PURE__ */ jsxs("label", {
@@ -415,7 +419,8 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 					}) : /* @__PURE__ */ jsxs("p", {
 						role: "status",
 						children: [
-							"Authorizing ",
+							/* @__PURE__ */ jsx(WalletText, { message: "Authorizing" }),
+							" ",
 							emailOtpSelection.choice.maskedEmailHint,
 							"…"
 						]
@@ -425,13 +430,13 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 						className: "qr-scanner-email-continue",
 						disabled: emailOtpSelection.selectedBaseWalletAuthMethodId === null,
 						onClick: selectEmailOtpBaseFactor,
-						children: "Continue"
+						children: /* @__PURE__ */ jsx(WalletText, { message: "Continue" })
 					})
 				]
 			}), /* @__PURE__ */ jsx("button", {
 				ref: closeButtonRef,
 				type: "button",
-				"aria-label": "Close scanner",
+				"aria-label": walletText(locale, "Close scanner"),
 				onClick: handleClose,
 				className: "qr-scanner-close",
 				children: /* @__PURE__ */ jsx("span", {
@@ -467,7 +472,7 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 				children: [/* @__PURE__ */ jsx("h2", {
 					id: "qr-scanner-title",
 					className: "qr-scanner-visually-hidden",
-					children: "Scan and link a device"
+					children: /* @__PURE__ */ jsx(WalletText, { message: "Scan and link a device" })
 				}), scannerState.kind === "expired" ? /* @__PURE__ */ jsxs("div", {
 					className: "qr-scanner-progress",
 					"aria-labelledby": "qr-scanner-progress-title",
@@ -476,12 +481,12 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 							id: "qr-scanner-progress-title",
 							ref: progressTitleRef,
 							tabIndex: -1,
-							children: "Linking expired"
+							children: /* @__PURE__ */ jsx(WalletText, { message: "Linking expired" })
 						}),
 						/* @__PURE__ */ jsx("p", {
 							className: "qr-scanner-progress-message",
 							role: "alert",
-							children: "This linking request expired. Scan the QR code again to retry."
+							children: /* @__PURE__ */ jsx(WalletText, { message: "This linking request expired. Scan the QR code again to retry." })
 						}),
 						/* @__PURE__ */ jsxs("div", {
 							className: "qr-scanner-progress-actions",
@@ -489,12 +494,12 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 								type: "button",
 								className: "qr-scanner-progress-cancel",
 								onClick: handleDismissExpiredLink,
-								children: "Close"
+								children: /* @__PURE__ */ jsx(WalletText, { message: "Close" })
 							}), /* @__PURE__ */ jsx("button", {
 								type: "button",
 								className: "qr-scanner-progress-primary",
 								onClick: handleRetryExpiredLink,
-								children: "Try again"
+								children: /* @__PURE__ */ jsx(WalletText, { message: "Try again" })
 							})]
 						})
 					]
@@ -506,7 +511,7 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 							id: "qr-scanner-progress-title",
 							ref: progressTitleRef,
 							tabIndex: -1,
-							children: "Linking device"
+							children: /* @__PURE__ */ jsx(WalletText, { message: "Linking device" })
 						}),
 						/* @__PURE__ */ jsxs("div", {
 							className: "qr-scanner-progress-dots",
@@ -521,7 +526,7 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 							className: "qr-scanner-progress-message",
 							role: "status",
 							"aria-live": "polite",
-							children: "Continue linking on your other device."
+							children: /* @__PURE__ */ jsx(WalletText, { message: "Continue linking on your other device." })
 						}),
 						/* @__PURE__ */ jsx("div", {
 							className: "qr-scanner-progress-actions",
@@ -529,7 +534,7 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 								type: "button",
 								className: "qr-scanner-progress-cancel",
 								onClick: handleCancelLinking,
-								children: "Cancel linking"
+								children: /* @__PURE__ */ jsx(WalletText, { message: "Cancel linking" })
 							})
 						})
 					]
@@ -551,9 +556,9 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 						})] }),
 						/* @__PURE__ */ jsxs("div", {
 							className: "qr-scanner-instructions",
-							children: [/* @__PURE__ */ jsx("p", { children: "Position the QR code within the frame" }), qrCamera.isScanning && /* @__PURE__ */ jsx("p", {
+							children: [/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(WalletText, { message: "Position the QR code within the frame" }) }), qrCamera.isScanning && /* @__PURE__ */ jsx("p", {
 								className: "qr-scanner-sub-instruction qr-scanner-sub-instruction--small",
-								children: "Scanning..."
+								children: /* @__PURE__ */ jsx(WalletText, { message: "Scanning..." })
 							})]
 						}),
 						qrCamera.cameras.length > 1 && /* @__PURE__ */ jsx("div", {
@@ -574,7 +579,7 @@ const QRCodeScanner = ({ onQRCodeScanned, onError, onClose, onEvent, isOpen = tr
 			}), scannerState.kind === "scanning" && /* @__PURE__ */ jsx("button", {
 				ref: closeButtonRef,
 				type: "button",
-				"aria-label": "Close scanner",
+				"aria-label": walletText(locale, "Close scanner"),
 				onClick: (event) => {
 					event.stopPropagation();
 					stopPropagationNative(event);