@b3dotfun/sdk 0.0.70-alpha.1 → 0.0.70-alpha.2

package/src/anyspend/react/components/AnySpendCustomExactIn.tsx

@@ -57,7 +57,6 @@ export interface AnySpendCustomExactInProps {
     anyspendPrice: GetQuoteResponse | undefined;
     isLoadingAnyspendPrice: boolean;
   }) => React.JSX.Element;
-  clientReferenceId?: string;
 }
 
 export function AnySpendCustomExactIn(props: AnySpendCustomExactInProps) {
@@ -88,7 +87,6 @@ function AnySpendCustomExactInInner({
   orderType = "custom_exact_in",
   minDestinationAmount,
   header,
-  clientReferenceId,
 }: AnySpendCustomExactInProps) {
   const actionLabel = customExactInConfig?.action ?? "Custom Execution";
 
@@ -435,7 +433,6 @@ function AnySpendCustomExactInInner({
         expectedDstAmount: expectedDstAmountRaw,
         creatorAddress: globalAddress,
         payload,
-        clientReferenceId: clientReferenceId,
       });
     } catch (err: any) {
       console.error(err);
@@ -491,7 +488,6 @@ function AnySpendCustomExactInInner({
         expectedDstAmount: expectedDstAmountRaw,
         creatorAddress: globalAddress,
         payload,
-        clientReferenceId: clientReferenceId,
       });
     } catch (err: any) {
       console.error(err);

package/src/anyspend/react/components/AnySpendDepositUpside.tsx

@@ -33,7 +33,6 @@ export function AnySpendDepositUpside({
   depositContractAddress,
   token,
   onSuccess,
-  clientReferenceId,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -43,7 +42,6 @@ export function AnySpendDepositUpside({
   depositContractAddress: string;
   token: components["schemas"]["Token"];
   onSuccess?: (amount: string) => void;
-  clientReferenceId?: string;
 }) {
   if (!recipientAddress) return null;
 
@@ -78,7 +76,6 @@ export function AnySpendDepositUpside({
       customExactInConfig={customExactInConfig}
       header={header}
       onSuccess={onSuccess}
-      clientReferenceId={clientReferenceId}
     />
   );
 }

package/src/anyspend/react/components/AnySpendNFT.tsx

@@ -37,7 +37,6 @@ export function AnySpendNFT({
   nftContract,
   onSuccess,
   onShowPointsDetail,
-  clientReferenceId,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -45,7 +44,6 @@ export function AnySpendNFT({
   nftContract: components["schemas"]["NftContract"];
   onSuccess?: (txHash?: string) => void;
   onShowPointsDetail?: () => void;
-  clientReferenceId?: string;
 }) {
   const [imageUrlWithFallback, setFallbackImageUrl] = useState<string | null>(nftContract.imageUrl);
   const [isLoadingFallback, setIsLoadingFallback] = useState(false);
@@ -169,7 +167,6 @@ export function AnySpendNFT({
       header={header}
       onSuccess={onSuccess}
       onShowPointsDetail={onShowPointsDetail}
-      clientReferenceId={clientReferenceId}
     />
   );
 }

package/src/anyspend/react/components/AnySpendStakeB3.tsx

@@ -48,14 +48,12 @@ export function AnySpendStakeB3({
   recipientAddress,
   stakeAmount,
   onSuccess,
-  clientReferenceId,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
   recipientAddress: string;
   stakeAmount?: string;
   onSuccess?: () => void;
-  clientReferenceId?: string;
 }) {
   const hasMounted = useHasMounted();
   const { setB3ModalOpen } = useModalStore();
@@ -508,7 +506,6 @@ export function AnySpendStakeB3({
       header={header}
       onSuccess={onSuccess}
       showRecipient={true}
-      clientReferenceId={clientReferenceId}
     />
   );
 }

package/src/anyspend/react/components/AnySpendStakeB3ExactIn.tsx

@@ -53,7 +53,6 @@ export function AnySpendStakeB3ExactIn({
   recipientAddress,
   stakeAmount,
   onSuccess,
-  clientReferenceId,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -62,7 +61,6 @@ export function AnySpendStakeB3ExactIn({
   recipientAddress: string;
   stakeAmount?: string;
   onSuccess?: (amount: string) => void;
-  clientReferenceId?: string;
 }) {
   const hasMounted = useHasMounted();
   const { setB3ModalOpen } = useModalStore();
@@ -519,7 +517,6 @@ export function AnySpendStakeB3ExactIn({
       customExactInConfig={customExactInConfig}
       header={header}
       onSuccess={onSuccess}
-      clientReferenceId={clientReferenceId}
     />
   );
 }

package/src/anyspend/react/components/AnySpendStakeUpside.tsx

@@ -25,7 +25,6 @@ export function AnySpendStakeUpside({
   token,
   onSuccess,
   activeTab,
-  clientReferenceId,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -35,7 +34,6 @@ export function AnySpendStakeUpside({
   token: components["schemas"]["Token"];
   onSuccess?: () => void;
   activeTab?: "crypto" | "fiat";
-  clientReferenceId?: string;
 }) {
   const header = () => (
     <>
@@ -82,7 +80,6 @@ export function AnySpendStakeUpside({
       onSuccess={onSuccess}
       showRecipient={true}
       activeTab={activeTab}
-      clientReferenceId={clientReferenceId}
     />
   );
 }

package/src/anyspend/react/components/AnySpendStakeUpsideExactIn.tsx

@@ -25,7 +25,6 @@ export function AnySpendStakeUpsideExactIn({
   stakingContractAddress,
   token,
   onSuccess,
-  clientReferenceId,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -35,7 +34,6 @@ export function AnySpendStakeUpsideExactIn({
   stakingContractAddress: string;
   token: components["schemas"]["Token"];
   onSuccess?: (amount: string) => void;
-  clientReferenceId?: string;
 }) {
   if (!recipientAddress) return null;
 
@@ -70,7 +68,6 @@ export function AnySpendStakeUpsideExactIn({
       customExactInConfig={customExactInConfig}
       header={header}
       onSuccess={onSuccess}
-      clientReferenceId={clientReferenceId}
     />
   );
 }

package/src/anyspend/react/components/AnySpendTournament.tsx

@@ -17,7 +17,6 @@ type AnySpendTournamentProps =
       tournamentEntryToken: components["schemas"]["Token"];
       tournamentEntryFee: string;
       onSuccess?: () => void;
-      clientReferenceId?: string;
     }
   | {
       mode?: "modal" | "page";
@@ -29,7 +28,6 @@ type AnySpendTournamentProps =
       tournamentFundToken: components["schemas"]["Token"];
       tournamentFundAmount: string;
       onSuccess?: () => void;
-      clientReferenceId?: string;
     };
 
 export function AnySpendTournament(props: AnySpendTournamentProps) {
@@ -106,7 +104,6 @@ export function AnySpendTournament(props: AnySpendTournamentProps) {
       header={header}
       onSuccess={onSuccess}
       showRecipient={action === "join"}
-      clientReferenceId={props.clientReferenceId}
     />
   );
 }

package/src/anyspend/react/components/AnyspendDepositHype.tsx

@@ -24,7 +24,6 @@ export interface AnySpendDepositHypeProps {
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
   customUsdInputValues?: string[];
   preferEoa?: boolean;
-  clientReferenceId?: string;
 }
 
 export function AnySpendDepositHype({
@@ -39,7 +38,6 @@ export function AnySpendDepositHype({
   onTokenSelect,
   customUsdInputValues,
   preferEoa,
-  clientReferenceId,
 }: AnySpendDepositHypeProps) {
   if (!recipientAddress) return null;
 
@@ -81,7 +79,6 @@ export function AnySpendDepositHype({
       onTokenSelect={onTokenSelect}
       customUsdInputValues={customUsdInputValues}
       preferEoa={preferEoa}
-      clientReferenceId={clientReferenceId}
     />
   );
 }

package/src/anyspend/react/components/AnyspendSignatureMint.tsx

@@ -47,14 +47,12 @@ export function AnyspendSignatureMint({
   signatureData,
   imageUrl,
   onSuccess,
-  clientReferenceId,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
   signatureData: GenerateSigMintResponse;
   imageUrl?: string;
   onSuccess?: (txHash?: string) => void;
-  clientReferenceId?: string;
 }) {
   // Get token data
   const {
@@ -151,7 +149,6 @@ export function AnyspendSignatureMint({
       header={header}
       onSuccess={onSuccess}
       showRecipient={true}
-      clientReferenceId={clientReferenceId}
     />
   );
 }

package/src/anyspend/react/components/index.ts

@@ -2,6 +2,7 @@
 export { AnySpend } from "./AnySpend";
 export { AnySpendBondKit } from "./AnySpendBondKit";
 export { AnySpendBuySpin } from "./AnySpendBuySpin";
+export { AnySpendCollectorClubPurchase } from "./AnySpendCollectorClubPurchase";
 export { AnySpendCustom } from "./AnySpendCustom";
 export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
 export { AnySpendDepositHype, HYPE_TOKEN_DETAILS } from "./AnyspendDepositHype";

package/src/anyspend/react/hooks/useAnyspendCreateOnrampOrder.ts

@@ -10,6 +10,7 @@ import { useMemo } from "react";
 import { parseUnits } from "viem";
 import { base } from "viem/chains";
 import { CreateOrderParams } from "./useAnyspendCreateOrder";
+import { useValidatedClientReferenceId } from "./useValidatedClientReferenceId";
 
 export type OnrampOptions = {
   vendor: components["schemas"]["OnrampMetadata"]["vendor"];
@@ -33,6 +34,9 @@ export type UseAnyspendCreateOnrampOrderProps = {
  * Specifically handles orders that involve fiat-to-crypto onramp functionality
  */
 export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspendCreateOnrampOrderProps = {}) {
+  // Get validated client reference ID from B3 context
+  const validatedClientReferenceId = useValidatedClientReferenceId();
+
   // Get fingerprint data
   const { data: fpData } = useVisitorData({ extendedResult: true }, { immediate: true });
   const visitorData: VisitorData | undefined = fpData && {
@@ -55,7 +59,6 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
         tournament,
         payload,
         partnerId,
-        clientReferenceId,
       } = params;
 
       try {
@@ -103,7 +106,7 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
           }),
           creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
           partnerId,
-          clientReferenceId,
+          clientReferenceId: validatedClientReferenceId,
           visitorData,
         });
       } catch (error: any) {

package/src/anyspend/react/hooks/useAnyspendCreateOrder.ts

@@ -5,6 +5,7 @@ import { buildMetadata, buildPayload, normalizeAddress } from "@b3dotfun/sdk/any
 import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react";
 import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
+import { useValidatedClientReferenceId } from "./useValidatedClientReferenceId";
 
 export type CreateOrderParams = {
   recipientAddress: string;
@@ -20,7 +21,6 @@ export type CreateOrderParams = {
   creatorAddress?: string;
   payload?: any;
   partnerId?: string;
-  clientReferenceId?: string;
 };
 
 export type UseAnyspendCreateOrderProps = {
@@ -34,6 +34,9 @@ export type UseAnyspendCreateOrderProps = {
  * For onramp orders, use useAnyspendCreateOnrampOrder instead.
  */
 export function useAnyspendCreateOrder({ onSuccess, onError }: UseAnyspendCreateOrderProps = {}) {
+  // Get validated client reference ID from B3 context
+  const validatedClientReferenceId = useValidatedClientReferenceId();
+
   // Get fingerprint data
   const { data: fpData } = useVisitorData({ extendedResult: true }, { immediate: true });
   const visitorData: VisitorData | undefined = fpData && {
@@ -42,17 +45,7 @@ export function useAnyspendCreateOrder({ onSuccess, onError }: UseAnyspendCreate
   };
   const { mutate: createOrder, isPending } = useMutation({
     mutationFn: async (params: CreateOrderParams) => {
-      const {
-        recipientAddress,
-        orderType,
-        srcChain,
-        dstChain,
-        srcToken,
-        dstToken,
-        srcAmount,
-        creatorAddress,
-        clientReferenceId,
-      } = params;
+      const { recipientAddress, orderType, srcChain, dstChain, srcToken, dstToken, srcAmount, creatorAddress } = params;
 
       try {
         return await anyspendService.createOrder({
@@ -86,7 +79,7 @@ export function useAnyspendCreateOrder({ onSuccess, onError }: UseAnyspendCreate
             },
           }),
           creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
-          clientReferenceId,
+          clientReferenceId: validatedClientReferenceId,
           visitorData,
         });
       } catch (error: any) {

package/src/anyspend/react/hooks/useValidatedClientReferenceId.ts

@@ -0,0 +1,40 @@
+import { Validators } from "@b3dotfun/sdk/anyspend/utils/validation";
+import { useB3 } from "@b3dotfun/sdk/global-account/react";
+import { useMemo } from "react";
+
+/**
+ * Hook that provides a validated client reference ID
+ * Gets the createClientReferenceId function from B3 context and validates the result
+ */
+export function useValidatedClientReferenceId() {
+  const { createClientReferenceId } = useB3();
+
+  const validatedClientReferenceId = useMemo(() => {
+    // If no function provided, return undefined
+    if (!createClientReferenceId) {
+      return undefined;
+    }
+
+    try {
+      // Call the function to generate the ID
+      const generatedId = createClientReferenceId();
+
+      // Validate the generated ID
+      const validation = Validators.clientReferenceId(generatedId);
+
+      if (!validation.isValid) {
+        console.error(
+          `[AnySpend] Invalid clientReferenceId generated: ${validation.error || "Validation failed"}. Will be set to undefined.`,
+        );
+        return undefined;
+      }
+
+      return validation.cleaned;
+    } catch (error) {
+      console.error("[AnySpend] Error generating clientReferenceId:", error);
+      return undefined;
+    }
+  }, [createClientReferenceId]);
+
+  return validatedClientReferenceId;
+}

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

@@ -2,6 +2,7 @@ import {
   AnySpend,
   AnySpendBondKit,
   AnySpendBuySpin,
+  AnySpendCollectorClubPurchase,
   AnySpendNFT,
   AnyspendSignatureMint,
   AnySpendStakeB3,
@@ -143,6 +144,8 @@ export function B3DynamicModal() {
         return <LinkAccount {...contentType} />;
       case "anySpendDepositHype":
         return <AnySpendDepositHype {...contentType} mode="modal" />;
+      case "anySpendCollectorClubPurchase":
+        return <AnySpendCollectorClubPurchase {...contentType} mode="modal" />;
       case "avatarEditor":
         return <AvatarEditor onSetAvatar={contentType.onSuccess} />;
       case "profileEditor":

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

@@ -58,6 +58,7 @@ export function B3Provider({
   onConnect,
   connectors,
   overrideDefaultConnectors = false,
+  createClientReferenceId,
 }: {
   theme: "light" | "dark";
   children: React.ReactNode;
@@ -75,6 +76,7 @@ export function B3Provider({
   onConnect?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
   connectors?: CreateConnectorFn[];
   overrideDefaultConnectors?: boolean;
+  createClientReferenceId?: () => string;
 }) {
   // Initialize Google Analytics on mount
   useEffect(() => {
@@ -100,6 +102,7 @@ export function B3Provider({
                 automaticallySetFirstEoa={!!automaticallySetFirstEoa}
                 clientType={clientType}
                 partnerId={partnerId}
+                createClientReferenceId={createClientReferenceId}
               >
                 <RelayKitProviderWrapper simDuneApiKey={simDuneApiKey}>
                   {children}
@@ -128,6 +131,7 @@ export function InnerProvider({
   theme = "light",
   clientType = "socket",
   partnerId,
+  createClientReferenceId,
 }: {
   children: React.ReactNode;
   accountOverride?: Account;
@@ -137,6 +141,7 @@ export function InnerProvider({
   theme: "light" | "dark";
   clientType?: ClientType;
   partnerId: string;
+  createClientReferenceId?: () => string;
 }) {
   const activeAccount = useActiveAccount();
   const [manuallySelectedWallet, setManuallySelectedWallet] = useState<Wallet | undefined>(undefined);
@@ -204,6 +209,7 @@ export function InnerProvider({
         theme,
         clientType,
         partnerId: partnerId,
+        createClientReferenceId,
       }}
     >
       <InnerProvider2>{children}</InnerProvider2>

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

@@ -22,6 +22,7 @@ export interface B3ContextType {
   theme: "light" | "dark";
   clientType: ClientType;
   partnerId: string;
+  createClientReferenceId?: () => string;
 }
 
 /**
@@ -41,4 +42,5 @@ export const B3Context = createContext<B3ContextType>({
   theme: "light",
   clientType: "rest",
   partnerId: "",
+  createClientReferenceId: undefined,
 });

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

@@ -405,6 +405,29 @@ export interface ProfileEditorModalProps extends BaseModalProps {
   onSuccess?: () => void;
 }
 
+/**
+ * Props for the AnySpend Collector Club Purchase modal
+ * Handles Collector Club pack purchases
+ */
+export interface AnySpendCollectorClubPurchaseProps extends BaseModalProps {
+  /** Modal type identifier */
+  type: "anySpendCollectorClubPurchase";
+  /** The pack ID to purchase */
+  packId: number;
+  /** The number of packs to purchase */
+  packAmount: number;
+  /** Price per pack in wei (e.g., "10000" for 0.01 USDC with 6 decimals) */
+  pricePerPack: string;
+  /** Recipient address to receive the packs */
+  recipientAddress: string;
+  /** Payment type - crypto or fiat */
+  paymentType?: "crypto" | "fiat";
+  /** Callback function called when the purchase is successful */
+  onSuccess?: (txHash?: string) => void;
+  /** Client-provided reference ID for tracking orders */
+  clientReferenceId?: string;
+}
+
 /**
  * Union type of all possible modal content types
  */
@@ -429,7 +452,8 @@ export type ModalContentType =
   | LinkAccountModalProps
   | AnySpendDepositHypeProps
   | AvatarEditorModalProps
-  | ProfileEditorModalProps;
+  | ProfileEditorModalProps
+  | AnySpendCollectorClubPurchaseProps;
 // Add other modal types here like: | OtherModalProps | AnotherModalProps
 
 /**