@b3dotfun/sdk 0.1.66-alpha.2 → 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/CryptoCheckoutPanel.js

@@ -170,7 +170,7 @@ function CryptoCheckoutPanel({ recipientAddress, destinationTokenAddress, destin
         },
     });
     const isWaitingForExecution = !!orderId && oat?.data?.order.status !== "executed";
-    const handlePay = (0, react_5.useCallback)(() => {
+    const handlePay = (0, react_5.useCallback)(async () => {
         if (!selectedSrcToken || !walletAddress)
             return;
         depositSentRef.current = false;

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FiatCheckoutPanel = FiatCheckoutPanel;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../anyspend/react");
-const constants_1 = require("../../../../anyspend/constants");
 const cn_1 = require("../../../../shared/utils/cn");
 const number_1 = require("../../../../shared/utils/number");
 const payment_utils_1 = require("../../../../shared/utils/payment.utils");
@@ -13,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)(() => {
@@ -21,12 +20,6 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
         return (0, number_1.formatTokenAmount)(BigInt(totalAmount), decimals);
     }, [totalAmount, tokenData]);
     const { geoData, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeo, } = (0, react_1.useGeoOnrampOptions)(formattedAmount);
-    // Detect if destination token is the same as the onramp source (USDC on Base)
-    // In this case, onramp order creation would fail with "Cannot swap same token on same chain"
-    const isSameAsOnrampSource = (0, react_4.useMemo)(() => {
-        return (destinationTokenChainId === constants_1.USDC_BASE.chainId &&
-            destinationTokenAddress.toLowerCase() === constants_1.USDC_BASE.address.toLowerCase());
-    }, [destinationTokenAddress, destinationTokenChainId]);
     // Order state
     const [orderId, setOrderId] = (0, react_4.useState)(null);
     const [stripePaymentIntentId, setStripePaymentIntentId] = (0, react_4.useState)(null);
@@ -50,11 +43,9 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
         },
     });
     // Auto-create onramp order when Stripe Web2 is supported and all data is ready
-    // Skip auto-creation when destination is same as source (USDC on Base)
     (0, react_4.useEffect)(() => {
         if (!isLoadingGeo &&
             stripeWeb2Support?.isSupport &&
-            !isSameAsOnrampSource &&
             !orderCreatedRef.current &&
             !orderId &&
             !isCreatingOrder &&
@@ -85,12 +76,12 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
                     redirectUrl: window.location.origin,
                 },
                 expectedDstAmount: totalAmount,
+                callbackMetadata,
             });
         }
     }, [
         isLoadingGeo,
         stripeWeb2Support,
-        isSameAsOnrampSource,
         orderId,
         isCreatingOrder,
         orderError,
@@ -101,6 +92,7 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
         formattedAmount,
         totalAmount,
         geoData,
+        callbackMetadata,
         createOrder,
     ]);
     // Loading geo/stripe support check
@@ -120,14 +112,6 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
                         orderCreatedRef.current = false;
                     }, className: "anyspend-fiat-retry text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400", children: "Try again" })] }));
     }
-    // Same-token fallback: USDC on Base uses Stripe redirect instead of embedded
-    if (isSameAsOnrampSource && hasStripeRedirect) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-fiat-redirect flex flex-col gap-3 py-2", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "You'll be redirected to Stripe to complete your payment securely." }), (0, jsx_runtime_1.jsxs)("button", { className: (0, cn_1.cn)("anyspend-fiat-redirect-btn flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all active:scale-[0.98]", "bg-blue-600 hover:bg-blue-700"), style: themeColor ? { backgroundColor: themeColor } : undefined, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Lock, { className: "h-3.5 w-3.5" }), "Pay with Card"] }), (0, jsx_runtime_1.jsxs)("p", { className: "anyspend-fiat-secured flex items-center justify-center gap-1 text-xs text-gray-400", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Lock, { className: "h-3 w-3" }), "Secured by Stripe"] })] }));
-    }
-    // Same-token without redirect support
-    if (isSameAsOnrampSource) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-fiat-unavailable py-4 text-center", classes?.fiatPanel), children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Card payments are not available for this token configuration." }) }));
-    }
     // Creating order / waiting for PaymentIntent
     if (hasStripeWeb2 && (isCreatingOrder || !stripePaymentIntentId)) {
         return ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-fiat-initializing flex flex-col items-center gap-3 py-6", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), (0, jsx_runtime_1.jsx)(react_2.TextShimmer, { duration: 1.5, className: "text-sm", children: "Initializing secure payment..." })] }));

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/cjs/global-account/react/components/ui/dialog.js

@@ -53,7 +53,7 @@ exports.DialogOverlay = DialogOverlay;
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef(({ className, children, hideCloseButton = true, closeBtnClassName, ...props }, ref) => {
     const container = typeof window !== "undefined" ? document.getElementById("b3-root") : null;
-    return ((0, jsx_runtime_1.jsxs)(DialogPortal, { container: container, children: [(0, jsx_runtime_1.jsx)(DialogOverlay, {}), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border shadow-lg !outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-500", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", "[perspective:1200px] [transform-style:preserve-3d] sm:rounded-xl", "transition-all ease-out", className), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "modal-inner-content mb-[23px] flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)]", children: [children, !hideCloseButton && ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { className: (0, utils_1.cn)("modal-close-button data-[state=open]:bg-b3-react-background data-[state=open]:text-b3-react-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400", closeBtnClassName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "b3-modal-ga-branding absolute bottom-[10px] left-0 right-0 flex items-center justify-center gap-1.5 pt-[10px]", children: [(0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-semibold text-xs uppercase leading-none tracking-[0.72px] text-[#0B57C2]", children: "Global Account" })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(DialogPortal, { container: container, children: [(0, jsx_runtime_1.jsx)(DialogOverlay, {}), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border shadow-lg !outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-500", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", "[perspective:1200px] [transform-style:preserve-3d] sm:rounded-xl", "transition-all ease-out", className), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "modal-inner-content mb-[23px] flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)] dark:border-gray-700 dark:bg-gray-900", children: [children, !hideCloseButton && ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { className: (0, utils_1.cn)("modal-close-button data-[state=open]:bg-b3-react-background data-[state=open]:text-b3-react-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400", closeBtnClassName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "b3-modal-ga-branding absolute bottom-[10px] left-0 right-0 flex items-center justify-center gap-1.5 pt-[10px]", children: [(0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-semibold text-xs uppercase leading-none tracking-[0.72px] text-[#0B57C2]", children: "Global Account" })] })] })] }));
 });
 exports.DialogContent = DialogContent;
 DialogContent.displayName = DialogPrimitive.Content.displayName;

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/CryptoCheckoutPanel.js

@@ -166,7 +166,7 @@ export function CryptoCheckoutPanel({ recipientAddress, destinationTokenAddress,
         },
     });
     const isWaitingForExecution = !!orderId && oat?.data?.order.status !== "executed";
-    const handlePay = useCallback(() => {
+    const handlePay = useCallback(async () => {
         if (!selectedSrcToken || !walletAddress)
             return;
         depositSentRef.current = false;

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

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions, useStripeClientSecret } from "../../../../anyspend/react/index.js";
-import { USDC_BASE } from "../../../../anyspend/constants/index.js";
 import { cn } from "../../../../shared/utils/cn.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
 import { getStripePromise } from "../../../../shared/utils/payment.utils.js";
@@ -10,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(() => {
@@ -18,12 +17,6 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
         return formatTokenAmount(BigInt(totalAmount), decimals);
     }, [totalAmount, tokenData]);
     const { geoData, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeo, } = useGeoOnrampOptions(formattedAmount);
-    // Detect if destination token is the same as the onramp source (USDC on Base)
-    // In this case, onramp order creation would fail with "Cannot swap same token on same chain"
-    const isSameAsOnrampSource = useMemo(() => {
-        return (destinationTokenChainId === USDC_BASE.chainId &&
-            destinationTokenAddress.toLowerCase() === USDC_BASE.address.toLowerCase());
-    }, [destinationTokenAddress, destinationTokenChainId]);
     // Order state
     const [orderId, setOrderId] = useState(null);
     const [stripePaymentIntentId, setStripePaymentIntentId] = useState(null);
@@ -47,11 +40,9 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
         },
     });
     // Auto-create onramp order when Stripe Web2 is supported and all data is ready
-    // Skip auto-creation when destination is same as source (USDC on Base)
     useEffect(() => {
         if (!isLoadingGeo &&
             stripeWeb2Support?.isSupport &&
-            !isSameAsOnrampSource &&
             !orderCreatedRef.current &&
             !orderId &&
             !isCreatingOrder &&
@@ -82,12 +73,12 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
                     redirectUrl: window.location.origin,
                 },
                 expectedDstAmount: totalAmount,
+                callbackMetadata,
             });
         }
     }, [
         isLoadingGeo,
         stripeWeb2Support,
-        isSameAsOnrampSource,
         orderId,
         isCreatingOrder,
         orderError,
@@ -98,6 +89,7 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
         formattedAmount,
         totalAmount,
         geoData,
+        callbackMetadata,
         createOrder,
     ]);
     // Loading geo/stripe support check
@@ -117,14 +109,6 @@ export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, d
                         orderCreatedRef.current = false;
                     }, className: "anyspend-fiat-retry text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400", children: "Try again" })] }));
     }
-    // Same-token fallback: USDC on Base uses Stripe redirect instead of embedded
-    if (isSameAsOnrampSource && hasStripeRedirect) {
-        return (_jsxs("div", { className: cn("anyspend-fiat-redirect flex flex-col gap-3 py-2", classes?.fiatPanel), children: [_jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "You'll be redirected to Stripe to complete your payment securely." }), _jsxs("button", { className: cn("anyspend-fiat-redirect-btn flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all active:scale-[0.98]", "bg-blue-600 hover:bg-blue-700"), style: themeColor ? { backgroundColor: themeColor } : undefined, children: [_jsx(Lock, { className: "h-3.5 w-3.5" }), "Pay with Card"] }), _jsxs("p", { className: "anyspend-fiat-secured flex items-center justify-center gap-1 text-xs text-gray-400", children: [_jsx(Lock, { className: "h-3 w-3" }), "Secured by Stripe"] })] }));
-    }
-    // Same-token without redirect support
-    if (isSameAsOnrampSource) {
-        return (_jsx("div", { className: cn("anyspend-fiat-unavailable py-4 text-center", classes?.fiatPanel), children: _jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Card payments are not available for this token configuration." }) }));
-    }
     // Creating order / waiting for PaymentIntent
     if (hasStripeWeb2 && (isCreatingOrder || !stripePaymentIntentId)) {
         return (_jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, ease: "easeOut" }, className: cn("anyspend-fiat-initializing flex flex-col items-center gap-3 py-6", classes?.fiatPanel), children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), _jsx(TextShimmer, { duration: 1.5, className: "text-sm", children: "Initializing secure payment..." })] }));

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/esm/global-account/react/components/ui/dialog.js

@@ -12,7 +12,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(D
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef(({ className, children, hideCloseButton = true, closeBtnClassName, ...props }, ref) => {
     const container = typeof window !== "undefined" ? document.getElementById("b3-root") : null;
-    return (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border shadow-lg !outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-500", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", "[perspective:1200px] [transform-style:preserve-3d] sm:rounded-xl", "transition-all ease-out", className), ...props, children: [_jsxs("div", { className: "modal-inner-content mb-[23px] flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)]", children: [children, !hideCloseButton && (_jsxs(DialogPrimitive.Close, { className: cn("modal-close-button data-[state=open]:bg-b3-react-background data-[state=open]:text-b3-react-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400", closeBtnClassName), children: [_jsx(X, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] }), _jsxs("div", { className: "b3-modal-ga-branding absolute bottom-[10px] left-0 right-0 flex items-center justify-center gap-1.5 pt-[10px]", children: [_jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-4 w-4" }), _jsx("span", { className: "font-neue-montreal-semibold text-xs uppercase leading-none tracking-[0.72px] text-[#0B57C2]", children: "Global Account" })] })] })] }));
+    return (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border shadow-lg !outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-500", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", "[perspective:1200px] [transform-style:preserve-3d] sm:rounded-xl", "transition-all ease-out", className), ...props, children: [_jsxs("div", { className: "modal-inner-content mb-[23px] flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)] dark:border-gray-700 dark:bg-gray-900", children: [children, !hideCloseButton && (_jsxs(DialogPrimitive.Close, { className: cn("modal-close-button data-[state=open]:bg-b3-react-background data-[state=open]:text-b3-react-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400", closeBtnClassName), children: [_jsx(X, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] }), _jsxs("div", { className: "b3-modal-ga-branding absolute bottom-[10px] left-0 right-0 flex items-center justify-center gap-1.5 pt-[10px]", children: [_jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-4 w-4" }), _jsx("span", { className: "font-neue-montreal-semibold text-xs uppercase leading-none tracking-[0.72px] text-[#0B57C2]", children: "Global Account" })] })] })] }));
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));

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.2",
+  "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/CryptoCheckoutPanel.tsx

@@ -228,7 +228,7 @@ export function CryptoCheckoutPanel({
 
   const isWaitingForExecution = !!orderId && oat?.data?.order.status !== "executed";
 
-  const handlePay = useCallback(() => {
+  const handlePay = useCallback(async () => {
     if (!selectedSrcToken || !walletAddress) return;
 
     depositSentRef.current = false;

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

@@ -1,7 +1,6 @@
 "use client";
 
 import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions, useStripeClientSecret } from "@b3dotfun/sdk/anyspend/react";
-import { USDC_BASE } from "@b3dotfun/sdk/anyspend/constants";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { getStripePromise } from "@b3dotfun/sdk/shared/utils/payment.utils";
@@ -21,6 +20,7 @@ interface FiatCheckoutPanelProps {
   themeColor?: string;
   onSuccess?: (result: { txHash?: string; orderId?: string }) => void;
   onError?: (error: Error) => void;
+  callbackMetadata?: Record<string, unknown>;
   classes?: AnySpendCheckoutClasses;
 }
 
@@ -32,6 +32,7 @@ export function FiatCheckoutPanel({
   themeColor,
   onSuccess,
   onError,
+  callbackMetadata,
   classes,
 }: FiatCheckoutPanelProps) {
   const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
@@ -49,15 +50,6 @@ export function FiatCheckoutPanel({
     isLoading: isLoadingGeo,
   } = useGeoOnrampOptions(formattedAmount);
 
-  // Detect if destination token is the same as the onramp source (USDC on Base)
-  // In this case, onramp order creation would fail with "Cannot swap same token on same chain"
-  const isSameAsOnrampSource = useMemo(() => {
-    return (
-      destinationTokenChainId === USDC_BASE.chainId &&
-      destinationTokenAddress.toLowerCase() === USDC_BASE.address.toLowerCase()
-    );
-  }, [destinationTokenAddress, destinationTokenChainId]);
-
   // Order state
   const [orderId, setOrderId] = useState<string | null>(null);
   const [stripePaymentIntentId, setStripePaymentIntentId] = useState<string | null>(null);
@@ -82,12 +74,10 @@ export function FiatCheckoutPanel({
   });
 
   // Auto-create onramp order when Stripe Web2 is supported and all data is ready
-  // Skip auto-creation when destination is same as source (USDC on Base)
   useEffect(() => {
     if (
       !isLoadingGeo &&
       stripeWeb2Support?.isSupport &&
-      !isSameAsOnrampSource &&
       !orderCreatedRef.current &&
       !orderId &&
       !isCreatingOrder &&
@@ -121,12 +111,12 @@ export function FiatCheckoutPanel({
           redirectUrl: window.location.origin,
         },
         expectedDstAmount: totalAmount,
+        callbackMetadata,
       });
     }
   }, [
     isLoadingGeo,
     stripeWeb2Support,
-    isSameAsOnrampSource,
     orderId,
     isCreatingOrder,
     orderError,
@@ -137,6 +127,7 @@ export function FiatCheckoutPanel({
     formattedAmount,
     totalAmount,
     geoData,
+    callbackMetadata,
     createOrder,
   ]);
 
@@ -199,42 +190,6 @@ export function FiatCheckoutPanel({
     );
   }
 
-  // Same-token fallback: USDC on Base uses Stripe redirect instead of embedded
-  if (isSameAsOnrampSource && hasStripeRedirect) {
-    return (
-      <div className={cn("anyspend-fiat-redirect flex flex-col gap-3 py-2", classes?.fiatPanel)}>
-        <p className="text-sm text-gray-600 dark:text-gray-400">
-          You'll be redirected to Stripe to complete your payment securely.
-        </p>
-        <button
-          className={cn(
-            "anyspend-fiat-redirect-btn flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all active:scale-[0.98]",
-            "bg-blue-600 hover:bg-blue-700",
-          )}
-          style={themeColor ? { backgroundColor: themeColor } : undefined}
-        >
-          <Lock className="h-3.5 w-3.5" />
-          Pay with Card
-        </button>
-        <p className="anyspend-fiat-secured flex items-center justify-center gap-1 text-xs text-gray-400">
-          <Lock className="h-3 w-3" />
-          Secured by Stripe
-        </p>
-      </div>
-    );
-  }
-
-  // Same-token without redirect support
-  if (isSameAsOnrampSource) {
-    return (
-      <div className={cn("anyspend-fiat-unavailable py-4 text-center", classes?.fiatPanel)}>
-        <p className="text-sm text-gray-500 dark:text-gray-400">
-          Card payments are not available for this token configuration.
-        </p>
-      </div>
-    );
-  }
-
   // Creating order / waiting for PaymentIntent
   if (hasStripeWeb2 && (isCreatingOrder || !stripePaymentIntentId)) {
     return (

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) {

package/src/global-account/react/components/ui/dialog.tsx

@@ -60,7 +60,7 @@ const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.
             )}
             {...props}
           >
-            <div className="modal-inner-content mb-[23px] flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)]">
+            <div className="modal-inner-content mb-[23px] flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)] dark:border-gray-700 dark:bg-gray-900">
               {children}
               {!hideCloseButton && (
                 <DialogPrimitive.Close