@tatchi-xyz/sdk 0.19.0 → 0.21.0

package/dist/esm/react/components/PasskeyAuthMenu/ui/EmailRecoverySlide.js

@@ -1,11 +1,65 @@
-import { init_accountIds, toAccountId } from "../../../sdk/src/core/types/accountIds.js";
-import { IndexedDBManager, init_IndexedDBManager } from "../../../sdk/src/core/IndexedDBManager/index.js";
+import { EmailRecoveryPhase, EmailRecoveryStatus, init_sdkSentEvents } from "../../../sdk/src/core/types/sdkSentEvents.js";
+import { bytesToHex, canonicalizeEmail, init_EmailRecovery } from "../../../sdk/src/core/EmailRecovery/index.js";
+import { EmailRecoveryErrorCode, init_emailRecovery } from "../../../sdk/src/core/types/emailRecovery.js";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react/components/PasskeyAuthMenu/ui/EmailRecoverySlide.tsx
-init_IndexedDBManager();
-init_accountIds();
+init_sdkSentEvents();
+init_emailRecovery();
+init_EmailRecovery();
+async function hashRecoveryEmailForAccountHex(args) {
+	const salt = String(args.accountId || "").trim().toLowerCase();
+	if (!salt) return null;
+	const canonical = canonicalizeEmail(String(args.recoveryEmail || ""));
+	if (!canonical || !canonical.includes("@")) return null;
+	if (typeof crypto === "undefined" || !crypto.subtle) return null;
+	const input = `${canonical}|${salt}`;
+	const bytes = new TextEncoder().encode(input);
+	const digest = await crypto.subtle.digest("SHA-256", bytes);
+	return bytesToHex(new Uint8Array(digest));
+}
+function getEmailRecoveryErrorCode(err) {
+	const code = err?.code;
+	if (typeof code !== "string") return null;
+	return Object.values(EmailRecoveryErrorCode).includes(code) ? code : null;
+}
+function getEmailRecoveryUiError(err) {
+	const fallback = err instanceof Error ? err.message : String(err || "");
+	const normalizedFallback = fallback.trim().toLowerCase();
+	if (normalizedFallback.includes("recovery email is required")) return {
+		message: fallback || "Recovery email is required for email-based account recovery. Make sure you send the email from your configured recovery email address.",
+		canRestart: true
+	};
+	const code = getEmailRecoveryErrorCode(err);
+	switch (code) {
+		case EmailRecoveryErrorCode.VRF_CHALLENGE_EXPIRED: return {
+			message: fallback || "Timed out finalizing registration (VRF challenge expired). Please restart email recovery and try again.",
+			canRestart: true
+		};
+		case EmailRecoveryErrorCode.REGISTRATION_NOT_VERIFIED: return {
+			message: fallback || "Registration did not verify on-chain. Please restart email recovery and try again.",
+			canRestart: true
+		};
+		default: return {
+			message: fallback || "Email recovery failed",
+			canRestart: false
+		};
+	}
+}
+function getEmailRecoveryErrorTxHash(err) {
+	const carrier = err;
+	const ctx = carrier?.context && typeof carrier.context === "object" ? carrier.context : null;
+	const details = carrier?.details && typeof carrier.details === "object" ? carrier.details : null;
+	const source = ctx ?? details;
+	if (!source) return null;
+	const txHash = source.transactionHash;
+	return typeof txHash === "string" && txHash.trim().length > 0 ? txHash.trim() : null;
+}
+function asRecord(value) {
+	if (!value || typeof value !== "object") return null;
+	return value;
+}
 const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, emailRecoveryOptions }) => {
 	const mountedRef = React.useRef(true);
 	const mailtoAttemptTimerRef = React.useRef(null);
@@ -22,19 +76,22 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 	}, []);
 	const [isBusy, setIsBusy] = React.useState(false);
 	const [accountIdInput, setAccountIdInput] = React.useState("");
-	const [recoveryEmailInput, setRecoveryEmailInput] = React.useState("");
 	const [pendingMailtoUrl, setPendingMailtoUrl] = React.useState(null);
+	const [pendingNearPublicKey, setPendingNearPublicKey] = React.useState(null);
 	const [mailtoUiState, setMailtoUiState] = React.useState("ready");
 	const [statusText, setStatusText] = React.useState(null);
 	const [pollingElapsedMs, setPollingElapsedMs] = React.useState(null);
 	const [errorText, setErrorText] = React.useState(null);
+	const [canRestart, setCanRestart] = React.useState(false);
 	const [accountInfo, setAccountInfo] = React.useState(null);
 	const [accountInfoLoading, setAccountInfoLoading] = React.useState(false);
 	const [accountInfoError, setAccountInfoError] = React.useState(null);
 	const [localRecoveryEmails, setLocalRecoveryEmails] = React.useState([]);
+	const [recoveryEmailRecords, setRecoveryEmailRecords] = React.useState([]);
+	const [recoveryEmailInput, setRecoveryEmailInput] = React.useState("");
+	const [recoveryEmailMatchStatus, setRecoveryEmailMatchStatus] = React.useState("empty");
 	const [explorerToast, setExplorerToast] = React.useState(null);
 	const lastPrefilledAccountIdRef = React.useRef("");
-	const lastPrefilledRecoveryEmailRef = React.useRef("");
 	React.useEffect(() => {
 		const next = (accountId || "").trim();
 		if (!next) return;
@@ -45,14 +102,19 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 	}, [accountId]);
 	React.useEffect(() => {
 		setPendingMailtoUrl(null);
+		setPendingNearPublicKey(null);
 		setMailtoUiState("ready");
 		cancelRequestedRef.current = false;
 		setStatusText(null);
 		setPollingElapsedMs(null);
 		setErrorText(null);
+		setCanRestart(false);
 		setAccountInfo(null);
 		setAccountInfoError(null);
 		setLocalRecoveryEmails([]);
+		setRecoveryEmailRecords([]);
+		setRecoveryEmailInput("");
+		setRecoveryEmailMatchStatus("empty");
 		setExplorerToast(null);
 		if (mailtoAttemptTimerRef.current != null) {
 			window.clearTimeout(mailtoAttemptTimerRef.current);
@@ -66,22 +128,26 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 		};
 	};
 	const safeSetPendingMailtoUrl = React.useMemo(() => safeSet(setPendingMailtoUrl), []);
+	const safeSetPendingNearPublicKey = React.useMemo(() => safeSet(setPendingNearPublicKey), []);
 	const safeSetStatusText = React.useMemo(() => safeSet(setStatusText), []);
 	const safeSetPollingElapsedMs = React.useMemo(() => safeSet(setPollingElapsedMs), []);
 	const safeSetErrorText = React.useMemo(() => safeSet(setErrorText), []);
 	const safeSetIsBusy = React.useMemo(() => safeSet(setIsBusy), []);
+	const safeSetCanRestart = React.useMemo(() => safeSet(setCanRestart), []);
 	const safeSetAccountInfo = React.useMemo(() => safeSet(setAccountInfo), []);
 	const safeSetAccountInfoLoading = React.useMemo(() => safeSet(setAccountInfoLoading), []);
 	const safeSetAccountInfoError = React.useMemo(() => safeSet(setAccountInfoError), []);
 	const safeSetLocalRecoveryEmails = React.useMemo(() => safeSet(setLocalRecoveryEmails), []);
+	const safeSetRecoveryEmailRecords = React.useMemo(() => safeSet(setRecoveryEmailRecords), []);
+	const safeSetRecoveryEmailMatchStatus = React.useMemo(() => safeSet(setRecoveryEmailMatchStatus), []);
 	const safeSetExplorerToast = React.useMemo(() => safeSet(setExplorerToast), []);
 	const safeSetMailtoUiState = React.useMemo(() => safeSet(setMailtoUiState), []);
 	const onEvent = React.useCallback((ev) => {
 		if (cancelRequestedRef.current) return;
 		safeSetStatusText(ev?.message || null);
 		emailRecoveryOptions?.onEvent?.(ev);
-		const data = ev?.data || {};
-		const rawTxHash = data?.transactionHash ?? data?.transaction_hash;
+		const data = "data" in ev ? asRecord(ev.data) : null;
+		const rawTxHash = data?.["transactionHash"] ?? data?.["transaction_hash"];
 		const txHash = typeof rawTxHash === "string" ? rawTxHash.trim() : "";
 		if (txHash) {
 			const base = String(tatchiPasskey.configs?.nearExplorerUrl || "https://testnet.nearblocks.io").replace(/\/$/, "");
@@ -91,16 +157,18 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 				transactionHash: txHash
 			});
 		}
-		const elapsedRaw = data?.elapsedMs ?? data?.elapsed_ms;
+		const elapsedRaw = data?.["elapsedMs"] ?? data?.["elapsed_ms"];
 		if (elapsedRaw == null) safeSetPollingElapsedMs(null);
 		const elapsed = elapsedRaw == null ? NaN : Number(elapsedRaw);
 		if (!Number.isNaN(elapsed)) safeSetPollingElapsedMs(elapsed);
-		if (ev?.phase === "email-recovery-error" || ev?.status === "error") {
-			const raw = ev?.error || ev?.message || "Email recovery failed";
-			safeSetErrorText(String(raw));
+		if (ev.phase === EmailRecoveryPhase.ERROR || ev.status === EmailRecoveryStatus.ERROR) {
+			const raw = "error" in ev ? ev.error : ev.message;
+			safeSetErrorText(raw || "Email recovery failed");
+			safeSetCanRestart(false);
 		}
 	}, [
 		emailRecoveryOptions,
+		safeSetCanRestart,
 		safeSetErrorText,
 		safeSetExplorerToast,
 		safeSetPollingElapsedMs,
@@ -117,6 +185,16 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 			accountId: normalized
 		});
 	}, [safeSetExplorerToast, tatchiPasskey]);
+	const showExplorerTxToast = React.useCallback((txHash) => {
+		const normalized = (txHash || "").trim();
+		if (!normalized) return;
+		const base = String(tatchiPasskey.configs?.nearExplorerUrl || "https://testnet.nearblocks.io").replace(/\/$/, "");
+		const url = base.includes("nearblocks.io") ? `${base}/txns/${normalized}` : `${base}/transactions/${normalized}`;
+		safeSetExplorerToast({
+			url,
+			transactionHash: normalized
+		});
+	}, [safeSetExplorerToast, tatchiPasskey]);
 	const launchMailto = React.useCallback((rawMailtoUrl) => {
 		const url = String(rawMailtoUrl || "").trim();
 		if (!url) return;
@@ -162,40 +240,9 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 			document.removeEventListener("visibilitychange", onVisibilityChange);
 		};
 	}, [mailtoUiState, safeSetMailtoUiState]);
-	const fetchLocalRecoveryEmailsFromIndexedDB = React.useCallback(async (rawAccountId) => {
-		const normalized = (rawAccountId || "").trim();
-		if (!normalized) {
-			console.log("[EmailRecoverySlide] fetchLocalRecoveryEmails: empty accountId");
-			return [];
-		}
-		try {
-			console.log("[EmailRecoverySlide] fetchLocalRecoveryEmails: loading from IndexedDB", { accountId: normalized });
-			const records = await IndexedDBManager.getRecoveryEmails(toAccountId(normalized));
-			console.log("[EmailRecoverySlide] fetchLocalRecoveryEmails: raw IndexedDB records", {
-				accountId: normalized,
-				count: Array.isArray(records) ? records.length : 0,
-				records
-			});
-			if (!Array.isArray(records) || records.length === 0) return [];
-			const sorted = [...records].sort((a, b) => (b?.addedAt || 0) - (a?.addedAt || 0));
-			const emails = sorted.map((r) => String(r?.email || "").trim().toLowerCase()).filter((e) => !!e && e.includes("@"));
-			const uniq = Array.from(new Set(emails));
-			console.log("[EmailRecoverySlide] fetchLocalRecoveryEmails: parsed emails", {
-				accountId: normalized,
-				emails: uniq
-			});
-			return uniq;
-		} catch (err) {
-			console.log("[EmailRecoverySlide] fetchLocalRecoveryEmails: failed to read IndexedDB", {
-				accountId: normalized,
-				error: err instanceof Error ? err.message : String(err)
-			});
-			return [];
-		}
-	}, []);
 	const deriveEmailsFromRecoveryRecords = React.useCallback((records) => {
-		if (!Array.isArray(records) || records.length === 0) return [];
-		const emails = records.map((r) => String(r?.email || "").trim().toLowerCase()).filter((e) => !!e && e.includes("@"));
+		if (records.length === 0) return [];
+		const emails = records.map((r) => r.email.trim().toLowerCase()).filter((e) => e.length > 0 && e.includes("@"));
 		return Array.from(new Set(emails));
 	}, []);
 	React.useEffect(() => {
@@ -213,27 +260,11 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 		const handle = window.setTimeout(() => {
 			(async () => {
 				try {
-					const isWalletIframeMode = !!tatchiPasskey.configs?.iframeWallet?.walletOrigin;
-					let localEmails = [];
-					if (!isWalletIframeMode) {
-						localEmails = await fetchLocalRecoveryEmailsFromIndexedDB(normalized);
-						if (!cancelled) console.log("[EmailRecoverySlide] local saved emails (IndexedDB)", {
-							accountId: normalized,
-							localEmails
-						});
-					}
 					const records = await tatchiPasskey.getRecoveryEmails(normalized);
-					const resolvedEmails = isWalletIframeMode ? deriveEmailsFromRecoveryRecords(records) : localEmails;
+					const resolvedEmails = deriveEmailsFromRecoveryRecords(records);
 					if (!cancelled) {
 						safeSetLocalRecoveryEmails(resolvedEmails);
-						console.log("[EmailRecoverySlide] recovery email suggestions (state)", {
-							accountId: normalized,
-							emails: resolvedEmails
-						});
-						if (resolvedEmails.length === 1 && (recoveryEmailInput.trim() === "" || recoveryEmailInput === lastPrefilledRecoveryEmailRef.current)) {
-							lastPrefilledRecoveryEmailRef.current = resolvedEmails[0];
-							setRecoveryEmailInput(resolvedEmails[0]);
-						}
+						safeSetRecoveryEmailRecords(records);
 					}
 					const info = records ? { emailsCount: Array.isArray(records) ? records.length : 0 } : null;
 					if (cancelled) return;
@@ -241,7 +272,10 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 				} catch (err) {
 					if (cancelled) return;
 					safeSetAccountInfo(null);
-					safeSetAccountInfoError(err?.message || "Failed to load email recovery settings for this account");
+					const msg = err instanceof Error ? err.message : "";
+					safeSetAccountInfoError(msg || "Failed to load email recovery settings for this account");
+					safeSetLocalRecoveryEmails([]);
+					safeSetRecoveryEmailRecords([]);
 				} finally {
 					if (!cancelled) safeSetAccountInfoLoading(false);
 				}
@@ -254,37 +288,114 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 	}, [
 		accountIdInput,
 		deriveEmailsFromRecoveryRecords,
-		fetchLocalRecoveryEmailsFromIndexedDB,
-		recoveryEmailInput,
 		safeSetAccountInfo,
 		safeSetAccountInfoError,
 		safeSetAccountInfoLoading,
 		safeSetLocalRecoveryEmails,
+		safeSetRecoveryEmailRecords,
 		tatchiPasskey
 	]);
+	const recoveryEmailConfirmationRequired = !accountInfoLoading && !accountInfoError && !!accountInfo && accountInfo.emailsCount > 0 && localRecoveryEmails.length === 0;
+	React.useEffect(() => {
+		const normalizedAccountId = (accountIdInput || "").trim();
+		const rawEmail = (recoveryEmailInput || "").trim();
+		if (!rawEmail || !normalizedAccountId) {
+			safeSetRecoveryEmailMatchStatus("empty");
+			return;
+		}
+		if (!Array.isArray(recoveryEmailRecords) || recoveryEmailRecords.length === 0) {
+			safeSetRecoveryEmailMatchStatus("checking");
+			return;
+		}
+		let cancelled = false;
+		safeSetRecoveryEmailMatchStatus("checking");
+		const handle = window.setTimeout(() => {
+			(async () => {
+				try {
+					const hashHex = await hashRecoveryEmailForAccountHex({
+						recoveryEmail: rawEmail,
+						accountId: normalizedAccountId
+					});
+					if (cancelled) return;
+					if (!hashHex) {
+						safeSetRecoveryEmailMatchStatus("invalid");
+						return;
+					}
+					const normalizedHashHex = hashHex.toLowerCase();
+					const matches = recoveryEmailRecords.some((rec) => String(rec.hashHex || "").toLowerCase() === normalizedHashHex);
+					safeSetRecoveryEmailMatchStatus(matches ? "match" : "mismatch");
+				} catch {
+					if (!cancelled) safeSetRecoveryEmailMatchStatus("invalid");
+				}
+			})();
+		}, 250);
+		return () => {
+			cancelled = true;
+			window.clearTimeout(handle);
+		};
+	}, [
+		accountIdInput,
+		recoveryEmailInput,
+		recoveryEmailRecords,
+		safeSetRecoveryEmailMatchStatus
+	]);
 	const handleStart = React.useCallback(async () => {
 		const normalizedAccountId = (accountIdInput || "").trim();
 		if (!normalizedAccountId) {
 			safeSetErrorText("Enter an account ID.");
 			return;
 		}
-		const emailCandidate = (recoveryEmailInput || "").trim().toLowerCase();
-		if (!emailCandidate) {
-			safeSetErrorText("Enter the recovery email to send from.");
+		if (accountInfoLoading) {
+			safeSetErrorText("Checking recovery email settings…");
+			return;
+		}
+		if (accountInfoError) {
+			safeSetErrorText(accountInfoError);
+			return;
+		}
+		if (!accountInfo) {
+			safeSetErrorText("Failed to load email recovery settings for this account.");
 			return;
 		}
+		if (accountInfo.emailsCount === 0) {
+			safeSetErrorText("No recovery emails are configured for this account.");
+			return;
+		}
+		const recoveryEmail = recoveryEmailInput.trim();
+		if (recoveryEmailConfirmationRequired) {
+			if (!recoveryEmail) {
+				safeSetErrorText("Enter the recovery email address you will send from.");
+				return;
+			}
+			const hashHex = await hashRecoveryEmailForAccountHex({
+				recoveryEmail,
+				accountId: normalizedAccountId
+			}).catch(() => null);
+			if (!hashHex) {
+				safeSetErrorText("Enter a valid recovery email address.");
+				return;
+			}
+			const normalizedHashHex = hashHex.toLowerCase();
+			const matches = recoveryEmailRecords.some((rec) => String(rec.hashHex || "").toLowerCase() === normalizedHashHex);
+			if (!matches) {
+				safeSetErrorText("That email is not configured for recovery on this account. Please use your configured recovery email address.");
+				return;
+			}
+		}
 		safeSetIsBusy(true);
 		cancelRequestedRef.current = false;
 		safeSetErrorText(null);
+		safeSetCanRestart(false);
 		safeSetStatusText(null);
 		safeSetPollingElapsedMs(null);
 		safeSetPendingMailtoUrl(null);
+		safeSetPendingNearPublicKey(null);
 		safeSetMailtoUiState("ready");
 		let didForwardError = false;
 		try {
 			const result = await tatchiPasskey.startEmailRecovery({
 				accountId: normalizedAccountId,
-				recoveryEmail: emailCandidate,
+				...recoveryEmail ? { recoveryEmail } : {},
 				options: {
 					onEvent,
 					onError: (err) => {
@@ -292,11 +403,11 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 						safeSetErrorText(err?.message || "Failed to start email recovery");
 						didForwardError = true;
 						emailRecoveryOptions?.onError?.(err);
-					},
-					afterCall: async () => {}
+					}
 				}
 			});
 			safeSetPendingMailtoUrl(result.mailtoUrl);
+			safeSetPendingNearPublicKey(result.nearPublicKey);
 			safeSetStatusText("Recovery email draft ready. If it didn’t open automatically, click “Open recovery email draft”. Waiting for verification…");
 			attemptOpenMailtoAuto(result.mailtoUrl);
 			const finalizePromise = tatchiPasskey.finalizeEmailRecovery({
@@ -306,11 +417,14 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 					onEvent,
 					onError: (err) => {
 						if (cancelRequestedRef.current) return;
-						safeSetErrorText(err?.message || "Failed to finalize email recovery");
+						const uiError = getEmailRecoveryUiError(err);
+						safeSetErrorText(uiError.message || "Failed to finalize email recovery");
+						safeSetCanRestart(uiError.canRestart);
+						const txHash = getEmailRecoveryErrorTxHash(err);
+						if (txHash) showExplorerTxToast(txHash);
 						didForwardError = true;
 						emailRecoveryOptions?.onError?.(err);
-					},
-					afterCall: async () => {}
+					}
 				}
 			});
 			showExplorerToast(normalizedAccountId);
@@ -333,10 +447,16 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 				safeSetStatusText(null);
 				safeSetPollingElapsedMs(null);
 				safeSetPendingMailtoUrl(null);
+				safeSetPendingNearPublicKey(null);
 				safeSetMailtoUiState("ready");
+				safeSetCanRestart(false);
 				return;
 			}
-			safeSetErrorText(err?.message || "Failed to start email recovery");
+			const uiError = getEmailRecoveryUiError(err);
+			safeSetErrorText(uiError.message || "Failed to start email recovery");
+			safeSetCanRestart(uiError.canRestart);
+			const txHash = getEmailRecoveryErrorTxHash(err);
+			if (txHash) showExplorerTxToast(txHash);
 			if (!didForwardError && err instanceof Error) emailRecoveryOptions?.onError?.(err);
 		} finally {
 			safeSetIsBusy(false);
@@ -344,9 +464,14 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 	}, [
 		accountIdInput,
 		emailRecoveryOptions,
-		recoveryEmailInput,
 		onEvent,
 		refreshLoginState,
+		accountInfo,
+		accountInfoError,
+		accountInfoLoading,
+		recoveryEmailConfirmationRequired,
+		recoveryEmailInput,
+		recoveryEmailRecords,
 		showExplorerToast,
 		safeSetErrorText,
 		safeSetIsBusy,
@@ -355,10 +480,64 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 		safeSetStatusText,
 		safeSetMailtoUiState,
 		attemptOpenMailtoAuto,
+		showExplorerTxToast,
 		tatchiPasskey
 	]);
-	const summaryLine = accountInfoLoading ? "Checking if account has recovery emails configured..." : accountInfo && !accountInfoError ? `Recovery emails configured: ${accountInfo.emailsCount}` : "\xA0";
+	const handleRestart = React.useCallback(async () => {
+		const normalizedAccountId = (accountIdInput || "").trim();
+		if (!normalizedAccountId) return;
+		safeSetIsBusy(true);
+		try {
+			cancelRequestedRef.current = true;
+			await tatchiPasskey.cancelEmailRecovery({
+				accountId: normalizedAccountId,
+				nearPublicKey: pendingNearPublicKey || void 0
+			}).catch(() => {});
+			safeSetErrorText(null);
+			safeSetStatusText(null);
+			safeSetPollingElapsedMs(null);
+			safeSetPendingMailtoUrl(null);
+			safeSetPendingNearPublicKey(null);
+			safeSetMailtoUiState("ready");
+			safeSetCanRestart(false);
+		} finally {
+			cancelRequestedRef.current = false;
+			safeSetIsBusy(false);
+		}
+	}, [
+		accountIdInput,
+		pendingNearPublicKey,
+		safeSetCanRestart,
+		safeSetErrorText,
+		safeSetIsBusy,
+		safeSetMailtoUiState,
+		safeSetPendingMailtoUrl,
+		safeSetPendingNearPublicKey,
+		safeSetPollingElapsedMs,
+		safeSetStatusText,
+		tatchiPasskey
+	]);
+	const summaryLine = accountInfoLoading ? /* @__PURE__ */ jsxs(Fragment, { children: ["Checking if account has recovery emails configured", /* @__PURE__ */ jsxs("span", {
+		className: "w3a-ellipsis",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "w3a-ellipsis-dot",
+				children: "."
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "w3a-ellipsis-dot",
+				children: "."
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "w3a-ellipsis-dot",
+				children: "."
+			})
+		]
+	})] }) : accountInfo && !accountInfoError ? `Recovery emails configured: ${accountInfo.emailsCount}` : "\xA0";
 	const noRecoveryEmailsConfigured = !accountInfoLoading && !accountInfoError && !!accountInfo && accountInfo.emailsCount === 0;
+	const disableStartForRecoveryEmailMismatch = recoveryEmailConfirmationRequired && (recoveryEmailMatchStatus === "empty" || recoveryEmailMatchStatus === "checking" || recoveryEmailMatchStatus === "invalid" || recoveryEmailMatchStatus === "mismatch");
+	const startDisabled = isBusy || accountInfoLoading || !!accountInfoError || !accountInfo || noRecoveryEmailsConfigured || disableStartForRecoveryEmailMismatch;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w3a-email-recovery-slide",
 		children: [
@@ -368,92 +547,113 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "w3a-email-recovery-help",
-				children: "Send a special recovery email from your recovery email address. Your account will be recovered with a new key once the email is verified."
+				children: "Send a special email to recover your account. This email must be sent from the designated email recovery address."
 			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "w3a-email-recovery-field",
+			/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", {
+				className: "w3a-input-pill w3a-email-recovery-input-pill",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "w3a-input-pill w3a-email-recovery-input-pill",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "w3a-input-wrap",
-						children: /* @__PURE__ */ jsx("input", {
-							type: "text",
-							value: accountIdInput,
-							onChange: (e) => setAccountIdInput(e.target.value),
-							placeholder: "NEAR account ID (e.g. alice.testnet)",
-							className: "w3a-input",
-							autoCapitalize: "none",
-							autoCorrect: "off",
-							spellCheck: false,
-							inputMode: "text",
-							disabled: isBusy
-						})
+					className: "w3a-input-wrap",
+					children: /* @__PURE__ */ jsx("input", {
+						type: "text",
+						value: accountIdInput,
+						onChange: (e) => setAccountIdInput(e.target.value),
+						placeholder: "NEAR account ID (e.g. alice.testnet)",
+						className: "w3a-input",
+						autoCapitalize: "none",
+						autoCorrect: "off",
+						spellCheck: false,
+						inputMode: "text",
+						disabled: isBusy
 					})
 				})
-			}),
-			/* @__PURE__ */ jsx("div", {
+			}) }),
+			/* @__PURE__ */ jsxs("div", {
 				className: "w3a-email-recovery-summary",
 				"aria-live": "polite",
-				children: /* @__PURE__ */ jsx("div", { children: summaryLine })
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "w3a-email-recovery-field",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "w3a-input-pill w3a-email-recovery-input-pill",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "w3a-input-wrap",
-						children: /* @__PURE__ */ jsx("input", {
-							type: "email",
-							value: recoveryEmailInput,
-							onChange: (e) => setRecoveryEmailInput(e.target.value),
-							placeholder: "Recovery email to send from",
-							className: "w3a-input",
-							list: localRecoveryEmails.length > 0 ? "w3a-email-recovery-saved-emails" : void 0,
-							autoCapitalize: "none",
-							autoCorrect: "off",
-							spellCheck: false,
-							inputMode: "email",
-							disabled: isBusy || noRecoveryEmailsConfigured
-						})
+				children: [
+					/* @__PURE__ */ jsx("div", { children: summaryLine }),
+					!!accountInfoError && /* @__PURE__ */ jsx("div", {
+						className: "w3a-email-recovery-warning",
+						children: accountInfoError
+					}),
+					localRecoveryEmails.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: "w3a-email-recovery-saved-emails",
+						role: "list",
+						"aria-label": "Recovery emails",
+						children: localRecoveryEmails.map((email) => /* @__PURE__ */ jsx("span", {
+							className: "w3a-email-recovery-email-chip w3a-email-recovery-email-chip-static",
+							role: "listitem",
+							children: email
+						}, email))
+					}),
+					recoveryEmailConfirmationRequired && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "w3a-email-recovery-warning",
+							children: "This device can’t display your configured recovery email address. Enter the email you will send from to confirm it matches what’s configured for this account."
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "w3a-input-pill w3a-email-recovery-input-pill",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "w3a-input-wrap",
+								children: /* @__PURE__ */ jsx("input", {
+									type: "email",
+									value: recoveryEmailInput,
+									onChange: (e) => setRecoveryEmailInput(e.target.value),
+									placeholder: "Recovery email address (sender)",
+									className: "w3a-input",
+									autoCapitalize: "none",
+									autoCorrect: "off",
+									spellCheck: false,
+									inputMode: "email",
+									disabled: isBusy
+								})
+							})
+						}),
+						recoveryEmailMatchStatus === "checking" && /* @__PURE__ */ jsx("div", { children: "Checking recovery email…" }),
+						recoveryEmailMatchStatus === "invalid" && /* @__PURE__ */ jsx("div", {
+							className: "w3a-email-recovery-warning",
+							children: "Enter a valid email address."
+						}),
+						recoveryEmailMatchStatus === "mismatch" && /* @__PURE__ */ jsx("div", {
+							className: "w3a-email-recovery-warning",
+							children: "That email is not configured for recovery on this account."
+						}),
+						recoveryEmailMatchStatus === "match" && /* @__PURE__ */ jsx("div", { children: "Recovery email verified for this account." })
+					] }),
+					!!accountIdInput.trim() && !noRecoveryEmailsConfigured && /* @__PURE__ */ jsx("div", {
+						className: "w3a-email-recovery-from-warning",
+						children: recoveryEmailInput.trim() ? `Check that you are sending the recovery email from ${recoveryEmailInput.trim()}.` : "Check that you are sending the recovery email from your designated recovery email."
 					})
-				})
-			}),
-			localRecoveryEmails.length > 0 && /* @__PURE__ */ jsxs("div", {
-				className: "w3a-email-recovery-summary",
-				"aria-live": "polite",
-				children: [/* @__PURE__ */ jsx("div", { children: "Saved on this device:" }), /* @__PURE__ */ jsx("div", {
-					className: "w3a-email-recovery-saved-emails",
-					children: localRecoveryEmails.map((email) => /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "w3a-email-recovery-email-chip",
-						onClick: () => setRecoveryEmailInput(email),
-						disabled: isBusy,
-						children: email
-					}, email))
-				})]
-			}),
-			localRecoveryEmails.length > 0 && /* @__PURE__ */ jsx("datalist", {
-				id: "w3a-email-recovery-saved-emails",
-				children: localRecoveryEmails.map((email) => /* @__PURE__ */ jsx("option", { value: email }, email))
+				]
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "w3a-email-recovery-actions",
-				children: [(!pendingMailtoUrl || !isBusy) && /* @__PURE__ */ jsx("button", {
-					onClick: handleStart,
-					className: "w3a-link-device-btn w3a-link-device-btn-primary",
-					disabled: isBusy || noRecoveryEmailsConfigured,
-					children: noRecoveryEmailsConfigured ? "No recovery emails configured" : isBusy ? "Working…" : "Start Email Recovery"
-				}), pendingMailtoUrl && /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: () => attemptOpenMailtoFromUserGesture(pendingMailtoUrl),
-					className: "w3a-link-device-btn w3a-link-device-btn-primary",
-					disabled: mailtoUiState === "opening",
-					"aria-busy": mailtoUiState === "opening",
-					children: [mailtoUiState === "opening" && /* @__PURE__ */ jsx("span", {
-						className: "w3a-spinner",
-						"aria-hidden": "true"
-					}), mailtoUiState === "opening" ? "Opening email…" : "Open recovery email draft"]
-				})]
+				children: [
+					(!pendingMailtoUrl || !isBusy) && /* @__PURE__ */ jsx("button", {
+						onClick: handleStart,
+						className: "w3a-link-device-btn w3a-link-device-btn-primary",
+						disabled: startDisabled,
+						children: accountInfoLoading ? "Checking recovery emails…" : noRecoveryEmailsConfigured ? "No recovery emails configured" : disableStartForRecoveryEmailMismatch ? "Confirm recovery email" : isBusy ? "Working…" : "Start Email Recovery"
+					}),
+					pendingMailtoUrl && /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => attemptOpenMailtoFromUserGesture(pendingMailtoUrl),
+						className: "w3a-link-device-btn w3a-link-device-btn-primary",
+						disabled: mailtoUiState === "opening",
+						"aria-busy": mailtoUiState === "opening",
+						children: [mailtoUiState === "opening" && /* @__PURE__ */ jsx("span", {
+							className: "w3a-spinner",
+							"aria-hidden": "true"
+						}), mailtoUiState === "opening" ? "Opening email…" : "Open recovery email draft"]
+					}),
+					errorText && canRestart && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: handleRestart,
+						className: "w3a-link-device-btn",
+						disabled: isBusy,
+						children: "Restart email recovery"
+					})
+				]
 			}),
 			(errorText || statusText || explorerToast) && /* @__PURE__ */ jsxs("div", {
 				className: `w3a-email-recovery-status${errorText ? " is-error" : ""}`,