@b3dotfun/sdk 0.0.87-alpha.0 → 0.0.87-alpha.1

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

@@ -20,6 +20,7 @@ export declare enum PanelView {
 export declare function AnySpend(props: {
     mode?: "page" | "modal";
     defaultActiveTab?: "crypto" | "fiat";
+    sourceChainId?: number;
     destinationTokenAddress?: string;
     destinationTokenChainId?: number;
     recipientAddress?: string;
@@ -34,4 +35,8 @@ export declare function AnySpend(props: {
     }) => void;
     onSuccess?: (txHash?: string) => void;
     customUsdInputValues?: string[];
+    hideHeader?: boolean;
+    hideBottomNavigation?: boolean;
+    /** When true, disables URL parameter management for swap configuration */
+    disableUrlParamManagement?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -57,7 +57,7 @@ function AnySpend(props) {
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
     return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendInner, { ...props }) }));
 }
-function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, }) {
+function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, }) {
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
     const { partnerId } = (0, react_2.useB3)();
@@ -97,7 +97,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // const [newRecipientAddress, setNewRecipientAddress] = useState("");
     // const recipientInputRef = useRef<HTMLInputElement>(null);
     // Get initial chain IDs from URL or defaults
-    const initialSrcChainId = parseInt(searchParams.get("fromChainId") || "0") || chains_1.mainnet.id;
+    const initialSrcChainId = sourceChainId || parseInt(searchParams.get("fromChainId") || "0") || chains_1.mainnet.id;
     const initialDstChainId = parseInt(searchParams.get("toChainId") || "0") || (isBuyMode ? destinationTokenChainId : chains_1.base.id);
     // State for source chain/token selection
     const [selectedSrcChainId, setSelectedSrcChainId] = (0, react_4.useState)(initialSrcChainId);
@@ -190,8 +190,8 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     }, [selectedDstToken.address, selectedDstToken.chainId]);
     // Load swap configuration from URL on initial render
     (0, react_4.useEffect)(() => {
-        // Skip if we've already processed the URL or if we have an order to load
-        if (initialUrlProcessed.current || loadOrder)
+        // Skip if we've already processed the URL, if we have an order to load, or if URL param management is disabled
+        if (initialUrlProcessed.current || loadOrder || disableUrlParamManagement)
             return;
         try {
             const tabParam = searchParams.get("tab");
@@ -224,7 +224,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         }
         // Mark that we've processed the initial URL
         initialUrlProcessed.current = true;
-    }, [searchParams, loadOrder]);
+    }, [searchParams, loadOrder, disableUrlParamManagement]);
     // Update URL when swap configuration changes - but not on initial load
     const updateSwapParamsInURL = (0, react_4.useCallback)(() => {
         // Skip if:
@@ -235,7 +235,8 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             activePanel !== PanelView.MAIN ||
             !initialUrlProcessed.current ||
             searchParams.has("orderId") ||
-            mode === "modal")
+            mode === "modal" ||
+            disableUrlParamManagement)
             return;
         // Create a representation of the current state
         const currentState = {
@@ -295,6 +296,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         dstAmount,
         router,
         srcAmountOnRamp,
+        disableUrlParamManagement,
     ]);
     // Update URL when relevant state changes - but only after initial render
     (0, react_4.useEffect)(() => {
@@ -480,20 +482,20 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             setOrderId(orderId);
             // setNewRecipientAddress("");
             navigateToPanel(PanelView.ORDER_DETAILS, "forward");
-            // Debug: Check payment method before setting URL
-            console.log("Creating order - selectedCryptoPaymentMethod:", selectedCryptoPaymentMethod);
-            // Add orderId and payment method to URL for persistence
-            const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
-            params.set("orderId", orderId);
-            if (effectiveCryptoPaymentMethod !== CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
-                console.log("Setting cryptoPaymentMethod in URL:", effectiveCryptoPaymentMethod);
-                params.set("cryptoPaymentMethod", effectiveCryptoPaymentMethod);
-            }
-            else {
-                console.log("Payment method is NONE, not setting in URL");
+            if (!disableUrlParamManagement) {
+                // Debug: Check payment method before setting URL
+                console.log("Creating order - selectedCryptoPaymentMethod:", selectedCryptoPaymentMethod);
+                // Add orderId and payment method to URL for persistence
+                const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
+                params.set("orderId", orderId);
+                if (effectiveCryptoPaymentMethod !== CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
+                    params.set("cryptoPaymentMethod", effectiveCryptoPaymentMethod);
+                }
+                else {
+                    console.log("Payment method is NONE, not setting in URL");
+                }
+                router.push(`${window.location.pathname}?${params.toString()}`);
             }
-            console.log("Final URL params:", params.toString());
-            router.push(`${window.location.pathname}?${params.toString()}`);
         },
         onError: error => {
             console.error(error);
@@ -506,11 +508,13 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             const orderId = data.data.id;
             setOrderId(orderId);
             navigateToPanel(PanelView.ORDER_DETAILS, "forward");
-            // Add orderId and payment method to URL for persistence
-            const params = new URLSearchParams(searchParams.toString());
-            params.set("orderId", orderId);
-            params.set("paymentMethod", "fiat");
-            router.push(`${window.location.pathname}?${params.toString()}`);
+            if (!disableUrlParamManagement) {
+                // Add orderId and payment method to URL for persistence
+                const params = new URLSearchParams(searchParams.toString());
+                params.set("orderId", orderId);
+                params.set("paymentMethod", "fiat");
+                router.push(`${window.location.pathname}?${params.toString()}`);
+            }
         },
         onError: error => {
             console.error(error);
@@ -638,11 +642,13 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             type: "anySpendOrderHistory",
             showBackButton: false,
         });
-        // Remove orderId and paymentMethod from URL when going back to history
-        const params = new URLSearchParams(searchParams.toString());
-        params.delete("orderId");
-        params.delete("paymentMethod");
-        router.push(`${window.location.pathname}?${params.toString()}`);
+        if (!disableUrlParamManagement) {
+            // Remove orderId and paymentMethod from URL when going back to history
+            const params = new URLSearchParams(searchParams.toString());
+            params.delete("orderId");
+            params.delete("paymentMethod");
+            router.push(`${window.location.pathname}?${params.toString()}`);
+        }
     };
     // Handle crypto swap creation
     const handleCryptoSwap = async (method) => {
@@ -751,22 +757,24 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // const setDynamicModalContentType = useModalStore(state => state.setB3ModalContentType);
     // Update useEffect for URL parameter to not override loadOrder
     (0, react_4.useEffect)(() => {
-        if (loadOrder)
-            return; // Skip if we have a loadOrder
+        if (loadOrder || disableUrlParamManagement)
+            return; // Skip if we have a loadOrder or URL param management is disabled
         const orderIdParam = searchParams.get("orderId");
         if (orderIdParam) {
             setOrderId(orderIdParam);
             setActivePanel(PanelView.ORDER_DETAILS);
         }
-    }, [searchParams, loadOrder]);
+    }, [searchParams, loadOrder, disableUrlParamManagement]);
     const onSelectOrder = (selectedOrderId) => {
         setOrderId(selectedOrderId);
         navigateToPanel(PanelView.ORDER_DETAILS, "forward");
-        // Update URL with the new orderId and preserve existing parameters
-        const params = new URLSearchParams(searchParams.toString());
-        params.set("orderId", selectedOrderId);
-        // Keep existing paymentMethod if present
-        router.push(`${window.location.pathname}?${params.toString()}`);
+        if (!disableUrlParamManagement) {
+            // Update URL with the new orderId and preserve existing parameters
+            const params = new URLSearchParams(searchParams.toString());
+            params.set("orderId", selectedOrderId);
+            // Keep existing paymentMethod if present
+            router.push(`${window.location.pathname}?${params.toString()}`);
+        }
     };
     // Save custom recipients to local storage when they change
     (0, react_4.useEffect)(() => {
@@ -818,7 +826,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                     // Reset payment methods when going back
                     resetPaymentMethods();
                 } })) }) }));
-    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 && ((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: "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 => {
                             setActiveTab(tab);
                             // Reset payment methods when switching tabs
                             resetPaymentMethods();
@@ -873,21 +881,23 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                                 type: "anySpend",
                             });
                         }
-                    }, children: mode !== "page" && (0, jsx_runtime_1.jsx)(BottomNavigation_1.default, {}) }) })] }));
+                    }, children: mode !== "page" && !hideBottomNavigation && (0, jsx_runtime_1.jsx)(BottomNavigation_1.default, {}) }) })] }));
     const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: effectiveRecipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             navigateToPanel(PanelView.ORDER_DETAILS, "forward");
-            // Add orderId and payment method to URL for persistence
-            const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
-            params.set("orderId", orderId);
-            // For fiat payments, the payment method is always fiat (but we use the active tab context)
-            if (activeTab === "fiat") {
-                params.set("paymentMethod", "fiat");
-            }
-            else if (selectedCryptoPaymentMethod !== CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
-                params.set("paymentMethod", selectedCryptoPaymentMethod);
+            if (!disableUrlParamManagement) {
+                // Add orderId and payment method to URL for persistence
+                const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
+                params.set("orderId", orderId);
+                // For fiat payments, the payment method is always fiat (but we use the active tab context)
+                if (activeTab === "fiat") {
+                    params.set("paymentMethod", "fiat");
+                }
+                else if (selectedCryptoPaymentMethod !== CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
+                    params.set("paymentMethod", selectedCryptoPaymentMethod);
+                }
+                router.push(`${window.location.pathname}?${params.toString()}`);
             }
-            router.push(`${window.location.pathname}?${params.toString()}`);
         }, onBack: navigateBack, recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWalletImage }));
     const recipientSelectionView = ((0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { initialValue: effectiveRecipientAddress || "", onBack: navigateBack, onConfirm: address => {
             // User manually selected a recipient

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

@@ -26,7 +26,7 @@ export interface AnySpendCustomExactInProps {
     customUsdInputValues?: string[];
     preferEoa?: boolean;
     customExactInConfig?: CustomExactInConfig;
-    orderType?: "hype_duel" | "custom_exact_in";
+    orderType?: "hype_duel" | "custom_exact_in" | "swap";
     minDestinationAmount?: number;
     header?: ({ anyspendPrice, isLoadingAnyspendPrice, }: {
         anyspendPrice: GetQuoteResponse | undefined;

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

@@ -41,7 +41,6 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         paymentType,
         recipientAddress,
         loadOrder,
-        isDepositMode: true,
         onTransactionSuccess: onSuccess,
         sourceTokenAddress,
         sourceTokenChainId,
@@ -182,7 +181,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         }
     };
     const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : ((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: actionLabel }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
-    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), 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" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
+    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), 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" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
                                 setIsSrcInputDirty(false);
                                 setSrcAmount(value);
                             }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL) }))] }) }), (0, jsx_runtime_1.jsx)(react_2.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_1.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] }) }) }), mainFooter ? mainFooter : null] }));

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

@@ -0,0 +1,122 @@
+import { components } from "../../../anyspend/types/api";
+import { GetQuoteResponse } from "../../../anyspend/types/api_req_res";
+export interface DepositContractConfig {
+    /** Custom function ABI JSON string */
+    functionAbi: string;
+    /** The function name to call */
+    functionName: string;
+    /** Custom function arguments. Use "{{amount_out}}" for the deposit amount placeholder */
+    functionArgs: string[];
+    /** The contract address to deposit to */
+    to: string;
+    /** Optional spender address if different from contract address */
+    spenderAddress?: string;
+    /** Custom action label */
+    action?: string;
+}
+export interface ChainConfig {
+    /** Chain ID */
+    id: number;
+    /** Display name */
+    name: string;
+    /** Optional icon URL */
+    iconUrl?: string;
+}
+export interface AnySpendDepositProps {
+    /** Order ID to load an existing order */
+    loadOrder?: string;
+    /** Display mode */
+    mode?: "modal" | "page";
+    /** The recipient address for the deposit */
+    recipientAddress: string;
+    /** Payment type - crypto or fiat. If not set, shows chain selection first */
+    paymentType?: "crypto" | "fiat";
+    /** Source token address to pre-select */
+    sourceTokenAddress?: string;
+    /** Source chain ID to pre-select. If not provided, shows chain selection */
+    sourceTokenChainId?: number;
+    /** The destination token to receive */
+    destinationToken: components["schemas"]["Token"];
+    /** The destination chain ID */
+    destinationChainId: number;
+    /** Callback when deposit succeeds */
+    onSuccess?: (amount: string) => void;
+    /** Callback for opening a custom modal (e.g., for special token handling) */
+    onOpenCustomModal?: () => void;
+    /** Custom footer content */
+    mainFooter?: React.ReactNode;
+    /** Called when a token is selected. Call event.preventDefault() to prevent default behavior */
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
+    /** Custom USD input value presets for fiat payment */
+    customUsdInputValues?: string[];
+    /** Whether to prefer using connected EOA wallet */
+    preferEoa?: boolean;
+    /** Minimum destination amount required */
+    minDestinationAmount?: number;
+    /** Custom header component */
+    header?: ({ anyspendPrice, isLoadingAnyspendPrice, }: {
+        anyspendPrice: GetQuoteResponse | undefined;
+        isLoadingAnyspendPrice: boolean;
+    }) => React.JSX.Element;
+    /** Order type for the deposit */
+    orderType?: "hype_duel" | "custom_exact_in" | "swap";
+    /** Custom action label displayed on buttons */
+    actionLabel?: string;
+    /** Configuration for depositing to a custom contract.
+     * If provided, creates a custom_exact_in order that calls the contract.
+     * If not provided, creates a simple hype_duel order for direct deposits.
+     */
+    depositContractConfig?: DepositContractConfig;
+    /** Whether to show chain selection step. Defaults to true if sourceTokenChainId is not provided */
+    showChainSelection?: boolean;
+    /** Custom list of supported chains. If not provided, uses default chains */
+    supportedChains?: ChainConfig[];
+    /** Minimum pool size for filtering tokens (default: 1,000,000) */
+    minPoolSize?: number;
+    /** Custom title for chain selection step */
+    chainSelectionTitle?: string;
+    /** Custom description for chain selection step */
+    chainSelectionDescription?: string;
+    /** Number of top chains to show (default: 3) */
+    topChainsCount?: number;
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+}
+/**
+ * A flexible deposit component that wraps AnySpendCustomExactIn with optional chain selection.
+ *
+ * @example
+ * // Simple deposit with chain selection
+ * <AnySpendDeposit
+ *   recipientAddress={userAddress}
+ *   destinationToken={myToken}
+ *   destinationChainId={base.id}
+ *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
+ * />
+ *
+ * @example
+ * // Skip chain selection by providing sourceTokenChainId
+ * <AnySpendDeposit
+ *   recipientAddress={userAddress}
+ *   destinationToken={myToken}
+ *   destinationChainId={base.id}
+ *   sourceTokenChainId={base.id}
+ *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
+ * />
+ *
+ * @example
+ * // Deposit with custom contract
+ * <AnySpendDeposit
+ *   recipientAddress={userAddress}
+ *   destinationToken={myToken}
+ *   destinationChainId={base.id}
+ *   depositContractConfig={{
+ *     contractAddress: "0x...",
+ *     functionName: "depositFor",
+ *   }}
+ *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
+ * />
+ */
+export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains, minPoolSize, topChainsCount, onClose, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,190 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnySpendDeposit = AnySpendDeposit;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../anyspend");
+const react_1 = require("../../../global-account/react");
+const cn_1 = require("../../../shared/utils/cn");
+const react_2 = require("@web3icons/react");
+const lucide_react_1 = require("lucide-react");
+const react_3 = require("react");
+const AnySpend_1 = require("./AnySpend");
+const AnySpendCustomExactIn_1 = require("./AnySpendCustomExactIn");
+const WarningText_1 = require("./common/WarningText");
+const CreditCardIcon_1 = require("./icons/CreditCardIcon");
+const QrCodeIcon_1 = require("./icons/QrCodeIcon");
+const QRDeposit_1 = require("./QRDeposit");
+// Default supported chains
+const DEFAULT_SUPPORTED_CHAINS = [
+    { id: 8453, name: "Base" },
+    { id: 1, name: "Ethereum" },
+    { id: 42161, name: "Arbitrum" },
+    { id: 10, name: "Optimism" },
+    { id: 137, name: "Polygon" },
+    { id: 56, name: "BNB Chain" },
+];
+// Minimum pool size to filter out low liquidity tokens
+const DEFAULT_MIN_POOL_SIZE = 1000000;
+function formatUsd(value) {
+    return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+        minimumFractionDigits: 0,
+        maximumFractionDigits: value >= 100 ? 0 : 2,
+    }).format(value);
+}
+function formatDecimal(value) {
+    return new Intl.NumberFormat("en-US", {
+        style: "decimal",
+        minimumFractionDigits: 0,
+        maximumFractionDigits: value >= 100 ? 0 : 2,
+    }).format(value);
+}
+// Chain icon component
+function ChainIcon({ chainId, className }) {
+    const iconProps = {
+        variant: "branded",
+        className: (0, cn_1.cn)("anyspend-deposit-chain-icon", className),
+    };
+    switch (chainId) {
+        case 1:
+            return (0, jsx_runtime_1.jsx)(react_2.NetworkEthereum, { ...iconProps });
+        case 8453:
+            return (0, jsx_runtime_1.jsx)(react_2.NetworkBase, { ...iconProps });
+        case 137:
+            return (0, jsx_runtime_1.jsx)(react_2.NetworkPolygonPos, { ...iconProps });
+        case 42161:
+            return (0, jsx_runtime_1.jsx)(react_2.NetworkArbitrumOne, { ...iconProps });
+        case 10:
+            return (0, jsx_runtime_1.jsx)(react_2.NetworkOptimism, { ...iconProps });
+        case 56:
+            return (0, jsx_runtime_1.jsx)(react_2.NetworkBinanceSmartChain, { ...iconProps });
+        default:
+            return null;
+    }
+}
+/**
+ * A flexible deposit component that wraps AnySpendCustomExactIn with optional chain selection.
+ *
+ * @example
+ * // Simple deposit with chain selection
+ * <AnySpendDeposit
+ *   recipientAddress={userAddress}
+ *   destinationToken={myToken}
+ *   destinationChainId={base.id}
+ *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
+ * />
+ *
+ * @example
+ * // Skip chain selection by providing sourceTokenChainId
+ * <AnySpendDeposit
+ *   recipientAddress={userAddress}
+ *   destinationToken={myToken}
+ *   destinationChainId={base.id}
+ *   sourceTokenChainId={base.id}
+ *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
+ * />
+ *
+ * @example
+ * // Deposit with custom contract
+ * <AnySpendDeposit
+ *   recipientAddress={userAddress}
+ *   destinationToken={myToken}
+ *   destinationChainId={base.id}
+ *   depositContractConfig={{
+ *     contractAddress: "0x...",
+ *     functionName: "depositFor",
+ *   }}
+ *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
+ * />
+ */
+function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains = DEFAULT_SUPPORTED_CHAINS, minPoolSize = DEFAULT_MIN_POOL_SIZE, topChainsCount = 3, onClose, }) {
+    const { connectedEOAWallet } = (0, react_1.useAccountWallet)();
+    const eoaAddress = connectedEOAWallet?.getAccount()?.address;
+    // Determine if we should show chain selection
+    const shouldShowChainSelection = showChainSelection ?? (!initialSourceChainId && !initialPaymentType);
+    const [step, setStep] = (0, react_3.useState)(shouldShowChainSelection ? "select-chain" : "deposit");
+    const [selectedChainId, setSelectedChainId] = (0, react_3.useState)(initialSourceChainId);
+    const [paymentType, setPaymentType] = (0, react_3.useState)(initialPaymentType ?? "crypto");
+    // Fetch balances for EOA wallet
+    const { data: balanceData, isLoading: isBalanceLoading } = (0, react_1.useSimBalance)(shouldShowChainSelection ? eoaAddress : undefined, supportedChains.map(c => c.id));
+    // Group balances by chain and calculate total USD value per chain
+    const chainBalances = (0, react_3.useMemo)(() => {
+        if (!balanceData?.balances)
+            return {};
+        const filteredBalances = balanceData.balances.filter(token => token.address === "native" || (token.pool_size && token.pool_size > minPoolSize));
+        return filteredBalances.reduce((acc, token) => {
+            const chainId = token.chain_id;
+            if (!acc[chainId]) {
+                acc[chainId] = {
+                    chainId,
+                    chainName: token.chain,
+                    totalUsdValue: 0,
+                    tokenCount: 0,
+                };
+            }
+            acc[chainId].totalUsdValue += token.value_usd || 0;
+            acc[chainId].tokenCount += 1;
+            return acc;
+        }, {});
+    }, [balanceData, minPoolSize]);
+    // Sort chains by USD value (highest first)
+    const sortedChains = (0, react_3.useMemo)(() => {
+        return supportedChains
+            .map(chain => ({
+            ...chain,
+            balance: chainBalances[chain.id]?.totalUsdValue || 0,
+            tokenCount: chainBalances[chain.id]?.tokenCount || 0,
+        }))
+            .sort((a, b) => b.balance - a.balance);
+    }, [supportedChains, chainBalances]);
+    // Get top chains with balance
+    const topChainsWithBalance = (0, react_3.useMemo)(() => {
+        return sortedChains.filter(chain => chain.balance > 0).slice(0, topChainsCount);
+    }, [sortedChains, topChainsCount]);
+    // Calculate total balance across all chains
+    const totalBalance = (0, react_3.useMemo)(() => {
+        return Object.values(chainBalances).reduce((sum, chain) => sum + chain.totalUsdValue, 0);
+    }, [chainBalances]);
+    if (!recipientAddress)
+        return null;
+    const tokenSymbol = destinationToken.symbol ?? "TOKEN";
+    // Determine order type based on config
+    const effectiveOrderType = orderType ?? (depositContractConfig ? "custom_exact_in" : "swap");
+    // Default header if not provided
+    const defaultHeader = () => ((0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-header mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "anyspend-deposit-title text-as-primary text-xl font-bold", children: paymentType === "crypto" ? `Deposit ${tokenSymbol}` : "Fund with Fiat" }) }) }));
+    const handleSelectChain = (chainId) => {
+        setSelectedChainId(chainId);
+        setPaymentType("crypto");
+        setStep("deposit");
+    };
+    const handleSelectCrypto = () => {
+        setPaymentType("crypto");
+        setSelectedChainId(undefined);
+        setStep("deposit");
+    };
+    const handleSelectFiat = () => {
+        setPaymentType("fiat");
+        setSelectedChainId(undefined);
+        setStep("deposit");
+    };
+    const handleBack = () => {
+        setStep("select-chain");
+        setSelectedChainId(undefined);
+    };
+    const handleSelectQrDeposit = () => {
+        setStep("qr-deposit");
+    };
+    // Chain selection view
+    if (step === "select-chain") {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-deposit anyspend-deposit-chain-selection font-inter bg-as-surface-primary relative mx-auto w-full max-w-[460px]", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: [onClose && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-balance-header border-secondary border-b p-5", children: [!isBalanceLoading && totalBalance > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-balance", children: [(0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-balance-label text-as-secondary text-sm", children: "Your Balance" }), (0, jsx_runtime_1.jsxs)("p", { className: "anyspend-deposit-balance-value text-as-primary text-3xl font-semibold", children: [formatDecimal(totalBalance), " ", (0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: "USD" })] })] })), isBalanceLoading && ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-balance-skeleton", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "mb-2 h-4 w-24" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-8 w-32" })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-options flex flex-col gap-2 p-6", children: [isBalanceLoading && ((0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-chains-skeleton flex flex-col gap-2", children: [...Array(topChainsCount)].map((_, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "border-border-primary flex items-center justify-between rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-6 w-6 rounded-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-4 w-32" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-3 w-20" })] })] }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-5 w-5" })] }, i))) })), topChainsWithBalance.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-chains flex flex-col gap-2", children: topChainsWithBalance.map(chain => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleSelectChain(chain.id), className: "anyspend-deposit-chain-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-chain-content", children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-chain-info", children: [(0, jsx_runtime_1.jsxs)("span", { className: "anyspend-deposit-chain-name text-as-primary flex items-center gap-1.5 font-medium", children: ["Deposit from ", chain.name, (0, jsx_runtime_1.jsx)(ChainIcon, { chainId: chain.id, className: "h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("p", { className: "anyspend-deposit-chain-balance text-as-secondary text-xs", children: [formatUsd(chain.balance), " available"] })] }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-chain-chevron text-as-secondary h-5 w-5" })] }, chain.id))) })), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-general-options flex flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectCrypto, className: "anyspend-deposit-option-button anyspend-deposit-crypto-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-option-content", children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit Crypto" }), (0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-option-description text-as-secondary text-xs", children: "Swap from any token on any chain" })] }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-divider flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-stroke h-px flex-1" }), (0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-divider-text text-as-secondary text-sm", children: "More options" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-as-stroke h-px flex-1" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectQrDeposit, className: "anyspend-deposit-option-button anyspend-deposit-qr-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-content flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(QrCodeIcon_1.QrCodeIcon, { className: "anyspend-deposit-option-icon h-10 w-10" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit with QR Code" }), (0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-option-description text-as-secondary text-xs", children: "Send tokens directly to deposit address" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectFiat, className: "anyspend-deposit-option-button anyspend-deposit-fiat-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-content flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(CreditCardIcon_1.CreditCardIcon, { className: "anyspend-deposit-option-icon h-10 w-10" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Fund with Fiat" }), (0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-option-description text-as-secondary text-xs", children: "Pay with card or bank transfer" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] })] }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationChainId, className: "mt-2" })] })] }));
+    }
+    // QR Deposit view
+    if (step === "qr-deposit") {
+        return ((0, jsx_runtime_1.jsx)(QRDeposit_1.QRDeposit, { mode: mode, recipientAddress: recipientAddress, destinationToken: destinationToken, destinationChainId: destinationChainId, depositContractConfig: depositContractConfig, onBack: handleBack, onClose: onClose ?? handleBack }));
+    }
+    // Check if destination is Hyperliquid
+    const isHyperliquidDeposit = destinationChainId === anyspend_1.HYPERLIQUID_CHAIN_ID;
+    // Deposit view
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit anyspend-deposit-form relative", children: [shouldShowChainSelection && ((0, jsx_runtime_1.jsxs)("button", { onClick: handleBack, className: "anyspend-deposit-back-button text-as-secondary hover:text-as-primary absolute left-4 top-4 z-10 flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("svg", { className: "anyspend-deposit-back-icon h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }), (0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-back-text text-sm", children: "Back" })] })), onClose && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isHyperliquidDeposit ? ((0, jsx_runtime_1.jsx)(AnySpend_1.AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationToken.address, destinationTokenChainId: destinationChainId, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true })) : ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig })) }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationChainId, className: "px-4 pb-4" })] }));
+}