@b3dotfun/sdk 0.1.69-alpha.2 → 0.1.69-alpha.20

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/ManageAccount/SettingsProfileCard.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ens_normalize } from "@adraffy/ens-normalize";
 import app from "../../../../global-account/app.js";
 import { toast, useAuthentication, useB3Config, useModalStore, useProfile } from "../../../../global-account/react/index.js";
+import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
 import { formatUsername } from "../../../../shared/utils/index.js";
 import { Check, Loader2, Pencil, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
@@ -25,8 +26,7 @@ const SettingsProfileCard = () => {
     const [editedUsername, setEditedUsername] = useState("");
     const [isSaving, setIsSaving] = useState(false);
     const inputRef = useRef(null);
-    // IPFSMediaRenderer will handle IPFS URL conversion and validation
-    const avatarSrc = user?.avatar || profile?.avatar;
+    const avatarSrc = validateImageUrl(user?.avatar) || validateImageUrl(profile?.avatar);
     // Get current username - prioritize user.username, fallback to profile data
     const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
     // Focus input when entering edit mode

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ALL_CHAINS, getExplorerTxUrl } from "../../../../anyspend/index.js";
 import { ChainTokenIcon } from "../../../../anyspend/react/components/common/ChainTokenIcon.js";
 import { toast, useAccountWallet, useAnalytics, useModalStore, useProfile, useSimBalance, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
+import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
 import { formatDisplayNumber, formatTokenAmount } from "../../../../shared/utils/number.js";
 import invariant from "invariant";
 import { CircleHelp, Clock, Loader2, Send as SendIcon, Wallet } from "lucide-react";
@@ -14,7 +15,8 @@ import { Button } from "../ui/button.js";
 // Component for displaying a recent address with profile data
 function RecentAddressItem({ address, onClick }) {
     const { data: profileData } = useProfile({ address });
-    return (_jsxs("button", { onClick: onClick, className: "flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]", children: [profileData?.avatar ? (_jsx("img", { src: profileData.avatar, alt: profileData.name || address, className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: _jsx(Wallet, { className: "h-5 w-5 text-[#a0a0ab]" }) })), _jsx("div", { className: "flex flex-col items-start", children: _jsxs("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b]", children: [address.slice(0, 6), "...", address.slice(-4), profileData?.name && ` (${profileData.name})`] }) })] }));
+    const validatedAvatar = validateImageUrl(profileData?.avatar);
+    return (_jsxs("button", { onClick: onClick, className: "flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]", children: [validatedAvatar ? (_jsx("img", { src: validatedAvatar, alt: profileData?.name || address, className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: _jsx(Wallet, { className: "h-5 w-5 text-[#a0a0ab]" }) })), _jsx("div", { className: "flex flex-col items-start", children: _jsxs("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b]", children: [address.slice(0, 6), "...", address.slice(-4), profileData?.name && ` (${profileData.name})`] }) })] }));
 }
 export function Send({ recipientAddress: initialRecipient, onSuccess }) {
     const { address } = useAccountWallet();
@@ -39,6 +41,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }) {
     const { data: validatedProfileData } = useProfile({
         address: showValidatedResult && recipientAddress && isAddress(recipientAddress) ? recipientAddress : undefined,
     });
+    const validatedRecipientAvatar = validateImageUrl(validatedProfileData?.avatar);
     // Address validation
     const handleRecipientAddressChange = (value) => {
         setRecipientAddress(value);
@@ -179,7 +182,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }) {
                 return "Send";
         }
     };
-    return (_jsxs("div", { className: "dark:bg-b3-background flex h-[600px] w-full flex-col bg-white", children: [_jsx(ModalHeader, { handleBack: handleBack, title: getStepTitle() }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [step === "recipient" && (_jsxs("div", { className: "flex flex-col gap-6 p-5", children: [_jsxs("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-12 w-full items-stretch overflow-hidden rounded-lg border border-[#d1d1d6] bg-white", children: [_jsx("div", { className: "flex w-12 items-center justify-center bg-transparent px-3 py-2", children: _jsx("span", { className: "font-neue-montreal-medium text-base text-[#3f3f46] dark:text-white", children: "To" }) }), _jsxs("div", { className: "flex flex-1 items-center border-l border-[#d1d1d6] px-3 py-2", children: [_jsx("input", { type: "text", value: recipientAddress, onChange: e => handleRecipientAddressChange(e.target.value), placeholder: "ENS or Address", className: "font-neue-montreal-medium dark:bg-b3-background flex-1 text-base text-[#70707b] outline-none placeholder:text-[#70707b] dark:text-white dark:placeholder:text-white" }), _jsx("button", { onClick: handlePaste, className: "font-inter ml-2 rounded-md border border-[#e4e4e7] bg-[#fafafa] px-2.5 py-0.5 text-sm font-medium text-[#3f3f46] transition-colors hover:bg-[#f4f4f5]", children: "Paste" })] })] }), addressError && _jsx("p", { className: "font-neue-montreal-medium -mt-4 text-xs text-red-500", children: addressError }), showValidatedResult && recipientAddress && isAddress(recipientAddress) && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#0b57c2]", children: "Result" }) }), _jsxs("button", { onClick: handleSelectValidatedAddress, className: "dark:bg-b3-background dark:border-b3-line flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]", children: [validatedProfileData?.avatar ? (_jsx("img", { src: validatedProfileData.avatar, alt: validatedProfileData.name || recipientAddress, className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: _jsx(Wallet, { className: "h-5 w-5 text-[#a0a0ab] dark:text-white" }) })), _jsxs("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b] dark:text-white", children: [recipientAddress.slice(0, 6), "...", recipientAddress.slice(-4), validatedProfileData?.name && ` (${validatedProfileData.name})`] })] })] })), recentAddresses.length > 0 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Clock, { className: "h-3.5 w-3.5 text-[#3f3f46]" }), _jsx("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#3f3f46]", children: "Recents" })] }), _jsx("div", { className: "flex flex-col", children: recentAddresses.map((recent, index) => (_jsx(RecentAddressItem, { address: recent.address, onClick: () => {
+    return (_jsxs("div", { className: "dark:bg-b3-background flex h-[600px] w-full flex-col bg-white", children: [_jsx(ModalHeader, { handleBack: handleBack, title: getStepTitle() }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [step === "recipient" && (_jsxs("div", { className: "flex flex-col gap-6 p-5", children: [_jsxs("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-12 w-full items-stretch overflow-hidden rounded-lg border border-[#d1d1d6] bg-white", children: [_jsx("div", { className: "flex w-12 items-center justify-center bg-transparent px-3 py-2", children: _jsx("span", { className: "font-neue-montreal-medium text-base text-[#3f3f46] dark:text-white", children: "To" }) }), _jsxs("div", { className: "flex flex-1 items-center border-l border-[#d1d1d6] px-3 py-2", children: [_jsx("input", { type: "text", value: recipientAddress, onChange: e => handleRecipientAddressChange(e.target.value), placeholder: "ENS or Address", className: "font-neue-montreal-medium dark:bg-b3-background flex-1 text-base text-[#70707b] outline-none placeholder:text-[#70707b] dark:text-white dark:placeholder:text-white" }), _jsx("button", { onClick: handlePaste, className: "font-inter ml-2 rounded-md border border-[#e4e4e7] bg-[#fafafa] px-2.5 py-0.5 text-sm font-medium text-[#3f3f46] transition-colors hover:bg-[#f4f4f5]", children: "Paste" })] })] }), addressError && _jsx("p", { className: "font-neue-montreal-medium -mt-4 text-xs text-red-500", children: addressError }), showValidatedResult && recipientAddress && isAddress(recipientAddress) && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#0b57c2]", children: "Result" }) }), _jsxs("button", { onClick: handleSelectValidatedAddress, className: "dark:bg-b3-background dark:border-b3-line flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]", children: [validatedRecipientAvatar ? (_jsx("img", { src: validatedRecipientAvatar, alt: validatedProfileData?.name || recipientAddress, className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "dark:border-b3-line dark:bg-b3-background flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: _jsx(Wallet, { className: "h-5 w-5 text-[#a0a0ab] dark:text-white" }) })), _jsxs("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b] dark:text-white", children: [recipientAddress.slice(0, 6), "...", recipientAddress.slice(-4), validatedProfileData?.name && ` (${validatedProfileData.name})`] })] })] })), recentAddresses.length > 0 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Clock, { className: "h-3.5 w-3.5 text-[#3f3f46]" }), _jsx("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#3f3f46]", children: "Recents" })] }), _jsx("div", { className: "flex flex-col", children: recentAddresses.map((recent, index) => (_jsx(RecentAddressItem, { address: recent.address, onClick: () => {
                                                 // Just fill the input and show validation - don't auto-proceed
                                                 handleRecipientAddressChange(recent.address);
                                             } }, index))) })] }))] })), step === "token" && (_jsx("div", { className: "flex flex-col p-5", children: isLoadingBalance ? (_jsx("div", { className: "space-y-4", children: _jsx("div", { className: "space-y-1", children: [...Array(3)].map((_, index) => (_jsxs("div", { className: "flex items-center justify-between rounded-xl p-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-b3-line h-10 w-10 animate-pulse rounded-full" }), _jsxs("div", { children: [_jsx("div", { className: "bg-b3-line mb-1 h-4 w-16 animate-pulse rounded" }), _jsx("div", { className: "bg-b3-line h-3 w-24 animate-pulse rounded" })] })] }), _jsxs("div", { className: "text-right", children: [_jsx("div", { className: "bg-b3-line mb-1 h-4 w-20 animate-pulse rounded" }), _jsx("div", { className: "bg-b3-line h-3 w-16 animate-pulse rounded" })] })] }, index))) }) })) : simBalance?.balances && simBalance.balances.length > 0 ? (_jsx("div", { className: "space-y-4", children: _jsx("div", { className: "space-y-1", children: simBalance.balances.map(token => (_jsxs("div", { className: "hover:bg-b3-line/60 dark:hover:bg-b3-primary-wash/40 group flex cursor-pointer items-center justify-between rounded-xl p-3 transition-all duration-200", onClick: () => {

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

@@ -0,0 +1,21 @@
+export interface BetterAuthResetPasswordProps {
+    /** The reset token from the URL query param */
+    token: string;
+    /** Called after password is successfully reset */
+    onSuccess?: () => void;
+    /** Called on error */
+    onError?: (error: Error) => void;
+    /** Optional class name */
+    className?: string;
+}
+/**
+ * Standalone reset password form. Render this on your reset password page.
+ * Reads the token from props (extract it from the URL query string).
+ *
+ * Usage:
+ * ```tsx
+ * const token = new URLSearchParams(window.location.search).get("token");
+ * <BetterAuthResetPassword token={token} onSuccess={() => navigate("/login")} />
+ * ```
+ */
+export declare function BetterAuthResetPassword({ token, onSuccess, onError, className }: BetterAuthResetPasswordProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input } from "../../../../global-account/react/index.js";
+import { debugB3React } from "../../../../shared/utils/debug.js";
+import { useState } from "react";
+import { useBetterAuth } from "../../hooks/useBetterAuth.js";
+const debug = debugB3React("BetterAuthResetPassword");
+/**
+ * Standalone reset password form. Render this on your reset password page.
+ * Reads the token from props (extract it from the URL query string).
+ *
+ * Usage:
+ * ```tsx
+ * const token = new URLSearchParams(window.location.search).get("token");
+ * <BetterAuthResetPassword token={token} onSuccess={() => navigate("/login")} />
+ * ```
+ */
+export function BetterAuthResetPassword({ token, onSuccess, onError, className }) {
+    const { resetPassword } = useBetterAuth();
+    const [password, setPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [success, setSuccess] = useState(false);
+    const handleSubmit = async () => {
+        if (!password) {
+            setError("Please enter a new password");
+            return;
+        }
+        if (password.length < 8) {
+            setError("Password must be at least 8 characters");
+            return;
+        }
+        if (password !== confirmPassword) {
+            setError("Passwords do not match");
+            return;
+        }
+        try {
+            setIsLoading(true);
+            setError(null);
+            await resetPassword(password, token);
+            setSuccess(true);
+            debug("Password reset successful");
+            onSuccess?.();
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : "Password reset failed";
+            setError(message);
+            debug("Password reset failed", err);
+            onError?.(err);
+        }
+        finally {
+            setPassword("");
+            setConfirmPassword("");
+            setIsLoading(false);
+        }
+    };
+    if (!token) {
+        return (_jsx("div", { className: `w-full max-w-[400px] px-6 text-center ${className || ""}`, children: _jsx("p", { className: "text-sm text-red-500", children: "Invalid or missing reset token." }) }));
+    }
+    return (_jsxs("div", { className: `w-full max-w-[400px] px-6 ${className || ""}`, children: [_jsxs("div", { className: "mb-10 text-center", children: [_jsx("h1", { className: "text-[28px] font-semibold tracking-tight text-gray-900 dark:text-gray-100", children: success ? "Password reset" : "Set new password" }), _jsx("p", { className: "mt-3 text-[15px] text-gray-500 dark:text-gray-400", children: success ? "Your password has been updated." : "Enter your new password below." })] }), success ? (_jsx("div", { className: "space-y-4 text-center", children: _jsx("div", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100", children: _jsx("svg", { className: "h-6 w-6 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }) })) : (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "New password" }), _jsx(Input, { type: "password", placeholder: "At least 8 characters", value: password, onChange: e => setPassword(e.target.value), disabled: isLoading, className: "h-11 px-4 text-[15px]" })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "Confirm password" }), _jsx(Input, { type: "password", placeholder: "Repeat your password", value: confirmPassword, onChange: e => setConfirmPassword(e.target.value), disabled: isLoading, onKeyDown: e => {
+                                    if (e.key === "Enter")
+                                        handleSubmit();
+                                }, className: "h-11 px-4 text-[15px]" })] }), error && _jsx("p", { className: "text-sm text-red-500", children: error }), _jsx(Button, { onClick: handleSubmit, disabled: isLoading, className: "h-11 w-full bg-gray-900 text-[15px] font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100", children: isLoading ? "Resetting..." : "Reset password" })] }))] }));
+}

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

@@ -0,0 +1,34 @@
+import { type BetterAuthSocialProvider } from "../../hooks/useBetterAuth";
+export interface BetterAuthSignInProps {
+    /** Title displayed above the form. Default: "Welcome back" for sign-in, "Create an account" for sign-up */
+    title?: string;
+    /** Subtitle displayed below the title */
+    subtitle?: string;
+    /** Which social providers to show. Defaults to all. Pass empty array to hide. */
+    socialProviders?: BetterAuthSocialProvider[];
+    /** Show email/password form. Default: true */
+    showEmail?: boolean;
+    /** URL to redirect to after password reset link is clicked. Token is appended as ?token=... */
+    passwordResetRedirectTo?: string;
+    /** Called after successful authentication */
+    onSuccess?: () => void;
+    /** Called on authentication error */
+    onError?: (error: Error) => void;
+    /** Optional class name for the root container */
+    className?: string;
+}
+/**
+ * Standalone inline sign-in component for Better Auth.
+ *
+ * Renders directly — no modal, no button wrapper. Designed for full-page
+ * sign-in layouts (e.g., B3OS web with branding on the left, form on the right).
+ *
+ * Usage:
+ * ```tsx
+ * <BetterAuthSignIn
+ *   socialProviders={["google", "github"]}
+ *   onSuccess={() => router.push("/dashboard")}
+ * />
+ * ```
+ */
+export declare function BetterAuthSignIn({ title, subtitle, socialProviders, showEmail, passwordResetRedirectTo, onSuccess, onError, className, }: BetterAuthSignInProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Input, useAuthStore } from "../../../../global-account/react/index.js";
+import { debugB3React } from "../../../../shared/utils/debug.js";
+import { useState } from "react";
+import { EmailVerificationRequiredError, useBetterAuth, } from "../../hooks/useBetterAuth.js";
+import { strategyIcons, strategyLabels } from "./utils/signInUtils.js";
+const debug = debugB3React("BetterAuthSignIn");
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const DEFAULT_SOCIAL_PROVIDERS = [
+    { id: "google", label: "Google" },
+    { id: "github", label: "GitHub" },
+    { id: "discord", label: "Discord" },
+    { id: "microsoft", label: "Microsoft" },
+    { id: "slack", label: "Slack" },
+];
+/**
+ * Standalone inline sign-in component for Better Auth.
+ *
+ * Renders directly — no modal, no button wrapper. Designed for full-page
+ * sign-in layouts (e.g., B3OS web with branding on the left, form on the right).
+ *
+ * Usage:
+ * ```tsx
+ * <BetterAuthSignIn
+ *   socialProviders={["google", "github"]}
+ *   onSuccess={() => router.push("/dashboard")}
+ * />
+ * ```
+ */
+export function BetterAuthSignIn({ title, subtitle = "Enter your credentials to access your account", socialProviders = DEFAULT_SOCIAL_PROVIDERS.map(p => p.id), showEmail = true, passwordResetRedirectTo, onSuccess, onError, className, }) {
+    const { signInWithEmail, signUpWithEmail, signInWithSocial, requestPasswordReset } = useBetterAuth();
+    const isAuthenticated = useAuthStore(state => state.isAuthenticated);
+    const [mode, setMode] = useState("sign-in");
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [name, setName] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const [loadingProvider, setLoadingProvider] = useState(null);
+    const [error, setError] = useState(null);
+    const [resetEmailSent, setResetEmailSent] = useState(false);
+    const [verificationSent, setVerificationSent] = useState(false);
+    const resolvedTitle = title ||
+        (mode === "forgot-password" ? "Reset password" : mode === "sign-in" ? "Welcome back" : "Create an account");
+    const resolvedSubtitle = mode === "forgot-password"
+        ? "Enter your email and we'll send you a reset link"
+        : subtitle || "Enter your credentials to access your account";
+    const handleForgotPassword = async () => {
+        const normalizedEmail = email.trim().toLowerCase();
+        if (!EMAIL_REGEX.test(normalizedEmail)) {
+            setError("Please enter a valid email address");
+            return;
+        }
+        try {
+            setIsLoading(true);
+            setError(null);
+            await requestPasswordReset(normalizedEmail, passwordResetRedirectTo);
+            setResetEmailSent(true);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : "Failed to send reset email";
+            setError(message);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const providers = socialProviders
+        .map(id => DEFAULT_SOCIAL_PROVIDERS.find(p => p.id === id))
+        .filter((p) => !!p);
+    if (isAuthenticated) {
+        return null;
+    }
+    const handleEmailSubmit = async () => {
+        const normalizedEmail = email.trim().toLowerCase();
+        if (!EMAIL_REGEX.test(normalizedEmail)) {
+            setError("Please enter a valid email address");
+            return;
+        }
+        if (!password) {
+            setError("Please enter a password");
+            return;
+        }
+        if (mode === "sign-up" && !name.trim()) {
+            setError("Please enter your name");
+            return;
+        }
+        try {
+            setIsLoading(true);
+            setError(null);
+            if (mode === "sign-up") {
+                await signUpWithEmail(normalizedEmail, password, name.trim());
+            }
+            else {
+                await signInWithEmail(normalizedEmail, password);
+            }
+            debug("Auth successful");
+            onSuccess?.();
+        }
+        catch (err) {
+            if (err instanceof EmailVerificationRequiredError) {
+                setVerificationSent(true);
+                setError(null);
+            }
+            else {
+                const message = err instanceof Error ? err.message : "Authentication failed";
+                setError(message);
+                onError?.(err);
+            }
+            debug("Auth failed", err);
+        }
+        finally {
+            setPassword("");
+            setIsLoading(false);
+        }
+    };
+    const handleSocialSignIn = async (provider) => {
+        try {
+            setIsLoading(true);
+            setLoadingProvider(provider);
+            setError(null);
+            await signInWithSocial(provider);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : `Sign in failed`;
+            setError(message);
+            onError?.(err);
+            setIsLoading(false);
+            setLoadingProvider(null);
+        }
+    };
+    if (verificationSent) {
+        return (_jsx("div", { className: `w-full max-w-[400px] px-6 ${className || ""}`, children: _jsxs("div", { className: "flex flex-col items-center gap-6 text-center", children: [_jsx("div", { className: "flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-green-100", children: _jsx("svg", { className: "h-7 w-7 shrink-0 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", width: 28, height: 28, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }) }), _jsx("h2", { className: "text-[22px] font-semibold text-gray-900 dark:text-gray-100", children: "Check your email" }), _jsxs("p", { className: "text-[15px] text-gray-500 dark:text-gray-400", children: ["We sent a verification link to ", _jsx("span", { className: "font-medium text-gray-700 dark:text-gray-200", children: email }), ". Click the link to verify your account, then come back and sign in."] }), _jsx("button", { onClick: () => {
+                            setVerificationSent(false);
+                            setMode("sign-in");
+                            setPassword("");
+                        }, className: "text-[14px] font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400", children: "Back to sign in" })] }) }));
+    }
+    return (_jsxs("div", { className: `w-full max-w-[400px] px-6 ${className || ""}`, children: [_jsxs("div", { className: "mb-10 text-center", children: [_jsx("h1", { className: "text-[28px] font-semibold tracking-tight text-gray-900 dark:text-gray-100", children: resolvedTitle }), _jsx("p", { className: "mt-3 text-[15px] text-gray-500 dark:text-gray-400", children: resolvedSubtitle })] }), mode === "forgot-password" && (_jsxs("div", { className: "space-y-5", children: [resetEmailSent ? (_jsxs("div", { className: "space-y-4 text-center", children: [_jsx("div", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100", children: _jsx("svg", { className: "h-6 w-6 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }), _jsx("p", { className: "text-[15px] text-gray-600 dark:text-gray-300", children: "Check your email for a reset link." })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "Email" }), _jsx(Input, { type: "email", placeholder: "name@company.com", value: email, onChange: e => setEmail(e.target.value), disabled: isLoading, onKeyDown: e => {
+                                            if (e.key === "Enter")
+                                                handleForgotPassword();
+                                        }, className: "h-11 px-4 text-[15px]" })] }), error && _jsx("p", { className: "text-sm text-red-500", children: error }), _jsx(Button, { onClick: handleForgotPassword, disabled: isLoading, className: "h-11 w-full bg-gray-900 text-[15px] font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100", children: isLoading ? "Sending..." : "Send reset link" })] })), _jsx("p", { className: "mt-8 text-center text-[14px] text-gray-500 dark:text-gray-400", children: _jsx("button", { onClick: () => {
+                                setMode("sign-in");
+                                setError(null);
+                                setResetEmailSent(false);
+                            }, className: "font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400", children: "Back to sign in" }) })] })), showEmail && mode !== "forgot-password" && (_jsxs("div", { className: "space-y-5", children: [mode === "sign-up" && (_jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "Name" }), _jsx(Input, { type: "text", placeholder: "Your name", value: name, onChange: e => setName(e.target.value), disabled: isLoading, className: "h-11 px-4 text-[15px]" })] })), _jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "Email" }), _jsx(Input, { type: "email", placeholder: "name@company.com", value: email, onChange: e => setEmail(e.target.value), disabled: isLoading, className: "h-11 px-4 text-[15px]" })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("label", { className: "block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "Password" }), mode === "sign-in" && (_jsx("button", { type: "button", onClick: () => {
+                                            setMode("forgot-password");
+                                            setError(null);
+                                        }, className: "text-xs font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400", children: "Forgot password?" }))] }), _jsx(Input, { type: "password", placeholder: "Password", value: password, onChange: e => setPassword(e.target.value), disabled: isLoading, onKeyDown: e => {
+                                    if (e.key === "Enter")
+                                        handleEmailSubmit();
+                                }, className: "h-11 px-4 text-[15px]" })] }), error && _jsx("p", { className: "text-sm text-red-500", children: error }), _jsx(Button, { onClick: handleEmailSubmit, disabled: isLoading, className: "h-11 w-full bg-gray-900 text-[15px] font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100", children: isLoading ? "Loading..." : mode === "sign-in" ? "Sign in" : "Sign up" })] })), providers.length > 0 && mode !== "forgot-password" && (_jsxs(_Fragment, { children: [showEmail && (_jsxs("div", { className: "my-8 flex items-center gap-4", children: [_jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-gray-700" }), _jsx("span", { className: "text-xs text-gray-400", children: "Or continue with" }), _jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-gray-700" })] })), _jsx("div", { className: "space-y-4", children: providers.map(provider => {
+                            const icon = strategyIcons[provider.id];
+                            const label = strategyLabels[provider.id] || provider.label;
+                            const isProviderLoading = loadingProvider === provider.id;
+                            return (_jsxs("button", { onClick: () => handleSocialSignIn(provider.id), disabled: isLoading, style: { paddingTop: "12px", paddingBottom: "12px" }, className: "flex w-full items-center justify-center gap-3 rounded-lg border border-gray-200 bg-white px-4 text-[14px] font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700", children: [isProviderLoading ? (_jsxs("svg", { className: "h-5 w-5 animate-spin text-gray-400", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })] })) : (icon && _jsx("img", { src: icon, alt: "", className: "h-5 w-5" })), _jsx("span", { children: isProviderLoading ? "Redirecting..." : label })] }, provider.id));
+                        }) })] })), showEmail && mode !== "forgot-password" && (_jsxs("p", { className: "mt-8 text-center text-[14px] text-gray-500 dark:text-gray-400", children: [mode === "sign-in" ? "Don't have an account? " : "Already have an account? ", _jsx("button", { onClick: () => {
+                            setMode(mode === "sign-in" ? "sign-up" : "sign-in");
+                            setError(null);
+                        }, disabled: isLoading, className: "font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400", children: mode === "sign-in" ? "Sign up" : "Sign in" })] }))] }));
+}

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Loading, useAuthentication, useAuthStore, useB3Config, useGetAllTWSigners, useModalStore, } from "../../../../global-account/react/index.js";
+import { LoginStepBetterAuth } from "./steps/LoginStepBetterAuth.js";
 import { debugB3React } from "../../../../shared/utils/debug.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
@@ -13,18 +14,20 @@ const MAX_REFETCH_ATTEMPTS = 20;
  * Handles different login providers, authentication steps, and session key management
  */
 export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin = false, source = "signInWithB3Button", signersEnabled = false, }) {
-    const { automaticallySetFirstEoa } = useB3Config();
+    const { automaticallySetFirstEoa, authStrategy } = useB3Config();
     // skipAutoConnect: this component intentionally logs out on mount to show a fresh login screen.
     // AuthenticationProvider is the sole owner of useAutoConnect to avoid competing auth cycles.
     const { user, logout } = useAuthentication(partnerId, { skipAutoConnect: true });
     // Tracks whether the pre-login logout has finished.
     // We must not render ConnectEmbed until logout (wallet disconnect) completes,
     // otherwise the wallet state disrupts ConnectEmbed causing a blank modal.
-    const [readyToShowLogin, setReadyToShowLogin] = useState(source === "requestPermissions");
+    const [readyToShowLogin, setReadyToShowLogin] = useState(source === "requestPermissions" || authStrategy === "better-auth");
     const hasLoggedOutRef = useRef(false);
     useEffect(() => {
         if (hasLoggedOutRef.current)
             return;
+        if (authStrategy === "better-auth")
+            return;
         if (source !== "requestPermissions") {
             debug("Logging out before login");
             hasLoggedOutRef.current = true;
@@ -32,7 +35,7 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
                 setReadyToShowLogin(true);
             });
         }
-    }, [source, logout]);
+    }, [source, logout, authStrategy]);
     const [step, setStep] = useState(source === "requestPermissions" ? null : "login");
     const [sessionKeyAdded, setSessionKeyAdded] = useState(source === "requestPermissions" ? true : false);
     const { setB3ModalContentType, setB3ModalOpen, isOpen, contentType } = useModalStore();
@@ -237,7 +240,13 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
     else if (step === "login") {
         // Show loading spinner while: authenticating, waiting for pre-login logout to finish,
         // or fetching signers.
-        if (!readyToShowLogin || isAuthenticating || isFetchingSigners) {
+        if (authStrategy === "better-auth") {
+            // Better Auth manages its own loading/verification states internally.
+            // Don't gate on isAuthenticating — it would unmount the component
+            // and lose verification state when setIsAuthenticating(false) fires.
+            content = _jsx(LoginStepBetterAuth, { onSuccess: () => handleLoginSuccess({}), onError: onError });
+        }
+        else if (!readyToShowLogin || isAuthenticating || isFetchingSigners) {
             content = (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: _jsx(Loading, { variant: "white", size: "lg" }) }) }));
         }
         else {

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/LoginStepBetterAuth.d.ts

@@ -0,0 +1,6 @@
+interface LoginStepBetterAuthProps {
+    onSuccess?: () => void;
+    onError?: (error: Error) => Promise<void>;
+}
+export declare function LoginStepBetterAuth({ onSuccess, onError }: LoginStepBetterAuthProps): import("react/jsx-runtime").JSX.Element;
+export {};