@seams/wallet 0.15.6 → 0.18.0

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

@@ -1,3 +1,4 @@
+import { WalletText } from "../../context/WalletLocale.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/SegmentedControl.tsx
@@ -64,7 +65,7 @@ const SegmentedControl = ({ items, value, onValueChange, activeBg, height, radiu
 					disabled: !!item.disabled,
 					onClick: () => onValueChange(item.value),
 					style: itemStyle,
-					children: item.label ?? String(item.value)
+					children: typeof item.label === "string" ? /* @__PURE__ */ jsx(WalletText, { copy: item.label }) : item.label ?? String(item.value)
 				}, String(item.value));
 			})
 		})]

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

@@ -1,3 +1,4 @@
+import { WalletText } from "../../context/WalletLocale.js";
 import SegmentedControl from "./SegmentedControl.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -26,8 +27,8 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 			className: "seams-transaction-group",
 			disabled: disableAll,
 			children: [
-				/* @__PURE__ */ jsx("legend", { children: "Review appearance" }),
-				/* @__PURE__ */ jsx("p", { children: "Choose where transaction details appear before signing." }),
+				/* @__PURE__ */ jsx("legend", { children: /* @__PURE__ */ jsx(WalletText, { message: "Review appearance" }) }),
+				/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(WalletText, { message: "Choose where transaction details appear before signing." }) }),
 				/* @__PURE__ */ jsx("div", {
 					className: "seams-transaction-choices",
 					children: UI_CHOICES.map(renderUiChoice.bind(null, currentConfirmConfig.uiMode ?? "modal", onSetUiMode))
@@ -37,8 +38,8 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 			className: "seams-transaction-group",
 			disabled: disableAll || disableRequireClick,
 			children: [
-				/* @__PURE__ */ jsx("legend", { children: "Confirmation step" }),
-				/* @__PURE__ */ jsx("p", { children: disableRequireClick ? "Choose Modal or Drawer to configure the confirmation step." : "Choose whether to click Continue before authentication starts." }),
+				/* @__PURE__ */ jsx("legend", { children: /* @__PURE__ */ jsx(WalletText, { message: "Confirmation step" }) }),
+				/* @__PURE__ */ jsx("p", { children: disableRequireClick ? /* @__PURE__ */ jsx(WalletText, { message: "Choose Modal or Drawer to configure the confirmation step." }) : /* @__PURE__ */ jsx(WalletText, { message: "Choose whether to click Continue before authentication starts." }) }),
 				/* @__PURE__ */ jsx("div", {
 					className: "seams-transaction-choices seams-transaction-choices--two",
 					children: BEHAVIOR_CHOICES.map(renderBehaviorChoice.bind(null, currentConfirmConfig, onSetDelay, onToggleSkipClick))
@@ -65,7 +66,7 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 					},
 					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
 						className: "seams-confirmation-options",
-						children: "Confirmer UI"
+						children: /* @__PURE__ */ jsx(WalletText, { message: "Confirmer UI" })
 					}), /* @__PURE__ */ jsx("div", {
 						style: { width: "100%" },
 						children: /* @__PURE__ */ jsx(SegmentedControl, {
@@ -107,7 +108,7 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 						},
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "seams-confirmation-options",
-							children: "Confirmation Options"
+							children: /* @__PURE__ */ jsx(WalletText, { message: "Confirmation Options" })
 						}), /* @__PURE__ */ jsx("div", {
 							style: { width: "100%" },
 							children: /* @__PURE__ */ jsx(SegmentedControl, {
@@ -183,8 +184,8 @@ function renderUiChoice(selected, onSelect, choice) {
 				className: "seams-transaction-choice-indicator",
 				"aria-hidden": "true"
 			}),
-			/* @__PURE__ */ jsx("strong", { children: choice.label }),
-			/* @__PURE__ */ jsx("span", { children: choice.description })
+			/* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx(WalletText, { copy: choice.label }) }),
+			/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { copy: choice.description }) })
 		]
 	}, choice.value);
 }
@@ -204,8 +205,8 @@ function renderBehaviorChoice(config, setDelay, toggle, choice) {
 				className: "seams-transaction-choice-indicator",
 				"aria-hidden": "true"
 			}),
-			/* @__PURE__ */ jsx("strong", { children: choice.label }),
-			/* @__PURE__ */ jsx("span", { children: choice.description })
+			/* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx(WalletText, { copy: choice.label }) }),
+			/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { copy: choice.description }) })
 		]
 	}, choice.value);
 }

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

@@ -1,8 +1,11 @@
+import { walletDisplayText } from "../../../core/ui/messages.js";
+import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
 import TouchIcon from "./icons/TouchIcon.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/UserAccountButton.tsx
 const UserAccountButton = ({ label = "Settings", username, hideUsername, fullAccountId, emailAddress, isOpen, onClick, onMouseEnter, onMouseLeave, theme = "dark", menuId, triggerId }) => {
+	const locale = useWalletLocale();
 	const onKeyDown = (e) => {
 		if (e.key === "Enter" || e.key === " ") {
 			e.preventDefault();
@@ -33,7 +36,7 @@ const UserAccountButton = ({ label = "Settings", username, hideUsername, fullAcc
 						strokeWidth: 1.4
 					})
 				}), !hideWhenClosed && /* @__PURE__ */ jsx(UserAccountId, {
-					label,
+					label: walletDisplayText(locale, label),
 					username,
 					fullAccountId,
 					emailAddress,
@@ -45,23 +48,24 @@ const UserAccountButton = ({ label = "Settings", username, hideUsername, fullAcc
 	});
 };
 const UserAccountId = ({ label, username, fullAccountId, emailAddress, isOpen }) => {
+	const locale = useWalletLocale();
 	const displayAccountId = (fullAccountId || username || "").trim();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "seams-user-account--user-details",
 		children: [
 			/* @__PURE__ */ jsx("p", {
 				className: "seams-user-account--username",
-				children: label
+				children: /* @__PURE__ */ jsx(WalletText, { copy: label })
 			}),
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": !isOpen,
-				title: displayAccountId || void 0,
+				title: walletDisplayText(locale, displayAccountId || void 0),
 				className: `seams-user-account--account-id ${isOpen ? "visible" : "hidden"}`,
 				children: displayAccountId
 			}),
 			emailAddress && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": !isOpen,
-				title: emailAddress,
+				title: walletDisplayText(locale, emailAddress),
 				className: `seams-user-account--email ${isOpen ? "visible" : "hidden"}`,
 				children: emailAddress
 			})

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,99 +75,11 @@ function assertNever(value) {
 	throw new Error(`Unexpected wallet region state: ${String(value)}`);
 }
 var WalletRegionSection = class extends Component {
-	constructor(..._args) {
-		super(..._args);
-		this.state = { view: { kind: "loading" } };
-		this.mounted = false;
-		this.requestRevision = 0;
-		this.timer = null;
-		this.load = async () => {
-			const revision = ++this.requestRevision;
-			this.commit({ kind: "loading" });
-			try {
-				const last = await this.props.placement.getLastMoveRequest(this.props.walletId);
-				if (!this.mounted || revision !== this.requestRevision) return;
-				const result = await this.props.placement.get(this.props.walletId);
-				if (!this.mounted || revision !== this.requestRevision) return;
-				if (!result.ok || result.placement.state === "unavailable") {
-					if (last !== null) {
-						await this.readMove(last);
-						return;
-					}
-					this.commit({
-						kind: "unavailable",
-						message: "Unable to check wallet placement. Unlock this wallet or reconnect to try again."
-					});
-					return;
-				}
-				if (result.placement.state === "moving") {
-					this.showProgress(result.placement);
-					return;
-				}
-				if (last !== null && last.expectedGeneration >= result.placement.generation) {
-					this.commit({
-						kind: "uncertain",
-						request: last,
-						message: "Reconnecting to check progress. The previous request may have been accepted."
-					});
-					await this.readMove(last);
-					return;
-				}
-				this.commit({
-					kind: "ready",
-					placement: result.placement,
-					selected: result.placement.region
-				});
-			} catch {
-				if (!this.mounted || revision !== this.requestRevision) return;
-				this.commit({
-					kind: "unavailable",
-					message: "Unable to check wallet placement. Reconnect to try again."
-				});
-			}
-		};
-		this.select = (event) => {
-			if (this.state.view.kind !== "ready") return;
-			const region = REGIONS.find(matchesRegion.bind(null, event.currentTarget.value));
-			if (!region) return;
-			this.commit({
-				kind: "ready",
-				placement: this.state.view.placement,
-				selected: region.value
-			});
-		};
-		this.submit = async () => {
-			const state = this.state.view;
-			if (state.kind !== "ready" || state.selected === state.placement.region || state.placement.nextMoveAtMs > Date.now()) return;
-			const request = {
-				walletId: this.props.walletId,
-				moveId: parseWalletMoveId(`wmove_${base64UrlEncode(crypto.getRandomValues(new Uint8Array(32)))}`),
-				destinationRegion: state.selected,
-				expectedGeneration: state.placement.generation
-			};
-			await this.send(request);
-		};
-		this.retry = async () => {
-			if (this.state.view.kind !== "uncertain") return;
-			await this.send(this.state.view.request);
-		};
-		this.poll = async () => {
-			this.timer = null;
-			const state = this.state.view;
-			if (state.kind === "uncertain") {
-				await this.readMove(state.request);
-				return;
-			}
-			if (state.kind !== "progress" || state.status.state !== "moving") return;
-			const move = state.status.move;
-			await this.readMove({
-				walletId: this.props.walletId,
-				moveId: move.moveId,
-				destinationRegion: move.destinationRegion,
-				expectedGeneration: move.sourceGeneration
-			});
-		};
-	}
+	static contextType = WalletLocaleContext;
+	state = { view: { kind: "loading" } };
+	mounted = false;
+	requestRevision = 0;
+	timer = null;
 	componentDidMount() {
 		this.mounted = true;
 		this.props.onAvailability(false);
@@ -180,6 +94,76 @@ var WalletRegionSection = class extends Component {
 		this.setState({ view: state });
 		this.props.onAvailability(permitsWalletActions(state));
 	}
+	load = async () => {
+		const revision = ++this.requestRevision;
+		this.commit({ kind: "loading" });
+		try {
+			const last = await this.props.placement.getLastMoveRequest(this.props.walletId);
+			if (!this.mounted || revision !== this.requestRevision) return;
+			const result = await this.props.placement.get(this.props.walletId);
+			if (!this.mounted || revision !== this.requestRevision) return;
+			if (!result.ok || result.placement.state === "unavailable") {
+				if (last !== null) {
+					await this.readMove(last);
+					return;
+				}
+				this.commit({
+					kind: "unavailable",
+					message: "Unable to check wallet placement. Unlock this wallet or reconnect to try again."
+				});
+				return;
+			}
+			if (result.placement.state === "moving") {
+				this.showProgress(result.placement);
+				return;
+			}
+			if (last !== null && last.expectedGeneration >= result.placement.generation) {
+				this.commit({
+					kind: "uncertain",
+					request: last,
+					message: "Reconnecting to check progress. The previous request may have been accepted."
+				});
+				await this.readMove(last);
+				return;
+			}
+			this.commit({
+				kind: "ready",
+				placement: result.placement,
+				selected: result.placement.region
+			});
+		} catch {
+			if (!this.mounted || revision !== this.requestRevision) return;
+			this.commit({
+				kind: "unavailable",
+				message: "Unable to check wallet placement. Reconnect to try again."
+			});
+		}
+	};
+	select = (event) => {
+		if (this.state.view.kind !== "ready") return;
+		const region = REGIONS.find(matchesRegion.bind(null, event.currentTarget.value));
+		if (!region) return;
+		this.commit({
+			kind: "ready",
+			placement: this.state.view.placement,
+			selected: region.value
+		});
+	};
+	submit = async () => {
+		const state = this.state.view;
+		if (state.kind !== "ready" || state.selected === state.placement.region || state.placement.nextMoveAtMs > Date.now()) return;
+		const request = {
+			walletId: this.props.walletId,
+			moveId: parseWalletMoveId(`wmove_${base64UrlEncode(crypto.getRandomValues(new Uint8Array(32)))}`),
+			destinationRegion: state.selected,
+			expectedGeneration: state.placement.generation
+		};
+		await this.send(request);
+	};
+	retry = async () => {
+		if (this.state.view.kind !== "uncertain") return;
+		await this.send(this.state.view.request);
+	};
 	async send(request) {
 		const revision = ++this.requestRevision;
 		if (this.timer !== null) {
@@ -216,6 +200,22 @@ var WalletRegionSection = class extends Component {
 			this.timer = setTimeout(this.poll, 1500);
 		}
 	}
+	poll = async () => {
+		this.timer = null;
+		const state = this.state.view;
+		if (state.kind === "uncertain") {
+			await this.readMove(state.request);
+			return;
+		}
+		if (state.kind !== "progress" || state.status.state !== "moving") return;
+		const move = state.status.move;
+		await this.readMove({
+			walletId: this.props.walletId,
+			moveId: move.moveId,
+			destinationRegion: move.destinationRegion,
+			expectedGeneration: move.sourceGeneration
+		});
+	};
 	async readMove(request) {
 		const revision = this.requestRevision;
 		try {
@@ -237,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,
@@ -278,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", {
@@ -290,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);