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

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

@@ -0,0 +1,155 @@
+import { Button } from "@b3dotfun/sdk/global-account/react";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+
+const debug = debugB3React("BetterAuthVerifyEmail");
+
+export type BetterAuthVerifyEmailState = "success" | "expired" | "invalid" | "already-verified" | "error";
+
+export interface BetterAuthVerifyEmailProps {
+  /**
+   * Error code from the callback URL's `?error=` query param. Pass `null` /
+   * `undefined` when the user landed here cleanly (successful verification).
+   * Better Auth appends this param when server-side verification fails.
+   */
+  errorCode?: string | null;
+  /** Called when the user clicks the "Go to sign in" button. */
+  onGoToSignIn?: () => void;
+  /** Fallback href used when `onGoToSignIn` is not provided. Defaults to "/login". */
+  signInHref?: string;
+  /** Optional override for the success headline. */
+  successTitle?: string;
+  /** Optional override for the success body text. */
+  successMessage?: string;
+  /** Optional class name for the root container. */
+  className?: string;
+}
+
+function classifyError(code: string | null | undefined): BetterAuthVerifyEmailState {
+  if (!code) return "success";
+  const normalized = code.toLowerCase();
+
+  // Exact matches for Better Auth's documented verification error codes.
+  if (normalized === "expired_token") return "expired";
+  if (normalized === "invalid_token") return "invalid";
+  if (normalized === "already_verified" || normalized === "email_already_verified") return "already-verified";
+
+  // Loose fallbacks for close variants. Order matters — check "already" before
+  // "verified" so `email_already_verified` maps to already-verified, not invalid.
+  if (normalized.includes("expired")) return "expired";
+  if (normalized.includes("already")) return "already-verified";
+  if (normalized.includes("invalid")) return "invalid";
+  return "error";
+}
+
+const COPY: Record<BetterAuthVerifyEmailState, { title: string; message: string }> = {
+  success: {
+    title: "Email verified",
+    message: "Your email is confirmed. You can now sign in to your account.",
+  },
+  expired: {
+    title: "Link expired",
+    message: "This verification link has expired. Request a new one from the sign-in page.",
+  },
+  invalid: {
+    title: "Invalid link",
+    message: "This verification link is invalid or has already been used. Try signing in or request a new link.",
+  },
+  "already-verified": {
+    title: "Already verified",
+    message: "Your email was already confirmed. You can sign in now.",
+  },
+  error: {
+    title: "Verification failed",
+    message: "We couldn't verify your email. Request a new link from the sign-in page.",
+  },
+};
+
+/**
+ * Standalone email-verification confirmation page. Render on the route you
+ * set as `callbackURL` when calling `betterAuthClient.sendVerificationEmail`
+ * (or the `verifyCallbackURL` arg on `useBetterAuth().signUpWithEmail`).
+ *
+ * Better Auth verifies the token server-side before redirecting here. This
+ * component only displays the outcome based on the `?error=` query param.
+ *
+ * Usage:
+ * ```tsx
+ * const error = new URLSearchParams(window.location.search).get("error");
+ * <BetterAuthVerifyEmail
+ *   errorCode={error}
+ *   onGoToSignIn={() => router.push("/login")}
+ * />
+ * ```
+ */
+export function BetterAuthVerifyEmail({
+  errorCode,
+  onGoToSignIn,
+  signInHref = "/login",
+  successTitle,
+  successMessage,
+  className,
+}: BetterAuthVerifyEmailProps) {
+  const state = classifyError(errorCode);
+  const isSuccess = state === "success" || state === "already-verified";
+  const copy = COPY[state];
+  const title = isSuccess && successTitle ? successTitle : copy.title;
+  const message = isSuccess && successMessage ? successMessage : copy.message;
+
+  debug("Rendering verify-email state", { state, errorCode });
+
+  const handleClick = () => {
+    if (onGoToSignIn) {
+      onGoToSignIn();
+      return;
+    }
+    if (typeof window !== "undefined") {
+      window.location.href = signInHref;
+    }
+  };
+
+  return (
+    <div className={`w-full max-w-[400px] px-6 ${className || ""}`}>
+      <div className="space-y-6 text-center">
+        <div
+          className={`mx-auto flex h-12 w-12 items-center justify-center rounded-full ${
+            isSuccess ? "bg-green-100" : "bg-red-100"
+          }`}
+        >
+          {isSuccess ? (
+            <svg
+              className="h-6 w-6 text-green-600"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          ) : (
+            <svg
+              className="h-6 w-6 text-red-600"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          )}
+        </div>
+
+        <div>
+          <h1 className="text-[28px] font-semibold tracking-tight text-gray-900 dark:text-gray-100">{title}</h1>
+          <p className="mt-3 text-[15px] text-gray-500 dark:text-gray-400">{message}</p>
+        </div>
+
+        <Button
+          onClick={handleClick}
+          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"
+        >
+          {isSuccess ? "Go to sign in" : "Back to sign in"}
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -4,6 +4,7 @@ import {
   SignInWithB3ModalProps,
   StyleRoot,
   useAccountWallet,
+  useAuthStore,
   useAuthentication,
   useB3Config,
   useIsMobile,
@@ -14,6 +15,8 @@ import { cn, truncateAddress } from "@b3dotfun/sdk/shared/utils";
 import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
 import { ReactNode, useEffect } from "react";
 import { useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
+import { useUser } from "../../hooks/useUser";
+import { UserAvatar } from "../UserAvatar/UserAvatar";
 import { ManageAccountButton } from "../custom/ManageAccountButton";
 
 type SignInProps = {
@@ -30,7 +33,9 @@ type SignInWithB3Props = Omit<SignInWithB3ModalProps, "type" | "showBackButton">
 
 export function SignIn(props: SignInWithB3Props) {
   const { className } = props;
-  const { automaticallySetFirstEoa, partnerId } = useB3Config();
+  const { automaticallySetFirstEoa, partnerId, authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
+
   const {
     address: globalAddress,
     ensName,
@@ -53,6 +58,11 @@ export function SignIn(props: SignInWithB3Props) {
 
   const setActiveWallet = useSetActiveWallet();
 
+  // Better Auth state
+  const isAuthenticated = useAuthStore(state => state.isAuthenticated);
+  const { user } = useUser();
+  const userDisplayName = user?.username || user?.email || "Account";
+
   const handleSetActiveAccount = (selectedWalletId: string | undefined) => {
     if (
       !selectedWalletId ||
@@ -72,21 +82,29 @@ export function SignIn(props: SignInWithB3Props) {
     }
   }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
 
+  const isLoggedIn = isBetterAuth ? isAuthenticated : !!globalAddress;
+
   // Desktop version - original dropdown menu
   return (
     <StyleRoot>
       <Menu className={`relative flex items-center ${className || ""}`} as="div">
-        {globalAddress ? (
+        {isLoggedIn ? (
           <>
             <MenuButton className="bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none">
-              {!!walletImage && (
-                <IPFSMediaRenderer
-                  src={walletImage}
-                  alt="Wallet Image"
-                  className="bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100"
-                />
+              {isBetterAuth ? (
+                <UserAvatar avatarUrl={user?.avatar} name={userDisplayName} size={24} />
+              ) : (
+                !!walletImage && (
+                  <IPFSMediaRenderer
+                    src={walletImage}
+                    alt="Wallet Image"
+                    className="bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100"
+                  />
+                )
               )}
-              <div className="text-as-primary">{ensName ? ensName : truncateAddress(globalAddress)}</div>
+              <div className="text-as-primary">
+                {isBetterAuth ? userDisplayName : ensName ? ensName : truncateAddress(globalAddress ?? "")}
+              </div>
             </MenuButton>
             <Transition
               enter="duration-200 ease-out"
@@ -103,7 +121,16 @@ export function SignIn(props: SignInWithB3Props) {
                 anchor={isMobile ? "top end" : undefined}
               >
                 <div className="bg-b3-react-background">
-                  {connectedEOAWallet ? (
+                  {isBetterAuth ? (
+                    /* Better Auth: show user info instead of wallet switching */
+                    <div className="flex items-center gap-3 rounded-xl p-3">
+                      <UserAvatar avatarUrl={user?.avatar} name={userDisplayName} size={48} />
+                      <div className="flex flex-col gap-0.5">
+                        {user?.username && <div className="text-b3-react-primary font-semibold">{user.username}</div>}
+                        {user?.email && <div className="text-b3-react-secondary text-sm">{user.email}</div>}
+                      </div>
+                    </div>
+                  ) : connectedEOAWallet ? (
                     <div
                       className={cn(
                         "border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3",
@@ -118,7 +145,7 @@ export function SignIn(props: SignInWithB3Props) {
                         />
                         <div className="ml-4 grow">
                           {ensName && <div>{ensName}</div>}
-                          <div>{truncateAddress(globalAddress)}</div>
+                          <div>{truncateAddress(globalAddress ?? "")}</div>
                           {/* <div>{walletInfo?.name}</div> */}
                         </div>
                       </div>
@@ -143,7 +170,7 @@ export function SignIn(props: SignInWithB3Props) {
                           />
                           <div className="grow pl-4">
                             {ensName && <div>{ensName}</div>}
-                            <div>{truncateAddress(globalAddress)}</div>
+                            <div>{truncateAddress(globalAddress ?? "")}</div>
                             <div>Smart wallet</div>
                           </div>
                         </div>
@@ -159,7 +186,9 @@ export function SignIn(props: SignInWithB3Props) {
                   <button className="mb-2 w-full space-y-1" onClick={onDisconnect}>
                     <div className="hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors">
                       <Icon className="fill-b3-react-primary mr-4 shrink-0 transition-colors" name="logout" />
-                      <div className="text-b3-react-primary mr-auto transition-colors">Disconnect</div>
+                      <div className="text-b3-react-primary mr-auto transition-colors">
+                        {isBetterAuth ? "Sign out" : "Disconnect"}
+                      </div>
                     </div>
                   </button>
                 </div>

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

@@ -34,6 +34,7 @@ export function SignInWithB3Flow({
   closeAfterLogin = false,
   source = "signInWithB3Button",
   signersEnabled = false,
+  verifyEmailRedirectTo,
 }: SignInWithB3ModalProps) {
   const { automaticallySetFirstEoa, authStrategy } = useB3Config();
   // skipAutoConnect: this component intentionally logs out on mount to show a fresh login screen.
@@ -292,7 +293,13 @@ export function SignInWithB3Flow({
       // 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 = <LoginStepBetterAuth onSuccess={() => handleLoginSuccess({} as Account)} onError={onError} />;
+      content = (
+        <LoginStepBetterAuth
+          onSuccess={() => handleLoginSuccess({} as Account)}
+          onError={onError}
+          verifyEmailRedirectTo={verifyEmailRedirectTo}
+        />
+      );
     } else if (!readyToShowLogin || isAuthenticating || isFetchingSigners) {
       content = (
         <LoginStepContainer partnerId={partnerId}>

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

@@ -0,0 +1,62 @@
+import { Input } from "@b3dotfun/sdk/global-account/react";
+import { useState } from "react";
+
+interface PasswordInputProps {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  className?: string;
+}
+
+export function PasswordInput({
+  value,
+  onChange,
+  disabled,
+  placeholder = "Password",
+  onKeyDown,
+  className,
+}: PasswordInputProps) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <div className="relative">
+      <Input
+        type={showPassword ? "text" : "password"}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        onKeyDown={onKeyDown}
+        className={className}
+      />
+      <button
+        type="button"
+        onClick={() => setShowPassword(!showPassword)}
+        aria-label={showPassword ? "Hide password" : "Show password"}
+        className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+        tabIndex={-1}
+      >
+        {showPassword ? (
+          <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+            />
+          </svg>
+        ) : (
+          <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+            />
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+        )}
+      </button>
+    </div>
+  );
+}

package/src/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.tsx

@@ -7,6 +7,7 @@ import {
   useBetterAuth,
 } from "../../../hooks/useBetterAuth";
 import { AuthButton } from "../components/AuthButton";
+import { PasswordInput } from "../components/PasswordInput";
 
 const debug = debugB3React("LoginStepBetterAuth");
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -22,9 +23,11 @@ const SOCIAL_PROVIDERS: { id: BetterAuthSocialProvider; label: string }[] = [
 interface LoginStepBetterAuthProps {
   onSuccess?: () => void;
   onError?: (error: Error) => Promise<void>;
+  /** URL Better Auth redirects to after server-side email verification. */
+  verifyEmailRedirectTo?: string;
 }
 
-export function LoginStepBetterAuth({ onSuccess, onError }: LoginStepBetterAuthProps) {
+export function LoginStepBetterAuth({ onSuccess, onError, verifyEmailRedirectTo }: LoginStepBetterAuthProps) {
   const { partnerId } = useB3Config();
   const { signInWithEmail, signUpWithEmail, signInWithSocial, requestPasswordReset } = useBetterAuth();
 
@@ -62,7 +65,7 @@ export function LoginStepBetterAuth({ onSuccess, onError }: LoginStepBetterAuthP
 
       if (mode === "sign-up") {
         debug("Signing up", { email: normalizedEmail, name: name.trim() });
-        await signUpWithEmail(normalizedEmail, password, name.trim());
+        await signUpWithEmail(normalizedEmail, password, name.trim(), verifyEmailRedirectTo);
       } else {
         debug("Signing in", { email: normalizedEmail });
         await signInWithEmail(normalizedEmail, password);
@@ -160,7 +163,11 @@ export function LoginStepBetterAuth({ onSuccess, onError }: LoginStepBetterAuthP
       {mode === "forgot-password" ? (
         <div className="mb-6 w-full space-y-3 px-3">
           <p className="text-center text-sm font-medium text-gray-900 dark:text-gray-100">Reset password</p>
-          <p className="text-center text-xs text-gray-500">Enter your email and we'll send you a reset link</p>
+          <p className="text-center text-xs text-gray-500">
+            {resetEmailSent
+              ? "We've sent a password reset link to your email"
+              : "Enter your email and we'll send you a reset link"}
+          </p>
 
           {resetEmailSent ? (
             <div className="space-y-3 py-4 text-center">
@@ -223,15 +230,15 @@ export function LoginStepBetterAuth({ onSuccess, onError }: LoginStepBetterAuthP
             disabled={isLoading}
           />
 
-          <Input
-            type="password"
-            placeholder="Password"
+          <PasswordInput
+            key={mode}
             value={password}
             onChange={event => setPassword(event.target.value)}
             disabled={isLoading}
             onKeyDown={event => {
               if (event.key === "Enter") handleEmailSubmit();
             }}
+            className="pr-11"
           />
 
           {error && <p className="text-sm text-red-500">{error}</p>}

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

@@ -0,0 +1,45 @@
+import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
+import { AVATAR_COLORS } from "@b3dotfun/sdk/shared/constants";
+import Avatar from "boring-avatars";
+import { useCallback, useEffect, useState } from "react";
+import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
+
+interface UserAvatarProps {
+  /** Direct avatar URL (IPFS or HTTP). Resolved and validated internally. */
+  avatarUrl?: string | null;
+  /** Seed for the generated fallback avatar + alt text. Use email, username, or address. */
+  name?: string;
+  /** Avatar size in pixels (square). */
+  size?: number;
+  /** Additional className for the outer container. */
+  className?: string;
+}
+
+/**
+ * Renders a user avatar with IPFS support and boring-avatars fallback.
+ *
+ * - If `avatarUrl` is provided and valid, renders via IPFSMediaRenderer.
+ * - On load failure or missing URL, falls back to a deterministic boring-avatars beam.
+ */
+export function UserAvatar({ avatarUrl, name = "user", size = 40, className }: UserAvatarProps) {
+  const resolvedSrc = validateImageUrl(avatarUrl);
+  const [imgError, setImgError] = useState(false);
+
+  useEffect(() => {
+    setImgError(false);
+  }, [avatarUrl]);
+
+  const handleImgError = useCallback(() => setImgError(true), []);
+
+  return (
+    <div className={className} style={{ width: size, height: size, minWidth: size, minHeight: size }}>
+      {resolvedSrc && !imgError ? (
+        <div onErrorCapture={handleImgError} className="h-full w-full overflow-hidden rounded-full">
+          <IPFSMediaRenderer src={resolvedSrc} alt={name} className="h-full w-full object-cover" />
+        </div>
+      ) : (
+        <Avatar name={name} variant="beam" size={size} colors={AVATAR_COLORS} />
+      )}
+    </div>
+  );
+}

package/src/global-account/react/components/index.ts

@@ -7,11 +7,17 @@ export { RelayKitProviderWrapper } from "./B3Provider/RelayKitProviderWrapper";
 export { useB3 } from "./B3Provider/useB3";
 export { useB3Account } from "./B3Provider/useB3Account";
 export { useB3Config } from "./B3Provider/useB3Config";
+export { useBetterAuthClient } from "./B3Provider/BetterAuthClientProvider";
 export { StyleRoot } from "./StyleRoot";
 
 // SignInWithB3 Components
 export { BetterAuthResetPassword, type BetterAuthResetPasswordProps } from "./SignInWithB3/BetterAuthResetPassword";
 export { BetterAuthSignIn, type BetterAuthSignInProps } from "./SignInWithB3/BetterAuthSignIn";
+export {
+  BetterAuthVerifyEmail,
+  type BetterAuthVerifyEmailProps,
+  type BetterAuthVerifyEmailState,
+} from "./SignInWithB3/BetterAuthVerifyEmail";
 export { AuthButton } from "./SignInWithB3/components/AuthButton";
 export { PermissionItem } from "./SignInWithB3/components/PermissionItem";
 export { WalletRow } from "./SignInWithB3/components/WalletRow";
@@ -24,6 +30,9 @@ export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } fro
 // ManageAccount Components
 export { ManageAccount } from "./ManageAccount/ManageAccount";
 
+// UserAvatar
+export { UserAvatar } from "./UserAvatar/UserAvatar";
+
 // Deposit Components
 export { Deposit } from "./Deposit/Deposit";
 

package/src/global-account/react/hooks/useBetterAuth.ts

@@ -2,7 +2,7 @@ import app from "@b3dotfun/sdk/global-account/app";
 import { useAuthStore, useB3Config } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useCallback } from "react";
-import { betterAuthClient } from "../../better-auth-client";
+import { useBetterAuthClient } from "../components/B3Provider/BetterAuthClientProvider";
 import { useUserQuery } from "./useUserQuery";
 
 const debug = debugB3React("useBetterAuth");
@@ -27,6 +27,7 @@ export class EmailVerificationRequiredError extends Error {
  */
 export function useBetterAuth() {
   const { partnerId } = useB3Config();
+  const betterAuthClient = useBetterAuthClient();
   const { setUser } = useUserQuery();
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
@@ -83,11 +84,11 @@ export function useBetterAuth() {
         throw error;
       }
     },
-    [exchangeForFeathersJWT, setIsAuthenticating, setHasStartedConnecting],
+    [exchangeForFeathersJWT, setIsAuthenticating, setHasStartedConnecting, betterAuthClient],
   );
 
   const signUpWithEmail = useCallback(
-    async (email: string, password: string, name: string) => {
+    async (email: string, password: string, name: string, verifyCallbackURL?: string) => {
       debug("Signing up with email", { email, name });
       setHasStartedConnecting(true);
       setIsAuthenticating(true);
@@ -101,11 +102,12 @@ export function useBetterAuth() {
 
         const token = result.data?.token;
         if (!token) {
-          // requireEmailVerification is enabled — send verification email
-          // with the client's origin as callbackURL so the user returns here
+          // requireEmailVerification is enabled — send verification email with
+          // a callbackURL Better Auth redirects to after server-side verify.
+          // Pass verifyCallbackURL to land on a dedicated confirmation page.
           await betterAuthClient.sendVerificationEmail({
             email,
-            callbackURL: `${window.location.origin}?authStrategy=better-auth`,
+            callbackURL: verifyCallbackURL || `${window.location.origin}?authStrategy=better-auth`,
           });
           throw new EmailVerificationRequiredError();
         }
@@ -117,7 +119,7 @@ export function useBetterAuth() {
         throw error;
       }
     },
-    [exchangeForFeathersJWT, setIsAuthenticating, setHasStartedConnecting],
+    [exchangeForFeathersJWT, setIsAuthenticating, setHasStartedConnecting, betterAuthClient],
   );
 
   const signInWithSocial = useCallback(
@@ -144,7 +146,7 @@ export function useBetterAuth() {
         throw error;
       }
     },
-    [setIsAuthenticating, setHasStartedConnecting],
+    [setIsAuthenticating, setHasStartedConnecting, betterAuthClient],
   );
 
   const requestPasswordReset = useCallback(async (email: string, redirectTo?: string) => {
@@ -161,7 +163,7 @@ export function useBetterAuth() {
 
     debug("Password reset email sent");
     return result;
-  }, []);
+  }, [betterAuthClient]);
 
   const resetPassword = useCallback(async (newPassword: string, token: string) => {
     debug("Resetting password");
@@ -177,7 +179,7 @@ export function useBetterAuth() {
 
     debug("Password reset successful");
     return result;
-  }, []);
+  }, [betterAuthClient]);
 
   return {
     signInWithEmail,

package/src/global-account/react/stores/useModalStore.ts

@@ -44,6 +44,8 @@ export interface SignInWithB3ModalProps extends BaseModalProps {
   source?: "signInWithB3Button" | "requestPermissions";
   /** Whether to show the signers enabled modal */
   signersEnabled?: boolean;
+  /** URL Better Auth redirects to after server-side email verification. */
+  verifyEmailRedirectTo?: string;
 }
 
 /**
@@ -635,6 +637,8 @@ export interface AnySpendDepositModalProps extends BaseModalProps {
   actionLabel?: string;
   /** Whether to show chain selection step. Defaults to true if sourceTokenChainId is not provided */
   showChainSelection?: boolean;
+  /** Whether to show the "Fund with Fiat" option in the deposit options list. Defaults to true */
+  showFiatOption?: boolean;
   /** Minimum pool size for filtering tokens (default: 1,000,000) */
   minPoolSize?: number;
   /** Custom title for chain selection step */

package/src/shared/constants/index.ts

@@ -32,3 +32,5 @@ export const B3_AUTH_COOKIE_NAME = "b3-auth";
 export const ENS_GATEWAY_URL = "https://ens-gateway.b3.fun/";
 
 export const PUBLIC_BASE_RPC_URL = "https://base-rpc.publicnode.com";
+
+export const AVATAR_COLORS = ["#3368ef", "#272727", "#6366f1", "#06b6d4", "#eeb0d9", "#ba3fbf", "#ff777b", "#dfbb53"];