@seams/wallet 0.27.0 → 0.29.0

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",

package/dist/esm/react/components/AccountMenuButton/Web3AuthProfileButton.css

@@ -574,7 +574,7 @@
   accent-color: var(--seams-colors-textPrimary);
 }
 
-[data-seams-root].seams-theme-provider dialog[data-seams-root].seams-account-modal {
+[data-seams-root].seams-theme-provider dialog[data-seams-root].seams-account-dialog {
   display: none;
   position: fixed;
   inset: 0;
@@ -596,16 +596,165 @@
   color: var(--seams-colors-textPrimary);
   box-shadow: none;
 }
-[data-seams-root].seams-theme-provider dialog[data-seams-root].seams-account-modal[open] {
+[data-seams-root].seams-theme-provider dialog[data-seams-root].seams-account-dialog[open] {
   display: block;
 }
-[data-seams-root].seams-theme-provider dialog[data-seams-root].seams-account-modal::backdrop {
+[data-seams-root].seams-theme-provider dialog[data-seams-root].seams-account-dialog::backdrop {
   background: rgb(0 0 0 / 0.26);
 }
-[data-seams-root].seams-theme-provider .seams-account-modal .seams-profile-button-morphable.open {
+[data-seams-root].seams-theme-provider .seams-account-dialog .seams-profile-button-morphable.open {
   width: 100%;
 }
-html:has(dialog[data-seams-root].seams-account-modal[open]) {
+html:has(dialog[data-seams-root].seams-account-dialog[open]) {
   overflow: hidden;
   scrollbar-gutter: stable;
 }
+
+[data-seams-root].seams-theme-provider
+  dialog[data-seams-root].seams-account-dialog[data-presentation='drawer'] {
+  --seams-account-drawer-offset: translateX(100%);
+  inset-block: 0;
+  inset-inline: auto 0;
+  margin: 0;
+  width: min(440px, 100vw);
+  max-width: 100vw;
+  height: 100dvh;
+  max-height: 100dvh;
+  border-radius: 0;
+  border-start-start-radius: var(--seams-border-radius-lg);
+  border-end-start-radius: var(--seams-border-radius-lg);
+  overflow: hidden;
+  background: var(--seams-colors-colorBackground);
+  box-shadow: var(--seams-shadows-xl);
+}
+@media (min-width: 601px) {
+  [data-seams-root].seams-theme-provider
+    dialog[data-seams-root].seams-account-dialog[data-presentation='drawer']:dir(rtl) {
+    --seams-account-drawer-offset: translateX(-100%);
+  }
+}
+[data-seams-root].seams-theme-provider .seams-account-dialog[data-presentation='drawer']::backdrop {
+  background: rgb(13 20 24 / 0.22);
+  transition: background-color 240ms ease;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer'][data-state='closing']::backdrop {
+  background: transparent;
+}
+@starting-style {
+  [data-seams-root].seams-theme-provider
+    .seams-account-dialog[data-presentation='drawer'][open]::backdrop {
+    background: transparent;
+  }
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-profile-button-morphable.open {
+  height: 100%;
+  border: 0;
+  border-radius: inherit;
+  box-shadow: none;
+  animation: none;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-account-resize {
+  height: 100%;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-account-panel-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-account-origin {
+  display: grid;
+  grid-template-columns: 14px 1fr 32px;
+  flex: none;
+  padding: var(--seams-spacing-lg) var(--seams-spacing-lg) 0;
+}
+[data-seams-root].seams-theme-provider h2.seams-account-drawer-title {
+  grid-column: 1 / -1;
+  color: var(--seams-colors-textPrimary);
+  font: inherit;
+  font-size: 25px;
+  font-weight: 550;
+  letter-spacing: -0.8px;
+  line-height: 1.2;
+  margin: var(--seams-spacing-md) 0 2px;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-account-main {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: calc(var(--seams-spacing-md) + var(--seams-spacing-xs)) var(--seams-spacing-lg)
+    var(--seams-spacing-lg);
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-account-main:has(> .seams-account-identity) {
+  display: flex;
+  flex-direction: column;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-account-identity {
+  flex: none;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-profile-dropdown-menu {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  button.seams-lock-menu-item {
+  margin-top: auto;
+  flex: none;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-account-menu-group:last-of-type {
+  margin-bottom: var(--seams-spacing-lg);
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-account-footer {
+  flex: none;
+  padding: var(--seams-spacing-md) var(--seams-spacing-lg);
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  button.seams-dropdown-menu-item {
+  min-height: 46px;
+}
+@media (max-width: 600px) {
+  [data-seams-root].seams-theme-provider
+    dialog[data-seams-root].seams-account-dialog[data-presentation='drawer'] {
+    --seams-account-drawer-offset: translateY(100%);
+    inset: auto 0 0;
+    width: 100%;
+    height: min(720px, calc(100dvh - 36px));
+    max-height: calc(100dvh - 36px);
+    border-radius: var(--seams-border-radius-lg) var(--seams-border-radius-lg) 0 0;
+  }
+  [data-seams-root].seams-theme-provider
+    .seams-account-dialog[data-presentation='drawer']
+    .seams-account-footer {
+    padding-bottom: max(var(--seams-spacing-md), env(safe-area-inset-bottom));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-seams-root].seams-theme-provider
+    .seams-account-dialog[data-presentation='drawer']::backdrop {
+    transition: none;
+  }
+}

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

@@ -115,15 +115,17 @@ const AccountMenuButtonInner = (props) => {
 	const accountMenuCapabilities = accountMenuCapabilitiesForLoginState(loginState);
 	const canShowRecoveryCodes = accountMenuCapabilities.kind === "owner" && Boolean(walletId);
 	const canManageLinkedDevices = accountMenuCapabilities.canManageLinkedDevices;
+	const canReadSettings = loginState.isLoggedIn && loginState.access === "external";
 	const handleQrCodeScanned = useCallback(() => {
 		setShowQRScanner(false);
 		handleClose();
 	}, [handleClose]);
 	useEffect(() => {
 		const switchedWallet = accountSetupState.kind !== "idle" && walletId !== null && walletId !== accountSetupState.walletId;
-		if (!canManageLinkedDevices && !accountSetupRunning && accountSetupState.kind !== "added" || switchedWallet) setScreen("overview");
+		if (!canManageLinkedDevices && !canReadSettings && !accountSetupRunning && accountSetupState.kind !== "added" || switchedWallet) setScreen("overview");
 	}, [
 		canManageLinkedDevices,
+		canReadSettings,
 		accountSetupRunning,
 		accountSetupState,
 		walletId
@@ -330,7 +332,7 @@ const AccountMenuButtonInner = (props) => {
 				icon: /* @__PURE__ */ jsx(TouchIcon, {}),
 				label: "Authentication methods",
 				description: "Add or remove ways to unlock this device",
-				disabled: !canManageLinkedDevices,
+				disabled: !canManageLinkedDevices && !canReadSettings,
 				onClick: setScreen.bind(null, "authentication-methods"),
 				keepOpenOnClick: true
 			}, {
@@ -346,7 +348,7 @@ const AccountMenuButtonInner = (props) => {
 				icon: /* @__PURE__ */ jsx(LinkIcon, {}),
 				label: "Linked devices",
 				description: "See devices using this wallet",
-				disabled: !canManageLinkedDevices,
+				disabled: !canManageLinkedDevices && !canReadSettings,
 				onClick: setScreen.bind(null, "linked-devices"),
 				keepOpenOnClick: true
 			});
@@ -372,6 +374,7 @@ const AccountMenuButtonInner = (props) => {
 		accountsRows.length,
 		layout,
 		accountMenuCapabilities,
+		canReadSettings,
 		canShowRecoveryCodes,
 		exportLoadingChain,
 		loginState.isLoggedIn,
@@ -491,6 +494,7 @@ const AccountMenuButtonInner = (props) => {
 		})
 	};
 	if (layout === "page" && loginState.isLoggedIn && walletId) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(WalletSettingsLayout, {
+		access: loginState.access,
 		walletId: toWalletId(walletId),
 		placement: seams.placement,
 		menuItems: MENU_ITEMS,

package/dist/esm/react/context/reactLoginStateBuilders.js

@@ -3,6 +3,7 @@ import { isWalletSessionReadyForUi } from "./walletSessionReadiness.js";
 //#region src/react/context/reactLoginStateBuilders.ts
 function linkedDeviceManagementPermissionForLoginState(state) {
 	if (!state.isLoggedIn) return { kind: "unauthenticated" };
+	if (state.access === "external") return { kind: "settings_only" };
 	if (state.currentAuthMethod.kind !== "selected") return { kind: "signing_only" };
 	return { kind: "owner" };
 }
@@ -24,6 +25,11 @@ function accountMenuCapabilitiesForLoginState(state) {
 			canExportKeys: false,
 			canManageLinkedDevices: false
 		};
+		case "settings_only": return {
+			kind: "settings_only",
+			canExportKeys: false,
+			canManageLinkedDevices: false
+		};
 	}
 	return assertNeverAccountMenuPermission(management);
 }
@@ -47,8 +53,21 @@ function buildReactLoggedInLoginStateFromSession(session) {
 	if (session.appIdentity.kind !== "resolved") return null;
 	const appIdentity = session.appIdentity;
 	const authentication = session.authentication;
+	if (session.externalSettings) return {
+		isLoggedIn: true,
+		access: "external",
+		externalSettings: session.externalSettings,
+		walletId: String(appIdentity.walletId),
+		nearAccountId: appIdentity.nearAccountId ? String(appIdentity.nearAccountId) : null,
+		nearPublicKey: appIdentity.nearOperationalPublicKey,
+		currentAuthMethod: buildNoCurrentWalletAuthMethod(),
+		authMethods: [],
+		thresholdEcdsaEthereumAddress: appIdentity.thresholdEcdsaEthereumAddress,
+		thresholdEcdsaPublicKeyB64u: appIdentity.thresholdEcdsaPublicKeyB64u
+	};
 	if (authentication.kind === "authenticated" && session.appIdentity.authMethods.length === 0) return {
 		isLoggedIn: true,
+		access: "wallet",
 		walletId: String(appIdentity.walletId),
 		nearAccountId: appIdentity.nearAccountId ? String(appIdentity.nearAccountId) : null,
 		nearPublicKey: appIdentity.nearOperationalPublicKey,
@@ -63,6 +82,7 @@ function buildReactLoggedInLoginStateFromSession(session) {
 	const currentAuthMethod = buildSelectedCurrentWalletAuthMethod({ binding: matchingAuthMethods[0] });
 	return {
 		isLoggedIn: true,
+		access: "wallet",
 		walletId: String(appIdentity.walletId),
 		nearAccountId: appIdentity.nearAccountId ? String(appIdentity.nearAccountId) : null,
 		nearPublicKey: appIdentity.nearOperationalPublicKey,

package/dist/esm/react/context/useLoginStateRefresher.js

@@ -31,6 +31,7 @@ function useLoginStateRefresher(args) {
 					const state = await seams.getWalletIframeExactSessionState();
 					if (generation !== refreshGeneration.current || selectedWallet !== seams.preferences.getCurrentWalletId()) return;
 					switch (state.kind) {
+						case "external_read":
 						case "active_session":
 						case "expired_session":
 						case "wallet_authenticated_identity_unresolvable":