@b3dotfun/sdk 0.0.77 → 0.0.78-alpha.1

package/dist/cjs/anyspend/react/components/common/PanelOnramp.js

@@ -82,7 +82,7 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
                             .filter(v => !isNaN(Number(v)))
                             .map(value => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleQuickAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmountOnRamp === value
                                 ? "border-as-border-secondary bg-as-surface-secondary"
-                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && ((0, jsx_runtime_1.jsx)(OrderTokenAmountFiat_1.OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.formatAddress)(_recipientAddress) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? chain_1.ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: chain_1.ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Total" }), anyspendQuote?.data?.fee && onShowFeeDetail && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) })), featureFlags.showPoints &&
+                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && ((0, jsx_runtime_1.jsx)(OrderTokenAmountFiat_1.OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.formatAddress)(_recipientAddress) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-1", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? chain_1.ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: chain_1.ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Total" }), anyspendQuote?.data?.fee && onShowFeeDetail && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) })), featureFlags.showPoints &&
                                             anyspendQuote?.data?.pointsAmount &&
                                             anyspendQuote?.data?.pointsAmount > 0 && ((0, jsx_runtime_1.jsx)(PointsBadge_1.PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE).toFixed(2)] }), (() => {
                                             // For fiat payments, show the fee from the payment method

package/dist/cjs/global-account/react/components/B3DynamicModal.js

@@ -7,6 +7,7 @@ exports.B3DynamicModal = B3DynamicModal;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../anyspend/react");
 const AnyspendDepositHype_1 = require("../../../anyspend/react/components/AnyspendDepositHype");
+const AnySpendDepositUpside_1 = require("../../../anyspend/react/components/AnySpendDepositUpside");
 const AnySpendStakeUpside_1 = require("../../../anyspend/react/components/AnySpendStakeUpside");
 const AnySpendStakeUpsideExactIn_1 = require("../../../anyspend/react/components/AnySpendStakeUpsideExactIn");
 const react_2 = require("../../../global-account/react");
@@ -25,10 +26,10 @@ const NotificationsContent_1 = __importDefault(require("./ManageAccount/Notifica
 const RequestPermissions_1 = require("./RequestPermissions/RequestPermissions");
 const Send_1 = require("./Send/Send");
 const SignInWithB3Flow_1 = require("./SignInWithB3/SignInWithB3Flow");
+const TurnkeyAuthModal_1 = require("./TurnkeyAuthModal");
 const index_1 = require("./Toast/index");
 const dialog_1 = require("./ui/dialog");
 const drawer_1 = require("./ui/drawer");
-const AnySpendDepositUpside_1 = require("../../../anyspend/react/components/AnySpendDepositUpside");
 const debug = (0, debug_1.debugB3React)("B3DynamicModal");
 function B3DynamicModal() {
     const isOpen = (0, react_2.useModalStore)(state => state.isOpen);
@@ -63,6 +64,7 @@ function B3DynamicModal() {
         "anySpendBuySpin",
         "anySpendOrderHistory",
         "signInWithB3",
+        "turnkeyAuth",
         "anySpendSignatureMint",
         "anySpendBondKit",
         "linkAccount",
@@ -86,10 +88,12 @@ function B3DynamicModal() {
     ];
     // Check if current content type is in freestyle types
     const isFreestyleType = freestyleTypes.includes(contentType?.type);
+    // Determine if modal should be closable - defaults to true unless explicitly set to false
+    const isClosable = contentType?.closable !== false;
     const hideCloseButton = true;
     // Build content class using cn utility
     // eslint-disable-next-line tailwindcss/no-custom-classname
-    const contentClass = (0, cn_1.cn)("b3-modal", theme === "dark" && "dark", fullWidthTypes.includes(contentType?.type) && "w-full", isFreestyleType && "b3-modal-freestyle", contentType?.type === "signInWithB3" && "p-0", contentType?.type === "anySpend" && "md:p-0", contentType?.type === "send" && "p-0", contentType?.type === "manageAccount" && " md:p-0 md:pt-2", contentType?.type === "linkAccount" && "md:p-0");
+    const contentClass = (0, cn_1.cn)("b3-modal", theme === "dark" && "dark", fullWidthTypes.includes(contentType?.type) && "w-full", isFreestyleType && "b3-modal-freestyle", contentType?.type === "signInWithB3" && "p-0", contentType?.type === "turnkeyAuth" && "p-0", contentType?.type === "anySpend" && "md:p-0", contentType?.type === "send" && "p-0", contentType?.type === "manageAccount" && " md:p-0 md:pt-2", contentType?.type === "linkAccount" && "md:p-0");
     debug("contentType", contentType);
     const renderContent = () => {
         if (!contentType)
@@ -97,6 +101,8 @@ function B3DynamicModal() {
         switch (contentType.type) {
             case "signInWithB3":
                 return (0, jsx_runtime_1.jsx)(SignInWithB3Flow_1.SignInWithB3Flow, { ...contentType });
+            case "turnkeyAuth":
+                return (0, jsx_runtime_1.jsx)(TurnkeyAuthModal_1.TurnkeyAuthModal, { ...contentType });
             case "requestPermissions":
                 return (0, jsx_runtime_1.jsx)(RequestPermissions_1.RequestPermissions, { ...contentType });
             case "manageAccount":
@@ -154,12 +160,20 @@ function B3DynamicModal() {
     const ModalContent = isMobile ? drawer_1.DrawerContent : dialog_1.DialogContent;
     const ModalTitle = isMobile ? drawer_1.DrawerTitle : dialog_1.DialogTitle;
     const ModalDescription = isMobile ? drawer_1.DrawerDescription : dialog_1.DialogDescription;
-    return ((0, jsx_runtime_1.jsxs)(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: [(0, jsx_runtime_1.jsxs)(ModalContent, { className: (0, cn_1.cn)(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", (contentType?.type === "manageAccount" ||
+    // Create a wrapper for onOpenChange that respects closable property
+    const handleOpenChange = (open) => {
+        // Only allow closing if the modal is closable
+        if (!open && !isClosable) {
+            return;
+        }
+        setB3ModalOpen(open);
+    };
+    return ((0, jsx_runtime_1.jsxs)(ModalComponent, { open: isOpen, onOpenChange: handleOpenChange, children: [(0, jsx_runtime_1.jsxs)(ModalContent, { className: (0, cn_1.cn)(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", (contentType?.type === "manageAccount" ||
                     contentType?.type === "deposit" ||
                     contentType?.type === "send" ||
                     contentType?.type === "avatarEditor" ||
                     contentType?.type === "notifications") &&
-                    "p-0", "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("no-scrollbar flex max-h-[90dvh] flex-col overflow-auto sm:max-h-[80dvh]"), children: [!hideCloseButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("span", { className: "font-inter text-sm font-semibold", children: "Back" })] })), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: renderContent() }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: toasts.length > 0 && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { height: 0 }, animate: { height: "auto" }, exit: { height: 0 }, transition: { duration: 0.3, ease: "easeInOut" }, className: "toast-section relative z-10 overflow-hidden bg-white dark:border-gray-800 dark:bg-gray-900", children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2, delay: 0.1 }, className: "p-4 pt-0", children: (0, jsx_runtime_1.jsx)(index_1.ToastContainer, { toasts: toasts, onDismiss: removeToast, theme: theme }) }) })) })] })] }), isOpen && ((0, jsx_runtime_1.jsx)("style", { children: `
+                    "p-0", "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, onEscapeKeyDown: !isClosable ? e => e.preventDefault() : undefined, onPointerDownOutside: !isClosable ? e => e.preventDefault() : undefined, onInteractOutside: !isClosable ? e => e.preventDefault() : undefined, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("b3-modal-content no-scrollbar dark:bg-b3-background flex max-h-[90dvh] flex-col overflow-auto sm:max-h-[80dvh]"), children: [!hideCloseButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("span", { className: "font-inter text-sm font-semibold", children: "Back" })] })), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: renderContent() }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: toasts.length > 0 && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { height: 0 }, animate: { height: "auto" }, exit: { height: 0 }, transition: { duration: 0.3, ease: "easeInOut" }, className: "toast-section relative z-10 overflow-hidden bg-white dark:border-gray-800 dark:bg-gray-900", children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2, delay: 0.1 }, className: "p-4 pt-0", children: (0, jsx_runtime_1.jsx)(index_1.ToastContainer, { toasts: toasts, onDismiss: removeToast, theme: theme }) }) })) })] })] }), isOpen && ((0, jsx_runtime_1.jsx)("style", { children: `
           .modal-inner-content {
             transition: margin-bottom 0.3s ease-in-out;
             margin-bottom: ${toasts.length > 0 ? "0px" : "23px"} !important;

package/dist/cjs/global-account/react/components/B3Provider/B3Provider.d.ts

@@ -9,7 +9,7 @@ import { B3ContextType } from "./types";
 /**
  * Main B3Provider component
  */
-export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster: _toaster, clientType, rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors, createClientReferenceId, }: {
+export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster: _toaster, clientType, rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors, createClientReferenceId, enableTurnkey, }: {
     theme: "light" | "dark";
     children: React.ReactNode;
     accountOverride?: Account;
@@ -27,11 +27,12 @@ export declare function B3Provider({ theme, children, accountOverride, environme
     connectors?: CreateConnectorFn[];
     overrideDefaultConnectors?: boolean;
     createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
+    enableTurnkey?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Inner provider component that provides the actual B3Context
  */
-export declare function InnerProvider({ children, accountOverride, environment, defaultPermissions, automaticallySetFirstEoa, theme, clientType, partnerId, createClientReferenceId, }: {
+export declare function InnerProvider({ children, accountOverride, environment, defaultPermissions, automaticallySetFirstEoa, theme, clientType, partnerId, createClientReferenceId, enableTurnkey, }: {
     children: React.ReactNode;
     accountOverride?: Account;
     environment: B3ContextType["environment"];
@@ -41,4 +42,5 @@ export declare function InnerProvider({ children, accountOverride, environment,
     clientType?: ClientType;
     partnerId: string;
     createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
+    enableTurnkey?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/global-account/react/components/B3Provider/B3Provider.js

@@ -34,7 +34,7 @@ const queryClient = new react_query_1.QueryClient();
  */
 function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, 
 // deprecated since v0.0.87
-toaster: _toaster, clientType = "rest", rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors = false, createClientReferenceId, }) {
+toaster: _toaster, clientType = "rest", rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors = false, createClientReferenceId, enableTurnkey = false, }) {
     // Initialize Google Analytics on mount
     (0, react_2.useEffect)(() => {
         (0, analytics_1.loadGA4Script)();
@@ -44,22 +44,24 @@ toaster: _toaster, clientType = "rest", rpcUrls, partnerId, onConnect, connector
         (0, client_manager_1.setClientType)(clientType);
     }, [clientType]);
     const wagmiConfig = (0, createWagmiConfig_1.createWagmiConfig)({ partnerId, rpcUrls, connectors, overrideDefaultConnectors });
-    return ((0, jsx_runtime_1.jsx)(react_3.ThirdwebProvider, { children: (0, jsx_runtime_1.jsx)(wagmi_1.WagmiProvider, { config: wagmiConfig, reconnectOnMount: false, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(react_1.TooltipProvider, { children: (0, jsx_runtime_1.jsx)(index_1.ToastProvider, { children: (0, jsx_runtime_1.jsx)(LocalSDKProvider_1.LocalSDKProvider, { onConnectCallback: onConnect, children: (0, jsx_runtime_1.jsxs)(InnerProvider, { accountOverride: accountOverride, environment: environment, theme: theme, automaticallySetFirstEoa: !!automaticallySetFirstEoa, clientType: clientType, partnerId: partnerId, createClientReferenceId: createClientReferenceId, children: [(0, jsx_runtime_1.jsx)(ToastContextConnector, {}), (0, jsx_runtime_1.jsxs)(react_1.RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, (0, jsx_runtime_1.jsx)(StyleRoot_1.StyleRoot, { id: "b3-root" })] })] }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_3.ThirdwebProvider, { children: (0, jsx_runtime_1.jsx)(wagmi_1.WagmiProvider, { config: wagmiConfig, reconnectOnMount: false, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(react_1.TooltipProvider, { children: (0, jsx_runtime_1.jsx)(index_1.ToastProvider, { children: (0, jsx_runtime_1.jsx)(LocalSDKProvider_1.LocalSDKProvider, { onConnectCallback: onConnect, children: (0, jsx_runtime_1.jsxs)(InnerProvider, { accountOverride: accountOverride, environment: environment, theme: theme, automaticallySetFirstEoa: !!automaticallySetFirstEoa, clientType: clientType, partnerId: partnerId, createClientReferenceId: createClientReferenceId, enableTurnkey: enableTurnkey, children: [(0, jsx_runtime_1.jsx)(ToastContextConnector, {}), (0, jsx_runtime_1.jsxs)(react_1.RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, (0, jsx_runtime_1.jsx)(StyleRoot_1.StyleRoot, { id: "b3-root" })] })] }) }) }) }) }) }) }));
 }
 /**
  * Inner provider component that provides the actual B3Context
  */
-function InnerProvider({ children, accountOverride, environment, defaultPermissions = DEFAULT_PERMISSIONS, automaticallySetFirstEoa, theme = "light", clientType = "socket", partnerId, createClientReferenceId, }) {
+function InnerProvider({ children, accountOverride, environment, defaultPermissions = DEFAULT_PERMISSIONS, automaticallySetFirstEoa, theme = "light", clientType = "socket", partnerId, createClientReferenceId, enableTurnkey, }) {
     const activeAccount = (0, react_3.useActiveAccount)();
     const [manuallySelectedWallet, setManuallySelectedWallet] = (0, react_2.useState)(undefined);
     const wallets = (0, react_3.useConnectedWallets)();
     const isAuthenticated = (0, react_1.useAuthStore)(state => state.isAuthenticated);
     const isConnected = (0, react_1.useAuthStore)(state => state.isConnected);
+    const justCompletedLogin = (0, react_1.useAuthStore)(state => state.justCompletedLogin);
     const setActiveWallet = (0, react_3.useSetActiveWallet)();
     const { user, setUser, refetchUser } = (0, react_1.useAuthentication)(partnerId);
     debug("@@B3Provider:isConnected", isConnected);
     debug("@@wallets", wallets);
     debug("@@B3Provider:user", user);
+    debug("@@B3Provider:justCompletedLogin", justCompletedLogin);
     // Use given accountOverride or activeAccount from thirdweb
     const effectiveAccount = isAuthenticated ? accountOverride || activeAccount : undefined;
     const setWallet = (0, react_2.useCallback)((wallet) => {
@@ -104,6 +106,7 @@ function InnerProvider({ children, accountOverride, environment, defaultPermissi
             clientType,
             partnerId: partnerId,
             createClientReferenceId,
+            enableTurnkey,
         }, children: (0, jsx_runtime_1.jsx)(InnerProvider2, { children: children }) }));
 }
 const InnerProvider2 = ({ children }) => {

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

@@ -23,6 +23,7 @@ export interface B3ContextType {
     clientType: ClientType;
     partnerId: string;
     createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
+    enableTurnkey?: boolean;
 }
 /**
  * Context for B3 provider

package/dist/cjs/global-account/react/components/B3Provider/types.js

@@ -20,4 +20,5 @@ exports.B3Context = (0, react_1.createContext)({
     clientType: "rest",
     partnerId: "",
     createClientReferenceId: undefined,
+    enableTurnkey: false,
 });

package/dist/cjs/global-account/react/components/ManageAccount/BottomNavigation.js

@@ -13,11 +13,11 @@ const SettingsIcon = () => {
 };
 const BottomNavigation = () => {
     const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]", children: (0, jsx_runtime_1.jsxs)(react_1.TabsListPrimitive, { className: "flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent", children: [(0, jsx_runtime_1.jsxs)(react_1.TabTriggerPrimitive, { value: "home", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]", children: [(0, jsx_runtime_1.jsx)(HomeIcon, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Home" })] }), (0, jsx_runtime_1.jsxs)(react_1.TabTriggerPrimitive, { value: "swap", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]", onClick: () => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]", children: (0, jsx_runtime_1.jsxs)(react_1.TabsListPrimitive, { className: "flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent", children: [(0, jsx_runtime_1.jsxs)(react_1.TabTriggerPrimitive, { value: "home", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", children: [(0, jsx_runtime_1.jsx)(HomeIcon, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Home" })] }), (0, jsx_runtime_1.jsxs)(react_1.TabTriggerPrimitive, { value: "swap", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", onClick: () => {
                         setB3ModalContentType({
                             type: "anySpend",
                             showBackButton: true,
                         });
-                    }, children: [(0, jsx_runtime_1.jsx)(SwapIcon, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Swap" })] }), (0, jsx_runtime_1.jsxs)(react_1.TabTriggerPrimitive, { value: "settings", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]", children: [(0, jsx_runtime_1.jsx)(SettingsIcon, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Settings" })] })] }) }));
+                    }, children: [(0, jsx_runtime_1.jsx)(SwapIcon, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Swap" })] }), (0, jsx_runtime_1.jsxs)(react_1.TabTriggerPrimitive, { value: "settings", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", children: [(0, jsx_runtime_1.jsx)(SettingsIcon, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Settings" })] })] }) }));
 };
 exports.default = BottomNavigation;

package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Flow.js

@@ -16,16 +16,18 @@ const MAX_REFETCH_ATTEMPTS = 20;
  * Handles different login providers, authentication steps, and session key management
  */
 function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin = false, source = "signInWithB3Button", signersEnabled = false, }) {
-    const { automaticallySetFirstEoa } = (0, react_1.useB3)();
+    const { automaticallySetFirstEoa, user, refetchUser, enableTurnkey } = (0, react_1.useB3)();
     const [step, setStep] = (0, react_2.useState)(source === "requestPermissions" ? null : "login");
     const [sessionKeyAdded, setSessionKeyAdded] = (0, react_2.useState)(source === "requestPermissions" ? true : false);
-    const { setB3ModalContentType, setB3ModalOpen, isOpen } = (0, react_1.useModalStore)();
+    const { setB3ModalContentType, setB3ModalOpen, isOpen, contentType } = (0, react_1.useModalStore)();
     const account = (0, react_3.useActiveAccount)();
     const isAuthenticating = (0, react_1.useAuthStore)(state => state.isAuthenticating);
     const isAuthenticated = (0, react_1.useAuthStore)(state => state.isAuthenticated);
     const isConnected = (0, react_1.useAuthStore)(state => state.isConnected);
+    const setJustCompletedLogin = (0, react_1.useAuthStore)(state => state.setJustCompletedLogin);
     const [refetchCount, setRefetchCount] = (0, react_2.useState)(0);
     const [refetchError, setRefetchError] = (0, react_2.useState)(null);
+    const [turnkeyAuthCompleted, setTurnkeyAuthCompleted] = (0, react_2.useState)(false);
     const { data: signers, refetch: refetchSigners, isFetching: isFetchingSigners, } = (0, react_1.useGetAllTWSigners)({
         chain,
         accountAddress: account?.address,
@@ -55,6 +57,104 @@ function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onE
             setRefetchQueued(false);
         }, backoffDelay);
     }, [refetchCount, refetchSigners, onError, setRefetchQueued, refetchQueued]);
+    // Extract the completion flow logic to be reused
+    const handlePostTurnkeyFlow = (0, react_2.useCallback)(() => {
+        debug("Running post-Turnkey flow logic");
+        // Check if we already have a signer for this partner
+        const hasExistingSigner = signers?.some(signer => signer.partner.id === partnerId);
+        if (hasExistingSigner) {
+            // Path 1: User already has a signer for this partner
+            setSessionKeyAdded(true);
+            onSessionKeySuccess?.();
+            if (closeAfterLogin) {
+                setB3ModalOpen(false);
+            }
+            else {
+                setB3ModalContentType({
+                    type: "manageAccount",
+                    chain,
+                    partnerId,
+                });
+            }
+        }
+        else if (signersEnabled) {
+            // Path 2: No existing signer, but signers are enabled
+            if (source !== "requestPermissions") {
+                // Navigate to permissions step to request new signer
+                setStep("permissions");
+            }
+            else {
+                // Already in request permissions flow, retry fetching signers
+                handleRefetchSigners();
+            }
+        }
+        else {
+            // Path 3: No existing signer and signers are not enabled
+            // Default handling for when no signer exists and signers are not enabled
+            if (closeAfterLogin) {
+                setB3ModalOpen(false);
+            }
+            else {
+                // if not closed, default to manage account
+                setB3ModalContentType({
+                    type: "manageAccount",
+                    chain,
+                    partnerId,
+                });
+            }
+        }
+    }, [
+        signers,
+        partnerId,
+        onSessionKeySuccess,
+        closeAfterLogin,
+        setB3ModalOpen,
+        setB3ModalContentType,
+        chain,
+        source,
+        signersEnabled,
+        handleRefetchSigners,
+        setSessionKeyAdded,
+    ]);
+    // Define handleTurnkeySuccess before the useEffect that uses it
+    const handleTurnkeySuccess = (0, react_2.useCallback)(async (user) => {
+        debug("Turnkey authentication successful - setting completed flag", { user });
+        // Set completed flag FIRST before any async operations
+        setTurnkeyAuthCompleted(true);
+        // Refetch user to update the user state with Turnkey ID
+        debug("Refetching user after Turnkey success...");
+        await refetchUser();
+        debug("User refetched successfully");
+        // After user data is refreshed, close Turnkey modal and go back to sign-in flow
+        debug("Switching back to signInWithB3 modal");
+        setB3ModalContentType({
+            type: "signInWithB3",
+            strategies,
+            onLoginSuccess,
+            onSessionKeySuccess,
+            onError,
+            chain,
+            sessionKeyAddress,
+            partnerId,
+            closeAfterLogin,
+            source,
+            signersEnabled,
+        });
+        // The useEffect will re-run with updated user data to complete the sign-in process
+    }, [
+        refetchUser,
+        setB3ModalContentType,
+        strategies,
+        onLoginSuccess,
+        onSessionKeySuccess,
+        onError,
+        chain,
+        sessionKeyAddress,
+        partnerId,
+        closeAfterLogin,
+        source,
+        signersEnabled,
+    ]);
     // Handle post-login flow after signers are loaded
     (0, react_2.useEffect)(() => {
         debug("@@SignInWithB3Flow:useEffect", {
@@ -65,41 +165,46 @@ function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onE
             isOpen,
             source,
         });
-        if (isConnected && isAuthenticated) {
-            // Check if we already have a signer for this partner
-            const hasExistingSigner = signers?.some(signer => signer.partner.id === partnerId);
-            if (hasExistingSigner) {
-                setSessionKeyAdded(true);
-                onSessionKeySuccess?.();
-                if (closeAfterLogin) {
-                    setB3ModalOpen(false);
-                }
-                else {
-                    setB3ModalContentType({
-                        type: "manageAccount",
-                        chain,
-                        partnerId,
-                    });
-                }
-            }
-            else if (source !== "requestPermissions") {
-                if (signersEnabled)
-                    setStep("permissions");
-            }
-            else {
-                if (signersEnabled)
-                    handleRefetchSigners();
-            }
-            // Default handling
+        if (isConnected && isAuthenticated && user) {
+            // Mark that login just completed BEFORE opening manage account or closing modal
+            // This allows Turnkey modal to show (if enableTurnkey is true)
             if (closeAfterLogin) {
-                setB3ModalOpen(false);
+                setJustCompletedLogin(true);
             }
-            // if not closed, always default to manage account
-            setB3ModalContentType({
-                type: "manageAccount",
-                chain,
-                partnerId,
-            });
+            // Check if we should show Turnkey login form
+            // Show if enableTurnkey is true AND user just logged in AND hasn't completed Turnkey auth in this session
+            // For new users (!turnkeyId): Show email form
+            // For returning users (turnkeyId && turnkeyEmail): Auto-skip to OTP
+            // Also check that we're not already showing the Turnkey modal
+            const hasTurnkeyId = user?.partnerIds?.turnkeyId;
+            const hasTurnkeyEmail = !!user?.email;
+            const isTurnkeyModalCurrentlyOpen = contentType?.type === "turnkeyAuth";
+            const shouldShowTurnkeyModal = enableTurnkey &&
+                user &&
+                !turnkeyAuthCompleted &&
+                !isTurnkeyModalCurrentlyOpen &&
+                (!hasTurnkeyId || (hasTurnkeyId && hasTurnkeyEmail));
+            if (shouldShowTurnkeyModal) {
+                // Extract email from user object - check partnerIds.turnkeyEmail first, then twProfiles, then user.email
+                const email = user?.email || user?.twProfiles?.find((profile) => profile.details?.email)?.details?.email;
+                // Open Turnkey modal through the modal store
+                setB3ModalContentType({
+                    type: "turnkeyAuth",
+                    onSuccess: handleTurnkeySuccess,
+                    onClose: () => {
+                        // After closing Turnkey modal, continue with the rest of the flow
+                        setTurnkeyAuthCompleted(true);
+                        debug("Turnkey modal closed, running post-Turnkey flow");
+                        handlePostTurnkeyFlow();
+                    },
+                    initialEmail: email,
+                    skipToOtp: !!(hasTurnkeyId && hasTurnkeyEmail),
+                    closable: false, // Turnkey modal cannot be closed until auth is complete
+                });
+                return;
+            }
+            // Normal flow continues after Turnkey auth is complete (or if not needed)
+            handlePostTurnkeyFlow();
         }
     }, [
         signers,
@@ -117,6 +222,13 @@ function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onE
         isAuthenticating,
         isAuthenticated,
         isOpen,
+        setJustCompletedLogin,
+        user,
+        enableTurnkey,
+        turnkeyAuthCompleted,
+        handleTurnkeySuccess,
+        contentType,
+        handlePostTurnkeyFlow,
     ]);
     debug("render", {
         step,
@@ -171,24 +283,28 @@ function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onE
             });
         }
     }, [chain, onError, onSessionKeySuccessEnhanced, sessionKeyAddress, setB3ModalContentType, step]);
+    // Render content based on current step/state
+    let content = null;
     // Display error if refetch limit exceeded
     if (refetchError) {
-        return ((0, jsx_runtime_1.jsx)(LoginStep_1.LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)("div", { className: "p-4 text-center text-red-500", children: refetchError }) }));
+        content = ((0, jsx_runtime_1.jsx)(LoginStep_1.LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)("div", { className: "p-4 text-center text-red-500", children: refetchError }) }));
     }
-    if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
-        return ((0, jsx_runtime_1.jsx)(LoginStep_1.LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: (0, jsx_runtime_1.jsx)(react_1.Loading, { variant: "white", size: "lg" }) }) }));
+    else if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
+        content = ((0, jsx_runtime_1.jsx)(LoginStep_1.LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: (0, jsx_runtime_1.jsx)(react_1.Loading, { variant: "white", size: "lg" }) }) }));
     }
-    if (step === "login") {
+    else if (step === "login") {
         // Custom strategy
         if (strategies?.[0] === "privy") {
-            return (0, jsx_runtime_1.jsx)(SignInWithB3Privy_1.SignInWithB3Privy, { onSuccess: handleLoginSuccess, chain: chain });
+            content = (0, jsx_runtime_1.jsx)(SignInWithB3Privy_1.SignInWithB3Privy, { onSuccess: handleLoginSuccess, chain: chain });
+        }
+        else if (strategies) {
+            // Strategies are explicitly provided
+            content = ((0, jsx_runtime_1.jsx)(LoginStepCustom_1.LoginStepCustom, { strategies: strategies, chain: chain, onSuccess: handleLoginSuccess, onError: onError, automaticallySetFirstEoa: !!automaticallySetFirstEoa }));
         }
-        // Strategies are explicitly provided
-        if (strategies) {
-            return ((0, jsx_runtime_1.jsx)(LoginStepCustom_1.LoginStepCustom, { strategies: strategies, chain: chain, onSuccess: handleLoginSuccess, onError: onError, automaticallySetFirstEoa: !!automaticallySetFirstEoa }));
+        else {
+            // Default to handle all strategies we support
+            content = (0, jsx_runtime_1.jsx)(LoginStep_1.LoginStep, { chain: chain, onSuccess: handleLoginSuccess, onError: onError });
         }
-        // Default to handle all strategies we support
-        return (0, jsx_runtime_1.jsx)(LoginStep_1.LoginStep, { chain: chain, onSuccess: handleLoginSuccess, onError: onError });
     }
-    return null;
+    return content;
 }

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

@@ -0,0 +1,8 @@
+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/cjs/global-account/react/components/TurnkeyAuthModal.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TurnkeyAuthModal = TurnkeyAuthModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useTurnkeyAuth_1 = require("../hooks/useTurnkeyAuth");
+function TurnkeyAuthModal({ onClose, onSuccess, initialEmail = "", skipToOtp = false }) {
+    const [step, setStep] = (0, react_1.useState)(skipToOtp ? "otp" : "email");
+    const [email, setEmail] = (0, react_1.useState)(initialEmail);
+    const [otpCode, setOtpCode] = (0, react_1.useState)("");
+    const [otpId, setOtpId] = (0, react_1.useState)("");
+    const autoSubmitTriggeredRef = (0, react_1.useRef)(false);
+    const { initiateLogin, verifyOtp, isLoading, error, clearError } = (0, useTurnkeyAuth_1.useTurnkeyAuth)();
+    // Update email when initialEmail changes
+    (0, react_1.useEffect)(() => {
+        if (initialEmail && initialEmail !== email) {
+            setEmail(initialEmail);
+        }
+    }, [initialEmail, email]);
+    // Auto-submit email form if skipToOtp is true - triggers on mount when skipToOtp=true
+    (0, react_1.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);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "font-neue-montreal p-8", children: [step === "email" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "mb-6 text-center text-2xl font-bold text-gray-900 dark:text-white", children: "Setup your AnySpend Wallet" }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-6 space-y-3 text-center text-sm text-gray-600 dark:text-gray-400", children: [(0, jsx_runtime_1.jsxs)("p", { children: ["AnySpend uses a secure,", (0, jsx_runtime_1.jsx)("br", {}), "embedded wallet to fund your workflows."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Please provide an email address to secure", (0, jsx_runtime_1.jsx)("br", {}), "your wallet."] })] }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleEmailSubmit, className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.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 && ((0, jsx_runtime_1.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 })), (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" }), "Sending..."] })) : ("Continue") })] })] })), step === "otp" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "mb-4 text-center text-2xl font-bold text-gray-900 dark:text-white", children: "2FA Security" }), (0, jsx_runtime_1.jsx)("div", { className: "mb-6 space-y-3 text-center text-sm text-gray-600 dark:text-gray-400", children: (0, jsx_runtime_1.jsxs)("p", { children: ["AnySpend uses a secure,", (0, jsx_runtime_1.jsx)("br", {}), "embedded wallet to fund your workflows.", (0, jsx_runtime_1.jsx)("br", {}), "Please provide 2FA code sent to your email."] }) }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleOtpSubmit, className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.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 && ((0, jsx_runtime_1.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 })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" }), "Verifying..."] })) : ("Confirm") }), (0, jsx_runtime_1.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" && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-6 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/20", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-8 w-8 text-green-600 dark:text-green-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }) }), (0, jsx_runtime_1.jsx)("h2", { className: "mb-2 text-2xl font-bold text-gray-900 dark:text-white", children: "Successfully Authenticated!" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Redirecting..." })] }))] }));
+}

package/dist/cjs/global-account/react/components/index.d.ts

@@ -12,6 +12,7 @@ export { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
 export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy";
 export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep";
 export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } from "./SignInWithB3/utils/signInUtils";
+export { TurnkeyAuthModal } from "./TurnkeyAuthModal";
 export { ManageAccount } from "./ManageAccount/ManageAccount";
 export { Deposit } from "./Deposit/Deposit";
 export { Send } from "./Send/Send";