@b3dotfun/sdk 0.1.69 → 0.1.70-alpha.2

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

@@ -1,6 +1,7 @@
 import { ens_normalize } from "@adraffy/ens-normalize";
 import app from "@b3dotfun/sdk/global-account/app";
 import { toast, useAuthentication, useB3Config, useModalStore, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { Check, Loader2, Pencil, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
@@ -17,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);
@@ -29,8 +31,7 @@ const SettingsProfileCard = () => {
   const [isSaving, setIsSaving] = useState(false);
   const inputRef = useRef<HTMLInputElement>(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 || "");
@@ -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/Send/Send.tsx

@@ -9,6 +9,7 @@ import {
   useSimBalance,
   useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
+import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
 import { formatDisplayNumber, formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
 import { CircleHelp, Clock, Loader2, Send as SendIcon, Wallet } from "lucide-react";
@@ -32,6 +33,7 @@ type SendStep = "recipient" | "token" | "amount" | "confirm" | "success";
 // Component for displaying a recent address with profile data
 function RecentAddressItem({ address, onClick }: { address: string; onClick: () => void }) {
   const { data: profileData } = useProfile({ address });
+  const validatedAvatar = validateImageUrl(profileData?.avatar);
 
   return (
     <button
@@ -39,8 +41,8 @@ function RecentAddressItem({ address, onClick }: { address: string; onClick: ()
       className="flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]"
     >
       {/* Avatar */}
-      {profileData?.avatar ? (
-        <img src={profileData.avatar} alt={profileData.name || address} className="h-10 w-10 rounded-full" />
+      {validatedAvatar ? (
+        <img src={validatedAvatar} alt={profileData?.name || address} className="h-10 w-10 rounded-full" />
       ) : (
         <div className="flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]">
           <Wallet className="h-5 w-5 text-[#a0a0ab]" />
@@ -84,6 +86,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
   const { data: validatedProfileData } = useProfile({
     address: showValidatedResult && recipientAddress && isAddress(recipientAddress) ? recipientAddress : undefined,
   });
+  const validatedRecipientAvatar = validateImageUrl(validatedProfileData?.avatar);
 
   // Address validation
   const handleRecipientAddressChange = (value: string) => {
@@ -290,10 +293,10 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
                   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]"
                 >
                   {/* Avatar */}
-                  {validatedProfileData?.avatar ? (
+                  {validatedRecipientAvatar ? (
                     <img
-                      src={validatedProfileData.avatar}
-                      alt={validatedProfileData.name || recipientAddress}
+                      src={validatedRecipientAvatar}
+                      alt={validatedProfileData?.name || recipientAddress}
                       className="h-10 w-10 rounded-full"
                     />
                   ) : (

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

@@ -0,0 +1,145 @@
+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");
+
+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 function BetterAuthResetPassword({ token, onSuccess, onError, className }: BetterAuthResetPasswordProps) {
+  const { resetPassword } = useBetterAuth();
+
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(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 as Error);
+    } finally {
+      setPassword("");
+      setConfirmPassword("");
+      setIsLoading(false);
+    }
+  };
+
+  if (!token) {
+    return (
+      <div className={`w-full max-w-[400px] px-6 text-center ${className || ""}`}>
+        <p className="text-sm text-red-500">Invalid or missing reset token.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`w-full max-w-[400px] px-6 ${className || ""}`}>
+      <div className="mb-10 text-center">
+        <h1 className="text-[28px] font-semibold tracking-tight text-gray-900 dark:text-gray-100">
+          {success ? "Password reset" : "Set new password"}
+        </h1>
+        <p className="mt-3 text-[15px] text-gray-500 dark:text-gray-400">
+          {success ? "Your password has been updated." : "Enter your new password below."}
+        </p>
+      </div>
+
+      {success ? (
+        <div className="space-y-4 text-center">
+          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+            <svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+        </div>
+      ) : (
+        <div className="space-y-5">
+          <div>
+            <label className="mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300">
+              New password
+            </label>
+            <PasswordInput
+              placeholder="At least 8 characters"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              disabled={isLoading}
+              className="h-11 px-4 pr-11 text-[15px]"
+            />
+          </div>
+
+          <div>
+            <label className="mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300">
+              Confirm password
+            </label>
+            <PasswordInput
+              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 pr-11 text-[15px]"
+            />
+          </div>
+
+          {error && <p className="text-sm text-red-500">{error}</p>}
+
+          <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"
+          >
+            {isLoading ? "Resetting..." : "Reset password"}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}