@seams/wallet 0.23.0 → 0.24.0

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

@@ -353,14 +353,6 @@
   line-height: 1.45;
 }
 
-.seams-linked-devices-modal-otp-form {
-  display: grid;
-  gap: 0.5rem;
-  color: var(--seams-colors-textPrimary);
-  font-size: 0.82rem;
-  font-weight: 600;
-}
-
 .seams-linked-devices-modal-otp-input {
   width: 100%;
   min-height: 44px;
@@ -574,38 +566,10 @@
   border: 0;
   gap: 0.5rem;
 }
-.seams-auth-methods-modal-content .seams-linked-devices-modal-otp-form {
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 0.5rem 0.75rem;
-  font-weight: 400;
-}
-.seams-auth-methods-modal-content .seams-linked-devices-modal-otp-form label {
-  grid-column: 1 / -1;
-}
 .seams-auth-methods-modal-content .seams-linked-devices-modal-secondary {
   min-height: 44px;
   font-size: 0.8125rem;
 }
-.seams-auth-methods-modal-content .seams-linked-devices-modal-otp-form button {
-  background: var(--seams-colors-textPrimary);
-  border-color: transparent;
-  color: var(--seams-colors-colorBackground);
-}
-.seams-auth-methods-modal-content .seams-linked-devices-modal-otp-form button:hover:not(:disabled) {
-  background: color-mix(
-    in srgb,
-    var(--seams-colors-textPrimary) 84%,
-    var(--seams-colors-colorBackground)
-  );
-}
-@media (max-width: 480px) {
-  .seams-auth-methods-modal-content .seams-linked-devices-modal-otp-form {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .seams-auth-methods-modal-content .seams-linked-devices-modal-otp-form button {
-    justify-self: stretch;
-  }
-}
 .seams-linked-devices-modal-backdrop[data-presentation='page'] .seams-auth-methods-modal-content {
   max-width: 40rem;
 }
@@ -619,3 +583,145 @@
 .seams-linked-devices-modal-body::-webkit-scrollbar {
   display: none;
 }
+
+/* Each method is a card: icon, name and state, one trailing control, then an
+   optional footer for further actions or a removal confirmation. */
+.seams-auth-methods-modal-content .seams-account-menu-section > .seams-account-method-tiles {
+  margin-top: 0;
+}
+.seams-auth-methods-modal-content
+  .seams-account-method-tiles
+  .seams-linked-devices-modal-item--row {
+  padding: 0.75rem 0.875rem;
+  border-radius: 0.875rem;
+}
+.seams-auth-methods-modal-content
+  .seams-linked-devices-modal-item--row
+  .seams-linked-devices-modal-item-icon {
+  align-self: center;
+}
+.seams-auth-methods-modal-content
+  .seams-linked-devices-modal-item--row
+  .seams-linked-devices-modal-item-main {
+  justify-content: flex-start;
+}
+.seams-auth-method-footer {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  min-height: 2.75rem;
+  margin: 0.75rem -0.875rem -0.75rem;
+  padding: 0.25rem 0.875rem;
+  border-top: 1px solid var(--seams-colors-borderPrimary);
+}
+.seams-auth-method-footer > .seams-linked-devices-modal-confirm {
+  flex: 1;
+  margin: 0;
+  padding-block: 0.5rem;
+}
+
+/* Quiet text actions; Remove carries the error tone, mixed toward the text
+   colour so it keeps its contrast on both themes. */
+.seams-auth-method-text-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  min-height: 2.25rem;
+  margin-inline: -0.5rem;
+  padding: 0.375rem 0.5rem;
+  border: 0;
+  border-radius: var(--seams-shape-control, 10px);
+  background: transparent;
+  color: var(--seams-colors-textPrimary);
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 140ms ease;
+}
+.seams-auth-method-text-action > svg {
+  color: var(--seams-colors-textSecondary);
+}
+[dir='rtl'] .seams-auth-method-text-action > svg {
+  transform: scaleX(-1);
+}
+.seams-auth-method-text-action[data-tone='danger'],
+.seams-linked-devices-modal-item-detail [data-tone='error'],
+.seams-auth-method-field-error {
+  color: color-mix(in oklab, var(--seams-colors-error) 65%, var(--seams-colors-textPrimary));
+}
+.seams-auth-method-text-action:hover:not(:disabled) {
+  background: var(--seams-colors-surface2, var(--seams-colors-surface));
+}
+.seams-auth-method-text-action:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.seams-auth-method-text-action:focus-visible {
+  outline: 2px solid var(--seams-colors-textPrimary);
+  outline-offset: 2px;
+}
+@media (pointer: coarse) {
+  .seams-auth-method-text-action {
+    min-height: 2.75rem;
+  }
+}
+
+/* Email OTP's address form opens in its card footer, below a divider. */
+.seams-auth-method-form {
+  display: grid;
+  flex: 1;
+  gap: 0.5rem;
+  padding-block: 0.625rem 0.5rem;
+  color: var(--seams-colors-textPrimary);
+  font-size: 0.8125rem;
+}
+.seams-auth-method-form label {
+  font-weight: 600;
+}
+.seams-auth-method-note,
+.seams-auth-method-field-error {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.45;
+}
+.seams-auth-method-note {
+  color: var(--seams-colors-textSecondary);
+}
+.seams-auth-method-field-error {
+  font-weight: 500;
+}
+.seams-auth-method-form .seams-linked-devices-modal-confirm-actions {
+  margin-top: 0.25rem;
+}
+.seams-auth-method-primary {
+  min-height: 2.5rem;
+  padding: 0.4rem 0.75rem;
+  border: 1px solid transparent;
+  border-radius: 0.6rem;
+  background: var(--seams-colors-textPrimary);
+  color: var(--seams-colors-colorBackground);
+  font: inherit;
+  font-size: 0.86rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 140ms ease;
+}
+.seams-auth-method-primary:hover:not(:disabled) {
+  background: color-mix(
+    in srgb,
+    var(--seams-colors-textPrimary) 84%,
+    var(--seams-colors-colorBackground)
+  );
+}
+.seams-auth-method-primary:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.seams-auth-method-primary:focus-visible {
+  outline: 2px solid var(--seams-colors-textPrimary);
+  outline-offset: 2px;
+}

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

@@ -21,6 +21,7 @@ function assertRevokeSourceMethod(binding, walletId, targetWalletAuthMethodId) {
 			if (String(binding.scope.wallet.walletId) !== walletId) throw new Error("Unlock this wallet with a sibling authentication method first.");
 			if (String(binding.walletAuthMethodId) === targetWalletAuthMethodId) throw new Error("Unlock with the sibling authentication method before removing this one.");
 			return;
+		case "voiceid":
 		case "email_otp":
 			if (String(binding.wallet.walletId) !== walletId) throw new Error("Unlock this wallet with a sibling authentication method first.");
 			if (String(binding.walletAuthMethodId) === targetWalletAuthMethodId) throw new Error("Unlock with the sibling authentication method before removing this one.");
@@ -131,6 +132,7 @@ function credentialDescription(credential) {
 	switch (credential.kind) {
 		case "passkey": return credential.device.label;
 		case "email_otp": return "Email OTP";
+		case "voiceid": return "VoiceID";
 	}
 }
 /**
@@ -147,7 +149,8 @@ function deviceMetaLine(view, deviceNumber, titleCollides, now, locale) {
 		parts.push(walletText(locale, credential.device.synced ? "Synced passkey" : "Passkey"));
 		const provider = credential.device.providerLabel ?? credential.device.provider;
 		if (provider) parts.push(provider);
-	} else parts.push(walletText(locale, "Email OTP"));
+	} else if (credential.kind === "email_otp") parts.push(walletText(locale, "Email OTP"));
+	else parts.push(walletDisplayText(locale, "VoiceID"));
 	if (titleCollides) parts.push(walletText(locale, "Added {value0}", { value0: friendlyDay(viewCreatedAtMs(view), now, locale) }));
 	parts.push(walletText(locale, "Last used {value0}", { value0: friendlyDay(viewLastActivityAtMs(view), now, locale) }));
 	return parts.join(" · ");
@@ -158,6 +161,10 @@ function credentialIcon(credential) {
 		size: 20,
 		strokeWidth: 1.75
 	});
+	if (credential.kind === "voiceid") return /* @__PURE__ */ jsx(LaptopIcon, {
+		size: 20,
+		strokeWidth: 1.75
+	});
 	return credential.device.os === "ios" || credential.device.os === "android" ? /* @__PURE__ */ jsx(SmartphoneIcon, {
 		size: 20,
 		strokeWidth: 1.75
@@ -170,7 +177,9 @@ function credentialIcon(credential) {
 function siblingMethodName(siblings, locale) {
 	if (siblings.length === 1) {
 		const credential = viewCredential(siblings[0]);
-		return credential.kind === "email_otp" ? walletText(locale, "your email code") : walletText(locale, "your \"{value0}\" passkey", { value0: credential.device.label });
+		if (credential.kind === "email_otp") return walletText(locale, "your email code");
+		if (credential.kind === "voiceid") return walletDisplayText(locale, "your VoiceID method");
+		return walletText(locale, "your \"{value0}\" passkey", { value0: credential.device.label });
 	}
 	if (siblings.every((view) => viewCredential(view).kind === "email_otp")) return walletText(locale, "your email code");
 	return walletText(locale, "another sign-in method");

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

@@ -11,7 +11,7 @@
   padding: 0;
   border: 0;
 }
-.seams-transaction-review + .seams-transaction-group {
+.seams-transaction-review-setting + .seams-transaction-group {
   padding-top: 40px;
   border-top: 1px solid var(--seams-colors-borderPrimary);
 }
@@ -101,16 +101,18 @@
   cursor: not-allowed;
 }
 
-/* The switch row uses the card grid, so its edge lines up with the cards. */
-.seams-transaction-review {
+/* The switch row uses the card grid, so its edge lines up with the cards. It has its
+   own class: the transaction confirmer's review is .seams-transaction-review, and a
+   page that loads both must not lay that review out on this grid. */
+.seams-transaction-review-setting {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px 16px;
 }
-.seams-transaction-review > * {
+.seams-transaction-review-setting > * {
   grid-column: span 2;
 }
-.seams-transaction-review > p {
+.seams-transaction-review-setting > p {
   margin: 0;
   padding-inline: 4px;
   color: var(--seams-colors-textSecondary);
@@ -266,7 +268,7 @@
 }
 
 @media (max-width: 600px) {
-  [data-presentation='page'] .seams-transaction-review > * {
+  [data-presentation='page'] .seams-transaction-review-setting > * {
     grid-column: 1 / -1;
   }
   [data-presentation='page'] .seams-transaction-review-row {
@@ -315,7 +317,7 @@
   gap: 16px;
   padding-bottom: 4px;
 }
-[data-presentation='menu'] .seams-transaction-review + .seams-transaction-group {
+[data-presentation='menu'] .seams-transaction-review-setting + .seams-transaction-group {
   padding-top: 16px;
 }
 [data-presentation='menu'] .seams-transaction-group legend {
@@ -380,10 +382,10 @@
 [data-presentation='menu'] [data-preview='drawer'] .seams-tp-panel {
   padding-top: 7px;
 }
-[data-presentation='menu'] .seams-transaction-review > * {
+[data-presentation='menu'] .seams-transaction-review-setting > * {
   grid-column: 1 / -1;
 }
-[data-presentation='menu'] .seams-transaction-review {
+[data-presentation='menu'] .seams-transaction-review-setting {
   gap: 8px;
 }
 [data-presentation='menu'] .seams-transaction-review-row {
@@ -395,7 +397,7 @@
   font-size: 14px;
 }
 [data-presentation='menu'] .seams-transaction-review-text > span,
-[data-presentation='menu'] .seams-transaction-review > p {
+[data-presentation='menu'] .seams-transaction-review-setting > p {
   font-size: 12px;
   line-height: 1.4;
 }

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

@@ -36,7 +36,7 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 		style,
 		onClick: compact ? handleClick : void 0,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "seams-transaction-review",
+			className: "seams-transaction-review-setting",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "seams-transaction-review-row",
 				children: [/* @__PURE__ */ jsxs("span", {

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

@@ -0,0 +1,186 @@
+import { useSeams } from "../../context/index.js";
+import { AuthenticationMethodRow } from "./AuthenticationMethodRow.js";
+import { ChevronRightIcon } from "./icons/ChevronRightIcon.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./TransactionSettingsSection.css";
+//#region src/react/components/AccountMenuButton/VoiceIdAvailabilityControl.tsx
+/** The VoiceID row in Authentication methods: the switch, its state, and the voice actions. */
+function VoiceIdMethodRow({ walletId, disabled, onChanged, title, chip, remove, confirmation, children }) {
+	const voice = useVoiceIdAvailability(walletId, onChanged);
+	const status = voiceIdStatus(voice);
+	const enrolled = (voice.state.kind === "ready" || voice.state.kind === "updating") && voice.state.availability.kind !== "not_enrolled";
+	const actions = enrolled || remove ? /* @__PURE__ */ jsxs(Fragment, { children: [enrolled ? /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "seams-auth-method-text-action",
+		disabled: disabled || !voice.ready || !voice.enabled,
+		onClick: voice.manage,
+		children: ["Manage voice", /* @__PURE__ */ jsx(ChevronRightIcon, {
+			size: 16,
+			strokeWidth: 1.75
+		})]
+	}) : /* @__PURE__ */ jsx("span", {}), remove] }) : null;
+	return /* @__PURE__ */ jsx(AuthenticationMethodRow, {
+		kind: "voiceid",
+		title,
+		chip,
+		description: /* @__PURE__ */ jsx("span", {
+			role: "status",
+			"data-tone": status.tone,
+			children: status.text
+		}),
+		action: /* @__PURE__ */ jsx(VoiceIdSwitch, {
+			voice,
+			disabled
+		}),
+		footer: confirmation ?? actions,
+		children
+	});
+}
+/** The VoiceID card under "Add a method", before this wallet has a VoiceID method. */
+function VoiceIdSetupRow({ walletId, disabled, onChanged }) {
+	const voice = useVoiceIdAvailability(walletId, onChanged);
+	const status = voiceIdStatus(voice);
+	return /* @__PURE__ */ jsx(AuthenticationMethodRow, {
+		kind: "voiceid",
+		title: "VoiceID",
+		chip: "Experimental",
+		description: /* @__PURE__ */ jsx("span", {
+			role: "status",
+			"data-tone": status.tone,
+			children: status.text
+		}),
+		action: /* @__PURE__ */ jsx(VoiceIdSwitch, {
+			voice,
+			disabled
+		}),
+		children: /* @__PURE__ */ jsx("span", {
+			className: "seams-linked-devices-modal-item-detail",
+			children: "First-time setup downloads voice tools and records three samples. Your current login method stays selected."
+		})
+	});
+}
+function VoiceIdSwitch({ voice, disabled }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		role: "switch",
+		className: "seams-transaction-switch",
+		"aria-label": "Enable VoiceID in this browser",
+		"aria-checked": voice.enabled,
+		disabled: disabled || !voice.ready,
+		onClick: voice.toggle,
+		children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+	});
+}
+function useVoiceIdAvailability(walletId, onChanged) {
+	const { seams, refreshSession } = useSeams();
+	const [state, setState] = React.useState({ kind: "loading" });
+	React.useEffect(loadAvailability.bind(null, seams, walletId, setState), [seams, walletId]);
+	const ready = state.kind === "ready";
+	const change = ready ? changeAvailability.bind(null, seams, walletId, state.availability, setState, refreshSession, onChanged) : void 0;
+	return {
+		state,
+		ready,
+		enabled: (ready || state.kind === "updating") && state.availability.kind === "enabled",
+		toggle: change?.bind(null, "toggle"),
+		manage: change?.bind(null, "manage")
+	};
+}
+function voiceIdStatus(voice) {
+	switch (voice.state.kind) {
+		case "loading": return { text: "Checking VoiceID…" };
+		case "updating": return { text: "Updating VoiceID…" };
+		case "error": return {
+			text: voice.state.message,
+			tone: "error"
+		};
+		case "ready":
+			if (voice.state.message) return {
+				text: voice.state.message,
+				tone: "error"
+			};
+			switch (voice.state.availability.kind) {
+				case "enabled": return { text: "On in this browser" };
+				case "disabled": return { text: "Off in this browser. Turn it on to manage your voice." };
+				case "not_enrolled": return { text: "Not set up in this browser. Turn it on to record your voice." };
+			}
+	}
+}
+function loadAvailability(seams, walletId, setState) {
+	const controller = new AbortController();
+	setState({ kind: "loading" });
+	readAvailability(seams, walletId, setState, controller.signal);
+	return controller.abort.bind(controller);
+}
+async function readAvailability(seams, walletId, setState, signal) {
+	try {
+		const availability = await seams.registration.getAuthMethodAvailability({
+			walletId,
+			method: "voiceid"
+		});
+		if (!signal.aborted) setState({
+			kind: "ready",
+			availability
+		});
+	} catch (error) {
+		if (!signal.aborted) setState({
+			kind: "error",
+			message: error instanceof Error ? error.message : "Could not read VoiceID availability."
+		});
+	}
+}
+async function changeAvailability(seams, walletId, previous, setState, refreshSession, onChanged, action) {
+	setState({
+		kind: "updating",
+		availability: previous
+	});
+	try {
+		if (previous.kind === "not_enrolled" || action === "manage") {
+			if ((await seams.registration.activateAuthMethod({
+				walletId,
+				method: "voiceid"
+			})).kind === "cancelled") {
+				setState({
+					kind: "ready",
+					availability: previous
+				});
+				return;
+			}
+		}
+		const availability = action === "manage" ? await seams.registration.getAuthMethodAvailability({
+			walletId,
+			method: "voiceid"
+		}) : await seams.registration.setAuthMethodEnabled({
+			walletId,
+			method: "voiceid",
+			enabled: previous.kind !== "enabled"
+		});
+		await refreshSession(walletId);
+		setState({
+			kind: "ready",
+			availability
+		});
+		await onChanged();
+	} catch (error) {
+		const message = error instanceof Error ? error.message : "VoiceID could not be updated. Try again.";
+		try {
+			setState({
+				kind: "ready",
+				availability: await seams.registration.getAuthMethodAvailability({
+					walletId,
+					method: "voiceid"
+				}),
+				message
+			});
+		} catch {
+			setState({
+				kind: "error",
+				message: "Could not confirm VoiceID availability. Close and reopen settings."
+			});
+		}
+	}
+}
+//#endregion
+export { VoiceIdMethodRow, VoiceIdSetupRow };
+
+//# sourceMappingURL=VoiceIdAvailabilityControl.js.map

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

@@ -128,19 +128,21 @@
   margin-top: 4px;
 }
 .seams-account-footer {
-  border-top: 1px solid var(--seams-colors-borderPrimary);
+  border-top: 1px solid color-mix(in srgb, var(--seams-colors-borderPrimary) 60%, transparent);
   display: flex;
   justify-content: center;
-  align-items: center;
-  gap: 8px;
-  height: 44px;
+  align-items: baseline;
+  gap: 6px;
+  padding: 10px 16px;
   color: var(--seams-colors-textSecondary);
-  font-size: 12px;
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 0.01em;
 }
 .seams-account-wordmark {
-  width: 70px;
-  height: 18px;
-  color: var(--seams-colors-textPrimary);
+  flex: none;
+  width: 50px;
+  height: 10px;
 }
 .seams-account-description {
   font-size: 14px;

package/dist/esm/react/components/AccountMenuButton/icons/ChevronRightIcon.js

@@ -0,0 +1,8 @@
+import { lucideIcon } from "./lucideIcon.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/icons/ChevronRightIcon.tsx
+const ChevronRightIcon = lucideIcon("chevron-right", /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }));
+//#endregion
+export { ChevronRightIcon };
+
+//# sourceMappingURL=ChevronRightIcon.js.map

package/dist/esm/react/components/AccountMenuButton/icons/WalletIcon.js

@@ -0,0 +1,8 @@
+import { lucideIcon } from "./lucideIcon.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/icons/WalletIcon.tsx
+const WalletIcon = lucideIcon("wallet", /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" }), /* @__PURE__ */ jsx("path", { d: "M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" })] }));
+//#endregion
+export { WalletIcon };
+
+//# sourceMappingURL=WalletIcon.js.map

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

@@ -25,6 +25,7 @@ import LinkedDevicesModal from "./LinkedDevicesModal.js";
 import AuthenticationMethodsModal from "./AuthenticationMethodsModal.js";
 import { WalletSettingsHeader, WalletSettingsLayout } from "./WalletSettingsLayout.js";
 import { AccountsSection } from "./AccountsSection.js";
+import { AddEvmAccount, useEvmAccountSetup } from "./AddEvmAccount.js";
 import { ExportKeysSection } from "./ExportKeysSection.js";
 import { ExportKeysScreen } from "./ExportKeysScreen.js";
 import { TransactionSettingsSection } from "./TransactionSettingsSection.js";
@@ -130,6 +131,10 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 	const canExportEvmKeys = Boolean(loginState.thresholdEcdsaEthereumAddress);
 	const [showQRScanner, setShowQRScanner] = useState(false);
 	const [screen, setScreen] = useState("overview");
+	const accountSetup = useEvmAccountSetup();
+	const accountSetupState = accountSetup.state;
+	const accountSetupRunning = accountSetupState.kind === "adding";
+	const accountsWalletId = (accountSetupRunning || accountSetupState.kind === "added") && walletId === null ? accountSetupState.walletId : walletId;
 	const [recoveryCodesOpen, setRecoveryCodesOpen] = useState(false);
 	const [exportLoadingChain, setExportLoadingChain] = useState(null);
 	const [currentConfirmConfig, setCurrentConfirmConfig] = useState(null);
@@ -148,8 +153,14 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 		handleClose();
 	}, [handleClose]);
 	useEffect(() => {
-		if (!canManageLinkedDevices) setScreen("overview");
-	}, [canManageLinkedDevices]);
+		const switchedWallet = accountSetupState.kind !== "idle" && walletId !== null && walletId !== accountSetupState.walletId;
+		if (!canManageLinkedDevices && !accountSetupRunning && accountSetupState.kind !== "added" || switchedWallet) setScreen("overview");
+	}, [
+		canManageLinkedDevices,
+		accountSetupRunning,
+		accountSetupState,
+		walletId
+	]);
 	useEffect(() => {
 		if (!seams) return;
 		if (!loginState.isLoggedIn || !walletId) {
@@ -286,12 +297,14 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 		const nearExplorer = resolvePrimaryExplorerUrl(chains, "near") || nearExplorerBaseUrl;
 		const tempoExplorer = resolvePrimaryExplorerUrl(chains, "tempo");
 		const evmExplorer = resolvePrimaryExplorerUrl(chains, "evm");
-		const evmAddress = loginState.thresholdEcdsaEthereumAddress;
-		if (nearAccountId && nearExplorer) rows.push({
+		const completedSetup = accountSetupState.kind === "added" && accountsWalletId === accountSetupState.walletId ? accountSetupState : null;
+		const evmAddress = completedSetup?.evmAddress ?? loginState.thresholdEcdsaEthereumAddress;
+		const accountNearId = nearAccountId ?? completedSetup?.nearAccountId;
+		if (accountNearId && nearExplorer) rows.push({
 			id: "near",
 			label: "NEAR",
-			address: nearAccountId,
-			href: `${nearExplorer}/address/${nearAccountId}`
+			address: accountNearId,
+			href: `${nearExplorer}/address/${accountNearId}`
 		});
 		if (evmAddress && tempoExplorer) rows.push({
 			id: "tempo",
@@ -310,15 +323,17 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 		seams,
 		nearAccountId,
 		nearExplorerBaseUrl,
-		loginState.thresholdEcdsaEthereumAddress
+		loginState.thresholdEcdsaEthereumAddress,
+		accountSetupState,
+		accountsWalletId
 	]);
 	const MENU_ITEMS = useMemo(() => {
 		const items = [];
-		if (accountsRows.length > 0) items.push({
+		if (accountsRows.length > 0 || loginState.isLoggedIn) items.push({
 			id: PROFILE_MENU_ITEM_IDS.ACCOUNTS,
 			icon: /* @__PURE__ */ jsx(GlobeIcon, {}),
 			label: "Accounts",
-			description: "View accounts on block explorers",
+			description: "View or add accounts",
 			disabled: !loginState.isLoggedIn,
 			onClick: setScreen.bind(null, "accounts"),
 			keepOpenOnClick: true
@@ -447,10 +462,17 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 		accounts: /* @__PURE__ */ jsxs(AccountMenuScreen, {
 			title: walletText(locale, "Accounts"),
 			onBack: backToMenu,
-			children: [/* @__PURE__ */ jsx("p", {
-				className: "seams-account-description",
-				children: /* @__PURE__ */ jsx(WalletText, { message: "Your addresses across networks." })
-			}), /* @__PURE__ */ jsx(AccountsSection, { rows: accountsRows })]
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "seams-account-description",
+					children: /* @__PURE__ */ jsx(WalletText, { message: "Your addresses across networks." })
+				}),
+				/* @__PURE__ */ jsx(AccountsSection, { rows: accountsRows }),
+				accountsWalletId ? /* @__PURE__ */ jsx(AddEvmAccount, {
+					walletId: accountsWalletId,
+					setup: accountSetup
+				}, accountsWalletId) : null
+			]
 		}),
 		"export-keys": /* @__PURE__ */ jsx(ExportKeysScreen, {
 			onBack: backToMenu,