@b3dotfun/sdk 0.1.2 → 0.1.5

package/dist/cjs/global-account/react/hooks/useTurnkeyAuth.js

@@ -1,142 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTurnkeyAuth = useTurnkeyAuth;
-const debug_1 = require("../../../shared/utils/debug");
-const react_1 = require("react");
-const app_1 = __importDefault(require("../../app"));
-const components_1 = require("../components");
-const stores_1 = require("../stores");
-const useAuth_1 = require("./useAuth");
-const debug = (0, debug_1.debugB3React)("useTurnkeyAuth");
-/**
- * Hook for Turnkey email-based OTP authentication
- *
- * Usage:
- * 1. Call initiateLogin(email) → User receives OTP email
- * 2. Call verifyOtp(...) → Verifies OTP and authenticates with b3-api
- * 3. User is authenticated, JWT stored in cookies automatically
- */
-function useTurnkeyAuth() {
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)(null);
-    const setIsAuthenticating = (0, stores_1.useAuthStore)(state => state.setIsAuthenticating);
-    const setIsAuthenticated = (0, stores_1.useAuthStore)(state => state.setIsAuthenticated);
-    const { partnerId } = (0, components_1.useB3Config)();
-    const { authenticate } = (0, useAuth_1.useAuth)();
-    /**
-     * Step 1: Initiate login with email
-     * - Calls backend turnkey-jwt strategy (init action) to create sub-org (if needed) and send OTP
-     * - Returns otpId to use in verification step
-     *
-     * Note: Uses the turnkey-jwt authentication strategy, not the service directly.
-     * The turnkey-jwt strategy handles both OTP flow (init/verify) and final authentication.
-     */
-    const initiateLogin = (0, react_1.useCallback)(async (email) => {
-        setIsLoading(true);
-        setError(null);
-        setIsAuthenticating(true);
-        try {
-            debug(`Initiating login for: ${email}`);
-            // Use authentication service with turnkey-jwt strategy (init action)
-            // userId is resolved from authentication context on the backend (params.user.userId)
-            // Backend will get userId from _params.user?.userId if authenticated, or handle unauthenticated case
-            // So we only need to send email
-            debug(`Calling app.authenticate with turnkey-jwt strategy (init action)`, { email });
-            const response = await app_1.default.authenticate({
-                strategy: "turnkey-jwt",
-                action: "init",
-                email,
-            });
-            // The strategy returns the TurnkeyAuthInitResponse directly
-            const data = response;
-            debug(`OTP initialized successfully. OtpId: ${data.otpId}`);
-            return data;
-        }
-        catch (err) {
-            debug("Error initiating login:", err);
-            // Provide more detailed error information
-            let errorMessage = "Failed to send OTP email. Please try again.";
-            if (err.message) {
-                errorMessage = err.message;
-            }
-            else if (err.name === "TypeError" && err.message?.includes("fetch")) {
-                errorMessage = "Network error: Unable to reach the server. Please check your connection and try again.";
-            }
-            else if (err.code === "ECONNREFUSED" || err.code === "ENOTFOUND") {
-                errorMessage = "Connection error: Unable to reach the server. Please check your internet connection.";
-            }
-            else if (err.response) {
-                // FeathersJS error response
-                errorMessage = err.response.message || err.message || errorMessage;
-                debug("FeathersJS error response:", err.response);
-            }
-            setError(errorMessage);
-            throw err;
-        }
-        finally {
-            setIsLoading(false);
-            setIsAuthenticating(false);
-        }
-    }, [setIsAuthenticating]);
-    /**
-     * Step 2: Verify OTP and authenticate
-     * - Verifies OTP with backend via turnkey-jwt strategy (verify action)
-     * - Gets Turnkey session JWT from the verify response
-     * - Authenticates with b3-api using "turnkey-jwt" strategy
-     * - JWT automatically stored in cookies by SDK
-     */
-    const verifyOtp = (0, react_1.useCallback)(async (otpId, otpCode) => {
-        setIsLoading(true);
-        setError(null);
-        setIsAuthenticating(true);
-        try {
-            debug(`Verifying OTP...`, { otpId });
-            // Step 1: Verify OTP with backend using turnkey-jwt strategy (verify action)
-            // This returns the Turnkey session JWT
-            const response = await app_1.default.authenticate({
-                strategy: "turnkey-jwt",
-                action: "verify",
-                otpId,
-                otpCode,
-            });
-            // The strategy returns the TurnkeyAuthVerifyResponse directly
-            const verifyResult = response;
-            const { turnkeySessionJwt } = verifyResult;
-            debug(`OTP verified! Got Turnkey session JWT. Authenticating with b3-api...`);
-            // Step 2: Authenticate with b3-api using Turnkey JWT
-            // Use the unified useAuth hook for authentication with "turnkey-jwt" strategy
-            const authResult = await authenticate(turnkeySessionJwt, partnerId || "");
-            debug(`Successfully authenticated with b3-api!`, authResult);
-            // Update auth store to reflect authenticated state
-            setIsAuthenticated(true);
-            // Return user data
-            return {
-                user: authResult.user,
-            };
-        }
-        catch (err) {
-            debug("Error verifying OTP:", err);
-            const errorMessage = err.message || "Failed to verify OTP. Please try again.";
-            setError(errorMessage);
-            setIsAuthenticated(false);
-            throw err;
-        }
-        finally {
-            setIsLoading(false);
-            setIsAuthenticating(false);
-        }
-    }, [partnerId, setIsAuthenticating, setIsAuthenticated, authenticate]);
-    const clearError = (0, react_1.useCallback)(() => {
-        setError(null);
-    }, []);
-    return {
-        initiateLogin,
-        verifyOtp,
-        isLoading,
-        error,
-        clearError,
-    };
-}

package/dist/esm/global-account/react/components/TurnkeyAuthModal.d.ts

@@ -1,8 +0,0 @@
-interface TurnkeyAuthModalProps {
-    onClose: () => void;
-    onSuccess: (_user: any) => void;
-    initialEmail?: string;
-    skipToOtp?: boolean;
-}
-export declare function TurnkeyAuthModal({ onClose, onSuccess, initialEmail, skipToOtp }: TurnkeyAuthModalProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/esm/global-account/react/components/TurnkeyAuthModal.js

@@ -1,83 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { useTurnkeyAuth } from "../hooks/useTurnkeyAuth.js";
-export function TurnkeyAuthModal({ onClose, onSuccess, initialEmail = "", skipToOtp = false }) {
-    const [step, setStep] = useState(skipToOtp ? "otp" : "email");
-    const [email, setEmail] = useState(initialEmail);
-    const [otpCode, setOtpCode] = useState("");
-    const [otpId, setOtpId] = useState("");
-    const autoSubmitTriggeredRef = useRef(false);
-    const { initiateLogin, verifyOtp, isLoading, error, clearError } = useTurnkeyAuth();
-    // Update email when initialEmail changes
-    useEffect(() => {
-        if (initialEmail && initialEmail !== email) {
-            setEmail(initialEmail);
-        }
-    }, [initialEmail, email]);
-    // Auto-submit email form if skipToOtp is true - triggers on mount when skipToOtp=true
-    useEffect(() => {
-        if (skipToOtp && email && step === "otp" && !otpId && !isLoading && !autoSubmitTriggeredRef.current) {
-            autoSubmitTriggeredRef.current = true;
-            // Call initiateLogin directly to get OTP
-            initiateLogin(email)
-                .then(result => {
-                setOtpId(result.otpId);
-            })
-                .catch(err => {
-                console.error("Failed to initiate login:", err);
-            });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [skipToOtp, email, step, otpId, isLoading]);
-    const handleEmailSubmit = async (e) => {
-        e.preventDefault();
-        try {
-            const result = await initiateLogin(email);
-            setOtpId(result.otpId);
-            setStep("otp");
-        }
-        catch (err) {
-            // Error is handled by the hook
-            console.error("Failed to initiate login:", err);
-        }
-    };
-    const handleOtpSubmit = async (e) => {
-        e.preventDefault();
-        try {
-            const result = await verifyOtp(otpId, otpCode);
-            setStep("success");
-            // Auto-close after success and notify parent
-            setTimeout(() => {
-                onSuccess(result.user);
-                handleClose();
-            }, 1500);
-        }
-        catch (err) {
-            // Error is handled by the hook
-            console.error("Failed to verify OTP:", err);
-        }
-    };
-    const handleClose = () => {
-        // Reset state
-        setStep("email");
-        setEmail("");
-        setOtpCode("");
-        setOtpId("");
-        autoSubmitTriggeredRef.current = false;
-        clearError();
-        onClose();
-    };
-    const handleResendOtp = async () => {
-        try {
-            const result = await initiateLogin(email);
-            setOtpId(result.otpId);
-            clearError();
-        }
-        catch (err) {
-            console.error("Failed to resend OTP:", err);
-        }
-    };
-    const isTurnkeyPrimary = process.env.NEXT_PUBLIC_TURNKEY_PRIMARY === "true";
-    const walletBrand = isTurnkeyPrimary ? "Smart Wallet" : "AnySpend Wallet";
-    return (_jsxs("div", { className: "font-neue-montreal p-8", children: [step === "email" && (_jsxs(_Fragment, { children: [_jsxs("h2", { className: "mb-6 text-center text-2xl font-bold text-gray-900 dark:text-white", children: ["Setup your ", walletBrand] }), _jsxs("div", { className: "mb-6 space-y-3 text-center text-sm text-gray-600 dark:text-gray-400", children: [_jsxs("p", { children: [isTurnkeyPrimary ? "We use a secure," : "AnySpend uses a secure,", _jsx("br", {}), "embedded wallet to fund your workflows."] }), _jsxs("p", { children: ["Please provide an email address to secure", _jsx("br", {}), "your wallet."] })] }), _jsxs("form", { onSubmit: handleEmailSubmit, className: "space-y-4", children: [_jsx("div", { children: _jsx("input", { type: "email", placeholder: "email", value: email, onChange: e => setEmail(e.target.value), required: true, disabled: isLoading, className: "w-full rounded-lg border border-gray-300 px-4 py-3 text-center text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500" }) }), error && (_jsx("div", { className: "rounded-md bg-red-50 p-3 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-400", children: error })), _jsx("button", { type: "submit", disabled: isLoading || !email, className: "w-full rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white transition-all duration-200 hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-300 dark:disabled:bg-gray-700", children: isLoading ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" }), "Sending..."] })) : ("Continue") })] })] })), step === "otp" && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mb-4 text-center text-2xl font-bold text-gray-900 dark:text-white", children: "2FA Security" }), _jsx("div", { className: "mb-6 space-y-3 text-center text-sm text-gray-600 dark:text-gray-400", children: _jsxs("p", { children: [isTurnkeyPrimary ? "We use a secure," : "AnySpend uses a secure,", _jsx("br", {}), "embedded wallet to fund your workflows.", _jsx("br", {}), "Please provide 2FA code sent to your email."] }) }), _jsxs("form", { onSubmit: handleOtpSubmit, className: "space-y-4", children: [_jsx("div", { children: _jsx("input", { type: "text", placeholder: "Enter code", value: otpCode, onChange: e => setOtpCode(e.target.value.toUpperCase()), required: true, disabled: isLoading, autoFocus: true, className: "w-full rounded-lg border border-gray-300 px-4 py-3 text-center font-mono text-lg uppercase tracking-wider text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500", maxLength: 20 }) }), error && (_jsx("div", { className: "rounded-md bg-red-50 p-3 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-400", children: error })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("button", { type: "submit", disabled: isLoading || !otpCode, className: "w-full rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white transition-all duration-200 hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-300 dark:disabled:bg-gray-700", children: isLoading ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" }), "Verifying..."] })) : ("Confirm") }), _jsx("button", { type: "button", onClick: handleResendOtp, disabled: isLoading, className: "text-sm text-blue-600 hover:text-blue-700 hover:underline disabled:cursor-not-allowed disabled:text-gray-400 dark:text-blue-400 dark:hover:text-blue-300", children: "Resend code" })] })] })] })), step === "success" && (_jsxs("div", { className: "text-center", children: [_jsx("div", { className: "mb-6 flex items-center justify-center", children: _jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/20", children: _jsx("svg", { className: "h-8 w-8 text-green-600 dark:text-green-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }) }), _jsx("h2", { className: "mb-2 text-2xl font-bold text-gray-900 dark:text-white", children: "Successfully Authenticated!" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Redirecting..." })] }))] }));
-}

package/dist/esm/global-account/react/hooks/useTurnkeyAuth.d.ts

@@ -1,20 +0,0 @@
-import { TurnkeyAuthInitResponse } from "@b3dotfun/b3-api";
-interface UseTurnkeyAuthReturn {
-    initiateLogin: (_email: string) => Promise<TurnkeyAuthInitResponse>;
-    verifyOtp: (_otpId: string, _otpCode: string) => Promise<{
-        user: any;
-    }>;
-    isLoading: boolean;
-    error: string | null;
-    clearError: () => void;
-}
-/**
- * Hook for Turnkey email-based OTP authentication
- *
- * Usage:
- * 1. Call initiateLogin(email) → User receives OTP email
- * 2. Call verifyOtp(...) → Verifies OTP and authenticates with b3-api
- * 3. User is authenticated, JWT stored in cookies automatically
- */
-export declare function useTurnkeyAuth(): UseTurnkeyAuthReturn;
-export {};

package/dist/esm/global-account/react/hooks/useTurnkeyAuth.js

@@ -1,136 +0,0 @@
-import { debugB3React } from "../../../shared/utils/debug.js";
-import { useCallback, useState } from "react";
-import app from "../../app.js";
-import { useB3Config } from "../components/index.js";
-import { useAuthStore } from "../stores/index.js";
-import { useAuth } from "./useAuth.js";
-const debug = debugB3React("useTurnkeyAuth");
-/**
- * Hook for Turnkey email-based OTP authentication
- *
- * Usage:
- * 1. Call initiateLogin(email) → User receives OTP email
- * 2. Call verifyOtp(...) → Verifies OTP and authenticates with b3-api
- * 3. User is authenticated, JWT stored in cookies automatically
- */
-export function useTurnkeyAuth() {
-    const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
-    const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
-    const { partnerId } = useB3Config();
-    const { authenticate } = useAuth();
-    /**
-     * Step 1: Initiate login with email
-     * - Calls backend turnkey-jwt strategy (init action) to create sub-org (if needed) and send OTP
-     * - Returns otpId to use in verification step
-     *
-     * Note: Uses the turnkey-jwt authentication strategy, not the service directly.
-     * The turnkey-jwt strategy handles both OTP flow (init/verify) and final authentication.
-     */
-    const initiateLogin = useCallback(async (email) => {
-        setIsLoading(true);
-        setError(null);
-        setIsAuthenticating(true);
-        try {
-            debug(`Initiating login for: ${email}`);
-            // Use authentication service with turnkey-jwt strategy (init action)
-            // userId is resolved from authentication context on the backend (params.user.userId)
-            // Backend will get userId from _params.user?.userId if authenticated, or handle unauthenticated case
-            // So we only need to send email
-            debug(`Calling app.authenticate with turnkey-jwt strategy (init action)`, { email });
-            const response = await app.authenticate({
-                strategy: "turnkey-jwt",
-                action: "init",
-                email,
-            });
-            // The strategy returns the TurnkeyAuthInitResponse directly
-            const data = response;
-            debug(`OTP initialized successfully. OtpId: ${data.otpId}`);
-            return data;
-        }
-        catch (err) {
-            debug("Error initiating login:", err);
-            // Provide more detailed error information
-            let errorMessage = "Failed to send OTP email. Please try again.";
-            if (err.message) {
-                errorMessage = err.message;
-            }
-            else if (err.name === "TypeError" && err.message?.includes("fetch")) {
-                errorMessage = "Network error: Unable to reach the server. Please check your connection and try again.";
-            }
-            else if (err.code === "ECONNREFUSED" || err.code === "ENOTFOUND") {
-                errorMessage = "Connection error: Unable to reach the server. Please check your internet connection.";
-            }
-            else if (err.response) {
-                // FeathersJS error response
-                errorMessage = err.response.message || err.message || errorMessage;
-                debug("FeathersJS error response:", err.response);
-            }
-            setError(errorMessage);
-            throw err;
-        }
-        finally {
-            setIsLoading(false);
-            setIsAuthenticating(false);
-        }
-    }, [setIsAuthenticating]);
-    /**
-     * Step 2: Verify OTP and authenticate
-     * - Verifies OTP with backend via turnkey-jwt strategy (verify action)
-     * - Gets Turnkey session JWT from the verify response
-     * - Authenticates with b3-api using "turnkey-jwt" strategy
-     * - JWT automatically stored in cookies by SDK
-     */
-    const verifyOtp = useCallback(async (otpId, otpCode) => {
-        setIsLoading(true);
-        setError(null);
-        setIsAuthenticating(true);
-        try {
-            debug(`Verifying OTP...`, { otpId });
-            // Step 1: Verify OTP with backend using turnkey-jwt strategy (verify action)
-            // This returns the Turnkey session JWT
-            const response = await app.authenticate({
-                strategy: "turnkey-jwt",
-                action: "verify",
-                otpId,
-                otpCode,
-            });
-            // The strategy returns the TurnkeyAuthVerifyResponse directly
-            const verifyResult = response;
-            const { turnkeySessionJwt } = verifyResult;
-            debug(`OTP verified! Got Turnkey session JWT. Authenticating with b3-api...`);
-            // Step 2: Authenticate with b3-api using Turnkey JWT
-            // Use the unified useAuth hook for authentication with "turnkey-jwt" strategy
-            const authResult = await authenticate(turnkeySessionJwt, partnerId || "");
-            debug(`Successfully authenticated with b3-api!`, authResult);
-            // Update auth store to reflect authenticated state
-            setIsAuthenticated(true);
-            // Return user data
-            return {
-                user: authResult.user,
-            };
-        }
-        catch (err) {
-            debug("Error verifying OTP:", err);
-            const errorMessage = err.message || "Failed to verify OTP. Please try again.";
-            setError(errorMessage);
-            setIsAuthenticated(false);
-            throw err;
-        }
-        finally {
-            setIsLoading(false);
-            setIsAuthenticating(false);
-        }
-    }, [partnerId, setIsAuthenticating, setIsAuthenticated, authenticate]);
-    const clearError = useCallback(() => {
-        setError(null);
-    }, []);
-    return {
-        initiateLogin,
-        verifyOtp,
-        isLoading,
-        error,
-        clearError,
-    };
-}

package/dist/types/global-account/react/components/TurnkeyAuthModal.d.ts

@@ -1,8 +0,0 @@
-interface TurnkeyAuthModalProps {
-    onClose: () => void;
-    onSuccess: (_user: any) => void;
-    initialEmail?: string;
-    skipToOtp?: boolean;
-}
-export declare function TurnkeyAuthModal({ onClose, onSuccess, initialEmail, skipToOtp }: TurnkeyAuthModalProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/global-account/react/hooks/useTurnkeyAuth.d.ts

@@ -1,20 +0,0 @@
-import { TurnkeyAuthInitResponse } from "@b3dotfun/b3-api";
-interface UseTurnkeyAuthReturn {
-    initiateLogin: (_email: string) => Promise<TurnkeyAuthInitResponse>;
-    verifyOtp: (_otpId: string, _otpCode: string) => Promise<{
-        user: any;
-    }>;
-    isLoading: boolean;
-    error: string | null;
-    clearError: () => void;
-}
-/**
- * Hook for Turnkey email-based OTP authentication
- *
- * Usage:
- * 1. Call initiateLogin(email) → User receives OTP email
- * 2. Call verifyOtp(...) → Verifies OTP and authenticates with b3-api
- * 3. User is authenticated, JWT stored in cookies automatically
- */
-export declare function useTurnkeyAuth(): UseTurnkeyAuthReturn;
-export {};

package/src/global-account/react/components/TurnkeyAuthModal.tsx

@@ -1,243 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { useTurnkeyAuth } from "../hooks/useTurnkeyAuth";
-
-type ModalStep = "email" | "otp" | "success";
-
-interface TurnkeyAuthModalProps {
-  onClose: () => void;
-  onSuccess: (_user: any) => void;
-  initialEmail?: string;
-  skipToOtp?: boolean;
-}
-
-export function TurnkeyAuthModal({ onClose, onSuccess, initialEmail = "", skipToOtp = false }: TurnkeyAuthModalProps) {
-  const [step, setStep] = useState<ModalStep>(skipToOtp ? "otp" : "email");
-  const [email, setEmail] = useState(initialEmail);
-  const [otpCode, setOtpCode] = useState("");
-  const [otpId, setOtpId] = useState("");
-  const autoSubmitTriggeredRef = useRef(false);
-
-  const { initiateLogin, verifyOtp, isLoading, error, clearError } = useTurnkeyAuth();
-
-  // Update email when initialEmail changes
-  useEffect(() => {
-    if (initialEmail && initialEmail !== email) {
-      setEmail(initialEmail);
-    }
-  }, [initialEmail, email]);
-
-  // Auto-submit email form if skipToOtp is true - triggers on mount when skipToOtp=true
-  useEffect(() => {
-    if (skipToOtp && email && step === "otp" && !otpId && !isLoading && !autoSubmitTriggeredRef.current) {
-      autoSubmitTriggeredRef.current = true;
-      // Call initiateLogin directly to get OTP
-      initiateLogin(email)
-        .then(result => {
-          setOtpId(result.otpId);
-        })
-        .catch(err => {
-          console.error("Failed to initiate login:", err);
-        });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [skipToOtp, email, step, otpId, isLoading]);
-
-  const handleEmailSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    try {
-      const result = await initiateLogin(email);
-      setOtpId(result.otpId);
-      setStep("otp");
-    } catch (err) {
-      // Error is handled by the hook
-      console.error("Failed to initiate login:", err);
-    }
-  };
-
-  const handleOtpSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    try {
-      const result = await verifyOtp(otpId, otpCode);
-      setStep("success");
-
-      // Auto-close after success and notify parent
-      setTimeout(() => {
-        onSuccess(result.user);
-        handleClose();
-      }, 1500);
-    } catch (err) {
-      // Error is handled by the hook
-      console.error("Failed to verify OTP:", err);
-    }
-  };
-
-  const handleClose = () => {
-    // Reset state
-    setStep("email");
-    setEmail("");
-    setOtpCode("");
-    setOtpId("");
-    autoSubmitTriggeredRef.current = false;
-    clearError();
-    onClose();
-  };
-
-  const handleResendOtp = async () => {
-    try {
-      const result = await initiateLogin(email);
-      setOtpId(result.otpId);
-      clearError();
-    } catch (err) {
-      console.error("Failed to resend OTP:", err);
-    }
-  };
-
-  const isTurnkeyPrimary = process.env.NEXT_PUBLIC_TURNKEY_PRIMARY === "true";
-  const walletBrand = isTurnkeyPrimary ? "Smart Wallet" : "AnySpend Wallet";
-
-  return (
-    <div className="font-neue-montreal p-8">
-      {/* Email Step */}
-      {step === "email" && (
-        <>
-          <h2 className="mb-6 text-center text-2xl font-bold text-gray-900 dark:text-white">
-            Setup your {walletBrand}
-          </h2>
-          <div className="mb-6 space-y-3 text-center text-sm text-gray-600 dark:text-gray-400">
-            <p>
-              {isTurnkeyPrimary ? "We use a secure," : "AnySpend uses a secure,"}
-              <br />
-              embedded wallet to fund your workflows.
-            </p>
-            <p>
-              Please provide an email address to secure
-              <br />
-              your wallet.
-            </p>
-          </div>
-
-          <form onSubmit={handleEmailSubmit} className="space-y-4">
-            <div>
-              <input
-                type="email"
-                placeholder="email"
-                value={email}
-                onChange={e => setEmail(e.target.value)}
-                required
-                disabled={isLoading}
-                className="w-full rounded-lg border border-gray-300 px-4 py-3 text-center text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500"
-              />
-            </div>
-
-            {error && (
-              <div className="rounded-md bg-red-50 p-3 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-400">
-                {error}
-              </div>
-            )}
-
-            <button
-              type="submit"
-              disabled={isLoading || !email}
-              className="w-full rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white transition-all duration-200 hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-300 dark:disabled:bg-gray-700"
-            >
-              {isLoading ? (
-                <span className="flex items-center justify-center gap-2">
-                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
-                  Sending...
-                </span>
-              ) : (
-                "Continue"
-              )}
-            </button>
-          </form>
-        </>
-      )}
-
-      {/* OTP Step */}
-      {step === "otp" && (
-        <>
-          <h2 className="mb-4 text-center text-2xl font-bold text-gray-900 dark:text-white">2FA Security</h2>
-          <div className="mb-6 space-y-3 text-center text-sm text-gray-600 dark:text-gray-400">
-            <p>
-              {isTurnkeyPrimary ? "We use a secure," : "AnySpend uses a secure,"}
-              <br />
-              embedded wallet to fund your workflows.
-              <br />
-              Please provide 2FA code sent to your email.
-            </p>
-          </div>
-
-          <form onSubmit={handleOtpSubmit} className="space-y-4">
-            <div>
-              <input
-                type="text"
-                placeholder="Enter code"
-                value={otpCode}
-                onChange={e => setOtpCode(e.target.value.toUpperCase())}
-                required
-                disabled={isLoading}
-                autoFocus
-                className="w-full rounded-lg border border-gray-300 px-4 py-3 text-center font-mono text-lg uppercase tracking-wider text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500"
-                maxLength={20}
-              />
-            </div>
-
-            {error && (
-              <div className="rounded-md bg-red-50 p-3 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-400">
-                {error}
-              </div>
-            )}
-
-            <div className="flex flex-col gap-2">
-              <button
-                type="submit"
-                disabled={isLoading || !otpCode}
-                className="w-full rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white transition-all duration-200 hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-300 dark:disabled:bg-gray-700"
-              >
-                {isLoading ? (
-                  <span className="flex items-center justify-center gap-2">
-                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
-                    Verifying...
-                  </span>
-                ) : (
-                  "Confirm"
-                )}
-              </button>
-
-              <button
-                type="button"
-                onClick={handleResendOtp}
-                disabled={isLoading}
-                className="text-sm text-blue-600 hover:text-blue-700 hover:underline disabled:cursor-not-allowed disabled:text-gray-400 dark:text-blue-400 dark:hover:text-blue-300"
-              >
-                Resend code
-              </button>
-            </div>
-          </form>
-        </>
-      )}
-
-      {/* Success Step */}
-      {step === "success" && (
-        <div className="text-center">
-          <div className="mb-6 flex items-center justify-center">
-            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/20">
-              <svg
-                className="h-8 w-8 text-green-600 dark:text-green-400"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-              </svg>
-            </div>
-          </div>
-          <h2 className="mb-2 text-2xl font-bold text-gray-900 dark:text-white">Successfully Authenticated!</h2>
-          <p className="text-sm text-gray-600 dark:text-gray-400">Redirecting...</p>
-        </div>
-      )}
-    </div>
-  );
-}