@b3dotfun/sdk 0.0.68-alpha.0 → 0.0.69-test.0

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

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnySpendCollectorClubPurchase = AnySpendCollectorClubPurchase;
+const jsx_runtime_1 = require("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";
+ *
+ * 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)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+const constants_1 = require("../../../anyspend/constants");
+const react_1 = require("react");
+const viem_1 = require("viem");
+const AnySpendCustom_1 = require("./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",
+};
+function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = constants_1.USDC_BASE, recipientAddress, spenderAddress = CC_SHOP_ADDRESS, onSuccess, header, showRecipient = true, }) {
+    // Calculate total amount needed (pricePerPack * packAmount)
+    const totalAmount = (0, react_1.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 = (0, react_1.useMemo)(() => {
+        try {
+            return (0, viem_1.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 = () => ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: "Buy Collector Club Packs" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-as-secondary text-sm", children: ["Purchase ", packAmount, " pack", packAmount !== 1 ? "s" : "", " using any token"] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.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/cjs/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/cjs/anyspend/react/components/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebviewOnrampPayment = exports.WebviewOnrampOrderStatus = exports.TransferCryptoDetails = exports.TokenBalance = exports.StepProgress = exports.RecipientSelection = exports.OrderTokenAmount = exports.OrderToken = exports.OrderStatus = exports.OrderHistoryItem = exports.OrderHistory = exports.OrderDetailsCollapsible = exports.OrderDetails = exports.CryptoReceiveSection = exports.CryptoPaySection = exports.ChainTokenIcon = exports.AnySpendNFTButton = exports.AnySpendTournament = exports.AnySpendStakeUpsideExactIn = exports.AnySpendStakeUpside = exports.AnySpendStakeB3ExactIn = exports.AnySpendStakeB3 = exports.AnyspendSignatureMint = exports.AnySpendNFT = exports.HYPE_TOKEN_DETAILS = exports.AnySpendDepositHype = exports.AnySpendCustomExactIn = exports.AnySpendCustom = exports.AnySpendBuySpin = exports.AnySpendBondKit = exports.AnySpend = void 0;
+exports.WebviewOnrampPayment = exports.WebviewOnrampOrderStatus = exports.TransferCryptoDetails = exports.TokenBalance = exports.StepProgress = exports.RecipientSelection = exports.OrderTokenAmount = exports.OrderToken = exports.OrderStatus = exports.OrderHistoryItem = exports.OrderHistory = exports.OrderDetailsCollapsible = exports.OrderDetails = exports.CryptoReceiveSection = exports.CryptoPaySection = exports.ChainTokenIcon = exports.AnySpendNFTButton = exports.AnySpendTournament = exports.AnySpendStakeUpsideExactIn = exports.AnySpendStakeUpside = exports.AnySpendStakeB3ExactIn = exports.AnySpendStakeB3 = exports.AnyspendSignatureMint = exports.AnySpendNFT = exports.HYPE_TOKEN_DETAILS = exports.AnySpendDepositHype = exports.AnySpendCustomExactIn = exports.AnySpendCustom = exports.AnySpendCollectorClubPurchase = exports.AnySpendBuySpin = exports.AnySpendBondKit = exports.AnySpend = void 0;
 // Components
 var AnySpend_1 = require("./AnySpend");
 Object.defineProperty(exports, "AnySpend", { enumerable: true, get: function () { return AnySpend_1.AnySpend; } });
@@ -22,6 +22,8 @@ var AnySpendBondKit_1 = require("./AnySpendBondKit");
 Object.defineProperty(exports, "AnySpendBondKit", { enumerable: true, get: function () { return AnySpendBondKit_1.AnySpendBondKit; } });
 var AnySpendBuySpin_1 = require("./AnySpendBuySpin");
 Object.defineProperty(exports, "AnySpendBuySpin", { enumerable: true, get: function () { return AnySpendBuySpin_1.AnySpendBuySpin; } });
+var AnySpendCollectorClubPurchase_1 = require("./AnySpendCollectorClubPurchase");
+Object.defineProperty(exports, "AnySpendCollectorClubPurchase", { enumerable: true, get: function () { return AnySpendCollectorClubPurchase_1.AnySpendCollectorClubPurchase; } });
 var AnySpendCustom_1 = require("./AnySpendCustom");
 Object.defineProperty(exports, "AnySpendCustom", { enumerable: true, get: function () { return AnySpendCustom_1.AnySpendCustom; } });
 var AnySpendCustomExactIn_1 = require("./AnySpendCustomExactIn");

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/stores/useModalStore.d.ts

@@ -377,10 +377,30 @@ 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;
+}
 /**
  * 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/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/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/global-account/react/components/B3DynamicModal.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnySpend, AnySpendBondKit, AnySpendBuySpin, AnySpendNFT, AnyspendSignatureMint, AnySpendStakeB3, AnySpendStakeB3ExactIn, AnySpendTournament, OrderHistory, } from "../../../anyspend/react/index.js";
+import { AnySpend, AnySpendBondKit, AnySpendBuySpin, AnySpendCollectorClubPurchase, AnySpendNFT, AnyspendSignatureMint, AnySpendStakeB3, AnySpendStakeB3ExactIn, AnySpendTournament, OrderHistory, } from "../../../anyspend/react/index.js";
 import { AnySpendDepositHype } from "../../../anyspend/react/components/AnyspendDepositHype.js";
 import { AnySpendStakeUpside } from "../../../anyspend/react/components/AnySpendStakeUpside.js";
 import { AnySpendStakeUpsideExactIn } from "../../../anyspend/react/components/AnySpendStakeUpsideExactIn.js";
@@ -115,6 +115,8 @@ export function B3DynamicModal() {
                 return _jsx(LinkAccount, { ...contentType });
             case "anySpendDepositHype":
                 return _jsx(AnySpendDepositHype, { ...contentType, mode: "modal" });
+            case "anySpendCollectorClubPurchase":
+                return _jsx(AnySpendCollectorClubPurchase, { ...contentType, mode: "modal" });
             case "avatarEditor":
                 return _jsx(AvatarEditor, { onSetAvatar: contentType.onSuccess });
             case "profileEditor":

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

@@ -377,10 +377,30 @@ 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;
+}
 /**
  * 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/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/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/global-account/react/stores/useModalStore.d.ts

@@ -377,10 +377,30 @@ 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;
+}
 /**
  * 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.68-alpha.0",
+  "version": "0.0.69-test.0",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

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/index.ts

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

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

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

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

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