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

package/dist/cjs/anyspend/utils/validation.d.ts

@@ -0,0 +1,67 @@
+export interface ValidationResult {
+    isValid: boolean;
+    error?: string;
+    cleaned?: string;
+}
+export interface StringValidationOptions {
+    required?: boolean;
+    defaultValue?: () => string;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: RegExp;
+    patternErrorMessage?: string;
+    trim?: boolean;
+    toLowerCase?: boolean;
+    toUpperCase?: boolean;
+    customValidator?: (value: string) => {
+        valid: boolean;
+        error?: string;
+    };
+}
+/**
+ * Generic string validator with configurable rules
+ */
+export declare function validateString(value: string | undefined, options: StringValidationOptions): ValidationResult;
+/**
+ * Common validation patterns
+ */
+export declare const ValidationPatterns: {
+    readonly ALPHANUMERIC: RegExp;
+    readonly ALPHANUMERIC_WITH_DASH_UNDERSCORE: RegExp;
+    readonly ALPHANUMERIC_WITH_SAFE_CHARS: RegExp;
+    readonly SAFE_IDENTIFIER: RegExp;
+    readonly NO_CONTROL_CHARS: RegExp;
+    readonly URL_SAFE: RegExp;
+    readonly NUMERIC: RegExp;
+    readonly HEX: RegExp;
+};
+/**
+ * Pre-configured validators for common use cases
+ */
+export declare const Validators: {
+    /**
+     * Validates client reference IDs (alphanumeric + safe chars)
+     * Returns undefined if not provided
+     */
+    clientReferenceId: (value?: string) => ValidationResult;
+    /**
+     * Validates alphanumeric strings (letters and numbers only)
+     */
+    alphanumeric: (value?: string, required?: boolean) => ValidationResult;
+    /**
+     * Validates wallet addresses (hex format)
+     */
+    walletAddress: (value?: string, required?: boolean) => ValidationResult;
+    /**
+     * Validates order IDs (UUID format)
+     */
+    orderId: (value?: string) => ValidationResult;
+    /**
+     * Validates URL-safe strings
+     */
+    urlSafe: (value?: string, maxLength?: number) => ValidationResult;
+    /**
+     * Validates safe identifiers (no injection risks)
+     */
+    safeIdentifier: (value?: string, required?: boolean) => ValidationResult;
+};

package/dist/cjs/anyspend/utils/validation.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Validators = exports.ValidationPatterns = void 0;
+exports.validateString = validateString;
+/**
+ * Generic string validator with configurable rules
+ */
+function validateString(value, options) {
+    const { required = false, defaultValue, minLength, maxLength, pattern, patternErrorMessage, trim = true, toLowerCase = false, toUpperCase = false, customValidator, } = options;
+    // Handle empty/undefined
+    if (!value || (trim && value.trim() === "")) {
+        if (required && !defaultValue) {
+            return { isValid: false, error: "This field is required" };
+        }
+        if (defaultValue) {
+            return { isValid: true, cleaned: defaultValue() };
+        }
+        return { isValid: true, cleaned: undefined };
+    }
+    // Pre-processing
+    let cleaned = value;
+    if (trim)
+        cleaned = cleaned.trim();
+    if (toLowerCase)
+        cleaned = cleaned.toLowerCase();
+    if (toUpperCase)
+        cleaned = cleaned.toUpperCase();
+    // Length validation
+    if (minLength !== undefined && cleaned.length < minLength) {
+        return {
+            isValid: false,
+            error: `Minimum length is ${minLength} characters`,
+        };
+    }
+    if (maxLength !== undefined && cleaned.length > maxLength) {
+        return {
+            isValid: false,
+            error: `Maximum length is ${maxLength} characters`,
+        };
+    }
+    // Pattern validation
+    if (pattern && !pattern.test(cleaned)) {
+        return {
+            isValid: false,
+            error: patternErrorMessage || "Invalid format",
+        };
+    }
+    // Custom validation
+    if (customValidator) {
+        const customResult = customValidator(cleaned);
+        if (!customResult.valid) {
+            return { isValid: false, error: customResult.error };
+        }
+    }
+    return { isValid: true, cleaned };
+}
+/**
+ * Common validation patterns
+ */
+exports.ValidationPatterns = {
+    ALPHANUMERIC: /^[a-zA-Z0-9]+$/,
+    ALPHANUMERIC_WITH_DASH_UNDERSCORE: /^[a-zA-Z0-9_-]+$/,
+    ALPHANUMERIC_WITH_SAFE_CHARS: /^[a-zA-Z0-9_.\-]+$/,
+    SAFE_IDENTIFIER: /^[a-zA-Z0-9_.\-]+$/, // For IDs, references
+    NO_CONTROL_CHARS: /^[^\x00-\x1F\x7F]+$/,
+    URL_SAFE: /^[a-zA-Z0-9_.\-~]+$/,
+    NUMERIC: /^\d+$/,
+    HEX: /^[0-9a-fA-F]+$/,
+};
+/**
+ * Pre-configured validators for common use cases
+ */
+exports.Validators = {
+    /**
+     * Validates client reference IDs (alphanumeric + safe chars)
+     * Returns undefined if not provided
+     */
+    clientReferenceId: (value) => validateString(value, {
+        required: false,
+        maxLength: 255,
+        pattern: exports.ValidationPatterns.SAFE_IDENTIFIER,
+        patternErrorMessage: "Only letters, numbers, hyphens, underscores, and dots allowed",
+        trim: true,
+        customValidator: val => {
+            // Additional security checks
+            const dangerous = /('|"|;|--|\/\*|\*\/|<|>|script)/i;
+            if (dangerous.test(val)) {
+                return {
+                    valid: false,
+                    error: "Contains potentially dangerous characters",
+                };
+            }
+            return { valid: true };
+        },
+    }),
+    /**
+     * Validates alphanumeric strings (letters and numbers only)
+     */
+    alphanumeric: (value, required = false) => validateString(value, {
+        required,
+        pattern: exports.ValidationPatterns.ALPHANUMERIC,
+        patternErrorMessage: "Only letters and numbers allowed",
+        trim: true,
+    }),
+    /**
+     * Validates wallet addresses (hex format)
+     */
+    walletAddress: (value, required = true) => validateString(value, {
+        required,
+        minLength: 42,
+        maxLength: 42,
+        pattern: /^0x[a-fA-F0-9]{40}$/,
+        patternErrorMessage: "Invalid wallet address format",
+        trim: true,
+        toLowerCase: true,
+    }),
+    /**
+     * Validates order IDs (UUID format)
+     */
+    orderId: (value) => validateString(value, {
+        required: false,
+        pattern: /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i,
+        patternErrorMessage: "Invalid order ID format",
+        trim: true,
+        toLowerCase: true,
+    }),
+    /**
+     * Validates URL-safe strings
+     */
+    urlSafe: (value, maxLength = 255) => validateString(value, {
+        maxLength,
+        pattern: exports.ValidationPatterns.URL_SAFE,
+        patternErrorMessage: "Contains invalid URL characters",
+        trim: true,
+    }),
+    /**
+     * Validates safe identifiers (no injection risks)
+     */
+    safeIdentifier: (value, required = false) => validateString(value, {
+        required,
+        maxLength: 255,
+        pattern: exports.ValidationPatterns.SAFE_IDENTIFIER,
+        patternErrorMessage: "Invalid identifier format",
+        customValidator: val => {
+            // Additional security checks
+            const dangerous = /('|"|;|--|\/\*|\*\/|<|>|script)/i;
+            if (dangerous.test(val)) {
+                return {
+                    valid: false,
+                    error: "Contains potentially dangerous characters",
+                };
+            }
+            return { valid: true };
+        },
+        trim: true,
+    }),
+};

package/dist/cjs/global-account/react/components/B3DynamicModal.js

@@ -118,6 +118,8 @@ function B3DynamicModal() {
                 return (0, jsx_runtime_1.jsx)(LinkAccount_1.LinkAccount, { ...contentType });
             case "anySpendDepositHype":
                 return (0, jsx_runtime_1.jsx)(AnyspendDepositHype_1.AnySpendDepositHype, { ...contentType, mode: "modal" });
+            case "anySpendCollectorClubPurchase":
+                return (0, jsx_runtime_1.jsx)(react_1.AnySpendCollectorClubPurchase, { ...contentType, mode: "modal" });
             case "avatarEditor":
                 return (0, jsx_runtime_1.jsx)(AvatarEditor_1.AvatarEditor, { onSetAvatar: contentType.onSuccess });
             case "profileEditor":

package/dist/cjs/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/cjs/global-account/react/components/B3Provider/B3Provider.js

@@ -32,7 +32,7 @@ const queryClient = new react_query_1.QueryClient();
 /**
  * Main B3Provider component
  */
-function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType = "rest", rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors = false, }) {
+function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType = "rest", rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors = false, createClientReferenceId, }) {
     // Initialize Google Analytics on mount
     (0, react_2.useEffect)(() => {
         (0, analytics_1.loadGA4Script)();
@@ -42,12 +42,12 @@ function B3Provider({ theme = "light", children, accountOverride, environment, a
         (0, client_manager_1.setClientType)(clientType);
     }, [clientType]);
     const wagmiConfig = (0, createWagmiConfig_1.createWagmiConfig)({ partnerId, rpcUrls, connectors, overrideDefaultConnectors });
-    return ((0, jsx_runtime_1.jsx)(react_3.ThirdwebProvider, { children: (0, jsx_runtime_1.jsx)(wagmi_1.WagmiProvider, { config: wagmiConfig, reconnectOnMount: false, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(react_1.TooltipProvider, { children: (0, jsx_runtime_1.jsx)(LocalSDKProvider_1.LocalSDKProvider, { onConnectCallback: onConnect, children: (0, jsx_runtime_1.jsx)(InnerProvider, { accountOverride: accountOverride, environment: environment, theme: theme, automaticallySetFirstEoa: !!automaticallySetFirstEoa, clientType: clientType, partnerId: partnerId, children: (0, jsx_runtime_1.jsxs)(react_1.RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, (0, jsx_runtime_1.jsx)(StyleRoot_1.StyleRoot, { id: "b3-root" }), (0, jsx_runtime_1.jsx)(sonner_1.Toaster, { theme: theme, position: toaster?.position, style: toaster?.style })] }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_3.ThirdwebProvider, { children: (0, jsx_runtime_1.jsx)(wagmi_1.WagmiProvider, { config: wagmiConfig, reconnectOnMount: false, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(react_1.TooltipProvider, { children: (0, jsx_runtime_1.jsx)(LocalSDKProvider_1.LocalSDKProvider, { onConnectCallback: onConnect, children: (0, jsx_runtime_1.jsx)(InnerProvider, { accountOverride: accountOverride, environment: environment, theme: theme, automaticallySetFirstEoa: !!automaticallySetFirstEoa, clientType: clientType, partnerId: partnerId, createClientReferenceId: createClientReferenceId, children: (0, jsx_runtime_1.jsxs)(react_1.RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, (0, jsx_runtime_1.jsx)(StyleRoot_1.StyleRoot, { id: "b3-root" }), (0, jsx_runtime_1.jsx)(sonner_1.Toaster, { theme: theme, position: toaster?.position, style: toaster?.style })] }) }) }) }) }) }) }));
 }
 /**
  * Inner provider component that provides the actual B3Context
  */
-function InnerProvider({ children, accountOverride, environment, defaultPermissions = DEFAULT_PERMISSIONS, automaticallySetFirstEoa, theme = "light", clientType = "socket", partnerId, }) {
+function InnerProvider({ children, accountOverride, environment, defaultPermissions = DEFAULT_PERMISSIONS, automaticallySetFirstEoa, theme = "light", clientType = "socket", partnerId, createClientReferenceId, }) {
     const activeAccount = (0, react_3.useActiveAccount)();
     const [manuallySelectedWallet, setManuallySelectedWallet] = (0, react_2.useState)(undefined);
     const wallets = (0, react_3.useConnectedWallets)();
@@ -101,6 +101,7 @@ function InnerProvider({ children, accountOverride, environment, defaultPermissi
             theme,
             clientType,
             partnerId: partnerId,
+            createClientReferenceId,
         }, children: (0, jsx_runtime_1.jsx)(InnerProvider2, { children: children }) }));
 }
 const InnerProvider2 = ({ children }) => {

package/dist/cjs/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/cjs/global-account/react/components/B3Provider/types.js

@@ -19,4 +19,5 @@ exports.B3Context = (0, react_1.createContext)({
     theme: "light",
     clientType: "rest",
     partnerId: "",
+    createClientReferenceId: undefined,
 });

package/dist/cjs/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/cjs/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/cjs/global-account/react/stores/useModalStore.d.ts

@@ -122,6 +122,8 @@ export interface AnySpendModalProps extends BaseModalProps {
     destinationTokenChainId?: number;
     /** Custom USD input values for quick amount buttons in fiat onramp */
     customUsdInputValues?: string[];
+    /** Client-provided reference ID for tracking orders */
+    clientReferenceId?: string;
 }
 /**
  * Props for the AnySpend NFT modal
@@ -136,6 +138,8 @@ export interface AnySpendNftProps extends BaseModalProps {
     recipientAddress?: string;
     /** Callback function called when the NFT is successfully transferred */
     onSuccess?: (txHash?: string) => void;
+    /** Client-provided reference ID for tracking orders */
+    clientReferenceId?: string;
 }
 /**
  * Props for the AnySpend tournament modal
@@ -377,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/dist/esm/anyspend/index.d.ts

@@ -6,6 +6,7 @@ export * from "./utils/json";
 export * from "./utils/number";
 export * from "./utils/string";
 export * from "./utils/token";
+export * from "./utils/validation";
 export * from "./constants";
 export * from "./abis/abiUsdcBase";
 export * from "./abis/erc20Staking";

package/dist/esm/anyspend/index.js

@@ -8,6 +8,7 @@ export * from "./utils/json.js";
 export * from "./utils/number.js";
 export * from "./utils/string.js";
 export * from "./utils/token.js";
+export * from "./utils/validation.js";
 // Constants
 export * from "./constants/index.js";
 // Abis

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

@@ -0,0 +1,57 @@
+import { components } from "../../../anyspend/types/api";
+import { GetQuoteResponse } from "../../../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/esm/anyspend/react/components/AnySpendCollectorClubPurchase.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 "../../..";
+ * import { USDC_BASE } from "../../../anyspend/constants/index.js";
+ *
+ * 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 "../../../anyspend/constants/index.js";
+import { useMemo } from "react";
+import { encodeFunctionData } from "viem";
+import { AnySpendCustom } from "./AnySpendCustom.js";
+// 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",
+};
+export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = USDC_BASE, recipientAddress, spenderAddress = CC_SHOP_ADDRESS, onSuccess, header, showRecipient = true, }) {
+    // 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, 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 = () => (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsxs("div", { children: [_jsx("h1", { className: "text-as-primary text-xl font-bold", children: "Buy Collector Club Packs" }), _jsxs("p", { className: "text-as-secondary text-sm", children: ["Purchase ", packAmount, " pack", packAmount !== 1 ? "s" : "", " using any token"] })] }) }));
+    return (_jsx(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/dist/esm/anyspend/react/components/AnySpendCustom.js

@@ -354,7 +354,9 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 });
             }
             else {
-                void createRegularOrder(createOrderParams);
+                void createRegularOrder({
+                    ...createOrderParams,
+                });
             }
         }
         catch (err) {

package/dist/esm/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/esm/anyspend/react/components/index.js

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

package/dist/esm/anyspend/react/hooks/useAnyspendCreateOnrampOrder.js

@@ -6,11 +6,14 @@ import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { parseUnits } from "viem";
 import { base } from "viem/chains";
+import { useValidatedClientReferenceId } from "./useValidatedClientReferenceId.js";
 /**
  * Hook for creating onramp orders in the Anyspend protocol
  * Specifically handles orders that involve fiat-to-crypto onramp functionality
  */
 export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
+    // Get validated client reference ID from B3 context
+    const validatedClientReferenceId = useValidatedClientReferenceId();
     // Get fingerprint data
     const { data: fpData } = useVisitorData({ extendedResult: true }, { immediate: true });
     const visitorData = fpData && {
@@ -62,6 +65,7 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                     }),
                     creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
                     partnerId,
+                    clientReferenceId: validatedClientReferenceId,
                     visitorData,
                 });
             }

package/dist/esm/anyspend/react/hooks/useAnyspendCreateOrder.js

@@ -3,12 +3,15 @@ import { buildMetadata, buildPayload, normalizeAddress } from "../../../anyspend
 import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react";
 import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
+import { useValidatedClientReferenceId } from "./useValidatedClientReferenceId.js";
 /**
  * Hook for creating orders in the Anyspend protocol
  * Handles regular order creation for swaps, NFT minting, tournament participation, etc.
  * For onramp orders, use useAnyspendCreateOnrampOrder instead.
  */
 export function useAnyspendCreateOrder({ onSuccess, onError } = {}) {
+    // Get validated client reference ID from B3 context
+    const validatedClientReferenceId = useValidatedClientReferenceId();
     // Get fingerprint data
     const { data: fpData } = useVisitorData({ extendedResult: true }, { immediate: true });
     const visitorData = fpData && {
@@ -50,6 +53,7 @@ export function useAnyspendCreateOrder({ onSuccess, onError } = {}) {
                         },
                     }),
                     creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
+                    clientReferenceId: validatedClientReferenceId,
                     visitorData,
                 });
             }