@b3dotfun/sdk 0.1.69-alpha.1 → 0.1.69-alpha.10

package/dist/esm/app.shared.js

@@ -1,8 +1,8 @@
 import { AuthenticationClient } from "@feathersjs/authentication-client";
 import Cookies from "js-cookie";
 import { B3_AUTH_COOKIE_NAME } from "./shared/constants/index.js";
+import { getSessionDurationDays } from "./shared/utils/session-duration.js";
 export const B3_API_URL = process.env.EXPO_PUBLIC_B3_API || process.env.NEXT_PUBLIC_B3_API || process.env.PUBLIC_B3_API || "https://api.b3.fun";
-const DEV_USER_GROUP = 4;
 export const authenticate = async (app, accessToken, identityToken, params) => {
     const fullToken = `${accessToken}+${identityToken}`;
     // Do not authenticate if there is no token
@@ -17,12 +17,14 @@ export const authenticate = async (app, accessToken, identityToken, params) => {
         }, {
             query: params || {},
         });
-        // Extend cookie expiration to 30 days for dev users
-        if (response?.user?.userGroups?.includes(DEV_USER_GROUP)) {
-            const token = Cookies.get(B3_AUTH_COOKIE_NAME);
-            if (token) {
-                Cookies.set(B3_AUTH_COOKIE_NAME, token, { expires: 30 });
-            }
+        const token = Cookies.get(B3_AUTH_COOKIE_NAME);
+        if (token) {
+            const days = getSessionDurationDays(response?.user?.preferences, params?.partnerId);
+            Cookies.set(B3_AUTH_COOKIE_NAME, token, {
+                ...(days > 0 ? { expires: days } : {}),
+                secure: true,
+                sameSite: "Lax",
+            });
         }
         return response;
     }

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

@@ -17,6 +17,7 @@ import { LinkAccount } from "./LinkAccount/LinkAccount.js";
 import { LinkNewAccount } from "./LinkAccount/LinkNewAccount.js";
 import { ManageAccount } from "./ManageAccount/ManageAccount.js";
 import NotificationsContent from "./ManageAccount/NotificationsContent.js";
+import SessionDurationContent from "./ManageAccount/SessionDurationContent.js";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions.js";
 import { Send } from "./Send/Send.js";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow.js";
@@ -31,7 +32,7 @@ export function B3DynamicModal() {
     const navigateBack = useModalStore(state => state.navigateBack);
     const { theme } = useB3Config();
     const isMobile = useIsMobile();
-    const { toasts, removeToast } = useToastContext();
+    const { toasts, removeToast, headerMode } = useToastContext();
     // Define arrays for different modal type groups
     const fullWidthTypes = [
         "anySpend",
@@ -140,6 +141,8 @@ export function B3DynamicModal() {
                 return _jsx(Send, { ...contentType });
             case "notifications":
                 return _jsx(NotificationsContent, { ...contentType });
+            case "sessionDuration":
+                return _jsx(SessionDurationContent, { partnerId: contentType.partnerId });
             // Add other modal types here
             default:
                 return null;
@@ -162,7 +165,7 @@ export function B3DynamicModal() {
                     contentType?.type === "send" ||
                     contentType?.type === "avatarEditor" ||
                     contentType?.type === "notifications") &&
-                    "p-0", "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, hideGABranding: isAnySpendType, onEscapeKeyDown: !isClosable ? e => e.preventDefault() : undefined, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("b3-modal-content no-scrollbar dark:bg-b3-background flex max-h-[90dvh] flex-col overflow-auto sm:max-h-[80dvh]"), children: [!hideCloseButton && (_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: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "font-inter text-sm font-semibold", children: "Back" })] })), _jsx("div", { className: "flex-1", children: renderContent() }), _jsx(AnimatePresence, { children: toasts.length > 0 && (_jsx(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-neutral-800 dark:bg-neutral-900", children: _jsx(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: _jsx(ToastContainer, { toasts: toasts, onDismiss: removeToast, theme: theme }) }) })) })] })] }), isOpen && !isAnySpendType && (_jsx("style", { children: `
+                    "p-0", "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, hideGABranding: isAnySpendType, onEscapeKeyDown: !isClosable ? e => e.preventDefault() : undefined, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("b3-modal-content no-scrollbar dark:bg-b3-background flex max-h-[90dvh] flex-col overflow-auto sm:max-h-[80dvh]"), children: [!hideCloseButton && (_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: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "font-inter text-sm font-semibold", children: "Back" })] })), _jsx("div", { className: "flex-1", children: renderContent() }), _jsx(AnimatePresence, { children: !headerMode && toasts.length > 0 && (_jsx(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-neutral-800 dark:bg-neutral-900", children: _jsx(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: _jsx(ToastContainer, { toasts: toasts, onDismiss: removeToast, theme: theme }) }) })) })] })] }), isOpen && !isAnySpendType && (_jsx("style", { children: `
           .modal-inner-content {
             transition: margin-bottom 0.3s ease-in-out;
             margin-bottom: ${toasts.length > 0 ? "0px" : "23px"} !important;

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

@@ -8,7 +8,7 @@ import { ClientType } from "../../../client-manager";
 /**
  * Main B3Provider component
  */
-export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, defaultEoaProvider, simDuneApiKey, toaster: _toaster, clientType, rpcUrls, partnerId, stripePublishableKey, onConnect, onLogout, connectors, overrideDefaultConnectors, createClientReferenceId, defaultPermissions, }: {
+export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, defaultEoaProvider, simDuneApiKey, toaster: _toaster, clientType, rpcUrls, partnerId, stripePublishableKey, onConnect, onLogout, connectors, overrideDefaultConnectors, createClientReferenceId, defaultPermissions, disableBSMNTAuthentication, }: {
     theme: "light" | "dark";
     children: React.ReactNode;
     accountOverride?: Account;
@@ -32,4 +32,5 @@ export declare function B3Provider({ theme, children, accountOverride, environme
     overrideDefaultConnectors?: boolean;
     createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
     defaultPermissions?: PermissionsConfig;
+    disableBSMNTAuthentication?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -20,7 +20,7 @@ const queryClient = new QueryClient();
  */
 export function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, defaultEoaProvider, simDuneApiKey, 
 // deprecated since v0.0.87
-toaster: _toaster, clientType = "rest", rpcUrls, partnerId, stripePublishableKey, onConnect, onLogout, connectors, overrideDefaultConnectors = false, createClientReferenceId, defaultPermissions, }) {
+toaster: _toaster, clientType = "rest", rpcUrls, partnerId, stripePublishableKey, onConnect, onLogout, connectors, overrideDefaultConnectors = false, createClientReferenceId, defaultPermissions, disableBSMNTAuthentication = false, }) {
     // Initialize Google Analytics on mount
     useEffect(() => {
         loadGA4Script();
@@ -30,7 +30,7 @@ toaster: _toaster, clientType = "rest", rpcUrls, partnerId, stripePublishableKey
         setClientType(clientType);
     }, [clientType]);
     const wagmiConfig = useMemo(() => createWagmiConfig({ partnerId, rpcUrls, connectors, overrideDefaultConnectors }), [partnerId, rpcUrls, connectors, overrideDefaultConnectors]);
-    return (_jsx(ThirdwebProvider, { children: _jsx(WagmiProvider, { config: wagmiConfig, reconnectOnMount: false, children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(TooltipProvider, { children: _jsx(ToastProvider, { children: _jsx(LocalSDKProvider, { onConnectCallback: onConnect, onLogoutCallback: onLogout, children: _jsxs(B3ConfigProvider, { accountOverride: accountOverride, environment: environment, automaticallySetFirstEoa: !!automaticallySetFirstEoa, theme: theme, clientType: clientType, partnerId: partnerId, stripePublishableKey: stripePublishableKey, createClientReferenceId: createClientReferenceId, defaultPermissions: defaultPermissions, children: [_jsx(ToastContextConnector, {}), _jsxs(RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, _jsx(StyleRoot, { id: "b3-root" })] }), _jsx(AuthenticationProvider, { partnerId: partnerId, automaticallySetFirstEoa: !!automaticallySetFirstEoa, defaultEoaProvider: defaultEoaProvider })] }) }) }) }) }) }) }));
+    return (_jsx(ThirdwebProvider, { children: _jsx(WagmiProvider, { config: wagmiConfig, reconnectOnMount: false, children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(TooltipProvider, { children: _jsx(ToastProvider, { children: _jsx(LocalSDKProvider, { onConnectCallback: onConnect, onLogoutCallback: onLogout, disableBSMNTAuthentication: disableBSMNTAuthentication, children: _jsxs(B3ConfigProvider, { accountOverride: accountOverride, environment: environment, automaticallySetFirstEoa: !!automaticallySetFirstEoa, theme: theme, clientType: clientType, partnerId: partnerId, stripePublishableKey: stripePublishableKey, createClientReferenceId: createClientReferenceId, defaultPermissions: defaultPermissions, children: [_jsx(ToastContextConnector, {}), _jsxs(RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, _jsx(StyleRoot, { id: "b3-root" })] }), _jsx(AuthenticationProvider, { partnerId: partnerId, automaticallySetFirstEoa: !!automaticallySetFirstEoa, defaultEoaProvider: defaultEoaProvider })] }) }) }) }) }) }) }));
 }
 /**
  * Component to connect the toast context to the global toast API

package/dist/esm/global-account/react/components/B3Provider/B3Provider.native.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ThirdwebProvider } from "thirdweb/react";
+import { useMemo } from "react";
 import { WagmiProvider } from "wagmi";
 import { createWagmiConfig } from "../../utils/createWagmiConfig.js";
 import AuthenticationProvider from "./AuthenticationProvider.js";
@@ -18,6 +19,6 @@ export function B3Provider({ theme = "light", children, accountOverride, environ
  * Inner provider component for native
  */
 export function InnerProvider({ children, accountOverride, environment, defaultPermissions, theme = "light", clientType = "socket", partnerId, rpcUrls, }) {
-    const wagmiConfig = createWagmiConfig({ partnerId, rpcUrls });
+    const wagmiConfig = useMemo(() => createWagmiConfig({ partnerId, rpcUrls }), [partnerId, rpcUrls]);
     return (_jsx(WagmiProvider, { config: wagmiConfig, children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(B3ConfigProvider, { accountOverride: accountOverride, environment: environment, automaticallySetFirstEoa: false, theme: theme, clientType: clientType, partnerId: partnerId, defaultPermissions: defaultPermissions, children: children }) }) }));
 }

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

@@ -6,13 +6,15 @@ import { Wallet } from "thirdweb/wallets";
 export interface LocalSDKContextType {
     onConnectCallback?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
     onLogoutCallback?: () => void | Promise<void>;
+    disableBSMNTAuthentication?: boolean;
 }
 export declare const LocalSDKContext: import("react").Context<LocalSDKContextType>;
 /**
  * Local SDK Provider that wraps the app and provides internal SDK state
  */
-export declare function LocalSDKProvider({ children, onConnectCallback, onLogoutCallback, }: {
+export declare function LocalSDKProvider({ children, onConnectCallback, onLogoutCallback, disableBSMNTAuthentication, }: {
     children: React.ReactNode;
     onConnectCallback?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
     onLogoutCallback?: () => void | Promise<void>;
+    disableBSMNTAuthentication?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/global-account/react/components/B3Provider/LocalSDKProvider.js

@@ -3,13 +3,15 @@ import { createContext } from "react";
 export const LocalSDKContext = createContext({
     onConnectCallback: undefined,
     onLogoutCallback: undefined,
+    disableBSMNTAuthentication: false,
 });
 /**
  * Local SDK Provider that wraps the app and provides internal SDK state
  */
-export function LocalSDKProvider({ children, onConnectCallback, onLogoutCallback, }) {
+export function LocalSDKProvider({ children, onConnectCallback, onLogoutCallback, disableBSMNTAuthentication, }) {
     return (_jsx(LocalSDKContext.Provider, { value: {
             onConnectCallback,
             onLogoutCallback,
+            disableBSMNTAuthentication,
         }, children: children }));
 }

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

@@ -0,0 +1,5 @@
+interface SessionDurationContentProps {
+    partnerId: string;
+}
+declare const SessionDurationContent: ({ partnerId }: SessionDurationContentProps) => import("react/jsx-runtime").JSX.Element;
+export default SessionDurationContent;

package/dist/esm/global-account/react/components/ManageAccount/SessionDurationContent.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import app from "../../../../global-account/app.js";
+import { useAuthentication, useModalStore } from "../../../../global-account/react/index.js";
+import { getSessionDurationDays, SESSION_DURATION_LABELS, SESSION_DURATION_OPTIONS, setSessionDurationDays, } from "../../../../shared/utils/session-duration.js";
+import { useState } from "react";
+import ModalHeader from "../ModalHeader/ModalHeader.js";
+const DESCRIPTIONS = {
+    0: "Sign out when browser closes",
+    1: "Stay signed in for 1 day",
+    7: "Stay signed in for 7 days",
+    14: "Stay signed in for 2 weeks",
+    30: "Stay signed in for 30 days",
+};
+const SessionDurationContent = ({ partnerId }) => {
+    const { user, setUser } = useAuthentication(partnerId);
+    const navigateBack = useModalStore(state => state.navigateBack);
+    const [sessionDays, setSessionDays] = useState(() => getSessionDurationDays(user?.preferences, partnerId));
+    const [saving, setSaving] = useState(false);
+    const handleSelect = async (days) => {
+        const previous = sessionDays;
+        setSessionDurationDays(days, partnerId);
+        setSessionDays(days);
+        if (user?.userId) {
+            setSaving(true);
+            try {
+                const updated = await app.service("users").patch(user.userId, {
+                    preferences: {
+                        ...user.preferences,
+                        [partnerId]: {
+                            ...((user.preferences ?? {})[partnerId] ?? {}),
+                            sessionDuration: days,
+                        },
+                    },
+                });
+                setUser(updated);
+            }
+            catch (error) {
+                console.error("Failed to save session duration preference:", error);
+                // Revert optimistic update so UI stays consistent with server state
+                setSessionDays(previous);
+                setSessionDurationDays(previous, partnerId);
+            }
+            finally {
+                setSaving(false);
+            }
+        }
+    };
+    return (_jsxs("div", { className: "flex h-[470px] flex-col", children: [_jsx(ModalHeader, { showBackButton: true, showCloseButton: false, title: "Stay signed in", handleBack: navigateBack }), _jsx("div", { className: "flex flex-col gap-2 p-5", children: SESSION_DURATION_OPTIONS.map(days => (_jsxs("button", { type: "button", onClick: () => handleSelect(days), disabled: saving, className: `flex items-center justify-between rounded-xl border px-4 py-3 transition-colors ${sessionDays === days
+                        ? "border-[#3f3f46] bg-[#f4f4f5] dark:border-white dark:bg-white/10"
+                        : "border-[#e4e4e7] bg-transparent hover:bg-[#f4f4f5] dark:border-white/10 dark:hover:bg-white/5"}`, children: [_jsxs("div", { className: "flex flex-col items-start gap-0.5", children: [_jsx("span", { className: "font-neue-montreal-semibold text-[14px] leading-none tracking-[-0.28px] text-[#3f3f46] dark:text-white", children: SESSION_DURATION_LABELS[days] }), _jsx("span", { className: "font-neue-montreal-medium text-[13px] leading-none tracking-[-0.26px] text-[#70707b] dark:text-white/50", children: DESCRIPTIONS[days] })] }), sessionDays === days && (_jsx("div", { className: "flex size-5 items-center justify-center rounded-full bg-[#3f3f46] dark:bg-white", children: _jsx("svg", { width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", children: _jsx("path", { d: "M1 4L3.5 6.5L9 1", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "dark:stroke-[#3f3f46]" }) }) }))] }, days))) })] }));
+};
+export default SessionDurationContent;

package/dist/esm/global-account/react/components/ManageAccount/SettingsContent.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAuthentication, useModalStore } from "../../../../global-account/react/index.js";
 import { client } from "../../../../shared/utils/thirdweb.js";
+import { getSessionDurationDays, SESSION_DURATION_LABELS } from "../../../../shared/utils/session-duration.js";
 import { Loader2 } from "lucide-react";
 import { useState } from "react";
 import { useProfiles } from "thirdweb/react";
@@ -11,47 +12,29 @@ import SettingsProfileCard from "./SettingsProfileCard.js";
 const SettingsContent = ({ partnerId, onLogout, chain, }) => {
     const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
     const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
-    const { logout } = useAuthentication(partnerId);
+    const { logout, user } = useAuthentication(partnerId);
     const [logoutLoading, setLogoutLoading] = useState(false);
+    const sessionDays = getSessionDurationDays(user?.preferences, partnerId);
     const { data: profilesRaw = [] } = useProfiles({ client });
     const profiles = profilesRaw.filter((profile) => !["custom_auth_endpoint"].includes(profile.type));
     const handleNavigate = (type) => {
         if (type === "home") {
-            setB3ModalContentType({
-                type: "manageAccount",
-                chain,
-                partnerId,
-                onLogout,
-                activeTab: "home",
-            });
+            setB3ModalContentType({ type: "manageAccount", chain, partnerId, onLogout, activeTab: "home" });
         }
         else if (type === "swap") {
-            setB3ModalContentType({
-                type: "manageAccount",
-                chain,
-                partnerId,
-                onLogout,
-                activeTab: "tokens",
-            });
+            setB3ModalContentType({ type: "manageAccount", chain, partnerId, onLogout, activeTab: "tokens" });
         }
         else if (type === "linkAccount") {
-            setB3ModalContentType({
-                type: "linkAccount",
-                chain,
-                partnerId,
-            });
+            setB3ModalContentType({ type: "linkAccount", chain, partnerId });
         }
         else if (type === "notifications") {
-            setB3ModalContentType({
-                type: "notifications",
-                chain,
-                partnerId,
-            });
+            setB3ModalContentType({ type: "notifications", chain, partnerId });
+        }
+        else if (type === "sessionDuration") {
+            setB3ModalContentType({ type: "sessionDuration", chain, partnerId });
         }
         else {
-            setB3ModalContentType({
-                type: "avatarEditor",
-            });
+            setB3ModalContentType({ type: "avatarEditor" });
         }
         setB3ModalOpen(true);
     };
@@ -62,7 +45,7 @@ const SettingsContent = ({ partnerId, onLogout, chain, }) => {
         setB3ModalOpen(false);
         setLogoutLoading(false);
     };
-    return (_jsxs("div", { className: "flex h-[470px] flex-col", children: [_jsx(ModalHeader, { showBackButton: false, showCloseButton: false, title: "Settings" }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "b3-modal-settings-profile-card dark:border-b3-line dark:bg-b3-background flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4", children: _jsx(SettingsProfileCard, {}) }) }), _jsxs("div", { className: "space-y-3 px-5", children: [_jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Linked Accounts", subtitle: `${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`, onClick: () => handleNavigate("linkAccount") }), _jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Notifications", subtitle: "Manage your notifications", onClick: () => handleNavigate("notifications") })] }), _jsx("div", { className: "mt-auto px-5 pb-5", children: _jsxs("button", { className: "b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background dark:bg-b3-background dark:border-b3-line dark:hover:bg-b3-line/80 flex w-full items-center justify-center gap-1.5 rounded-xl border border-solid p-3 transition-colors", onClick: onLogoutEnhanced, disabled: logoutLoading, style: {
+    return (_jsxs("div", { className: "flex h-[470px] flex-col", children: [_jsx(ModalHeader, { showBackButton: false, showCloseButton: false, title: "Settings" }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "b3-modal-settings-profile-card dark:border-b3-line dark:bg-b3-background flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4", children: _jsx(SettingsProfileCard, {}) }) }), _jsxs("div", { className: "space-y-3 px-5", children: [_jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Linked Accounts", subtitle: `${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`, onClick: () => handleNavigate("linkAccount") }), _jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Notifications", subtitle: "Manage your notifications", onClick: () => handleNavigate("notifications") }), _jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Stay signed in", subtitle: SESSION_DURATION_LABELS[sessionDays] ?? `${sessionDays} days`, onClick: () => handleNavigate("sessionDuration") })] }), _jsx("div", { className: "mt-auto px-5 pb-5", children: _jsxs("button", { type: "button", className: "b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background dark:bg-b3-background dark:border-b3-line dark:hover:bg-b3-line/80 flex w-full items-center justify-center gap-1.5 rounded-xl border border-solid p-3 transition-colors", onClick: onLogoutEnhanced, disabled: logoutLoading, style: {
                         boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05)",
                     }, children: [logoutLoading ? (_jsx(Loader2, { className: "text-b3-grey animate-spin", size: 20 })) : (_jsx(SignOutIcon, { size: 20, className: "text-b3-grey", color: "currentColor" })), _jsx("p", { className: "text-b3-grey dark:text-b3-foreground-muted font-neue-montreal-semibold text-base", children: "Sign out" })] }) })] }));
 };

package/dist/esm/global-account/react/components/SignInWithB3/components/AuthButton.js

@@ -1,6 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "../../custom/Button.js";
-import { strategyIcons } from "../utils/signInUtils.js";
+import { Github, Mail } from "lucide-react";
+import { strategyIcons, strategyLabels } from "../utils/signInUtils.js";
+const fallbackIcons = {
+    github: Github,
+    email: Mail,
+};
 export function AuthButton({ strategy, onClick, isLoading, }) {
-    return (_jsx(Button, { onClick: onClick, disabled: isLoading, className: "flex w-full items-center justify-center bg-gray-100 px-2 py-3 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700", children: _jsx("img", { src: strategyIcons[strategy], className: "h-9 w-9" }) }, strategy));
+    const strategyIcon = strategyIcons[strategy];
+    const strategyLabel = strategyLabels[strategy] || strategy;
+    const FallbackIcon = fallbackIcons[strategy];
+    const buttonLabel = `Sign in with ${strategyLabel}`;
+    return (_jsx(Button, { onClick: onClick, disabled: isLoading, "aria-label": buttonLabel, title: buttonLabel, className: "flex w-full items-center justify-center bg-gray-100 px-2 py-3 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700", children: strategyIcon ? (_jsx("img", { src: strategyIcon, alt: `${strategyLabel} icon`, className: "h-9 w-9" })) : FallbackIcon ? (_jsx(FallbackIcon, { className: "h-9 w-9 text-gray-900 dark:text-gray-100" })) : (_jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: strategyLabel.charAt(0) })) }, strategy));
 }

package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js

@@ -1,38 +1,52 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AuthButton, Button, getConnectOptionsFromStrategy, isWalletType, LoginStepContainer, useAuthentication, useAuthStore, useB3Config, useConnect, WalletRow, } from "../../../../../global-account/react/index.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AuthButton, Button, getConnectOptionsFromStrategy, Input, isWalletType, LoginStepContainer, useAuthentication, useAuthStore, useB3Config, useConnect, WalletRow, } from "../../../../../global-account/react/index.js";
+import { ecosystemWalletId } from "../../../../../shared/constants/index.js";
 import { debugB3React } from "../../../../../shared/utils/debug.js";
 import { client } from "../../../../../shared/utils/thirdweb.js";
 import { useState } from "react";
-import { useConnect as useConnectTW } from "thirdweb/react";
-import { createWallet } from "thirdweb/wallets";
+import { useConnectedWallets, useConnect as useConnectTW } from "thirdweb/react";
+import { createWallet, preAuthenticate, } from "thirdweb/wallets";
 const debug = debugB3React("LoginStepCustom");
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 export function LoginStepCustom({ onSuccess, onError, chain, strategies, maxInitialWallets = 2, automaticallySetFirstEoa, }) {
     const { partnerId } = useB3Config();
     const [isLoading, setIsLoading] = useState(false);
     const [showAllWallets, setShowAllWallets] = useState(false);
+    const [showEmailFlow, setShowEmailFlow] = useState(false);
+    const [email, setEmail] = useState("");
+    const [verificationCode, setVerificationCode] = useState("");
+    const [emailCodeSent, setEmailCodeSent] = useState(false);
+    const [emailError, setEmailError] = useState(null);
     const { connect } = useConnect(partnerId, chain);
     const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
-    const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
-    const { logout } = useAuthentication(partnerId, { skipAutoConnect: true });
+    const { connect: onAuthConnect, logout } = useAuthentication(partnerId, { skipAutoConnect: true });
     const { connect: connectTW } = useConnectTW();
+    const connectedWallets = useConnectedWallets();
     // Split strategies into auth and wallet types
     const authStrategies = strategies.filter(s => !isWalletType(s));
     const walletStrategies = strategies.filter(isWalletType);
     const initialWallets = walletStrategies.slice(0, maxInitialWallets);
     const additionalWallets = walletStrategies.slice(maxInitialWallets);
-    const handleConnect = async (strategy) => {
+    const authGridColumns = Math.max(1, Math.min(authStrategies.length, 4));
+    const resetEmailFlow = () => {
+        setShowEmailFlow(false);
+        setEmailCodeSent(false);
+        setVerificationCode("");
+        setEmailError(null);
+    };
+    const connectWithOptions = async (strategy, options) => {
         try {
             setIsLoading(true);
             debug("setIsAuthenticating:true:3");
             setIsAuthenticating(true);
-            const options = getConnectOptionsFromStrategy(strategy);
             let connectResult;
-            if (automaticallySetFirstEoa) {
-                if (!options.wallet?.id) {
+            if (automaticallySetFirstEoa && isWalletType(strategy) && options.strategy === "wallet") {
+                const walletId = options.wallet?.id;
+                if (!walletId) {
                     throw new Error("Wallet ID is required");
                 }
                 connectResult = await connectTW(async () => {
-                    const wallet = createWallet(options.wallet?.id);
+                    const wallet = createWallet(walletId);
                     await wallet.connect({
                         client,
                     });
@@ -40,20 +54,27 @@ export function LoginStepCustom({ onSuccess, onError, chain, strategies, maxInit
                 });
             }
             else {
-                // @ts-expect-error we have custom strategies too and we also get things like "apple" isn't assignable to "wallet"
                 connectResult = await connect(options);
             }
             const account = connectResult?.getAccount();
             debug("@@connectResult", { connectResult, account, options });
-            if (!account)
+            if (!account || !connectResult)
                 throw new Error("Failed to connect");
+            const allConnectedWallets = connectedWallets.length > 0 && connectedWallets.some(wallet => wallet.id === connectResult.id)
+                ? connectedWallets
+                : [connectResult, ...connectedWallets.filter(wallet => wallet.id !== connectResult.id)];
+            await onAuthConnect(connectResult, allConnectedWallets);
             await onSuccess(account);
-            setIsAuthenticated(true);
+            if (strategy === "email") {
+                resetEmailFlow();
+            }
         }
         catch (error) {
+            if (strategy === "email") {
+                setEmailError(error instanceof Error ? error.message : "Failed to sign in with email");
+            }
             await onError?.(error);
             await logout();
-            setIsAuthenticated(false);
         }
         finally {
             setIsLoading(false);
@@ -61,8 +82,68 @@ export function LoginStepCustom({ onSuccess, onError, chain, strategies, maxInit
             setIsAuthenticating(false);
         }
     };
-    return (_jsxs(LoginStepContainer, { partnerId: partnerId, children: [authStrategies.length > 0 && (_jsx("div", { className: `mb-6 w-full ${authStrategies.length <= 3 ? "space-y-3 px-3" : "grid grid-cols-4 gap-4"}`, children: authStrategies.map(strategy => {
-                    console.log("strategy", strategy);
-                    return (_jsx(AuthButton, { strategy: strategy, onClick: () => handleConnect(strategy), isLoading: isLoading }, strategy));
-                }) })), _jsx("div", { className: "mb-4 w-full space-y-2", children: initialWallets.map(walletId => (_jsx(WalletRow, { walletId: walletId, onClick: () => handleConnect(walletId), isLoading: isLoading }, walletId))) }), additionalWallets.length > 0 && (_jsxs("div", { className: "w-full", children: [_jsx(Button, { onClick: () => setShowAllWallets(!showAllWallets), className: "mb-2 w-full bg-transparent text-gray-600 hover:bg-gray-100", children: showAllWallets ? "Show less" : "More options" }), showAllWallets && (_jsx("div", { className: "max-h-60 space-y-2 overflow-y-auto", children: additionalWallets.map(walletId => (_jsx(WalletRow, { walletId: walletId, onClick: () => handleConnect(walletId), isLoading: isLoading }, walletId))) }))] }))] }));
+    const handleConnect = async (strategy) => {
+        if (strategy === "email") {
+            setShowEmailFlow(true);
+            setEmailCodeSent(false);
+            setVerificationCode("");
+            setEmailError(null);
+            return;
+        }
+        const options = getConnectOptionsFromStrategy(strategy);
+        await connectWithOptions(strategy, options);
+    };
+    const handleSendEmailCode = async () => {
+        const normalizedEmail = email.trim().toLowerCase();
+        if (!normalizedEmail) {
+            setEmailError("Please enter your email address");
+            return;
+        }
+        if (!EMAIL_REGEX.test(normalizedEmail)) {
+            setEmailError("Please enter a valid email address");
+            return;
+        }
+        try {
+            setIsLoading(true);
+            setEmailError(null);
+            await preAuthenticate({
+                client,
+                strategy: "email",
+                email: normalizedEmail,
+                ecosystem: {
+                    id: ecosystemWalletId,
+                    partnerId,
+                },
+            });
+            setEmail(normalizedEmail);
+            setEmailCodeSent(true);
+        }
+        catch (error) {
+            setEmailError(error instanceof Error ? error.message : "Failed to send verification code");
+            await onError?.(error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const handleEmailLogin = async () => {
+        const normalizedEmail = email.trim().toLowerCase();
+        const normalizedCode = verificationCode.trim();
+        if (!EMAIL_REGEX.test(normalizedEmail)) {
+            setEmailError("Please enter a valid email address");
+            return;
+        }
+        if (!normalizedCode) {
+            setEmailError("Please enter your verification code");
+            return;
+        }
+        await connectWithOptions("email", {
+            strategy: "email",
+            email: normalizedEmail,
+            verificationCode: normalizedCode,
+        });
+    };
+    return (_jsx(LoginStepContainer, { partnerId: partnerId, children: showEmailFlow ? (_jsxs("div", { className: "mb-6 w-full space-y-3 px-3", children: [_jsx("p", { className: "text-center text-sm font-medium text-gray-900 dark:text-gray-100", children: "Sign in with email" }), _jsx(Input, { type: "email", placeholder: "you@example.com", value: email, onChange: event => setEmail(event.target.value), disabled: isLoading || emailCodeSent }), emailCodeSent && (_jsx(Input, { type: "text", placeholder: "Enter verification code", value: verificationCode, onChange: event => setVerificationCode(event.target.value), disabled: isLoading })), emailError && _jsx("p", { className: "text-sm text-red-500", children: emailError }), _jsx(Button, { onClick: emailCodeSent ? handleEmailLogin : handleSendEmailCode, disabled: isLoading, className: "w-full", children: isLoading ? "Loading..." : emailCodeSent ? "Verify code" : "Send code" }), emailCodeSent && (_jsx(Button, { variant: "outline", onClick: handleSendEmailCode, disabled: isLoading, className: "w-full", children: "Resend code" })), _jsx(Button, { variant: "outline", onClick: resetEmailFlow, disabled: isLoading, className: "w-full", children: "Back" })] })) : (_jsxs(_Fragment, { children: [authStrategies.length > 0 && (_jsx("div", { className: `mb-6 grid w-full gap-4 px-3 ${authStrategies.length > 4 ? "grid-cols-4" : ""}`, style: authStrategies.length <= 4
+                        ? { gridTemplateColumns: `repeat(${authGridColumns}, minmax(0, 1fr))` }
+                        : undefined, children: authStrategies.map(strategy => (_jsx(AuthButton, { strategy: strategy, onClick: () => handleConnect(strategy), isLoading: isLoading }, strategy))) })), _jsx("div", { className: "mb-4 w-full space-y-2", children: initialWallets.map(walletId => (_jsx(WalletRow, { walletId: walletId, onClick: () => handleConnect(walletId), isLoading: isLoading }, walletId))) }), additionalWallets.length > 0 && (_jsxs("div", { className: "w-full", children: [_jsx(Button, { onClick: () => setShowAllWallets(!showAllWallets), className: "mb-2 w-full bg-transparent text-gray-600 hover:bg-gray-100", children: showAllWallets ? "Show less" : "More options" }), showAllWallets && (_jsx("div", { className: "max-h-60 space-y-2 overflow-y-auto", children: additionalWallets.map(walletId => (_jsx(WalletRow, { walletId: walletId, onClick: () => handleConnect(walletId), isLoading: isLoading }, walletId))) }))] }))] })) }));
 }

package/dist/esm/global-account/react/components/SignInWithB3/utils/signInUtils.d.ts

@@ -3,15 +3,17 @@ import { SingleStepAuthArgsType, Wallet } from "thirdweb/wallets";
 type WalletType = Wallet["id"];
 type StrategyType = SingleStepAuthArgsType["strategy"];
 type CustomStrategyType = "basement" | "privy";
-type AllowedStrategies = StrategyType | WalletType | CustomStrategyType;
-export declare const allowedStrategies: readonly ["apple", "google", "x", "discord", "guest", "walletConnect", "io.metamask", "com.coinbase.wallet", "basement", "privy"];
+type AllowedStrategies = StrategyType | WalletType | CustomStrategyType | "email";
+type NonWalletStrategyType = Exclude<AllowedStrategies, WalletType>;
+export declare const allowedStrategies: readonly ["apple", "google", "github", "x", "discord", "email", "guest", "walletConnect", "io.metamask", "com.coinbase.wallet", "basement", "privy"];
 export type AllowedStrategy = (typeof allowedStrategies)[number];
 export declare function isWalletType(strategy: AllowedStrategies): strategy is WalletType;
-export declare function isStrategyType(strategy: AllowedStrategies): strategy is StrategyType;
+export declare function isStrategyType(strategy: AllowedStrategies): strategy is NonWalletStrategyType;
 export declare function getConnectOptionsFromStrategy(strategy: AllowedStrategy): {
     strategy: StrategyType;
     wallet?: Wallet;
     chain?: Chain;
 };
 export declare const strategyIcons: Record<string, string>;
+export declare const strategyLabels: Record<string, string>;
 export {};

package/dist/esm/global-account/react/components/SignInWithB3/utils/signInUtils.js

@@ -5,9 +5,10 @@ export const allowedStrategies = [
     // Auth strategies
     "apple",
     "google",
+    "github",
     "x",
     "discord",
-    // "github",
+    "email",
     "guest",
     // Wallet IDs
     "walletConnect",
@@ -29,6 +30,9 @@ export function getConnectOptionsFromStrategy(strategy) {
     if (!allowedStrategies.includes(strategy)) {
         throw new Error(`Invalid strategy: ${strategy}`);
     }
+    if (strategy === "email") {
+        throw new Error("Email strategy requires OTP flow and cannot be connected in a single step");
+    }
     if (isWalletType(strategy)) {
         return { strategy: "wallet", wallet: createWallet(strategy) };
     }
@@ -45,6 +49,15 @@ export const strategyIcons = {
     guest: "https://cdn.b3.fun/incognito.svg",
     // Add more strategies as needed
 };
+export const strategyLabels = {
+    google: "Google",
+    x: "X",
+    discord: "Discord",
+    apple: "Apple",
+    guest: "Guest",
+    github: "GitHub",
+    email: "Email",
+};
 // Test it
 // console.log(getConnectOptionsFromStrategy("io.metamask"));
 // console.log(getConnectOptionsFromStrategy("google"));

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

@@ -11,6 +11,9 @@ interface ToastContextType {
     addToast: (type: ToastType, message: string, duration?: number) => string;
     removeToast: (id: string) => void;
     clearAll: () => void;
+    headerMode: boolean;
+    setHeaderMode: (enabled: boolean) => void;
+    latestToast: ToastItem | null;
 }
 export declare function ToastProvider({ children }: {
     children: React.ReactNode;