@b3dotfun/sdk 0.1.1 → 0.1.2-alpha.1

package/src/anyspend/react/components/types/classes.ts

@@ -0,0 +1,476 @@
+/**
+ * Classes prop types for AnySpend components customization.
+ * Use these to override default styling of specific elements.
+ */
+
+/** Classes for AnySpendDeposit component */
+export interface AnySpendDepositClasses {
+  // Root containers
+  root?: string;
+  chainSelection?: string;
+  form?: string;
+  formContent?: string;
+
+  // Close button
+  closeButton?: string;
+
+  // Balance header
+  balanceContainer?: string;
+  balanceLabel?: string;
+  balanceValue?: string;
+
+  // Options container
+  optionsContainer?: string;
+
+  // Loading skeleton
+  chainsSkeleton?: string;
+  skeletonItem?: string;
+
+  // Chains list
+  chainsContainer?: string;
+  chainButton?: string;
+  chainContent?: string;
+  chainInfo?: string;
+  chainName?: string;
+  chainIcon?: string;
+  chainBalance?: string;
+  chainChevron?: string;
+
+  // General options
+  generalOptions?: string;
+  optionButton?: string;
+  cryptoButton?: string;
+  qrButton?: string;
+  fiatButton?: string;
+  optionContent?: string;
+  optionInfo?: string;
+  optionTitle?: string;
+  optionDescription?: string;
+  optionIcon?: string;
+  optionChevron?: string;
+
+  // Divider
+  divider?: string;
+  dividerLine?: string;
+  dividerText?: string;
+
+  // Back button
+  backButton?: string;
+  backIcon?: string;
+  backText?: string;
+
+  // Header
+  header?: string;
+  title?: string;
+}
+
+/** Classes for AnySpend component */
+export interface AnySpendClasses {
+  // Root container
+  root?: string;
+  container?: string;
+
+  // Header
+  header?: string;
+  headerLogo?: string;
+  headerTitle?: string;
+
+  // Tab section
+  tabSection?: string;
+  tabList?: string;
+  tabTrigger?: string;
+  tabTriggerActive?: string;
+
+  // Main content area
+  mainContent?: string;
+  inputSection?: string;
+
+  // Swap direction button
+  swapDirectionButton?: string;
+
+  // Main action button
+  mainButton?: string;
+  mainButtonDisabled?: string;
+  mainButtonError?: string;
+
+  // Transaction history button
+  historyButton?: string;
+
+  // Bottom navigation
+  bottomNavigation?: string;
+
+  // Gas indicator
+  gasIndicator?: string;
+}
+
+/** Classes for AnySpendCustomExactIn component */
+export interface AnySpendCustomExactInClasses {
+  // Root container
+  root?: string;
+  container?: string;
+
+  // Header
+  header?: string;
+  headerTitle?: string;
+  headerDescription?: string;
+
+  // Content area
+  contentArea?: string;
+  inputSection?: string;
+
+  // Swap direction button
+  swapDirectionButton?: string;
+
+  // Main action button
+  mainButton?: string;
+  mainButtonDisabled?: string;
+  mainButtonError?: string;
+
+  // Footer
+  footer?: string;
+
+  // Gas indicator
+  gasIndicator?: string;
+}
+
+/** Classes for CryptoPaySection component */
+export interface CryptoPaySectionClasses {
+  root?: string;
+  container?: string;
+  label?: string;
+  inputContainer?: string;
+  input?: string;
+  tokenSelector?: string;
+  tokenIcon?: string;
+  tokenSymbol?: string;
+  chainBadge?: string;
+  balanceRow?: string;
+  balanceLabel?: string;
+  balanceValue?: string;
+  maxButton?: string;
+  paymentMethodButton?: string;
+  feeRow?: string;
+}
+
+/** Classes for CryptoReceiveSection component */
+export interface CryptoReceiveSectionClasses {
+  root?: string;
+  container?: string;
+  label?: string;
+  inputContainer?: string;
+  input?: string;
+  tokenSelector?: string;
+  tokenIcon?: string;
+  tokenSymbol?: string;
+  chainBadge?: string;
+  recipientRow?: string;
+  recipientLabel?: string;
+  recipientValue?: string;
+  recipientButton?: string;
+  pointsRow?: string;
+  feeRow?: string;
+}
+
+/** Classes for PanelOnramp component */
+export interface PanelOnrampClasses {
+  root?: string;
+  container?: string;
+  amountInput?: string;
+  presetButtons?: string;
+  presetButton?: string;
+  paymentMethodRow?: string;
+  recipientRow?: string;
+  destinationRow?: string;
+  feeRow?: string;
+  pointsRow?: string;
+}
+
+/** Classes for OrderDetails component */
+export interface OrderDetailsClasses {
+  root?: string;
+  container?: string;
+  header?: string;
+  statusBadge?: string;
+  statusPending?: string;
+  statusSuccess?: string;
+  statusFailed?: string;
+  amountSection?: string;
+  detailsSection?: string;
+  detailRow?: string;
+  detailLabel?: string;
+  detailValue?: string;
+  transactionLink?: string;
+  actionButton?: string;
+  backButton?: string;
+  returnButton?: string;
+}
+
+/** Classes for RecipientSelection component */
+export interface RecipientSelectionClasses {
+  root?: string;
+  container?: string;
+  header?: string;
+  searchInput?: string;
+  recipientList?: string;
+  recipientItem?: string;
+  recipientItemActive?: string;
+  recipientAvatar?: string;
+  recipientName?: string;
+  recipientAddress?: string;
+  confirmButton?: string;
+  backButton?: string;
+}
+
+/** Classes for CryptoPaymentMethod component */
+export interface CryptoPaymentMethodClasses {
+  root?: string;
+  container?: string;
+  header?: string;
+  optionsList?: string;
+  optionItem?: string;
+  optionItemActive?: string;
+  optionIcon?: string;
+  optionLabel?: string;
+  optionDescription?: string;
+  backButton?: string;
+}
+
+/** Classes for FiatPaymentMethod component */
+export interface FiatPaymentMethodClasses {
+  root?: string;
+  container?: string;
+  header?: string;
+  optionsList?: string;
+  optionItem?: string;
+  optionItemActive?: string;
+  optionIcon?: string;
+  optionLabel?: string;
+  optionDescription?: string;
+  backButton?: string;
+}
+
+/** Classes for WarningText component */
+export interface WarningTextClasses {
+  root?: string;
+}
+
+/** Classes for ChainWarningText component */
+export interface ChainWarningTextClasses {
+  root?: string;
+}
+
+/** Classes for TabSection component */
+export interface TabSectionClasses {
+  root?: string;
+  container?: string;
+  tabIndicator?: string;
+  tabButton?: string;
+  tabButtonActive?: string;
+}
+
+/** Classes for FeeDetailPanel component */
+export interface FeeDetailPanelClasses {
+  root?: string;
+  container?: string;
+  title?: string;
+  tierCard?: string;
+  tierCardTitle?: string;
+  tierRow?: string;
+  tierRowActive?: string;
+  tierLabel?: string;
+  tierValue?: string;
+  expandButton?: string;
+  summaryCard?: string;
+  summaryRow?: string;
+  summaryLabel?: string;
+  summaryValue?: string;
+  summaryDivider?: string;
+  totalRow?: string;
+  totalLabel?: string;
+  totalValue?: string;
+  backButton?: string;
+}
+
+/** Classes for PointsDetailPanel component */
+export interface PointsDetailPanelClasses {
+  root?: string;
+  container?: string;
+  title?: string;
+  description?: string;
+  highlightText?: string;
+  link?: string;
+  infoCard?: string;
+  infoCardTitle?: string;
+  infoList?: string;
+  infoListItem?: string;
+  backButton?: string;
+}
+
+/** Classes for PanelOnrampPayment component */
+export interface PanelOnrampPaymentClasses {
+  root?: string;
+  container?: string;
+  summaryTitle?: string;
+  summaryCard?: string;
+  summaryRow?: string;
+  summaryLabel?: string;
+  summaryValue?: string;
+  summaryDivider?: string;
+  amountRow?: string;
+  amountValue?: string;
+  feeText?: string;
+  loadingContainer?: string;
+  loadingSpinner?: string;
+  loadingText?: string;
+  paymentMethodTitle?: string;
+  paymentMethodIcons?: string;
+  paymentOption?: string;
+  paymentOptionIcon?: string;
+  paymentOptionContent?: string;
+  paymentOptionTitle?: string;
+  paymentOptionDescription?: string;
+  paymentOptionFee?: string;
+  paymentOptionChevron?: string;
+  backButton?: string;
+}
+
+/** Classes for OrderDetailsCollapsible component */
+export interface OrderDetailsCollapsibleClasses {
+  root?: string;
+  container?: string;
+  expandedContent?: string;
+  recipientSection?: string;
+  recipientLabel?: string;
+  recipientInfo?: string;
+  recipientName?: string;
+  recipientAddress?: string;
+  recipientCopyIcon?: string;
+  divider?: string;
+  expectedSection?: string;
+  expectedLabel?: string;
+  expectedValue?: string;
+  expectedAmount?: string;
+  chainInfo?: string;
+  chainText?: string;
+  chainLogo?: string;
+  pointsSection?: string;
+  pointsLabel?: string;
+  pointsValue?: string;
+  idSection?: string;
+  idLabel?: string;
+  idValue?: string;
+  collapsedContainer?: string;
+  collapsedButton?: string;
+  collapsedChevron?: string;
+}
+
+/** Classes for TransferCryptoDetails component */
+export interface TransferCryptoDetailsClasses {
+  root?: string;
+  container?: string;
+  header?: string;
+  backButton?: string;
+  title?: string;
+  timer?: string;
+  timerSvg?: string;
+  timerBackground?: string;
+  timerProgress?: string;
+  timerText?: string;
+  cardsContainer?: string;
+  amountCard?: string;
+  amountLabel?: string;
+  amountContainer?: string;
+  amountText?: string;
+  amountCopyIcon?: string;
+  chainCard?: string;
+  chainLabel?: string;
+  chainContainer?: string;
+  chainLogo?: string;
+  chainName?: string;
+  qrDepositCard?: string;
+  qrSection?: string;
+  qrWrapper?: string;
+  qrContainer?: string;
+  qrCode?: string;
+  walletHint?: string;
+  walletText?: string;
+  walletIcon?: string;
+  addressSection?: string;
+  addressLabel?: string;
+  addressCopyContainer?: string;
+  addressText?: string;
+  addressCopyIcon?: string;
+  actionsContainer?: string;
+  copyButton?: string;
+}
+
+/** Classes for QRDeposit component */
+export interface QRDepositClasses {
+  // Root containers
+  root?: string;
+  container?: string;
+  content?: string;
+
+  // Header
+  header?: string;
+  backButton?: string;
+  title?: string;
+  closeButton?: string;
+
+  // Token selector
+  tokenSelectorContainer?: string;
+  tokenSelectorLabel?: string;
+  tokenSelectorTrigger?: string;
+
+  // QR Code area
+  qrContent?: string;
+  qrCodeContainer?: string;
+  qrCode?: string;
+  qrScanHint?: string;
+
+  // Address area
+  addressContainer?: string;
+  addressLabel?: string;
+  addressRow?: string;
+  address?: string;
+  addressCopyIcon?: string;
+
+  // Watching indicator
+  watchingIndicator?: string;
+
+  // Copy button
+  copyButton?: string;
+
+  // Loading state
+  loadingContainer?: string;
+  loadingContent?: string;
+  loadingSpinner?: string;
+  loadingText?: string;
+
+  // Order details wrapper
+  orderDetailsContainer?: string;
+  orderDetailsContent?: string;
+}
+
+/** Combined classes for all AnySpend-related components */
+export interface AnySpendAllClasses {
+  deposit?: AnySpendDepositClasses;
+  anySpend?: AnySpendClasses;
+  customExactIn?: AnySpendCustomExactInClasses;
+  cryptoPaySection?: CryptoPaySectionClasses;
+  cryptoReceiveSection?: CryptoReceiveSectionClasses;
+  panelOnramp?: PanelOnrampClasses;
+  orderDetails?: OrderDetailsClasses;
+  recipientSelection?: RecipientSelectionClasses;
+  cryptoPaymentMethod?: CryptoPaymentMethodClasses;
+  fiatPaymentMethod?: FiatPaymentMethodClasses;
+  qrDeposit?: QRDepositClasses;
+  warningText?: WarningTextClasses;
+  chainWarningText?: ChainWarningTextClasses;
+  tabSection?: TabSectionClasses;
+  feeDetailPanel?: FeeDetailPanelClasses;
+  pointsDetailPanel?: PointsDetailPanelClasses;
+  panelOnrampPayment?: PanelOnrampPaymentClasses;
+  orderDetailsCollapsible?: OrderDetailsCollapsibleClasses;
+  transferCryptoDetails?: TransferCryptoDetailsClasses;
+}

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

@@ -1,3 +1,4 @@
+import { Users } from "@b3dotfun/b3-api";
 import { CreateOnrampOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOnrampOrder";
 import { CreateOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOrder";
 import { RelayKitProviderWrapper, TooltipProvider } from "@b3dotfun/sdk/global-account/react";
@@ -43,6 +44,7 @@ export function B3Provider({
   createClientReferenceId,
   enableTurnkey = false,
   defaultPermissions,
+  onTurnkeyConnect,
 }: {
   theme: "light" | "dark";
   children: React.ReactNode;
@@ -66,6 +68,7 @@ export function B3Provider({
   createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
   enableTurnkey?: boolean;
   defaultPermissions?: PermissionsConfig;
+  onTurnkeyConnect?: (user: Users) => void | Promise<void>;
 }) {
   // Initialize Google Analytics on mount
   useEffect(() => {
@@ -88,7 +91,11 @@ export function B3Provider({
         <QueryClientProvider client={queryClient}>
           <TooltipProvider>
             <ToastProvider>
-              <LocalSDKProvider onConnectCallback={onConnect} onLogoutCallback={onLogout}>
+              <LocalSDKProvider
+                onConnectCallback={onConnect}
+                onLogoutCallback={onLogout}
+                onTurnkeyConnect={onTurnkeyConnect}
+              >
                 <B3ConfigProvider
                   accountOverride={accountOverride}
                   environment={environment}

package/src/global-account/react/components/B3Provider/LocalSDKProvider.tsx

@@ -1,3 +1,4 @@
+import { Users } from "@b3dotfun/b3-api";
 import { createContext } from "react";
 import { Wallet } from "thirdweb/wallets";
 
@@ -8,11 +9,13 @@ import { Wallet } from "thirdweb/wallets";
 export interface LocalSDKContextType {
   onConnectCallback?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
   onLogoutCallback?: () => void | Promise<void>;
+  onTurnkeyConnect?: (user: Users) => void | Promise<void>;
 }
 
 export const LocalSDKContext = createContext<LocalSDKContextType>({
   onConnectCallback: undefined,
   onLogoutCallback: undefined,
+  onTurnkeyConnect: undefined,
 });
 
 /**
@@ -22,16 +25,19 @@ export function LocalSDKProvider({
   children,
   onConnectCallback,
   onLogoutCallback,
+  onTurnkeyConnect,
 }: {
   children: React.ReactNode;
   onConnectCallback?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
   onLogoutCallback?: () => void | Promise<void>;
+  onTurnkeyConnect?: (user: Users) => void | Promise<void>;
 }) {
   return (
     <LocalSDKContext.Provider
       value={{
         onConnectCallback,
         onLogoutCallback,
+        onTurnkeyConnect,
       }}
     >
       {children}

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

@@ -1,3 +1,4 @@
+import { Users } from "@b3dotfun/b3-api";
 import {
   Loading,
   SignInWithB3ModalProps,
@@ -8,9 +9,10 @@ import {
   useModalStore,
 } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
 import { Account } from "thirdweb/wallets";
+import { LocalSDKContext } from "../B3Provider/LocalSDKProvider";
 import { TurnkeyAuthModal } from "../TurnkeyAuthModal";
 import { SignInWithB3Privy } from "./SignInWithB3Privy";
 import { LoginStep, LoginStepContainer } from "./steps/LoginStep";
@@ -37,6 +39,7 @@ export function SignInWithB3Flow({
 }: SignInWithB3ModalProps) {
   const { automaticallySetFirstEoa, enableTurnkey } = useB3Config();
   const { user, refetchUser, logout } = useAuthentication(partnerId);
+  const { onTurnkeyConnect } = useContext(LocalSDKContext);
 
   // FIXME Logout before login to ensure a clean state
   const hasLoggedOutRef = useRef(false);
@@ -163,13 +166,17 @@ export function SignInWithB3Flow({
   // Define handleTurnkeySuccess before the useEffect that uses it
   const handleTurnkeySuccess = useCallback(
     async (user: any) => {
-      debug("Turnkey authentication successful - setting completed flag", { user });
+      debug("Turnkey authentication successful - setting completed flag", { user, onTurnkeyConnect });
+
+      // Call the onTurnkeyConnect callback
+      onTurnkeyConnect?.(user);
 
       // Set completed flag FIRST before any async operations
       setTurnkeyAuthCompleted(true);
 
       // Refetch user to update the user state with Turnkey ID
       debug("Refetching user after Turnkey success...");
+      // TODO: See why sometimes this fails with "No wallet found during auto-connect"
       await refetchUser();
       debug("User refetched successfully");
 
@@ -196,6 +203,7 @@ export function SignInWithB3Flow({
       // The useEffect will re-run with updated user data to complete the sign-in process
     },
     [
+      onTurnkeyConnect,
       refetchUser,
       strategies,
       onLoginSuccess,
@@ -395,11 +403,9 @@ 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
-              await refetchUser();
               // User is now authenticated via Turnkey
               // Set both isAuthenticated and isConnected to true so UI updates properly
               // Wallet connection is optional and can happen later for signing transactions
@@ -408,6 +414,12 @@ export function SignInWithB3Flow({
               setJustCompletedLogin(true);
               // Call the login success callback
               onLoginSuccess?.({} as Account);
+              // Call the onTurnkeyConnect callback
+              onTurnkeyConnect?.(authenticatedUser);
+
+              // After Turnkey auth, refetch user to get the full user object
+              // TODO: See why sometimes this fails with "No wallet found during auto-connect"
+              await refetchUser();
             }}
             onClose={() => {
               // If user closes Turnkey modal, they can still use wallet connection as fallback

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

@@ -1,3 +1,4 @@
+import { AnySpendAllClasses } from "@b3dotfun/sdk/anyspend/react";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { GenerateSigMintResponse } from "@b3dotfun/sdk/anyspend/types/signatureMint";
 import { AllowedStrategy } from "@b3dotfun/sdk/global-account/react";
@@ -568,6 +569,8 @@ export interface AnySpendDepositModalProps extends BaseModalProps {
   returnHomeLabel?: string;
   /** Whether the deposit requires a custom function (uses AnySpendCustomExactIn). Defaults to false. */
   isCustomDeposit?: boolean;
+  /** Custom class names for styling specific elements */
+  classes?: AnySpendAllClasses;
 }
 
 /**