@tatchi-xyz/sdk 0.20.0 → 0.31.0

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

@@ -1,16 +1,26 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.js');
-const require_accountIds = require('../../../sdk/src/core/types/accountIds.js');
-const require_index = require('../../../sdk/src/core/IndexedDBManager/index.js');
-const require_emailRecovery = require('../../../sdk/src/core/types/emailRecovery.js');
+const require_sdkSentEvents = require('../../../src/core/types/sdkSentEvents.js');
+const require_emailRecovery = require('../../../src/core/types/emailRecovery.js');
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/react/components/PasskeyAuthMenu/ui/EmailRecoverySlide.tsx
-require_index.init_IndexedDBManager();
-require_accountIds.init_accountIds();
-require_emailRecovery.init_emailRecovery();
+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;
 	if (typeof code !== "string") return null;
@@ -18,6 +28,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 require_emailRecovery.EmailRecoveryErrorCode.VRF_CHALLENGE_EXPIRED: return {
@@ -34,6 +49,152 @@ 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;
+}
+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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "w3a-email-recovery-title",
+		children: "Recover Account with Email"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "w3a-input-pill w3a-email-recovery-input-pill",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "w3a-input-wrap",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "w3a-email-recovery-summary",
+		"aria-live": "polite",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: summaryLine }),
+			!!accountInfoError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "w3a-email-recovery-warning",
+				children: accountInfoError
+			}),
+			localRecoveryEmails.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "w3a-email-recovery-saved-emails",
+				role: "list",
+				"aria-label": "Recovery emails",
+				children: localRecoveryEmails.map((email) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "w3a-email-recovery-email-chip w3a-email-recovery-email-chip-static",
+					role: "listitem",
+					children: email
+				}, email))
+			}),
+			showFromWarning && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "w3a-email-recovery-actions",
+		children: [
+			(!pendingMailtoUrl || !isBusy) && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "w3a-spinner",
+					"aria-hidden": "true"
+				}), mailtoUiState === "opening" ? "Opening email…" : "Open recovery email draft"]
+			}),
+			showRestart && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `w3a-email-recovery-status${errorText ? " is-error" : ""}`,
+		children: [
+			errorText ? errorText : statusText,
+			pollingElapsedMs != null && !Number.isNaN(pollingElapsedMs) && pollingElapsedMs > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "w3a-email-recovery-elapsed",
+				children: [
+					"(~",
+					Math.round(pollingElapsedMs / 1e3),
+					"s)."
+				]
+			}),
+			explorerToast && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}), /* @__PURE__ */ (0, react_jsx_runtime.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.default.useRef(true);
 	const mailtoAttemptTimerRef = react.default.useRef(null);
@@ -48,9 +209,12 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 			}
 		};
 	}, []);
+	const safeSet = react.default.useCallback((setter, value) => {
+		if (!mountedRef.current) return;
+		setter(value);
+	}, []);
 	const [isBusy, setIsBusy] = react.default.useState(false);
 	const [accountIdInput, setAccountIdInput] = react.default.useState("");
-	const [recoveryEmailInput, setRecoveryEmailInput] = react.default.useState("");
 	const [pendingMailtoUrl, setPendingMailtoUrl] = react.default.useState(null);
 	const [pendingNearPublicKey, setPendingNearPublicKey] = react.default.useState(null);
 	const [mailtoUiState, setMailtoUiState] = react.default.useState("ready");
@@ -64,7 +228,6 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 	const [localRecoveryEmails, setLocalRecoveryEmails] = react.default.useState([]);
 	const [explorerToast, setExplorerToast] = react.default.useState(null);
 	const lastPrefilledAccountIdRef = react.default.useRef("");
-	const lastPrefilledRecoveryEmailRef = react.default.useRef("");
 	react.default.useEffect(() => {
 		const next = (accountId || "").trim();
 		if (!next) return;
@@ -91,68 +254,58 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 			mailtoAttemptTimerRef.current = null;
 		}
 	}, [accountId]);
-	const safeSet = (setter) => {
-		return (value) => {
-			if (!mountedRef.current) return;
-			setter(value);
-		};
-	};
-	const safeSetPendingMailtoUrl = react.default.useMemo(() => safeSet(setPendingMailtoUrl), []);
-	const safeSetPendingNearPublicKey = react.default.useMemo(() => safeSet(setPendingNearPublicKey), []);
-	const safeSetStatusText = react.default.useMemo(() => safeSet(setStatusText), []);
-	const safeSetPollingElapsedMs = react.default.useMemo(() => safeSet(setPollingElapsedMs), []);
-	const safeSetErrorText = react.default.useMemo(() => safeSet(setErrorText), []);
-	const safeSetIsBusy = react.default.useMemo(() => safeSet(setIsBusy), []);
-	const safeSetCanRestart = react.default.useMemo(() => safeSet(setCanRestart), []);
-	const safeSetAccountInfo = react.default.useMemo(() => safeSet(setAccountInfo), []);
-	const safeSetAccountInfoLoading = react.default.useMemo(() => safeSet(setAccountInfoLoading), []);
-	const safeSetAccountInfoError = react.default.useMemo(() => safeSet(setAccountInfoError), []);
-	const safeSetLocalRecoveryEmails = react.default.useMemo(() => safeSet(setLocalRecoveryEmails), []);
-	const safeSetExplorerToast = react.default.useMemo(() => safeSet(setExplorerToast), []);
-	const safeSetMailtoUiState = react.default.useMemo(() => safeSet(setMailtoUiState), []);
 	const onEvent = react.default.useCallback((ev) => {
 		if (cancelRequestedRef.current) return;
-		safeSetStatusText(ev?.message || null);
+		safeSet(setStatusText, ev?.message || null);
 		emailRecoveryOptions?.onEvent?.(ev);
-		const data = ev?.data || {};
-		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);
-		if (ev?.phase === "email-recovery-error" || ev?.status === "error") {
-			const raw = ev?.error || ev?.message || "Email recovery failed";
-			safeSetErrorText(String(raw));
-			safeSetCanRestart(false);
+		const elapsed = extractElapsedMsFromEmailRecoveryEvent(ev);
+		if (elapsed === null) safeSet(setPollingElapsedMs, null);
+		else if (elapsed != null) safeSet(setPollingElapsedMs, elapsed);
+		if (ev.phase === require_sdkSentEvents.EmailRecoveryPhase.ERROR || ev.status === require_sdkSentEvents.EmailRecoveryStatus.ERROR) {
+			const raw = "error" in ev ? ev.error : ev.message;
+			safeSet(setErrorText, raw || "Email recovery failed");
+			safeSet(setCanRestart, false);
 		}
 	}, [
 		emailRecoveryOptions,
-		safeSetCanRestart,
-		safeSetErrorText,
-		safeSetExplorerToast,
-		safeSetPollingElapsedMs,
-		safeSetStatusText,
+		safeSet,
 		tatchiPasskey
 	]);
 	const showExplorerToast = react.default.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.default.useCallback((txHash) => {
+		const normalized = (txHash || "").trim();
+		if (!normalized) return;
+		const base = getExplorerBaseUrl(tatchiPasskey);
+		safeSet(setExplorerToast, {
+			url: getExplorerTxUrl({
+				base,
+				txHash: normalized
+			}),
+			transactionHash: normalized
+		});
+	}, [safeSet, tatchiPasskey]);
 	const launchMailto = react.default.useCallback((rawMailtoUrl) => {
 		const url = String(rawMailtoUrl || "").trim();
 		if (!url) return;
@@ -163,14 +316,14 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 	const attemptOpenMailtoFromUserGesture = react.default.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.default.useCallback((rawMailtoUrl) => {
 		const url = String(rawMailtoUrl || "").trim();
 		if (!url) return;
@@ -180,7 +333,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;
@@ -197,146 +350,96 @@ const EmailRecoverySlide = ({ tatchiPasskey, accountId, refreshLoginState, email
 			window.removeEventListener("pagehide", markMaybeOpened);
 			document.removeEventListener("visibilitychange", onVisibilityChange);
 		};
-	}, [mailtoUiState, safeSetMailtoUiState]);
-	const fetchLocalRecoveryEmailsFromIndexedDB = react.default.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 require_index.IndexedDBManager.getRecoveryEmails(require_accountIds.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.default.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("@"));
-		return Array.from(new Set(emails));
-	}, []);
+	}, [mailtoUiState, safeSet]);
 	react.default.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 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;
-					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]);
-						}
-					}
+					const resolvedEmails = deriveEmailsFromRecoveryRecords(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);
-					safeSetAccountInfoError(err?.message || "Failed to load email recovery settings for this account");
+					safeSet(setAccountInfo, null);
+					const msg = err instanceof Error ? err.message : "";
+					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,
-		fetchLocalRecoveryEmailsFromIndexedDB,
-		recoveryEmailInput,
-		safeSetAccountInfo,
-		safeSetAccountInfoError,
-		safeSetAccountInfoLoading,
-		safeSetLocalRecoveryEmails,
+		safeSet,
 		tatchiPasskey
 	]);
 	const handleStart = react.default.useCallback(async () => {
 		const normalizedAccountId = (accountIdInput || "").trim();
 		if (!normalizedAccountId) {
-			safeSetErrorText("Enter an account ID.");
+			safeSet(setErrorText, "Enter an account ID.");
+			return;
+		}
+		if (accountInfoLoading) {
+			safeSet(setErrorText, "Checking recovery email settings…");
+			return;
+		}
+		if (accountInfoError) {
+			safeSet(setErrorText, accountInfoError);
 			return;
 		}
-		const emailCandidate = (recoveryEmailInput || "").trim().toLowerCase();
-		if (!emailCandidate) {
-			safeSetErrorText("Enter the recovery email to send from.");
+		if (!accountInfo) {
+			safeSet(setErrorText, "Failed to load email recovery settings for this account.");
 			return;
 		}
-		safeSetIsBusy(true);
+		if (accountInfo.emailsCount === 0) {
+			safeSet(setErrorText, "No recovery emails are configured for this account.");
+			return;
+		}
+		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: emailCandidate,
 				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);
-					},
-					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…");
+			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,
@@ -346,12 +449,13 @@ 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;
 						emailRecoveryOptions?.onError?.(err);
-					},
-					afterCall: async () => {}
+					}
 				}
 			});
 			showExplorerToast(normalizedAccountId);
@@ -360,210 +464,129 @@ 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,
+		accountInfo,
+		accountInfoError,
+		accountInfoLoading,
+		attemptOpenMailtoAuto,
 		emailRecoveryOptions,
-		recoveryEmailInput,
 		onEvent,
 		refreshLoginState,
+		safeSet,
 		showExplorerToast,
-		safeSetErrorText,
-		safeSetIsBusy,
-		safeSetPendingMailtoUrl,
-		safeSetPollingElapsedMs,
-		safeSetStatusText,
-		safeSetMailtoUiState,
-		attemptOpenMailtoAuto,
+		showExplorerTxToast,
 		tatchiPasskey
 	]);
 	const handleRestart = react.default.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 ? "Checking if account has recovery emails configured..." : accountInfo && !accountInfoError ? `Recovery emails configured: ${accountInfo.emailsCount}` : "\xA0";
+	const summaryLine = accountInfoLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: ["Checking if account has recovery emails configured", /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "w3a-ellipsis",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "w3a-ellipsis-dot",
+				children: "."
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "w3a-ellipsis-dot",
+				children: "."
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "w3a-ellipsis-dot",
+				children: "."
+			})
+		]
+	})] }) : accountInfo && !accountInfoError ? `Recovery emails configured: ${accountInfo.emailsCount}` : "\xA0";
 	const noRecoveryEmailsConfigured = !accountInfoLoading && !accountInfoError && !!accountInfo && accountInfo.emailsCount === 0;
+	const startDisabled = isBusy || accountInfoLoading || !!accountInfoError || !accountInfo || noRecoveryEmailsConfigured;
+	const showFromWarning = !!accountIdInput.trim() && !noRecoveryEmailsConfigured;
+	const showRestart = !!errorText && canRestart;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "w3a-email-recovery-slide",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "w3a-email-recovery-title",
-				children: "Recover Account with Email"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.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."
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "w3a-email-recovery-field",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "w3a-input-pill w3a-email-recovery-input-pill",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "w3a-input-wrap",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "w3a-email-recovery-summary",
-				"aria-live": "polite",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: summaryLine })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "w3a-email-recovery-field",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "w3a-input-pill w3a-email-recovery-input-pill",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "w3a-input-wrap",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.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
-						})
-					})
-				})
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmailRecoveryHeader, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountIdInputRow, {
+				value: accountIdInput,
+				onChange: setAccountIdInput,
+				disabled: isBusy
 			}),
-			localRecoveryEmails.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "w3a-email-recovery-summary",
-				"aria-live": "polite",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: "Saved on this device:" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "w3a-email-recovery-saved-emails",
-					children: localRecoveryEmails.map((email) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: "w3a-email-recovery-email-chip",
-						onClick: () => setRecoveryEmailInput(email),
-						disabled: isBusy,
-						children: email
-					}, email))
-				})]
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RecoveryEmailsSummary, {
+				summaryLine,
+				accountInfoError,
+				localRecoveryEmails,
+				showFromWarning
 			}),
-			localRecoveryEmails.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("datalist", {
-				id: "w3a-email-recovery-saved-emails",
-				children: localRecoveryEmails.map((email) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", { value: email }, email))
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmailRecoveryActions, {
+				isBusy,
+				pendingMailtoUrl,
+				mailtoUiState,
+				startDisabled,
+				accountInfoLoading,
+				noRecoveryEmailsConfigured,
+				showRestart,
+				onStart: handleStart,
+				onOpenDraft: attemptOpenMailtoFromUserGesture,
+				onRestart: handleRestart
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "w3a-email-recovery-actions",
-				children: [
-					(!pendingMailtoUrl || !isBusy) && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "w3a-spinner",
-							"aria-hidden": "true"
-						}), mailtoUiState === "opening" ? "Opening email…" : "Open recovery email draft"]
-					}),
-					errorText && canRestart && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: handleRestart,
-						className: "w3a-link-device-btn",
-						disabled: isBusy,
-						children: "Restart email recovery"
-					})
-				]
-			}),
-			(errorText || statusText || explorerToast) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: `w3a-email-recovery-status${errorText ? " is-error" : ""}`,
-				children: [
-					errorText ? errorText : statusText,
-					pollingElapsedMs != null && !Number.isNaN(pollingElapsedMs) && pollingElapsedMs > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "w3a-email-recovery-elapsed",
-						children: [
-							"(~",
-							Math.round(pollingElapsedMs / 1e3),
-							"s)."
-						]
-					}),
-					explorerToast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-						className: "w3a-email-recovery-link",
-						href: explorerToast.url,
-						target: "_blank",
-						rel: "noopener noreferrer",
-						children: "View on explorer"
-					}) })
-				]
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmailRecoveryStatusPanel, {
+				errorText,
+				statusText,
+				pollingElapsedMs,
+				explorerToast
 			})
 		]
 	});