@b3dotfun/sdk 0.1.66-alpha.3 → 0.1.66-alpha.4

package/dist/cjs/anyspend/react/components/checkout/CheckoutPaymentPanel.js

@@ -41,5 +41,5 @@ function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, desti
     }
     const accordionButtonClass = (active) => (0, cn_1.cn)("anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors", active ? "bg-white dark:bg-gray-900" : "bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800", classes?.paymentMethodButton);
     const expandedPanelClass = (0, cn_1.cn)("anyspend-payment-method-panel border-t border-gray-100 bg-white px-4 py-4 dark:border-gray-800 dark:bg-gray-900");
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel), children: [(0, jsx_runtime_1.jsx)("h2", { className: (0, cn_1.cn)("anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.paymentTitle), children: "Payment" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-payment-methods divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-gray-700 dark:border-gray-700", classes?.paymentMethodSelector), children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-crypto", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod("crypto"), className: accordionButtonClass(paymentMethod === "crypto"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "crypto", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Crypto wallet" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "crypto" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(CryptoCheckoutPanel_1.CryptoCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, buttonText: buttonText, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "crypto-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-qr", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod("qr"), className: accordionButtonClass(paymentMethod === "qr"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "qr", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(lucide_react_1.QrCode, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "QR code" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "qr" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(QRCheckoutPanel_1.QRCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "qr-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-card", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod("card"), className: accordionButtonClass(paymentMethod === "card"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Credit or debit card" }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(VisaLogo, {}), (0, jsx_runtime_1.jsx)(MastercardLogo, {}), (0, jsx_runtime_1.jsx)(AmexLogo, {})] })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "card" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(FiatCheckoutPanel_1.FiatCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, classes: classes }) }) }, "card-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-coinbase", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod("coinbase"), className: accordionButtonClass(paymentMethod === "coinbase"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "coinbase", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(CoinbaseLogo, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Coinbase Pay" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "coinbase" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(CoinbaseCheckoutPanel_1.CoinbaseCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, classes: classes }) }) }, "coinbase-panel")) })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel), children: [(0, jsx_runtime_1.jsx)("h2", { className: (0, cn_1.cn)("anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.paymentTitle), children: "Payment" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-payment-methods divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-gray-700 dark:border-gray-700", classes?.paymentMethodSelector), children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-crypto", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod("crypto"), className: accordionButtonClass(paymentMethod === "crypto"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "crypto", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Crypto wallet" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "crypto" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(CryptoCheckoutPanel_1.CryptoCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, buttonText: buttonText, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "crypto-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-qr", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod("qr"), className: accordionButtonClass(paymentMethod === "qr"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "qr", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(lucide_react_1.QrCode, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "QR code" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "qr" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(QRCheckoutPanel_1.QRCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "qr-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-card", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod("card"), className: accordionButtonClass(paymentMethod === "card"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Credit or debit card" }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(VisaLogo, {}), (0, jsx_runtime_1.jsx)(MastercardLogo, {}), (0, jsx_runtime_1.jsx)(AmexLogo, {})] })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "card" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(FiatCheckoutPanel_1.FiatCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "card-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-coinbase", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod("coinbase"), className: accordionButtonClass(paymentMethod === "coinbase"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "coinbase", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(CoinbaseLogo, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Coinbase Pay" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "coinbase" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(CoinbaseCheckoutPanel_1.CoinbaseCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "coinbase-panel")) })] })] })] }));
 }

package/dist/cjs/anyspend/react/components/checkout/CoinbaseCheckoutPanel.d.ts

@@ -10,6 +10,7 @@ interface CoinbaseCheckoutPanelProps {
         orderId?: string;
     }) => void;
     onError?: (error: Error) => void;
+    callbackMetadata?: Record<string, unknown>;
     classes?: AnySpendCheckoutClasses;
 }
 export declare function CoinbaseCheckoutPanel({ destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, }: CoinbaseCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/anyspend/react/components/checkout/FiatCheckoutPanel.d.ts

@@ -10,7 +10,8 @@ interface FiatCheckoutPanelProps {
         orderId?: string;
     }) => void;
     onError?: (error: Error) => void;
+    callbackMetadata?: Record<string, unknown>;
     classes?: AnySpendCheckoutClasses;
 }
-export declare function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, classes, }: FiatCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata, classes, }: FiatCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/anyspend/react/components/checkout/FiatCheckoutPanel.js

@@ -12,7 +12,7 @@ const react_stripe_js_1 = require("@stripe/react-stripe-js");
 const lucide_react_1 = require("lucide-react");
 const react_3 = require("motion/react");
 const react_4 = require("react");
-function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, classes, }) {
+function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata, classes, }) {
     const { data: tokenData } = (0, react_2.useTokenData)(destinationTokenChainId, destinationTokenAddress);
     const { theme, stripePublishableKey } = (0, react_2.useB3Config)();
     const formattedAmount = (0, react_4.useMemo)(() => {
@@ -76,6 +76,7 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
                     redirectUrl: window.location.origin,
                 },
                 expectedDstAmount: totalAmount,
+                callbackMetadata,
             });
         }
     }, [
@@ -91,6 +92,7 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
         formattedAmount,
         totalAmount,
         geoData,
+        callbackMetadata,
         createOrder,
     ]);
     // Loading geo/stripe support check

package/dist/cjs/anyspend/react/components/checkout/QRCheckoutPanel.d.ts

@@ -13,5 +13,5 @@ interface QRCheckoutPanelProps {
     callbackMetadata?: Record<string, unknown>;
     classes?: AnySpendCheckoutClasses;
 }
-export declare function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata: _callbackMetadata, classes, }: QRCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata, classes, }: QRCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/anyspend/react/components/checkout/QRCheckoutPanel.js

@@ -29,7 +29,7 @@ const DEFAULT_ETH_ON_BASE = {
     decimals: 18,
     metadata: { logoURI: "https://assets.relay.link/icons/1/light.png" },
 };
-function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata: _callbackMetadata, classes, }) {
+function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata, classes, }) {
     const [selectedSrcChainId, setSelectedSrcChainId] = (0, react_2.useState)(8453); // Base
     const [selectedSrcToken, setSelectedSrcToken] = (0, react_2.useState)(DEFAULT_ETH_ON_BASE);
     const [showTokenSelector, setShowTokenSelector] = (0, react_2.useState)(false);
@@ -100,8 +100,17 @@ function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, destinatio
             dstChain: destinationTokenChainId,
             srcToken: selectedSrcToken,
             dstToken,
+            callbackMetadata,
         });
-    }, [recipientAddress, selectedSrcChainId, destinationTokenChainId, selectedSrcToken, dstToken, createOrder]);
+    }, [
+        recipientAddress,
+        selectedSrcChainId,
+        destinationTokenChainId,
+        selectedSrcToken,
+        dstToken,
+        callbackMetadata,
+        createOrder,
+    ]);
     // Poll order status
     const { orderAndTransactions: oat } = (0, useAnyspendOrderAndTransactions_1.useAnyspendOrderAndTransactions)(orderId);
     // Call onSuccess when order is executed

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

@@ -9,6 +9,7 @@ export type CreateDepositFirstOrderParams = {
     creatorAddress?: string;
     /** Optional contract config for custom execution after deposit */
     contractConfig?: DepositContractConfig;
+    callbackMetadata?: Record<string, unknown>;
 };
 export type UseCreateDepositFirstOrderProps = {
     onSuccess?: (data: any) => void;

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

@@ -63,6 +63,7 @@ function useCreateDepositFirstOrder({ onSuccess, onError } = {}) {
                     creatorAddress: creatorAddress ? (0, utils_1.normalizeAddress)(creatorAddress) : undefined,
                     partnerId,
                     visitorData,
+                    callbackMetadata: params.callbackMetadata,
                 });
             }
             catch (error) {

package/dist/esm/anyspend/react/components/checkout/CheckoutPaymentPanel.js

@@ -38,5 +38,5 @@ export function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress
     }
     const accordionButtonClass = (active) => cn("anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors", active ? "bg-white dark:bg-gray-900" : "bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800", classes?.paymentMethodButton);
     const expandedPanelClass = cn("anyspend-payment-method-panel border-t border-gray-100 bg-white px-4 py-4 dark:border-gray-800 dark:bg-gray-900");
-    return (_jsxs("div", { className: cn("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel), children: [_jsx("h2", { className: cn("anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.paymentTitle), children: "Payment" }), _jsxs("div", { className: cn("anyspend-payment-methods divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-gray-700 dark:border-gray-700", classes?.paymentMethodSelector), children: [_jsxs("div", { className: "anyspend-method-crypto", children: [_jsxs("button", { onClick: () => setPaymentMethod("crypto"), className: accordionButtonClass(paymentMethod === "crypto"), children: [_jsx(RadioCircle, { selected: paymentMethod === "crypto", themeColor: themeColor }), _jsx(Wallet, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Crypto wallet" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "crypto" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(CryptoCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, buttonText: buttonText, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "crypto-panel")) })] }), _jsxs("div", { className: "anyspend-method-qr", children: [_jsxs("button", { onClick: () => setPaymentMethod("qr"), className: accordionButtonClass(paymentMethod === "qr"), children: [_jsx(RadioCircle, { selected: paymentMethod === "qr", themeColor: themeColor }), _jsx(QrCode, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "QR code" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "qr" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(QRCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "qr-panel")) })] }), _jsxs("div", { className: "anyspend-method-card", children: [_jsxs("button", { onClick: () => setPaymentMethod("card"), className: accordionButtonClass(paymentMethod === "card"), children: [_jsx(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Credit or debit card" }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx(VisaLogo, {}), _jsx(MastercardLogo, {}), _jsx(AmexLogo, {})] })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "card" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(FiatCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, classes: classes }) }) }, "card-panel")) })] }), _jsxs("div", { className: "anyspend-method-coinbase", children: [_jsxs("button", { onClick: () => setPaymentMethod("coinbase"), className: accordionButtonClass(paymentMethod === "coinbase"), children: [_jsx(RadioCircle, { selected: paymentMethod === "coinbase", themeColor: themeColor }), _jsx(CoinbaseLogo, {}), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Coinbase Pay" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "coinbase" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(CoinbaseCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, classes: classes }) }) }, "coinbase-panel")) })] })] })] }));
+    return (_jsxs("div", { className: cn("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel), children: [_jsx("h2", { className: cn("anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.paymentTitle), children: "Payment" }), _jsxs("div", { className: cn("anyspend-payment-methods divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-gray-700 dark:border-gray-700", classes?.paymentMethodSelector), children: [_jsxs("div", { className: "anyspend-method-crypto", children: [_jsxs("button", { onClick: () => setPaymentMethod("crypto"), className: accordionButtonClass(paymentMethod === "crypto"), children: [_jsx(RadioCircle, { selected: paymentMethod === "crypto", themeColor: themeColor }), _jsx(Wallet, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Crypto wallet" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "crypto" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(CryptoCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, buttonText: buttonText, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "crypto-panel")) })] }), _jsxs("div", { className: "anyspend-method-qr", children: [_jsxs("button", { onClick: () => setPaymentMethod("qr"), className: accordionButtonClass(paymentMethod === "qr"), children: [_jsx(RadioCircle, { selected: paymentMethod === "qr", themeColor: themeColor }), _jsx(QrCode, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "QR code" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "qr" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(QRCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "qr-panel")) })] }), _jsxs("div", { className: "anyspend-method-card", children: [_jsxs("button", { onClick: () => setPaymentMethod("card"), className: accordionButtonClass(paymentMethod === "card"), children: [_jsx(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Credit or debit card" }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx(VisaLogo, {}), _jsx(MastercardLogo, {}), _jsx(AmexLogo, {})] })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "card" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(FiatCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "card-panel")) })] }), _jsxs("div", { className: "anyspend-method-coinbase", children: [_jsxs("button", { onClick: () => setPaymentMethod("coinbase"), className: accordionButtonClass(paymentMethod === "coinbase"), children: [_jsx(RadioCircle, { selected: paymentMethod === "coinbase", themeColor: themeColor }), _jsx(CoinbaseLogo, {}), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Coinbase Pay" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "coinbase" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(CoinbaseCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onSuccess: handleSuccess, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "coinbase-panel")) })] })] })] }));
 }

package/dist/esm/anyspend/react/components/checkout/CoinbaseCheckoutPanel.d.ts

@@ -10,6 +10,7 @@ interface CoinbaseCheckoutPanelProps {
         orderId?: string;
     }) => void;
     onError?: (error: Error) => void;
+    callbackMetadata?: Record<string, unknown>;
     classes?: AnySpendCheckoutClasses;
 }
 export declare function CoinbaseCheckoutPanel({ destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, }: CoinbaseCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/anyspend/react/components/checkout/FiatCheckoutPanel.d.ts

@@ -10,7 +10,8 @@ interface FiatCheckoutPanelProps {
         orderId?: string;
     }) => void;
     onError?: (error: Error) => void;
+    callbackMetadata?: Record<string, unknown>;
     classes?: AnySpendCheckoutClasses;
 }
-export declare function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, classes, }: FiatCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata, classes, }: FiatCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/anyspend/react/components/checkout/FiatCheckoutPanel.js

@@ -9,7 +9,7 @@ import { AddressElement, Elements, PaymentElement, useElements, useStripe } from
 import { Loader2, Lock } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, classes, }) {
+export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata, classes, }) {
     const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
     const { theme, stripePublishableKey } = useB3Config();
     const formattedAmount = useMemo(() => {
@@ -73,6 +73,7 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
                     redirectUrl: window.location.origin,
                 },
                 expectedDstAmount: totalAmount,
+                callbackMetadata,
             });
         }
     }, [
@@ -88,6 +89,7 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
         formattedAmount,
         totalAmount,
         geoData,
+        callbackMetadata,
         createOrder,
     ]);
     // Loading geo/stripe support check

package/dist/esm/anyspend/react/components/checkout/QRCheckoutPanel.d.ts

@@ -13,5 +13,5 @@ interface QRCheckoutPanelProps {
     callbackMetadata?: Record<string, unknown>;
     classes?: AnySpendCheckoutClasses;
 }
-export declare function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata: _callbackMetadata, classes, }: QRCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata, classes, }: QRCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/anyspend/react/components/checkout/QRCheckoutPanel.js

@@ -26,7 +26,7 @@ const DEFAULT_ETH_ON_BASE = {
     decimals: 18,
     metadata: { logoURI: "https://assets.relay.link/icons/1/light.png" },
 };
-export function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata: _callbackMetadata, classes, }) {
+export function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata, classes, }) {
     const [selectedSrcChainId, setSelectedSrcChainId] = useState(8453); // Base
     const [selectedSrcToken, setSelectedSrcToken] = useState(DEFAULT_ETH_ON_BASE);
     const [showTokenSelector, setShowTokenSelector] = useState(false);
@@ -97,8 +97,17 @@ export function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, des
             dstChain: destinationTokenChainId,
             srcToken: selectedSrcToken,
             dstToken,
+            callbackMetadata,
         });
-    }, [recipientAddress, selectedSrcChainId, destinationTokenChainId, selectedSrcToken, dstToken, createOrder]);
+    }, [
+        recipientAddress,
+        selectedSrcChainId,
+        destinationTokenChainId,
+        selectedSrcToken,
+        dstToken,
+        callbackMetadata,
+        createOrder,
+    ]);
     // Poll order status
     const { orderAndTransactions: oat } = useAnyspendOrderAndTransactions(orderId);
     // Call onSuccess when order is executed

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

@@ -9,6 +9,7 @@ export type CreateDepositFirstOrderParams = {
     creatorAddress?: string;
     /** Optional contract config for custom execution after deposit */
     contractConfig?: DepositContractConfig;
+    callbackMetadata?: Record<string, unknown>;
 };
 export type UseCreateDepositFirstOrderProps = {
     onSuccess?: (data: any) => void;

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

@@ -60,6 +60,7 @@ export function useCreateDepositFirstOrder({ onSuccess, onError } = {}) {
                     creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
                     partnerId,
                     visitorData,
+                    callbackMetadata: params.callbackMetadata,
                 });
             }
             catch (error) {

package/dist/types/anyspend/react/components/checkout/CoinbaseCheckoutPanel.d.ts

@@ -10,6 +10,7 @@ interface CoinbaseCheckoutPanelProps {
         orderId?: string;
     }) => void;
     onError?: (error: Error) => void;
+    callbackMetadata?: Record<string, unknown>;
     classes?: AnySpendCheckoutClasses;
 }
 export declare function CoinbaseCheckoutPanel({ destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, }: CoinbaseCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/anyspend/react/components/checkout/FiatCheckoutPanel.d.ts

@@ -10,7 +10,8 @@ interface FiatCheckoutPanelProps {
         orderId?: string;
     }) => void;
     onError?: (error: Error) => void;
+    callbackMetadata?: Record<string, unknown>;
     classes?: AnySpendCheckoutClasses;
 }
-export declare function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, classes, }: FiatCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata, classes, }: FiatCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/anyspend/react/components/checkout/QRCheckoutPanel.d.ts

@@ -13,5 +13,5 @@ interface QRCheckoutPanelProps {
     callbackMetadata?: Record<string, unknown>;
     classes?: AnySpendCheckoutClasses;
 }
-export declare function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata: _callbackMetadata, classes, }: QRCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata, classes, }: QRCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,6 +9,7 @@ export type CreateDepositFirstOrderParams = {
     creatorAddress?: string;
     /** Optional contract config for custom execution after deposit */
     contractConfig?: DepositContractConfig;
+    callbackMetadata?: Record<string, unknown>;
 };
 export type UseCreateDepositFirstOrderProps = {
     onSuccess?: (data: any) => void;

package/package.json

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

package/src/anyspend/react/components/checkout/CheckoutPaymentPanel.tsx

@@ -270,6 +270,7 @@ export function CheckoutPaymentPanel({
                     themeColor={themeColor}
                     onSuccess={handleSuccess}
                     onError={onError}
+                    callbackMetadata={callbackMetadata}
                     classes={classes}
                   />
                 </div>
@@ -307,6 +308,7 @@ export function CheckoutPaymentPanel({
                     themeColor={themeColor}
                     onSuccess={handleSuccess}
                     onError={onError}
+                    callbackMetadata={callbackMetadata}
                     classes={classes}
                   />
                 </div>

package/src/anyspend/react/components/checkout/CoinbaseCheckoutPanel.tsx

@@ -17,6 +17,7 @@ interface CoinbaseCheckoutPanelProps {
   themeColor?: string;
   onSuccess?: (result: { txHash?: string; orderId?: string }) => void;
   onError?: (error: Error) => void;
+  callbackMetadata?: Record<string, unknown>;
   classes?: AnySpendCheckoutClasses;
 }
 

package/src/anyspend/react/components/checkout/FiatCheckoutPanel.tsx

@@ -20,6 +20,7 @@ interface FiatCheckoutPanelProps {
   themeColor?: string;
   onSuccess?: (result: { txHash?: string; orderId?: string }) => void;
   onError?: (error: Error) => void;
+  callbackMetadata?: Record<string, unknown>;
   classes?: AnySpendCheckoutClasses;
 }
 
@@ -31,6 +32,7 @@ export function FiatCheckoutPanel({
   themeColor,
   onSuccess,
   onError,
+  callbackMetadata,
   classes,
 }: FiatCheckoutPanelProps) {
   const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
@@ -109,6 +111,7 @@ export function FiatCheckoutPanel({
           redirectUrl: window.location.origin,
         },
         expectedDstAmount: totalAmount,
+        callbackMetadata,
       });
     }
   }, [
@@ -124,6 +127,7 @@ export function FiatCheckoutPanel({
     formattedAmount,
     totalAmount,
     geoData,
+    callbackMetadata,
     createOrder,
   ]);
 

package/src/anyspend/react/components/checkout/QRCheckoutPanel.tsx

@@ -50,7 +50,7 @@ export function QRCheckoutPanel({
   themeColor,
   onSuccess,
   onError,
-  callbackMetadata: _callbackMetadata,
+  callbackMetadata,
   classes,
 }: QRCheckoutPanelProps) {
   const [selectedSrcChainId, setSelectedSrcChainId] = useState(8453); // Base
@@ -135,8 +135,17 @@ export function QRCheckoutPanel({
       dstChain: destinationTokenChainId,
       srcToken: selectedSrcToken,
       dstToken,
+      callbackMetadata,
     });
-  }, [recipientAddress, selectedSrcChainId, destinationTokenChainId, selectedSrcToken, dstToken, createOrder]);
+  }, [
+    recipientAddress,
+    selectedSrcChainId,
+    destinationTokenChainId,
+    selectedSrcToken,
+    dstToken,
+    callbackMetadata,
+    createOrder,
+  ]);
 
   // Poll order status
   const { orderAndTransactions: oat } = useAnyspendOrderAndTransactions(orderId);

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

@@ -17,6 +17,7 @@ export type CreateDepositFirstOrderParams = {
   creatorAddress?: string;
   /** Optional contract config for custom execution after deposit */
   contractConfig?: DepositContractConfig;
+  callbackMetadata?: Record<string, unknown>;
 };
 
 export type UseCreateDepositFirstOrderProps = {
@@ -84,6 +85,7 @@ export function useCreateDepositFirstOrder({ onSuccess, onError }: UseCreateDepo
           creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
           partnerId,
           visitorData,
+          callbackMetadata: params.callbackMetadata,
         });
       } catch (error: any) {
         if (error?.data) {