@abstraxn/signer-react 3.3.10 → 4.0.0

package/dist/src/components/WalletModal/components/ManageWalletModal.js

@@ -4,11 +4,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useEffect, useRef, useState, useCallback } from "react";
 import { createPortal } from "react-dom";
-import { IoKeyOutline, IoCopyOutline, IoCheckmarkOutline, IoCloudDownloadOutline, IoChevronBack, IoClose, IoPhonePortraitOutline, SiWalletconnect, SiDiscord, SiX, FcGoogle, FiUsers, FiLink, TfiEmail, BiShieldQuarter, } from "../../icons";
+import { IoKeyOutline, IoCopyOutline, IoCheckmarkOutline, IoCloudDownloadOutline, IoChevronBack, CloseIcon, IoPhonePortraitOutline, SiWalletconnect, SiDiscord, SiX, GoogleIcon, FiUsers, FiLink, TfiEmail, BiShieldQuarter, } from "../../icons";
 import { useAbstraxnWallet } from "../../../AbstraxnProvider";
 import { useEnableMfa } from "../../../hooks";
-import "./ManageWalletModal.css";
 import { QRCodeSVG } from "qrcode.react";
+import { useShadowHost } from "../../ShadowHost";
+import { CodeInput } from "./CodeInput";
+import { MfaVerifyModal } from "./MfaVerifyModal";
+import { AbstraxnLogo } from "../../AbstraxnLogo";
 function normalizeLinkedProvider(authProvider) {
     return authProvider === "otp" ? "email" : authProvider;
 }
@@ -18,7 +21,7 @@ function normalizeErrorMessage(message) {
 function AuthMethodIcon({ provider }) {
     const p = provider.toLowerCase();
     if (p === "google")
-        return _jsx(FcGoogle, { size: 20, className: "wallet-modal-provider-icon wallet-modal-provider-icon-google" });
+        return _jsx(GoogleIcon, { size: 20, className: "wallet-modal-provider-icon wallet-modal-provider-icon-google" });
     if (p === "discord")
         return _jsx(SiDiscord, { size: 20, className: "wallet-modal-provider-icon wallet-modal-provider-icon-discord" });
     if (p === "x" || p === "twitter")
@@ -31,7 +34,14 @@ function AuthMethodIcon({ provider }) {
 }
 export function ManageWalletModal({ ...props }) {
     const { isOpen, onClose, isExternalWalletConnected, onExportPrivateKey, theme = "dark", userEmail, organizationName, } = props;
-    const { getSupportedAuthMethods, getLinkedAuthMethods, linkAuthMethod, linkEmail, loginWithOTP, requestOtpForEmailLink, unlinkAuthMethod, whoami, mfaStatus, mfaStatusLoading, prefetchMfaStatus, verifyMfa, disableMfaWithSignedPayload, } = useAbstraxnWallet();
+    // Portal target: the enclosing WalletModal's shadow boundary container,
+    // so these nested overlays stay inside the isolation boundary instead of
+    // escaping to document.body. document.body fallback is purely defensive —
+    // this component is never rendered outside a WalletModal shadow boundary
+    // in practice.
+    const shadowHost = useShadowHost();
+    const portalTarget = shadowHost?.container ?? document.body;
+    const { getSupportedAuthMethods, getLinkedAuthMethods, linkAuthMethod, linkEmail, loginWithOTP, requestOtpForEmailLink, unlinkAuthMethod, whoami, mfaStatus, mfaStatusLoading, prefetchMfaStatus, verifySignMfa, disableMfaWithSignedPayload, } = useAbstraxnWallet();
     const [showLinkedProfilesList, setShowLinkedProfilesList] = useState(false);
     const [supportedMethods, setSupportedMethods] = useState([]);
     const [linkedMethods, setLinkedMethods] = useState([]);
@@ -61,19 +71,21 @@ export function ManageWalletModal({ ...props }) {
     const [showMfaDisableAuthModal, setShowMfaDisableAuthModal] = useState(false);
     const [showMfaDisableConfirmModal, setShowMfaDisableConfirmModal] = useState(false);
     const [showMfaStatusModal, setShowMfaStatusModal] = useState(false);
-    const [mfaDisableStep, setMfaDisableStep] = useState("otp");
-    const [mfaDisableCode, setMfaDisableCode] = useState("");
-    const [mfaDisableRecoveryCode, setMfaDisableRecoveryCode] = useState("");
     const [mfaDisableLoading, setMfaDisableLoading] = useState(false);
     const [mfaDisableError, setMfaDisableError] = useState(null);
-    const mfaDisableVerifyButtonRef = useRef(null);
     const hasFetchedLinkedProfilesForOpenRef = useRef(false);
     const linkedProfilesFetchPromiseRef = useRef(null);
+    const clearLinkUnlinkFeedback = useCallback(() => {
+        setLinkUnlinkError(null);
+        setLinkUnlinkSuccess(null);
+    }, []);
     const showFeedback = useCallback((message, type = "success") => {
         if (type === "error") {
+            setLinkUnlinkSuccess(null);
             setLinkUnlinkError(message);
             return;
         }
+        setLinkUnlinkError(null);
         setLinkUnlinkSuccess(message);
     }, []);
     const fetchLinkedProfilesData = useCallback(async () => {
@@ -115,21 +127,34 @@ export function ManageWalletModal({ ...props }) {
         });
     }, [getSupportedAuthMethods, getLinkedAuthMethods, isExternalWalletConnected, whoami]);
     const handleOpenLinkedProfiles = useCallback(() => {
+        clearLinkUnlinkFeedback();
         setShowLinkedProfilesList(true);
         const hasLinkedProfilesData = supportedMethods.length > 0 || linkedMethods.length > 0;
         if (!hasLinkedProfilesData && !linkedLoading) {
             fetchLinkedProfilesData();
         }
-    }, [fetchLinkedProfilesData, linkedLoading, linkedMethods.length, supportedMethods.length]);
+    }, [
+        clearLinkUnlinkFeedback,
+        fetchLinkedProfilesData,
+        linkedLoading,
+        linkedMethods.length,
+        supportedMethods.length,
+    ]);
+    const handleCloseLinkedProfiles = useCallback(() => {
+        clearLinkUnlinkFeedback();
+        setShowLinkedProfilesList(false);
+    }, [clearLinkUnlinkFeedback]);
     const isProviderLinked = useCallback((provider) => {
         return linkedMethods.some((m) => normalizeLinkedProvider(m.authProvider) === provider.toLowerCase());
     }, [linkedMethods]);
     const handleConnect = useCallback(async (provider) => {
+        clearLinkUnlinkFeedback();
         if (provider.toLowerCase() === "email") {
             setEmailLinkStep("email");
             setEmailLinkEmail("");
             setEmailLinkOtpId(null);
             setEmailLinkOtpCode("");
+            setEmailLinkError(null);
             return;
         }
         if (!linkAuthMethod)
@@ -146,12 +171,12 @@ export function ManageWalletModal({ ...props }) {
         }
         catch (err) {
             const msg = err instanceof Error ? normalizeErrorMessage(err.message) : "Failed to connect";
-            setLinkUnlinkError(msg);
+            showFeedback(msg, "error");
         }
         finally {
             setActionProvider(null);
         }
-    }, [linkAuthMethod, fetchLinkedProfilesData, showFeedback]);
+    }, [clearLinkUnlinkFeedback, linkAuthMethod, fetchLinkedProfilesData, showFeedback]);
     const handleSendOtpForLink = useCallback(async () => {
         if (!emailLinkEmail.trim())
             return;
@@ -171,7 +196,6 @@ export function ManageWalletModal({ ...props }) {
         catch (err) {
             const msg = err instanceof Error ? normalizeErrorMessage(err.message) : "Failed to send OTP";
             setEmailLinkError(msg);
-            showFeedback(msg, "error");
         }
         finally {
             setActionProvider(null);
@@ -195,7 +219,6 @@ export function ManageWalletModal({ ...props }) {
         catch (err) {
             const msg = err instanceof Error ? normalizeErrorMessage(err.message) : "Failed to resend";
             setEmailLinkError(msg);
-            showFeedback(msg, "error");
         }
         finally {
             setEmailLinkResending(false);
@@ -220,7 +243,6 @@ export function ManageWalletModal({ ...props }) {
         catch (err) {
             const msg = err instanceof Error ? normalizeErrorMessage(err.message) : "Failed to link email";
             setEmailLinkError(msg);
-            showFeedback(msg, "error");
         }
         finally {
             setActionProvider(null);
@@ -300,64 +322,38 @@ export function ManageWalletModal({ ...props }) {
     const resetMfaDisableState = useCallback(() => {
         setShowMfaDisableAuthModal(false);
         setShowMfaDisableConfirmModal(false);
-        setMfaDisableStep("otp");
-        setMfaDisableCode("");
-        setMfaDisableRecoveryCode("");
         setMfaDisableError(null);
         setMfaDisableLoading(false);
     }, []);
-    const handleMfaDisableVerifyCode = useCallback(async () => {
-        if (!verifyMfa || mfaDisableCode.trim().length !== 6)
+    const handleMfaDisableVerify = useCallback(async (code) => {
+        // Must use verifySignMfa (/mfa/verify-sign): disable calls /sign/transaction,
+        // which requires sign step-up — login verifyMfa does not clear SIGN_MFA_REQUIRED.
+        if (!verifySignMfa)
             return;
         setMfaDisableLoading(true);
         setMfaDisableError(null);
         try {
-            await verifyMfa(mfaDisableCode.trim());
+            await verifySignMfa(code);
             setShowMfaDisableAuthModal(false);
             setShowMfaDisableConfirmModal(true);
-            setMfaDisableCode("");
         }
         catch (err) {
-            setMfaDisableError(err instanceof Error ? normalizeErrorMessage(err.message) : "Invalid authentication code");
+            setMfaDisableError(err instanceof Error
+                ? normalizeErrorMessage(err.message)
+                : "Invalid authentication code");
         }
         finally {
             setMfaDisableLoading(false);
         }
-    }, [verifyMfa, mfaDisableCode]);
-    const handleMfaDisableVerifyRecoveryCode = useCallback(async () => {
-        if (!verifyMfa)
-            return;
-        const trimmed = mfaDisableRecoveryCode.trim().toUpperCase();
-        if (!/^[A-Z0-9]{8}$/.test(trimmed)) {
-            setMfaDisableError("Please enter a valid 8-character backup code");
-            return;
-        }
-        setMfaDisableLoading(true);
-        setMfaDisableError(null);
-        try {
-            await verifyMfa(trimmed);
-            setShowMfaDisableAuthModal(false);
-            setShowMfaDisableConfirmModal(true);
-            setMfaDisableRecoveryCode("");
-        }
-        catch (err) {
-            setMfaDisableError(err instanceof Error ? normalizeErrorMessage(err.message) : "Invalid backup code");
-        }
-        finally {
-            setMfaDisableLoading(false);
-        }
-    }, [verifyMfa, mfaDisableRecoveryCode]);
+    }, [verifySignMfa]);
     const openMfaDisableFlow = useCallback(() => {
-        if (!verifyMfa || !disableMfaWithSignedPayload) {
+        if (!verifySignMfa || !disableMfaWithSignedPayload) {
             return;
         }
         setShowMfaStatusModal(false);
-        setMfaDisableCode("");
-        setMfaDisableRecoveryCode("");
-        setMfaDisableStep("otp");
         setMfaDisableError(null);
         setShowMfaDisableAuthModal(true);
-    }, [verifyMfa, disableMfaWithSignedPayload]);
+    }, [verifySignMfa, disableMfaWithSignedPayload]);
     const handleMfaDisableConfirm = useCallback(async () => {
         if (!disableMfaWithSignedPayload)
             return;
@@ -452,6 +448,7 @@ export function ManageWalletModal({ ...props }) {
     const handleDisconnect = useCallback(async (provider) => {
         if (!unlinkAuthMethod)
             return;
+        clearLinkUnlinkFeedback();
         setActionProvider(provider);
         try {
             await unlinkAuthMethod(provider);
@@ -460,7 +457,7 @@ export function ManageWalletModal({ ...props }) {
             const message = lower === "passkey"
                 ? "Passkey removed successfully!"
                 : "Provider unlinked successfully!";
-            setLinkUnlinkSuccess(message);
+            showFeedback(message, "success");
             await fetchLinkedProfilesData();
         }
         catch (err) {
@@ -469,7 +466,7 @@ export function ManageWalletModal({ ...props }) {
         finally {
             setActionProvider(null);
         }
-    }, [unlinkAuthMethod, fetchLinkedProfilesData, showFeedback]);
+    }, [clearLinkUnlinkFeedback, unlinkAuthMethod, fetchLinkedProfilesData, showFeedback]);
     useEffect(() => {
         if (emailLinkStep !== "otp" || emailLinkResendCooldown <= 0)
             return;
@@ -514,7 +511,7 @@ export function ManageWalletModal({ ...props }) {
                                     }
                                     setShowMfaSetupModal(false);
                                     resetMfaSetupState();
-                                }, "aria-label": "Back", children: _jsx(IoChevronBack, { size: 20 }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: "Two-Factor Authentication" }), _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx(IoClose, { size: 24 }) })] }), _jsx("div", { className: "mfa-redesign-content", children: mfaSetupStep === "setup" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mfa-info-box", children: [_jsx("div", { className: "mfa-info-icon", children: _jsx(IoPhonePortraitOutline, { size: 20 }) }), _jsx("p", { className: "mfa-info-text", children: "Open your authenticator app \u2014 Google Authenticator, Authy, or 1Password \u2014 and scan the QR code below." })] }), _jsxs("div", { className: "mfa-qr-container", children: [mfaQrCode ? (_jsx("div", { className: "mfa-qr-wrapper", children: _jsx(QRCodeSVG, { value: (() => {
+                                }, "aria-label": "Back", children: _jsx(IoChevronBack, { size: 20 }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: "Two-Factor Authentication" }), _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx(CloseIcon, { size: 24 }) })] }), _jsx("div", { className: "mfa-redesign-content", children: mfaSetupStep === "setup" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mfa-info-box", children: [_jsx("div", { className: "mfa-info-icon", children: _jsx(IoPhonePortraitOutline, { size: 20 }) }), _jsx("p", { className: "mfa-info-text", children: "Open your authenticator app \u2014 Google Authenticator, Authy, or 1Password \u2014 and scan the QR code below." })] }), _jsxs("div", { className: "mfa-qr-container", children: [mfaQrCode ? (_jsx("div", { className: "mfa-qr-wrapper", children: _jsx(QRCodeSVG, { value: (() => {
                                                     const issuer = organizationName ?? "Abstraxn";
                                                     const label = userEmail ? `${issuer}:${userEmail}` : issuer;
                                                     return `otpauth://totp/${encodeURIComponent(label)}?secret=${mfaSecret}&issuer=${encodeURIComponent(issuer)}`;
@@ -522,41 +519,9 @@ export function ManageWalletModal({ ...props }) {
                                         goToVerify();
                                         setMfaSetupCode("");
                                         setMfaRecoveryCode("");
-                                    }, disabled: mfaSetupLoading || !mfaSecret, children: "Continue" })] })) : mfaSetupStep === "verify" ? (_jsxs("div", { className: "mfa-verification-section", children: [_jsx("div", { className: "mfa-divider", children: _jsx("span", { children: "Enter 6-digit verification code" }) }), mfaSetupError && (_jsx("p", { className: "mfa-setup-error", style: { marginBottom: 12 }, children: mfaSetupError })), _jsx("div", { className: "mfa-otp-grid", children: [0, 1, 2, 3, 4, 5].map((index) => (_jsx("div", { className: "mfa-otp-slot", children: _jsx("input", { type: "text", inputMode: "numeric", maxLength: 1, value: mfaSetupCode[index] || "", onChange: (e) => {
-                                                const val = e.target.value.replace(/\D/g, "");
-                                                if (val) {
-                                                    const newCode = mfaSetupCode.split("");
-                                                    newCode[index] = val;
-                                                    const combined = newCode.join("").slice(0, 6);
-                                                    setMfaSetupCode(combined);
-                                                    if (combined.length === 6) {
-                                                        window.setTimeout(() => {
-                                                            mfaSetupVerifyButtonRef.current?.focus();
-                                                        }, 0);
-                                                    }
-                                                    if (index < 5) {
-                                                        const target = e.target;
-                                                        const next = target.parentElement?.nextElementSibling?.querySelector("input");
-                                                        next?.focus();
-                                                    }
-                                                }
-                                            }, onKeyDown: (e) => {
-                                                if (e.key === "Backspace") {
-                                                    const target = e.target;
-                                                    if (!mfaSetupCode[index] && index > 0) {
-                                                        const prev = target.parentElement?.previousElementSibling?.querySelector("input");
-                                                        prev?.focus();
-                                                        const newCode = mfaSetupCode.split("");
-                                                        newCode[index - 1] = "";
-                                                        setMfaSetupCode(newCode.join(""));
-                                                    }
-                                                    else {
-                                                        const newCode = mfaSetupCode.split("");
-                                                        newCode[index] = "";
-                                                        setMfaSetupCode(newCode.join(""));
-                                                    }
-                                                }
-                                            }, className: "mfa-otp-input" }) }, index))) }), _jsx("p", { className: "mfa-refresh-text", children: "Code refreshes every 30 seconds" }), _jsx("button", { ref: mfaSetupVerifyButtonRef, type: "button", className: "mfa-verify-button", onClick: handleVerifyMfaSetup, disabled: mfaSetupLoading || mfaSetupCode.length !== 6, children: mfaSetupLoading ? "Verifying..." : "Verify & continue" }), _jsxs("p", { className: "mfa-trouble-text", children: ["Having trouble?", " ", _jsx("button", { type: "button", className: "mfa-link-button", onClick: () => {
+                                    }, disabled: mfaSetupLoading || !mfaSecret, children: "Continue" })] })) : mfaSetupStep === "verify" ? (_jsxs("div", { className: "mfa-verification-section", children: [_jsx("div", { className: "mfa-divider", children: _jsx("span", { children: "Enter 6-digit verification code" }) }), mfaSetupError && (_jsx("p", { className: "mfa-setup-error", style: { marginBottom: 12 }, children: mfaSetupError })), _jsx(CodeInput, { length: 6, value: mfaSetupCode, onChange: setMfaSetupCode, onComplete: () => window.setTimeout(() => {
+                                        mfaSetupVerifyButtonRef.current?.focus();
+                                    }, 0) }), _jsx("p", { className: "mfa-refresh-text", children: "Code refreshes every 30 seconds" }), _jsx("button", { ref: mfaSetupVerifyButtonRef, type: "button", className: "mfa-verify-button", onClick: handleVerifyMfaSetup, disabled: mfaSetupLoading || mfaSetupCode.length !== 6, children: mfaSetupLoading ? "Verifying..." : "Verify & continue" }), _jsxs("p", { className: "mfa-trouble-text", children: ["Having trouble?", " ", _jsx("button", { type: "button", className: "mfa-link-button", onClick: () => {
                                                 goToRecovery();
                                                 setMfaRecoveryCode("");
                                             }, children: "Use a recovery code" })] })] })) : (_jsxs("div", { className: "mfa-recovery-section", children: [_jsx("div", { className: "mfa-divider", children: _jsx("span", { children: "Enter 8 charater backup code" }) }), mfaSetupError && (_jsx("p", { className: "mfa-setup-error", style: { marginBottom: 12 }, children: mfaSetupError })), _jsx("input", { type: "text", inputMode: "text", maxLength: 8, value: mfaRecoveryCode, onChange: (e) => {
@@ -571,68 +536,19 @@ export function ManageWalletModal({ ...props }) {
             }, children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-manage mfa-redesign-container`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "wallet-modal-receive-header", children: [_jsx("button", { className: "wallet-modal-back", onClick: () => {
                                     setShowMfaBackupModal(false);
                                     reset();
-                                }, "aria-label": "Back", children: _jsx(IoChevronBack, { size: 20 }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: "Backup Codes" }), _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx(IoClose, { size: 24 }) })] }), _jsxs("div", { className: "mfa-redesign-content", children: [_jsxs("div", { className: "mfa-info-box", children: [_jsx("div", { className: "mfa-info-icon", children: _jsx(IoKeyOutline, { size: 20 }) }), _jsx("p", { className: "mfa-info-text", children: "Backup codes can be used to access your account if you lose access to your primary authentication method. Store them securely as these codes will not be shown again." })] }), _jsx("div", { className: "wallet-modal-mfa-backup-heading", children: _jsx("span", { className: "wallet-modal-mfa-backup-heading-label", children: "Recovery Codes" }) }), _jsx("div", { className: "wallet-modal-mfa-backup-list", children: mfaBackupCodes.map((code, index) => (_jsx("div", { className: "wallet-modal-mfa-backup-code-wrapper", children: _jsx("code", { className: "wallet-modal-mfa-backup-code", children: code }) }, index))) }), _jsxs("div", { className: "wallet-modal-mfa-backup-actions", children: [_jsxs("button", { type: "button", className: `wallet-modal-mfa-backup-action-btn ${mfaBackupCodesCopied ? 'copied' : ''}`, onClick: handleCopyBackupCodes, disabled: !mfaBackupCodes.length, children: [mfaBackupCodesCopied ? _jsx(IoCheckmarkOutline, { size: 18 }) : _jsx(IoCopyOutline, { size: 18 }), mfaBackupCodesCopied ? "Copied" : "Copy All"] }), _jsxs("button", { type: "button", className: "wallet-modal-mfa-backup-action-btn", onClick: handleDownloadBackupCodes, disabled: !mfaBackupCodes.length, children: [_jsx(IoCloudDownloadOutline, { size: 18 }), "Download"] })] }), _jsx("button", { type: "button", className: "mfa-verify-button", onClick: () => {
+                                }, "aria-label": "Back", children: _jsx(IoChevronBack, { size: 20 }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: "Backup Codes" }), _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx(CloseIcon, { size: 24 }) })] }), _jsxs("div", { className: "mfa-redesign-content", children: [_jsxs("div", { className: "mfa-info-box", children: [_jsx("div", { className: "mfa-info-icon", children: _jsx(IoKeyOutline, { size: 20 }) }), _jsx("p", { className: "mfa-info-text", children: "Backup codes can be used to access your account if you lose access to your primary authentication method. Store them securely as these codes will not be shown again." })] }), _jsx("div", { className: "wallet-modal-mfa-backup-heading", children: _jsx("span", { className: "wallet-modal-mfa-backup-heading-label", children: "Recovery Codes" }) }), _jsx("div", { className: "wallet-modal-mfa-backup-list", children: mfaBackupCodes.map((code, index) => (_jsx("div", { className: "wallet-modal-mfa-backup-code-wrapper", children: _jsx("code", { className: "wallet-modal-mfa-backup-code", children: code }) }, index))) }), _jsxs("div", { className: "wallet-modal-mfa-backup-actions", children: [_jsxs("button", { type: "button", className: `wallet-modal-mfa-backup-action-btn ${mfaBackupCodesCopied ? 'copied' : ''}`, onClick: handleCopyBackupCodes, disabled: !mfaBackupCodes.length, children: [mfaBackupCodesCopied ? _jsx(IoCheckmarkOutline, { size: 18 }) : _jsx(IoCopyOutline, { size: 18 }), mfaBackupCodesCopied ? "Copied" : "Copy All"] }), _jsxs("button", { type: "button", className: "wallet-modal-mfa-backup-action-btn", onClick: handleDownloadBackupCodes, disabled: !mfaBackupCodes.length, children: [_jsx(IoCloudDownloadOutline, { size: 18 }), "Download"] })] }), _jsx("button", { type: "button", className: "mfa-verify-button", onClick: () => {
                                     setShowMfaBackupModal(false);
                                     reset();
                                 }, children: "I've saved these codes" })] })] }) }));
     }
     if (showMfaDisableAuthModal) {
-        return (_jsx("div", { className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: resetMfaDisableState, children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-manage mfa-redesign-container`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "wallet-modal-receive-header", children: [_jsx("button", { className: "wallet-modal-back", onClick: () => {
-                                    if (mfaDisableStep === "recovery") {
-                                        setMfaDisableStep("otp");
-                                        setMfaDisableRecoveryCode("");
-                                        setMfaDisableError(null);
-                                        return;
-                                    }
-                                    resetMfaDisableState();
-                                }, "aria-label": "Back", children: _jsx(IoChevronBack, { size: 20 }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: "Verify to disable 2FA" }), _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx(IoClose, { size: 24 }) })] }), _jsxs("div", { className: "mfa-redesign-content", children: [_jsx("div", { className: "mfa-info-box", children: _jsx("p", { className: "mfa-info-text", children: "Enter your authentication code to continue." }) }), mfaDisableStep === "otp" ? (_jsxs("div", { className: "mfa-verification-section", children: [_jsx("div", { className: "mfa-divider", children: _jsx("span", { children: "Enter 6-digit verification code" }) }), mfaDisableError && (_jsx("p", { className: "mfa-setup-error", style: { marginBottom: 12 }, children: mfaDisableError })), _jsx("div", { className: "mfa-otp-grid", children: [0, 1, 2, 3, 4, 5].map((index) => (_jsx("div", { className: "mfa-otp-slot", children: _jsx("input", { type: "text", inputMode: "numeric", maxLength: 1, value: mfaDisableCode[index] || "", onChange: (e) => {
-                                                    const val = e.target.value.replace(/\D/g, "");
-                                                    if (val) {
-                                                        const newCode = mfaDisableCode.split("");
-                                                        newCode[index] = val;
-                                                        const combined = newCode.join("").slice(0, 6);
-                                                        setMfaDisableCode(combined);
-                                                        if (combined.length === 6) {
-                                                            window.setTimeout(() => {
-                                                                mfaDisableVerifyButtonRef.current?.focus();
-                                                            }, 0);
-                                                        }
-                                                        if (index < 5) {
-                                                            const target = e.target;
-                                                            const next = target.parentElement?.nextElementSibling?.querySelector("input");
-                                                            next?.focus();
-                                                        }
-                                                    }
-                                                }, onKeyDown: (e) => {
-                                                    if (e.key === "Backspace") {
-                                                        const target = e.target;
-                                                        if (!mfaDisableCode[index] && index > 0) {
-                                                            const prev = target.parentElement?.previousElementSibling?.querySelector("input");
-                                                            prev?.focus();
-                                                            const newCode = mfaDisableCode.split("");
-                                                            newCode[index - 1] = "";
-                                                            setMfaDisableCode(newCode.join(""));
-                                                        }
-                                                        else {
-                                                            const newCode = mfaDisableCode.split("");
-                                                            newCode[index] = "";
-                                                            setMfaDisableCode(newCode.join(""));
-                                                        }
-                                                    }
-                                                }, className: "mfa-otp-input" }) }, index))) }), _jsx("button", { ref: mfaDisableVerifyButtonRef, type: "button", className: "mfa-verify-button", onClick: handleMfaDisableVerifyCode, disabled: mfaDisableLoading || mfaDisableCode.length !== 6, children: mfaDisableLoading ? "Verifying..." : "Verify" }), _jsxs("p", { className: "mfa-trouble-text", children: ["Having trouble?", " ", _jsx("button", { type: "button", className: "mfa-link-button", onClick: () => {
-                                                    setMfaDisableStep("recovery");
-                                                    setMfaDisableError(null);
-                                                    setMfaDisableRecoveryCode("");
-                                                }, children: "Use a backup code" })] })] })) : (_jsxs("div", { className: "mfa-recovery-section", children: [_jsx("div", { className: "mfa-divider", children: _jsx("span", { children: "Enter 8 charater backup code" }) }), mfaDisableError && (_jsx("p", { className: "mfa-setup-error", style: { marginBottom: 12 }, children: mfaDisableError })), _jsx("input", { type: "text", inputMode: "text", maxLength: 8, value: mfaDisableRecoveryCode, onChange: (e) => {
-                                            const val = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 8);
-                                            setMfaDisableRecoveryCode(val);
-                                        }, className: "mfa-recovery-field" }), _jsx("button", { type: "button", className: "mfa-verify-button", onClick: handleMfaDisableVerifyRecoveryCode, disabled: mfaDisableLoading || mfaDisableRecoveryCode.trim().length !== 8, children: mfaDisableLoading ? "Verifying..." : "Verify" })] }))] })] }) }));
+        return (_jsx(MfaVerifyModal, { isOpen: true, theme: theme, title: "Verify to disable 2FA", description: "Enter your authentication code to continue.", loading: mfaDisableLoading, error: mfaDisableError, onSubmit: handleMfaDisableVerify, onCancel: resetMfaDisableState }));
     }
     if (showMfaStatusModal) {
-        return (_jsx("div", { className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: () => setShowMfaStatusModal(false), children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-manage mfa-redesign-container`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "wallet-modal-receive-header", children: [_jsx("button", { className: "wallet-modal-back", onClick: () => setShowMfaStatusModal(false), "aria-label": "Back", children: _jsx(IoChevronBack, { size: 20 }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: "MFA" }), _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx(IoClose, { size: 24 }) })] }), _jsxs("div", { className: "mfa-redesign-content", children: [_jsxs("div", { className: "mfa-info-box mfa-status-enabled-box", children: [_jsx("div", { className: "mfa-info-icon mfa-status-enabled-icon", children: _jsx(IoCheckmarkOutline, { size: 22 }) }), _jsxs("div", { className: "mfa-status-enabled-copy", children: [_jsx("p", { className: "mfa-status-enabled-title", children: "MFA is enabled" }), _jsx("p", { className: "mfa-info-text", children: "Your wallet is protected with an additional verification step." })] })] }), _jsx("button", { type: "button", className: "mfa-verify-button mfa-disable-primary-button", onClick: openMfaDisableFlow, children: "Disable MFA" })] })] }) }));
+        return (_jsx("div", { className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: () => setShowMfaStatusModal(false), children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-manage mfa-redesign-container`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "wallet-modal-receive-header", children: [_jsx("button", { className: "wallet-modal-back", onClick: () => setShowMfaStatusModal(false), "aria-label": "Back", children: _jsx(IoChevronBack, { size: 20 }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: "MFA" }), _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx(CloseIcon, { size: 24 }) })] }), _jsxs("div", { className: "mfa-redesign-content", children: [_jsxs("div", { className: "mfa-info-box mfa-status-enabled-box", children: [_jsx("div", { className: "mfa-info-icon mfa-status-enabled-icon", children: _jsx(IoCheckmarkOutline, { size: 22 }) }), _jsxs("div", { className: "mfa-status-enabled-copy", children: [_jsx("p", { className: "mfa-status-enabled-title", children: "MFA is enabled" }), _jsx("p", { className: "mfa-info-text", children: "Your wallet is protected with an additional verification step." })] })] }), _jsx("button", { type: "button", className: "mfa-verify-button mfa-disable-primary-button", onClick: openMfaDisableFlow, children: "Disable MFA" })] })] }) }));
     }
     if (showLinkedProfilesList) {
-        return (_jsx("div", { className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: () => setShowLinkedProfilesList(false), children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-manage`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "wallet-modal-receive-header", children: [_jsx("button", { className: "wallet-modal-back", onClick: () => emailLinkStep ? cancelEmailLink() : setShowLinkedProfilesList(false), "aria-label": "Back", children: _jsx(IoChevronBack, { size: 20 }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: emailLinkStep ? "Link email" : "Auth Methods" }), _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx(IoClose, { size: 24 }) })] }), _jsx("div", { className: "wallet-modal-manage-content", children: emailLinkStep ? (_jsx("div", { className: "wallet-modal-email-link-flow", children: emailLinkStep === "email" ? (_jsxs("form", { className: "wallet-modal-email-link-form", onSubmit: (e) => {
+        return (_jsx("div", { className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: handleCloseLinkedProfiles, children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-manage`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "wallet-modal-receive-header", children: [_jsx("button", { className: "wallet-modal-back", onClick: () => emailLinkStep ? cancelEmailLink() : handleCloseLinkedProfiles(), "aria-label": "Back", children: _jsx(IoChevronBack, { size: 20 }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: emailLinkStep ? "Link email" : "Auth Methods" }), _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx(CloseIcon, { size: 24 }) })] }), _jsx("div", { className: "wallet-modal-manage-content", children: emailLinkStep ? (_jsx("div", { className: "wallet-modal-email-link-flow", children: emailLinkStep === "email" ? (_jsxs("form", { className: "wallet-modal-email-link-form", onSubmit: (e) => {
                                     e.preventDefault();
                                     if (!actionProvider && emailLinkEmail.trim()) {
                                         handleSendOtpForLink();
@@ -641,7 +557,7 @@ export function ManageWalletModal({ ...props }) {
                                                     emailLinkOtpInputsRef.current[index] = el;
                                                 }, type: "text", inputMode: "numeric", maxLength: 1, className: "mfa-otp-input", value: emailLinkOtpCode[index] || "", onChange: (e) => handleEmailLinkOtpChange(index, e.target.value), onKeyDown: (e) => handleEmailLinkOtpKeyDown(index, e), disabled: actionProvider === "email" || emailLinkResending }) }, index))) }), _jsx("button", { type: "button", className: "wallet-modal-email-link-button", onClick: handleLinkEmailSubmit, disabled: actionProvider === "email" ||
                                             emailLinkResending ||
-                                            emailLinkOtpCode.trim().length !== 6, children: actionProvider === "email" ? "Linking..." : "Link email" }), _jsxs("p", { className: "wallet-modal-email-link-resend", children: ["Didn't receive the code?", " ", emailLinkResendCooldown > 0 ? (_jsxs("span", { className: "wallet-modal-email-link-resend-cooldown", children: ["Resend in ", emailLinkResendCooldown, "s"] })) : (_jsx("button", { type: "button", className: "wallet-modal-email-link-resend-button", onClick: handleResendOtpForLink, disabled: emailLinkResending || actionProvider === "email", children: emailLinkResending ? "Sending..." : "Resend code" }))] })] })) })) : (_jsxs("div", { className: "wallet-modal-linked-profiles-list", children: [linkedLoading && (_jsx("div", { className: "wallet-modal-linked-profiles-loading", children: "Loading..." })), linkedError && !linkedLoading && (_jsx("div", { className: "wallet-modal-linked-profiles-error", children: linkedError })), !linkedLoading && !linkedError && supportedMethods.length === 0 && (_jsx("div", { className: "wallet-modal-linked-profiles-empty", children: "No auth methods available." })), !linkedLoading &&
+                                            emailLinkOtpCode.trim().length !== 6, children: actionProvider === "email" ? "Linking..." : "Link email" }), _jsxs("p", { className: "wallet-modal-email-link-resend", children: ["Didn't receive the code?", " ", emailLinkResendCooldown > 0 ? (_jsxs("span", { className: "wallet-modal-email-link-resend-cooldown", children: ["Resend in ", emailLinkResendCooldown, "s"] })) : (_jsx("button", { type: "button", className: "wallet-modal-email-link-resend-button", onClick: handleResendOtpForLink, disabled: emailLinkResending || actionProvider === "email", children: emailLinkResending ? "Sending..." : "Resend code" }))] })] })) })) : (_jsxs("div", { className: "wallet-modal-linked-profiles-list", children: [linkedLoading && (_jsx("div", { className: "wallet-modal-linked-profiles-loading", children: "Loading..." })), linkedError && !linkedLoading && (_jsx("div", { className: "wallet-modal-linked-profiles-error", children: linkedError })), !linkedLoading && linkUnlinkSuccess && (_jsx("div", { className: "wallet-modal-linked-profiles-success", role: "status", children: linkUnlinkSuccess })), !linkedLoading && !linkedError && supportedMethods.length === 0 && (_jsx("div", { className: "wallet-modal-linked-profiles-empty", children: "No auth methods available." })), !linkedLoading &&
                                     supportedMethods.map((method) => {
                                         const linked = isProviderLinked(method.provider);
                                         const busy = actionProvider === method.provider;
@@ -663,9 +579,10 @@ export function ManageWalletModal({ ...props }) {
                                                     ? `Passkey ID: ${unlinkConfirm.id}`
                                                     : `Provider ID: ${unlinkConfirm.id}` }))] }), _jsx("button", { type: "button", className: "wallet-modal-unlink-confirm-btn", onClick: () => handleDisconnect(unlinkConfirm.provider), disabled: actionProvider === unlinkConfirm.provider, children: unlinkConfirm.provider.toLowerCase() === "passkey"
                                             ? "Remove Passkey"
-                                            : "Remove Provider" }), _jsx("button", { type: "button", className: "wallet-modal-unlink-confirm-close", onClick: () => setUnlinkConfirm(null), "aria-label": "Close", children: _jsx(IoClose, { size: 24 }) })] }) }), document.body)] }) }));
+                                            : "Remove Provider" }), _jsx("button", { type: "button", className: "wallet-modal-unlink-confirm-close", onClick: () => setUnlinkConfirm(null), "aria-label": "Close", children: _jsx(CloseIcon, { size: 24 }) })] }) }), portalTarget), linkUnlinkError &&
+                        createPortal(_jsx("div", { className: `wallet-modal-overlay wallet-modal-overlay-layer2 wallet-modal-theme-${theme}`, onClick: () => setLinkUnlinkError(null), children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-unlink-confirm-modal`, onClick: (e) => e.stopPropagation(), role: "alertdialog", "aria-modal": "true", "aria-labelledby": "wallet-modal-auth-error-title", "aria-describedby": "wallet-modal-auth-error-message", children: [_jsx("div", { className: "wallet-modal-unlink-confirm-icon", "aria-hidden": "true", children: _jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", fill: "#ef4444" }), _jsx("path", { d: "M12 8v4M12 16h.01", stroke: "#ffffff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) }), _jsx("h3", { id: "wallet-modal-auth-error-title", className: "wallet-modal-unlink-confirm-title", children: "Error" }), _jsx("p", { id: "wallet-modal-auth-error-message", className: "wallet-modal-auth-error-message", children: linkUnlinkError }), _jsx("button", { type: "button", className: "wallet-modal-unlink-confirm-btn", onClick: () => setLinkUnlinkError(null), children: "Ok" }), _jsx("button", { type: "button", className: "wallet-modal-unlink-confirm-close", onClick: () => setLinkUnlinkError(null), "aria-label": "Close", children: _jsx(CloseIcon, { size: 24 }) })] }) }), portalTarget)] }) }));
     }
-    return (_jsx("div", { className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: onClose, children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-manage`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "wallet-modal-receive-header", children: [_jsx("button", { className: "wallet-modal-back", onClick: onClose, "aria-label": "Back", children: _jsx(IoChevronBack, { size: 20 }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: "Manage Wallet" }), _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx(IoClose, { size: 24 }) })] }), _jsx("div", { className: "wallet-modal-manage-content", children: _jsxs("div", { className: "wallet-modal-manage-list", children: [!isExternalWalletConnected && (_jsxs("button", { className: "wallet-modal-manage-list-item", onClick: handleOpenLinkedProfiles, type: "button", children: [_jsx("div", { className: "wallet-modal-manage-list-icon", "aria-hidden": "true", children: _jsx(FiUsers, { size: 20 }) }), _jsx("span", { className: "wallet-modal-manage-list-label", children: "Auth Methods" }), _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "wallet-modal-manage-list-arrow", "aria-hidden": "true", children: _jsx("path", { d: "M6 12L10 8L6 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), !isExternalWalletConnected && (_jsxs("button", { className: "wallet-modal-manage-list-item", onClick: () => {
+    return (_jsx("div", { className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: onClose, children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-manage`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "wallet-modal-receive-header", children: [_jsx("button", { className: "wallet-modal-back", onClick: onClose, "aria-label": "Back", children: _jsx(IoChevronBack, { size: 20 }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: "Manage Wallet" }), _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx(CloseIcon, { size: 24 }) })] }), _jsx("div", { className: "wallet-modal-manage-content", children: _jsxs("div", { className: "wallet-modal-manage-list", children: [!isExternalWalletConnected && (_jsxs("button", { className: "wallet-modal-manage-list-item", onClick: handleOpenLinkedProfiles, type: "button", children: [_jsx("div", { className: "wallet-modal-manage-list-icon", "aria-hidden": "true", children: _jsx(FiUsers, { size: 20 }) }), _jsx("span", { className: "wallet-modal-manage-list-label", children: "Auth Methods" }), _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "wallet-modal-manage-list-arrow", "aria-hidden": "true", children: _jsx("path", { d: "M6 12L10 8L6 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), !isExternalWalletConnected && (_jsxs("button", { className: "wallet-modal-manage-list-item", onClick: () => {
                                     if (mfaStatusLoading)
                                         return;
                                     if (!canEnableMfaFlow) {
@@ -677,7 +594,7 @@ export function ManageWalletModal({ ...props }) {
                                     }
                                     startMfaSetup();
                                 }, type: "button", children: [_jsx("div", { className: "wallet-modal-manage-list-icon", "aria-hidden": "true", children: _jsx(BiShieldQuarter, { size: 20 }) }), _jsx("span", { className: "wallet-modal-manage-list-label", children: "MFA" }), _jsx("span", { className: `wallet-modal-mfa-badge ${mfaStatus?.enabled ? "wallet-modal-mfa-badge-enabled" : "wallet-modal-mfa-badge-disabled"}`, "aria-hidden": "true", children: mfaStatus?.enabled ? "Enabled" : "Disabled" }), _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "wallet-modal-manage-list-arrow", "aria-hidden": "true", children: _jsx("path", { d: "M6 12L10 8L6 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), _jsxs("button", { className: "wallet-modal-manage-list-item", onClick: () => showFeedback("Coming soon", "success"), type: "button", children: [_jsx("div", { className: "wallet-modal-manage-list-icon", "aria-hidden": "true", children: _jsx(SiWalletconnect, { size: 20 }) }), _jsx("span", { className: "wallet-modal-manage-list-label", children: "Connect an App" }), _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "wallet-modal-manage-list-arrow", "aria-hidden": "true", children: _jsx("path", { d: "M6 12L10 8L6 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), !isExternalWalletConnected && (_jsxs("button", { className: "wallet-modal-manage-list-item", onClick: onExportPrivateKey, type: "button", children: [_jsx("div", { className: "wallet-modal-manage-list-icon", "aria-hidden": "true", children: _jsx(IoKeyOutline, { size: 20 }) }), _jsx("span", { className: "wallet-modal-manage-list-label", children: "Export Private Key" }), _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "wallet-modal-manage-list-arrow", "aria-hidden": "true", children: _jsx("path", { d: "M6 12L10 8L6 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })] }))] }) }), showMfaDisableConfirmModal &&
-                    createPortal(_jsx("div", { className: `wallet-modal-overlay wallet-modal-overlay-layer2 wallet-modal-theme-${theme}`, onClick: () => resetMfaDisableState(), children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-unlink-confirm-modal`, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { className: "wallet-modal-unlink-confirm-icon", "aria-hidden": "true", children: _jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", fill: "#ef4444" }), _jsx("path", { d: "M12 8v4M12 16h.01", stroke: "#ffffff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) }), _jsx("h3", { className: "wallet-modal-unlink-confirm-title", children: "Disable two-factor authentication" }), _jsx("p", { className: "wallet-modal-unlink-confirm-subtitle", children: "You are about to disable two-factor authentication. Your account will be less secure. Do you want to continue?" }), mfaDisableError && (_jsx("p", { className: "mfa-setup-error", style: { marginBottom: 12 }, children: mfaDisableError })), _jsxs("div", { className: "wallet-modal-mfa-disable-actions", children: [_jsx("button", { type: "button", className: "wallet-modal-unlink-confirm-btn wallet-modal-mfa-disable-cancel", onClick: () => resetMfaDisableState(), disabled: mfaDisableLoading, children: "Cancel" }), _jsx("button", { type: "button", className: "wallet-modal-unlink-confirm-btn", onClick: () => handleMfaDisableConfirm(), disabled: mfaDisableLoading, children: mfaDisableLoading ? "Disabling..." : "Confirm disable" })] }), _jsx("button", { type: "button", className: "wallet-modal-unlink-confirm-close", onClick: () => resetMfaDisableState(), "aria-label": "Close", children: _jsx(IoClose, { size: 24 }) })] }) }), document.body), unlinkConfirm &&
+                    createPortal(_jsx("div", { className: `wallet-modal-overlay wallet-modal-overlay-layer2 wallet-modal-theme-${theme}`, onClick: () => resetMfaDisableState(), children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-unlink-confirm-modal`, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { className: "wallet-modal-unlink-confirm-icon", "aria-hidden": "true", children: _jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", fill: "#ef4444" }), _jsx("path", { d: "M12 8v4M12 16h.01", stroke: "#ffffff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) }), _jsx("h3", { className: "wallet-modal-unlink-confirm-title", children: "Disable two-factor authentication" }), _jsx("p", { className: "wallet-modal-unlink-confirm-subtitle", children: "You are about to disable two-factor authentication. Your account will be less secure. Do you want to continue?" }), mfaDisableError && (_jsx("p", { className: "mfa-setup-error", style: { marginBottom: 12 }, children: mfaDisableError })), _jsxs("div", { className: "wallet-modal-mfa-disable-actions", children: [_jsx("button", { type: "button", className: "wallet-modal-unlink-confirm-btn wallet-modal-mfa-disable-cancel", onClick: () => resetMfaDisableState(), disabled: mfaDisableLoading, children: "Cancel" }), _jsx("button", { type: "button", className: "wallet-modal-unlink-confirm-btn", onClick: () => handleMfaDisableConfirm(), disabled: mfaDisableLoading, children: mfaDisableLoading ? "Disabling..." : "Confirm disable" })] }), _jsx("button", { type: "button", className: "wallet-modal-unlink-confirm-close", onClick: () => resetMfaDisableState(), "aria-label": "Close", children: _jsx(CloseIcon, { size: 24 }) })] }) }), portalTarget), unlinkConfirm &&
                     createPortal(_jsx("div", { className: `wallet-modal-overlay wallet-modal-overlay-layer2 wallet-modal-theme-${theme}`, onClick: () => setUnlinkConfirm(null), children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-unlink-confirm-modal`, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { className: "wallet-modal-unlink-confirm-icon", "aria-hidden": "true", children: _jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", fill: "#ef4444" }), _jsx("path", { d: "M12 8v4M12 16h.01", stroke: "#ffffff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) }), _jsx("h3", { className: "wallet-modal-unlink-confirm-title", children: unlinkConfirm.provider.toLowerCase() === "passkey"
                                         ? "Remove Passkey"
                                         : "Remove OAuth Provider" }), _jsx("p", { className: "wallet-modal-unlink-confirm-subtitle", children: "This action is irreversible." }), _jsxs("div", { className: "wallet-modal-unlink-confirm-details", children: [_jsx("p", { className: "wallet-modal-unlink-confirm-details-line", children: unlinkConfirm.provider.toLowerCase() === "passkey"
@@ -691,8 +608,9 @@ export function ManageWalletModal({ ...props }) {
                                                     alignItems: "center",
                                                     gap: "6px",
                                                     verticalAlign: "middle",
-                                                }, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 48 48", fill: "none", style: { display: "inline-block", verticalAlign: "middle" }, children: [_jsx("path", { d: "M47.9082 37.191L23.9541 23.553L0 9.91504L37.7436 -8.13502e-06L47.9082 37.191Z", fill: "url(#paint0_linear_unlink_footer)" }), _jsx("path", { d: "M13.5156 46.3594L10.1846 47.2344L8.99219 42.873L12.4365 42.4111L13.5156 46.3594ZM20.4268 44.5566L17.1152 45.4199L16.125 41.8818L19.5566 41.3721L20.4268 44.5566ZM26.9307 42.834L23.6152 43.6982L22.8438 40.9443L26.2744 40.4326L26.9307 42.834ZM33.5078 41.1074L30.1875 41.9727L29.6328 39.9951L33.0635 39.4844L33.5078 41.1074ZM39.998 39.4014L36.6729 40.2686L36.3359 39.0674L39.7656 38.5508L39.998 39.4014ZM10.1406 33.9434L11.6807 39.5762L8.15918 39.7568L6.46094 33.543L10.1406 33.9434ZM17.6582 34.5996L18.8916 39.1113L15.4199 39.3496L14.0078 34.3076L17.6582 34.5996ZM24.8779 35.332L25.8047 38.7227L22.3252 38.959L21.2266 35.0361L24.8779 35.332ZM32.0918 36.0723L32.7119 38.3398L29.2227 38.5723L28.4375 35.7656L32.0918 36.0723ZM43.2373 38.5488L43.1172 38.1172L47.7939 37.3516L43.2373 38.5488ZM39.3047 36.8096L39.6182 37.9561L36.1221 38.1846L35.6484 36.4961L39.3047 36.8096ZM47.7939 37.3516L43.0107 37.7939L42.8516 37.2236L47.7939 37.3516ZM47.8291 37.2988L42.7227 36.7529L42.5547 36.1523L47.8291 37.2988ZM47.8652 37.2412L42.3711 35.3486L42.2031 34.7471L47.8652 37.2412ZM38.748 34.8604L39.0664 36.0254L35.3369 35.4043L34.8594 33.6982L38.748 34.8604ZM31.0576 32.3994L31.6787 34.6709L27.959 34.0566L27.1719 31.2461L31.0576 32.3994ZM38.0811 32.6318L38.4092 33.8301L34.4893 32.3496L34.1543 31.1523C34.1005 30.9591 34.0322 30.7719 33.9531 30.5918L38.0811 32.6318ZM23.3682 29.9385L24.291 33.3164L20.5801 32.71L19.4844 28.7949L23.3682 29.9385ZM15.6641 27.4805L16.8896 31.9629L13.1875 31.3594L11.7812 26.3379L15.6641 27.4805ZM29.9463 28.4678L30.5693 30.748L26.6201 29.2812L25.8633 26.583C25.8534 26.5431 25.8417 26.5028 25.8281 26.4639L29.9463 28.4678ZM7.6875 25.0938L9.21484 30.6816L5.44727 29.959L3.75781 23.7793L7.6875 25.0938ZM21.5312 23.3623L22.4492 26.7227L18.5059 25.2627L17.4141 21.3643L21.5312 23.3623ZM13.6104 20.1602L14.8242 24.6006L10.8887 23.1387L9.49219 18.1553L13.6104 20.1602ZM5.2168 16.0654L6.72559 21.585L2.70703 19.9473L1.06055 13.8701L5.2168 16.0654Z", fill: "url(#paint1_linear_unlink_footer)" }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: "paint0_linear_unlink_footer", x1: "7.03362", y1: "6.09543", x2: "47.2003", y2: "57.0656", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#F878D2" }), _jsx("stop", { offset: "0.393522", stopColor: "#FDCC81" }), _jsx("stop", { offset: "1", stopColor: "#F9A0D9" })] }), _jsxs("linearGradient", { id: "paint1_linear_unlink_footer", x1: "2.53739", y1: "21.5136", x2: "48.7969", y2: "38.5742", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#F878D2" }), _jsx("stop", { offset: "0.393522", stopColor: "#FDCC81" }), _jsx("stop", { offset: "1", stopColor: "#F9A0D9" })] })] })] }), _jsx("span", { style: {
+                                                }, children: [_jsx(AbstraxnLogo, { size: 18, gradientId: "abstraxn_logo_unlink_footer" }), _jsx("span", { style: {
                                                             color: theme === "dark" ? "#ffffff" : "#111827",
-                                                        }, children: "abstraxn" })] })] }) }), _jsx("button", { type: "button", className: "wallet-modal-unlink-confirm-close", onClick: () => setUnlinkConfirm(null), "aria-label": "Close", children: _jsx(IoClose, { size: 24 }) })] }) }), document.body)] }) }));
+                                                        }, children: "abstraxn" })] })] }) }), _jsx("button", { type: "button", className: "wallet-modal-unlink-confirm-close", onClick: () => setUnlinkConfirm(null), "aria-label": "Close", children: _jsx(CloseIcon, { size: 24 }) })] }) }), portalTarget), linkUnlinkError &&
+                    createPortal(_jsx("div", { className: `wallet-modal-overlay wallet-modal-overlay-layer2 wallet-modal-theme-${theme}`, onClick: () => setLinkUnlinkError(null), children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-unlink-confirm-modal`, onClick: (e) => e.stopPropagation(), role: "alertdialog", "aria-modal": "true", "aria-labelledby": "wallet-modal-auth-error-title-main", "aria-describedby": "wallet-modal-auth-error-message-main", children: [_jsx("div", { className: "wallet-modal-unlink-confirm-icon", "aria-hidden": "true", children: _jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", fill: "#ef4444" }), _jsx("path", { d: "M12 8v4M12 16h.01", stroke: "#ffffff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) }), _jsx("h3", { id: "wallet-modal-auth-error-title-main", className: "wallet-modal-unlink-confirm-title", children: "Error" }), _jsx("p", { id: "wallet-modal-auth-error-message-main", className: "wallet-modal-auth-error-message", children: linkUnlinkError }), _jsx("button", { type: "button", className: "wallet-modal-unlink-confirm-btn", onClick: () => setLinkUnlinkError(null), children: "Ok" }), _jsx("button", { type: "button", className: "wallet-modal-unlink-confirm-close", onClick: () => setLinkUnlinkError(null), "aria-label": "Close", children: _jsx(CloseIcon, { size: 24 }) })] }) }), portalTarget)] }) }));
 }
 //# sourceMappingURL=ManageWalletModal.js.map

package/dist/src/components/WalletModal/components/MfaVerifyModal.d.ts

@@ -0,0 +1,15 @@
+export interface MfaVerifyModalProps {
+    isOpen: boolean;
+    theme?: "light" | "dark";
+    title: string;
+    description?: string;
+    submitLabel?: string;
+    loadingLabel?: string;
+    loading?: boolean;
+    error?: string | null;
+    /** When true, portals to document.body with its own ShadowHost (sign step-up). */
+    portal?: boolean;
+    onSubmit: (code: string) => void;
+    onCancel: () => void;
+}
+export declare function MfaVerifyModal({ isOpen, theme, title, description, submitLabel, loadingLabel, loading, error, portal, onSubmit, onCancel, }: MfaVerifyModalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/WalletModal/components/MfaVerifyModal.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Shared MFA verify UI (OTP + backup code) used by:
+ * - Manage Wallet → disable 2FA
+ * - Signing step-up (SIGN_MFA_REQUIRED) via SignMfaModalHost
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { CloseIcon, IoChevronBack } from "../../icons";
+import { ShadowHost, ShadowHostContext } from "../../ShadowHost";
+import { CodeInput } from "./CodeInput";
+import walletModalCss from "../../../WalletModal.css.js";
+import manageWalletModalCss from "./ManageWalletModal.css.js";
+const MFA_VERIFY_PORTAL_CSS = [walletModalCss, manageWalletModalCss];
+export function MfaVerifyModal({ isOpen, theme = "light", title, description = "Enter your authentication code to continue.", submitLabel = "Verify", loadingLabel = "Verifying...", loading = false, error = null, portal = false, onSubmit, onCancel, }) {
+    const [step, setStep] = useState("otp");
+    const [otpCode, setOtpCode] = useState("");
+    const [recoveryCode, setRecoveryCode] = useState("");
+    const [localError, setLocalError] = useState(null);
+    const submitRef = useRef(null);
+    useEffect(() => {
+        if (!isOpen) {
+            setStep("otp");
+            setOtpCode("");
+            setRecoveryCode("");
+            setLocalError(null);
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape" && !loading)
+                onCancel();
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [isOpen, loading, onCancel]);
+    const displayError = localError || error;
+    const canSubmit = useMemo(() => {
+        if (loading)
+            return false;
+        if (step === "otp")
+            return otpCode.length === 6;
+        return /^[A-Z0-9]{8}$/.test(recoveryCode.trim().toUpperCase());
+    }, [step, otpCode, recoveryCode, loading]);
+    const handleSubmit = useCallback(() => {
+        setLocalError(null);
+        if (step === "otp") {
+            if (otpCode.length !== 6) {
+                setLocalError("Please enter a 6-digit code");
+                return;
+            }
+            onSubmit(otpCode);
+            return;
+        }
+        const trimmed = recoveryCode.trim().toUpperCase();
+        if (!/^[A-Z0-9]{8}$/.test(trimmed)) {
+            setLocalError("Please enter a valid 8-character backup code");
+            return;
+        }
+        onSubmit(trimmed);
+    }, [step, otpCode, recoveryCode, onSubmit]);
+    if (!isOpen || (portal && typeof document === "undefined"))
+        return null;
+    const content = (_jsx("div", { "data-abstraxn-sdk-root": portal ? true : undefined, className: `wallet-modal-overlay wallet-modal-theme-${theme}`, style: portal ? { zIndex: 10050 } : undefined, onClick: () => {
+            if (!loading)
+                onCancel();
+        }, children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-manage mfa-redesign-container`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "wallet-modal-receive-header", children: [_jsx("button", { type: "button", className: "wallet-modal-back", onClick: () => {
+                                if (loading)
+                                    return;
+                                if (step === "recovery") {
+                                    setStep("otp");
+                                    setRecoveryCode("");
+                                    setLocalError(null);
+                                    return;
+                                }
+                                onCancel();
+                            }, "aria-label": "Back", disabled: loading, children: _jsx(IoChevronBack, { size: 20 }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: title }), _jsx("button", { type: "button", className: "wallet-modal-close", onClick: () => {
+                                if (!loading)
+                                    onCancel();
+                            }, "aria-label": "Close", disabled: loading, children: _jsx(CloseIcon, { size: 24 }) })] }), _jsxs("div", { className: "mfa-redesign-content", children: [_jsx("div", { className: "mfa-info-box", children: _jsx("p", { className: "mfa-info-text", children: description }) }), step === "otp" ? (_jsxs("div", { className: "mfa-verification-section", children: [_jsx("div", { className: "mfa-divider", children: _jsx("span", { children: "Enter 6-digit verification code" }) }), displayError && (_jsx("p", { className: "mfa-setup-error", style: { marginBottom: 12 }, children: displayError })), _jsx(CodeInput, { length: 6, value: otpCode, onChange: setOtpCode, disabled: loading, onComplete: () => {
+                                        window.setTimeout(() => submitRef.current?.focus(), 0);
+                                    } }), _jsx("button", { ref: submitRef, type: "button", className: "mfa-verify-button", onClick: handleSubmit, disabled: !canSubmit, children: loading ? loadingLabel : submitLabel }), _jsxs("p", { className: "mfa-trouble-text", children: ["Having trouble?", " ", _jsx("button", { type: "button", className: "mfa-link-button", disabled: loading, onClick: () => {
+                                                setStep("recovery");
+                                                setLocalError(null);
+                                                setRecoveryCode("");
+                                            }, children: "Use a backup code" })] })] })) : (_jsxs("div", { className: "mfa-recovery-section", children: [_jsx("div", { className: "mfa-divider", children: _jsx("span", { children: "Enter 8 character backup code" }) }), displayError && (_jsx("p", { className: "mfa-setup-error", style: { marginBottom: 12 }, children: displayError })), _jsx("input", { type: "text", inputMode: "text", maxLength: 8, value: recoveryCode, disabled: loading, onChange: (e) => {
+                                        setRecoveryCode(e.target.value
+                                            .toUpperCase()
+                                            .replace(/[^A-Z0-9]/g, "")
+                                            .slice(0, 8));
+                                    }, className: "mfa-recovery-field", autoFocus: true }), _jsx("button", { type: "button", className: "mfa-verify-button", onClick: handleSubmit, disabled: !canSubmit, children: loading ? loadingLabel : submitLabel })] }))] })] }) }));
+    if (!portal)
+        return content;
+    return createPortal(_jsx(ShadowHostContext.Provider, { value: null, children: _jsx(ShadowHost, { cssTexts: MFA_VERIFY_PORTAL_CSS, children: content }) }), document.body);
+}
+//# sourceMappingURL=MfaVerifyModal.js.map