@seams/wallet 0.8.0 → 0.9.0

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

@@ -1,6 +1,3 @@
-import { parseWalletAuthMethodId, parseWalletId } from "../../../shared-ts/src/utils/domainIds.js";
-import { WALLET_EMAIL_OTP_TRANSACTION_SIGN_OPERATION } from "../../../shared-ts/src/utils/emailOtpDomain.js";
-import { computeWalletAuthMethodRevokeOperationFingerprintV1 } from "../../../shared-ts/src/utils/walletAuthMethodRecord.js";
 import { useSeams } from "../../context/index.js";
 import { AccountMenuDialogFrame, useAccountMenuDialogKeyboard } from "./AccountMenuDialog.js";
 import { LaptopIcon } from "./icons/LaptopIcon.js";
@@ -14,41 +11,16 @@ import "./LinkedDevicesModal.css";
 function assertNeverWalletAuthMethodBinding(value) {
 	throw new Error(`Unsupported wallet auth-method binding kind: ${String(value)}`);
 }
-function requireWalletId(value) {
-	const parsed = parseWalletId(value);
-	if (!parsed.ok) throw new Error(parsed.error.message);
-	return parsed.value;
-}
-function requireWalletAuthMethodId(value) {
-	const parsed = parseWalletAuthMethodId(value);
-	if (!parsed.ok) throw new Error(parsed.error.message);
-	return parsed.value;
-}
-async function buildRevokeOperationFingerprint(input) {
-	return await computeWalletAuthMethodRevokeOperationFingerprintV1({
-		walletId: requireWalletId(input.walletId),
-		targetWalletAuthMethodId: requireWalletAuthMethodId(input.walletAuthMethodId),
-		requestedAtMs: input.requestedAtMs
-	});
-}
-function revokeOutcomeAnnouncement(result, description) {
-	switch (result.kind) {
-		case "revoked": return `${description} can no longer use this wallet.`;
-		case "not_found": return `${description} was already removed.`;
-		case "conflict": return "The wallet changed before removal completed. The final wallet method cannot be removed.";
-		case "unauthorized": return "Fresh authorization from another wallet method is required.";
-	}
-}
-function resolveRevokeSourceMethod(binding, walletId, targetWalletAuthMethodId) {
+function assertRevokeSourceMethod(binding, walletId, targetWalletAuthMethodId) {
 	switch (binding.kind) {
 		case "passkey":
 			if (String(binding.scope.wallet.walletId) !== walletId) throw new Error("Unlock this wallet with a sibling authentication method first.");
 			if (String(binding.walletAuthMethodId) === targetWalletAuthMethodId) throw new Error("Unlock with the sibling authentication method before removing this one.");
-			return { kind: "passkey" };
+			return;
 		case "email_otp":
 			if (String(binding.wallet.walletId) !== walletId) throw new Error("Unlock this wallet with a sibling authentication method first.");
 			if (String(binding.walletAuthMethodId) === targetWalletAuthMethodId) throw new Error("Unlock with the sibling authentication method before removing this one.");
-			return { kind: "email_otp" };
+			return;
 	}
 	return assertNeverWalletAuthMethodBinding(binding);
 }
@@ -235,8 +207,6 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation = "modal"
 	const loadSeq = React.useRef(0);
 	const seamsRef = React.useRef(seams);
 	const dialogRef = React.useRef(null);
-	const otpInputRef = React.useRef(null);
-	const otpInputId = React.useId();
 	seamsRef.current = seams;
 	const loadDevices = React.useCallback(async () => {
 		const seq = loadSeq.current + 1;
@@ -250,7 +220,7 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation = "modal"
 		}
 		setLoadState({ kind: "loading" });
 		try {
-			const result = await withLinkedDevicesLoadTimeout(seamsRef.current.devices.listLinkedDevices({
+			const result = await withLinkedDevicesLoadTimeout(seamsRef.current.devices.list({
 				walletId,
 				limit: 50,
 				cursor: null
@@ -283,67 +253,19 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation = "modal"
 		}
 		loadDevices();
 	}, [isOpen, loadDevices]);
-	useEffect(() => {
-		if (revokeState.kind === "email_otp") otpInputRef.current?.focus();
-	}, [revokeState.kind]);
-	const finishRevocation = React.useCallback(async (result, description) => {
-		const message = revokeOutcomeAnnouncement(result, description);
-		setAnnouncement(message);
-		switch (result.kind) {
-			case "revoked":
-			case "not_found":
-				setRevokeState({ kind: "idle" });
-				await loadDevices();
-				return;
-			case "conflict":
-			case "unauthorized":
-				setRevokeState({
-					kind: "error",
-					message
-				});
-				return;
-		}
-	}, [loadDevices]);
 	const revokeMethod = React.useCallback(async (view, deviceNumber) => {
 		if (!walletId) return;
 		const walletAuthMethodId = String(viewCredential(view).walletAuthMethodId);
 		const description = deviceDescription(view, deviceNumber);
 		try {
 			if (!loginState.isLoggedIn || loginState.currentAuthMethod.kind !== "selected") throw new Error("Unlock this wallet with a sibling authentication method first.");
-			const sourceMethod = resolveRevokeSourceMethod(loginState.currentAuthMethod.binding, walletId, walletAuthMethodId);
-			const requestedAtMs = Date.now();
-			const operationFingerprintDigest = await buildRevokeOperationFingerprint({
-				walletId,
-				walletAuthMethodId,
-				requestedAtMs
-			});
-			if (sourceMethod.kind === "email_otp") {
-				const challenge = await seams.auth.requestEmailOtpChallenge({
-					walletId,
-					operation: WALLET_EMAIL_OTP_TRANSACTION_SIGN_OPERATION,
-					operationFingerprintDigest
-				});
-				setRevokeState({
-					kind: "email_otp",
-					walletAuthMethodId,
-					requestedAtMs,
-					description,
-					challengeId: challenge.challengeId,
-					ownerProofBindingDigest: challenge.ownerProofBindingDigest,
-					emailHint: challenge.emailHint ?? null,
-					otpCode: "",
-					submitting: false,
-					error: null
-				});
-				setAnnouncement(`A verification code was sent for removing ${description}.`);
-				return;
-			}
+			assertRevokeSourceMethod(loginState.currentAuthMethod.binding, walletId, walletAuthMethodId);
 			setRevokeState({
 				kind: "working",
 				walletAuthMethodId
 			});
 			setAnnouncement(`Removing ${description}…`);
-			await seams.registration.revokeAuthMethod({
+			await seams.registration.removeAuthMethod({
 				walletId,
 				walletAuthMethodId
 			});
@@ -362,47 +284,6 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation = "modal"
 		seams,
 		walletId
 	]);
-	const submitEmailOtpRevocation = React.useCallback(async () => {
-		if (!walletId || revokeState.kind !== "email_otp" || revokeState.submitting) return;
-		const pending = revokeState;
-		if (!pending.otpCode.trim()) {
-			setRevokeState({
-				...pending,
-				error: "Enter the verification code."
-			});
-			return;
-		}
-		setRevokeState({
-			...pending,
-			submitting: true,
-			error: null
-		});
-		setAnnouncement(`Removing ${pending.description}…`);
-		try {
-			await finishRevocation(await seams.devices.revokeLinkedDevice({
-				walletId,
-				walletAuthMethodId: pending.walletAuthMethodId,
-				requestedAtMs: pending.requestedAtMs,
-				sourceProof: {
-					kind: "email_otp",
-					challengeId: pending.challengeId,
-					otpCode: pending.otpCode.trim(),
-					ownerProofBindingDigest: pending.ownerProofBindingDigest
-				}
-			}), pending.description);
-		} catch (error) {
-			setRevokeState({
-				...pending,
-				submitting: false,
-				error: linkedDevicesLoadErrorMessage(error)
-			});
-		}
-	}, [
-		finishRevocation,
-		revokeState,
-		seams,
-		walletId
-	]);
 	if (!isOpen) return null;
 	const devices = loadState.kind === "loaded" ? loadState.devices : [];
 	const showEmpty = loadState.kind === "loaded" && devices.length === 0;
@@ -452,9 +333,8 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation = "modal"
 						const hasRemovableSibling = canRemoveWalletMethod(view, devices);
 						const confirming = revokeState.kind === "confirming" && revokeState.walletAuthMethodId === walletAuthMethodId;
 						const working = revokeState.kind === "working" && revokeState.walletAuthMethodId === walletAuthMethodId;
-						const awaitingEmailOtp = revokeState.kind === "email_otp" && revokeState.walletAuthMethodId === walletAuthMethodId;
-						const revocationInProgress = revokeState.kind === "working" || revokeState.kind === "email_otp";
-						const showRemoveButton = hasRemovableSibling && !isSelectedMethod && !confirming && !awaitingEmailOtp;
+						const revocationInProgress = revokeState.kind === "working";
+						const showRemoveButton = hasRemovableSibling && !isSelectedMethod && !confirming;
 						return /* @__PURE__ */ jsxs("li", {
 							className: "seams-linked-devices-modal-item seams-linked-devices-modal-item--row",
 							"data-device-kind": view.kind,
@@ -489,63 +369,7 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation = "modal"
 												strokeWidth: 1.75
 											}), /* @__PURE__ */ jsx("span", { children: selectedMethodRemovalHint(view, devices) })]
 										}) : null,
-										awaitingEmailOtp && revokeState.kind === "email_otp" ? /* @__PURE__ */ jsxs("form", {
-											className: "seams-linked-devices-modal-otp-form",
-											onSubmit: (event) => {
-												event.preventDefault();
-												submitEmailOtpRevocation();
-											},
-											children: [
-												/* @__PURE__ */ jsx("label", {
-													htmlFor: otpInputId,
-													children: "Verification code"
-												}),
-												revokeState.emailHint ? /* @__PURE__ */ jsxs("span", {
-													className: "seams-linked-devices-modal-item-detail",
-													children: ["Sent to ", revokeState.emailHint]
-												}) : null,
-												/* @__PURE__ */ jsx("input", {
-													ref: otpInputRef,
-													id: otpInputId,
-													className: "seams-linked-devices-modal-otp-input",
-													type: "text",
-													inputMode: "numeric",
-													autoComplete: "one-time-code",
-													pattern: "[0-9]*",
-													maxLength: 10,
-													value: revokeState.otpCode,
-													disabled: revokeState.submitting,
-													"aria-invalid": revokeState.error ? "true" : void 0,
-													"aria-describedby": revokeState.error ? `${otpInputId}-error` : void 0,
-													onChange: (event) => setRevokeState({
-														...revokeState,
-														otpCode: event.currentTarget.value,
-														error: null
-													})
-												}),
-												revokeState.error ? /* @__PURE__ */ jsx("span", {
-													id: `${otpInputId}-error`,
-													className: "seams-linked-devices-modal-error",
-													role: "alert",
-													children: revokeState.error
-												}) : null,
-												/* @__PURE__ */ jsxs("div", {
-													className: "seams-linked-devices-modal-confirm-actions",
-													children: [/* @__PURE__ */ jsx("button", {
-														type: "button",
-														className: "seams-linked-devices-modal-secondary",
-														disabled: revokeState.submitting,
-														onClick: () => setRevokeState({ kind: "idle" }),
-														children: "Keep it"
-													}), /* @__PURE__ */ jsx("button", {
-														type: "submit",
-														className: "seams-linked-devices-modal-danger",
-														disabled: revokeState.submitting,
-														children: revokeState.submitting ? "Removing…" : "Verify and remove"
-													})]
-												})
-											]
-										}) : confirming ? /* @__PURE__ */ jsxs("div", {
+										confirming ? /* @__PURE__ */ jsxs("div", {
 											className: "seams-linked-devices-modal-confirm",
 											children: [/* @__PURE__ */ jsxs("span", { children: [
 												"Remove ",

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

@@ -0,0 +1,303 @@
+import { base64UrlEncode } from "../../../shared-ts/src/utils/base64.js";
+import { parseWalletMoveId } from "../../../SeamsWeb/publicApi/placement.js";
+import { Component } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/WalletRegionSection.tsx
+const REGIONS = [
+	{
+		value: "US",
+		label: "United States"
+	},
+	{
+		value: "WEUR",
+		label: "Western Europe"
+	},
+	{
+		value: "APAC",
+		label: "Asia Pacific"
+	},
+	{
+		value: "OC",
+		label: "Oceania"
+	}
+];
+function regionName(value) {
+	return REGIONS.find(matchesRegion.bind(null, value)).label;
+}
+function matchesRegion(value, region) {
+	return region.value === value;
+}
+function renderRegion(region) {
+	return /* @__PURE__ */ jsx("option", {
+		value: region.value,
+		children: region.label
+	}, region.value);
+}
+function progressText(status) {
+	if (status.state === "completed") return "Your wallet is in the new region.";
+	const progress = status.move.progress;
+	if (progress.execution.state === "blocked") return "The move needs service recovery. Your wallet data remains preserved. You can lock this wallet while recovery continues.";
+	if (progress.execution.state === "retry_wait") return "The service will retry this stage. Closing or locking this wallet does not cancel the move.";
+	switch (progress.state) {
+		case "freezing": return "Preparing your wallet";
+		case "copying": return "Transferring wallet data";
+		case "verified": return "Checking the new region";
+		case "activating": return "Activating the new region";
+		case "cleanup": return "The new region is active. Source cleanup continues.";
+		default: return assertNever(progress);
+	}
+}
+function statusText(state) {
+	switch (state.kind) {
+		case "progress": return progressText(state.status);
+		case "loading": return "Checking wallet placement…";
+		case "submitting": return "Preparing your wallet";
+		case "ready":
+		case "uncertain":
+		case "unavailable": return "";
+		default: return assertNever(state);
+	}
+}
+function permitsWalletActions(state) {
+	switch (state.kind) {
+		case "ready": return true;
+		case "progress": return state.status.state === "completed" || state.status.move.progress.availability === "active";
+		case "loading":
+		case "submitting":
+		case "uncertain":
+		case "unavailable": return false;
+		default: return assertNever(state);
+	}
+}
+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
+			});
+		};
+	}
+	componentDidMount() {
+		this.mounted = true;
+		this.props.onAvailability(false);
+		this.load();
+	}
+	componentWillUnmount() {
+		this.mounted = false;
+		if (this.timer !== null) clearTimeout(this.timer);
+	}
+	commit(state) {
+		if (!this.mounted) return;
+		this.setState({ view: state });
+		this.props.onAvailability(permitsWalletActions(state));
+	}
+	async send(request) {
+		const revision = ++this.requestRevision;
+		if (this.timer !== null) {
+			clearTimeout(this.timer);
+			this.timer = null;
+		}
+		this.commit({
+			kind: "submitting",
+			request
+		});
+		try {
+			const result = await this.props.placement.move(request);
+			if (!this.mounted || revision !== this.requestRevision) return;
+			if (result.ok) {
+				this.showProgress(result.status);
+				return;
+			}
+		} catch {}
+		if (!this.mounted || revision !== this.requestRevision) return;
+		this.commit({
+			kind: "uncertain",
+			request,
+			message: "Reconnecting to check progress. Retry this same request to continue."
+		});
+		if (this.mounted) this.timer = setTimeout(this.poll, 1500);
+	}
+	showProgress(status) {
+		this.commit({
+			kind: "progress",
+			status
+		});
+		if (this.mounted && status.state === "moving") {
+			if (this.timer !== null) clearTimeout(this.timer);
+			this.timer = setTimeout(this.poll, 1500);
+		}
+	}
+	async readMove(request) {
+		const revision = this.requestRevision;
+		try {
+			const result = await this.props.placement.getMove(request.walletId, request.moveId);
+			if (!this.mounted || revision !== this.requestRevision) return;
+			if (result.ok) {
+				this.showProgress(result.status);
+				return;
+			}
+		} catch {}
+		if (!this.mounted || revision !== this.requestRevision) return;
+		this.commit({
+			kind: "uncertain",
+			request,
+			message: "Reconnecting to check progress. Unlock this wallet if authentication expired."
+		});
+		if (this.mounted) this.timer = setTimeout(this.poll, 1500);
+	}
+	render() {
+		const state = this.state.view;
+		return /* @__PURE__ */ jsxs("section", {
+			"aria-label": "Wallet region",
+			children: [/* @__PURE__ */ jsx("p", {
+				role: "status",
+				children: 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 "unavailable": return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+				role: "alert",
+				children: state.message
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "seams-settings-action",
+				onClick: this.load,
+				children: "Check again"
+			})] });
+			case "uncertain": return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+				role: "alert",
+				children: state.message
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "seams-settings-action",
+				onClick: this.retry,
+				children: "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 "ready": return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsxs("p", { children: ["Current region: ", /* @__PURE__ */ jsx("strong", { children: regionName(state.placement.region) })] }),
+				/* @__PURE__ */ jsxs("label", { children: [
+					"Destination region",
+					" ",
+					/* @__PURE__ */ jsx("select", {
+						value: state.selected,
+						onChange: this.select,
+						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." }),
+				state.placement.nextMoveAtMs > Date.now() ? /* @__PURE__ */ jsxs("p", { children: [
+					"Another move is available after",
+					" ",
+					new Date(state.placement.nextMoveAtMs).toLocaleString(),
+					"."
+				] }) : null,
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "seams-settings-action",
+					disabled: state.selected === state.placement.region || state.placement.nextMoveAtMs > Date.now(),
+					onClick: this.submit,
+					children: "Move wallet"
+				})
+			] });
+			default: return assertNever(state);
+		}
+	}
+};
+//#endregion
+export { WalletRegionSection };
+
+//# sourceMappingURL=WalletRegionSection.js.map

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

@@ -1,5 +1,5 @@
-import { SEAMS_STANDARD_WORDMARK_PATH } from "../../../core/signingEngine/uiConfirm/ui/seamsWordmarkPaths.js";
 import { blinkMenuItem } from "../../../utils/menuItemBlink.js";
+import { SEAMS_STANDARD_WORDMARK_PATH } from "../../../core/signingEngine/uiConfirm/ui/seamsWordmarkPaths.js";
 import { useSeams } from "../../context/index.js";
 import { useTheme } from "../theme/ThemeProvider.js";
 import { ScanIcon } from "./icons/ScanIcon.js";
@@ -11,6 +11,7 @@ import { RecoveryCodesIcon } from "./icons/RecoveryCodesIcon.js";
 import TouchIcon from "./icons/TouchIcon.js";
 import { PROFILE_MENU_ITEM_IDS } from "./types.js";
 import { LockIcon } from "./icons/LockIcon.js";
+import { WalletRegionSection } from "./WalletRegionSection.js";
 import SunIcon from "./icons/SunIcon.js";
 import MoonIcon from "./icons/MoonIcon.js";
 import React, { Component } from "react";
@@ -18,6 +19,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import "./WalletSettingsLayout.css";
 //#region src/react/components/AccountMenuButton/WalletSettingsLayout.tsx
 const SETTINGS_ITEMS = [
+	{
+		id: PROFILE_MENU_ITEM_IDS.WALLET_REGION,
+		label: "Wallet region",
+		description: "Choose where your wallet runs",
+		icon: /* @__PURE__ */ jsx(GlobeIcon, {})
+	},
 	{
 		id: PROFILE_MENU_ITEM_IDS.ACCOUNTS,
 		label: "Accounts",
@@ -84,7 +91,7 @@ function WalletSettingsHeader() {
 				className: "seams-settings-theme-toggle",
 				type: "button",
 				"aria-label": `Switch to ${nextTheme} mode`,
-				onClick: seams.setTheme.bind(seams, nextTheme),
+				onClick: seams.config.setTheme.bind(null, nextTheme),
 				children: [theme === "dark" ? /* @__PURE__ */ jsx(SunIcon, {
 					size: 20,
 					animate: false
@@ -100,10 +107,14 @@ var WalletSettingsLayout = class extends Component {
 	constructor(..._args) {
 		super(..._args);
 		this.state = {
+			regionReady: true,
 			selected: "authentication-methods",
 			mobileMenuOpen: false,
 			lock: { kind: "idle" }
 		};
+		this.regionAvailability = (regionReady) => {
+			this.setState({ regionReady });
+		};
 		this.heading = React.createRef();
 		this.select = (event) => {
 			const item = SETTINGS_ITEMS.find(this.matchesSelection.bind(null, event.currentTarget.dataset.section));
@@ -142,8 +153,9 @@ var WalletSettingsLayout = class extends Component {
 		this.renderItem = (item) => /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"data-section": item.id,
+			disabled: !this.state.regionReady && item.id !== "wallet-region",
 			onClick: this.select,
-			"aria-current": this.state.selected === item.id ? "page" : void 0,
+			"aria-current": (this.state.regionReady ? this.state.selected : "wallet-region") === item.id ? "page" : void 0,
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "seams-settings-nav-icon",
 				"aria-hidden": "true",
@@ -155,7 +167,9 @@ var WalletSettingsLayout = class extends Component {
 		return item.id === id;
 	}
 	render() {
-		const selected = SETTINGS_ITEMS.find(this.matchesSelection.bind(null, this.state.selected));
+		const selectedId = this.state.regionReady ? this.state.selected : "wallet-region";
+		const selected = SETTINGS_ITEMS.find(this.matchesSelection.bind(null, selectedId));
+		const regionAllowed = this.props.menuItems.some(regionSettingAvailable);
 		const available = this.props.menuItems.find(this.isAvailableSelection);
 		return /* @__PURE__ */ jsxs("div", {
 			className: "seams-settings-page",
@@ -217,12 +231,21 @@ var WalletSettingsLayout = class extends Component {
 							children: this.state.lock.message
 						}) : null,
 						/* @__PURE__ */ jsx("div", {
+							className: "seams-settings-content",
+							hidden: selected.id !== "wallet-region",
+							children: regionAllowed ? /* @__PURE__ */ jsx(WalletRegionSection, {
+								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." })
+						}),
+						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."
 							})
-						}, selected.id),
+						}, selected.id) : null,
 						/* @__PURE__ */ jsx("footer", { children: "Your wallet. Your control." })
 					]
 				})]
@@ -230,6 +253,9 @@ var WalletSettingsLayout = class extends Component {
 		});
 	}
 };
+function regionSettingAvailable(item) {
+	return item.id === "wallet-region" && !item.disabled;
+}
 //#endregion
 export { WalletSettingsHeader, WalletSettingsLayout };