@b3dotfun/sdk 0.1.69-test.0 → 0.1.70-alpha.1

package/src/global-account/react/components/ManageAccount/Header.tsx

@@ -2,6 +2,7 @@ import {
   CopyToClipboard,
   ManageAccountModalProps,
   useAuthentication,
+  useB3Config,
   useModalStore,
 } from "@b3dotfun/sdk/global-account/react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
@@ -10,6 +11,7 @@ import { Loader2 } from "lucide-react";
 import { useState } from "react";
 import { useActiveWallet, useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
 import { Wallet } from "thirdweb/wallets";
+import { UserAvatar } from "../UserAvatar/UserAvatar";
 import { ChevronDownIcon } from "../icons/ChevronDownIcon";
 import LinkIcon from "../icons/LinkIcon";
 import SignOutIcon from "../icons/SignOutIcon";
@@ -89,7 +91,69 @@ function WalletItem({ wallet, isActive, onClick }: { wallet: Wallet; isActive: b
   );
 }
 
+function BetterAuthHeader({ onLogout }: { onLogout?: () => void }) {
+  const contentType = useModalStore(state => state.contentType) as ManageAccountModalProps;
+  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+  const partnerId = contentType?.partnerId;
+  const { logout, user } = useAuthentication(partnerId);
+  const [logoutLoading, setLogoutLoading] = useState(false);
+
+  const displayName = user?.username || user?.email || "Account";
+
+  const onLogoutEnhanced = async () => {
+    setLogoutLoading(true);
+    try {
+      await logout();
+      onLogout?.();
+    } finally {
+      setB3ModalOpen(false);
+      setLogoutLoading(false);
+    }
+  };
+
+  return (
+    <div className="bg-b3-background border-b3-line flex items-center justify-between border-b px-5 py-3">
+      <div className="flex items-center gap-2">
+        <UserAvatar avatarUrl={user?.avatar} name={displayName} size={40} className="shrink-0" />
+        <div className="flex flex-col gap-0.5">
+          {user?.username && (
+            <p className="text-b3-grey font-neue-montreal-semibold text-left text-sm">{user.username}</p>
+          )}
+          {user?.email && (
+            <div className="flex items-center gap-1">
+              <p className="text-b3-foreground-muted font-neue-montreal-medium text-sm">{user.email}</p>
+              <CopyToClipboard text={user.email} />
+            </div>
+          )}
+        </div>
+      </div>
+      <button
+        className="border-b3-line hover:bg-b3-line flex items-center justify-center gap-1.5 rounded-xl border border-solid px-3 py-2 transition-colors"
+        onClick={onLogoutEnhanced}
+        disabled={logoutLoading}
+      >
+        {logoutLoading ? (
+          <Loader2 className="animate-spin" size={16} />
+        ) : (
+          <SignOutIcon size={16} className="text-b3-grey" />
+        )}
+        <p className="text-b3-grey font-neue-montreal-semibold text-sm">Sign out</p>
+      </button>
+    </div>
+  );
+}
+
 export function Header({ onLogout }: { onLogout?: () => void }) {
+  const { authStrategy } = useB3Config();
+
+  if (authStrategy === "better-auth") {
+    return <BetterAuthHeader onLogout={onLogout} />;
+  }
+
+  return <WalletHeader onLogout={onLogout} />;
+}
+
+function WalletHeader({ onLogout }: { onLogout?: () => void }) {
   const activeWallet = useActiveWallet();
 
   const connectedWallets = useConnectedWallets();
@@ -110,10 +174,13 @@ export function Header({ onLogout }: { onLogout?: () => void }) {
 
   const onLogoutEnhanced = async () => {
     setLogoutLoading(true);
-    await logout();
-    onLogout?.();
-    setB3ModalOpen(false);
-    setLogoutLoading(false);
+    try {
+      await logout();
+      onLogout?.();
+    } finally {
+      setB3ModalOpen(false);
+      setLogoutLoading(false);
+    }
   };
 
   const handleWalletSwitch = (wallet: Wallet) => {

package/src/global-account/react/components/ManageAccount/HomeContent.tsx

@@ -1,3 +1,4 @@
+import { useB3Config } from "@b3dotfun/sdk/global-account/react";
 import { Tabs, TabsContent, TabsList, TabTrigger } from "../ui/Tabs";
 import { Header } from "./Header";
 import HomeActions from "./HomeActions";
@@ -11,31 +12,36 @@ interface HomeContentProps {
 }
 
 export function HomeContent({ showDeposit = false, showSwap = true }: HomeContentProps) {
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
+
   return (
     <div className="flex flex-col">
       <Header />
       <div className="flex flex-col">
         <ProfileSection />
 
-        <HomeActions showDeposit={showDeposit} showSwap={showSwap} />
-        <div className="b3-modal-balance-content space-y-2 p-5">
-          <Tabs defaultValue={"balance"}>
-            <TabsList className="b3-modal-balance-tabs-list">
-              <TabTrigger value="balance" className="font-neue-montreal-semibold p-0 pr-3">
-                Balance
-              </TabTrigger>
-              <TabTrigger value="nfts" className="font-neue-montreal-semibold p-0 pr-3">
-                NFTs
-              </TabTrigger>
-            </TabsList>
-            <TabsContent value="balance" className="px-0 pb-4 pt-2">
-              <TokenContent />
-            </TabsContent>
-            <TabsContent value="nfts" className="px-0 pb-4 pt-2">
-              <NFTContent />
-            </TabsContent>
-          </Tabs>
-        </div>
+        {!isBetterAuth && <HomeActions showDeposit={showDeposit} showSwap={showSwap} />}
+        {!isBetterAuth && (
+          <div className="b3-modal-balance-content space-y-2 p-5">
+            <Tabs defaultValue={"balance"}>
+              <TabsList className="b3-modal-balance-tabs-list">
+                <TabTrigger value="balance" className="font-neue-montreal-semibold p-0 pr-3">
+                  Balance
+                </TabTrigger>
+                <TabTrigger value="nfts" className="font-neue-montreal-semibold p-0 pr-3">
+                  NFTs
+                </TabTrigger>
+              </TabsList>
+              <TabsContent value="balance" className="px-0 pb-4 pt-2">
+                <TokenContent />
+              </TabsContent>
+              <TabsContent value="nfts" className="px-0 pb-4 pt-2">
+                <NFTContent />
+              </TabsContent>
+            </Tabs>
+          </div>
+        )}
       </div>
     </div>
   );

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

@@ -2,6 +2,7 @@ import {
   ManageAccountModalProps,
   TabsContentPrimitive,
   TabsPrimitive,
+  useB3Config,
   useModalStore,
 } from "@b3dotfun/sdk/global-account/react";
 import { Chain } from "thirdweb";
@@ -74,9 +75,21 @@ export function ManageAccount({
   showSwap,
   showDeposit,
 }: ManageAccountProps) {
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
   const contentType = useModalStore(state => state.contentType);
   const { activeTab = "home", setActiveTab } = contentType as ManageAccountModalProps;
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+
+  // Better Auth: single-view layout — no Home/Swap tabs, just settings content
+  if (isBetterAuth) {
+    return (
+      <div className="b3-manage-account flex-1">
+        <SettingsContent partnerId={partnerId} onLogout={onLogout} chain={chain} />
+      </div>
+    );
+  }
+
   return (
     <div className="b3-manage-account flex-1">
       <TabsPrimitive

package/src/global-account/react/components/ManageAccount/ProfileSection.tsx

@@ -1,11 +1,13 @@
 import {
   useAccountWallet,
+  useB3Config,
   useModalStore,
   useProfile,
   useSimBalance,
   useUser,
 } from "@b3dotfun/sdk/global-account/react";
 import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
+import { AVATAR_COLORS } from "@b3dotfun/sdk/shared/constants";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import Avatar from "boring-avatars";
@@ -15,9 +17,9 @@ import { useActiveAccount } from "thirdweb/react";
 import { useFirstEOA } from "../../hooks/useFirstEOA";
 import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
 
-const AVATAR_COLORS = ["#3368ef", "#272727", "#6366f1", "#06b6d4", "#eeb0d9", "#ba3fbf", "#ff777b", "#dfbb53"];
-
 const ProfileSection = () => {
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
   const account = useActiveAccount();
   const { address: eoaAddress } = useFirstEOA();
   const { address: smartWalletAddress } = useAccountWallet();
@@ -60,7 +62,7 @@ const ProfileSection = () => {
   }, [avatarSrc]);
 
   const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
-  const avatarSeed = eoaAddress || account?.address || smartWalletAddress || currentUsername || "user";
+  const avatarSeed = eoaAddress || account?.address || smartWalletAddress || currentUsername || user?.email || "user";
 
   return (
     <div className="flex items-center justify-between px-5 py-6">
@@ -87,13 +89,18 @@ const ProfileSection = () => {
           </button>
         </div>
         <div className="global-account-profile-info flex flex-col gap-1">
-          <h2 className="text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl">
-            <div className="text-b3-foreground-muted"> $</div>
-            <div className="text-[30px]">{formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 })}</div>
-          </h2>
+          {!isBetterAuth && (
+            <h2 className="text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl">
+              <div className="text-b3-foreground-muted"> $</div>
+              <div className="text-[30px]">{formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 })}</div>
+            </h2>
+          )}
           <div className="b3-modal-username font-neue-montreal-semibold text-base leading-none text-[#0B57C2]">
             {currentUsername}
           </div>
+          {isBetterAuth && user?.email && (
+            <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">{user.email}</div>
+          )}
         </div>
       </div>
     </div>

package/src/global-account/react/components/ManageAccount/SettingsContent.tsx

@@ -1,7 +1,7 @@
-import { useAuthentication, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { useAuthentication, useB3Config, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { getSessionDurationDays, SESSION_DURATION_LABELS } from "@b3dotfun/sdk/shared/utils/session-duration";
-import { Loader2 } from "lucide-react";
+import { Bell, Clock, Link, Loader2 } from "lucide-react";
 import { useState } from "react";
 import { Chain } from "thirdweb";
 import { useProfiles } from "thirdweb/react";
@@ -19,6 +19,8 @@ const SettingsContent = ({
   onLogout?: () => void;
   chain: Chain;
 }) => {
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
   const { logout, user } = useAuthentication(partnerId);
@@ -58,7 +60,7 @@ const SettingsContent = ({
 
   return (
     <div className="flex h-[470px] flex-col">
-      <ModalHeader showBackButton={false} showCloseButton={false} title="Settings" />
+      {!isBetterAuth && <ModalHeader showBackButton={false} showCloseButton={false} title="Settings" />}
 
       {/* Profile Section */}
       <div className="p-5">
@@ -69,41 +71,22 @@ const SettingsContent = ({
 
       {/* Menu Items */}
       <div className="space-y-3 px-5">
+        {!isBetterAuth && (
+          <SettingsMenuItem
+            icon={<Link size={18} className="text-[#51525c]" />}
+            title="Linked Accounts"
+            subtitle={`${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`}
+            onClick={() => handleNavigate("linkAccount")}
+          />
+        )}
         <SettingsMenuItem
-          icon={
-            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <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"
-              />
-            </svg>
-          }
-          title="Linked Accounts"
-          subtitle={`${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`}
-          onClick={() => handleNavigate("linkAccount")}
-        />
-        <SettingsMenuItem
-          icon={
-            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <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"
-              />
-            </svg>
-          }
+          icon={<Bell size={18} className="text-[#51525c]" />}
           title="Notifications"
           subtitle="Manage your notifications"
           onClick={() => handleNavigate("notifications")}
         />
         <SettingsMenuItem
-          icon={
-            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <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"
-              />
-            </svg>
-          }
+          icon={<Clock size={18} className="text-[#51525c]" />}
           title="Stay signed in"
           subtitle={SESSION_DURATION_LABELS[sessionDays] ?? `${sessionDays} days`}
           onClick={() => handleNavigate("sessionDuration")}

package/src/global-account/react/components/ManageAccount/SettingsProfileCard.tsx

@@ -18,7 +18,8 @@ const SettingsProfileCard = () => {
     address: eoaAddress || account?.address,
     fresh: true,
   });
-  const { partnerId } = useB3Config();
+  const { partnerId, authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
   const { user, setUser } = useAuthentication(partnerId);
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
@@ -78,25 +79,33 @@ const SettingsProfileCard = () => {
 
     setIsSaving(true);
     try {
-      const sanitizedUsername = ens_normalize(editedUsername.trim());
-      const b3Username = `${sanitizedUsername}.b3.fun`;
-      const usernameSignMessage = `Register "${b3Username}"`;
-      const usernameSignature = await account?.signMessage({ message: usernameSignMessage });
-
-      if (!usernameSignature) {
-        throw new Error("Failed to sign username registration message");
+      let updatedUser: Users;
+      if (isBetterAuth) {
+        // Better Auth: register username without wallet signing (DB-only, no ENS)
+        // Skip ens_normalize — it rejects underscores/mixed-case that are valid non-ENS usernames
+        const sanitizedUsername = editedUsername.trim().toLowerCase();
+        // Type assertion needed: b3-mono now accepts message/hash as optional for Better Auth users
+        updatedUser = (await app
+          .service("users")
+          .registerUsername({ username: sanitizedUsername } as any, {} as any)) as unknown as Users;
+      } else {
+        // Thirdweb: register username with wallet signature + on-chain ENS
+        const sanitizedUsername = ens_normalize(editedUsername.trim());
+        const b3Username = `${sanitizedUsername}.b3.fun`;
+        const usernameSignMessage = `Register "${b3Username}"`;
+        const usernameSignature = await account?.signMessage({ message: usernameSignMessage });
+
+        if (!usernameSignature) {
+          throw new Error("Failed to sign username registration message");
+        }
+
+        updatedUser = (await app
+          .service("users")
+          .registerUsername(
+            { username: sanitizedUsername, message: usernameSignMessage, hash: usernameSignature },
+            {} as any,
+          )) as unknown as Users;
       }
-
-      console.log("@@usernameSignature", usernameSignature);
-
-      // Register username with ENS
-      // Note: Type assertion needed until @b3dotfun/b3-api package is updated with RegisterUsername type
-      const updatedUser = (await app
-        .service("users")
-        .registerUsername(
-          { username: sanitizedUsername, message: usernameSignMessage, hash: usernameSignature },
-          {} as any,
-        )) as unknown as Users;
       // Update user state - registerUsername returns an array with single user
       setUser(Array.isArray(updatedUser) ? updatedUser[0] : updatedUser);
 
@@ -179,7 +188,7 @@ const SettingsProfileCard = () => {
           <>
             <div className="flex items-center gap-1">
               <p className="b3-modal-username font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]">
-                {currentUsername}
+                {currentUsername || user?.email}
               </p>
             </div>
             <button

package/src/global-account/react/components/SignInWithB3/BetterAuthResetPassword.tsx

@@ -1,7 +1,8 @@
-import { Button, Input } from "@b3dotfun/sdk/global-account/react";
+import { Button } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useState } from "react";
 import { useBetterAuth } from "../../hooks/useBetterAuth";
+import { PasswordInput } from "./components/PasswordInput";
 
 const debug = debugB3React("BetterAuthResetPassword");
 
@@ -103,13 +104,12 @@ export function BetterAuthResetPassword({ token, onSuccess, onError, className }
             <label className="mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300">
               New password
             </label>
-            <Input
-              type="password"
+            <PasswordInput
               placeholder="At least 8 characters"
               value={password}
               onChange={e => setPassword(e.target.value)}
               disabled={isLoading}
-              className="h-11 px-4 text-[15px]"
+              className="h-11 px-4 pr-11 text-[15px]"
             />
           </div>
 
@@ -117,8 +117,7 @@ export function BetterAuthResetPassword({ token, onSuccess, onError, className }
             <label className="mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300">
               Confirm password
             </label>
-            <Input
-              type="password"
+            <PasswordInput
               placeholder="Repeat your password"
               value={confirmPassword}
               onChange={e => setConfirmPassword(e.target.value)}
@@ -126,7 +125,7 @@ export function BetterAuthResetPassword({ token, onSuccess, onError, className }
               onKeyDown={e => {
                 if (e.key === "Enter") handleSubmit();
               }}
-              className="h-11 px-4 text-[15px]"
+              className="h-11 px-4 pr-11 text-[15px]"
             />
           </div>
 

package/src/global-account/react/components/SignInWithB3/BetterAuthSignIn.tsx

@@ -1,4 +1,4 @@
-import { Button, Input, useAuthStore } from "@b3dotfun/sdk/global-account/react";
+import { Button, Input, Loading, useAuthStore } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useState } from "react";
 import {
@@ -6,6 +6,7 @@ import {
   type BetterAuthSocialProvider,
   useBetterAuth,
 } from "../../hooks/useBetterAuth";
+import { PasswordInput } from "./components/PasswordInput";
 import { strategyIcons, strategyLabels } from "./utils/signInUtils";
 
 const debug = debugB3React("BetterAuthSignIn");
@@ -32,6 +33,11 @@ export interface BetterAuthSignInProps {
   showEmail?: boolean;
   /** URL to redirect to after password reset link is clicked. Token is appended as ?token=... */
   passwordResetRedirectTo?: string;
+  /**
+   * URL Better Auth redirects to after server-side email verification. Render
+   * `BetterAuthVerifyEmail` at this route so the user gets a confirmation page.
+   */
+  verifyEmailRedirectTo?: string;
   /** Called after successful authentication */
   onSuccess?: () => void;
   /** Called on authentication error */
@@ -60,12 +66,15 @@ export function BetterAuthSignIn({
   socialProviders = DEFAULT_SOCIAL_PROVIDERS.map(p => p.id),
   showEmail = true,
   passwordResetRedirectTo,
+  verifyEmailRedirectTo,
   onSuccess,
   onError,
   className,
 }: BetterAuthSignInProps) {
   const { signInWithEmail, signUpWithEmail, signInWithSocial, requestPasswordReset } = useBetterAuth();
   const isAuthenticated = useAuthStore(state => state.isAuthenticated);
+  const isAuthenticating = useAuthStore(state => state.isAuthenticating);
+  const hasStartedConnecting = useAuthStore(state => state.hasStartedConnecting);
 
   const [mode, setMode] = useState<"sign-in" | "sign-up" | "forgot-password">("sign-in");
   const [email, setEmail] = useState("");
@@ -83,7 +92,9 @@ export function BetterAuthSignIn({
 
   const resolvedSubtitle =
     mode === "forgot-password"
-      ? "Enter your email and we'll send you a reset link"
+      ? resetEmailSent
+        ? "We've sent a password reset link to your email"
+        : "Enter your email and we'll send you a reset link"
       : subtitle || "Enter your credentials to access your account";
 
   const handleForgotPassword = async () => {
@@ -111,6 +122,16 @@ export function BetterAuthSignIn({
     .map(id => DEFAULT_SOCIAL_PROVIDERS.find(p => p.id === id))
     .filter((p): p is SocialProviderConfig => !!p);
 
+  // Show loading during session restore (before any user interaction) to prevent
+  // the login form from flashing briefly after OAuth redirect.
+  if (isAuthenticating && !hasStartedConnecting) {
+    return (
+      <div className={`flex w-full max-w-[400px] items-center justify-center px-6 py-20 ${className || ""}`}>
+        <Loading variant="primary" size="lg" />
+      </div>
+    );
+  }
+
   if (isAuthenticated) {
     return null;
   }
@@ -138,7 +159,7 @@ export function BetterAuthSignIn({
       setError(null);
 
       if (mode === "sign-up") {
-        await signUpWithEmail(normalizedEmail, password, name.trim());
+        await signUpWithEmail(normalizedEmail, password, name.trim(), verifyEmailRedirectTo);
       } else {
         await signInWithEmail(normalizedEmail, password);
       }
@@ -334,16 +355,15 @@ export function BetterAuthSignIn({
                 </button>
               )}
             </div>
-            <Input
-              type="password"
-              placeholder="Password"
+            <PasswordInput
+              key={mode}
               value={password}
               onChange={e => setPassword(e.target.value)}
               disabled={isLoading}
               onKeyDown={e => {
                 if (e.key === "Enter") handleEmailSubmit();
               }}
-              className="h-11 px-4 text-[15px]"
+              className="h-11 px-4 pr-11 text-[15px]"
             />
           </div>