@seams/wallet 0.17.0 → 0.18.0

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

@@ -1,3 +1,5 @@
+import { walletDisplayText, walletText } from "../../../../ui/messages.js";
+import { WalletLocaleContext, WalletText, useWalletLocale } from "./WalletLocale.js";
 import { SeamsWordmark } from "./SeamsWordmark.js";
 import { contractPrefix, transactionLabelTitle } from "./TransactionLabel.js";
 import { copySurfaceText } from "./clipboard.js";
@@ -46,10 +48,11 @@ function reviewRecipient(model) {
 }
 /** The whole value when it fits; otherwise the middle truncates and the last eight characters stay. */
 function ReviewMiddleTruncated({ value, class: className }) {
+	const locale = useWalletLocale();
 	return /* @__PURE__ */ jsxs("bdi", {
 		class: `seams-review-middle ${className}`,
 		dir: "ltr",
-		title: value,
+		title: walletDisplayText(locale, value),
 		children: [/* @__PURE__ */ jsx("span", { children: value.slice(0, -8) }), /* @__PURE__ */ jsx("span", { children: value.slice(-8) })]
 	});
 }
@@ -119,7 +122,7 @@ function WalletReceiptFooter() {
 		children: [
 			/* @__PURE__ */ jsx(ReviewIcon, { kind: "shield" }),
 			" ",
-			/* @__PURE__ */ jsx("span", { children: "Secured by" }),
+			/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { message: "Secured by" }) }),
 			" ",
 			/* @__PURE__ */ jsx(SeamsWordmark, {})
 		]
@@ -144,6 +147,7 @@ function reviewAmount(model) {
 	};
 }
 var CopyReviewValue = class extends Component {
+	static contextType = WalletLocaleContext;
 	state = { copied: false };
 	lifetime = new AbortController();
 	timer = null;
@@ -179,7 +183,7 @@ var CopyReviewValue = class extends Component {
 			type: "button",
 			class: `seams-review-copy${this.props.address ? " seams-review-copy-address" : ""}${this.state.copied ? " copied" : ""}`,
 			onClick: this.copy,
-			"aria-label": this.state.copied ? "Copied" : this.props.label ?? "Copy value",
+			"aria-label": walletDisplayText(this.context, this.state.copied ? "Copied" : this.props.label ?? "Copy value"),
 			children: [this.props.address && /* @__PURE__ */ jsx("bdi", {
 				class: "seams-review-full-address",
 				dir: "ltr",
@@ -189,43 +193,45 @@ var CopyReviewValue = class extends Component {
 	}
 };
 function ReviewDetailLabel({ node }) {
-	if (node.action || node.transaction) return /* @__PURE__ */ jsx(Fragment$1, { children: transactionLabelTitle(node) });
+	const locale = useWalletLocale();
+	if (node.action || node.transaction) return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(WalletText, { copy: transactionLabelTitle(node) }) });
 	const contract = contractPrefix(node);
 	if (contract && node.contractAddress) {
 		const address = node.contractAddress;
 		return /* @__PURE__ */ jsxs("span", {
 			class: "seams-review-contract",
-			children: [contract.trim(), /* @__PURE__ */ jsxs("span", {
+			children: [/* @__PURE__ */ jsx(WalletText, { copy: contract.trim() }), /* @__PURE__ */ jsxs("span", {
 				class: "seams-review-contract-value",
 				children: [/* @__PURE__ */ jsx(ReviewMiddleTruncated, {
 					value: address,
 					class: "seams-review-contract-address"
 				}), /* @__PURE__ */ jsx(CopyReviewValue, {
 					value: address,
-					label: `Copy contract address ${address}`
+					label: walletDisplayText(locale, `Copy contract address ${address}`)
 				})]
 			})]
 		});
 	}
 	if (node.fieldLabel) {
 		const value = node.label.slice(node.fieldLabel.length);
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [node.fieldLabel, node.fieldLabel === "Method:" ? /* @__PURE__ */ jsx("span", {
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(WalletText, { copy: node.fieldLabel }), node.fieldLabel === "Method:" ? /* @__PURE__ */ jsx("span", {
 			class: "seams-review-function",
 			children: value
 		}) : value] });
 	}
 	const call = /^(Call(?:ing)? )([^\s]+)(.*)$/.exec(node.label);
 	if (call) return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		call[1],
+		/* @__PURE__ */ jsx(WalletText, { copy: call[1] }),
 		/* @__PURE__ */ jsx("span", {
 			class: "seams-review-function",
 			children: call[2]
 		}),
 		call[3]
 	] });
-	return /* @__PURE__ */ jsx(Fragment$1, { children: node.label });
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(WalletText, { copy: node.label }) });
 }
 function ReviewDetail({ node }) {
+	const locale = useWalletLocale();
 	const content = node.contentVariants?.decoded ?? node.content;
 	const block = Boolean(node.contentVariants || content?.includes("\n"));
 	return /* @__PURE__ */ jsxs("div", {
@@ -240,7 +246,7 @@ function ReviewDetail({ node }) {
 				]
 			}),
 			node.contentVariants && /* @__PURE__ */ jsx(ReviewDisclosure, {
-				label: "Raw data",
+				label: walletText(locale, "Raw data"),
 				kind: "raw",
 				children: /* @__PURE__ */ jsx("pre", { children: node.contentVariants.raw })
 			}),
@@ -252,6 +258,7 @@ function ReviewDetail({ node }) {
 	});
 }
 function TransactionReview({ data, details = true }) {
+	const locale = useWalletLocale();
 	const model = data.model;
 	const operation = model?.operations[0];
 	const recipient = reviewRecipient(model);
@@ -262,21 +269,21 @@ function TransactionReview({ data, details = true }) {
 			model?.warnings?.map((warning) => /* @__PURE__ */ jsx("div", {
 				class: "seams-review-warning",
 				role: "alert",
-				children: warning.message
+				children: /* @__PURE__ */ jsx(WalletText, { copy: warning.message })
 			}, warning.code)),
 			/* @__PURE__ */ jsxs("dl", {
 				class: "seams-review-fields",
 				children: [
-					recipient && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "To" }), /* @__PURE__ */ jsx("dd", {
+					recipient && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(WalletText, { message: "To" }) }), /* @__PURE__ */ jsx("dd", {
 						class: "seams-review-recipient",
 						children: /* @__PURE__ */ jsx(CopyReviewValue, {
 							value: recipient,
 							address: true,
-							label: `Copy recipient address ${recipient}`
+							label: walletDisplayText(locale, `Copy recipient address ${recipient}`)
 						})
 					})] }),
-					model && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Network" }), /* @__PURE__ */ jsxs("dd", { children: [/* @__PURE__ */ jsx("span", { class: "seams-review-network-dot" }), reviewNetwork(model)] })] }),
-					model?.totals?.estimatedFee && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Estimated network fee" }), /* @__PURE__ */ jsxs("dd", { children: [
+					model && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(WalletText, { message: "Network" }) }), /* @__PURE__ */ jsxs("dd", { children: [/* @__PURE__ */ jsx("span", { class: "seams-review-network-dot" }), reviewNetwork(model)] })] }),
+					model?.totals?.estimatedFee && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(WalletText, { message: "Estimated network fee" }) }), /* @__PURE__ */ jsxs("dd", { children: [
 						model.totals.estimatedFee,
 						" ",
 						model.totals.feeSymbol
@@ -285,7 +292,7 @@ function TransactionReview({ data, details = true }) {
 			}),
 			details && data.tree && /* @__PURE__ */ jsx(ReviewDisclosure, {
 				initiallyOpen: data.detailsInitiallyOpen,
-				label: operation?.kind === "near.message" ? "Message details" : "Transaction details",
+				label: walletDisplayText(locale, operation?.kind === "near.message" ? "Message details" : "Transaction details"),
 				children: /* @__PURE__ */ jsx(ReviewDetail, { node: data.tree })
 			}),
 			model?.signerAccount && /* @__PURE__ */ jsxs("div", {
@@ -294,10 +301,10 @@ function TransactionReview({ data, details = true }) {
 					class: "seams-review-avatar",
 					"aria-hidden": "true",
 					children: "S"
-				}), /* @__PURE__ */ jsxs("div", { children: ["Signing account", /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx(CopyReviewValue, {
+				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(WalletText, { message: "Signing account" }), /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx(CopyReviewValue, {
 					value: model.signerAccount,
 					address: true,
-					label: `Copy signing account address ${model.signerAccount}`
+					label: walletDisplayText(locale, `Copy signing account address ${model.signerAccount}`)
 				}) })] })]
 			})
 		]

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

@@ -1,3 +1,5 @@
+import { walletDisplayText } from "../../../../ui/messages.js";
+import { WalletLocaleContext, WalletText } from "./WalletLocale.js";
 import { announceClampedSurfaceResize } from "../confirm-surface-resize.js";
 import { TransactionLabel, transactionLabelTitle } from "./TransactionLabel.js";
 import { copySurfaceText } from "./clipboard.js";
@@ -55,6 +57,7 @@ function TransactionTree(props) {
 	});
 }
 var TransactionNode = class extends Component {
+	static contextType = WalletLocaleContext;
 	state = {
 		mode: this.props.node.contentVariants?.defaultMode === "raw" ? "raw" : "decoded",
 		copied: false
@@ -210,7 +213,7 @@ var TransactionNode = class extends Component {
 				chevron && !node.hideChevron && /* @__PURE__ */ jsx(Chevron, {}),
 				/* @__PURE__ */ jsx("span", {
 					class: "label-text",
-					title: transactionLabelTitle(node),
+					title: walletDisplayText(this.context, transactionLabelTitle(node)),
 					children: /* @__PURE__ */ jsx(TransactionLabel, {
 						node,
 						explorers: this.props.explorers
@@ -221,7 +224,7 @@ var TransactionNode = class extends Component {
 					class: "copy-badge",
 					"data-copied": String(this.state.copied),
 					onClick: this.copy,
-					title: this.state.copied ? "Copied" : "Copy",
+					title: walletDisplayText(this.context, this.state.copied ? "Copied" : "Copy"),
 					children: this.state.copied ? "copied" : "copy"
 				})
 			]
@@ -258,10 +261,10 @@ var TransactionNode = class extends Component {
 						children: [variants && /* @__PURE__ */ jsx("button", {
 							type: "button",
 							class: "file-content-mode-toggle",
-							title: `Show ${toggleLabel}`,
-							"aria-label": `Show ${toggleLabel}`,
+							title: walletDisplayText(this.context, `Show ${toggleLabel}`),
+							"aria-label": walletDisplayText(this.context, `Show ${toggleLabel}`),
 							onClick: this.toggleMode,
-							children: toggleLabel
+							children: /* @__PURE__ */ jsx(WalletText, { copy: toggleLabel })
 						}), /* @__PURE__ */ jsx("div", {
 							class: "file-content",
 							children: content

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

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

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

@@ -1,4 +1,5 @@
 import { appearanceTokenCssRule } from "../appearance-token-vars.js";
+import { withWalletLocale } from "./WalletLocale.js";
 import { PadlockIcon } from "./PadlockIcon.js";
 import { confirmationDocumentStyles } from "./confirmation-styles.js";
 import { ConfirmationContent } from "./ConfirmationContent.js";
@@ -79,6 +80,7 @@ var MountedConfirmationSurface = class {
 		this.state.model = model;
 		this.element.dataset.confirmationKind = model.content.kind;
 		this.element.dataset.seamsConfirmReady = String(model.content.kind === "transaction" && model.content.transaction.decision.kind === "ready");
+		this.element.lang = model.appearance.locale ?? "en";
 		this.element.dataset.theme = model.appearance.theme.mode;
 		this.styles.setDynamicRule(this.element.id, appearanceTokenCssRule(this.element.id, model.appearance));
 		this.renderSurface();
@@ -224,16 +226,16 @@ var MountedConfirmationSurface = class {
 		});
 		const label = source.kind === "registration" ? source.registration.heading : source.header.heading;
 		if (this.receipt || this.presentation.variant === "modal") {
-			render(/* @__PURE__ */ jsx(ConfirmationModal, {
+			render(withWalletLocale(state.model.appearance.locale ?? "en", /* @__PURE__ */ jsx(ConfirmationModal, {
 				context: this.receipt ? "wallet-iframe" : this.presentation.context,
 				label,
 				onCancel: this.cancel,
 				children: content
-			}), this.element);
+			})), this.element);
 			return;
 		}
 		const decision = source.kind === "registration" ? source.registration.decision : source.transaction.decision;
-		render(/* @__PURE__ */ jsx(ConfirmationDrawer, {
+		render(withWalletLocale(state.model.appearance.locale ?? "en", /* @__PURE__ */ jsx(ConfirmationDrawer, {
 			context: this.presentation.context,
 			label,
 			origin: source.kind === "transaction" && source.header.website.kind === "ready" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PadlockIcon, {}), source.header.website.text] }) : void 0,
@@ -248,7 +250,7 @@ var MountedConfirmationSurface = class {
 			},
 			onCancel: this.cancel,
 			children: content
-		}), this.element);
+		})), this.element);
 	}
 	contentModel(source, closing) {
 		switch (source.kind) {

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

@@ -1,4 +1,5 @@
 import { appearanceTokenCssRule } from "../appearance-token-vars.js";
+import { withWalletLocale } from "./WalletLocale.js";
 import { confirmationDocumentStyles } from "./confirmation-styles.js";
 import { RecoveryCodeBackupSurface } from "./RecoveryCodeBackupSurface.js";
 import { render } from "preact";
@@ -18,6 +19,7 @@ var MountedRecoveryCodeBackupSurface = class {
 		this.element = this.document.createElement("div");
 		this.element.id = `seams-recovery-surface-${++nextRecoverySurfaceId}`;
 		this.element.className = "seams-wallet-ui seams-recovery-code-backup-host";
+		this.element.lang = input.appearance?.locale ?? "en";
 		this.element.dataset.seamsRecoverySurface = input.surface;
 		if (input.appearance) {
 			this.element.dataset.theme = input.appearance.theme.mode;
@@ -59,11 +61,11 @@ var MountedRecoveryCodeBackupSurface = class {
 	render(experience) {
 		if (this.state === "disposed") return;
 		this.element.dataset.seamsRecoveryEntry = experience.kind;
-		render(/* @__PURE__ */ jsx(RecoveryCodeBackupSurface, {
+		render(withWalletLocale(this.input.appearance?.locale ?? "en", /* @__PURE__ */ jsx(RecoveryCodeBackupSurface, {
 			experience,
 			onClose: this.input.onClose,
 			onStageChange: this.handleStageChange
-		}), this.dialog);
+		})), this.dialog);
 	}
 	handleCancel = (event) => {
 		event.preventDefault();

package/dist/esm/core/ui/locale.js

@@ -0,0 +1,10 @@
+//#region src/core/ui/locale.ts
+/** Normalize a language tag at a configuration or request boundary. */
+function normalizeWalletLocale(value) {
+	if (typeof value !== "string") return "en";
+	return value.trim().toLowerCase().split(/[-_]/, 1)[0] === "ja" ? "ja" : "en";
+}
+//#endregion
+export { normalizeWalletLocale };
+
+//# sourceMappingURL=locale.js.map