@b3dotfun/sdk 0.1.0 → 0.1.1-alpha.0

package/src/global-account/react/components/SingleUserSearchSelector/README.md

@@ -0,0 +1,266 @@
+# SingleUserSearchSelector Component
+
+A specialized React 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
+- ⚡ Debounced search (500ms)
+- 🎨 Styled consistently with B3 design system
+- ♿ Accessible with proper keyboard navigation
+- 📱 Responsive design
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { SingleUserSearchSelector } from "@b3dotfun/sdk/global-account/react";
+
+function MyComponent() {
+  return (
+    <SingleUserSearchSelector
+      onSelectUser={profile => {
+        console.log("Selected user:", profile);
+        // Handle user selection
+      }}
+      placeholder="Search by address or name..."
+    />
+  );
+}
+```
+
+### With Profile Type Filter
+
+Filter results to only show specific profile types:
+
+```tsx
+<SingleUserSearchSelector
+  onSelectUser={profile => {
+    console.log("Selected user:", profile);
+  }}
+  profileTypeFilter={["b3-ens", "global-account"]}
+  placeholder="Search B3 users..."
+/>
+```
+
+### Available Profile Types
+
+- `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
+
+### Custom Styling
+
+You can apply custom styles using the `className` prop or target specific elements using CSS class names:
+
+```tsx
+<SingleUserSearchSelector
+  onSelectUser={profile => {
+    console.log("Selected user:", profile);
+  }}
+  className="mx-auto max-w-md"
+  placeholder="Find a user..."
+  showClearButton={true}
+  minSearchLength={3}
+/>
+```
+
+#### CSS Class Names for Custom Styling
+
+The component includes semantic class names for easy customization:
+
+```css
+/* Main container */
+.single-user-search-selector {
+}
+
+/* Input wrapper */
+.single-user-search-input-wrapper {
+}
+
+/* Search icon */
+.single-user-search-icon {
+}
+
+/* Input field */
+.single-user-search-input {
+}
+
+/* Clear button */
+.single-user-search-clear-button {
+}
+
+/* Loading state */
+.single-user-search-loading {
+}
+
+/* Error state */
+.single-user-search-error {
+}
+
+/* Dropdown container */
+.single-user-search-dropdown {
+}
+
+/* Result button */
+.single-user-search-result-button {
+}
+
+/* Avatar container */
+.single-user-search-result-avatar {
+}
+
+/* Profile info container */
+.single-user-search-result-info {
+}
+
+/* Display name */
+.single-user-search-result-name {
+}
+
+/* Address */
+.single-user-search-result-address {
+}
+
+/* Bio */
+.single-user-search-result-bio {
+}
+
+/* Badges container */
+.single-user-search-result-badges {
+}
+
+/* Individual badge */
+.single-user-search-result-badge {
+}
+```
+
+Example customization:
+
+```css
+/* Custom styling example */
+.single-user-search-input {
+  border-radius: 12px;
+  font-size: 16px;
+}
+
+.single-user-search-dropdown {
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+}
+
+.single-user-search-result-name {
+  color: #0c68e9;
+}
+```
+
+## Props
+
+| Prop                | Type                                 | Default                               | Description                                                                   |
+| ------------------- | ------------------------------------ | ------------------------------------- | ----------------------------------------------------------------------------- |
+| `onSelectUser`      | `(profile: CombinedProfile) => void` | **Required**                          | Callback function when a user is selected. Returns the complete profile data. |
+| `profileTypeFilter` | `ProfileTypeFilter[]`                | `undefined`                           | Optional filter to only show profiles with specific types.                    |
+| `placeholder`       | `string`                             | `"Search by address, name, or ID..."` | Custom placeholder text for the search input.                                 |
+| `className`         | `string`                             | `undefined`                           | Custom class name for the container.                                          |
+| `showClearButton`   | `boolean`                            | `true`                                | Show clear button when there's input.                                         |
+| `minSearchLength`   | `number`                             | `3`                                   | Minimum characters before triggering search.                                  |
+
+## Profile Data Structure
+
+The `onSelectUser` callback receives a `CombinedProfile` object:
+
+```typescript
+interface CombinedProfile {
+  name: string | null;
+  address: string | null;
+  avatar: string | undefined;
+  bio: string | null;
+  displayName: string | null;
+  profiles: Profile[];
+}
+
+interface Profile {
+  type: string;
+  address?: string;
+  name?: string;
+  avatar?: string | null;
+  bio?: string | null;
+  displayName?: string | null;
+}
+```
+
+## Examples
+
+### In a Modal
+
+```tsx
+import { SingleUserSearchSelector } from "@b3dotfun/sdk/global-account/react";
+import { Dialog } from "@radix-ui/react-dialog";
+
+function UserSearchModal({ isOpen, onClose }) {
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent>
+        <h2>Find User</h2>
+        <SingleUserSearchSelector
+          onSelectUser={profile => {
+            console.log("Selected:", profile);
+            onClose();
+          }}
+          profileTypeFilter={["b3-ens", "global-account"]}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+### With State Management
+
+```tsx
+import { SingleUserSearchSelector } from "@b3dotfun/sdk/global-account/react";
+import type { CombinedProfile } from "@b3dotfun/sdk/global-account/react";
+import { useState } from "react";
+
+function UserSelector() {
+  const [selectedUser, setSelectedUser] = useState<CombinedProfile | null>(null);
+
+  return (
+    <div>
+      <SingleUserSearchSelector onSelectUser={setSelectedUser} profileTypeFilter={["b3-ens"]} />
+
+      {selectedUser && (
+        <div className="mt-4">
+          <h3>Selected User</h3>
+          <p>Name: {selectedUser.displayName || selectedUser.name}</p>
+          <p>Address: {selectedUser.address}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+## Notes
+
+- The component uses the B3 Profiles API (`https://profiles.b3.fun`)
+- Search is debounced by 500ms to avoid excessive API calls
+- Only one result is shown at a time (by design for single-user selection)
+- The dropdown closes automatically when a user is selected
+- Click outside the dropdown to close it
+- The component handles loading and error states automatically
+
+## Exporting
+
+The component is exported from the SDK package:
+
+```typescript
+// From main export
+import { SingleUserSearchSelector } from "@b3dotfun/sdk/global-account/react";
+
+// From specific path
+import { SingleUserSearchSelector } from "@b3dotfun/sdk/global-account/react/components/SingleUserSearchSelector";
+```

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/index.ts

@@ -49,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

@@ -39,7 +39,8 @@ export { useQueryBSMNT } from "./useQueryBSMNT";
 export { useRemoveSessionKey } from "./useRemoveSessionKey";
 export { useRouter } from "./useRouter";
 export { useSearchParamsSSR } from "./useSearchParamsSSR";
-export { useSimBalance, useSimSvmBalance } from "./useSimBalance";
+export { useSimBalance, useSimSvmBalance, useSimTokenBalance } from "./useSimBalance";
+export { useSimCollectibles } from "./useSimCollectibles";
 export { useSiwe } from "./useSiwe";
 export { useTokenBalance } from "./useTokenBalance";
 export { useTokenBalanceDirect } from "./useTokenBalanceDirect";

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();
@@ -181,8 +181,12 @@ export function useAuthentication(partnerId: string) {
       setIsConnected(false);
       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/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,