@abstraxn/signer-react 2.2.1 → 2.2.3

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

@@ -11,11 +11,15 @@ import { FiUsers, FiLink } from "react-icons/fi";
 import { TfiEmail } from "react-icons/tfi";
 import { BiShieldQuarter } from "react-icons/bi";
 import { useAbstraxnWallet } from "../../../AbstraxnProvider";
+import { useEnableMfa } from "../../../hooks";
 import "./ManageWalletModal.css";
 import { QRCodeSVG } from "qrcode.react";
 function normalizeLinkedProvider(authProvider) {
     return authProvider === "otp" ? "email" : authProvider;
 }
+function normalizeErrorMessage(message) {
+    return message.replace(/^network error:\s*/i, "");
+}
 function AuthMethodIcon({ provider }) {
     const p = provider.toLowerCase();
     if (p === "google")
@@ -32,7 +36,7 @@ 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, getMfaStatus, enableMfa, verifySetupMfa, verifyMfa, disableMfaWithSignedPayload, } = useAbstraxnWallet();
+    const { getSupportedAuthMethods, getLinkedAuthMethods, linkAuthMethod, linkEmail, loginWithOTP, requestOtpForEmailLink, unlinkAuthMethod, whoami, getMfaStatus, verifyMfa, disableMfaWithSignedPayload, } = useAbstraxnWallet();
     const [showLinkedProfilesList, setShowLinkedProfilesList] = useState(false);
     const [supportedMethods, setSupportedMethods] = useState([]);
     const [linkedMethods, setLinkedMethods] = useState([]);
@@ -50,21 +54,13 @@ export function ManageWalletModal({ ...props }) {
     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 [showMfaBackupModal, setShowMfaBackupModal] = useState(false);
     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 { canEnableMfaFlow, setupState, isLoading: mfaSetupLoading, error: mfaSetupError, start, goToSetup, goToVerify, goToRecovery, verifyCode, verifyRecoveryCode, reset, } = useEnableMfa();
     const [mfaSecretCopied, setMfaSecretCopied] = useState(false);
     const [mfaBackupCodesCopied, setMfaBackupCodesCopied] = useState(false);
     const mfaSetupVerifyButtonRef = useRef(null);
@@ -78,6 +74,10 @@ export function ManageWalletModal({ ...props }) {
     const [mfaDisableLoading, setMfaDisableLoading] = useState(false);
     const [mfaDisableError, setMfaDisableError] = useState(null);
     const mfaDisableVerifyButtonRef = useRef(null);
+    const hasFetchedMfaForOpenRef = useRef(false);
+    const hasFetchedLinkedProfilesForOpenRef = useRef(false);
+    const linkedProfilesFetchPromiseRef = useRef(null);
+    const mfaStatusRequestInFlightRef = useRef(false);
     const showFeedback = useCallback((message, type = "success") => {
         if (type === "error") {
             setLinkUnlinkError(message);
@@ -88,35 +88,48 @@ export function ManageWalletModal({ ...props }) {
     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);
+        if (linkedProfilesFetchPromiseRef.current) {
+            await linkedProfilesFetchPromiseRef.current;
+            return;
         }
+        const fetchPromise = (async () => {
+            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 ? normalizeErrorMessage(err.message) : "Failed to load auth methods";
+                setLinkedError(msg);
+                setSupportedMethods([]);
+                setLinkedMethods([]);
+            }
+            finally {
+                setLinkedLoading(false);
+            }
+        })();
+        linkedProfilesFetchPromiseRef.current = fetchPromise;
+        await fetchPromise.finally(() => {
+            linkedProfilesFetchPromiseRef.current = null;
+        });
     }, [getSupportedAuthMethods, getLinkedAuthMethods, isExternalWalletConnected, whoami]);
     const handleOpenLinkedProfiles = useCallback(() => {
         setShowLinkedProfilesList(true);
-        fetchLinkedProfilesData();
-    }, [fetchLinkedProfilesData]);
+        const hasLinkedProfilesData = supportedMethods.length > 0 || linkedMethods.length > 0;
+        if (!hasLinkedProfilesData && !linkedLoading) {
+            fetchLinkedProfilesData();
+        }
+    }, [fetchLinkedProfilesData, linkedLoading, linkedMethods.length, supportedMethods.length]);
     const isProviderLinked = useCallback((provider) => {
         return linkedMethods.some((m) => normalizeLinkedProvider(m.authProvider) === provider.toLowerCase());
     }, [linkedMethods]);
@@ -141,7 +154,7 @@ export function ManageWalletModal({ ...props }) {
             await fetchLinkedProfilesData();
         }
         catch (err) {
-            const msg = err instanceof Error ? err.message : "Failed to connect";
+            const msg = err instanceof Error ? normalizeErrorMessage(err.message) : "Failed to connect";
             setLinkUnlinkError(msg);
         }
         finally {
@@ -165,7 +178,7 @@ export function ManageWalletModal({ ...props }) {
             showFeedback("Check your email for the code", "success");
         }
         catch (err) {
-            const msg = err instanceof Error ? err.message : "Failed to send OTP";
+            const msg = err instanceof Error ? normalizeErrorMessage(err.message) : "Failed to send OTP";
             setEmailLinkError(msg);
             showFeedback(msg, "error");
         }
@@ -189,7 +202,7 @@ export function ManageWalletModal({ ...props }) {
             showFeedback("Code resent", "success");
         }
         catch (err) {
-            const msg = err instanceof Error ? err.message : "Failed to resend";
+            const msg = err instanceof Error ? normalizeErrorMessage(err.message) : "Failed to resend";
             setEmailLinkError(msg);
             showFeedback(msg, "error");
         }
@@ -214,7 +227,7 @@ export function ManageWalletModal({ ...props }) {
             await fetchLinkedProfilesData();
         }
         catch (err) {
-            const msg = err instanceof Error ? err.message : "Failed to link email";
+            const msg = err instanceof Error ? normalizeErrorMessage(err.message) : "Failed to link email";
             setEmailLinkError(msg);
             showFeedback(msg, "error");
         }
@@ -277,33 +290,34 @@ export function ManageWalletModal({ ...props }) {
             handleLinkEmailSubmit();
         }
     }, [emailLinkOtpCode, actionProvider, emailLinkResending, emailLinkError, handleLinkEmailSubmit]);
+    const mfaSetupStep = setupState?.step === "complete" || !setupState ? "setup" : setupState.step;
+    const mfaQrCode = setupState?.step === "setup" ? setupState.qrCode : null;
+    const mfaSecret = setupState?.step === "setup" ? setupState.secret : null;
+    const mfaBackupCodes = setupState?.step === "complete" ? setupState.backupCodes : [];
     const refreshMfaStatus = useCallback(async () => {
-        if (!getMfaStatus)
+        if (!getMfaStatus || mfaStatusRequestInFlightRef.current)
             return;
+        mfaStatusRequestInFlightRef.current = true;
         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);
+        catch {
+            setMfaStatus(null);
         }
         finally {
             setMfaLoading(false);
+            mfaStatusRequestInFlightRef.current = false;
         }
     }, [getMfaStatus]);
     const resetMfaSetupState = useCallback(() => {
-        setMfaSetupStep("setup");
-        setMfaQrCode(null);
-        setMfaSecret(null);
         setMfaSetupCode("");
         setMfaRecoveryCode("");
-        setMfaSetupError(null);
-        setMfaSetupLoading(false);
-        setMfaBackupCodes([]);
-    }, []);
+        setShowMfaSetupModal(false);
+        setShowMfaBackupModal(false);
+        reset();
+    }, [reset]);
     const resetMfaDisableState = useCallback(() => {
         setShowMfaDisableAuthModal(false);
         setShowMfaDisableConfirmModal(false);
@@ -325,7 +339,7 @@ export function ManageWalletModal({ ...props }) {
             setMfaDisableCode("");
         }
         catch (err) {
-            setMfaDisableError(err instanceof Error ? err.message : "Invalid authentication code");
+            setMfaDisableError(err instanceof Error ? normalizeErrorMessage(err.message) : "Invalid authentication code");
         }
         finally {
             setMfaDisableLoading(false);
@@ -348,7 +362,7 @@ export function ManageWalletModal({ ...props }) {
             setMfaDisableRecoveryCode("");
         }
         catch (err) {
-            setMfaDisableError(err instanceof Error ? err.message : "Invalid backup code");
+            setMfaDisableError(err instanceof Error ? normalizeErrorMessage(err.message) : "Invalid backup code");
         }
         finally {
             setMfaDisableLoading(false);
@@ -377,7 +391,7 @@ export function ManageWalletModal({ ...props }) {
             showFeedback("2FA disabled successfully", "success");
         }
         catch (err) {
-            const msg = err instanceof Error ? err.message : "Failed to disable 2FA";
+            const msg = err instanceof Error ? normalizeErrorMessage(err.message) : "Failed to disable 2FA";
             setMfaDisableError(msg);
         }
         finally {
@@ -385,74 +399,27 @@ export function ManageWalletModal({ ...props }) {
         }
     }, [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);
+        const result = await start();
+        if (result) {
+            setShowMfaSetupModal(true);
         }
-        catch (err) {
-            const msg = err instanceof Error ? err.message : "Failed to enable MFA";
-            setMfaSetupError(msg);
-            setShowMfaSetupModal(false);
-        }
-        finally {
-            setMfaSetupLoading(false);
-        }
-    }, [enableMfa, resetMfaSetupState]);
+    }, [start]);
     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 || []);
+        const result = await verifyCode(mfaSetupCode);
+        if (result) {
             setShowMfaSetupModal(false);
             setShowMfaBackupModal(true);
-            await refreshMfaStatus();
+            setMfaSetupCode("");
             showFeedback("MFA enabled successfully.", "success");
+            await refreshMfaStatus();
         }
-        catch (err) {
-            const msg = err instanceof Error ? err.message : "Invalid TOTP code";
-            setMfaSetupError(msg);
-        }
-        finally {
-            setMfaSetupLoading(false);
-        }
-    }, [verifySetupMfa, mfaSetupCode, refreshMfaStatus, showFeedback]);
+    }, [verifyCode, mfaSetupCode, showFeedback, refreshMfaStatus]);
     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");
+        const ok = await verifyRecoveryCode(mfaRecoveryCode);
+        if (ok) {
             setMfaRecoveryCode("");
         }
-        catch (err) {
-            const msg = err instanceof Error ? err.message : "Invalid recovery code";
-            setMfaSetupError(msg);
-        }
-        finally {
-            setMfaSetupLoading(false);
-        }
-    }, [verifyMfa, mfaRecoveryCode]);
+    }, [verifyRecoveryCode, mfaRecoveryCode]);
     const handleCopyMfaSecret = useCallback(() => {
         if (!mfaSecret)
             return;
@@ -518,7 +485,7 @@ export function ManageWalletModal({ ...props }) {
             await fetchLinkedProfilesData();
         }
         catch (err) {
-            showFeedback(err instanceof Error ? err.message : "Failed to disconnect", "error");
+            showFeedback(err instanceof Error ? normalizeErrorMessage(err.message) : "Failed to disconnect", "error");
         }
         finally {
             setActionProvider(null);
@@ -539,8 +506,23 @@ export function ManageWalletModal({ ...props }) {
         return () => clearInterval(id);
     }, [emailLinkStep, emailLinkResendCooldown]);
     useEffect(() => {
-        if (!isOpen || isExternalWalletConnected)
+        if (!isOpen || isExternalWalletConnected) {
+            hasFetchedLinkedProfilesForOpenRef.current = false;
+            return;
+        }
+        if (hasFetchedLinkedProfilesForOpenRef.current)
+            return;
+        hasFetchedLinkedProfilesForOpenRef.current = true;
+        fetchLinkedProfilesData();
+    }, [isOpen, isExternalWalletConnected, fetchLinkedProfilesData]);
+    useEffect(() => {
+        if (!isOpen || isExternalWalletConnected) {
+            hasFetchedMfaForOpenRef.current = false;
+            return;
+        }
+        if (hasFetchedMfaForOpenRef.current)
             return;
+        hasFetchedMfaForOpenRef.current = true;
         refreshMfaStatus();
     }, [isOpen, isExternalWalletConnected, refreshMfaStatus]);
     useEffect(() => {
@@ -556,10 +538,9 @@ export function ManageWalletModal({ ...props }) {
                 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");
+                                        goToSetup();
                                         setMfaSetupCode("");
                                         setMfaRecoveryCode("");
-                                        setMfaSetupError(null);
                                         return;
                                     }
                                     setShowMfaSetupModal(false);
@@ -569,10 +550,9 @@ export function ManageWalletModal({ ...props }) {
                                                     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");
+                                        goToVerify();
                                         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) {
@@ -608,8 +588,7 @@ export function ManageWalletModal({ ...props }) {
                                                     }
                                                 }
                                             }, 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);
+                                                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) => {
                                         const val = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 8);
@@ -619,13 +598,13 @@ export function ManageWalletModal({ ...props }) {
     if (showMfaBackupModal) {
         return (_jsx("div", { className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: () => {
                 setShowMfaBackupModal(false);
-                setMfaBackupCodes([]);
+                reset();
             }, 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([]);
+                                    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: () => {
                                     setShowMfaBackupModal(false);
-                                    setMfaBackupCodes([]);
+                                    reset();
                                 }, children: "I've saved these codes" })] })] }) }));
     }
     if (showMfaDisableAuthModal) {
@@ -720,7 +699,7 @@ export function ManageWalletModal({ ...props }) {
     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) {
+                                    if (!canEnableMfaFlow) {
                                         return;
                                     }
                                     if (mfaStatus?.enabled) {