@seams/wallet 0.7.1 → 0.8.0

package/dist/esm/SeamsWeb/walletIframe/host/ui/auth-menu/AuthMenuSurface.js

@@ -1,5 +1,9 @@
 import { isLinkedDeviceTargetEmailAddressV1 } from "../../../../../core/types/linkDevice.js";
+import { PadlockIcon } from "../../../../../core/signingEngine/uiConfirm/ui/preact/PadlockIcon.js";
 import { isAuthMenuActionReady, isAuthMenuGoogleActionReady, isAuthMenuLoadingStatus, isAuthMenuReady, resolveAuthMenuLoginAccount } from "../../auth-menu/domain.js";
+import { blinkMenuItem } from "../../../../../utils/menuItemBlink.js";
+import { accountDropdownIcon, backIcon, chevronIcon, fingerprintIcon, googleIcon, linkDeviceIcon, linkFailedIcon, mailIcon, recoveryIcon, rerollIcon } from "./icons.js";
+import { AuthMenuFooter } from "./AuthMenuFooter.js";
 import { Component, Fragment } from "preact";
 import { Fragment as Fragment$1, jsx, jsxs } from "preact/jsx-runtime";
 //#region src/SeamsWeb/walletIframe/host/ui/auth-menu/AuthMenuSurface.tsx
@@ -23,7 +27,7 @@ function recoveryAnnouncement(viewModel) {
 	if (viewModel.status.kind === "busy") return viewModel.status.headline;
 	if (viewModel.status.kind === "recoverable") return viewModel.status.message;
 	if (viewModel.stage === "passkey_ready") return "Recovery code accepted.";
-	if (viewModel.stage === "sign_in_ready") return "Account recovered. Sign in to continue.";
+	if (viewModel.stage === "sign_in_ready") return "Wallet recovered. Unlock it to continue.";
 	return "";
 }
 function recoveryNavigationLocked(viewModel) {
@@ -31,187 +35,24 @@ function recoveryNavigationLocked(viewModel) {
 }
 function modeSwitchCopy(mode) {
 	return mode === "register" ? {
-		prompt: "Already have an account?",
-		action: "Sign in",
+		prompt: "Already have a wallet?",
+		action: "Unlock wallet",
 		nextMode: "login"
 	} : {
-		prompt: "Don't have an account?",
-		action: "Sign up",
+		prompt: "Don't have a wallet?",
+		action: "Create a wallet",
 		nextMode: "register"
 	};
 }
-function passkeyButtonLabel(mode) {
-	return mode === "register" ? "Sign up with Passkey" : "Sign in with Passkey";
-}
-function googleButtonLabel(mode) {
-	return mode === "register" ? "Sign up with Google" : "Sign in with Google";
-}
-function fingerprintIcon() {
-	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("svg", {
-		width: "22",
-		height: "22",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"aria-hidden": "true",
-		children: [
-			/* @__PURE__ */ jsx("path", { d: "M6.405 19.048c.184-.443.353-.894.507-1.351" }),
-			/* @__PURE__ */ jsx("path", { d: "M14.343 20.693c.266-.751.502-1.516.707-2.294.186-.706.346-1.422.478-2.147" }),
-			/* @__PURE__ */ jsx("path", { d: "M19.448 17.058c.364-1.964.555-3.989.555-6.058 0-4.418-3.582-8-8-8-1.255 0-2.443.289-3.501.805" }),
-			/* @__PURE__ */ jsx("path", { d: "M3.523 15.025c.314-1.29.48-2.638.48-4.025 0-1.74.556-3.351 1.499-4.664" }),
-			/* @__PURE__ */ jsx("path", { d: "M12.003 11c0 2.76-.447 5.416-1.273 7.899-.213.639-.451 1.266-.712 1.881" }),
-			/* @__PURE__ */ jsx("path", { d: "M7.712 14.5c.191-1.138.291-2.308.291-3.5 0-2.209 1.791-4 4-4s4 1.791 4 4c0 .617-.02 1.229-.058 1.836" })
-		]
-	}) });
-}
-function googleIcon() {
-	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("svg", {
-		width: "22",
-		height: "22",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "2",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"aria-hidden": "true",
-		children: [
-			/* @__PURE__ */ jsx("path", { d: "M10.88 21.94 15.46 14" }),
-			/* @__PURE__ */ jsx("path", { d: "M21.17 8H12" }),
-			/* @__PURE__ */ jsx("path", { d: "M3.95 6.06 8.54 14" }),
-			/* @__PURE__ */ jsx("circle", {
-				cx: "12",
-				cy: "12",
-				r: "10"
-			}),
-			/* @__PURE__ */ jsx("circle", {
-				cx: "12",
-				cy: "12",
-				r: "4"
-			})
-		]
-	}) });
-}
-function arrowIcon() {
-	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
-		class: "stripe-arrow seams-auth-method-arrow",
-		children: /* @__PURE__ */ jsx("svg", {
-			class: "HoverArrow",
-			width: "16",
-			height: "16",
-			viewBox: "0 0 10 10",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ jsxs("g", {
-				"fill-rule": "evenodd",
-				children: [/* @__PURE__ */ jsx("path", {
-					class: "HoverArrow__linePath",
-					d: "M0 5h7"
-				}), /* @__PURE__ */ jsx("path", {
-					class: "HoverArrow__tipPath",
-					d: "M1 1l4 4-4 4"
-				})]
-			})
-		})
-	}) });
+function modeLabel(mode) {
+	return mode === "register" ? "Create a wallet" : "Unlock wallet";
 }
-function accountDropdownIcon() {
-	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("svg", {
-		class: "seams-account-dropdown-arrow",
-		viewBox: "0 0 24 24",
-		"aria-hidden": "true",
-		focusable: "false",
-		children: /* @__PURE__ */ jsx("path", { d: "M9.75 3h4.5v10.28l4.3-4.3 3.18 3.18L12 21.9l-9.73-9.74 3.18-3.18 4.3 4.3V3Z" })
-	}) });
-}
-function backIcon() {
-	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("svg", {
-		width: "18",
-		height: "18",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "2.25",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
-	}) });
+function passkeyButtonLabel(mode) {
+	return mode === "register" ? "Create wallet with passkey" : "Unlock with passkey";
 }
-function linkDeviceIcon() {
-	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("svg", {
-		width: "18",
-		height: "18",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "2",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"aria-hidden": "true",
-		children: [
-			/* @__PURE__ */ jsx("rect", {
-				width: "5",
-				height: "5",
-				x: "3",
-				y: "3",
-				rx: "1"
-			}),
-			/* @__PURE__ */ jsx("rect", {
-				width: "5",
-				height: "5",
-				x: "16",
-				y: "3",
-				rx: "1"
-			}),
-			/* @__PURE__ */ jsx("rect", {
-				width: "5",
-				height: "5",
-				x: "3",
-				y: "16",
-				rx: "1"
-			}),
-			/* @__PURE__ */ jsx("path", { d: "M21 16h-3a2 2 0 0 0-2 2v3" }),
-			/* @__PURE__ */ jsx("path", { d: "M21 21v.01" }),
-			/* @__PURE__ */ jsx("path", { d: "M12 7v3a2 2 0 0 1-2 2H7" }),
-			/* @__PURE__ */ jsx("path", { d: "M3 12h.01" }),
-			/* @__PURE__ */ jsx("path", { d: "M12 3h.01" }),
-			/* @__PURE__ */ jsx("path", { d: "M12 16v.01" }),
-			/* @__PURE__ */ jsx("path", { d: "M16 12h1" }),
-			/* @__PURE__ */ jsx("path", { d: "M21 12v.01" }),
-			/* @__PURE__ */ jsx("path", { d: "M12 21v-1" })
-		]
-	}) });
-}
-function recoveryIcon() {
-	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("svg", {
-		width: "18",
-		height: "18",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "2",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"aria-hidden": "true",
-		children: [
-			/* @__PURE__ */ jsx("path", { d: "M20 11v6" }),
-			/* @__PURE__ */ jsx("path", { d: "M20 13h2" }),
-			/* @__PURE__ */ jsx("path", { d: "M3 21v-2a4 4 0 0 1 4-4h6a4 4 0 0 1 2.072.578" }),
-			/* @__PURE__ */ jsx("circle", {
-				cx: "10",
-				cy: "7",
-				r: "4"
-			}),
-			/* @__PURE__ */ jsx("circle", {
-				cx: "20",
-				cy: "19",
-				r: "2"
-			})
-		]
-	}) });
+/** The failure the footer strip reports. Only the menu itself reports there. */
+function menuNotice(viewModel) {
+	return viewModel.kind === "passkey" && viewModel.status.kind === "recoverable" && viewModel.status.reason === "error" ? viewModel.status.message : null;
 }
 const LINK_DEVICE_DOT_COUNT = 12;
 function linkDeviceDotRing(phase, glyph) {
@@ -237,26 +78,6 @@ function linkDeviceDotRing(phase, glyph) {
 		]
 	}) });
 }
-function mailIcon() {
-	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("svg", {
-		width: "21",
-		height: "21",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.75",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"aria-hidden": "true",
-		children: [/* @__PURE__ */ jsx("rect", {
-			x: "2.75",
-			y: "5",
-			width: "18.5",
-			height: "14",
-			rx: "2.75"
-		}), /* @__PURE__ */ jsx("path", { d: "m3.75 7.75 6.94 4.86a2.25 2.25 0 0 0 2.62 0l6.94-4.86" })]
-	}) });
-}
 function linkDeviceEmailOtpPresentation(activation) {
 	switch (activation.kind) {
 		case "sending": return {
@@ -317,43 +138,6 @@ function linkDeviceEmailOtpPresentation(activation) {
 		};
 	}
 }
-function linkFailedIcon() {
-	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("svg", {
-		width: "22",
-		height: "22",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.75",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"aria-hidden": "true",
-		children: [
-			/* @__PURE__ */ jsx("path", { d: "M9 17H7A5 5 0 0 1 7 7h2" }),
-			/* @__PURE__ */ jsx("path", { d: "M15 7h2a5 5 0 0 1 3.54 8.54" }),
-			/* @__PURE__ */ jsx("path", { d: "m2 2 20 20" }),
-			/* @__PURE__ */ jsx("path", { d: "M8 12h3" })
-		]
-	}) });
-}
-function rerollIcon() {
-	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("svg", {
-		class: "seams-input-action-icon",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "2",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"aria-hidden": "true",
-		children: [
-			/* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
-			/* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" }),
-			/* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
-			/* @__PURE__ */ jsx("path", { d: "M8 16H3v5" })
-		]
-	}) });
-}
 function selectedLoginAccount(viewModel) {
 	return resolveAuthMenuLoginAccount(viewModel.accountOptions, viewModel.selectedAccount).selectedAccount;
 }
@@ -364,9 +148,9 @@ function accountSecondaryText(account) {
 	return account.authMethod === "email_otp" ? account.emailAddress : null;
 }
 function savedAccountsTriggerLabel(account) {
-	if (!account) return "Saved accounts";
+	if (!account) return "Saved wallets";
 	const emailAddress = accountSecondaryText(account);
-	return emailAddress ? `Saved accounts. Selected wallet ID ${account.walletId}, email ${emailAddress}` : `Saved accounts. Selected ${account.walletId}`;
+	return emailAddress ? `Saved wallets. Selected wallet ID ${account.walletId}, email ${emailAddress}` : `Saved wallets. Selected ${account.walletId}`;
 }
 function accountGroups(options) {
 	const passkeyAccounts = options.filter((option) => option.authMethod === "passkey");
@@ -381,16 +165,20 @@ function accountGroups(options) {
 		accounts: emailOtpAccounts
 	}].filter((group) => group.accounts.length > 0);
 }
+const ACCOUNT_MENU_EXIT_MS = 160;
 var AuthMenuSurface = class extends Component {
 	constructor(..._args) {
 		super(..._args);
-		this.state = { accountMenuOpen: false };
+		this.state = { accountMenu: "closed" };
+		this.accountMenuExitTimer = null;
+		this.accountMenuChoice = null;
 		this.previouslyFocusedElement = null;
 		this.shouldFocusInitialControl = true;
 		this.contentResizeObserver = null;
 		this.contentHeightFrame = null;
 		this.previousLinkDeviceStateKind = null;
 		this.previousRecoveryStage = null;
+		this.lastMethod = "passkey";
 		this.queueContentHeightSync = () => {
 			if (this.contentHeightFrame !== null) cancelAnimationFrame(this.contentHeightFrame);
 			this.contentHeightFrame = requestAnimationFrame(this.syncContentHeight);
@@ -407,7 +195,7 @@ var AuthMenuSurface = class extends Component {
 				event.preventDefault();
 				if (this.viewModel && recoveryNavigationLocked(this.viewModel)) return;
 				if (this.accountMenuOpen) {
-					this.accountMenuOpen = false;
+					this.closeAccountMenu();
 					return;
 				}
 				this.emitIntent({
@@ -460,27 +248,39 @@ var AuthMenuSurface = class extends Component {
 			});
 		};
 		this.onLoginAccountSelect = (event) => {
-			if (!(event.currentTarget instanceof HTMLButtonElement)) return;
-			const walletId = event.currentTarget.dataset.walletId;
-			const authMethod = event.currentTarget.dataset.authMethod;
+			const option = event.currentTarget;
+			if (!(option instanceof HTMLButtonElement)) return;
+			const walletId = option.dataset.walletId;
+			const authMethod = option.dataset.authMethod;
 			const viewModel = this.viewModel;
 			if (!walletId || viewModel.kind !== "passkey" || viewModel.mode !== "login") return;
 			const selected = viewModel.accountOptions.find((account) => account.walletId === walletId && account.authMethod === authMethod);
-			if (!selected) return;
-			this.accountMenuOpen = false;
+			const previous = selectedLoginAccount(viewModel);
+			if (!selected || !previous || this.accountMenuChoice) return;
+			const blink = blinkMenuItem(option);
+			if (!blink) return;
+			const choice = {
+				chosen: selected,
+				previous
+			};
+			this.accountMenuChoice = choice;
 			this.emitIntent({
 				kind: "login_account_selected",
 				walletId: selected.walletId,
 				authMethod: selected.authMethod
 			});
+			blink.then(() => {
+				if (this.accountMenuChoice === choice) this.closeAccountMenu();
+			});
 		};
 		this.onAccountMenuToggle = () => {
-			this.accountMenuOpen = !this.accountMenuOpen;
+			if (this.accountMenuOpen) this.closeAccountMenu();
+			else this.openAccountMenu();
 		};
 		this.onDocumentPointerDown = (event) => {
 			if (!this.accountMenuOpen || !(event.target instanceof Node)) return;
 			if (this.props.element.querySelector(".seams-account-menu")?.contains(event.target)) return;
-			this.accountMenuOpen = false;
+			this.closeAccountMenu();
 		};
 		this.onPrimaryClick = () => {
 			const viewModel = this.viewModel;
@@ -502,6 +302,7 @@ var AuthMenuSurface = class extends Component {
 				kind: "submit",
 				mode: "login"
 			};
+			this.lastMethod = "passkey";
 			this.emitIntent(intent);
 		};
 		this.onGoogleOtpCodeInput = (event) => {
@@ -523,11 +324,16 @@ var AuthMenuSurface = class extends Component {
 			this.emitIntent({ kind: "google_registration_reroll" });
 		};
 		this.onGoogleClick = () => {
+			this.lastMethod = "google";
 			this.emitIntent({
 				kind: "external_auth",
 				provider: "google"
 			});
 		};
+		this.onNoticeRetry = () => {
+			if (this.lastMethod === "google" && isAuthMenuGoogleActionReady(this.viewModel)) this.onGoogleClick();
+			else this.onPrimaryClick();
+		};
 		this.onLinkDeviceOpen = () => {
 			this.emitIntent({ kind: "link_device_open" });
 		};
@@ -615,10 +421,24 @@ var AuthMenuSurface = class extends Component {
 		return this.props.viewModel;
 	}
 	get accountMenuOpen() {
-		return this.state.accountMenuOpen;
+		return this.state.accountMenu === "open";
+	}
+	openAccountMenu() {
+		this.endAccountMenuExit();
+		this.setState({ accountMenu: "open" });
 	}
-	set accountMenuOpen(value) {
-		this.setState({ accountMenuOpen: value });
+	closeAccountMenu() {
+		if (!this.accountMenuOpen) return;
+		this.setState({ accountMenu: "closing" });
+		this.accountMenuExitTimer = setTimeout(() => {
+			this.endAccountMenuExit();
+			this.setState({ accountMenu: "closed" });
+		}, ACCOUNT_MENU_EXIT_MS);
+	}
+	endAccountMenuExit() {
+		if (this.accountMenuExitTimer !== null) clearTimeout(this.accountMenuExitTimer);
+		this.accountMenuExitTimer = null;
+		this.accountMenuChoice = null;
 	}
 	componentDidMount() {
 		const active = document.activeElement;
@@ -635,6 +455,7 @@ var AuthMenuSurface = class extends Component {
 		this.contentResizeObserver = null;
 		if (this.contentHeightFrame !== null) cancelAnimationFrame(this.contentHeightFrame);
 		this.contentHeightFrame = null;
+		this.endAccountMenuExit();
 		window.removeEventListener("resize", this.queueContentHeightSync);
 		document.removeEventListener("pointerdown", this.onDocumentPointerDown);
 		document.removeEventListener("keydown", this.onKeyDown, true);
@@ -711,7 +532,7 @@ var AuthMenuSurface = class extends Component {
 		const otpPrompt = viewModel.kind === "google_otp_login";
 		const registrationPrompt = viewModel.kind === "google_registration";
 		const recovery = viewModel.kind === "recovery";
-		return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
+		return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
 			class: "seams-signup-menu-root auth-menu-root",
 			"data-mode": viewModel.mode,
 			"data-waiting": loading ? "true" : "false",
@@ -723,13 +544,13 @@ var AuthMenuSurface = class extends Component {
 			"aria-busy": loading ? "true" : "false",
 			tabIndex: -1,
 			onKeyDown: this.onKeydown,
-			children: /* @__PURE__ */ jsxs("div", {
+			children: [/* @__PURE__ */ jsxs("div", {
 				class: "seams-content-switcher",
 				children: [
 					/* @__PURE__ */ jsx("button", {
 						class: `seams-back-button ${loading || linkDevice || otpPrompt || registrationPrompt || recovery ? "is-visible" : ""}`,
 						type: "button",
-						"aria-label": recovery ? "Back to sign in" : "Back",
+						"aria-label": recovery ? "Back to unlock wallet" : "Back",
 						"data-auth-menu-close": true,
 						disabled: recoveryNavigationLocked(viewModel),
 						onClick: this.onBackClick,
@@ -753,7 +574,10 @@ var AuthMenuSurface = class extends Component {
 						})
 					})
 				]
-			})
+			}), /* @__PURE__ */ jsx(AuthMenuFooter, {
+				notice: menuNotice(viewModel),
+				onRetry: this.onNoticeRetry
+			})]
 		}) });
 	}
 	renderActiveView(viewModel) {
@@ -762,20 +586,44 @@ var AuthMenuSurface = class extends Component {
 		if (viewModel.kind === "google_otp_login") return this.renderGoogleOtp(viewModel);
 		if (viewModel.kind === "google_registration") return this.renderGoogleRegistration(viewModel);
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			this.renderHeader(viewModel),
+			this.renderMenuHeader(viewModel),
 			" ",
 			this.renderPasskeyInput(viewModel),
-			viewModel.status.kind === "recoverable" && viewModel.status.reason === "error" ? /* @__PURE__ */ jsx("p", {
-				class: "seams-auth-error",
-				role: "alert",
-				children: viewModel.status.message
-			}) : null,
 			this.renderAuthMethods(viewModel),
 			" ",
-			this.renderOtherOptions(viewModel),
+			this.renderOtherOptions(),
 			this.renderIntentSwitch(viewModel)
 		] });
 	}
+	renderMenuHeader(viewModel) {
+		const eyebrow = modeLabel(viewModel.mode);
+		return /* @__PURE__ */ jsxs("div", {
+			class: "seams-menu-header",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					class: "seams-menu-origin",
+					children: [
+						/* @__PURE__ */ jsx(PadlockIcon, {}),
+						" ",
+						/* @__PURE__ */ jsx("span", { children: viewModel.hostname })
+					]
+				}),
+				eyebrow === viewModel.heading ? null : /* @__PURE__ */ jsx("div", {
+					class: "seams-menu-eyebrow",
+					children: eyebrow
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "seams-title",
+					id: AUTH_MENU_TITLE_ID,
+					children: viewModel.heading
+				}),
+				viewModel.subtitle ? /* @__PURE__ */ jsx("div", {
+					class: "seams-subhead",
+					children: viewModel.subtitle
+				}) : null
+			]
+		});
+	}
 	renderHeader(viewModel) {
 		return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
 			class: "seams-header",
@@ -794,6 +642,9 @@ var AuthMenuSurface = class extends Component {
 			const selected = selectedLoginAccount(viewModel);
 			if (!selected) return /* @__PURE__ */ jsx(Fragment$1, {});
 			const groups = accountGroups(viewModel.accountOptions);
+			const accountMenu = this.state.accountMenu;
+			const choice = this.accountMenuChoice;
+			const listSelected = choice?.previous ?? selected;
 			return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
 				class: "seams-passkey-row",
 				children: /* @__PURE__ */ jsxs("div", {
@@ -812,7 +663,7 @@ var AuthMenuSurface = class extends Component {
 							}) }) : null]
 						})
 					}), /* @__PURE__ */ jsxs("div", {
-						class: `seams-account-menu ${this.accountMenuOpen ? "is-open" : ""}`,
+						class: `seams-account-menu ${accountMenu === "closed" ? "" : "is-open"}`,
 						children: [/* @__PURE__ */ jsx("button", {
 							class: "seams-account-menu-trigger",
 							type: "button",
@@ -823,9 +674,9 @@ var AuthMenuSurface = class extends Component {
 							"aria-controls": AUTH_MENU_ACCOUNT_LIST_ID,
 							onClick: this.onAccountMenuToggle,
 							children: accountDropdownIcon()
-						}), this.accountMenuOpen ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
+						}), accountMenu !== "closed" ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
 							id: AUTH_MENU_ACCOUNT_LIST_ID,
-							class: "seams-account-menu-popover",
+							class: `seams-account-menu-popover ${accountMenu === "closing" ? "is-closing" : ""}`,
 							role: "listbox",
 							children: groups.map((group) => {
 								const groupLabelId = `${AUTH_MENU_ACCOUNT_LIST_ID}-${group.authMethod}`;
@@ -838,10 +689,11 @@ var AuthMenuSurface = class extends Component {
 										class: "seams-account-menu-group-label",
 										children: group.label
 									}), group.accounts.map((account) => {
-										const isSelected = account.walletId === selected.walletId && account.authMethod === selected.authMethod;
+										const isSelected = account.walletId === listSelected.walletId && account.authMethod === listSelected.authMethod;
+										const isChosen = !isSelected && account.walletId === choice?.chosen.walletId && account.authMethod === choice.chosen.authMethod;
 										const secondaryText = accountSecondaryText(account);
 										return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("button", {
-											class: `seams-account-menu-option ${isSelected ? "is-selected" : ""}`,
+											class: `seams-account-menu-option ${isSelected ? "is-selected" : ""} ${isChosen ? "is-chosen" : ""}`,
 											type: "button",
 											role: "option",
 											"aria-selected": isSelected ? "true" : "false",
@@ -904,67 +756,64 @@ var AuthMenuSurface = class extends Component {
 	}
 	renderAuthMethods(viewModel) {
 		const googleEnabled = viewModel.enabledExternalProviders?.includes("google") ?? false;
-		return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
+		return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
 			class: "seams-auth-methods",
-			children: /* @__PURE__ */ jsxs("div", {
-				class: "seams-auth-method-stack",
-				children: [/* @__PURE__ */ jsxs("button", {
-					class: "seams-auth-method-btn seams-auth-method-btn-primary",
-					type: "button",
-					"data-auth-menu-primary": true,
-					disabled: !isAuthMenuActionReady(viewModel),
-					onClick: this.onPrimaryClick,
-					children: [
-						viewModel.mode === "login" ? fingerprintIcon() : null,
-						/* @__PURE__ */ jsx("span", { children: passkeyButtonLabel(viewModel.mode) }),
-						arrowIcon()
-					]
-				}), googleEnabled ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
-					class: "seams-auth-method-stack seams-social-stack",
-					children: /* @__PURE__ */ jsx("div", {
-						class: "seams-social-provider",
-						children: /* @__PURE__ */ jsxs("button", {
-							class: "seams-auth-method-btn seams-auth-method-btn-primary",
-							type: "button",
-							"data-auth-menu-provider": "google",
-							disabled: !isAuthMenuGoogleActionReady(viewModel),
-							onClick: this.onGoogleClick,
-							children: [
-								googleIcon(),
-								/* @__PURE__ */ jsx("span", { children: googleButtonLabel(viewModel.mode) }),
-								arrowIcon()
-							]
-						})
-					})
-				}) }) : null]
-			})
+			children: [/* @__PURE__ */ jsxs("button", {
+				class: "seams-auth-method-btn seams-auth-method-btn-primary",
+				type: "button",
+				"data-auth-menu-primary": true,
+				disabled: !isAuthMenuActionReady(viewModel),
+				onClick: this.onPrimaryClick,
+				children: [fingerprintIcon(), /* @__PURE__ */ jsx("span", { children: passkeyButtonLabel(viewModel.mode) })]
+			}), googleEnabled ? /* @__PURE__ */ jsxs("button", {
+				class: "seams-auth-method-btn",
+				type: "button",
+				"data-auth-menu-provider": "google",
+				disabled: !isAuthMenuGoogleActionReady(viewModel),
+				onClick: this.onGoogleClick,
+				children: [googleIcon(), /* @__PURE__ */ jsx("span", { children: "Continue with Google" })]
+			}) : null]
 		}) });
 	}
-	renderOtherOptions(_viewModel) {
-		return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
-			class: "seams-scan-device-row",
-			children: [/* @__PURE__ */ jsx("div", {
-				class: "seams-section-divider",
-				children: /* @__PURE__ */ jsx("span", {
-					class: "seams-section-divider-text",
-					children: "Other options"
-				})
-			}), /* @__PURE__ */ jsxs("div", {
-				class: "seams-secondary-actions",
-				children: [/* @__PURE__ */ jsxs("button", {
-					class: "seams-link-device-btn",
-					type: "button",
-					onClick: this.onLinkDeviceOpen,
-					children: [linkDeviceIcon(), " Scan and Link Device"]
-				}), /* @__PURE__ */ jsxs("button", {
-					class: "seams-link-device-btn",
-					type: "button",
-					"data-recovery-action": true,
-					onClick: this.onRecoveryOpen,
-					children: [recoveryIcon(), " Recover account"]
-				})]
+	renderOtherOptions() {
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+			class: "seams-menu-options-label",
+			children: "Other options"
+		}), /* @__PURE__ */ jsxs("div", {
+			class: "seams-menu-options",
+			children: [/* @__PURE__ */ jsxs("button", {
+				class: "seams-menu-option",
+				type: "button",
+				onClick: this.onLinkDeviceOpen,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						class: "seams-menu-option-icon",
+						children: linkDeviceIcon()
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						class: "seams-menu-option-text",
+						children: ["Link this device ", /* @__PURE__ */ jsx("small", { children: "Scan a code with your other device" })]
+					}),
+					chevronIcon()
+				]
+			}), /* @__PURE__ */ jsxs("button", {
+				class: "seams-menu-option",
+				type: "button",
+				"data-recovery-action": true,
+				onClick: this.onRecoveryOpen,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						class: "seams-menu-option-icon",
+						children: recoveryIcon()
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						class: "seams-menu-option-text",
+						children: ["Recover wallet ", /* @__PURE__ */ jsx("small", { children: "Use your recovery code" })]
+					}),
+					chevronIcon()
+				]
 			})]
-		}) });
+		})] });
 	}
 	renderRecovery(viewModel) {
 		if (viewModel.stage === "enter_code") {
@@ -1095,7 +944,7 @@ var AuthMenuSurface = class extends Component {
 		const finalizationRetry = viewModel.stage === "finalizing" && viewModel.status.kind === "recoverable";
 		const signIn = viewModel.stage === "sign_in_ready";
 		const googleTarget = viewModel.target.kind === "google_email_otp";
-		const message = viewModel.status.kind === "recoverable" ? viewModel.status.message : signIn ? null : viewModel.stage === "google_ready" ? "Continue with Google, then verify the code sent to your email." : googleTarget ? "Finishing recovery with Google…" : "Create a new passkey to finish recovering this account.";
+		const message = viewModel.status.kind === "recoverable" ? viewModel.status.message : signIn ? null : viewModel.stage === "google_ready" ? "Continue with Google, then verify the code sent to your email." : googleTarget ? "Finishing recovery with Google…" : "Create a new passkey to finish recovering this wallet.";
 		const action = signIn ? this.onRecoverySignIn : googleTarget ? finalizationRetry ? this.onRecoveryGoogleOtpSubmit : this.onGoogleClick : this.onRecoveryCreatePasskey;
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [this.renderHeader(viewModel), /* @__PURE__ */ jsxs("div", {
 			class: "seams-recovery-confirmation",
@@ -1107,7 +956,7 @@ var AuthMenuSurface = class extends Component {
 				type: "button",
 				"data-auth-menu-primary": true,
 				onClick: action,
-				children: [googleTarget && !finalizationRetry ? googleIcon() : null, signIn ? googleTarget ? "Sign in with Google" : "Sign in with new passkey" : finalizationRetry ? "Retry finalization" : googleTarget ? "Continue with Google" : "Create new passkey"]
+				children: [googleTarget && !finalizationRetry ? googleIcon() : null, signIn ? googleTarget ? "Unlock with Google" : "Unlock with new passkey" : finalizationRetry ? "Retry finalization" : googleTarget ? "Continue with Google" : "Create new passkey"]
 			})]
 		})] });
 	}
@@ -1152,8 +1001,18 @@ var AuthMenuSurface = class extends Component {
 		if (linkDevice.kind === "passkey_required" || linkDevice.kind === "creating_passkey") return this.renderLinkDevicePasskeyConfirmation(linkDevice);
 		if (linkDevice.kind === "email_otp_required") return this.renderLinkDeviceEmailOtp(linkDevice);
 		if (linkDevice.kind === "activating") return this.renderLinkedDeviceActivation(linkDevice);
-		if (linkDevice.kind === "expired") return this.renderLinkDeviceExpired(linkDevice);
-		if (linkDevice.kind === "cancelled") return this.renderLinkDeviceCancelled(linkDevice);
+		if (linkDevice.kind === "expired") return this.renderLinkDeviceFailurePanel({
+			dismiss: "expired",
+			title: "Linking expired",
+			detail: linkDevice.message,
+			action: "Try again"
+		});
+		if (linkDevice.kind === "cancelled") return this.renderLinkDeviceFailurePanel({
+			dismiss: "cancelled",
+			title: "Linking cancelled",
+			detail: linkDevice.message,
+			action: "Return to unlock wallet"
+		});
 		if (linkDevice.kind === "error" || linkDevice.kind === "activation_error") return this.renderLinkDeviceFailure(linkDevice);
 		const ready = linkDevice.kind === "ready";
 		return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
@@ -1370,7 +1229,7 @@ var AuthMenuSurface = class extends Component {
 			type: "button",
 			"data-link-device-error-dismiss": true,
 			onClick: this.onBackClick,
-			children: "Return to sign in"
+			children: "Return to unlock wallet"
 		}) });
 		if (activation.kind === "expired") return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("button", {
 			class: "seams-link-device-btn seams-link-device-btn-primary",
@@ -1394,64 +1253,14 @@ var AuthMenuSurface = class extends Component {
 	}
 	renderLinkDeviceFailure(linkDevice) {
 		const activationFailed = linkDevice.kind === "activation_error";
-		return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
-			class: "seams-link-device-confirmation seams-link-device-failure",
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					class: "seams-link-device-failure-icon",
-					children: linkFailedIcon()
-				}),
-				/* @__PURE__ */ jsx("h2", {
-					class: "qr-title",
-					id: AUTH_MENU_TITLE_ID,
-					children: activationFailed ? "Device linked" : "Couldn't link device"
-				}),
-				/* @__PURE__ */ jsx("p", {
-					class: "seams-link-device-failure-detail",
-					role: "alert",
-					children: activationFailed ? /* @__PURE__ */ jsxs(Fragment$1, { children: ["Unable to open the wallet. Return to sign in and try again. ", linkDevice.message] }) : linkDevice.message
-				}),
-				/* @__PURE__ */ jsx("button", {
-					class: "seams-link-device-btn",
-					type: "button",
-					"data-auth-menu-primary": true,
-					"data-link-device-error-dismiss": true,
-					onClick: this.onBackClick,
-					children: "Return to sign in"
-				})
-			]
-		}) });
-	}
-	renderLinkDeviceExpired(linkDevice) {
-		return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
-			class: "seams-link-device-confirmation seams-link-device-failure",
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					class: "seams-link-device-failure-icon",
-					children: linkFailedIcon()
-				}),
-				/* @__PURE__ */ jsx("h2", {
-					class: "qr-title",
-					id: AUTH_MENU_TITLE_ID,
-					children: "Linking expired"
-				}),
-				/* @__PURE__ */ jsx("p", {
-					class: "seams-link-device-failure-detail",
-					role: "alert",
-					children: linkDevice.message
-				}),
-				/* @__PURE__ */ jsx("button", {
-					class: "seams-link-device-btn",
-					type: "button",
-					"data-auth-menu-primary": true,
-					"data-link-device-expired-dismiss": true,
-					onClick: this.onBackClick,
-					children: "Try again"
-				})
-			]
-		}) });
+		return this.renderLinkDeviceFailurePanel({
+			dismiss: "error",
+			title: activationFailed ? "Device linked" : "Couldn't link device",
+			detail: activationFailed ? /* @__PURE__ */ jsxs(Fragment$1, { children: ["Unable to open the wallet. Go back and try again. ", linkDevice.message] }) : linkDevice.message,
+			action: "Return to unlock wallet"
+		});
 	}
-	renderLinkDeviceCancelled(linkDevice) {
+	renderLinkDeviceFailurePanel(panel) {
 		return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
 			class: "seams-link-device-confirmation seams-link-device-failure",
 			children: [
@@ -1462,20 +1271,20 @@ var AuthMenuSurface = class extends Component {
 				/* @__PURE__ */ jsx("h2", {
 					class: "qr-title",
 					id: AUTH_MENU_TITLE_ID,
-					children: "Linking cancelled"
+					children: panel.title
 				}),
 				/* @__PURE__ */ jsx("p", {
 					class: "seams-link-device-failure-detail",
 					role: "alert",
-					children: linkDevice.message
+					children: panel.detail
 				}),
 				/* @__PURE__ */ jsx("button", {
 					class: "seams-link-device-btn",
 					type: "button",
 					"data-auth-menu-primary": true,
-					"data-link-device-cancelled-dismiss": true,
+					[`data-link-device-${panel.dismiss}-dismiss`]: true,
 					onClick: this.onBackClick,
-					children: "Return to sign in"
+					children: panel.action
 				})
 			]
 		}) });