@tatchi-xyz/sdk 0.21.0 → 0.31.0

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

@@ -1,23 +1,22 @@
-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 { EmailRecoveryPhase, EmailRecoveryStatus } from "../../../src/core/types/sdkSentEvents.js";
+import { EmailRecoveryErrorCode } from "../../../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_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));
+const DEFAULT_NEAR_EXPLORER_URL = "https://testnet.nearblocks.io";
+const ACCOUNT_INFO_DEBOUNCE_MS = 350;
+const MAILTO_REENABLE_MS = 2e3;
+function getExplorerBaseUrl(tatchiPasskey) {
+	return String(tatchiPasskey.configs?.nearExplorerUrl || DEFAULT_NEAR_EXPLORER_URL).replace(/\/$/, "");
+}
+function getExplorerAccountUrl(args) {
+	const { base, accountId } = args;
+	return base.includes("nearblocks.io") ? `${base}/address/${accountId}` : `${base}/accounts/${accountId}`;
+}
+function getExplorerTxUrl(args) {
+	const { base, txHash } = args;
+	return base.includes("nearblocks.io") ? `${base}/txns/${txHash}` : `${base}/transactions/${txHash}`;
 }
 function getEmailRecoveryErrorCode(err) {
 	const code = err?.code;
@@ -60,6 +59,139 @@ function asRecord(value) {
 	if (!value || typeof value !== "object") return null;
 	return value;
 }
+function extractTxHashFromEmailRecoveryEvent(ev) {
+	const data = "data" in ev ? asRecord(ev.data) : null;
+	const rawTxHash = data?.["transactionHash"] ?? data?.["transaction_hash"];
+	const txHash = typeof rawTxHash === "string" ? rawTxHash.trim() : "";
+	return txHash || null;
+}
+function extractElapsedMsFromEmailRecoveryEvent(ev) {
+	const data = "data" in ev ? asRecord(ev.data) : null;
+	const elapsedRaw = data?.["elapsedMs"] ?? data?.["elapsed_ms"];
+	if (elapsedRaw == null) return null;
+	const elapsed = Number(elapsedRaw);
+	return Number.isNaN(elapsed) ? void 0 : elapsed;
+}
+function deriveEmailsFromRecoveryRecords(records) {
+	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));
+}
+function EmailRecoveryHeader() {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "w3a-email-recovery-title",
+		children: "Recover Account with Email"
+	}), /* @__PURE__ */ jsx("div", {
+		className: "w3a-email-recovery-help",
+		children: "Send a special email to recover your account. This email must be sent from the designated email recovery address."
+	})] });
+}
+function AccountIdInputRow(props) {
+	const { value, onChange, disabled } = props;
+	return /* @__PURE__ */ jsx("div", { 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,
+				onChange: (e) => onChange(e.target.value),
+				placeholder: "NEAR account ID (e.g. alice.testnet)",
+				className: "w3a-input",
+				autoCapitalize: "none",
+				autoCorrect: "off",
+				spellCheck: false,
+				inputMode: "text",
+				disabled
+			})
+		})
+	}) });
+}
+function RecoveryEmailsSummary(props) {
+	const { summaryLine, accountInfoError, localRecoveryEmails, showFromWarning } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w3a-email-recovery-summary",
+		"aria-live": "polite",
+		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))
+			}),
+			showFromWarning && /* @__PURE__ */ jsx("div", {
+				className: "w3a-email-recovery-from-warning",
+				children: localRecoveryEmails.length === 1 ? `Check that you are sending the recovery email from ${localRecoveryEmails[0]}.` : "Check that you are sending the recovery email from your designated recovery email."
+			})
+		]
+	});
+}
+function EmailRecoveryActions(props) {
+	const { isBusy, pendingMailtoUrl, mailtoUiState, startDisabled, accountInfoLoading, noRecoveryEmailsConfigured, showRestart, onStart, onOpenDraft, onRestart } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w3a-email-recovery-actions",
+		children: [
+			(!pendingMailtoUrl || !isBusy) && /* @__PURE__ */ jsx("button", {
+				onClick: onStart,
+				className: "w3a-link-device-btn w3a-link-device-btn-primary",
+				disabled: startDisabled,
+				children: accountInfoLoading ? "Checking recovery emails…" : noRecoveryEmailsConfigured ? "No recovery emails configured" : isBusy ? "Working…" : "Start Email Recovery"
+			}),
+			pendingMailtoUrl && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => onOpenDraft(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"]
+			}),
+			showRestart && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onRestart,
+				className: "w3a-link-device-btn",
+				disabled: isBusy,
+				children: "Restart email recovery"
+			})
+		]
+	});
+}
+function EmailRecoveryStatusPanel(props) {
+	const { errorText, statusText, pollingElapsedMs, explorerToast } = props;
+	if (!errorText && !statusText && !explorerToast) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `w3a-email-recovery-status${errorText ? " is-error" : ""}`,
+		children: [
+			errorText ? errorText : statusText,
+			pollingElapsedMs != null && !Number.isNaN(pollingElapsedMs) && pollingElapsedMs > 0 && /* @__PURE__ */ jsxs("span", {
+				className: "w3a-email-recovery-elapsed",
+				children: [
+					"(~",
+					Math.round(pollingElapsedMs / 1e3),
+					"s)."
+				]
+			}),
+			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"
+			})] })
+		]
+	});
+}
 const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, emailRecoveryOptions }) => {
 	const mountedRef = React.useRef(true);
 	const mailtoAttemptTimerRef = React.useRef(null);
@@ -74,6 +206,10 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 			}
 		};
 	}, []);
+	const safeSet = React.useCallback((setter, value) => {
+		if (!mountedRef.current) return;
+		setter(value);
+	}, []);
 	const [isBusy, setIsBusy] = React.useState(false);
 	const [accountIdInput, setAccountIdInput] = React.useState("");
 	const [pendingMailtoUrl, setPendingMailtoUrl] = React.useState(null);
@@ -87,9 +223,6 @@ 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("");
 	React.useEffect(() => {
@@ -112,89 +245,64 @@ 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);
 			mailtoAttemptTimerRef.current = null;
 		}
 	}, [accountId]);
-	const safeSet = (setter) => {
-		return (value) => {
-			if (!mountedRef.current) return;
-			setter(value);
-		};
-	};
-	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);
+		safeSet(setStatusText, ev?.message || null);
 		emailRecoveryOptions?.onEvent?.(ev);
-		const data = "data" in ev ? asRecord(ev.data) : null;
-		const rawTxHash = data?.["transactionHash"] ?? data?.["transaction_hash"];
-		const txHash = typeof rawTxHash === "string" ? rawTxHash.trim() : "";
+		const txHash = extractTxHashFromEmailRecoveryEvent(ev);
 		if (txHash) {
-			const base = String(tatchiPasskey.configs?.nearExplorerUrl || "https://testnet.nearblocks.io").replace(/\/$/, "");
-			const url = base.includes("nearblocks.io") ? `${base}/txns/${txHash}` : `${base}/transactions/${txHash}`;
-			safeSetExplorerToast({
-				url,
+			const base = getExplorerBaseUrl(tatchiPasskey);
+			safeSet(setExplorerToast, {
+				url: getExplorerTxUrl({
+					base,
+					txHash
+				}),
 				transactionHash: txHash
 			});
 		}
-		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);
+		const elapsed = extractElapsedMsFromEmailRecoveryEvent(ev);
+		if (elapsed === null) safeSet(setPollingElapsedMs, null);
+		else if (elapsed != null) safeSet(setPollingElapsedMs, elapsed);
 		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);
+			safeSet(setErrorText, raw || "Email recovery failed");
+			safeSet(setCanRestart, false);
 		}
 	}, [
 		emailRecoveryOptions,
-		safeSetCanRestart,
-		safeSetErrorText,
-		safeSetExplorerToast,
-		safeSetPollingElapsedMs,
-		safeSetStatusText,
+		safeSet,
 		tatchiPasskey
 	]);
 	const showExplorerToast = React.useCallback((rawAccountId) => {
 		const normalized = (rawAccountId || "").trim();
 		if (!normalized) return;
-		const base = String(tatchiPasskey.configs?.nearExplorerUrl || "https://testnet.nearblocks.io").replace(/\/$/, "");
-		const url = base.includes("nearblocks.io") ? `${base}/address/${normalized}` : `${base}/accounts/${normalized}`;
-		safeSetExplorerToast({
-			url,
+		const base = getExplorerBaseUrl(tatchiPasskey);
+		safeSet(setExplorerToast, {
+			url: getExplorerAccountUrl({
+				base,
+				accountId: normalized
+			}),
 			accountId: normalized
 		});
-	}, [safeSetExplorerToast, tatchiPasskey]);
+	}, [safeSet, 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,
+		const base = getExplorerBaseUrl(tatchiPasskey);
+		safeSet(setExplorerToast, {
+			url: getExplorerTxUrl({
+				base,
+				txHash: normalized
+			}),
 			transactionHash: normalized
 		});
-	}, [safeSetExplorerToast, tatchiPasskey]);
+	}, [safeSet, tatchiPasskey]);
 	const launchMailto = React.useCallback((rawMailtoUrl) => {
 		const url = String(rawMailtoUrl || "").trim();
 		if (!url) return;
@@ -205,14 +313,14 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 	const attemptOpenMailtoFromUserGesture = React.useCallback((rawMailtoUrl) => {
 		const url = String(rawMailtoUrl || "").trim();
 		if (!url) return;
-		safeSetMailtoUiState("opening");
+		safeSet(setMailtoUiState, "opening");
 		if (mailtoAttemptTimerRef.current != null) window.clearTimeout(mailtoAttemptTimerRef.current);
 		mailtoAttemptTimerRef.current = window.setTimeout(() => {
-			safeSetMailtoUiState((prev) => prev === "opening" ? "ready" : prev);
+			safeSet(setMailtoUiState, (prev) => prev === "opening" ? "ready" : prev);
 			mailtoAttemptTimerRef.current = null;
-		}, 2e3);
+		}, MAILTO_REENABLE_MS);
 		launchMailto(url);
-	}, [launchMailto, safeSetMailtoUiState]);
+	}, [launchMailto, safeSet]);
 	const attemptOpenMailtoAuto = React.useCallback((rawMailtoUrl) => {
 		const url = String(rawMailtoUrl || "").trim();
 		if (!url) return;
@@ -222,7 +330,7 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 		if (mailtoUiState !== "opening") return;
 		if (typeof window === "undefined" || typeof document === "undefined") return;
 		const markMaybeOpened = () => {
-			safeSetMailtoUiState("ready");
+			safeSet(setMailtoUiState, "ready");
 			if (mailtoAttemptTimerRef.current != null) {
 				window.clearTimeout(mailtoAttemptTimerRef.current);
 				mailtoAttemptTimerRef.current = null;
@@ -239,176 +347,96 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 			window.removeEventListener("pagehide", markMaybeOpened);
 			document.removeEventListener("visibilitychange", onVisibilityChange);
 		};
-	}, [mailtoUiState, safeSetMailtoUiState]);
-	const deriveEmailsFromRecoveryRecords = React.useCallback((records) => {
-		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));
-	}, []);
+	}, [mailtoUiState, safeSet]);
 	React.useEffect(() => {
 		const normalized = (accountIdInput || "").trim();
 		if (!normalized) {
 			setAccountInfo(null);
 			setAccountInfoError(null);
 			setAccountInfoLoading(false);
-			safeSetLocalRecoveryEmails([]);
+			safeSet(setLocalRecoveryEmails, []);
 			return;
 		}
 		let cancelled = false;
-		safeSetAccountInfoLoading(true);
-		safeSetAccountInfoError(null);
+		safeSet(setAccountInfoLoading, true);
+		safeSet(setAccountInfoError, null);
 		const handle = window.setTimeout(() => {
 			(async () => {
 				try {
 					const records = await tatchiPasskey.getRecoveryEmails(normalized);
 					const resolvedEmails = deriveEmailsFromRecoveryRecords(records);
-					if (!cancelled) {
-						safeSetLocalRecoveryEmails(resolvedEmails);
-						safeSetRecoveryEmailRecords(records);
-					}
+					if (!cancelled) safeSet(setLocalRecoveryEmails, resolvedEmails);
 					const info = records ? { emailsCount: Array.isArray(records) ? records.length : 0 } : null;
 					if (cancelled) return;
-					safeSetAccountInfo(info);
+					safeSet(setAccountInfo, info);
 				} catch (err) {
 					if (cancelled) return;
-					safeSetAccountInfo(null);
+					safeSet(setAccountInfo, null);
 					const msg = err instanceof Error ? err.message : "";
-					safeSetAccountInfoError(msg || "Failed to load email recovery settings for this account");
-					safeSetLocalRecoveryEmails([]);
-					safeSetRecoveryEmailRecords([]);
+					safeSet(setAccountInfoError, msg || "Failed to load email recovery settings for this account");
+					safeSet(setLocalRecoveryEmails, []);
 				} finally {
-					if (!cancelled) safeSetAccountInfoLoading(false);
+					if (!cancelled) safeSet(setAccountInfoLoading, false);
 				}
 			})();
-		}, 350);
+		}, ACCOUNT_INFO_DEBOUNCE_MS);
 		return () => {
 			cancelled = true;
 			window.clearTimeout(handle);
 		};
 	}, [
 		accountIdInput,
-		deriveEmailsFromRecoveryRecords,
-		safeSetAccountInfo,
-		safeSetAccountInfoError,
-		safeSetAccountInfoLoading,
-		safeSetLocalRecoveryEmails,
-		safeSetRecoveryEmailRecords,
+		safeSet,
 		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.");
+			safeSet(setErrorText, "Enter an account ID.");
 			return;
 		}
 		if (accountInfoLoading) {
-			safeSetErrorText("Checking recovery email settings…");
+			safeSet(setErrorText, "Checking recovery email settings…");
 			return;
 		}
 		if (accountInfoError) {
-			safeSetErrorText(accountInfoError);
+			safeSet(setErrorText, accountInfoError);
 			return;
 		}
 		if (!accountInfo) {
-			safeSetErrorText("Failed to load email recovery settings for this account.");
+			safeSet(setErrorText, "Failed to load email recovery settings for this account.");
 			return;
 		}
 		if (accountInfo.emailsCount === 0) {
-			safeSetErrorText("No recovery emails are configured for this account.");
+			safeSet(setErrorText, "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);
+		safeSet(setIsBusy, true);
 		cancelRequestedRef.current = false;
-		safeSetErrorText(null);
-		safeSetCanRestart(false);
-		safeSetStatusText(null);
-		safeSetPollingElapsedMs(null);
-		safeSetPendingMailtoUrl(null);
-		safeSetPendingNearPublicKey(null);
-		safeSetMailtoUiState("ready");
+		safeSet(setErrorText, null);
+		safeSet(setCanRestart, false);
+		safeSet(setStatusText, null);
+		safeSet(setPollingElapsedMs, null);
+		safeSet(setPendingMailtoUrl, null);
+		safeSet(setPendingNearPublicKey, null);
+		safeSet(setMailtoUiState, "ready");
 		let didForwardError = false;
 		try {
 			const result = await tatchiPasskey.startEmailRecovery({
 				accountId: normalizedAccountId,
-				...recoveryEmail ? { recoveryEmail } : {},
 				options: {
 					onEvent,
 					onError: (err) => {
 						if (cancelRequestedRef.current) return;
-						safeSetErrorText(err?.message || "Failed to start email recovery");
+						safeSet(setErrorText, err?.message || "Failed to start email recovery");
 						didForwardError = true;
 						emailRecoveryOptions?.onError?.(err);
 					}
 				}
 			});
-			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…");
+			safeSet(setPendingMailtoUrl, result.mailtoUrl);
+			safeSet(setPendingNearPublicKey, result.nearPublicKey);
+			safeSet(setStatusText, "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({
 				accountId: normalizedAccountId,
@@ -418,8 +446,8 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 					onError: (err) => {
 						if (cancelRequestedRef.current) return;
 						const uiError = getEmailRecoveryUiError(err);
-						safeSetErrorText(uiError.message || "Failed to finalize email recovery");
-						safeSetCanRestart(uiError.canRestart);
+						safeSet(setErrorText, uiError.message || "Failed to finalize email recovery");
+						safeSet(setCanRestart, uiError.canRestart);
 						const txHash = getEmailRecoveryErrorTxHash(err);
 						if (txHash) showExplorerTxToast(txHash);
 						didForwardError = true;
@@ -433,88 +461,73 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 			const session = await tatchiPasskey.getLoginSession(normalizedAccountId).catch(() => null);
 			if (session?.login?.isLoggedIn) loginOk = true;
 			else {
-				safeSetStatusText("Email recovery completed. Logging you in…");
+				safeSet(setStatusText, "Email recovery completed. Logging you in…");
 				loginOk = await tatchiPasskey.loginAndCreateSession(normalizedAccountId).then(() => true).catch(() => false);
 			}
 			if (refreshLoginState) await refreshLoginState(normalizedAccountId).catch(() => {});
-			safeSetStatusText(loginOk ? "Email recovery completed on this device." : "Email recovery completed. Please log in on this device.");
-			safeSetPendingMailtoUrl(null);
-			safeSetMailtoUiState("ready");
-			safeSetPollingElapsedMs(null);
+			safeSet(setStatusText, loginOk ? "Email recovery completed on this device." : "Email recovery completed. Please log in on this device.");
+			safeSet(setPendingMailtoUrl, null);
+			safeSet(setMailtoUiState, "ready");
+			safeSet(setPollingElapsedMs, null);
 		} catch (err) {
 			if (cancelRequestedRef.current) {
-				safeSetErrorText("Email recovery cancelled. Please try again.");
-				safeSetStatusText(null);
-				safeSetPollingElapsedMs(null);
-				safeSetPendingMailtoUrl(null);
-				safeSetPendingNearPublicKey(null);
-				safeSetMailtoUiState("ready");
-				safeSetCanRestart(false);
+				safeSet(setErrorText, "Email recovery cancelled. Please try again.");
+				safeSet(setStatusText, null);
+				safeSet(setPollingElapsedMs, null);
+				safeSet(setPendingMailtoUrl, null);
+				safeSet(setPendingNearPublicKey, null);
+				safeSet(setMailtoUiState, "ready");
+				safeSet(setCanRestart, false);
 				return;
 			}
 			const uiError = getEmailRecoveryUiError(err);
-			safeSetErrorText(uiError.message || "Failed to start email recovery");
-			safeSetCanRestart(uiError.canRestart);
+			safeSet(setErrorText, uiError.message || "Failed to start email recovery");
+			safeSet(setCanRestart, uiError.canRestart);
 			const txHash = getEmailRecoveryErrorTxHash(err);
 			if (txHash) showExplorerTxToast(txHash);
 			if (!didForwardError && err instanceof Error) emailRecoveryOptions?.onError?.(err);
 		} finally {
-			safeSetIsBusy(false);
+			safeSet(setIsBusy, false);
 		}
 	}, [
 		accountIdInput,
-		emailRecoveryOptions,
-		onEvent,
-		refreshLoginState,
 		accountInfo,
 		accountInfoError,
 		accountInfoLoading,
-		recoveryEmailConfirmationRequired,
-		recoveryEmailInput,
-		recoveryEmailRecords,
-		showExplorerToast,
-		safeSetErrorText,
-		safeSetIsBusy,
-		safeSetPendingMailtoUrl,
-		safeSetPollingElapsedMs,
-		safeSetStatusText,
-		safeSetMailtoUiState,
 		attemptOpenMailtoAuto,
+		emailRecoveryOptions,
+		onEvent,
+		refreshLoginState,
+		safeSet,
+		showExplorerToast,
 		showExplorerTxToast,
 		tatchiPasskey
 	]);
 	const handleRestart = React.useCallback(async () => {
 		const normalizedAccountId = (accountIdInput || "").trim();
 		if (!normalizedAccountId) return;
-		safeSetIsBusy(true);
+		safeSet(setIsBusy, 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);
+			safeSet(setErrorText, null);
+			safeSet(setStatusText, null);
+			safeSet(setPollingElapsedMs, null);
+			safeSet(setPendingMailtoUrl, null);
+			safeSet(setPendingNearPublicKey, null);
+			safeSet(setMailtoUiState, "ready");
+			safeSet(setCanRestart, false);
 		} finally {
 			cancelRequestedRef.current = false;
-			safeSetIsBusy(false);
+			safeSet(setIsBusy, false);
 		}
 	}, [
 		accountIdInput,
 		pendingNearPublicKey,
-		safeSetCanRestart,
-		safeSetErrorText,
-		safeSetIsBusy,
-		safeSetMailtoUiState,
-		safeSetPendingMailtoUrl,
-		safeSetPendingNearPublicKey,
-		safeSetPollingElapsedMs,
-		safeSetStatusText,
+		safeSet,
 		tatchiPasskey
 	]);
 	const summaryLine = accountInfoLoading ? /* @__PURE__ */ jsxs(Fragment, { children: ["Checking if account has recovery emails configured", /* @__PURE__ */ jsxs("span", {
@@ -536,145 +549,41 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 		]
 	})] }) : 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;
+	const startDisabled = isBusy || accountInfoLoading || !!accountInfoError || !accountInfo || noRecoveryEmailsConfigured;
+	const showFromWarning = !!accountIdInput.trim() && !noRecoveryEmailsConfigured;
+	const showRestart = !!errorText && canRestart;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w3a-email-recovery-slide",
 		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "w3a-email-recovery-title",
-				children: "Recover Account with Email"
+			/* @__PURE__ */ jsx(EmailRecoveryHeader, {}),
+			/* @__PURE__ */ jsx(AccountIdInputRow, {
+				value: accountIdInput,
+				onChange: setAccountIdInput,
+				disabled: isBusy
 			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "w3a-email-recovery-help",
-				children: "Send a special email to recover your account. This email must be sent from the designated email recovery address."
-			}),
-			/* @__PURE__ */ jsx("div", { 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
-					})
-				})
-			}) }),
-			/* @__PURE__ */ jsxs("div", {
-				className: "w3a-email-recovery-summary",
-				"aria-live": "polite",
-				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."
-					})
-				]
+			/* @__PURE__ */ jsx(RecoveryEmailsSummary, {
+				summaryLine,
+				accountInfoError,
+				localRecoveryEmails,
+				showFromWarning
 			}),
-			/* @__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: 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"
-					})
-				]
+			/* @__PURE__ */ jsx(EmailRecoveryActions, {
+				isBusy,
+				pendingMailtoUrl,
+				mailtoUiState,
+				startDisabled,
+				accountInfoLoading,
+				noRecoveryEmailsConfigured,
+				showRestart,
+				onStart: handleStart,
+				onOpenDraft: attemptOpenMailtoFromUserGesture,
+				onRestart: handleRestart
 			}),
-			(errorText || statusText || explorerToast) && /* @__PURE__ */ jsxs("div", {
-				className: `w3a-email-recovery-status${errorText ? " is-error" : ""}`,
-				children: [
-					errorText ? errorText : statusText,
-					pollingElapsedMs != null && !Number.isNaN(pollingElapsedMs) && pollingElapsedMs > 0 && /* @__PURE__ */ jsxs("span", {
-						className: "w3a-email-recovery-elapsed",
-						children: [
-							"(~",
-							Math.round(pollingElapsedMs / 1e3),
-							"s)."
-						]
-					}),
-					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"
-					})] })
-				]
+			/* @__PURE__ */ jsx(EmailRecoveryStatusPanel, {
+				errorText,
+				statusText,
+				pollingElapsedMs,
+				explorerToast
 			})
 		]
 	});