@b3dotfun/sdk 0.1.1-test.0 → 0.1.2-test.0

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

@@ -0,0 +1,330 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import { Search, X } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { CombinedProfile, Profile } from "../../hooks/useProfile";
+import { fetchProfile as fetchProfileApi } from "../../utils/profileApi";
+import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
+import { Input } from "../ui/input";
+
+/**
+ * Profile type filter options for SingleUserSearchSelector
+ * - b3-ens: B3 ENS profiles
+ * - thirdweb-${string}: Thirdweb profiles (e.g., thirdweb-email, thirdweb-wallet)
+ * - ens-data: ENS data profiles
+ * - global-account: Global account profiles
+ */
+export type ProfileTypeFilter = "b3-ens" | `thirdweb-${string}` | "ens-data" | "global-account";
+
+export interface SingleUserSearchSelectorProps {
+  /**
+   * Callback function when a user is selected
+   * Returns the complete profile data including all profile types
+   */
+  onSelectUser: (profile: CombinedProfile) => void;
+
+  /**
+   * Optional: Filter results to only show profiles that include specific types
+   * If provided, only profiles containing at least one of these types will be shown
+   */
+  profileTypeFilter?: ProfileTypeFilter[];
+
+  /**
+   * Optional: Custom placeholder text for the search input
+   */
+  placeholder?: string;
+
+  /**
+   * Optional: Custom class name for the container
+   */
+  className?: string;
+
+  /**
+   * Optional: Show clear button when there's input
+   */
+  showClearButton?: boolean;
+
+  /**
+   * Optional: Show profile type badges in the result
+   */
+  showBadges?: boolean;
+
+  /**
+   * Optional: Minimum characters before triggering search
+   */
+  minSearchLength?: number;
+}
+
+/**
+ * SingleUserSearchSelector Component
+ *
+ * A specialized component for searching and selecting a single user profile.
+ * This component is designed specifically for single-user selection scenarios,
+ * not for multi-user or general profile browsing.
+ *
+ * Features:
+ * - Search by address or name
+ * - Filter results by profile type (b3-ens, thirdweb-*, ens-data, global-account)
+ * - Shows a single result in a dropdown
+ * - Callback with complete profile data on selection
+ *
+ * @example
+ * ```tsx
+ * <SingleUserSearchSelector
+ *   onSelectUser={(profile) => console.log('Selected:', profile)}
+ *   profileTypeFilter={['b3-ens', 'global-account']}
+ *   placeholder="Search by address or name..."
+ * />
+ * ```
+ */
+export function SingleUserSearchSelector({
+  onSelectUser,
+  profileTypeFilter,
+  placeholder = "Search by address, name, or ID...",
+  className,
+  showClearButton = true,
+  showBadges = false,
+  minSearchLength = 3,
+}: SingleUserSearchSelectorProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchResult, setSearchResult] = useState<CombinedProfile | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  // Fetch profile from API using shared utility
+  const fetchProfile = useCallback(
+    async (query: string): Promise<CombinedProfile | null> => {
+      if (!query || query.length < minSearchLength) {
+        return null;
+      }
+
+      try {
+        // Determine if query is an address (starts with 0x) or a name
+        const params = query.startsWith("0x") ? { address: query } : { name: query };
+
+        const profile = await fetchProfileApi(params);
+        return profile;
+      } catch (err) {
+        // Return null for 404s (user not found)
+        if (err instanceof Error && err.message.includes("404")) {
+          return null;
+        }
+        console.error("Error fetching profile:", err);
+        throw err;
+      }
+    },
+    [minSearchLength],
+  );
+
+  // Filter profile by type
+  const filterProfileByType = useCallback(
+    (profile: CombinedProfile): boolean => {
+      if (!profileTypeFilter || profileTypeFilter.length === 0) {
+        return true;
+      }
+
+      // Check if any of the profile's types match the filter
+      return profile.profiles.some(p => {
+        return profileTypeFilter.some(filter => {
+          // Handle thirdweb-* wildcard matching
+          if (filter.startsWith("thirdweb-")) {
+            return p.type.startsWith("thirdweb-");
+          }
+          return p.type === filter;
+        });
+      });
+    },
+    [profileTypeFilter],
+  );
+
+  // Handle search with debouncing
+  useEffect(() => {
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+
+    if (!searchQuery || searchQuery.length < minSearchLength) {
+      setSearchResult(null);
+      setShowDropdown(false);
+      setError(null);
+      return;
+    }
+
+    setIsSearching(true);
+    setError(null);
+
+    searchTimeoutRef.current = setTimeout(async () => {
+      try {
+        const result = await fetchProfile(searchQuery);
+
+        if (result) {
+          // Apply profile type filter
+          if (filterProfileByType(result)) {
+            setSearchResult(result);
+            setShowDropdown(true);
+            setError(null); // Clear any previous errors
+          } else {
+            setSearchResult(null);
+            setShowDropdown(false);
+            setError("No matching profile types found");
+          }
+        } else {
+          setSearchResult(null);
+          setShowDropdown(false);
+          setError("No user found");
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to search");
+        setSearchResult(null);
+        setShowDropdown(false);
+      } finally {
+        setIsSearching(false);
+      }
+    }, 500); // 500ms debounce
+
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, [searchQuery, fetchProfile, filterProfileByType, minSearchLength]);
+
+  // Handle click outside to close dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setShowDropdown(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Handle user selection
+  const handleSelectUser = useCallback(
+    (profile: CombinedProfile) => {
+      onSelectUser(profile);
+      setShowDropdown(false);
+      setSearchQuery("");
+      setSearchResult(null);
+    },
+    [onSelectUser],
+  );
+
+  // Handle clear search
+  const handleClear = useCallback(() => {
+    setSearchQuery("");
+    setSearchResult(null);
+    setShowDropdown(false);
+    setError(null);
+    inputRef.current?.focus();
+  }, []);
+
+  // Get display name for profile
+  const getDisplayName = (profile: CombinedProfile): string => {
+    return profile.displayName || profile.name || profile.address || "Unknown";
+  };
+
+  // Get profile type badges
+  const getProfileTypeBadges = (profiles: Profile[]): string[] => {
+    return profiles.map(p => p.type);
+  };
+
+  return (
+    <div className={cn("single-user-search-selector b3-root relative w-full", className)} ref={dropdownRef}>
+      {/* Search Input */}
+      <div className="single-user-search-input-wrapper relative flex items-center">
+        <Search
+          className="single-user-search-icon pointer-events-none absolute text-gray-400"
+          style={{ left: "12px", width: "16px", height: "16px" }}
+        />
+        <Input
+          ref={inputRef}
+          type="text"
+          value={searchQuery}
+          onChange={e => setSearchQuery(e.target.value)}
+          placeholder={placeholder}
+          className={cn("single-user-search-input w-full border-gray-300 focus:border-blue-500 focus:ring-blue-500")}
+          style={{ paddingLeft: "44px", paddingRight: "44px" }}
+        />
+        {showClearButton && searchQuery && (
+          <button
+            onClick={handleClear}
+            className="single-user-search-clear-button absolute text-gray-400 transition-colors hover:text-gray-600"
+            style={{ right: "12px" }}
+            type="button"
+          >
+            <X style={{ width: "16px", height: "16px" }} />
+          </button>
+        )}
+      </div>
+
+      {/* Loading State */}
+      {isSearching && <div className="single-user-search-loading mt-2 text-sm text-gray-500">Searching...</div>}
+
+      {/* Error State */}
+      {error && !isSearching && <div className="single-user-search-error mt-2 text-sm text-red-500">{error}</div>}
+
+      {/* Dropdown with Search Result */}
+      {showDropdown && searchResult && !isSearching && (
+        <div className="single-user-search-dropdown absolute z-50 mt-2 w-full rounded-lg border border-gray-200 bg-white shadow-lg">
+          <button
+            onClick={() => handleSelectUser(searchResult)}
+            className="single-user-search-result-button w-full px-4 py-3 text-left transition-colors hover:bg-gray-50"
+            type="button"
+          >
+            <div className="flex items-start gap-3">
+              {/* Avatar */}
+              <div className="single-user-search-result-avatar h-11 w-11 shrink-0">
+                <IPFSMediaRenderer
+                  src={searchResult.avatar}
+                  alt={getDisplayName(searchResult)}
+                  className="h-full w-full rounded-full object-cover"
+                />
+              </div>
+
+              {/* Profile Info */}
+              <div className="single-user-search-result-info min-w-0 flex-1 pt-0.5">
+                <div className="single-user-search-result-name text-base font-semibold text-gray-900">
+                  {getDisplayName(searchResult)}
+                </div>
+
+                {searchResult.address && (
+                  <div className="single-user-search-result-address mt-1 font-mono text-xs text-gray-500">
+                    {searchResult.address.slice(0, 6)}...{searchResult.address.slice(-4)}
+                  </div>
+                )}
+
+                {searchResult.bio && (
+                  <div className="single-user-search-result-bio mt-1.5 line-clamp-2 text-sm text-gray-600">
+                    {searchResult.bio}
+                  </div>
+                )}
+
+                {/* Profile Type Badges */}
+                {showBadges && (
+                  <div className="single-user-search-result-badges mt-2 flex flex-wrap gap-1.5">
+                    {getProfileTypeBadges(searchResult.profiles).map((type, index) => (
+                      <span
+                        key={`${type}-${index}`}
+                        className="single-user-search-result-badge inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800"
+                      >
+                        {type}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { SingleUserSearchSelector } from "./SingleUserSearchSelector";
+export type { ProfileTypeFilter, SingleUserSearchSelectorProps } from "./SingleUserSearchSelector";

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

@@ -1,8 +1,8 @@
 import { PropsWithChildren } from "react";
-import { useB3 } from "./B3Provider/useB3";
+import { useB3Config } from "./B3Provider/useB3Config";
 
 export function StyleRoot({ children, id }: PropsWithChildren<{ id?: string }>) {
-  const { theme } = useB3();
+  const { theme } = useB3Config();
 
   return (
     <div className="b3-root" id={id} data-theme={theme}>

package/src/global-account/react/components/custom/ManageAccountButton.tsx

@@ -1,11 +1,10 @@
-import { Button, StyleRoot, useAuthentication, useB3, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { Button, StyleRoot, useModalStore, useUser } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { SignInWithB3Props } from "../SignInWithB3/SignInWithB3";
 
 export function ManageAccountButton(props: SignInWithB3Props & { className?: string }) {
-  const { partnerId } = useB3();
   const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
-  const { isConnected } = useAuthentication(partnerId);
+  const { isConnected } = useUser();
 
   const handleClickManageAccount = () => {
     setB3ModalContentType({

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

@@ -1,9 +1,8 @@
 // TODO woj: Barrel file for all components, this might be reason of bundle size issues
 // Core Components
 export { B3DynamicModal } from "./B3DynamicModal";
-export { B3Provider, InnerProvider } from "./B3Provider/B3Provider";
+export { B3Provider } from "./B3Provider/B3Provider";
 export { RelayKitProviderWrapper } from "./B3Provider/RelayKitProviderWrapper";
-export { B3Context, type B3ContextType } from "./B3Provider/types";
 export { useB3 } from "./B3Provider/useB3";
 export { useB3Account } from "./B3Provider/useB3Account";
 export { useB3Config } from "./B3Provider/useB3Config";
@@ -50,6 +49,13 @@ export { SendETHButton } from "./SendETHButton/SendETHButton";
 // SendERC20Button Components
 export { SendERC20Button } from "./SendERC20Button/SendERC20Button";
 
+// SingleUserSearchSelector Components
+export { SingleUserSearchSelector } from "./SingleUserSearchSelector/SingleUserSearchSelector";
+export type {
+  ProfileTypeFilter,
+  SingleUserSearchSelectorProps,
+} from "./SingleUserSearchSelector/SingleUserSearchSelector";
+
 // Custom Components
 export { Button as CustomButton, buttonVariants as customButtonVariants } from "./custom/Button";
 export { ClientOnly } from "./custom/ClientOnly";

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

@@ -53,3 +53,4 @@ export { useTokensFromAddress } from "./useTokensFromAddress";
 export { useTurnkeyAuth } from "./useTurnkeyAuth";
 export { useUnifiedChainSwitchAndExecute } from "./useUnifiedChainSwitchAndExecute";
 export { useURLParams } from "./useURLParams";
+export { useUser } from "./useUser";

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

@@ -1,6 +1,6 @@
 import app from "@b3dotfun/sdk/global-account/app";
 import { authenticateWithB3JWT } from "@b3dotfun/sdk/global-account/bsmnt";
-import { useAuthStore, useB3 } from "@b3dotfun/sdk/global-account/react";
+import { useAuthStore, useB3Config } from "@b3dotfun/sdk/global-account/react";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
@@ -47,7 +47,7 @@ export function useAuth() {
   const hasStartedConnecting = useAuthStore(state => state.hasStartedConnecting);
   const useAutoConnectLoadingPrevious = useRef(false);
   const referralCode = useSearchParam("referralCode");
-  const { partnerId } = useB3();
+  const { partnerId } = useB3Config();
   const wagmiConfig = createWagmiConfig({ partnerId });
   const { connect } = useConnect();
   const activeWagmiAccount = useAccount();
@@ -330,7 +330,7 @@ export function useAuth() {
 
       setIsAuthenticated(false);
       setIsConnected(false);
-      setUser(undefined);
+      setUser();
       callback?.();
     },
     [activeWallet, disconnect, wallets, setIsAuthenticated, setUser, setIsConnected],

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

@@ -25,7 +25,7 @@ import { useUserQuery } from "./useUserQuery";
 const debug = debugB3React("useAuthentication");
 
 export function useAuthentication(partnerId: string) {
-  const { onConnectCallback } = useContext(LocalSDKContext);
+  const { onConnectCallback, onLogoutCallback } = useContext(LocalSDKContext);
   const { disconnect } = useDisconnect();
   const wallets = useConnectedWallets();
   const activeWallet = useActiveWallet();
@@ -179,10 +179,14 @@ export function useAuthentication(partnerId: string) {
 
       setIsAuthenticated(false);
       setIsConnected(false);
-      setUser(undefined);
+      setUser();
       callback?.();
+
+      if (onLogoutCallback) {
+        await onLogoutCallback();
+      }
     },
-    [activeWallet, disconnect, wallets, setIsAuthenticated, setUser, setIsConnected],
+    [activeWallet, disconnect, wallets, setIsAuthenticated, setUser, setIsConnected, onLogoutCallback],
   );
 
   const onConnect = useCallback(

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

@@ -1,4 +1,4 @@
-import { useB3 } from "@b3dotfun/sdk/global-account/react";
+import { useB3Config } from "@b3dotfun/sdk/global-account/react";
 import { useCallback } from "react";
 import {
   ClientType,
@@ -13,7 +13,7 @@ import {
  * Hook to access the current FeathersJS client and client management utilities
  */
 export function useClient() {
-  const { clientType } = useB3();
+  const { clientType } = useB3Config();
 
   const getCurrentClient = useCallback(() => {
     return getClient();

package/src/global-account/react/hooks/useHandleConnectWithPrivy.tsx

@@ -1,4 +1,4 @@
-import { useB3, useConnect } from "@b3dotfun/sdk/global-account/react";
+import { useB3Config, useConnect } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useIdentityToken, usePrivy } from "@privy-io/react-auth";
 import { useCallback, useRef, useState } from "react";
@@ -11,7 +11,7 @@ const debug = debugB3React("@@b3:useHandleConnectWithPrivy");
  * Currently, this is for the basement-privy strategy
  */
 export function useHandleConnectWithPrivy(chain?: Chain, onSuccess?: (account: Account) => void) {
-  const { partnerId } = useB3();
+  const { partnerId } = useB3Config();
   if (!chain) {
     throw new Error("Chain is required");
   }

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

@@ -1,4 +1,4 @@
-import { useB3 } from "@b3dotfun/sdk/global-account/react";
+import { useB3Config } from "@b3dotfun/sdk/global-account/react";
 import { getAuthToken } from "@b3dotfun/sdk/shared/utils/auth-token";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useCallback, useEffect, useState } from "react";
@@ -56,7 +56,7 @@ export interface UseNotificationsReturn {
  */
 export function useNotifications(): UseNotificationsReturn {
   const { user } = useUserQuery();
-  const { partnerId } = useB3();
+  const { partnerId } = useB3Config();
   const [userData, setUserData] = useState<UserData | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);

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

@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+import { fetchProfile, PROFILES_API_URL } from "../utils/profileApi";
 
 // TypeScript interface for profile data
 export interface Profile {
@@ -37,38 +38,6 @@ export interface DisplayNameRequestBody {
   timestamp: number;
 }
 
-const PROFILES_API_URL = "https://profiles.b3.fun";
-
-async function fetchProfile({
-  address,
-  name,
-  b3GlobalId,
-  fresh = false,
-}: {
-  address?: string;
-  name?: string;
-  b3GlobalId?: string;
-  fresh?: boolean;
-}): Promise<CombinedProfile> {
-  if (!address && !name && !b3GlobalId) {
-    throw new Error("Either address or name or b3GlobalId must be provided");
-  }
-
-  const params = new URLSearchParams();
-  if (address) params.append("address", address);
-  if (name) params.append("name", name);
-  if (b3GlobalId) params.append("b3GlobalId", b3GlobalId);
-  if (fresh) params.append("fresh", "true");
-
-  const response = await fetch(`${PROFILES_API_URL}?${params.toString()}`);
-
-  if (!response.ok) {
-    throw new Error(`Failed to fetch profile: ${response.statusText}`);
-  }
-
-  return response.json();
-}
-
 async function setProfilePreference({
   key,
   preferredType,

package/src/global-account/react/hooks/useTokenBalance.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { isNativeToken } from "@b3dotfun/sdk/anyspend";
-import { useB3, useAccountWallet } from "@b3dotfun/sdk/global-account/react";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { useAccountWallet, useAuthStore } from "@b3dotfun/sdk/global-account/react";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { getERC20Balances, getNativeTokenBalance } from "@b3dotfun/sdk/shared/utils/thirdweb-insights";
 import { useQuery } from "@tanstack/react-query";
 import { useEffect } from "react";
-import { components } from "@b3dotfun/sdk/anyspend/types/api";
 
 interface UseTokenBalanceProps {
   token: components["schemas"]["Token"];
@@ -20,7 +20,8 @@ export interface TokenBalanceResult {
 }
 
 export function useTokenBalance({ token, address }: UseTokenBalanceProps): TokenBalanceResult {
-  const { ready } = useB3();
+  const isAuthenticated = useAuthStore(state => state.isAuthenticated);
+
   const account = useAccountWallet();
 
   const effectiveAddress = address || account?.address;
@@ -60,7 +61,7 @@ export function useTokenBalance({ token, address }: UseTokenBalanceProps): Token
       }
       return { formatted: "0", raw: null };
     },
-    enabled: ready && !!effectiveAddress,
+    enabled: isAuthenticated && !!effectiveAddress,
     staleTime: 30000,
     gcTime: 5 * 60 * 1000,
     retry: 2,
@@ -69,13 +70,13 @@ export function useTokenBalance({ token, address }: UseTokenBalanceProps): Token
 
   // Force a refetch when the wallet or token changes
   useEffect(() => {
-    if (ready && effectiveAddress) {
+    if (isAuthenticated && effectiveAddress) {
       refetch();
     }
-  }, [ready, effectiveAddress, token.address, token.chainId, token.symbol, refetch]);
+  }, [isAuthenticated, effectiveAddress, token.address, token.chainId, token.symbol, refetch]);
 
   // Determine if we're actually loading
-  const isActuallyLoading = !ready || !effectiveAddress || isLoading || (isFetching && !tokenBalance);
+  const isActuallyLoading = !isAuthenticated || !effectiveAddress || isLoading || (isFetching && !tokenBalance);
 
   return {
     rawBalance: tokenBalance?.raw || BigInt(0),

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

@@ -2,7 +2,7 @@ import { TurnkeyAuthInitResponse } from "@b3dotfun/b3-api";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useCallback, useState } from "react";
 import app from "../../app";
-import { useB3 } from "../components";
+import { useB3Config } from "../components";
 import { useAuthStore } from "../stores";
 import { useAuth } from "./useAuth";
 
@@ -33,7 +33,7 @@ export function useTurnkeyAuth(): UseTurnkeyAuthReturn {
   const [error, setError] = useState<string | null>(null);
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
-  const { partnerId } = useB3();
+  const { partnerId } = useB3Config();
   const { authenticate } = useAuth();
 
   /**

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

@@ -0,0 +1,20 @@
+import { useAuthStore } from "@b3dotfun/sdk/global-account/react";
+import { useUserStore } from "../stores/userStore";
+
+/**
+ * Preferred Hook to get the user data
+ */
+export function useUser() {
+  const user = useUserStore(state => state.user);
+
+  const isConnecting = useAuthStore(state => state.isConnecting);
+  const isConnected = useAuthStore(state => state.isConnected);
+  const isAuthenticating = useAuthStore(state => state.isAuthenticating);
+
+  return {
+    user,
+    isConnecting,
+    isConnected,
+    isAuthenticating,
+  };
+}