@seams/wallet 0.27.0 → 0.28.0

package/dist/.build-inputs.sha256

@@ -1 +1 @@
-454b5591bcd47936d9aea9092966bd446c1e755578e6e1accdd9831099483a70
+ea177740b9a568b4deea722dc18528d4cbfd4098970381660360b3bd1003291b

package/dist/esm/SeamsWeb/walletIframe/client/router.js

@@ -1903,6 +1903,44 @@ var WalletIframeRouter = class {
 			}
 		}, { timeout: "interactive" })).result;
 	}
+	async authenticate(input) {
+		return (await this.post({
+			type: "PM_EXTERNAL_AUTH",
+			payload: {
+				action: "authenticate",
+				input
+			}
+		})).result;
+	}
+	async prepareExternalAuth(walletId) {
+		return (await this.post({
+			type: "PM_EXTERNAL_AUTH",
+			payload: {
+				action: "prepare",
+				walletId
+			}
+		})).result;
+	}
+	async removeExternalAuth(input) {
+		return (await this.post({
+			type: "PM_EXTERNAL_AUTH",
+			payload: {
+				action: "unlink",
+				walletId: input.walletId,
+				associationId: input.associationId
+			}
+		})).result;
+	}
+	async associateExternalAuth(input) {
+		return (await this.post({
+			type: "PM_EXTERNAL_AUTH",
+			payload: {
+				action: "associate",
+				walletId: input.walletId,
+				idToken: input.idToken
+			}
+		})).result;
+	}
 	async getWalletSession(walletId) {
 		const expectedWalletId = walletId === void 0 ? void 0 : parseRequestedWalletId(walletId);
 		if (!this.state.ready || !this.state.port) await this.init();

package/dist/esm/SeamsWeb/walletIframe/client/sessionCommands.js

@@ -3,6 +3,10 @@ import { walletIframeUnlockRequestFromLoginHooks } from "../shared/unlockOptions
 //#region src/SeamsWeb/walletIframe/client/sessionCommands.ts
 function createApplicationSessionCommands(walletIframe) {
 	return {
+		authenticate: authenticate.bind(null, walletIframe),
+		prepareExternalAuth: prepareExternalAuth.bind(null, walletIframe),
+		associateExternalAuth: associateExternalAuth.bind(null, walletIframe),
+		removeExternalAuth: removeExternalAuth.bind(null, walletIframe),
 		unlock: unlock.bind(null, walletIframe),
 		unlockWithAuthMethod: unlockWithAuthMethod.bind(null, walletIframe),
 		lock: lock.bind(null, walletIframe),
@@ -11,6 +15,18 @@ function createApplicationSessionCommands(walletIframe) {
 		hasPasskey: hasPasskey.bind(null, walletIframe)
 	};
 }
+async function authenticate(walletIframe, input) {
+	return (await walletIframe.requireRouter()).authenticate(input);
+}
+async function prepareExternalAuth(walletIframe, walletId) {
+	return (await walletIframe.requireRouter()).prepareExternalAuth(walletId);
+}
+async function associateExternalAuth(walletIframe, input) {
+	return (await walletIframe.requireRouter()).associateExternalAuth(input);
+}
+async function removeExternalAuth(walletIframe, input) {
+	return (await walletIframe.requireRouter()).removeExternalAuth(input);
+}
 async function unlock(walletIframe, walletId, options) {
 	const resolvedWalletId = String(walletId || "").trim();
 	if (!resolvedWalletId) throw new Error("unlock requires walletId");

package/dist/esm/SeamsWeb/walletIframe/host/walletMutationGuard.js

@@ -44,6 +44,7 @@ function walletForHostRequest(request, currentWalletId) {
 		case "PM_REGISTER_WALLET":
 		case "PM_UNLOCK":
 		case "PM_UNLOCK_AUTH_METHOD":
+		case "PM_EXTERNAL_AUTH":
 		case "PM_LOCK":
 		case "PM_LOCK_EXACT_WALLET_SESSION":
 		case "PM_GET_LAST_WALLET_MOVE_REQUEST":

package/dist/esm/SeamsWeb/walletIframe/shared/exactSessionState.js

@@ -6,6 +6,7 @@ import "../../../shared-ts/src/device-linking/activeWalletSession.js";
 import { parseWalletAuthAuthorityRef } from "../../../shared-ts/src/utils/walletAuthAuthority.js";
 import { toAccountId } from "../../../core/types/accountIds.js";
 import { isWalletAuthMethod } from "../../../shared-ts/src/utils/signerDomain.js";
+import { parseExternalWalletAuthentication, parseExternalWalletSettings } from "../../../shared-ts/src/auth/externalAuth.js";
 import { NonceCoordinatorDegradationReason, NonceCoordinatorFallback, NonceLeaseState } from "../../../core/signingEngine/nonce/nonceTypes.js";
 import { parseEcdsaThresholdKeyId } from "../../../core/signingEngine/session/keyMaterialBrands.js";
 import { parseNearEd25519SigningKeyId } from "../../../shared-ts/src/utils/registrationIds.js";
@@ -89,12 +90,33 @@ function parseWalletIframeExactSessionState(value) {
 function parseWalletSessionFromBoundary(value, expectedWalletId) {
 	if (value === null || typeof value !== "object" || Array.isArray(value)) throw new Error("Wallet Session must be an object");
 	if (Reflect.get(value, "reusableWalletSession") !== void 0) throw new Error("Wallet Session contains removed reusable-session fields");
-	const parsed = {
-		appIdentity: parseWalletSessionAppIdentity(Reflect.get(value, "appIdentity")),
-		authentication: parseWalletAuthenticationState(Reflect.get(value, "authentication")),
-		capabilityProjection: parseWalletSessionCapabilityProjection(Reflect.get(value, "capabilityProjection")),
+	const appIdentity = parseWalletSessionAppIdentity(Reflect.get(value, "appIdentity"));
+	const authentication = parseWalletAuthenticationState(Reflect.get(value, "authentication"));
+	const capabilityProjection = parseWalletSessionCapabilityProjection(Reflect.get(value, "capabilityProjection"));
+	const common = {
+		appIdentity,
 		nonceDiagnostics: parseNullableNonceDiagnostics(Reflect.get(value, "nonceDiagnostics"))
 	};
+	let parsed;
+	if (authentication.kind === "external_authenticated") {
+		if (appIdentity.kind !== "resolved") throw new Error("External authentication requires a resolved wallet");
+		if (common.nonceDiagnostics !== null) throw new Error("External authentication has no signing runtime");
+		if (capabilityProjection.kind !== "not_requested") throw new Error("External authentication cannot grant signing capabilities");
+		const externalSettings = parseExternalWalletSettings(Reflect.get(value, "externalSettings"));
+		if (externalSettings.authentication.sessionId !== authentication.sessionId || externalSettings.authentication.walletId !== authentication.walletId || externalSettings.authentication.associationId !== authentication.associationId || externalSettings.authentication.environmentId !== authentication.environmentId || externalSettings.authentication.expiresAtMs !== authentication.expiresAtMs) throw new Error("External settings identity mismatch");
+		parsed = {
+			appIdentity,
+			nonceDiagnostics: common.nonceDiagnostics,
+			authentication,
+			capabilityProjection,
+			externalSettings
+		};
+	} else parsed = {
+		appIdentity: common.appIdentity,
+		nonceDiagnostics: common.nonceDiagnostics,
+		authentication,
+		capabilityProjection
+	};
 	const expected = expectedWalletId === void 0 ? null : requireWalletId(expectedWalletId);
 	const canonicalWalletId = walletSessionCanonicalWalletId(parsed);
 	if (expected !== null && canonicalWalletId === null) throw new Error("Wallet iframe Wallet Session omitted the requested wallet identity");
@@ -106,6 +128,7 @@ function parseWalletAuthenticationState(value) {
 	if (value === null || typeof value !== "object" || Array.isArray(value)) throw new Error("Wallet Session authentication must be an object");
 	switch (Reflect.get(value, "kind")) {
 		case "signed_out": return { kind: "signed_out" };
+		case "external_authenticated": return parseExternalWalletAuthentication(value);
 		case "authenticated": {
 			const authMethod = Reflect.get(value, "authMethod");
 			if (!isWalletAuthMethod(authMethod)) throw new Error("Wallet Session authentication method is invalid");

package/dist/esm/SeamsWeb/walletIframe/shared/messages.js

@@ -470,7 +470,7 @@ function parseHostedAuthMenuOutcome(value) {
 		default: return null;
 	}
 }
-const WALLET_PROTOCOL_VERSION = "17.0.0";
+const WALLET_PROTOCOL_VERSION = "18.0.0";
 const WALLET_IFRAME_PROTOCOL_VERSION_MISMATCH = "WALLET_IFRAME_PROTOCOL_VERSION_MISMATCH";
 const HOSTED_WALLET_REDEMPTION_PAYLOAD_FIELDS = [
 	"home",

package/dist/esm/core/authMethods/plugins.js

@@ -5,12 +5,18 @@ function parseWalletAuthMethodPlugins(value) {
 	const plugins = [];
 	const seen = /* @__PURE__ */ new Set();
 	for (const candidate of value) {
-		if (!isPlainObject(candidate) || Object.keys(candidate).length !== 1 || candidate.kind !== "voiceid" || seen.has(candidate.kind)) throw new Error("Unsupported or duplicate wallet auth method plugin.");
+		if (!isPlainObject(candidate) || Object.keys(candidate).some(unknownVoiceIdOption) || candidate.kind !== "voiceid" || candidate.transcriptionModel !== void 0 && candidate.transcriptionModel !== "aurora" && candidate.transcriptionModel !== "citrinet" || seen.has(candidate.kind)) throw new Error("Unsupported or duplicate wallet auth method plugin.");
 		seen.add(candidate.kind);
-		plugins.push({ kind: "voiceid" });
+		plugins.push({
+			kind: "voiceid",
+			transcriptionModel: candidate.transcriptionModel ?? "citrinet"
+		});
 	}
 	return plugins;
 }
+function unknownVoiceIdOption(key) {
+	return key !== "kind" && key !== "transcriptionModel";
+}
 //#endregion
 export { parseWalletAuthMethodPlugins };
 

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

@@ -305,6 +305,11 @@ const walletMessages = [
 	["Dark mode", "ダークモード"],
 	["Unable to lock your wallet. Try again.", "ウォレットをロックできません。もう一度お試しください。"],
 	["Unlocked on this device", "このデバイスでロック解除済み"],
+	["Connected with Google", "Google で接続中"],
+	["Wallet access", "ウォレットへのアクセス"],
+	["Connected to your wallet", "ウォレットに接続しています"],
+	["Method {value0}", "認証方法 {value0}"],
+	["Confirm with a wallet authentication method to make security changes.", "セキュリティ設定を変更するには、ウォレットの認証方法で本人確認してください。"],
 	["All settings", "すべての設定"],
 	["Locking…", "ロック中…"],
 	["Lock wallet", "ウォレットをロック"],

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

@@ -4,7 +4,7 @@ import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
 import TouchIcon from "./icons/TouchIcon.js";
 import { UserAccountButton } from "./UserAccountButton.js";
 import { ProfileDropdown } from "./ProfileDropdown.js";
-import { AccountMenuModal } from "./AccountMenuModal.js";
+import { AccountSettingsDialog } from "./AccountSettingsDialog.js";
 import { LockKeyholeIcon } from "./icons/LockKeyholeIcon.js";
 import { useLayoutEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -13,9 +13,9 @@ import "./Web3AuthProfileButton.css";
 function measurePanel(element, setHeight) {
 	setHeight(element.offsetHeight);
 }
-function observePanel(contentRef, isOpen, setHeight) {
+function observePanel(contentRef, isOpen, presentation, setHeight) {
 	const content = contentRef.current;
-	if (!content || !isOpen) {
+	if (!content || !isOpen || presentation === "drawer") {
 		setHeight(null);
 		return;
 	}
@@ -28,14 +28,14 @@ function observePanel(contentRef, isOpen, setHeight) {
 function closeWithEscape(presentation, onClose, event) {
 	if (event.key !== "Escape" || event.defaultPrevented) return;
 	event.preventDefault();
-	if (presentation === "modal") event.stopPropagation();
+	if (presentation !== "dropdown") event.stopPropagation();
 	onClose();
 }
-function revealModalScreen(presentation, event) {
-	if (presentation !== "modal" || !(event.target instanceof HTMLElement)) return;
+function revealDialogScreen(presentation, event) {
+	if (presentation === "dropdown" || !(event.target instanceof HTMLElement)) return;
 	if (!event.target.matches(".seams-account-heading h2, .seams-account-identity")) return;
-	const dialog = event.currentTarget.closest("dialog.seams-account-modal");
-	if (dialog instanceof HTMLDialogElement) dialog.scrollTop = 0;
+	const scrollArea = presentation === "drawer" ? event.target.closest(".seams-account-main") : event.currentTarget.closest("dialog.seams-account-dialog");
+	if (scrollArea) scrollArea.scrollTop = 0;
 }
 function restoreTriggerFocus(buttonRef, previousOpen, isOpen) {
 	if (previousOpen.current && !isOpen) buttonRef.current?.querySelector("[aria-expanded]")?.focus({ preventScroll: true });
@@ -55,20 +55,21 @@ function AccountMenuButtonView({ presentation, buttonRef, dropdownRef, trigger,
 	const previousOpen = useRef(trigger.isOpen);
 	useLayoutEffect(restoreTriggerFocus.bind(null, buttonRef, previousOpen, trigger.isOpen), [buttonRef, trigger.isOpen]);
 	const [height, setHeight] = useState(null);
-	useLayoutEffect(observePanel.bind(null, contentRef, trigger.isOpen, setHeight), [trigger.isOpen, presentation]);
+	useLayoutEffect(observePanel.bind(null, contentRef, trigger.isOpen, presentation, setHeight), [trigger.isOpen, presentation]);
+	const panelOpen = presentation !== "dropdown" || trigger.isOpen;
 	const panel = /* @__PURE__ */ jsx("div", {
 		ref: buttonRef,
-		className: `seams-profile-button-morphable ${trigger.isOpen ? "open" : "closed"} ${className ?? ""}`,
-		style: trigger.isOpen ? style : {
+		className: `seams-profile-button-morphable ${panelOpen ? "open" : "closed"} ${className ?? ""}`,
+		style: panelOpen ? style : {
 			...style,
 			width: "fit-content"
 		},
-		"data-state": trigger.isOpen ? "open" : "closed",
-		onFocusCapture: revealModalScreen.bind(null, presentation),
-		children: trigger.isOpen ? /* @__PURE__ */ jsx("div", {
+		"data-state": panelOpen ? "open" : "closed",
+		onFocusCapture: revealDialogScreen.bind(null, presentation),
+		children: panelOpen ? /* @__PURE__ */ jsx("div", {
 			className: "seams-account-resize",
 			onKeyDown: closeWithEscape.bind(null, presentation, dropdown.onClose),
-			style: { height: height ?? void 0 },
+			style: { height: presentation === "drawer" ? void 0 : height ?? void 0 },
 			children: /* @__PURE__ */ jsxs("div", {
 				ref: contentRef,
 				className: "seams-account-panel-content",
@@ -92,7 +93,11 @@ function AccountMenuButtonView({ presentation, buttonRef, dropdownRef, trigger,
 									strokeWidth: "1.5",
 									children: /* @__PURE__ */ jsx("path", { d: "m6 6 12 12M18 6 6 18" })
 								})
-							})
+							}),
+							presentation === "drawer" ? /* @__PURE__ */ jsx("h2", {
+								className: "seams-account-drawer-title",
+								children: /* @__PURE__ */ jsx(WalletText, { message: "Wallet settings" })
+							}) : null
 						]
 					}),
 					/* @__PURE__ */ jsx("div", {
@@ -131,12 +136,20 @@ function AccountMenuButtonView({ presentation, buttonRef, dropdownRef, trigger,
 			})
 		}) : /* @__PURE__ */ jsx(UserAccountButton, { ...trigger })
 	});
-	if (presentation === "modal") return /* @__PURE__ */ jsx(AccountMenuModal, {
-		isOpen: trigger.isOpen,
-		onClose: dropdown.onClose,
-		children: panel
-	});
-	return panel;
+	switch (presentation) {
+		case "dropdown": return panel;
+		case "modal":
+		case "drawer": return /* @__PURE__ */ jsx(AccountSettingsDialog, {
+			presentation,
+			isOpen: trigger.isOpen,
+			onClose: dropdown.onClose,
+			children: panel
+		});
+		default: return assertNever(presentation);
+	}
+}
+function assertNever(value) {
+	throw new Error(`Unsupported account menu presentation: ${String(value)}`);
 }
 //#endregion
 export { AccountMenuButtonView };

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

@@ -0,0 +1,157 @@
+import { walletText } from "../../../core/ui/messages.js";
+import { useWalletLocale } from "../../context/WalletLocale.js";
+import { Theme, useTheme } from "../theme/ThemeProvider.js";
+import { Component } from "react";
+import { createPortal } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/AccountSettingsDialog.tsx
+const DRAWER_DURATION_MS = 240;
+const DRAWER_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+function ignoreCancelledAnimation() {}
+function assertNever(value) {
+	throw new Error(`Unsupported settings dialog state: ${String(value)}`);
+}
+function isBackdrop(event) {
+	if (event.target !== event.currentTarget) return false;
+	const bounds = event.currentTarget.getBoundingClientRect();
+	return event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom;
+}
+var SettingsDialog = class extends Component {
+	state = { dialog: { kind: "closed" } };
+	dialog = null;
+	motion = null;
+	startedOutside = false;
+	static getDerivedStateFromProps(props, state) {
+		if (props.isOpen) return { dialog: {
+			kind: "open",
+			content: props.children
+		} };
+		switch (state.dialog.kind) {
+			case "closed": return null;
+			case "open":
+				if (props.presentation === "modal") return { dialog: { kind: "closed" } };
+				return { dialog: {
+					kind: "closing",
+					content: state.dialog.content
+				} };
+			case "closing": return props.presentation === "modal" ? { dialog: { kind: "closed" } } : null;
+			default: return assertNever(state.dialog);
+		}
+	}
+	componentDidMount() {
+		this.syncDialog("closed", this.props.presentation);
+	}
+	componentDidUpdate(previousProps, previousState) {
+		this.syncDialog(previousState.dialog.kind, previousProps.presentation);
+	}
+	componentWillUnmount() {
+		this.clearMotion();
+		this.dialog?.close();
+	}
+	setDialog = (dialog) => {
+		if (dialog === this.dialog) return;
+		this.clearMotion();
+		this.dialog?.close();
+		this.dialog = dialog;
+	};
+	clearMotion() {
+		this.motion?.cancel();
+		this.motion = null;
+	}
+	syncDialog(previous, presentation) {
+		const dialog = this.dialog;
+		if (!dialog) return;
+		dialog.inert = this.state.dialog.kind === "closing";
+		if (!dialog.open) dialog.showModal();
+		if (this.props.presentation === "modal") {
+			this.clearMotion();
+			return;
+		}
+		if (previous === this.state.dialog.kind && presentation === this.props.presentation) return;
+		if (previous === "closing" && this.state.dialog.kind === "open") dialog.querySelector(".seams-account-close")?.focus({ preventScroll: true });
+		this.animateDrawer(previous === "closed" || presentation !== this.props.presentation);
+	}
+	animateDrawer(entering) {
+		const dialog = this.dialog;
+		if (!dialog) return;
+		const computed = getComputedStyle(dialog);
+		const offset = computed.getPropertyValue("--seams-account-drawer-offset").trim();
+		const from = entering ? offset : computed.transform;
+		this.clearMotion();
+		if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
+			if (this.state.dialog.kind === "closing") this.setState({ dialog: { kind: "closed" } });
+			return;
+		}
+		const to = this.state.dialog.kind === "closing" ? offset : "none";
+		const animation = dialog.animate([{ transform: from }, { transform: to }], {
+			duration: DRAWER_DURATION_MS,
+			easing: DRAWER_EASING,
+			fill: "both"
+		});
+		this.motion = animation;
+		animation.finished.then(this.finishMotion.bind(this, animation), ignoreCancelledAnimation);
+	}
+	finishMotion(animation) {
+		if (this.motion !== animation) return;
+		if (this.state.dialog.kind === "closing") {
+			this.setState({ dialog: { kind: "closed" } });
+			return;
+		}
+		this.clearMotion();
+	}
+	requestClose = () => {
+		if (this.state.dialog.kind === "open") this.props.onClose();
+	};
+	rememberBackdrop = (event) => {
+		this.startedOutside = isBackdrop(event);
+	};
+	closeBackdrop = (event) => {
+		const shouldClose = this.startedOutside && isBackdrop(event);
+		this.startedOutside = false;
+		if (!shouldClose) return;
+		event.stopPropagation();
+		this.requestClose();
+	};
+	cancelDialog = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		this.requestClose();
+	};
+	render() {
+		if (this.state.dialog.kind === "closed" || typeof document === "undefined") return null;
+		return createPortal(/* @__PURE__ */ jsx(Theme, {
+			tag: "div",
+			theme: this.props.theme,
+			tokens: { [this.props.theme]: this.props.tokens },
+			children: /* @__PURE__ */ jsx("dialog", {
+				ref: this.setDialog,
+				"data-seams-root": "",
+				"data-presentation": this.props.presentation,
+				"data-state": this.state.dialog.kind,
+				className: "seams-account-dialog",
+				"aria-label": this.props.label,
+				onCancel: this.cancelDialog,
+				onPointerDown: this.rememberBackdrop,
+				onClick: this.closeBackdrop,
+				children: this.state.dialog.content
+			})
+		}), document.body);
+	}
+};
+function AccountSettingsDialog(props) {
+	const locale = useWalletLocale();
+	const { theme, tokens } = useTheme();
+	return /* @__PURE__ */ jsx(SettingsDialog, {
+		presentation: props.presentation,
+		isOpen: props.isOpen,
+		onClose: props.onClose,
+		theme,
+		tokens,
+		label: walletText(locale, "Wallet settings"),
+		children: props.children
+	});
+}
+//#endregion
+export { AccountSettingsDialog };
+
+//# sourceMappingURL=AccountSettingsDialog.js.map

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

@@ -2,6 +2,7 @@ import { walletDisplayText, walletText } from "../../../core/ui/messages.js";
 import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
 import { useSeams } from "../../context/index.js";
 import { AccountMenuDialogFrame } from "./AccountMenuDialog.js";
+import { ExternalWalletSettingsView } from "./ExternalWalletSettings.js";
 import { AuthenticationMethodRow } from "./AuthenticationMethodRow.js";
 import { VoiceIdMethodRow, VoiceIdSetupRow } from "./VoiceIdAvailabilityControl.js";
 import { AuthenticationMethodsView } from "./AuthenticationMethodsView.js";
@@ -115,7 +116,18 @@ function methodDescription(method) {
 		case "voiceid": return "Voice unlock on this device";
 	}
 }
-const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation }) => {
+function AuthenticationMethodsModal(props) {
+	const { loginState } = useSeams();
+	if (!props.isOpen) return null;
+	if (loginState.isLoggedIn && loginState.access === "external") return /* @__PURE__ */ jsx(ExternalWalletSettingsView, {
+		settings: loginState.externalSettings,
+		view: "methods",
+		presentation: props.presentation,
+		onClose: props.onClose
+	});
+	return /* @__PURE__ */ jsx(OwnerAuthenticationMethodsModal, { ...props });
+}
+const OwnerAuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation }) => {
 	const locale = useWalletLocale();
 	const { seams, loginState, refreshSession } = useSeams();
 	const [loadState, setLoadState] = React.useState({ kind: "idle" });

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

@@ -0,0 +1,46 @@
+import { walletText } from "../../../core/ui/messages.js";
+import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
+import { AccountMenuDialogFrame } from "./AccountMenuDialog.js";
+import { AccountMenuDeviceDetails } from "./AccountMenuDeviceDetails.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/ExternalWalletSettings.tsx
+function ExternalWalletSettingsView(props) {
+	const locale = useWalletLocale();
+	const ref = useRef(null);
+	const title = props.view === "methods" ? "Authentication methods" : "Linked devices";
+	const details = props.view === "methods" ? props.settings.methods.map(methodDetail.bind(null, locale)) : props.settings.devices.map(deviceDetail.bind(null, locale));
+	return /* @__PURE__ */ jsxs(AccountMenuDialogFrame, {
+		presentation: props.presentation,
+		onClose: props.onClose,
+		dialogRef: ref,
+		contentClassName: "",
+		titleId: `external-wallet-${props.view}`,
+		title,
+		children: [/* @__PURE__ */ jsx(AccountMenuDeviceDetails, {
+			title: "Wallet access",
+			description: "Connected to your wallet",
+			details
+		}), /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(WalletText, { message: "Confirm with a wallet authentication method to make security changes." }) })]
+	});
+}
+function methodDetail(locale, method, index) {
+	return {
+		label: walletText(locale, "Method {value0}", { value0: index + 1 }),
+		value: {
+			passkey: "Passkey",
+			email_otp: "Email code",
+			voiceid: "VoiceID"
+		}[method.kind]
+	};
+}
+function deviceDetail(locale, _device, index) {
+	return {
+		label: walletText(locale, "Device {value0}", { value0: index + 1 }),
+		value: "Active"
+	};
+}
+//#endregion
+export { ExternalWalletSettingsView };
+
+//# sourceMappingURL=ExternalWalletSettings.js.map

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

@@ -1,8 +1,9 @@
 import { walletDisplayText, walletText } from "../../../core/ui/messages.js";
 import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
 import { useSeams } from "../../context/index.js";
-import { AccountMenuDeviceDetails } from "./AccountMenuDeviceDetails.js";
 import { AccountMenuDialogFrame } from "./AccountMenuDialog.js";
+import { AccountMenuDeviceDetails } from "./AccountMenuDeviceDetails.js";
+import { ExternalWalletSettingsView } from "./ExternalWalletSettings.js";
 import { MailIcon } from "./icons/MailIcon.js";
 import { AuthenticationMethodRow } from "./AuthenticationMethodRow.js";
 import { LaptopIcon } from "./icons/LaptopIcon.js";
@@ -214,7 +215,18 @@ function withLinkedDevicesLoadTimeout(promise) {
 		});
 	});
 }
-const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation }) => {
+function LinkedDevicesModal(props) {
+	const { loginState } = useSeams();
+	if (!props.isOpen) return null;
+	if (loginState.isLoggedIn && loginState.access === "external") return /* @__PURE__ */ jsx(ExternalWalletSettingsView, {
+		settings: loginState.externalSettings,
+		view: "devices",
+		presentation: props.presentation,
+		onClose: props.onClose
+	});
+	return /* @__PURE__ */ jsx(OwnerLinkedDevicesModal, { ...props });
+}
+const OwnerLinkedDevicesModal = ({ walletId, isOpen, onClose, presentation }) => {
 	const locale = useWalletLocale();
 	const { seams, loginState } = useSeams();
 	const [loadState, setLoadState] = React.useState({ kind: "idle" });

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

@@ -182,7 +182,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: /* @__PURE__ */ jsx(WalletText, { message: "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, { copy: this.props.access === "external" ? "Connected with Google" : "Unlocked on this device" }) })] })]
 						}),
 						/* @__PURE__ */ jsx("button", {
 							className: "seams-settings-mobile-toggle",