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

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

@@ -9,11 +9,14 @@ const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
+const useValidatedClientReferenceId_1 = require("./useValidatedClientReferenceId");
 /**
  * Hook for creating onramp orders in the Anyspend protocol
  * Specifically handles orders that involve fiat-to-crypto onramp functionality
  */
 function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
+    // Get validated client reference ID from B3 context
+    const validatedClientReferenceId = (0, useValidatedClientReferenceId_1.useValidatedClientReferenceId)();
     // Get fingerprint data
     const { data: fpData } = (0, fingerprintjs_pro_react_1.useVisitorData)({ extendedResult: true }, { immediate: true });
     const visitorData = fpData && {
@@ -22,7 +25,7 @@ function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
     };
     const { mutate: createOrder, isPending } = (0, react_query_1.useMutation)({
         mutationFn: async (params) => {
-            const { recipientAddress, orderType, dstChain, dstToken, srcFiatAmount, onramp, creatorAddress, expectedDstAmount, nft, tournament, payload, partnerId, clientReferenceId, } = params;
+            const { recipientAddress, orderType, dstChain, dstToken, srcFiatAmount, onramp, creatorAddress, expectedDstAmount, nft, tournament, payload, partnerId, } = params;
             try {
                 // Validate required onramp fields
                 if (!onramp.vendor || !onramp.country) {
@@ -65,7 +68,7 @@ function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                     }),
                     creatorAddress: creatorAddress ? (0, utils_1.normalizeAddress)(creatorAddress) : undefined,
                     partnerId,
-                    clientReferenceId,
+                    clientReferenceId: validatedClientReferenceId,
                     visitorData,
                 });
             }

package/dist/cjs/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/cjs/anyspend/react/hooks/useAnyspendCreateOrder.js

@@ -6,12 +6,15 @@ const utils_1 = require("../../../anyspend/utils");
 const fingerprintjs_pro_react_1 = require("@fingerprintjs/fingerprintjs-pro-react");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
+const useValidatedClientReferenceId_1 = require("./useValidatedClientReferenceId");
 /**
  * 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.
  */
 function useAnyspendCreateOrder({ onSuccess, onError } = {}) {
+    // Get validated client reference ID from B3 context
+    const validatedClientReferenceId = (0, useValidatedClientReferenceId_1.useValidatedClientReferenceId)();
     // Get fingerprint data
     const { data: fpData } = (0, fingerprintjs_pro_react_1.useVisitorData)({ extendedResult: true }, { immediate: true });
     const visitorData = fpData && {
@@ -20,7 +23,7 @@ function useAnyspendCreateOrder({ onSuccess, onError } = {}) {
     };
     const { mutate: createOrder, isPending } = (0, react_query_1.useMutation)({
         mutationFn: async (params) => {
-            const { recipientAddress, orderType, srcChain, dstChain, srcToken, dstToken, srcAmount, creatorAddress, clientReferenceId, } = params;
+            const { recipientAddress, orderType, srcChain, dstChain, srcToken, dstToken, srcAmount, creatorAddress } = params;
             try {
                 return await anyspend_1.anyspendService.createOrder({
                     recipientAddress: (0, utils_1.normalizeAddress)(recipientAddress),
@@ -53,7 +56,7 @@ function useAnyspendCreateOrder({ onSuccess, onError } = {}) {
                         },
                     }),
                     creatorAddress: creatorAddress ? (0, utils_1.normalizeAddress)(creatorAddress) : undefined,
-                    clientReferenceId,
+                    clientReferenceId: validatedClientReferenceId,
                     visitorData,
                 });
             }

package/dist/cjs/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/cjs/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/cjs/anyspend/react/hooks/useValidatedClientReferenceId.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useValidatedClientReferenceId = useValidatedClientReferenceId;
+const validation_1 = require("../../../anyspend/utils/validation");
+const react_1 = require("../../../global-account/react");
+const react_2 = require("react");
+/**
+ * Hook that provides a validated client reference ID
+ * Gets the createClientReferenceId function from B3 context and validates the result
+ */
+function useValidatedClientReferenceId() {
+    const { createClientReferenceId } = (0, react_1.useB3)();
+    const validatedClientReferenceId = (0, react_2.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 = validation_1.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/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

@@ -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/dist/esm/anyspend/react/components/AnySpend.d.ts

@@ -34,10 +34,4 @@ export declare function AnySpend(props: {
     }) => 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;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/anyspend/react/components/AnySpend.js

@@ -2,7 +2,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getDefaultToken, USDC_BASE } from "../../../anyspend/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
-import { Validators } from "../../../anyspend/utils/validation.js";
 import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet, useProfile, useRouter, useSearchParamsSSR, useTokenBalanceDirect, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/cn.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
@@ -49,18 +48,9 @@ export function AnySpend(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendInner, { ...props }) }));
 }
-function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, clientReferenceId: clientReferenceIdFromProps, }) {
+function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, }) {
     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);
     // Add refs to track URL state
@@ -648,7 +638,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 srcAmount: srcAmountBigInt.toString(),
                 expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount || "0",
                 creatorAddress: globalAddress,
-                clientReferenceId: validatedClientReferenceId,
             });
         }
         catch (err) {
@@ -713,7 +702,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 },
                 expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
                 creatorAddress: globalAddress,
-                clientReferenceId: validatedClientReferenceId,
             });
         }
         catch (err) {

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

@@ -1,4 +1,2 @@
 import { AnySpendBondKitProps } from "../../../global-account/react/stores/useModalStore";
-export declare function AnySpendBondKit({ mode, recipientAddress, contractAddress, minTokensOut, imageUrl, b3Amount: initialB3Amount, onSuccess, clientReferenceId, }: AnySpendBondKitProps & {
-    clientReferenceId?: string;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function AnySpendBondKit({ mode, recipientAddress, contractAddress, minTokensOut, imageUrl, b3Amount: initialB3Amount, onSuccess, }: AnySpendBondKitProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/anyspend/react/components/AnySpendBondKit.js

@@ -20,7 +20,7 @@ function formatNumberWithCommas(x) {
     parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     return parts.join(".");
 }
-export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, minTokensOut = "0", imageUrl, b3Amount: initialB3Amount, onSuccess, clientReferenceId, }) {
+export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, minTokensOut = "0", imageUrl, b3Amount: initialB3Amount, onSuccess, }) {
     const hasMounted = useHasMounted();
     const [showAmountPrompt, setShowAmountPrompt] = useState(!initialB3Amount);
     const [b3Amount, setB3Amount] = useState(initialB3Amount || "");
@@ -200,5 +200,5 @@ export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddr
     });
     return (_jsx(AnySpendCustom, { mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: baseMainnet.id, dstToken: dstToken, dstAmount: parseEther(b3Amount).toString(), contractAddress: contractAddress, encodedData: encodedData, metadata: {
             action: "BondKit Buy",
-        }, header: header, onSuccess: onSuccess, showRecipient: true, clientReferenceId: clientReferenceId }));
+        }, header: header, onSuccess: onSuccess, showRecipient: true }));
 }

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

@@ -1,4 +1,4 @@
-export declare function AnySpendBuySpin({ loadOrder, mode, spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, clientReferenceId, }: {
+export declare function AnySpendBuySpin({ loadOrder, mode, spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     spinwheelContractAddress: string;
@@ -6,5 +6,4 @@ export declare function AnySpendBuySpin({ loadOrder, mode, spinwheelContractAddr
     recipientAddress: string;
     prefillQuantity?: string;
     onSuccess?: (txHash?: string) => void;
-    clientReferenceId?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/anyspend/react/components/AnySpendBuySpin.js

@@ -85,7 +85,7 @@ const basePublicClient = createPublicClient({
     chain: baseMainnet,
     transport: http(PUBLIC_BASE_RPC_URL),
 });
-export function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, clientReferenceId, }) {
+export function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, }) {
     const hasMounted = useHasMounted();
     const { setB3ModalOpen } = useModalStore();
     // Payment config state
@@ -391,5 +391,5 @@ export function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAd
     const encodedData = generateEncodedDataForBuyEntriesAndSpin(address || "", userSpinQuantity);
     return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: chainId, dstToken: B3_TOKEN, dstAmount: totalCost.toString(), contractAddress: spinwheelContractAddress, spenderAddress: paymentConfig.entryModule, encodedData: encodedData, metadata: {
             action: `buy ${userSpinQuantity} spin${userSpinQuantity !== "1" ? "s" : ""}`,
-        }, header: header, onSuccess: txHash => onSuccess?.(txHash), showRecipient: false, clientReferenceId: clientReferenceId }));
+        }, header: header, onSuccess: txHash => onSuccess?.(txHash), showRecipient: false }));
 }

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.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/esm/anyspend/react/components/AnySpendCustom.js

@@ -108,7 +108,7 @@ export function AnySpendCustom(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomInner, { ...props }) }));
 }
-function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabProps = "crypto", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, onShowPointsDetail, clientReferenceId, }) {
+function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabProps = "crypto", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, onShowPointsDetail, }) {
     const hasMounted = useHasMounted();
     const featureFlags = useFeatureFlags();
     const searchParams = useSearchParamsSSR();
@@ -351,13 +351,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                             : window.location.origin,
                     },
                     expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
-                    clientReferenceId: clientReferenceId,
                 });
             }
             else {
                 void createRegularOrder({
                     ...createOrderParams,
-                    clientReferenceId: clientReferenceId,
                 });
             }
         }

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

@@ -25,7 +25,7 @@ export function AnySpendCustomExactIn(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomExactInInner, { ...props }) }));
 }
-function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, destinationToken, destinationChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, customExactInConfig, orderType = "custom_exact_in", minDestinationAmount, header, clientReferenceId, }) {
+function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, destinationToken, destinationChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, customExactInConfig, orderType = "custom_exact_in", minDestinationAmount, header, }) {
     const actionLabel = customExactInConfig?.action ?? "Custom Execution";
     const DESTINATION_TOKEN_DETAILS = {
         SYMBOL: destinationToken.symbol ?? "TOKEN",
@@ -189,7 +189,6 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                 expectedDstAmount: expectedDstAmountRaw,
                 creatorAddress: globalAddress,
                 payload,
-                clientReferenceId: clientReferenceId,
             });
         }
         catch (err) {
@@ -242,7 +241,6 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                 expectedDstAmount: expectedDstAmountRaw,
                 creatorAddress: globalAddress,
                 payload,
-                clientReferenceId: clientReferenceId,
             });
         }
         catch (err) {

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

@@ -1,5 +1,5 @@
 import { components } from "../../../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/esm/anyspend/react/components/AnySpendDepositUpside.js

@@ -22,7 +22,7 @@ const DEPOSIT_FOR_FUNCTION_ABI = JSON.stringify([
         type: "function",
     },
 ]);
-export function AnySpendDepositUpside({ loadOrder, mode = "modal", recipientAddress, sourceTokenAddress, sourceTokenChainId, depositContractAddress, token, onSuccess, clientReferenceId, }) {
+export function AnySpendDepositUpside({ loadOrder, mode = "modal", recipientAddress, sourceTokenAddress, sourceTokenChainId, depositContractAddress, token, onSuccess, }) {
     if (!recipientAddress)
         return null;
     const header = () => (_jsx(_Fragment, { children: _jsx("div", { className: "from-b3-react-background to-as-on-surface-1 w-full rounded-t-lg bg-gradient-to-t", children: _jsx("div", { className: "mb-1 flex w-full flex-col items-center gap-2", children: _jsxs("span", { className: "font-sf-rounded text-2xl font-semibold", children: ["Swap & Deposit ", token.symbol] }) }) }) }));
@@ -34,5 +34,5 @@ export function AnySpendDepositUpside({ loadOrder, mode = "modal", recipientAddr
         spenderAddress: depositContractAddress,
         action: `deposit ${token.symbol}`,
     };
-    return (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: token, destinationChainId: base.id, customExactInConfig: customExactInConfig, header: header, onSuccess: onSuccess, clientReferenceId: clientReferenceId }));
+    return (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: token, destinationChainId: base.id, customExactInConfig: customExactInConfig, header: header, onSuccess: onSuccess }));
 }