@b3dotfun/sdk 0.1.2 → 0.1.5

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

@@ -1,4 +1,5 @@
 import { components } from "../../types/api";
+import type { AnySpendClasses } from "./types/classes";
 export interface RecipientOption {
     address: string;
     icon?: string;
@@ -15,7 +16,8 @@ export declare enum PanelView {
     CRYPTO_PAYMENT_METHOD = 6,
     FIAT_PAYMENT_METHOD = 7,
     POINTS_DETAIL = 8,
-    FEE_DETAIL = 9
+    FEE_DETAIL = 9,
+    DIRECT_TRANSFER_SUCCESS = 10
 }
 export declare function AnySpend(props: {
     mode?: "page" | "modal";
@@ -45,4 +47,8 @@ export declare function AnySpend(props: {
     customRecipientLabel?: string;
     /** Custom label for the return home button (overrides "Return to Home" / "Close") */
     returnHomeLabel?: string;
+    /** Custom class names for styling specific elements */
+    classes?: AnySpendClasses;
+    /** When true, allows direct transfer without swap if source and destination token/chain are the same */
+    allowDirectTransfer?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -24,6 +24,7 @@ const chains_1 = require("viem/chains");
 const useAutoSelectCryptoPaymentMethod_1 = require("../hooks/useAutoSelectCryptoPaymentMethod");
 const useConnectedWalletDisplay_1 = require("../hooks/useConnectedWalletDisplay");
 const useCryptoPaymentMethodState_1 = require("../hooks/useCryptoPaymentMethodState");
+const useDirectTransfer_1 = require("../hooks/useDirectTransfer");
 const useRecipientAddressState_1 = require("../hooks/useRecipientAddressState");
 const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
 const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
@@ -52,17 +53,20 @@ var PanelView;
     PanelView[PanelView["FIAT_PAYMENT_METHOD"] = 7] = "FIAT_PAYMENT_METHOD";
     PanelView[PanelView["POINTS_DETAIL"] = 8] = "POINTS_DETAIL";
     PanelView[PanelView["FEE_DETAIL"] = 9] = "FEE_DETAIL";
+    PanelView[PanelView["DIRECT_TRANSFER_SUCCESS"] = 10] = "DIRECT_TRANSFER_SUCCESS";
 })(PanelView || (exports.PanelView = PanelView = {}));
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
 function AnySpend(props) {
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
+    console.log("[mitch] AnySpend rendered with fingerprintConfig:", props, fingerprintConfig);
     return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendInner, { ...props }) }));
 }
-function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, returnToHomeUrl, customRecipientLabel, returnHomeLabel, }) {
+function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, allowDirectTransfer = false, }) {
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
     const { partnerId } = (0, react_2.useB3Config)();
     const setB3ModalContentType = (0, react_2.useModalStore)(state => state.setB3ModalContentType);
+    const setB3ModalOpen = (0, react_2.useModalStore)(state => state.setB3ModalOpen);
     // Determine if we're in "buy mode" based on whether destination token props are provided
     const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
     // Add refs to track URL state
@@ -76,6 +80,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const previousPanel = (0, react_4.useRef)(PanelView.MAIN);
     const [activeTab, setActiveTab] = (0, react_4.useState)(defaultActiveTab);
     const [orderId, setOrderId] = (0, react_4.useState)(loadOrder);
+    const [directTransferTxHash, setDirectTransferTxHash] = (0, react_4.useState)();
     const { orderAndTransactions: oat, getOrderAndTransactionsError } = (0, react_1.useAnyspendOrderAndTransactions)(orderId);
     !!getOrderAndTransactionsError && console.log("getOrderAndTransactionsError", getOrderAndTransactionsError);
     const [activePanel, setActivePanel] = (0, react_4.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
@@ -334,6 +339,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     //   [selectedDstChainId, newRecipientAddress, resolvedAddress]
     // );
     const { address: globalAddress, wallet: globalWallet, connectedEOAWallet } = (0, react_2.useAccountWallet)();
+    const { executeDirectTransfer, isTransferring: isSwitchingOrExecuting } = (0, useDirectTransfer_1.useDirectTransfer)();
     const globalWalletImage = (0, useAccountWallet_1.useAccountWalletImage)();
     // Get wallet address based on selected payment method
     const { walletAddress } = (0, useConnectedWalletDisplay_1.useConnectedWalletDisplay)(effectiveCryptoPaymentMethod);
@@ -533,19 +539,26 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             selectedSrcChainId === selectedDstChainId &&
             selectedSrcToken.address.toLowerCase() === selectedDstToken.address.toLowerCase());
     }, [activeTab, selectedSrcChainId, selectedDstChainId, selectedSrcToken.address, selectedDstToken.address]);
+    // Check if this is a direct transfer (same chain/token with allowDirectTransfer enabled)
+    const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
     // Determine button state and text
     const btnInfo = (0, react_4.useMemo)(() => {
         // For fiat tab, check srcAmountOnRamp; for crypto tab, check activeInputAmountInWei
         const hasAmount = activeTab === "fiat" ? srcAmountOnRamp && parseFloat(srcAmountOnRamp) > 0 : activeInputAmountInWei !== "0";
         if (!hasAmount)
             return { text: "Enter an amount", disable: true, error: false, loading: false };
-        if (isSameChainSameToken)
+        if (isSameChainSameToken && !allowDirectTransfer)
             return { text: "Select a different token or chain", disable: true, error: false, loading: false };
-        if (isLoadingAnyspendQuote)
+        if (isLoadingAnyspendQuote && !isSameChainSameToken)
             return { text: "Loading quote...", disable: true, error: false, loading: true };
-        if (isCreatingOrder || isCreatingOnrampOrder)
-            return { text: "Creating order...", disable: true, error: false, loading: true };
-        if (!anyspendQuote || !anyspendQuote.success)
+        if (isCreatingOrder || isCreatingOnrampOrder || isSwitchingOrExecuting)
+            return {
+                text: isSwitchingOrExecuting ? "Transferring..." : "Creating order...",
+                disable: true,
+                error: false,
+                loading: true,
+            };
+        if ((!anyspendQuote || !anyspendQuote.success) && !(isSameChainSameToken && allowDirectTransfer))
             return { text: "No quote found", disable: true, error: false, loading: false };
         if (activeTab === "fiat") {
             // For fiat: check recipient first, then payment method
@@ -570,7 +583,8 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             // If payment method selected, show appropriate action
             if (effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
                 effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET) {
-                return { text: "Swap", disable: false, error: false, loading: false };
+                const buttonText = isSameChainSameToken && allowDirectTransfer ? "Transfer" : "Swap";
+                return { text: buttonText, disable: false, error: false, loading: false };
             }
             if (effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO) {
                 return { text: "Continue to payment", disable: false, error: false, loading: false };
@@ -584,18 +598,24 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         effectiveRecipientAddress,
         isCreatingOrder,
         isCreatingOnrampOrder,
+        isSwitchingOrExecuting,
         anyspendQuote,
         activeTab,
         effectiveCryptoPaymentMethod,
         selectedFiatPaymentMethod,
         srcAmountOnRamp,
+        allowDirectTransfer,
     ]);
     // Handle main button click
     const onMainButtonClick = async () => {
         if (btnInfo.disable)
             return;
+        const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
         try {
-            (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
+            // Only require quote for non-direct transfers
+            if (!isDirectTransfer) {
+                (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
+            }
             if (activeTab === "fiat") {
                 // For fiat: check recipient first
                 if (!effectiveRecipientAddress) {
@@ -659,12 +679,29 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     // Handle crypto swap creation
     const handleCryptoSwap = async (method) => {
         try {
-            (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
+            const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
             (0, invariant_1.default)(effectiveRecipientAddress, "Recipient address is not found");
+            const srcAmountBigInt = (0, viem_1.parseUnits)(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
+            // Handle direct transfer (same chain/token) - bypass backend, transfer directly
+            if (isDirectTransfer) {
+                const txHash = await executeDirectTransfer({
+                    chainId: selectedSrcChainId,
+                    tokenAddress: selectedSrcToken.address,
+                    recipientAddress: effectiveRecipientAddress,
+                    amount: srcAmountBigInt,
+                    method,
+                });
+                if (txHash) {
+                    setDirectTransferTxHash(txHash);
+                    navigateToPanel(PanelView.DIRECT_TRANSFER_SUCCESS, "forward");
+                }
+                return;
+            }
+            // Regular swap flow - use backend
+            (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
             // Debug: Check payment method values
             console.log("handleCryptoSwap - method parameter:", method);
             console.log("handleCryptoSwap - selectedCryptoPaymentMethod state:", selectedCryptoPaymentMethod);
-            const srcAmountBigInt = (0, viem_1.parseUnits)(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
             createOrder({
                 recipientAddress: effectiveRecipientAddress,
                 orderType: "swap",
@@ -832,7 +869,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     // Reset payment methods when going back
                     resetPaymentMethods();
                 }, returnToHomeUrl: returnToHomeUrl, returnHomeLabel: returnHomeLabel, disableUrlParamManagement: disableUrlParamManagement })) }) }));
-    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: tab => {
+    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: classes?.mainContent || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && ((0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: classes?.headerLogo || "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: classes?.headerTitle || "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: tab => {
                             setActiveTab(tab);
                             // Reset payment methods when switching tabs
                             resetPaymentMethods();
@@ -846,7 +883,8 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                                         else {
                                             setActivePanel(panelIndex);
                                         }
-                                    }, _recipientAddress: effectiveRecipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)("div", { className: "z-10 -my-6 flex justify-center", children: (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary h-10 w-10 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "cursor-default", selectedDstChainId === anyspend_1.HYPERLIQUID_CHAIN_ID && "cursor-not-allowed opacity-50"), onClick: () => {
+                                    }, _recipientAddress: effectiveRecipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)("div", { className: "z-10 -my-6 flex justify-center", children: (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: classes?.swapDirectionButton ||
+                                        (0, cn_1.cn)("border-as-stroke bg-as-surface-primary h-10 w-10 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "cursor-default", selectedDstChainId === anyspend_1.HYPERLIQUID_CHAIN_ID && "cursor-not-allowed opacity-50"), onClick: () => {
                                         if (isBuyMode) {
                                             return;
                                         }
@@ -866,7 +904,11 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                                     }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) })), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, effectiveRecipientAddress: effectiveRecipientAddress, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
                                     setIsSrcInputDirty(false);
                                     setDstAmount(value);
-                                }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") }))] }), gasPriceData && !isLoadingGas && activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(GasIndicator_1.GasIndicator, { gasPrice: gasPriceData, className: "mt-2 w-full" })), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsx)(react_2.TabsPrimitive, { defaultValue: "swap", onValueChange: value => {
+                                }, anyspendQuote: isDirectTransfer ? undefined : anyspendQuote, onShowPointsDetail: isDirectTransfer ? undefined : () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: isDirectTransfer ? undefined : () => navigateToPanel(PanelView.FEE_DETAIL, "forward") }))] }), gasPriceData && !isLoadingGas && activeTab === "crypto" && !isDirectTransfer && ((0, jsx_runtime_1.jsx)(GasIndicator_1.GasIndicator, { gasPrice: gasPriceData, className: classes?.gasIndicator || "mt-2 w-full" })), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (btnInfo.error && classes?.mainButtonError) ||
+                                    (btnInfo.disable && classes?.mainButtonDisabled) ||
+                                    classes?.mainButton ||
+                                    (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: classes?.historyButton ||
+                                    "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsx)(react_2.TabsPrimitive, { defaultValue: "swap", onValueChange: value => {
                         if (value === "settings" || value === "home") {
                             setB3ModalContentType({
                                 type: "manageAccount",
@@ -918,9 +960,17 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         }, srcAmountOnRamp: srcAmountOnRamp }));
     const pointsDetailView = ((0, jsx_runtime_1.jsx)(PointsDetailPanel_1.PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: navigateBack }));
     const feeDetailView = anyspendQuote?.data?.fee ? ((0, jsx_runtime_1.jsx)(FeeDetailPanel_1.FeeDetailPanel, { fee: anyspendQuote.data.fee, transactionAmountUsd: activeTab === "crypto" ? Number(anyspendQuote.data.currencyIn?.amountUsd) : parseFloat(srcAmountOnRamp), onBack: navigateBack })) : null;
+    const directTransferSuccessView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-6 p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-brand/10 flex h-16 w-16 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle, { className: "text-as-brand h-8 w-8" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-bold", children: "Transfer Complete" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-as-secondary mt-1 text-sm", children: ["Your ", selectedSrcToken.symbol, " has been sent to ", effectiveRecipientAddress?.slice(0, 6), "...", effectiveRecipientAddress?.slice(-4), " on ", (0, anyspend_1.getChainName)(selectedSrcChainId)] })] })] }), directTransferTxHash && ((0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(selectedSrcChainId, directTransferTxHash), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand hover:text-as-brand/80 text-sm underline", children: "View transaction" })), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-2", children: returnToHomeUrl ? ((0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => {
+                        window.location.href = returnToHomeUrl;
+                    }, className: "bg-as-brand hover:bg-as-brand/90 w-full text-white", children: returnHomeLabel || "Return to Home" })) : ((0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => {
+                        onSuccess?.(directTransferTxHash);
+                        setDirectTransferTxHash(undefined);
+                        setB3ModalOpen(false);
+                    }, className: "bg-as-brand hover:bg-as-brand/90 w-full text-white", children: returnHomeLabel || "Done" })) })] }));
     // Add tabs to the main component when no order is loaded
-    return ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&
-                "bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
+    return ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: classes?.container ||
+                (0, cn_1.cn)("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&
+                    "bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
                     ? oat
                         ? PanelView.ORDER_DETAILS
                         : PanelView.LOADING
@@ -949,5 +999,6 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: fiatPaymentMethodView }, "fiat-payment-method-view"),
                     (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: pointsDetailView }, "points-detail-view"),
                     (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: feeDetailView }, "fee-detail-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: directTransferSuccessView }, "direct-transfer-success-view"),
                 ] }) }) }));
 }

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

@@ -35,9 +35,13 @@ export interface AnySpendCollectorClubPurchaseProps {
      */
     recipientAddress: string;
     /**
-     * Optional spender address (defaults to contract address)
+     * Optional spender address (defaults to shop address)
      */
     spenderAddress?: string;
+    /**
+     * Collector Club Shop contract address (defaults to Base mainnet shop)
+     */
+    ccShopAddress?: string;
     /**
      * Success callback
      */
@@ -66,4 +70,4 @@ export interface AnySpendCollectorClubPurchaseProps {
      */
     forceFiatPayment?: boolean;
 }
-export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, onSuccess, header, showRecipient, vendingMachineId, packType, forceFiatPayment, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, ccShopAddress, spenderAddress, onSuccess, header, showRecipient, vendingMachineId, packType, forceFiatPayment, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -33,8 +33,8 @@ const number_1 = require("../../../shared/utils/number");
 const react_1 = require("react");
 const viem_1 = require("viem");
 const AnySpendCustom_1 = require("./AnySpendCustom");
-// Collector Club Shop contract on Base
-const CC_SHOP_ADDRESS = "0x47366E64E4917dd4DdC04Fb9DC507c1dD2b87294";
+// Default Collector Club Shop contract on Base
+const DEFAULT_CC_SHOP_ADDRESS = "0x47366E64E4917dd4DdC04Fb9DC507c1dD2b87294";
 const BASE_CHAIN_ID = 8453;
 // ABI for buyPacksFor function only
 const BUY_PACKS_FOR_ABI = {
@@ -48,7 +48,7 @@ const BUY_PACKS_FOR_ABI = {
     stateMutability: "nonpayable",
     type: "function",
 };
-function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = constants_1.USDC_BASE, recipientAddress, spenderAddress = CC_SHOP_ADDRESS, onSuccess, header, showRecipient = true, vendingMachineId, packType, forceFiatPayment, }) {
+function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = constants_1.USDC_BASE, recipientAddress, ccShopAddress = DEFAULT_CC_SHOP_ADDRESS, spenderAddress, onSuccess, header, showRecipient = true, vendingMachineId, packType, forceFiatPayment, }) {
     // Calculate total amount needed (pricePerPack * packAmount)
     const totalAmount = (0, react_1.useMemo)(() => {
         try {
@@ -81,7 +81,7 @@ function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab =
     }, [recipientAddress, packId, packAmount]);
     // Default header if not provided
     const defaultHeader = () => ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: "Buy Collector Club Packs" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-as-secondary text-sm", children: ["Purchase ", packAmount, " pack", packAmount !== 1 ? "s" : "", " using any token"] })] }) }));
-    return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { loadOrder: loadOrder, mode: mode, activeTab: activeTab, recipientAddress: recipientAddress, spenderAddress: spenderAddress, orderType: "custom", dstChainId: BASE_CHAIN_ID, dstToken: paymentToken, dstAmount: totalAmount, contractAddress: CC_SHOP_ADDRESS, encodedData: encodedData, metadata: {
+    return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { loadOrder: loadOrder, mode: mode, activeTab: activeTab, recipientAddress: recipientAddress, spenderAddress: spenderAddress ?? ccShopAddress, orderType: "custom", dstChainId: BASE_CHAIN_ID, dstToken: paymentToken, dstAmount: totalAmount, contractAddress: ccShopAddress, encodedData: encodedData, metadata: {
             packId,
             packAmount,
             pricePerPack,

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

@@ -1,5 +1,6 @@
 import { components } from "../../../anyspend/types/api";
 import { GetQuoteResponse } from "../../../anyspend/types/api_req_res";
+import type { AnySpendCustomExactInClasses } from "./types/classes";
 type CustomExactInConfig = {
     functionAbi: string;
     functionName: string;
@@ -17,6 +18,7 @@ export interface AnySpendCustomExactInProps {
     sourceTokenChainId?: number;
     destinationToken: components["schemas"]["Token"];
     destinationChainId: number;
+    destinationTokenAmount?: string;
     onSuccess?: (amount: string) => void;
     onOpenCustomModal?: () => void;
     mainFooter?: React.ReactNode;
@@ -38,6 +40,10 @@ export interface AnySpendCustomExactInProps {
     customRecipientLabel?: string;
     /** Custom label for the return home button (overrides "Return to Home" / "Close") */
     returnHomeLabel?: string;
+    /** Custom class names for styling specific elements */
+    classes?: AnySpendCustomExactInClasses;
+    /** When true, allows direct transfer without swap if source and destination token/chain are the same */
+    allowDirectTransfer?: boolean;
 }
 export declare function AnySpendCustomExactIn(props: AnySpendCustomExactInProps): import("react/jsx-runtime").JSX.Element;
 export {};