@tatchi-xyz/sdk 0.20.0 → 0.21.0

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

@@ -1,13 +1,24 @@
-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;
@@ -15,6 +26,11 @@ function getEmailRecoveryErrorCode(err) {
 }
 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 {
@@ -31,6 +47,19 @@ function getEmailRecoveryUiError(err) {
 		};
 	}
 }
+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);
@@ -47,7 +76,6 @@ 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");
@@ -59,9 +87,11 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 	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;
@@ -82,6 +112,9 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 		setAccountInfo(null);
 		setAccountInfoError(null);
 		setLocalRecoveryEmails([]);
+		setRecoveryEmailRecords([]);
+		setRecoveryEmailInput("");
+		setRecoveryEmailMatchStatus("empty");
 		setExplorerToast(null);
 		if (mailtoAttemptTimerRef.current != null) {
 			window.clearTimeout(mailtoAttemptTimerRef.current);
@@ -105,14 +138,16 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 	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(/\/$/, "");
@@ -122,13 +157,13 @@ 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);
 		}
 	}, [
@@ -150,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;
@@ -195,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(() => {
@@ -246,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;
@@ -274,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);
 				}
@@ -287,25 +288,100 @@ 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);
@@ -319,7 +395,7 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 		try {
 			const result = await tatchiPasskey.startEmailRecovery({
 				accountId: normalizedAccountId,
-				recoveryEmail: emailCandidate,
+				...recoveryEmail ? { recoveryEmail } : {},
 				options: {
 					onEvent,
 					onError: (err) => {
@@ -327,8 +403,7 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 						safeSetErrorText(err?.message || "Failed to start email recovery");
 						didForwardError = true;
 						emailRecoveryOptions?.onError?.(err);
-					},
-					afterCall: async () => {}
+					}
 				}
 			});
 			safeSetPendingMailtoUrl(result.mailtoUrl);
@@ -345,10 +420,11 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 						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);
@@ -379,6 +455,8 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 			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);
@@ -386,9 +464,14 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 	}, [
 		accountIdInput,
 		emailRecoveryOptions,
-		recoveryEmailInput,
 		onEvent,
 		refreshLoginState,
+		accountInfo,
+		accountInfoError,
+		accountInfoLoading,
+		recoveryEmailConfirmationRequired,
+		recoveryEmailInput,
+		recoveryEmailRecords,
 		showExplorerToast,
 		safeSetErrorText,
 		safeSetIsBusy,
@@ -397,6 +480,7 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 		safeSetStatusText,
 		safeSetMailtoUiState,
 		attemptOpenMailtoAuto,
+		showExplorerTxToast,
 		tatchiPasskey
 	]);
 	const handleRestart = React.useCallback(async () => {
@@ -433,8 +517,27 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 		safeSetStatusText,
 		tatchiPasskey
 	]);
-	const summaryLine = accountInfoLoading ? "Checking if account has recovery emails configured..." : accountInfo && !accountInfoError ? `Recovery emails configured: ${accountInfo.emailsCount}` : "\xA0";
+	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: [
@@ -444,73 +547,84 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "w3a-email-recovery-help",
-				children: "Send a recovery email from your registered 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",
@@ -518,8 +632,8 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 					(!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"
+						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",
@@ -553,13 +667,13 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 							"s)."
 						]
 					}),
-					explorerToast && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("a", {
+					explorerToast && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("br", {}), /* @__PURE__ */ jsx("a", {
 						className: "w3a-email-recovery-link",
 						href: explorerToast.url,
 						target: "_blank",
 						rel: "noopener noreferrer",
 						children: "View on explorer"
-					}) })
+					})] })
 				]
 			})
 		]