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

package/src/global-account/react/components/B3Provider/useB3.ts

@@ -1,17 +1,9 @@
-import { useContext, useMemo } from "react";
-import { B3Context } from "./types";
+import { useB3Config } from "./useB3Config";
 
 /**
- * Hook to access the B3 context
- * @throws Error if used outside a B3Provider
+ * Hook to access the B3 configuration
+ * @deprecated This is just an alias for useB3Config. Use useB3Config directly instead.
  */
 export function useB3() {
-  const context = useContext(B3Context);
-
-  if (!context.initialized) {
-    throw new Error("useB3 must be used within a B3Provider");
-  }
-
-  // Return a stable reference
-  return useMemo(() => context, [context]);
+  return useB3Config();
 }

package/src/global-account/react/components/B3Provider/useB3Account.ts

@@ -1,7 +1,11 @@
 import { useActiveAccount } from "thirdweb/react";
+import { useAuthStore } from "../../stores/useAuthStore";
 
 // Wrapper around useActiveAccount
 export const useB3Account = () => {
-  const account = useActiveAccount();
-  return account;
+  const isAuthenticated = useAuthStore(state => state.isAuthenticated);
+  const activeAccount = useActiveAccount();
+  const effectiveAccount = isAuthenticated ? activeAccount : undefined;
+
+  return effectiveAccount;
 };

package/src/global-account/react/components/B3Provider/useB3Config.ts

@@ -1,34 +1 @@
-import { useContext, useMemo } from "react";
-import { B3Context } from "./types";
-
-export const useB3Config = () => {
-  const context = useContext(B3Context);
-
-  if (!context) {
-    throw new Error("useB3 must be used within a B3Provider");
-  }
-
-  const {
-    automaticallySetFirstEoa,
-    environment,
-    theme,
-    clientType,
-    partnerId,
-    createClientReferenceId,
-    enableTurnkey,
-  } = context;
-
-  // Return a stable reference
-  return useMemo(
-    () => ({
-      automaticallySetFirstEoa,
-      environment,
-      theme,
-      clientType,
-      partnerId,
-      createClientReferenceId,
-      enableTurnkey,
-    }),
-    [automaticallySetFirstEoa, environment, theme, clientType, partnerId, createClientReferenceId, enableTurnkey],
-  );
-};
+export { useB3Config } from "./B3ConfigProvider";

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

@@ -1,10 +1,9 @@
 import {
   useAccountWallet,
-  useAuthentication,
-  useB3,
   useModalStore,
   useProfile,
   useSimBalance,
+  useUser,
 } from "@b3dotfun/sdk/global-account/react";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
@@ -22,8 +21,7 @@ const ProfileSection = () => {
     address: eoaAddress || account?.address,
     fresh: true,
   });
-  const { partnerId } = useB3();
-  const { user } = useAuthentication(partnerId);
+  const { user } = useUser();
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const navigateBack = useModalStore(state => state.navigateBack);

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

@@ -1,6 +1,6 @@
 import { ens_normalize } from "@adraffy/ens-normalize";
 import app from "@b3dotfun/sdk/global-account/app";
-import { toast, useAuthentication, useB3, useModalStore, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { toast, useAuthentication, useB3Config, useModalStore, useProfile } from "@b3dotfun/sdk/global-account/react";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { Check, Loader2, Pencil, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
@@ -17,7 +17,7 @@ const SettingsProfileCard = () => {
     address: eoaAddress || account?.address,
     fresh: true,
   });
-  const { partnerId } = useB3();
+  const { partnerId } = useB3Config();
   const { user, setUser } = useAuthentication(partnerId);
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);

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

@@ -1,4 +1,4 @@
-import { useB3 } from "@b3dotfun/sdk/global-account/react";
+import { useB3Config } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useState } from "react";
 import { notificationsAPI } from "../../../utils/notificationsAPI";
@@ -26,7 +26,7 @@ export const DiscordChannel = ({
   onConnectionChange,
   onToggle,
 }: DiscordChannelProps) => {
-  const { partnerId } = useB3();
+  const { partnerId } = useB3Config();
 
   const [discordId, setDiscordId] = useState("");
   const [isConnecting, setIsConnecting] = useState(false);

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

@@ -1,4 +1,4 @@
-import { useB3 } from "@b3dotfun/sdk/global-account/react";
+import { useB3Config } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useState } from "react";
 import { notificationsAPI } from "../../../utils/notificationsAPI";
@@ -31,7 +31,7 @@ export const EmailChannel = ({
   onConnectionChange,
   onToggle,
 }: EmailChannelProps) => {
-  const { partnerId } = useB3();
+  const { partnerId } = useB3Config();
 
   const [email, setEmail] = useState("");
   const [emailError, setEmailError] = useState<string | null>(null);

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

@@ -1,4 +1,4 @@
-import { useB3 } from "@b3dotfun/sdk/global-account/react";
+import { useB3Config } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useState } from "react";
 import { notificationsAPI } from "../../../utils/notificationsAPI";
@@ -32,7 +32,7 @@ export const PhoneChannel = ({
   onConnectionChange,
   onToggle,
 }: PhoneChannelProps) => {
-  const { partnerId } = useB3();
+  const { partnerId } = useB3Config();
 
   const [phoneNumber, setPhoneNumber] = useState("");
   const [isConnectingSMS, setIsConnectingSMS] = useState(false);

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

@@ -1,4 +1,4 @@
-import { useB3 } from "@b3dotfun/sdk/global-account/react";
+import { useB3Config } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useState } from "react";
 import { notificationsAPI } from "../../../utils/notificationsAPI";
@@ -26,7 +26,7 @@ export const TelegramChannel = ({
   onConnectionChange,
   onToggle,
 }: TelegramChannelProps) => {
-  const { partnerId } = useB3();
+  const { partnerId } = useB3Config();
 
   const [isConnecting, setIsConnecting] = useState(false);
   const [status, setStatus] = useState<"idle" | "pending" | "connected">("idle");

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

@@ -3,7 +3,7 @@ import {
   PermissionItem,
   RequestPermissionsModalProps,
   useAddTWSessionKey,
-  useB3,
+  useB3Config,
   useGetAllTWSigners,
 } from "@b3dotfun/sdk/global-account/react";
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
@@ -30,7 +30,7 @@ export function RequestPermissions({
 }: RequestPermissionsModalProps) {
   const [isApproving, setIsApproving] = useState(false);
   const account = useActiveAccount();
-  const { defaultPermissions } = useB3();
+  const { defaultPermissions } = useB3Config();
   const DEFAULT_PERMISSIONS = useMemo(
     () => permissions ?? (defaultPermissions as PermissionsConfig),
     [defaultPermissions, permissions],

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

@@ -5,7 +5,7 @@ import {
   StyleRoot,
   useAccountWallet,
   useAuthentication,
-  useB3,
+  useB3Config,
   useIsMobile,
 } from "@b3dotfun/sdk/global-account/react";
 import Icon from "@b3dotfun/sdk/global-account/react/components/custom/Icon";
@@ -30,7 +30,7 @@ type SignInWithB3Props = Omit<SignInWithB3ModalProps, "type" | "showBackButton">
 
 export function SignIn(props: SignInWithB3Props) {
   const { className } = props;
-  const { automaticallySetFirstEoa, partnerId } = useB3();
+  const { automaticallySetFirstEoa, partnerId } = useB3Config();
   const {
     address: globalAddress,
     ensName,

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

@@ -1,9 +1,10 @@
+import { Users } from "@b3dotfun/b3-api";
 import {
   Loading,
   SignInWithB3ModalProps,
   useAuthentication,
   useAuthStore,
-  useB3,
+  useB3Config,
   useGetAllTWSigners,
   useModalStore,
 } from "@b3dotfun/sdk/global-account/react";
@@ -34,8 +35,9 @@ export function SignInWithB3Flow({
   closeAfterLogin = false,
   source = "signInWithB3Button",
   signersEnabled = false,
+  onTurnkeyConnect,
 }: SignInWithB3ModalProps) {
-  const { automaticallySetFirstEoa, enableTurnkey } = useB3();
+  const { automaticallySetFirstEoa, enableTurnkey } = useB3Config();
   const { user, refetchUser, logout } = useAuthentication(partnerId);
 
   // FIXME Logout before login to ensure a clean state
@@ -395,7 +397,7 @@ export function SignInWithB3Flow({
       content = (
         <LoginStepContainer partnerId={partnerId}>
           <TurnkeyAuthModal
-            onSuccess={async (authenticatedUser: any) => {
+            onSuccess={async (authenticatedUser: Users) => {
               debug("Turnkey authentication successful in primary flow", { authenticatedUser });
               setTurnkeyAuthCompleted(true);
               // After Turnkey auth, refetch user to get the full user object
@@ -408,6 +410,8 @@ export function SignInWithB3Flow({
               setJustCompletedLogin(true);
               // Call the login success callback
               onLoginSuccess?.({} as Account);
+              // Call the onTurnkeyConnect callback
+              onTurnkeyConnect?.(authenticatedUser);
             }}
             onClose={() => {
               // If user closes Turnkey modal, they can still use wallet connection as fallback

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

@@ -2,7 +2,7 @@ import {
   Loading,
   useAuthentication,
   useAuthStore,
-  useB3,
+  useB3Config,
   useHandleConnectWithPrivy,
 } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
@@ -19,7 +19,7 @@ interface SignInWithB3PrivyProps {
 }
 
 export function SignInWithB3Privy({ onSuccess, onError, chain }: SignInWithB3PrivyProps) {
-  const { partnerId } = useB3();
+  const { partnerId } = useB3Config();
   const { isLoading, connectTw, fullToken } = useHandleConnectWithPrivy(chain, onSuccess);
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);

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

@@ -1,4 +1,4 @@
-import { useAuthentication, useB3, useQueryB3 } from "@b3dotfun/sdk/global-account/react";
+import { useAuthentication, useB3Config, useQueryB3 } from "@b3dotfun/sdk/global-account/react";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { Chain } from "thirdweb";
@@ -50,7 +50,7 @@ export function LoginStepContainer({ children, partnerId }: LoginStepContainerPr
 }
 
 export function LoginStep({ onSuccess, chain }: LoginStepProps) {
-  const { partnerId, theme } = useB3();
+  const { partnerId, theme } = useB3Config();
   const wallet = ecosystemWallet(ecosystemWalletId, {
     partnerId: partnerId,
   });

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

@@ -7,7 +7,7 @@ import {
   LoginStepContainer,
   useAuthentication,
   useAuthStore,
-  useB3,
+  useB3Config,
   useConnect,
   WalletRow,
 } from "@b3dotfun/sdk/global-account/react";
@@ -37,7 +37,7 @@ export function LoginStepCustom({
   maxInitialWallets = 2,
   automaticallySetFirstEoa,
 }: LoginStepCustomProps) {
-  const { partnerId } = useB3();
+  const { partnerId } = useB3Config();
   const [isLoading, setIsLoading] = useState(false);
   const [showAllWallets, setShowAllWallets] = useState(false);
   const { connect } = useConnect(partnerId, chain);

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";
+```