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

package/dist/types/anyspend/react/components/AnySpendCollectorClubPurchase.d.ts

@@ -0,0 +1,57 @@
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
+import React from "react";
+export interface AnySpendCollectorClubPurchaseProps {
+    /**
+     * Optional order ID to load existing order
+     */
+    loadOrder?: string;
+    /**
+     * Display mode
+     */
+    mode?: "modal" | "page";
+    /**
+     * Active tab (crypto or fiat payment)
+     */
+    activeTab?: "crypto" | "fiat";
+    /**
+     * 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;
+    /**
+     * The payment token (defaults to USDC on Base)
+     */
+    paymentToken?: components["schemas"]["Token"];
+    /**
+     * Address that will receive the packs
+     */
+    recipientAddress: string;
+    /**
+     * Optional spender address (defaults to contract address)
+     */
+    spenderAddress?: string;
+    /**
+     * Success callback
+     */
+    onSuccess?: (txHash?: string) => void;
+    /**
+     * Optional custom header component
+     */
+    header?: (props: {
+        anyspendPrice: GetQuoteResponse | undefined;
+        isLoadingAnyspendPrice: boolean;
+    }) => React.JSX.Element;
+    /**
+     * Show recipient selection (default: true)
+     */
+    showRecipient?: boolean;
+}
+export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, onSuccess, header, showRecipient, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/anyspend/react/components/AnySpendCustom.d.ts

@@ -21,5 +21,4 @@ export declare function AnySpendCustom(props: {
     onSuccess?: (txHash?: string) => void;
     showRecipient?: boolean;
     onShowPointsDetail?: () => void;
-    clientReferenceId?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/anyspend/react/components/AnySpendCustomExactIn.d.ts

@@ -31,7 +31,6 @@ export interface AnySpendCustomExactInProps {
         anyspendPrice: GetQuoteResponse | undefined;
         isLoadingAnyspendPrice: boolean;
     }) => React.JSX.Element;
-    clientReferenceId?: string;
 }
 export declare function AnySpendCustomExactIn(props: AnySpendCustomExactInProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/anyspend/react/components/AnySpendDepositUpside.d.ts

@@ -1,5 +1,5 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
-export declare function AnySpendDepositUpside({ loadOrder, mode, recipientAddress, sourceTokenAddress, sourceTokenChainId, depositContractAddress, token, onSuccess, clientReferenceId, }: {
+export declare function AnySpendDepositUpside({ loadOrder, mode, recipientAddress, sourceTokenAddress, sourceTokenChainId, depositContractAddress, token, onSuccess, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     recipientAddress: string;
@@ -8,5 +8,4 @@ export declare function AnySpendDepositUpside({ loadOrder, mode, recipientAddres
     depositContractAddress: string;
     token: components["schemas"]["Token"];
     onSuccess?: (amount: string) => void;
-    clientReferenceId?: string;
 }): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/anyspend/react/components/AnySpendNFT.d.ts

@@ -1,10 +1,9 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
-export declare function AnySpendNFT({ loadOrder, mode, recipientAddress, nftContract, onSuccess, onShowPointsDetail, clientReferenceId, }: {
+export declare function AnySpendNFT({ loadOrder, mode, recipientAddress, nftContract, onSuccess, onShowPointsDetail, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     recipientAddress?: string;
     nftContract: components["schemas"]["NftContract"];
     onSuccess?: (txHash?: string) => void;
     onShowPointsDetail?: () => void;
-    clientReferenceId?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/anyspend/react/components/AnySpendStakeB3.d.ts

@@ -1,8 +1,7 @@
-export declare function AnySpendStakeB3({ loadOrder, mode, recipientAddress, stakeAmount, onSuccess, clientReferenceId, }: {
+export declare function AnySpendStakeB3({ loadOrder, mode, recipientAddress, stakeAmount, onSuccess, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     recipientAddress: string;
     stakeAmount?: string;
     onSuccess?: () => void;
-    clientReferenceId?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/anyspend/react/components/AnySpendStakeB3ExactIn.d.ts

@@ -1,4 +1,4 @@
-export declare function AnySpendStakeB3ExactIn({ loadOrder, mode, sourceTokenAddress, sourceTokenChainId, recipientAddress, stakeAmount, onSuccess, clientReferenceId, }: {
+export declare function AnySpendStakeB3ExactIn({ loadOrder, mode, sourceTokenAddress, sourceTokenChainId, recipientAddress, stakeAmount, onSuccess, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     sourceTokenAddress?: string;
@@ -6,5 +6,4 @@ export declare function AnySpendStakeB3ExactIn({ loadOrder, mode, sourceTokenAdd
     recipientAddress: string;
     stakeAmount?: string;
     onSuccess?: (amount: string) => void;
-    clientReferenceId?: string;
 }): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/anyspend/react/components/AnySpendStakeUpside.d.ts

@@ -1,5 +1,5 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
-export declare function AnySpendStakeUpside({ loadOrder, mode, beneficiaryAddress, stakeAmount, stakingContractAddress, token, onSuccess, activeTab, clientReferenceId, }: {
+export declare function AnySpendStakeUpside({ loadOrder, mode, beneficiaryAddress, stakeAmount, stakingContractAddress, token, onSuccess, activeTab, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     beneficiaryAddress: string;
@@ -8,5 +8,4 @@ export declare function AnySpendStakeUpside({ loadOrder, mode, beneficiaryAddres
     token: components["schemas"]["Token"];
     onSuccess?: () => void;
     activeTab?: "crypto" | "fiat";
-    clientReferenceId?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/anyspend/react/components/AnySpendStakeUpsideExactIn.d.ts

@@ -1,5 +1,5 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
-export declare function AnySpendStakeUpsideExactIn({ loadOrder, mode, recipientAddress, sourceTokenAddress, sourceTokenChainId, stakingContractAddress, token, onSuccess, clientReferenceId, }: {
+export declare function AnySpendStakeUpsideExactIn({ loadOrder, mode, recipientAddress, sourceTokenAddress, sourceTokenChainId, stakingContractAddress, token, onSuccess, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     recipientAddress: string;
@@ -8,5 +8,4 @@ export declare function AnySpendStakeUpsideExactIn({ loadOrder, mode, recipientA
     stakingContractAddress: string;
     token: components["schemas"]["Token"];
     onSuccess?: (amount: string) => void;
-    clientReferenceId?: string;
 }): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/anyspend/react/components/AnySpendTournament.d.ts

@@ -10,7 +10,6 @@ type AnySpendTournamentProps = {
     tournamentEntryToken: components["schemas"]["Token"];
     tournamentEntryFee: string;
     onSuccess?: () => void;
-    clientReferenceId?: string;
 } | {
     mode?: "modal" | "page";
     action: "fund";
@@ -21,7 +20,6 @@ type AnySpendTournamentProps = {
     tournamentFundToken: components["schemas"]["Token"];
     tournamentFundAmount: string;
     onSuccess?: () => void;
-    clientReferenceId?: string;
 };
 export declare function AnySpendTournament(props: AnySpendTournamentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/anyspend/react/components/AnyspendDepositHype.d.ts

@@ -21,6 +21,5 @@ export interface AnySpendDepositHypeProps {
     }) => void;
     customUsdInputValues?: string[];
     preferEoa?: boolean;
-    clientReferenceId?: string;
 }
-export declare function AnySpendDepositHype({ loadOrder, mode, recipientAddress, paymentType, sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, clientReferenceId, }: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AnySpendDepositHype({ loadOrder, mode, recipientAddress, paymentType, sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, }: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/anyspend/react/components/AnyspendSignatureMint.d.ts

@@ -1,9 +1,8 @@
 import { GenerateSigMintResponse } from "../../types/signatureMint";
-export declare function AnyspendSignatureMint({ loadOrder, mode, signatureData, imageUrl, onSuccess, clientReferenceId, }: {
+export declare function AnyspendSignatureMint({ loadOrder, mode, signatureData, imageUrl, onSuccess, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     signatureData: GenerateSigMintResponse;
     imageUrl?: string;
     onSuccess?: (txHash?: string) => void;
-    clientReferenceId?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/anyspend/react/components/index.d.ts

@@ -1,6 +1,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/dist/types/anyspend/react/hooks/useAnyspendCreateOrder.d.ts

@@ -18,7 +18,6 @@ export type CreateOrderParams = {
     creatorAddress?: string;
     payload?: any;
     partnerId?: string;
-    clientReferenceId?: string;
 };
 export type UseAnyspendCreateOrderProps = {
     onSuccess?: (data: any) => void;

package/dist/types/anyspend/react/hooks/useSigMint.d.ts

@@ -48,8 +48,8 @@ export declare const useGenerateSigMintData: ({ recipientAddress, contractAddres
             creatorMap?: {} | undefined;
             chainId: number;
             address: string;
-            title: string;
             _id: string | {};
+            title: string;
         };
     } | null;
     error: Error | null;

package/dist/types/anyspend/react/hooks/useValidatedClientReferenceId.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook that provides a validated client reference ID
+ * Gets the createClientReferenceId function from B3 context and validates the result
+ */
+export declare function useValidatedClientReferenceId(): string | undefined;

package/dist/types/global-account/react/components/B3Provider/B3Provider.d.ts

@@ -7,7 +7,7 @@ import { B3ContextType } from "./types";
 /**
  * Main B3Provider component
  */
-export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors, }: {
+export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors, createClientReferenceId, }: {
     theme: "light" | "dark";
     children: React.ReactNode;
     accountOverride?: Account;
@@ -24,11 +24,12 @@ export declare function B3Provider({ theme, children, accountOverride, environme
     onConnect?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
     connectors?: CreateConnectorFn[];
     overrideDefaultConnectors?: boolean;
+    createClientReferenceId?: () => string;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Inner provider component that provides the actual B3Context
  */
-export declare function InnerProvider({ children, accountOverride, environment, defaultPermissions, automaticallySetFirstEoa, theme, clientType, partnerId, }: {
+export declare function InnerProvider({ children, accountOverride, environment, defaultPermissions, automaticallySetFirstEoa, theme, clientType, partnerId, createClientReferenceId, }: {
     children: React.ReactNode;
     accountOverride?: Account;
     environment: B3ContextType["environment"];
@@ -37,4 +38,5 @@ export declare function InnerProvider({ children, accountOverride, environment,
     theme: "light" | "dark";
     clientType?: ClientType;
     partnerId: string;
+    createClientReferenceId?: () => string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/global-account/react/components/B3Provider/types.d.ts

@@ -20,6 +20,7 @@ export interface B3ContextType {
     theme: "light" | "dark";
     clientType: ClientType;
     partnerId: string;
+    createClientReferenceId?: () => string;
 }
 /**
  * Context for B3 provider

package/dist/types/global-account/react/hooks/useAuthentication.d.ts

@@ -13,8 +13,8 @@ export declare function useAuthentication(partnerId: string): {
     onConnect: (_walleAutoConnectedWith: Wallet, allConnectedWallets: Wallet[]) => Promise<void>;
     user: {
         email?: string | undefined;
-        username?: string | undefined;
         telNumber?: string | undefined;
+        username?: string | undefined;
         ens?: string | undefined;
         avatar?: string | undefined;
         preferences?: {} | undefined;

package/dist/types/global-account/react/hooks/useUserQuery.d.ts

@@ -8,8 +8,8 @@ import { Users } from "@b3dotfun/b3-api";
 export declare function useUserQuery(): {
     user: {
         email?: string | undefined;
-        username?: string | undefined;
         telNumber?: string | undefined;
+        username?: string | undefined;
         ens?: string | undefined;
         avatar?: string | undefined;
         preferences?: {} | undefined;

package/dist/types/global-account/react/stores/useModalStore.d.ts

@@ -381,10 +381,32 @@ export interface ProfileEditorModalProps extends BaseModalProps {
     /** Callback function called when profile is successfully updated */
     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
  */
-export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendDepositUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | ProfileEditorModalProps;
+export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendDepositUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | ProfileEditorModalProps | AnySpendCollectorClubPurchaseProps;
 /**
  * State interface for the modal store
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.70-alpha.1",
+  "version": "0.0.70-alpha.3",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

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

@@ -8,7 +8,6 @@ import {
   useAnyspendQuote,
   useGeoOnrampOptions,
 } from "@b3dotfun/sdk/anyspend/react";
-import { Validators } from "@b3dotfun/sdk/anyspend/utils/validation";
 import {
   Button,
   ShinyButton,
@@ -88,12 +87,6 @@ export function AnySpend(props: {
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
   onSuccess?: (txHash?: string) => void;
   customUsdInputValues?: string[];
-  /**
-   * Client-provided reference ID for tracking orders.
-   * Must be alphanumeric with optional hyphens, underscores, and dots (max 255 chars).
-   * Auto-generates UUID if not provided.
-   */
-  clientReferenceId?: string;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
@@ -115,7 +108,6 @@ function AnySpendInner({
   onTokenSelect,
   onSuccess,
   customUsdInputValues,
-  clientReferenceId: clientReferenceIdFromProps,
 }: {
   destinationTokenAddress?: string;
   destinationTokenChainId?: number;
@@ -127,23 +119,10 @@ function AnySpendInner({
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
   onSuccess?: (txHash?: string) => void;
   customUsdInputValues?: string[];
-  clientReferenceId?: string;
 }) {
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
 
-  // Validate and clean clientReferenceId
-  const validatedClientReferenceId = useMemo(() => {
-    const validation = Validators.clientReferenceId(clientReferenceIdFromProps);
-    if (!validation.isValid) {
-      console.error(
-        `[AnySpend] Invalid clientReferenceId: ${validation.error || "Validation failed"}. Will be set to undefined.`,
-      );
-      return undefined;
-    }
-    return validation.cleaned;
-  }, [clientReferenceIdFromProps]);
-
   // Determine if we're in "buy mode" based on whether destination token props are provided
   const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
 
@@ -844,7 +823,6 @@ function AnySpendInner({
         srcAmount: srcAmountBigInt.toString(),
         expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount || "0",
         creatorAddress: globalAddress,
-        clientReferenceId: validatedClientReferenceId,
       });
     } catch (err: any) {
       console.error(err);
@@ -913,7 +891,6 @@ function AnySpendInner({
         },
         expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
         creatorAddress: globalAddress,
-        clientReferenceId: validatedClientReferenceId,
       });
     } catch (err: any) {
       console.error(err);

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

@@ -38,8 +38,7 @@ export function AnySpendBondKit({
   imageUrl,
   b3Amount: initialB3Amount,
   onSuccess,
-  clientReferenceId,
-}: AnySpendBondKitProps & { clientReferenceId?: string }) {
+}: AnySpendBondKitProps) {
   const hasMounted = useHasMounted();
   const [showAmountPrompt, setShowAmountPrompt] = useState(!initialB3Amount);
   const [b3Amount, setB3Amount] = useState(initialB3Amount || "");
@@ -372,7 +371,6 @@ export function AnySpendBondKit({
       header={header}
       onSuccess={onSuccess}
       showRecipient={true}
-      clientReferenceId={clientReferenceId}
     />
   );
 }

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

@@ -129,7 +129,6 @@ export function AnySpendBuySpin({
   recipientAddress,
   prefillQuantity,
   onSuccess,
-  clientReferenceId,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -138,7 +137,6 @@ export function AnySpendBuySpin({
   recipientAddress: string;
   prefillQuantity?: string;
   onSuccess?: (txHash?: string) => void;
-  clientReferenceId?: string;
 }) {
   const hasMounted = useHasMounted();
   const { setB3ModalOpen } = useModalStore();
@@ -682,7 +680,6 @@ export function AnySpendBuySpin({
       header={header}
       onSuccess={txHash => onSuccess?.(txHash)}
       showRecipient={false}
-      clientReferenceId={clientReferenceId}
     />
   );
 }

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

@@ -0,0 +1,178 @@
+/**
+ * AnySpend component for Collector Club pack purchases
+ *
+ * This component enables users to purchase Collector Club packs using any token via AnySpend.
+ * It calls the `buyPacksFor` function on the Collector Club Shop contract on Base.
+ * Uses exact-out flow to ensure the contract receives exactly the required USDC amount.
+ *
+ * @example
+ * ```tsx
+ * import { AnySpendCollectorClubPurchase } from "@b3dotfun/sdk";
+ * import { USDC_BASE } from "@b3dotfun/sdk/anyspend/constants";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <AnySpendCollectorClubPurchase
+ *       packId={1}
+ *       packAmount={5}
+ *       pricePerPack="10000" // 0.01 USDC in wei (6 decimals)
+ *       paymentToken={USDC_BASE}
+ *       recipientAddress="0x123..."
+ *       onSuccess={(txHash) => console.log("Purchase successful!", txHash)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+import { USDC_BASE } from "@b3dotfun/sdk/anyspend/constants";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
+import React, { useMemo } from "react";
+import { encodeFunctionData } from "viem";
+import { AnySpendCustom } from "./AnySpendCustom";
+
+// Collector Club Shop contract on Base
+const CC_SHOP_ADDRESS = "0x68B32D594E3c7E5B8cd8046BD66AfB0DB5b9BF9c";
+const BASE_CHAIN_ID = 8453;
+
+// ABI for buyPacksFor function only
+const BUY_PACKS_FOR_ABI = {
+  inputs: [
+    { internalType: "address", name: "user", type: "address" },
+    { internalType: "uint256", name: "packId", type: "uint256" },
+    { internalType: "uint256", name: "amount", type: "uint256" },
+  ],
+  name: "buyPacksFor",
+  outputs: [],
+  stateMutability: "nonpayable",
+  type: "function",
+} as const;
+
+export interface AnySpendCollectorClubPurchaseProps {
+  /**
+   * Optional order ID to load existing order
+   */
+  loadOrder?: string;
+  /**
+   * Display mode
+   */
+  mode?: "modal" | "page";
+  /**
+   * Active tab (crypto or fiat payment)
+   */
+  activeTab?: "crypto" | "fiat";
+  /**
+   * 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;
+  /**
+   * The payment token (defaults to USDC on Base)
+   */
+  paymentToken?: components["schemas"]["Token"];
+  /**
+   * Address that will receive the packs
+   */
+  recipientAddress: string;
+  /**
+   * Optional spender address (defaults to contract address)
+   */
+  spenderAddress?: string;
+  /**
+   * Success callback
+   */
+  onSuccess?: (txHash?: string) => void;
+  /**
+   * Optional custom header component
+   */
+  header?: (props: {
+    anyspendPrice: GetQuoteResponse | undefined;
+    isLoadingAnyspendPrice: boolean;
+  }) => React.JSX.Element;
+  /**
+   * Show recipient selection (default: true)
+   */
+  showRecipient?: boolean;
+}
+
+export function AnySpendCollectorClubPurchase({
+  loadOrder,
+  mode = "modal",
+  activeTab = "crypto",
+  packId,
+  packAmount,
+  pricePerPack,
+  paymentToken = USDC_BASE,
+  recipientAddress,
+  spenderAddress = CC_SHOP_ADDRESS,
+  onSuccess,
+  header,
+  showRecipient = true,
+}: AnySpendCollectorClubPurchaseProps) {
+  // Calculate total amount needed (pricePerPack * packAmount)
+  const totalAmount = useMemo(() => {
+    try {
+      return (BigInt(pricePerPack) * BigInt(packAmount)).toString();
+    } catch (error) {
+      console.error("Failed to calculate total amount from props", { pricePerPack, packAmount, error });
+      return "0";
+    }
+  }, [pricePerPack, packAmount]);
+
+  // Encode the buyPacksFor function call
+  const encodedData = useMemo(() => {
+    try {
+      return encodeFunctionData({
+        abi: [BUY_PACKS_FOR_ABI],
+        functionName: "buyPacksFor",
+        args: [recipientAddress as `0x${string}`, BigInt(packId), BigInt(packAmount)],
+      });
+    } catch (error) {
+      console.error("Failed to encode function data", { recipientAddress, packId, packAmount, error });
+      return "0x";
+    }
+  }, [recipientAddress, packId, packAmount]);
+
+  // Default header if not provided
+  const defaultHeader = () => (
+    <div className="mb-4 flex flex-col items-center gap-3 text-center">
+      <div>
+        <h1 className="text-as-primary text-xl font-bold">Buy Collector Club Packs</h1>
+        <p className="text-as-secondary text-sm">
+          Purchase {packAmount} pack{packAmount !== 1 ? "s" : ""} using any token
+        </p>
+      </div>
+    </div>
+  );
+
+  return (
+    <AnySpendCustom
+      loadOrder={loadOrder}
+      mode={mode}
+      activeTab={activeTab}
+      recipientAddress={recipientAddress}
+      spenderAddress={spenderAddress}
+      orderType="custom"
+      dstChainId={BASE_CHAIN_ID}
+      dstToken={paymentToken}
+      dstAmount={totalAmount}
+      contractAddress={CC_SHOP_ADDRESS}
+      encodedData={encodedData}
+      metadata={{
+        packId,
+        packAmount,
+        pricePerPack,
+      }}
+      header={header || defaultHeader}
+      onSuccess={onSuccess}
+      showRecipient={showRecipient}
+    />
+  );
+}

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

@@ -187,7 +187,6 @@ export function AnySpendCustom(props: {
   onSuccess?: (txHash?: string) => void;
   showRecipient?: boolean;
   onShowPointsDetail?: () => void;
-  clientReferenceId?: string;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
@@ -215,7 +214,6 @@ function AnySpendCustomInner({
   onSuccess,
   showRecipient = true,
   onShowPointsDetail,
-  clientReferenceId,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -239,7 +237,6 @@ function AnySpendCustomInner({
   onSuccess?: (txHash?: string) => void;
   showRecipient?: boolean;
   onShowPointsDetail?: () => void;
-  clientReferenceId?: string;
 }) {
   const hasMounted = useHasMounted();
   const featureFlags = useFeatureFlags();
@@ -535,12 +532,10 @@ function AnySpendCustomInner({
                 : window.location.origin,
           },
           expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
-          clientReferenceId: clientReferenceId,
         });
       } else {
         void createRegularOrder({
           ...createOrderParams,
-          clientReferenceId: clientReferenceId,
         });
       }
     } catch (err) {