@seams/wallet 0.24.0 → 0.27.0

package/dist/esm/core/indexedDB/seamsWalletDB/repositories.js

@@ -2651,6 +2651,13 @@ var SeamsWalletRepositories = class {
 		], "readwrite", this.replaceExactActiveWalletSessionFromStatusInTransaction.bind(this, input));
 	}
 	async replaceExactActiveWalletSessionFromStatusInTransaction(input, ctx) {
+		const current = await readExactActiveWalletSessionForScopeInTransaction({
+			ctx,
+			walletId: input.active.walletId,
+			authorityId: input.active.authorityId,
+			authMethodId: input.active.authMethodId
+		});
+		if (current.kind !== "found" || current.operationCredential.token !== input.operationCredential.token || current.operationCredential.walletSessionId !== input.operationCredential.walletSessionId) return { kind: "superseded" };
 		const authority = parseWalletAuthorityStorageRow(await ctx.store(SEAMS_WALLET_STORES.walletAuthorities).get(input.active.authorityId));
 		const selection = parseWalletSelectionStorageRow(await ctx.store(SEAMS_WALLET_STORES.walletSelections).get(input.active.walletId));
 		if (!authority || authority.record.state !== "active" || authority.record.walletId !== input.active.walletId || authority.record.authorityDigestB64u !== input.active.authorityDigestB64u || authority.record.revocationEpoch !== input.active.authorityRevocationEpoch || !selection || selection.record.lockState !== "unlocked" || selection.record.walletAuthMethodId !== input.active.authMethodId) return { kind: "superseded" };
@@ -4326,6 +4333,6 @@ var SeamsWalletRepositories = class {
 	}
 };
 //#endregion
-export { SeamsWalletRepositories, parseWalletAuthMethodV2StorageRow, parseWalletAuthorityStorageRow, parseWalletSelectionStorageRow };
+export { SeamsWalletRepositories, parseWalletAuthMethodV2StorageRow, parseWalletAuthorityStorageRow, parseWalletSelectionStorageRow, walletAuthorityStorageRow };
 
 //# sourceMappingURL=repositories.js.map

package/dist/esm/core/rpcClients/near/NearClient.js

@@ -1,13 +1,20 @@
+import { requireCanonicalString } from "../../../shared-ts/src/utils/validation.js";
 import { errorMessage } from "../../../shared-ts/src/utils/errors.js";
 import { NearJsonRpcClient, SignedTransaction as SignedTransaction$1 } from "../../../shared-ts/src/near/nearClient.js";
 import { NearRpcError } from "./NearRpcError.js";
 //#region src/core/rpcClients/near/NearClient.ts
 var SignedTransaction = class SignedTransaction extends SignedTransaction$1 {
+	transactionHash;
+	constructor(input) {
+		super(input);
+		this.transactionHash = input.transactionHash;
+	}
 	static fromPlain(input) {
 		return new SignedTransaction({
 			transaction: input.transaction,
 			signature: input.signature,
 			borsh_bytes: input.borsh_bytes,
+			transactionHash: requireCanonicalString(input.transactionHash, "signed transaction hash"),
 			...input.nonceLease ? { nonceLease: input.nonceLease } : {},
 			...input.serverDispatch ? { serverDispatch: input.serverDispatch } : {}
 		});

package/dist/esm/core/rpcClients/relayer/walletSessionAuthorizationStatus.js

@@ -122,6 +122,13 @@ var WalletSessionStatusReadScope = class WalletSessionStatusReadScope {
 			for (const key of [...sessions.keys()]) if (key.startsWith(credentialKey)) sessions.delete(key);
 		}
 	}
+	/** Recovery changes the authority projected by an existing session. */
+	invalidateCredential(token) {
+		const credentialKey = statusCredentialKey(token);
+		for (const reads of this.readsByFetch.values()) for (const key of reads.keys()) if (key.startsWith(credentialKey)) reads.delete(key);
+		this.suppliedStatus = { kind: "remote" };
+		WalletSessionStatusReadScope.forgetCredential(token);
+	}
 	static observationForConfirmation(options, identity) {
 		return observationsByFetch.get(options.fetchImpl ?? defaultStatusFetch)?.get(statusIdentityKey(options, identity)) ?? null;
 	}

package/dist/esm/core/signingEngine/flows/signNear/signTransactions.js

@@ -908,12 +908,15 @@ function toSignedTransactionResult(args) {
 	const signedTx = signedTransactions[0];
 	if (!signedTx || !signedTx.transaction || !signedTx.signature) throw new Error("Incomplete signed transaction data received");
 	const nonceLease = args.nonceLeases?.[0];
+	const transactionHash = args.okResponse.payload.transactionHashes?.[0];
+	if (!transactionHash) throw new Error("Signed transaction is missing its hash");
 	const serverDispatch = signedTx.serverDispatch;
 	return {
 		signedTransaction: new SignedTransaction({
 			transaction: signedTx.transaction,
 			signature: signedTx.signature,
 			borsh_bytes: Array.from(signedTx.borshBytes || []),
+			transactionHash,
 			...nonceLease ? { nonceLease } : {},
 			...serverDispatch ? { serverDispatch } : {}
 		}),

package/dist/esm/core/signingEngine/nearTransactionSubmission.js

@@ -0,0 +1,89 @@
+import { requireCanonicalString, requireNonEmptyString, requireRecord } from "../../shared-ts/src/utils/validation.js";
+import { safeErrorMessage } from "../../shared-ts/src/utils/errors.js";
+import { decodeNearFinalExecutionOutcome } from "../../shared-ts/src/utils/nearRpcResults.js";
+//#region src/core/signingEngine/nearTransactionSubmission.ts
+var NearTransactionRequest = class {
+	state = "not_dispatched";
+	constructor(transaction) {
+		this.transaction = transaction;
+	}
+	dispatched = () => {
+		this.state = "dispatched";
+	};
+	failed(error) {
+		if (this.state === "not_dispatched") return nearTransactionFailure(error, "not_submitted");
+		switch (this.transaction.kind) {
+			case "sign_and_send": return nearTransactionFailure(error, "submission_unknown");
+			case "send": return unresolvedNearTransaction(this.transaction.transactionId, error);
+			default: return assertNeverNearTransactionState(this.transaction);
+		}
+	}
+};
+function assertNeverNearTransactionState(value) {
+	throw new Error(`Unsupported NEAR transaction state: ${String(value)}`);
+}
+function parseNearTransactionResult(raw) {
+	const result = requireRecord(raw, "NEAR transaction result");
+	if (result.success === true) {
+		const transactionId = requireCanonicalString(result.transactionId, "transactionId");
+		const outcome = decodeNearFinalExecutionOutcome(result.result);
+		if (transactionId !== outcome.transaction.hash) throw new Error("NEAR transaction result contains different transaction hashes");
+		if (typeof outcome.status === "object" && "Failure" in outcome.status) return unresolvedNearTransaction(transactionId, /* @__PURE__ */ new Error("NEAR transaction execution failed"));
+		return {
+			success: true,
+			transactionId,
+			result: outcome
+		};
+	}
+	if (result.success !== false) throw new Error("Invalid NEAR transaction result");
+	const error = requireNonEmptyString(result.error, "NEAR transaction error");
+	switch (result.kind) {
+		case "not_submitted": return {
+			success: false,
+			kind: "not_submitted",
+			error
+		};
+		case "submission_unknown": return {
+			success: false,
+			kind: "submission_unknown",
+			error
+		};
+		case "unresolved": return {
+			success: false,
+			kind: "unresolved",
+			transactionId: requireCanonicalString(result.transactionId, "transactionId"),
+			error
+		};
+		default: throw new Error("Invalid NEAR transaction failure");
+	}
+}
+function nearTransactionFailure(error, fallback) {
+	return {
+		success: false,
+		kind: fallback,
+		error: safeErrorMessage(error) || "NEAR transaction failed"
+	};
+}
+function unresolvedNearTransaction(transactionId, error) {
+	return {
+		success: false,
+		kind: "unresolved",
+		transactionId,
+		error: safeErrorMessage(error)
+	};
+}
+/** Application hooks cannot replace a settled transaction outcome with their own error. */
+async function notifyNearTransactionResult(options, result) {
+	const error = result.success ? void 0 : new Error(result.error);
+	if (error) try {
+		await options?.onError?.(error);
+	} catch {}
+	try {
+		if (result.success) await options?.afterCall?.(true, result);
+		else await options?.afterCall?.(false, void 0, error);
+	} catch {}
+}
+//#endregion
+export { NearTransactionRequest, nearTransactionFailure, notifyNearTransactionResult, parseNearTransactionResult };
+
+//# sourceMappingURL=nearTransactionSubmission.js.map

package/dist/esm/core/signingEngine/uiConfirm/ui/confirm-surface-resize.js

@@ -299,7 +299,7 @@ function attachConfirmSurfaceResizeChoreographer(element, options = {}) {
 			current.moved = true;
 		} else current.framesSinceChange += 1;
 		const progress = clamp((viewportPx - current.originHostPx) / current.deltaCssPx, 0, 1);
-		if (progress >= 1) {
+		if (viewportPx === Math.round(current.originHostPx + current.deltaCssPx)) {
 			current.framesAtTarget += 1;
 			if (current.sawIntermediate || current.framesAtTarget >= LANDING_CONFIRM_FRAMES) {
 				settle();
@@ -310,7 +310,7 @@ function attachConfirmSurfaceResizeChoreographer(element, options = {}) {
 		}
 		if (current.framesAtTarget > 0) surfaceMotionDiagnostics.blipFrames += 1;
 		current.framesAtTarget = 0;
-		if (progress > 0) current.sawIntermediate = true;
+		if (progress > 0 && progress < 1) current.sawIntermediate = true;
 		current.driver.setProgress(progress);
 		const settledFrames = current.moved ? SETTLED_FRAMES_AFTER_MOTION : SETTLED_FRAMES_WITHOUT_MOTION;
 		if (current.framesSinceChange >= settledFrames) {

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

@@ -69,8 +69,14 @@ var ReviewDisclosure = class extends Component {
 			return;
 		}
 		details.open = true;
+		const scrollArea = details.parentElement?.closest(".seams-review-technical > div");
+		if (scrollArea && scrollArea.scrollHeight > scrollArea.clientHeight) {
+			details.open = opening;
+			details.removeAttribute("data-closing");
+			return;
+		}
 		details.setAttribute("data-resizing", "");
-		const target = opening ? body.scrollHeight : 0;
+		const target = opening ? body.getBoundingClientRect().height : 0;
 		this.motion = {
 			kind: "hosted",
 			opening

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

@@ -1,6 +1,7 @@
 import { appearanceTokenCssRule } from "../appearance-token-vars.js";
 import { withWalletLocale } from "./WalletLocale.js";
 import { PadlockIcon } from "./PadlockIcon.js";
+import { CONFIRM_SURFACE_HEIGHT_DRIVEN_VAR, announceSurfaceResize } from "../confirm-surface-resize.js";
 import { confirmationDocumentStyles } from "./confirmation-styles.js";
 import { ConfirmationContent } from "./ConfirmationContent.js";
 import { ConfirmationModal } from "./ConfirmationModal.js";
@@ -40,11 +41,40 @@ function captureReceiptAnchors(surface) {
 			selector,
 			text: element.textContent,
 			bounds: element.getBoundingClientRect(),
-			fontSize: getComputedStyle(element).fontSize
+			fontSize: getComputedStyle(element).fontSize,
+			textGeometry: element.matches("[role=\"status\"]") ? receiptTextGeometry(element) : null
 		});
 	}
 	return anchors;
 }
+function receiptTextGeometry(element) {
+	const range = element.ownerDocument.createRange();
+	range.selectNodeContents(element);
+	return {
+		bounds: range.getBoundingClientRect(),
+		lineCount: range.getClientRects().length
+	};
+}
+function receiptAnchorTransform(anchor, element) {
+	const destination = element.getBoundingClientRect();
+	const fontScale = parseFloat(anchor.fontSize) / parseFloat(getComputedStyle(element).fontSize);
+	let scaleX = fontScale;
+	let scaleY = fontScale;
+	let left = anchor.bounds.left - destination.left;
+	let top = anchor.bounds.top - destination.top;
+	if (anchor.textGeometry) {
+		const text = receiptTextGeometry(element);
+		const source = anchor.textGeometry.bounds;
+		const target = text.bounds;
+		if (anchor.textGeometry.lineCount === text.lineCount && target.width > 0 && target.height > 0) {
+			scaleX = source.width / target.width;
+			scaleY = source.height / target.height;
+			left = source.left - destination.left - (target.left - destination.left) * scaleX;
+			top = source.top - destination.top - (target.top - destination.top) * scaleY;
+		}
+	}
+	return `translate(${left}px, ${top}px) scale(${scaleX}, ${scaleY})`;
+}
 /**
 * The progress segments a capture draws while it checks, as they look now, from
 * left to right whatever their drawing order. A line that has not split yet hands
@@ -87,7 +117,12 @@ var MountedConfirmationSurface = class {
 	receiptShell = null;
 	receiptGhost = null;
 	receiptSegments = [];
+	receiptResize = null;
 	clearReceiptMotion = () => {
+		this.element.querySelector(".seams-receipt-footer--hosted")?.classList.remove("seams-receipt-footer--hosted");
+		this.receiptResize?.element.classList.remove("seams-surface-height-driven");
+		this.receiptResize = null;
+		this.styles.deleteDynamicRule(`${this.element.id}-receipt-resize`);
 		for (const animation of this.receiptMotion) animation.cancel();
 		this.receiptMotion = [];
 		this.receiptShell?.remove();
@@ -147,20 +182,20 @@ var MountedConfirmationSurface = class {
 	}
 	showReceipt(model) {
 		if (this.state.kind !== "mounted" || this.state.model.content.kind !== "transaction") return;
-		const viewChanged = this.receipt?.view !== model.view;
+		const shouldMorph = this.receipt?.view !== model.view || this.receiptMotion.length > 0;
 		const previousShell = this.receiptShell ?? this.element.querySelector(".modal-container-root");
 		const previousBounds = previousShell?.getBoundingClientRect();
-		const anchors = viewChanged ? captureReceiptAnchors(this.element) : [];
-		const leaving = viewChanged ? this.liveCapture() : null;
+		const anchors = shouldMorph ? captureReceiptAnchors(this.element) : [];
+		const leaving = shouldMorph ? this.liveCapture() : null;
 		const previousRadius = previousShell ? getComputedStyle(previousShell).borderRadius : "26px";
-		if (viewChanged) this.clearReceiptMotion();
+		if (shouldMorph) this.clearReceiptMotion();
 		this.receipt = model;
 		this.element.dataset.receiptView = model.view;
 		this.element.dataset.seamsConfirmSurface = "wallet-iframe";
 		this.element.dataset.seamsConfirmVariant = "modal";
 		this.renderSurface();
 		const target = this.element.querySelector(".modal-container-root");
-		if (viewChanged && previousBounds && target && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+		if (shouldMorph && previousBounds && target && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
 			const bounds = target.getBoundingClientRect();
 			const shell = this.element.ownerDocument.createElement("div");
 			shell.className = "seams-receipt-morph-shell";
@@ -168,7 +203,7 @@ var MountedConfirmationSurface = class {
 			this.element.appendChild(shell);
 			this.receiptShell = shell;
 			this.element.setAttribute("data-receipt-morphing", "");
-			this.receiptMotion = [shell.animate([{
+			const morph = shell.animate([{
 				left: `${previousBounds.left}px`,
 				top: `${previousBounds.top}px`,
 				width: `${previousBounds.width}px`,
@@ -184,17 +219,17 @@ var MountedConfirmationSurface = class {
 				duration: RECEIPT_MORPH_DURATION_MS,
 				easing: RECEIPT_MORPH_EASING,
 				fill: "both"
-			})];
+			});
+			this.receiptMotion = [morph];
+			const geometryAnimations = [morph];
 			const handedOver = leaving ? this.handOverCapture(leaving, target) : false;
 			const shared = /* @__PURE__ */ new Set();
 			for (const anchor of anchors) {
 				const element = target.querySelector(anchor.selector);
 				if (!element || element.textContent !== anchor.text) continue;
-				const destination = element.getBoundingClientRect();
 				shared.add(element);
-				const scale = parseFloat(anchor.fontSize) / parseFloat(getComputedStyle(element).fontSize);
-				this.receiptMotion.push(element.animate([{
-					transform: `translate(${anchor.bounds.left - destination.left}px, ${anchor.bounds.top - destination.top}px) scale(${scale})`,
+				const animation = element.animate([{
+					transform: receiptAnchorTransform(anchor, element),
 					transformOrigin: "top left"
 				}, {
 					transform: "translate(0, 0) scale(1)",
@@ -202,14 +237,17 @@ var MountedConfirmationSurface = class {
 				}], {
 					duration: RECEIPT_MORPH_DURATION_MS,
 					easing: RECEIPT_MORPH_EASING
-				}));
+				});
+				this.receiptMotion.push(animation);
+				geometryAnimations.push(animation);
 			}
 			const details = target.querySelectorAll(".seams-transaction-receipt > :not(.seams-receipt-heading), .seams-receipt-heading > .seams-receipt-symbol, .seams-receipt-heading h2, .seams-receipt-heading p, .seams-transaction-toast > :not(.seams-transaction-toast-text, .seams-toast-progress), .seams-transaction-toast-text > *");
 			let order = 0;
 			for (const detail of details) {
 				if (shared.has(detail)) continue;
 				const toolbar = leaving !== null && detail.matches(".seams-review-toolbar");
-				this.receiptMotion.push(detail.animate(toolbar ? [{ opacity: 0 }, { opacity: 1 }] : [{
+				const stationary = toolbar || detail.matches(".seams-receipt-footer");
+				this.receiptMotion.push(detail.animate(stationary ? [{ opacity: 0 }, { opacity: 1 }] : [{
 					opacity: 0,
 					transform: "translateY(8px)"
 				}, {
@@ -228,12 +266,83 @@ var MountedConfirmationSurface = class {
 				}));
 				if (!toolbar) order += 1;
 			}
+			this.resizeReceipt({
+				element: target,
+				animations: geometryAnimations,
+				fromHeight: previousBounds.height,
+				toHeight: bounds.height
+			});
 			const motion = this.receiptMotion;
 			Promise.all(motion.map((animation) => animation.finished)).then(() => {
 				if (this.receiptMotion === motion) this.clearReceiptMotion();
 			}, ignoreCancelledMotion);
 		}
 	}
+	resizeReceipt(resize) {
+		if (Math.abs(resize.toHeight - resize.fromHeight) < 1) return;
+		this.receiptResize = resize;
+		for (const animation of resize.animations) {
+			animation.pause();
+			animation.effect?.updateTiming({ easing: "linear" });
+		}
+		resize.element.classList.add("seams-surface-height-driven");
+		this.setReceiptHeight(resize, resize.fromHeight);
+		if (announceSurfaceResize(resize.element, {
+			reason: "receipt-transition",
+			fromCssPx: resize.fromHeight,
+			toCssPx: resize.toHeight,
+			setHeightCssPx: this.setReceiptHeight.bind(this, resize),
+			finish: this.finishReceiptResize.bind(this, resize)
+		})) {
+			this.fitReceiptToViewport(resize);
+			return;
+		}
+		this.receiptResize = null;
+		resize.element.classList.remove("seams-surface-height-driven");
+		this.styles.deleteDynamicRule(`${this.element.id}-receipt-resize`);
+		for (const animation of resize.animations) {
+			animation.effect?.updateTiming({ easing: RECEIPT_MORPH_EASING });
+			animation.play();
+		}
+	}
+	fitReceiptToViewport(resize) {
+		const footer = resize.element.querySelector(".seams-receipt-footer");
+		for (const animation of resize.animations) {
+			const effect = animation.effect;
+			if (!(effect instanceof KeyframeEffect)) continue;
+			if (effect.target === this.receiptShell) {
+				this.receiptShell?.classList.add("seams-receipt-morph-shell--hosted");
+				const frames = effect.getKeyframes();
+				for (const frame of frames) {
+					delete frame.height;
+					delete frame.width;
+				}
+				effect.setKeyframes(frames);
+			} else if (footer && effect.target === footer) {
+				const frames = effect.getKeyframes();
+				for (const frame of frames) delete frame.transform;
+				effect.setKeyframes(frames);
+			}
+		}
+		footer?.classList.add("seams-receipt-footer--hosted");
+	}
+	setReceiptHeight(resize, height) {
+		if (this.receiptResize !== resize) return;
+		this.styles.setDynamicDeclarations(`${this.element.id}-receipt-resize`, `#${resize.element.id}`, {
+			[CONFIRM_SURFACE_HEIGHT_DRIVEN_VAR]: `${height}px`,
+			"--seams-receipt-target-height": `${resize.toHeight}px`
+		});
+		const progress = (height - resize.fromHeight) / (resize.toHeight - resize.fromHeight);
+		for (const animation of resize.animations) animation.currentTime = Math.max(0, Math.min(1, progress)) * RECEIPT_MORPH_DURATION_MS;
+	}
+	finishReceiptResize(resize) {
+		if (this.receiptResize !== resize) return;
+		this.receiptResize = null;
+		resize.element.classList.remove("seams-surface-height-driven");
+		resize.element.querySelector(".seams-receipt-footer--hosted")?.classList.remove("seams-receipt-footer--hosted");
+		this.styles.deleteDynamicRule(`${this.element.id}-receipt-resize`);
+		for (const animation of resize.animations) animation.finish();
+	}
 	/** The auth method capture still on screen, measured before the receipt replaces it. */
 	liveCapture() {
 		if (this.state.kind !== "mounted" || this.state.model.content.kind !== "transaction") return null;

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

@@ -37,6 +37,17 @@ const walletMessages = [
 	["Enter a recovery code to recover your wallet.", "リカバリーコードを入力してウォレットを復元してください。"],
 	["Create new passkey", "新しいパスキーを作成"],
 	["Continue with Google", "Google で続ける"],
+	["Connect wallet", "ウォレットを接続"],
+	["Back to wallet selection", "ウォレットの選択に戻る"],
+	["Choose how you’d like to get started.", "開始方法を選択してください。"],
+	["Create a Seams Wallet", "Seams ウォレットを作成"],
+	["Get started with a passkey", "パスキーで開始"],
+	["Use your existing wallet", "既存のウォレットを使用"],
+	["Connect Meteor Wallet", "Meteor Wallet を接続"],
+	["Connect HOT Wallet", "HOT Wallet を接続"],
+	["Connect Intear Wallet", "Intear Wallet を接続"],
+	["Mainnet only", "メインネットのみ"],
+	["Complete the request in your wallet.", "ウォレットでリクエストを完了してください。"],
 	["Verify email code", "メールのコードを確認"],
 	["Unlock with Google", "Google でロック解除"],
 	["Unlock with new passkey", "新しいパスキーでロック解除"],
@@ -232,6 +243,7 @@ const walletMessages = [
 	["Create a wallet", "ウォレットを作成"],
 	["Create wallet with passkey", "パスキーでウォレットを作成"],
 	["Unlock with passkey", "パスキーでロック解除"],
+	["Unlock with email code", "メールのコードでロック解除"],
 	["Saved wallets", "保存済みウォレット"],
 	["Generate another name", "別の名前を生成"],
 	["Other options", "その他の方法"],

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

@@ -8,7 +8,7 @@ import { SlidersIcon } from "./icons/SlidersIcon.js";
 import { RecoveryCodesIcon } from "./icons/RecoveryCodesIcon.js";
 import TouchIcon from "./icons/TouchIcon.js";
 import { AccountMenuButtonView } from "./AccountMenuButtonView.js";
-import { useProfileState } from "./hooks/useProfileState.js";
+import { profileOpenControl, useProfileState } from "./hooks/useProfileState.js";
 import { TransactionSettingsSection } from "./TransactionSettingsSection.js";
 import { AccountMenuMockScreens } from "./AccountMenuMockScreens.js";
 import { useEffect, useState } from "react";
@@ -55,18 +55,15 @@ function openPreview(setStatus, toggle) {
 function resetPreviewNavigation(isOpen, setScreen) {
 	if (!isOpen) setScreen({ kind: "overview" });
 }
-function AccountMenuPreview({ username = "Alex Chen", walletId = "alex.near", theme = "light", defaultOpen = true, className, style }) {
-	const [open, setOpen] = useState(defaultOpen);
+function AccountMenuPreview(props) {
+	const { username = "Alex Chen", walletId = "alex.near", theme = "light", defaultOpen = true, presentation = "dropdown", className, style } = props;
 	const [status, setStatus] = useState("ready");
 	const [screen, setScreen] = useState({ kind: "overview" });
 	const [confirmation, setConfirmation] = useState({
 		uiMode: "modal",
 		behavior: "requireClick"
 	});
-	const { refs, isOpen, handleToggle, handleClose } = useProfileState({
-		open,
-		onOpenChange: setOpen
-	});
+	const { refs, isOpen, handleToggle, handleClose } = useProfileState(presentation, profileOpenControl(props, defaultOpen));
 	useEffect(resetPreviewNavigation.bind(null, isOpen, setScreen), [isOpen]);
 	const menuItems = [
 		{
@@ -137,6 +134,7 @@ function AccountMenuPreview({ username = "Alex Chen", walletId = "alex.near", th
 		}
 	];
 	return /* @__PURE__ */ jsx(AccountMenuButtonView, {
+		presentation,
 		buttonRef: refs.buttonRef,
 		dropdownRef: refs.dropdownRef,
 		className,

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

@@ -4,6 +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 { LockKeyholeIcon } from "./icons/LockKeyholeIcon.js";
 import { useLayoutEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -24,11 +25,18 @@ function observePanel(contentRef, isOpen, setHeight) {
 	observer.observe(content);
 	return observer.disconnect.bind(observer);
 }
-function closeWithEscape(onClose, event) {
+function closeWithEscape(presentation, onClose, event) {
 	if (event.key !== "Escape" || event.defaultPrevented) return;
 	event.preventDefault();
+	if (presentation === "modal") event.stopPropagation();
 	onClose();
 }
+function revealModalScreen(presentation, event) {
+	if (presentation !== "modal" || !(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;
+}
 function restoreTriggerFocus(buttonRef, previousOpen, isOpen) {
 	if (previousOpen.current && !isOpen) buttonRef.current?.querySelector("[aria-expanded]")?.focus({ preventScroll: true });
 	previousOpen.current = isOpen;
@@ -38,7 +46,7 @@ function restoreOverviewFocus(buttonRef, previousScreen, hasScreen) {
 	previousScreen.current = hasScreen;
 }
 /** One shell for live account screens and the provider-free preview. */
-function AccountMenuButtonView({ buttonRef, dropdownRef, trigger, dropdown, className, style, children }) {
+function AccountMenuButtonView({ presentation, buttonRef, dropdownRef, trigger, dropdown, className, style, children }) {
 	const locale = useWalletLocale();
 	const contentRef = useRef(null);
 	const hasScreen = children !== null && children !== void 0;
@@ -47,8 +55,8 @@ function AccountMenuButtonView({ buttonRef, dropdownRef, trigger, dropdown, clas
 	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]);
-	return /* @__PURE__ */ jsx("div", {
+	useLayoutEffect(observePanel.bind(null, contentRef, trigger.isOpen, setHeight), [trigger.isOpen, presentation]);
+	const panel = /* @__PURE__ */ jsx("div", {
 		ref: buttonRef,
 		className: `seams-profile-button-morphable ${trigger.isOpen ? "open" : "closed"} ${className ?? ""}`,
 		style: trigger.isOpen ? style : {
@@ -56,9 +64,10 @@ function AccountMenuButtonView({ buttonRef, dropdownRef, trigger, dropdown, clas
 			width: "fit-content"
 		},
 		"data-state": trigger.isOpen ? "open" : "closed",
+		onFocusCapture: revealModalScreen.bind(null, presentation),
 		children: trigger.isOpen ? /* @__PURE__ */ jsx("div", {
 			className: "seams-account-resize",
-			onKeyDown: closeWithEscape.bind(null, dropdown.onClose),
+			onKeyDown: closeWithEscape.bind(null, presentation, dropdown.onClose),
 			style: { height: height ?? void 0 },
 			children: /* @__PURE__ */ jsxs("div", {
 				ref: contentRef,
@@ -71,6 +80,7 @@ function AccountMenuButtonView({ buttonRef, dropdownRef, trigger, dropdown, clas
 							/* @__PURE__ */ jsx("span", { children: typeof window === "undefined" ? "" : window.location.host }),
 							/* @__PURE__ */ jsx("button", {
 								type: "button",
+								className: "seams-account-close",
 								"aria-label": walletText(locale, "Close wallet settings"),
 								onClick: dropdown.onClose,
 								children: /* @__PURE__ */ jsx("svg", {
@@ -121,6 +131,12 @@ function AccountMenuButtonView({ buttonRef, dropdownRef, trigger, dropdown, clas
 			})
 		}) : /* @__PURE__ */ jsx(UserAccountButton, { ...trigger })
 	});
+	if (presentation === "modal") return /* @__PURE__ */ jsx(AccountMenuModal, {
+		isOpen: trigger.isOpen,
+		onClose: dropdown.onClose,
+		children: panel
+	});
+	return panel;
 }
 //#endregion
 export { AccountMenuButtonView };

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

@@ -0,0 +1,66 @@
+import { walletText } from "../../../core/ui/messages.js";
+import { useWalletLocale } from "../../context/WalletLocale.js";
+import { Theme, useTheme } from "../theme/ThemeProvider.js";
+import { useLayoutEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/AccountMenuModal.tsx
+function openDialog(ref) {
+	const dialog = ref.current;
+	if (!dialog) return;
+	dialog.showModal();
+	return dialog.close.bind(dialog);
+}
+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;
+}
+function rememberBackdrop(startedOutside, event) {
+	startedOutside.current = isBackdrop(event);
+}
+function closeBackdrop(startedOutside, onClose, event) {
+	const shouldClose = startedOutside.current && isBackdrop(event);
+	startedOutside.current = false;
+	if (!shouldClose) return;
+	event.stopPropagation();
+	onClose();
+}
+function cancelDialog(onClose, event) {
+	event.preventDefault();
+	event.stopPropagation();
+	onClose();
+}
+function SettingsDialog({ onClose, children }) {
+	const locale = useWalletLocale();
+	const ref = useRef(null);
+	const startedOutside = useRef(false);
+	useLayoutEffect(openDialog.bind(null, ref), []);
+	return /* @__PURE__ */ jsx("dialog", {
+		ref,
+		"data-seams-root": "",
+		className: "seams-account-modal",
+		"aria-label": walletText(locale, "Wallet settings"),
+		onCancel: cancelDialog.bind(null, onClose),
+		onPointerDown: rememberBackdrop.bind(null, startedOutside),
+		onClick: closeBackdrop.bind(null, startedOutside, onClose),
+		children
+	});
+}
+function AccountMenuModal({ isOpen, onClose, children }) {
+	const { theme, tokens } = useTheme();
+	if (!isOpen || typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsx(Theme, {
+		tag: "div",
+		theme,
+		tokens: { [theme]: tokens },
+		children: /* @__PURE__ */ jsx(SettingsDialog, {
+			onClose,
+			children
+		})
+	}), document.body);
+}
+//#endregion
+export { AccountMenuModal };
+
+//# sourceMappingURL=AccountMenuModal.js.map