@b3dotfun/sdk 0.0.72 → 0.0.73-alpha.1

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

@@ -53,5 +53,13 @@ export interface AnySpendCollectorClubPurchaseProps {
      * Show recipient selection (default: true)
      */
     showRecipient?: boolean;
+    /**
+     * The vending machine ID
+     */
+    vendingMachineId: string;
+    /**
+     * The partner ID
+     */
+    packType: string;
 }
-export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, onSuccess, header, showRecipient, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, onSuccess, header, showRecipient, vendingMachineId, packType, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/anyspend/react/components/AnySpendCollectorClubPurchase.js

@@ -47,7 +47,7 @@ const BUY_PACKS_FOR_ABI = {
     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, }) {
+function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = constants_1.USDC_BASE, recipientAddress, spenderAddress = CC_SHOP_ADDRESS, onSuccess, header, showRecipient = true, vendingMachineId, packType, }) {
     // Calculate total amount needed (pricePerPack * packAmount)
     const totalAmount = (0, react_1.useMemo)(() => {
         try {
@@ -78,5 +78,7 @@ function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab =
             packId,
             packAmount,
             pricePerPack,
+            vendingMachineId,
+            packType,
         }, header: header || defaultHeader, onSuccess: onSuccess, showRecipient: showRecipient }));
 }

package/dist/cjs/anyspend/react/components/AnySpendCustom.js

@@ -371,6 +371,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                         to: contractAddress,
                     }
                     : undefined,
+                metadata,
             };
             if (onramp) {
                 const effectiveSrcToken = activeTab === "fiat" ? constants_1.USDC_BASE : srcToken;
@@ -482,7 +483,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                         ? "Receive NFT at"
                         : orderType === "join_tournament"
                             ? "Join for"
-                            : "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: (0, jsx_runtime_1.jsx)("span", { children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(recipientAddress) }) }) }) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })] }, recipientAddress)) : null;
+                            : "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("text-as-tertiarry flex items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: (0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(recipientAddress) }) }) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "whitespace-nowrap text-sm font-medium", children: "Select recipient" }) })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })] }, recipientAddress)) : null;
     const historyView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
@@ -525,7 +526,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") }) })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry whitespace-nowrap", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") })) : ((0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Connect wallet" })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Transfer crypto" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Select payment method" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
                                                         opacity: hasMounted ? 1 : 0,
                                                         y: hasMounted ? 0 : 20,
                                                         filter: hasMounted ? "blur(0px)" : "blur(10px)",
@@ -536,7 +537,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                         opacity: hasMounted ? 1 : 0,
                                                         y: hasMounted ? 0 : 20,
                                                         filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                                    }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex items-center gap-1.5 text-sm", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(with fee)" }), anyspendQuote?.data?.fee && ((0, jsx_runtime_1.jsx)(react_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { side: "top", children: (0, jsx_runtime_1.jsx)(FeeBreakDown_1.FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), renderPointsBadge()] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] }), anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && ((0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
+                                                    }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [(0, jsx_runtime_1.jsxs)("span", { className: "whitespace-nowrap", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(with fee)" })] }), anyspendQuote?.data?.fee && ((0, jsx_runtime_1.jsx)(react_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { side: "top", children: (0, jsx_runtime_1.jsx)(FeeBreakDown_1.FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary whitespace-nowrap font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] }), anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && ((0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
                                                                             10000).toFixed(2), " ", "fee"] }))] })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: false, animate: {
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
@@ -545,11 +546,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Select payment method" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex items-center gap-1.5 text-sm", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(USD)" }), anyspendQuote?.data?.fee && ((0, jsx_runtime_1.jsx)(react_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { side: "top", children: (0, jsx_runtime_1.jsx)(FeeBreakDown_1.FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), renderPointsBadge()] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-xl font-semibold", children: ["$", srcFiatAmount || "0.00"] }), anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount && ((0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.fee.originalAmount) - Number(anyspendQuote.data.fee.finalAmount)) /
+                                            }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [(0, jsx_runtime_1.jsxs)("span", { className: "whitespace-nowrap", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(USD)" })] }), anyspendQuote?.data?.fee && ((0, jsx_runtime_1.jsx)(react_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { side: "top", children: (0, jsx_runtime_1.jsx)(FeeBreakDown_1.FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary whitespace-nowrap text-xl font-semibold", children: ["$", srcFiatAmount || "0.00"] })] }), anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount && ((0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.fee.originalAmount) - Number(anyspendQuote.data.fee.finalAmount)) /
                                                                     1e6).toFixed(2), " ", "fee"] }))] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: false, animate: {
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,

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

@@ -19,7 +19,7 @@ function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
     // Get B3 context values
     const { partnerId } = (0, react_1.useB3)();
     // Get validated client reference ID from B3 context
-    const validatedClientReferenceId = (0, useValidatedClientReferenceId_1.useValidatedClientReferenceId)();
+    const createValidatedClientReferenceId = (0, useValidatedClientReferenceId_1.useValidatedClientReferenceId)();
     // Get fingerprint data
     const { data: fpData } = (0, fingerprintjs_pro_react_1.useVisitorData)({ extendedResult: true }, { immediate: true });
     const visitorData = fpData && {
@@ -29,6 +29,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, } = params;
+            const clientReferenceId = await createValidatedClientReferenceId(params);
             try {
                 // Validate required onramp fields
                 if (!onramp.vendor || !onramp.country) {
@@ -71,7 +72,7 @@ function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                     }),
                     creatorAddress: creatorAddress ? (0, utils_1.normalizeAddress)(creatorAddress) : undefined,
                     partnerId,
-                    clientReferenceId: validatedClientReferenceId,
+                    clientReferenceId,
                     visitorData,
                 });
             }

package/dist/cjs/anyspend/react/hooks/useAnyspendCreateOrder.d.ts

@@ -17,6 +17,7 @@ export type CreateOrderParams = {
     };
     creatorAddress?: string;
     payload?: any;
+    metadata?: Record<string, any>;
 };
 export type UseAnyspendCreateOrderProps = {
     onSuccess?: (data: any) => void;

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

@@ -17,7 +17,7 @@ function useAnyspendCreateOrder({ onSuccess, onError } = {}) {
     // Get B3 context values
     const { partnerId } = (0, react_1.useB3)();
     // Get validated client reference ID from B3 context
-    const validatedClientReferenceId = (0, useValidatedClientReferenceId_1.useValidatedClientReferenceId)();
+    const createValidatedClientReferenceId = (0, useValidatedClientReferenceId_1.useValidatedClientReferenceId)();
     // Get fingerprint data
     const { data: fpData } = (0, fingerprintjs_pro_react_1.useVisitorData)({ extendedResult: true }, { immediate: true });
     const visitorData = fpData && {
@@ -27,6 +27,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 } = params;
+            const clientReferenceId = await createValidatedClientReferenceId(params);
             try {
                 return await anyspend_1.anyspendService.createOrder({
                     recipientAddress: (0, utils_1.normalizeAddress)(recipientAddress),
@@ -60,7 +61,7 @@ function useAnyspendCreateOrder({ onSuccess, onError } = {}) {
                     }),
                     creatorAddress: creatorAddress ? (0, utils_1.normalizeAddress)(creatorAddress) : undefined,
                     partnerId,
-                    clientReferenceId: validatedClientReferenceId,
+                    clientReferenceId,
                     visitorData,
                 });
             }

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

@@ -1,5 +1,7 @@
+import { CreateOnrampOrderParams } from "./useAnyspendCreateOnrampOrder";
+import { CreateOrderParams } from "./useAnyspendCreateOrder";
 /**
  * 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;
+export declare function useValidatedClientReferenceId(): (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string | undefined>;

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

@@ -10,14 +10,14 @@ const react_2 = require("react");
  */
 function useValidatedClientReferenceId() {
     const { createClientReferenceId } = (0, react_1.useB3)();
-    const validatedClientReferenceId = (0, react_2.useMemo)(() => {
+    const createValidatedClientReferenceId = (0, react_2.useCallback)(async (params) => {
         // If no function provided, return undefined
         if (!createClientReferenceId) {
             return undefined;
         }
         try {
             // Call the function to generate the ID
-            const generatedId = createClientReferenceId();
+            const generatedId = await createClientReferenceId(params);
             // Validate the generated ID
             const validation = validation_1.Validators.clientReferenceId(generatedId);
             if (!validation.isValid) {
@@ -31,5 +31,5 @@ function useValidatedClientReferenceId() {
             return undefined;
         }
     }, [createClientReferenceId]);
-    return validatedClientReferenceId;
+    return createValidatedClientReferenceId;
 }

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

@@ -1,3 +1,5 @@
+import { CreateOnrampOrderParams } from "../../../../anyspend/react/hooks/useAnyspendCreateOnrampOrder";
+import { CreateOrderParams } from "../../../../anyspend/react/hooks/useAnyspendCreateOrder";
 import { PermissionsConfig } from "../../../../global-account/types/permissions";
 import "@relayprotocol/relay-kit-ui/styles.css";
 import { Account, Wallet } from "thirdweb/wallets";
@@ -24,7 +26,7 @@ export declare function B3Provider({ theme, children, accountOverride, environme
     onConnect?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
     connectors?: CreateConnectorFn[];
     overrideDefaultConnectors?: boolean;
-    createClientReferenceId?: () => string;
+    createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Inner provider component that provides the actual B3Context
@@ -38,5 +40,5 @@ export declare function InnerProvider({ children, accountOverride, environment,
     theme: "light" | "dark";
     clientType?: ClientType;
     partnerId: string;
-    createClientReferenceId?: () => string;
+    createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,6 @@
 import { Users } from "@b3dotfun/b3-api";
+import { CreateOnrampOrderParams } from "../../../../anyspend/react/hooks/useAnyspendCreateOnrampOrder";
+import { CreateOrderParams } from "../../../../anyspend/react/hooks/useAnyspendCreateOrder";
 import { PermissionsConfig } from "../../../../global-account/types/permissions";
 import { Account, Wallet } from "thirdweb/wallets";
 import { ClientType } from "../../../client-manager";
@@ -20,7 +22,7 @@ export interface B3ContextType {
     theme: "light" | "dark";
     clientType: ClientType;
     partnerId: string;
-    createClientReferenceId?: () => string;
+    createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
 }
 /**
  * Context for B3 provider

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

@@ -402,6 +402,10 @@ export interface AnySpendCollectorClubPurchaseProps extends BaseModalProps {
     onSuccess?: (txHash?: string) => void;
     /** Client-provided reference ID for tracking orders */
     clientReferenceId?: string;
+    /** The vending machine ID */
+    vendingMachineId: string;
+    /** The pack type */
+    packType: string;
 }
 /**
  * Union type of all possible modal content types

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

@@ -53,5 +53,13 @@ export interface AnySpendCollectorClubPurchaseProps {
      * Show recipient selection (default: true)
      */
     showRecipient?: boolean;
+    /**
+     * The vending machine ID
+     */
+    vendingMachineId: string;
+    /**
+     * The partner ID
+     */
+    packType: string;
 }
-export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, onSuccess, header, showRecipient, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, onSuccess, header, showRecipient, vendingMachineId, packType, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -44,7 +44,7 @@ const BUY_PACKS_FOR_ABI = {
     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, }) {
+export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = USDC_BASE, recipientAddress, spenderAddress = CC_SHOP_ADDRESS, onSuccess, header, showRecipient = true, vendingMachineId, packType, }) {
     // Calculate total amount needed (pricePerPack * packAmount)
     const totalAmount = useMemo(() => {
         try {
@@ -75,5 +75,7 @@ export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activ
             packId,
             packAmount,
             pricePerPack,
+            vendingMachineId,
+            packType,
         }, header: header || defaultHeader, onSuccess: onSuccess, showRecipient: showRecipient }));
 }

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { eqci, getDefaultToken, roundUpUSDCBaseAmountToNearest } from "../../../anyspend/index.js";
 import { RELAY_ETH_ADDRESS, USDC_BASE } from "../../../anyspend/constants/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useAnyspendTokenList, useConnectedUserProfile, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
@@ -332,6 +332,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                         to: contractAddress,
                     }
                     : undefined,
+                metadata,
             };
             if (onramp) {
                 const effectiveSrcToken = activeTab === "fiat" ? USDC_BASE : srcToken;
@@ -443,7 +444,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                         ? "Receive NFT at"
                         : orderType === "join_tournament"
                             ? "Join for"
-                            : "Recipient" }), _jsxs("div", { className: "flex items-center gap-2", children: [recipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx(_Fragment, { children: _jsx("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: _jsx("span", { children: recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress) }) }) }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) })), _jsx(ChevronRight, { className: "h-4 w-4" })] })] }, recipientAddress)) : null;
+                            : "Recipient" }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [recipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: _jsx("span", { className: "whitespace-nowrap", children: recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress) }) }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "whitespace-nowrap text-sm font-medium", children: "Select recipient" }) })), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })] }, recipientAddress)) : null;
     const historyView = (_jsx("div", { className: cn("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: _jsx(OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
@@ -486,7 +487,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsx(_Fragment, { children: _jsx("span", { className: "text-as-tertiarry flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") }) })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsx("span", { className: "text-as-tertiarry whitespace-nowrap", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : (_jsx("span", { className: "whitespace-nowrap", children: "Connect wallet" })), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Transfer crypto" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Select payment method" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(motion.div, { initial: false, animate: {
                                                         opacity: hasMounted ? 1 : 0,
                                                         y: hasMounted ? 0 : 20,
                                                         filter: hasMounted ? "blur(0px)" : "blur(10px)",
@@ -497,7 +498,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                         opacity: hasMounted ? 1 : 0,
                                                         y: hasMounted ? 0 : 20,
                                                         filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                                    }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-tertiarry flex items-center gap-1.5 text-sm", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(with fee)" }), anyspendQuote?.data?.fee && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: _jsx(FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), renderPointsBadge()] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] }), anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && (_jsxs("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
+                                                    }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between gap-4", children: [_jsxs("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [_jsxs("span", { className: "whitespace-nowrap", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(with fee)" })] }), anyspendQuote?.data?.fee && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: _jsx(FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), _jsxs("span", { className: "text-as-primary whitespace-nowrap font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] }), anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && (_jsxs("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
                                                                             10000).toFixed(2), " ", "fee"] }))] })] })] })] }), _jsx("div", { className: cn("flex w-full flex-col items-center justify-between gap-2"), children: _jsx(motion.div, { initial: false, animate: {
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
@@ -506,11 +507,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs(motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Select payment method" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs(motion.div, { initial: false, animate: {
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-tertiarry flex items-center gap-1.5 text-sm", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(USD)" }), anyspendQuote?.data?.fee && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: _jsx(FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), renderPointsBadge()] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("span", { className: "text-as-primary text-xl font-semibold", children: ["$", srcFiatAmount || "0.00"] }), anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount && (_jsxs("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.fee.originalAmount) - Number(anyspendQuote.data.fee.finalAmount)) /
+                                            }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between gap-4", children: [_jsxs("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [_jsxs("span", { className: "whitespace-nowrap", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(USD)" })] }), anyspendQuote?.data?.fee && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: _jsx(FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), _jsxs("span", { className: "text-as-primary whitespace-nowrap text-xl font-semibold", children: ["$", srcFiatAmount || "0.00"] })] }), anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount && (_jsxs("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.fee.originalAmount) - Number(anyspendQuote.data.fee.finalAmount)) /
                                                                     1e6).toFixed(2), " ", "fee"] }))] })] })] }), _jsx("div", { className: cn("flex w-full flex-col items-center justify-between gap-2"), children: _jsx(motion.div, { initial: false, animate: {
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,

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

@@ -16,7 +16,7 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
     // Get B3 context values
     const { partnerId } = useB3();
     // Get validated client reference ID from B3 context
-    const validatedClientReferenceId = useValidatedClientReferenceId();
+    const createValidatedClientReferenceId = useValidatedClientReferenceId();
     // Get fingerprint data
     const { data: fpData } = useVisitorData({ extendedResult: true }, { immediate: true });
     const visitorData = fpData && {
@@ -26,6 +26,7 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
     const { mutate: createOrder, isPending } = useMutation({
         mutationFn: async (params) => {
             const { recipientAddress, orderType, dstChain, dstToken, srcFiatAmount, onramp, creatorAddress, expectedDstAmount, nft, tournament, payload, } = params;
+            const clientReferenceId = await createValidatedClientReferenceId(params);
             try {
                 // Validate required onramp fields
                 if (!onramp.vendor || !onramp.country) {
@@ -68,7 +69,7 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                     }),
                     creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
                     partnerId,
-                    clientReferenceId: validatedClientReferenceId,
+                    clientReferenceId,
                     visitorData,
                 });
             }

package/dist/esm/anyspend/react/hooks/useAnyspendCreateOrder.d.ts

@@ -17,6 +17,7 @@ export type CreateOrderParams = {
     };
     creatorAddress?: string;
     payload?: any;
+    metadata?: Record<string, any>;
 };
 export type UseAnyspendCreateOrderProps = {
     onSuccess?: (data: any) => void;

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

@@ -14,7 +14,7 @@ export function useAnyspendCreateOrder({ onSuccess, onError } = {}) {
     // Get B3 context values
     const { partnerId } = useB3();
     // Get validated client reference ID from B3 context
-    const validatedClientReferenceId = useValidatedClientReferenceId();
+    const createValidatedClientReferenceId = useValidatedClientReferenceId();
     // Get fingerprint data
     const { data: fpData } = useVisitorData({ extendedResult: true }, { immediate: true });
     const visitorData = fpData && {
@@ -24,6 +24,7 @@ export function useAnyspendCreateOrder({ onSuccess, onError } = {}) {
     const { mutate: createOrder, isPending } = useMutation({
         mutationFn: async (params) => {
             const { recipientAddress, orderType, srcChain, dstChain, srcToken, dstToken, srcAmount, creatorAddress } = params;
+            const clientReferenceId = await createValidatedClientReferenceId(params);
             try {
                 return await anyspendService.createOrder({
                     recipientAddress: normalizeAddress(recipientAddress),
@@ -57,7 +58,7 @@ export function useAnyspendCreateOrder({ onSuccess, onError } = {}) {
                     }),
                     creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
                     partnerId,
-                    clientReferenceId: validatedClientReferenceId,
+                    clientReferenceId,
                     visitorData,
                 });
             }

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

@@ -1,5 +1,7 @@
+import { CreateOnrampOrderParams } from "./useAnyspendCreateOnrampOrder";
+import { CreateOrderParams } from "./useAnyspendCreateOrder";
 /**
  * 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;
+export declare function useValidatedClientReferenceId(): (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string | undefined>;

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

@@ -1,20 +1,20 @@
 import { Validators } from "../../../anyspend/utils/validation.js";
 import { useB3 } from "../../../global-account/react/index.js";
-import { useMemo } from "react";
+import { useCallback } from "react";
 /**
  * Hook that provides a validated client reference ID
  * Gets the createClientReferenceId function from B3 context and validates the result
  */
 export function useValidatedClientReferenceId() {
     const { createClientReferenceId } = useB3();
-    const validatedClientReferenceId = useMemo(() => {
+    const createValidatedClientReferenceId = useCallback(async (params) => {
         // If no function provided, return undefined
         if (!createClientReferenceId) {
             return undefined;
         }
         try {
             // Call the function to generate the ID
-            const generatedId = createClientReferenceId();
+            const generatedId = await createClientReferenceId(params);
             // Validate the generated ID
             const validation = Validators.clientReferenceId(generatedId);
             if (!validation.isValid) {
@@ -28,5 +28,5 @@ export function useValidatedClientReferenceId() {
             return undefined;
         }
     }, [createClientReferenceId]);
-    return validatedClientReferenceId;
+    return createValidatedClientReferenceId;
 }

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

@@ -1,3 +1,5 @@
+import { CreateOnrampOrderParams } from "../../../../anyspend/react/hooks/useAnyspendCreateOnrampOrder";
+import { CreateOrderParams } from "../../../../anyspend/react/hooks/useAnyspendCreateOrder";
 import { PermissionsConfig } from "../../../../global-account/types/permissions";
 import "@relayprotocol/relay-kit-ui/styles.css";
 import { Account, Wallet } from "thirdweb/wallets";
@@ -24,7 +26,7 @@ export declare function B3Provider({ theme, children, accountOverride, environme
     onConnect?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
     connectors?: CreateConnectorFn[];
     overrideDefaultConnectors?: boolean;
-    createClientReferenceId?: () => string;
+    createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Inner provider component that provides the actual B3Context
@@ -38,5 +40,5 @@ export declare function InnerProvider({ children, accountOverride, environment,
     theme: "light" | "dark";
     clientType?: ClientType;
     partnerId: string;
-    createClientReferenceId?: () => string;
+    createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,6 @@
 import { Users } from "@b3dotfun/b3-api";
+import { CreateOnrampOrderParams } from "../../../../anyspend/react/hooks/useAnyspendCreateOnrampOrder";
+import { CreateOrderParams } from "../../../../anyspend/react/hooks/useAnyspendCreateOrder";
 import { PermissionsConfig } from "../../../../global-account/types/permissions";
 import { Account, Wallet } from "thirdweb/wallets";
 import { ClientType } from "../../../client-manager";
@@ -20,7 +22,7 @@ export interface B3ContextType {
     theme: "light" | "dark";
     clientType: ClientType;
     partnerId: string;
-    createClientReferenceId?: () => string;
+    createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
 }
 /**
  * Context for B3 provider

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

@@ -402,6 +402,10 @@ export interface AnySpendCollectorClubPurchaseProps extends BaseModalProps {
     onSuccess?: (txHash?: string) => void;
     /** Client-provided reference ID for tracking orders */
     clientReferenceId?: string;
+    /** The vending machine ID */
+    vendingMachineId: string;
+    /** The pack type */
+    packType: string;
 }
 /**
  * Union type of all possible modal content types

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

@@ -53,5 +53,13 @@ export interface AnySpendCollectorClubPurchaseProps {
      * Show recipient selection (default: true)
      */
     showRecipient?: boolean;
+    /**
+     * The vending machine ID
+     */
+    vendingMachineId: string;
+    /**
+     * The partner ID
+     */
+    packType: string;
 }
-export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, onSuccess, header, showRecipient, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, onSuccess, header, showRecipient, vendingMachineId, packType, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -17,6 +17,7 @@ export type CreateOrderParams = {
     };
     creatorAddress?: string;
     payload?: any;
+    metadata?: Record<string, any>;
 };
 export type UseAnyspendCreateOrderProps = {
     onSuccess?: (data: any) => void;

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

@@ -1,5 +1,7 @@
+import { CreateOnrampOrderParams } from "./useAnyspendCreateOnrampOrder";
+import { CreateOrderParams } from "./useAnyspendCreateOrder";
 /**
  * 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;
+export declare function useValidatedClientReferenceId(): (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string | undefined>;

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

@@ -1,3 +1,5 @@
+import { CreateOnrampOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOnrampOrder";
+import { CreateOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOrder";
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
 import "@relayprotocol/relay-kit-ui/styles.css";
 import { Account, Wallet } from "thirdweb/wallets";
@@ -24,7 +26,7 @@ export declare function B3Provider({ theme, children, accountOverride, environme
     onConnect?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
     connectors?: CreateConnectorFn[];
     overrideDefaultConnectors?: boolean;
-    createClientReferenceId?: () => string;
+    createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Inner provider component that provides the actual B3Context
@@ -38,5 +40,5 @@ export declare function InnerProvider({ children, accountOverride, environment,
     theme: "light" | "dark";
     clientType?: ClientType;
     partnerId: string;
-    createClientReferenceId?: () => string;
+    createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,6 @@
 import { Users } from "@b3dotfun/b3-api";
+import { CreateOnrampOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOnrampOrder";
+import { CreateOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOrder";
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
 import { Account, Wallet } from "thirdweb/wallets";
 import { ClientType } from "../../../client-manager";
@@ -20,7 +22,7 @@ export interface B3ContextType {
     theme: "light" | "dark";
     clientType: ClientType;
     partnerId: string;
-    createClientReferenceId?: () => string;
+    createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
 }
 /**
  * Context for B3 provider

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

@@ -402,6 +402,10 @@ export interface AnySpendCollectorClubPurchaseProps extends BaseModalProps {
     onSuccess?: (txHash?: string) => void;
     /** Client-provided reference ID for tracking orders */
     clientReferenceId?: string;
+    /** The vending machine ID */
+    vendingMachineId: string;
+    /** The pack type */
+    packType: string;
 }
 /**
  * Union type of all possible modal content types

package/package.json

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

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

@@ -100,6 +100,14 @@ export interface AnySpendCollectorClubPurchaseProps {
    * Show recipient selection (default: true)
    */
   showRecipient?: boolean;
+  /**
+   * The vending machine ID
+   */
+  vendingMachineId: string;
+  /**
+   * The partner ID
+   */
+  packType: string;
 }
 
 export function AnySpendCollectorClubPurchase({
@@ -115,6 +123,8 @@ export function AnySpendCollectorClubPurchase({
   onSuccess,
   header,
   showRecipient = true,
+  vendingMachineId,
+  packType,
 }: AnySpendCollectorClubPurchaseProps) {
   // Calculate total amount needed (pricePerPack * packAmount)
   const totalAmount = useMemo(() => {
@@ -169,6 +179,8 @@ export function AnySpendCollectorClubPurchase({
         packId,
         packAmount,
         pricePerPack,
+        vendingMachineId,
+        packType,
       }}
       header={header || defaultHeader}
       onSuccess={onSuccess}

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

@@ -509,6 +509,7 @@ function AnySpendCustomInner({
                 to: contractAddress,
               }
             : undefined,
+        metadata,
       } as CreateOrderParams;
 
       if (onramp) {
@@ -642,27 +643,27 @@ function AnySpendCustomInner({
               ? "Join for"
               : "Recipient"}
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex flex-wrap items-center justify-end gap-2">
         {recipientAddress ? (
           <button
-            className={cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg")}
+            className={cn("text-as-tertiarry flex items-center gap-2 rounded-lg")}
             onClick={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
           >
-            <>
-              <div className="text-as-tertiarry flex items-center gap-1 text-sm">
-                <span>{recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress)}</span>
-              </div>
-            </>
+            <div className="text-as-tertiarry flex items-center gap-1 text-sm">
+              <span className="whitespace-nowrap">
+                {recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress)}
+              </span>
+            </div>
           </button>
         ) : (
           <button
             className="text-as-primary/70 flex items-center gap-1 rounded-lg"
             onClick={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
           >
-            <div className="text-sm font-medium">Select recipient</div>
+            <div className="whitespace-nowrap text-sm font-medium">Select recipient</div>
           </button>
         )}
-        <ChevronRight className="h-4 w-4" />
+        <ChevronRight className="h-4 w-4 shrink-0" />
       </div>
     </motion.div>
   ) : null;
@@ -912,31 +913,29 @@ function AnySpendCustomInner({
               >
                 <div className="text-as-tertiarry flex h-7 items-center text-sm">Pay</div>
                 <button
-                  className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700"
+                  className="text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700"
                   onClick={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
                 >
                   {effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
                     <>
                       {connectedAddress ? (
-                        <>
-                          <span className="text-as-tertiarry flex items-center gap-1">
-                            {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
-                          </span>
-                        </>
+                        <span className="text-as-tertiarry whitespace-nowrap">
+                          {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
+                        </span>
                       ) : (
-                        "Connect wallet"
+                        <span className="whitespace-nowrap">Connect wallet</span>
                       )}
-                      <ChevronRight className="h-4 w-4" />
+                      <ChevronRight className="h-4 w-4 shrink-0" />
                     </>
                   ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
                     <>
-                      Transfer crypto
-                      <ChevronRight className="h-4 w-4" />
+                      <span className="whitespace-nowrap">Transfer crypto</span>
+                      <ChevronRight className="h-4 w-4 shrink-0" />
                     </>
                   ) : (
                     <>
-                      Select payment method
-                      <ChevronRight className="h-4 w-4" />
+                      <span className="whitespace-nowrap">Select payment method</span>
+                      <ChevronRight className="h-4 w-4 shrink-0" />
                     </>
                   )}
                 </button>
@@ -984,32 +983,34 @@ function AnySpendCustomInner({
                     filter: hasMounted ? "blur(0px)" : "blur(10px)",
                   }}
                   transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
-                  className="relative flex w-full items-center justify-between"
+                  className="relative flex w-full items-center justify-between gap-4"
                 >
-                  <div className="flex items-center gap-2">
-                    <span className="text-as-tertiarry flex items-center gap-1.5 text-sm">
+                  <span className="text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm">
+                    <span className="whitespace-nowrap">
                       Total <span className="text-as-tertiarry">(with fee)</span>
-                      {anyspendQuote?.data?.fee && (
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <button className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
-                                <Info className="h-4 w-4" />
-                              </button>
-                            </TooltipTrigger>
-                            <TooltipContent side="top">
-                              <FeeBreakDown fee={anyspendQuote.data.fee} />
-                            </TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      )}
                     </span>
-                    {renderPointsBadge()}
-                  </div>
+                    {anyspendQuote?.data?.fee && (
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <button className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
+                              <Info className="h-4 w-4" />
+                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent side="top">
+                            <FeeBreakDown fee={anyspendQuote.data.fee} />
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    )}
+                  </span>
                   <div className="flex flex-col items-end gap-0.5">
-                    <span className="text-as-primary font-semibold">
-                      {formattedSrcAmount || "--"} {srcToken.symbol}
-                    </span>
+                    <div className="flex flex-wrap items-center justify-end gap-2">
+                      {renderPointsBadge()}
+                      <span className="text-as-primary whitespace-nowrap font-semibold">
+                        {formattedSrcAmount || "--"} {srcToken.symbol}
+                      </span>
+                    </div>
                     {anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && (
                       <span className="text-as-secondary text-xs">
                         incl. $
@@ -1089,33 +1090,33 @@ function AnySpendCustomInner({
               >
                 <div className="text-as-tertiarry flex h-7 items-center text-sm">Pay with</div>
                 <button
-                  className="text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700"
+                  className="text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700"
                   onClick={() => setActivePanel(PanelView.FIAT_PAYMENT_METHOD)}
                 >
                   {selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (
                     <>
-                      <div className="flex items-center gap-2">
-                        <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
+                      <div className="flex items-center gap-2 whitespace-nowrap">
+                        <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600">
                           <span className="text-xs font-bold text-white">C</span>
                         </div>
                         Coinbase Pay
                       </div>
-                      <ChevronRight className="h-4 w-4" />
+                      <ChevronRight className="h-4 w-4 shrink-0" />
                     </>
                   ) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (
                     <>
-                      <div className="flex items-center gap-2">
-                        <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
+                      <div className="flex items-center gap-2 whitespace-nowrap">
+                        <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600">
                           <span className="text-xs font-bold text-white">S</span>
                         </div>
                         Credit/Debit Card
                       </div>
-                      <ChevronRight className="h-4 w-4" />
+                      <ChevronRight className="h-4 w-4 shrink-0" />
                     </>
                   ) : (
                     <>
-                      Select payment method
-                      <ChevronRight className="h-4 w-4" />
+                      <span className="whitespace-nowrap">Select payment method</span>
+                      <ChevronRight className="h-4 w-4 shrink-0" />
                     </>
                   )}
                 </button>
@@ -1136,30 +1137,34 @@ function AnySpendCustomInner({
                   filter: hasMounted ? "blur(0px)" : "blur(10px)",
                 }}
                 transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
-                className="relative flex w-full items-center justify-between"
+                className="relative flex w-full items-center justify-between gap-4"
               >
-                <div className="flex items-center gap-2">
-                  <span className="text-as-tertiarry flex items-center gap-1.5 text-sm">
+                <span className="text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm">
+                  <span className="whitespace-nowrap">
                     Total <span className="text-as-tertiarry">(USD)</span>
-                    {anyspendQuote?.data?.fee && (
-                      <TooltipProvider>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <button className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
-                              <Info className="h-4 w-4" />
-                            </button>
-                          </TooltipTrigger>
-                          <TooltipContent side="top">
-                            <FeeBreakDown fee={anyspendQuote.data.fee} />
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                    )}
                   </span>
-                  {renderPointsBadge()}
-                </div>
+                  {anyspendQuote?.data?.fee && (
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <button className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
+                            <Info className="h-4 w-4" />
+                          </button>
+                        </TooltipTrigger>
+                        <TooltipContent side="top">
+                          <FeeBreakDown fee={anyspendQuote.data.fee} />
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  )}
+                </span>
                 <div className="flex flex-col items-end gap-0.5">
-                  <span className="text-as-primary text-xl font-semibold">${srcFiatAmount || "0.00"}</span>
+                  <div className="flex flex-wrap items-center justify-end gap-2">
+                    {renderPointsBadge()}
+                    <span className="text-as-primary whitespace-nowrap text-xl font-semibold">
+                      ${srcFiatAmount || "0.00"}
+                    </span>
+                  </div>
                   {anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount && (
                     <span className="text-as-secondary text-xs">
                       incl. $

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

@@ -39,7 +39,7 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
   const { partnerId } = useB3();
 
   // Get validated client reference ID from B3 context
-  const validatedClientReferenceId = useValidatedClientReferenceId();
+  const createValidatedClientReferenceId = useValidatedClientReferenceId();
 
   // Get fingerprint data
   const { data: fpData } = useVisitorData({ extendedResult: true }, { immediate: true });
@@ -64,6 +64,8 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
         payload,
       } = params;
 
+      const clientReferenceId = await createValidatedClientReferenceId(params);
+
       try {
         // Validate required onramp fields
         if (!onramp.vendor || !onramp.country) {
@@ -109,7 +111,7 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
           }),
           creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
           partnerId,
-          clientReferenceId: validatedClientReferenceId,
+          clientReferenceId,
           visitorData,
         });
       } catch (error: any) {

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

@@ -21,6 +21,7 @@ export type CreateOrderParams = {
   tournament?: components["schemas"]["Tournament"] & { contractAddress: string; entryPriceOrFundAmount: string };
   creatorAddress?: string;
   payload?: any;
+  metadata?: Record<string, any>;
 };
 
 export type UseAnyspendCreateOrderProps = {
@@ -38,7 +39,7 @@ export function useAnyspendCreateOrder({ onSuccess, onError }: UseAnyspendCreate
   const { partnerId } = useB3();
 
   // Get validated client reference ID from B3 context
-  const validatedClientReferenceId = useValidatedClientReferenceId();
+  const createValidatedClientReferenceId = useValidatedClientReferenceId();
 
   // Get fingerprint data
   const { data: fpData } = useVisitorData({ extendedResult: true }, { immediate: true });
@@ -49,6 +50,7 @@ export function useAnyspendCreateOrder({ onSuccess, onError }: UseAnyspendCreate
   const { mutate: createOrder, isPending } = useMutation({
     mutationFn: async (params: CreateOrderParams) => {
       const { recipientAddress, orderType, srcChain, dstChain, srcToken, dstToken, srcAmount, creatorAddress } = params;
+      const clientReferenceId = await createValidatedClientReferenceId(params);
 
       try {
         return await anyspendService.createOrder({
@@ -83,7 +85,7 @@ export function useAnyspendCreateOrder({ onSuccess, onError }: UseAnyspendCreate
           }),
           creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
           partnerId,
-          clientReferenceId: validatedClientReferenceId,
+          clientReferenceId,
           visitorData,
         });
       } catch (error: any) {

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

@@ -1,6 +1,8 @@
 import { Validators } from "@b3dotfun/sdk/anyspend/utils/validation";
 import { useB3 } from "@b3dotfun/sdk/global-account/react";
-import { useMemo } from "react";
+import { useCallback } from "react";
+import { CreateOnrampOrderParams } from "./useAnyspendCreateOnrampOrder";
+import { CreateOrderParams } from "./useAnyspendCreateOrder";
 
 /**
  * Hook that provides a validated client reference ID
@@ -9,32 +11,35 @@ import { useMemo } from "react";
 export function useValidatedClientReferenceId() {
   const { createClientReferenceId } = useB3();
 
-  const validatedClientReferenceId = useMemo(() => {
-    // If no function provided, return undefined
-    if (!createClientReferenceId) {
-      return undefined;
-    }
+  const createValidatedClientReferenceId = useCallback(
+    async (params: CreateOrderParams | CreateOnrampOrderParams) => {
+      // If no function provided, return undefined
+      if (!createClientReferenceId) {
+        return undefined;
+      }
 
-    try {
-      // Call the function to generate the ID
-      const generatedId = createClientReferenceId();
+      try {
+        // Call the function to generate the ID
+        const generatedId = await createClientReferenceId(params);
 
-      // Validate the generated ID
-      const validation = Validators.clientReferenceId(generatedId);
+        // Validate the generated ID
+        const validation = Validators.clientReferenceId(generatedId);
 
-      if (!validation.isValid) {
-        console.error(
-          `[AnySpend] Invalid clientReferenceId generated: ${validation.error || "Validation failed"}. Will be set to undefined.`,
-        );
+        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 validation.cleaned;
-    } catch (error) {
-      console.error("[AnySpend] Error generating clientReferenceId:", error);
-      return undefined;
-    }
-  }, [createClientReferenceId]);
-
-  return validatedClientReferenceId;
+  return createValidatedClientReferenceId;
 }

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

@@ -1,3 +1,5 @@
+import { CreateOnrampOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOnrampOrder";
+import { CreateOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOrder";
 import {
   RelayKitProviderWrapper,
   TooltipProvider,
@@ -76,7 +78,7 @@ export function B3Provider({
   onConnect?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
   connectors?: CreateConnectorFn[];
   overrideDefaultConnectors?: boolean;
-  createClientReferenceId?: () => string;
+  createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
 }) {
   // Initialize Google Analytics on mount
   useEffect(() => {
@@ -141,7 +143,7 @@ export function InnerProvider({
   theme: "light" | "dark";
   clientType?: ClientType;
   partnerId: string;
-  createClientReferenceId?: () => string;
+  createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
 }) {
   const activeAccount = useActiveAccount();
   const [manuallySelectedWallet, setManuallySelectedWallet] = useState<Wallet | undefined>(undefined);

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

@@ -1,4 +1,6 @@
 import { Users } from "@b3dotfun/b3-api";
+import { CreateOnrampOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOnrampOrder";
+import { CreateOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOrder";
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
 import { createContext } from "react";
 import { Account, Wallet } from "thirdweb/wallets";
@@ -22,7 +24,7 @@ export interface B3ContextType {
   theme: "light" | "dark";
   clientType: ClientType;
   partnerId: string;
-  createClientReferenceId?: () => string;
+  createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
 }
 
 /**

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

@@ -426,6 +426,10 @@ export interface AnySpendCollectorClubPurchaseProps extends BaseModalProps {
   onSuccess?: (txHash?: string) => void;
   /** Client-provided reference ID for tracking orders */
   clientReferenceId?: string;
+  /** The vending machine ID */
+  vendingMachineId: string;
+  /** The pack type */
+  packType: string;
 }
 
 /**