@abstraxn/signer-react 2.1.5 → 2.2.1

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

@@ -1,36 +1,750 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Manage Wallet Modal Component
  */
 import { useEffect, useRef, useState, useCallback } from "react";
-import { IoKeyOutline } from "react-icons/io5";
-import { SiWalletconnect } from "react-icons/si";
-import { FiUsers } from "react-icons/fi";
+import { createPortal } from "react-dom";
+import { IoKeyOutline, IoCopyOutline, IoCheckmarkOutline, IoCloudDownloadOutline, IoChevronBack, IoClose, IoPhonePortraitOutline } from "react-icons/io5";
+import { SiWalletconnect, SiDiscord, SiX } from "react-icons/si";
+import { FcGoogle } from "react-icons/fc";
+import { FiUsers, FiLink } from "react-icons/fi";
+import { TfiEmail } from "react-icons/tfi";
+import { BiShieldQuarter } from "react-icons/bi";
+import { useAbstraxnWallet } from "../../../AbstraxnProvider";
 import "./ManageWalletModal.css";
+import { QRCodeSVG } from "qrcode.react";
+function normalizeLinkedProvider(authProvider) {
+    return authProvider === "otp" ? "email" : authProvider;
+}
+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" });
+    if (p === "discord")
+        return _jsx(SiDiscord, { size: 20, className: "wallet-modal-provider-icon wallet-modal-provider-icon-discord" });
+    if (p === "x" || p === "twitter")
+        return _jsx(SiX, { size: 20, className: "wallet-modal-provider-icon wallet-modal-provider-icon-x" });
+    if (p === "email")
+        return _jsx(TfiEmail, { size: 20, className: "wallet-modal-provider-icon wallet-modal-provider-icon-email" });
+    if (p === "passkey")
+        return _jsx(IoKeyOutline, { size: 20, className: "wallet-modal-provider-icon wallet-modal-provider-icon-passkey" });
+    return null;
+}
 export function ManageWalletModal({ ...props }) {
-    const { isOpen, onClose, isExternalWalletConnected, onExportPrivateKey, theme = "dark", } = props;
-    const toastTimerRef = useRef(null);
-    const [toastMessage, setToastMessage] = useState(null);
-    const showToast = useCallback((message) => {
-        setToastMessage(message);
-        if (toastTimerRef.current) {
-            window.clearTimeout(toastTimerRef.current);
-        }
-        toastTimerRef.current = window.setTimeout(() => {
-            setToastMessage(null);
-            toastTimerRef.current = null;
-        }, 1800);
+    const { isOpen, onClose, isExternalWalletConnected, onExportPrivateKey, theme = "dark", userEmail, organizationName, } = props;
+    const { getSupportedAuthMethods, getLinkedAuthMethods, linkAuthMethod, linkEmail, loginWithOTP, requestOtpForEmailLink, unlinkAuthMethod, whoami, getMfaStatus, enableMfa, verifySetupMfa, verifyMfa, disableMfaWithSignedPayload, } = useAbstraxnWallet();
+    const [showLinkedProfilesList, setShowLinkedProfilesList] = useState(false);
+    const [supportedMethods, setSupportedMethods] = useState([]);
+    const [linkedMethods, setLinkedMethods] = useState([]);
+    const [linkedLoading, setLinkedLoading] = useState(false);
+    const [linkedError, setLinkedError] = useState(null);
+    const [actionProvider, setActionProvider] = useState(null);
+    const [unlinkConfirm, setUnlinkConfirm] = useState(null);
+    const [linkUnlinkSuccess, setLinkUnlinkSuccess] = useState(null);
+    const [linkUnlinkError, setLinkUnlinkError] = useState(null);
+    const [emailLinkStep, setEmailLinkStep] = useState(null);
+    const [emailLinkEmail, setEmailLinkEmail] = useState("");
+    const [emailLinkOtpId, setEmailLinkOtpId] = useState(null);
+    const [emailLinkOtpCode, setEmailLinkOtpCode] = useState("");
+    const [emailLinkError, setEmailLinkError] = useState(null);
+    const [emailLinkResending, setEmailLinkResending] = useState(false);
+    const [emailLinkResendCooldown, setEmailLinkResendCooldown] = useState(0);
+    const emailLinkOtpInputsRef = useRef([]);
+    // MFA state
+    const [mfaStatus, setMfaStatus] = useState(null);
+    const [mfaLoading, setMfaLoading] = useState(false);
+    const [mfaError, setMfaError] = useState(null);
+    // MFA setup flow state (QR + secret + TOTP + backup codes)
+    const [showMfaSetupModal, setShowMfaSetupModal] = useState(false);
+    const [mfaSetupStep, setMfaSetupStep] = useState("setup");
+    const [mfaQrCode, setMfaQrCode] = useState(null);
+    const [mfaSecret, setMfaSecret] = useState(null);
+    const [mfaSetupCode, setMfaSetupCode] = useState("");
+    const [mfaRecoveryCode, setMfaRecoveryCode] = useState("");
+    const [mfaSetupLoading, setMfaSetupLoading] = useState(false);
+    const [mfaSetupError, setMfaSetupError] = useState(null);
+    const [mfaBackupCodes, setMfaBackupCodes] = useState([]);
+    const [showMfaBackupModal, setShowMfaBackupModal] = useState(false);
+    const [mfaSecretCopied, setMfaSecretCopied] = useState(false);
+    const [mfaBackupCodesCopied, setMfaBackupCodesCopied] = useState(false);
+    const mfaSetupVerifyButtonRef = useRef(null);
+    // MFA disable flow state (auth code modal -> confirm disable modal)
+    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 showFeedback = useCallback((message, type = "success") => {
+        if (type === "error") {
+            setLinkUnlinkError(message);
+            return;
+        }
+        setLinkUnlinkSuccess(message);
     }, []);
-    useEffect(() => {
-        return () => {
-            if (toastTimerRef.current) {
-                window.clearTimeout(toastTimerRef.current);
-                toastTimerRef.current = null;
+    const fetchLinkedProfilesData = useCallback(async () => {
+        if (!getSupportedAuthMethods || !getLinkedAuthMethods || isExternalWalletConnected)
+            return;
+        setLinkedLoading(true);
+        setLinkedError(null);
+        try {
+            const [supportedRes, linkedRes] = await Promise.all([
+                getSupportedAuthMethods(),
+                getLinkedAuthMethods(),
+            ]);
+            const loginProvider = whoami?.loginProvider?.toLowerCase();
+            const supported = supportedRes.supportedMethods ?? [];
+            const filteredSupported = loginProvider != null && loginProvider !== ""
+                ? supported.filter((method) => method.provider.toLowerCase() !== loginProvider)
+                : supported;
+            setSupportedMethods(filteredSupported);
+            setLinkedMethods(linkedRes.linkedMethods ?? []);
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : "Failed to load auth methods";
+            setLinkedError(msg);
+            setSupportedMethods([]);
+            setLinkedMethods([]);
+        }
+        finally {
+            setLinkedLoading(false);
+        }
+    }, [getSupportedAuthMethods, getLinkedAuthMethods, isExternalWalletConnected, whoami]);
+    const handleOpenLinkedProfiles = useCallback(() => {
+        setShowLinkedProfilesList(true);
+        fetchLinkedProfilesData();
+    }, [fetchLinkedProfilesData]);
+    const isProviderLinked = useCallback((provider) => {
+        return linkedMethods.some((m) => normalizeLinkedProvider(m.authProvider) === provider.toLowerCase());
+    }, [linkedMethods]);
+    const handleConnect = useCallback(async (provider) => {
+        if (provider.toLowerCase() === "email") {
+            setEmailLinkStep("email");
+            setEmailLinkEmail("");
+            setEmailLinkOtpId(null);
+            setEmailLinkOtpCode("");
+            return;
+        }
+        if (!linkAuthMethod)
+            return;
+        setActionProvider(provider);
+        try {
+            await linkAuthMethod(provider);
+            const lower = provider.toLowerCase();
+            const message = lower === "passkey"
+                ? "Successfully added passkey!"
+                : "Connected successfully";
+            showFeedback(message, "success");
+            await fetchLinkedProfilesData();
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : "Failed to connect";
+            setLinkUnlinkError(msg);
+        }
+        finally {
+            setActionProvider(null);
+        }
+    }, [linkAuthMethod, fetchLinkedProfilesData, showFeedback]);
+    const handleSendOtpForLink = useCallback(async () => {
+        if (!emailLinkEmail.trim())
+            return;
+        const sendOtp = requestOtpForEmailLink ?? loginWithOTP;
+        if (!sendOtp)
+            return;
+        setEmailLinkError(null);
+        setActionProvider("email");
+        try {
+            const { otpId } = await sendOtp(emailLinkEmail.trim());
+            setEmailLinkOtpId(otpId);
+            setEmailLinkStep("otp");
+            setEmailLinkOtpCode("");
+            setEmailLinkResendCooldown(60);
+            showFeedback("Check your email for the code", "success");
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : "Failed to send OTP";
+            setEmailLinkError(msg);
+            showFeedback(msg, "error");
+        }
+        finally {
+            setActionProvider(null);
+        }
+    }, [requestOtpForEmailLink, loginWithOTP, emailLinkEmail, showFeedback]);
+    const handleResendOtpForLink = useCallback(async () => {
+        if (!emailLinkEmail.trim() || emailLinkResendCooldown > 0)
+            return;
+        const sendOtp = requestOtpForEmailLink ?? loginWithOTP;
+        if (!sendOtp)
+            return;
+        setEmailLinkResending(true);
+        setEmailLinkError(null);
+        try {
+            const { otpId } = await sendOtp(emailLinkEmail.trim());
+            setEmailLinkOtpId(otpId);
+            setEmailLinkOtpCode("");
+            setEmailLinkResendCooldown(60);
+            showFeedback("Code resent", "success");
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : "Failed to resend";
+            setEmailLinkError(msg);
+            showFeedback(msg, "error");
+        }
+        finally {
+            setEmailLinkResending(false);
+        }
+    }, [requestOtpForEmailLink, loginWithOTP, emailLinkEmail, emailLinkResendCooldown, showFeedback]);
+    const handleLinkEmailSubmit = useCallback(async () => {
+        if (!linkEmail || !emailLinkOtpId || !emailLinkOtpCode.trim())
+            return;
+        setEmailLinkError(null);
+        setActionProvider("email");
+        try {
+            await linkEmail(emailLinkOtpId, emailLinkOtpCode.trim());
+            const message = "Email linked successfully";
+            showFeedback(message, "success");
+            setEmailLinkStep(null);
+            setEmailLinkEmail("");
+            setEmailLinkOtpId(null);
+            setEmailLinkOtpCode("");
+            setEmailLinkError(null);
+            await fetchLinkedProfilesData();
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : "Failed to link email";
+            setEmailLinkError(msg);
+            showFeedback(msg, "error");
+        }
+        finally {
+            setActionProvider(null);
+        }
+    }, [linkEmail, emailLinkOtpId, emailLinkOtpCode, fetchLinkedProfilesData, showFeedback]);
+    const cancelEmailLink = useCallback(() => {
+        setEmailLinkStep(null);
+        setEmailLinkEmail("");
+        setEmailLinkOtpId(null);
+        setEmailLinkOtpCode("");
+        setEmailLinkError(null);
+        setEmailLinkResending(false);
+        setEmailLinkResendCooldown(0);
+    }, []);
+    const handleEmailLinkOtpChange = useCallback((index, value) => {
+        if (value && !/^\d$/.test(value))
+            return;
+        const digits = (emailLinkOtpCode || "").split("").slice(0, 6);
+        while (digits.length < 6)
+            digits.push("");
+        const next = digits.map((d, i) => (i === index ? value : d)).join("");
+        const cleaned = next.replace(/\s/g, "").slice(0, 6);
+        setEmailLinkOtpCode(cleaned);
+        if (value && index < 5) {
+            const nextInput = emailLinkOtpInputsRef.current[index + 1];
+            nextInput?.focus();
+        }
+    }, [emailLinkOtpCode]);
+    const handleEmailLinkOtpKeyDown = useCallback(async (index, e) => {
+        const digits = (emailLinkOtpCode || "").split("").slice(0, 6);
+        // Backspace navigation
+        if (e.key === "Backspace" && !digits[index] && index > 0) {
+            emailLinkOtpInputsRef.current[index - 1]?.focus();
+        }
+        // Paste via keyboard shortcut
+        if (e.key === "v" && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            try {
+                const text = await navigator.clipboard.readText();
+                const pasted = text.replace(/\D/g, "").slice(0, 6);
+                if (!pasted)
+                    return;
+                setEmailLinkOtpCode(pasted);
+                if (pasted.length === 6) {
+                    emailLinkOtpInputsRef.current[5]?.focus();
+                }
+            }
+            catch {
+                // ignore clipboard errors
             }
-        };
+        }
+    }, [emailLinkOtpCode]);
+    useEffect(() => {
+        if (emailLinkOtpCode.trim().length === 6 &&
+            actionProvider !== "email" &&
+            !emailLinkResending &&
+            !emailLinkError) {
+            handleLinkEmailSubmit();
+        }
+    }, [emailLinkOtpCode, actionProvider, emailLinkResending, emailLinkError, handleLinkEmailSubmit]);
+    const refreshMfaStatus = useCallback(async () => {
+        if (!getMfaStatus)
+            return;
+        setMfaLoading(true);
+        setMfaError(null);
+        try {
+            const status = await getMfaStatus();
+            setMfaStatus(status);
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : "Failed to load MFA status";
+            setMfaError(msg);
+        }
+        finally {
+            setMfaLoading(false);
+        }
+    }, [getMfaStatus]);
+    const resetMfaSetupState = useCallback(() => {
+        setMfaSetupStep("setup");
+        setMfaQrCode(null);
+        setMfaSecret(null);
+        setMfaSetupCode("");
+        setMfaRecoveryCode("");
+        setMfaSetupError(null);
+        setMfaSetupLoading(false);
+        setMfaBackupCodes([]);
     }, []);
+    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)
+            return;
+        setMfaDisableLoading(true);
+        setMfaDisableError(null);
+        try {
+            await verifyMfa(mfaDisableCode.trim());
+            setShowMfaDisableAuthModal(false);
+            setShowMfaDisableConfirmModal(true);
+            setMfaDisableCode("");
+        }
+        catch (err) {
+            setMfaDisableError(err instanceof Error ? 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 ? err.message : "Invalid backup code");
+        }
+        finally {
+            setMfaDisableLoading(false);
+        }
+    }, [verifyMfa, mfaDisableRecoveryCode]);
+    const openMfaDisableFlow = useCallback(() => {
+        if (!verifyMfa || !disableMfaWithSignedPayload) {
+            return;
+        }
+        setShowMfaStatusModal(false);
+        setMfaDisableCode("");
+        setMfaDisableRecoveryCode("");
+        setMfaDisableStep("otp");
+        setMfaDisableError(null);
+        setShowMfaDisableAuthModal(true);
+    }, [verifyMfa, disableMfaWithSignedPayload]);
+    const handleMfaDisableConfirm = useCallback(async () => {
+        if (!disableMfaWithSignedPayload)
+            return;
+        setMfaDisableLoading(true);
+        setMfaDisableError(null);
+        try {
+            await disableMfaWithSignedPayload();
+            await refreshMfaStatus();
+            resetMfaDisableState();
+            showFeedback("2FA disabled successfully", "success");
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : "Failed to disable 2FA";
+            setMfaDisableError(msg);
+        }
+        finally {
+            setMfaDisableLoading(false);
+        }
+    }, [disableMfaWithSignedPayload, refreshMfaStatus, resetMfaDisableState, showFeedback]);
+    const startMfaSetup = useCallback(async () => {
+        if (!enableMfa)
+            return;
+        resetMfaSetupState();
+        setShowMfaSetupModal(true);
+        setMfaSetupLoading(true);
+        try {
+            const result = await enableMfa();
+            setMfaQrCode(result.qrCode);
+            setMfaSecret(result.secret);
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : "Failed to enable MFA";
+            setMfaSetupError(msg);
+            setShowMfaSetupModal(false);
+        }
+        finally {
+            setMfaSetupLoading(false);
+        }
+    }, [enableMfa, resetMfaSetupState]);
+    const handleVerifyMfaSetup = useCallback(async () => {
+        if (!verifySetupMfa)
+            return;
+        const trimmed = mfaSetupCode.trim();
+        if (trimmed.length !== 6) {
+            setMfaSetupError("Please enter a 6-digit code");
+            return;
+        }
+        setMfaSetupLoading(true);
+        setMfaSetupError(null);
+        try {
+            const result = await verifySetupMfa(trimmed);
+            setMfaBackupCodes(result.backupCodes || []);
+            setShowMfaSetupModal(false);
+            setShowMfaBackupModal(true);
+            await refreshMfaStatus();
+            showFeedback("MFA enabled successfully.", "success");
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : "Invalid TOTP code";
+            setMfaSetupError(msg);
+        }
+        finally {
+            setMfaSetupLoading(false);
+        }
+    }, [verifySetupMfa, mfaSetupCode, refreshMfaStatus, showFeedback]);
+    const handleVerifyRecoveryCode = useCallback(async () => {
+        if (!verifyMfa)
+            return;
+        const trimmed = mfaRecoveryCode.trim().toUpperCase();
+        if (!/^[A-Z0-9]{8}$/.test(trimmed)) {
+            setMfaSetupError("Please enter a valid 8-character recovery code");
+            return;
+        }
+        setMfaSetupLoading(true);
+        setMfaSetupError(null);
+        try {
+            await verifyMfa(trimmed);
+            setMfaSetupStep("verify");
+            setMfaRecoveryCode("");
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : "Invalid recovery code";
+            setMfaSetupError(msg);
+        }
+        finally {
+            setMfaSetupLoading(false);
+        }
+    }, [verifyMfa, mfaRecoveryCode]);
+    const handleCopyMfaSecret = useCallback(() => {
+        if (!mfaSecret)
+            return;
+        try {
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                navigator.clipboard.writeText(mfaSecret);
+                setMfaSecretCopied(true);
+                setTimeout(() => setMfaSecretCopied(false), 2000);
+            }
+            else {
+                throw new Error("Clipboard not available");
+            }
+        }
+        catch {
+            window.alert("Copy failed. Please copy the secret manually.");
+        }
+    }, [mfaSecret]);
+    const handleCopyBackupCodes = useCallback(() => {
+        if (!mfaBackupCodes.length)
+            return;
+        const text = mfaBackupCodes.join("\n");
+        try {
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                navigator.clipboard.writeText(text);
+                setMfaBackupCodesCopied(true);
+                setTimeout(() => setMfaBackupCodesCopied(false), 2000);
+            }
+            else {
+                throw new Error("Clipboard not available");
+            }
+        }
+        catch {
+            window.alert("Copy failed. Please copy the codes manually.");
+        }
+    }, [mfaBackupCodes]);
+    const handleDownloadBackupCodes = useCallback(() => {
+        if (!mfaBackupCodes.length)
+            return;
+        const header = "Abstraxn MFA Backup Codes\n\n“You have 10 backup codes. Each can be used once.”\n\n";
+        const body = mfaBackupCodes.join("\n");
+        const blob = new Blob([header + body], { type: "text/plain" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "abstraxn-mfa-backup-codes.txt";
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }, [mfaBackupCodes]);
+    const handleDisconnect = useCallback(async (provider) => {
+        if (!unlinkAuthMethod)
+            return;
+        setActionProvider(provider);
+        try {
+            await unlinkAuthMethod(provider);
+            setUnlinkConfirm(null);
+            const lower = provider.toLowerCase();
+            const message = lower === "passkey"
+                ? "Passkey removed successfully!"
+                : "Provider unlinked successfully!";
+            setLinkUnlinkSuccess(message);
+            await fetchLinkedProfilesData();
+        }
+        catch (err) {
+            showFeedback(err instanceof Error ? err.message : "Failed to disconnect", "error");
+        }
+        finally {
+            setActionProvider(null);
+        }
+    }, [unlinkAuthMethod, fetchLinkedProfilesData, showFeedback]);
+    useEffect(() => {
+        if (emailLinkStep !== "otp" || emailLinkResendCooldown <= 0)
+            return;
+        const id = setInterval(() => {
+            setEmailLinkResendCooldown((c) => {
+                if (c <= 1) {
+                    clearInterval(id);
+                    return 0;
+                }
+                return c - 1;
+            });
+        }, 1000);
+        return () => clearInterval(id);
+    }, [emailLinkStep, emailLinkResendCooldown]);
+    useEffect(() => {
+        if (!isOpen || isExternalWalletConnected)
+            return;
+        refreshMfaStatus();
+    }, [isOpen, isExternalWalletConnected, refreshMfaStatus]);
+    useEffect(() => {
+        if (isOpen)
+            return;
+        setShowMfaStatusModal(false);
+    }, [isOpen]);
     if (!isOpen)
         return null;
-    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, children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M12.5 15L7.5 10L12.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: "Manage Wallet" }), _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), _jsx("div", { className: "wallet-modal-manage-content", children: _jsxs("div", { className: "wallet-modal-manage-list", children: [_jsxs("button", { className: "wallet-modal-manage-list-item", onClick: () => showToast("Coming soon"), 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: "Linked Profiles" }), _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: () => showToast("Coming soon"), 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" }) })] }))] }) }), toastMessage && (_jsx("div", { className: "wallet-modal-manage-toast", role: "status", children: toastMessage }))] }) }));
+    if (showMfaSetupModal) {
+        return (_jsx("div", { className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: () => {
+                setShowMfaSetupModal(false);
+                resetMfaSetupState();
+            }, 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 (mfaSetupStep === "verify" || mfaSetupStep === "recovery") {
+                                        setMfaSetupStep("setup");
+                                        setMfaSetupCode("");
+                                        setMfaRecoveryCode("");
+                                        setMfaSetupError(null);
+                                        return;
+                                    }
+                                    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: (() => {
+                                                    const issuer = organizationName ?? "Abstraxn";
+                                                    const label = userEmail ? `${issuer}:${userEmail}` : issuer;
+                                                    return `otpauth://totp/${encodeURIComponent(label)}?secret=${mfaSecret}&issuer=${encodeURIComponent(issuer)}`;
+                                                })(), size: 160, level: "L", includeMargin: false }) })) : (_jsx("div", { className: "mfa-qr-placeholder", children: mfaSetupLoading ? "Generating QR..." : "QR Code" })), mfaSecret && (_jsxs("div", { className: "mfa-secret-display", children: [_jsx(IoKeyOutline, { size: 16, className: "mfa-secret-key-icon" }), _jsx("code", { className: "mfa-secret-code", children: mfaSecret }), _jsx("button", { type: "button", className: `mfa-secret-copy ${mfaSecretCopied ? "copied" : ""}`, onClick: handleCopyMfaSecret, children: mfaSecretCopied ? _jsx(IoCheckmarkOutline, { size: 18 }) : _jsx(IoCopyOutline, { size: 18 }) })] }))] }), _jsx("button", { type: "button", className: "mfa-verify-button", onClick: () => {
+                                        setMfaSetupStep("verify");
+                                        setMfaSetupCode("");
+                                        setMfaRecoveryCode("");
+                                        setMfaSetupError(null);
+                                    }, 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: () => {
+                                                setMfaSetupStep("recovery");
+                                                setMfaSetupError(null);
+                                                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) => {
+                                        const val = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 8);
+                                        setMfaRecoveryCode(val);
+                                    }, className: "mfa-recovery-field" }), _jsx("button", { type: "button", className: "mfa-verify-button", onClick: handleVerifyRecoveryCode, disabled: mfaSetupLoading || mfaRecoveryCode.trim().length !== 8, children: mfaSetupLoading ? "Verifying..." : "Verify" })] })) })] }) }));
+    }
+    if (showMfaBackupModal) {
+        return (_jsx("div", { className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: () => {
+                setShowMfaBackupModal(false);
+                setMfaBackupCodes([]);
+            }, 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);
+                                    setMfaBackupCodes([]);
+                                }, "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: () => {
+                                    setShowMfaBackupModal(false);
+                                    setMfaBackupCodes([]);
+                                }, 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" })] }))] })] }) }));
+    }
+    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" })] })] }) }));
+    }
+    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) => {
+                                    e.preventDefault();
+                                    if (!actionProvider && emailLinkEmail.trim()) {
+                                        handleSendOtpForLink();
+                                    }
+                                }, children: [_jsx("div", { className: "wallet-modal-email-link-icon", children: _jsx(TfiEmail, { size: 22 }) }), _jsx("h3", { className: "wallet-modal-email-link-title", children: "Add an email" }), _jsx("p", { className: "wallet-modal-email-link-subtitle", children: "Add an email so you can sign in or recover access securely." }), _jsx("label", { className: "wallet-modal-email-link-label", htmlFor: "wallet-modal-link-email", children: "Email" }), _jsx("input", { id: "wallet-modal-link-email", type: "email", className: "wallet-modal-email-link-input", placeholder: "Enter email to link", value: emailLinkEmail, onChange: (e) => setEmailLinkEmail(e.target.value), disabled: actionProvider === "email", autoComplete: "email" }), emailLinkError && (_jsx("p", { className: "wallet-modal-email-link-error", children: emailLinkError })), _jsx("button", { type: "submit", className: "wallet-modal-email-link-button", disabled: actionProvider === "email" || !emailLinkEmail.trim(), children: actionProvider === "email" ? "Sending..." : "Send code" })] })) : (_jsxs("div", { className: "wallet-modal-email-link-otp", children: [_jsx("div", { className: "wallet-modal-email-link-icon", children: _jsx(TfiEmail, { size: 22 }) }), _jsx("h3", { className: "wallet-modal-email-link-title", children: "Enter verification code" }), _jsx("p", { className: "wallet-modal-email-link-subtitle", children: "We sent a 6-digit code to" }), _jsx("p", { className: "wallet-modal-email-link-email", children: emailLinkEmail }), emailLinkError && (_jsx("p", { className: "wallet-modal-email-link-error", children: emailLinkError })), _jsx("div", { className: "mfa-otp-grid", children: [0, 1, 2, 3, 4, 5].map((index) => (_jsx("div", { className: "mfa-otp-slot", children: _jsx("input", { ref: (el) => {
+                                                    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 &&
+                                    supportedMethods.map((method) => {
+                                        const linked = isProviderLinked(method.provider);
+                                        const busy = actionProvider === method.provider;
+                                        return (_jsxs("div", { className: "wallet-modal-linked-profiles-row", children: [_jsx("div", { className: "wallet-modal-manage-list-icon", "aria-hidden": "true", children: _jsx(AuthMethodIcon, { provider: method.provider }) }), _jsx("span", { className: "wallet-modal-manage-list-label", children: method.displayName }), _jsx("div", { className: "wallet-modal-linked-profiles-action", children: linked ? (_jsx("button", { type: "button", className: "wallet-modal-linked-disconnect", onClick: () => {
+                                                            const linkedMethod = linkedMethods.find((m) => normalizeLinkedProvider(m.authProvider) ===
+                                                                method.provider.toLowerCase());
+                                                            setUnlinkConfirm({
+                                                                provider: method.provider,
+                                                                displayName: method.displayName,
+                                                                id: linkedMethod?.id ?? null,
+                                                            });
+                                                        }, disabled: busy, "aria-label": `Unlink ${method.displayName}`, children: _jsx(FiLink, { size: 18, "aria-hidden": "true" }) })) : (_jsx("button", { type: "button", className: "wallet-modal-linked-connect", onClick: () => handleConnect(method.provider), disabled: busy, "aria-label": `Connect ${method.displayName}`, children: "+ Connect" })) })] }, method.provider));
+                                    })] })) }), 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"
+                                                    ? `Passkey Name: ${unlinkConfirm.displayName}`
+                                                    : `Provider Name: ${unlinkConfirm.displayName}` }), unlinkConfirm.id && (_jsx("p", { className: "wallet-modal-unlink-confirm-details-line", children: unlinkConfirm.provider.toLowerCase() === "passkey"
+                                                    ? `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)] }) }));
+    }
+    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: () => {
+                                    if (mfaLoading)
+                                        return;
+                                    if (!getMfaStatus || !enableMfa || !verifySetupMfa) {
+                                        return;
+                                    }
+                                    if (mfaStatus?.enabled) {
+                                        setShowMfaStatusModal(true);
+                                        return;
+                                    }
+                                    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: () => 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"
+                                                ? `Passkey Name: ${unlinkConfirm.displayName}`
+                                                : `Provider Name: ${unlinkConfirm.displayName}` }), unlinkConfirm.id && (_jsx("p", { className: "wallet-modal-unlink-confirm-details-line", children: unlinkConfirm.provider.toLowerCase() === "passkey"
+                                                ? `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("div", { className: "wallet-modal-unlink-confirm-footer", children: _jsxs("span", { className: "onboarding-footer-text", children: ["Powered by", " ", _jsxs("a", { href: "https://abstraxn.com", target: "_blank", rel: "noopener noreferrer", className: "onboarding-footer-brand", style: {
+                                                    display: "inline-flex",
+                                                    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: {
+                                                            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)] }) }));
 }
 //# sourceMappingURL=ManageWalletModal.js.map