@b3dotfun/sdk 0.1.2 → 0.1.5

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

@@ -1,16 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getChainName, getExplorerTxUrl } from "../../../anyspend/index.js";
 import { useGasPrice } from "../../../anyspend/react/index.js";
 import { normalizeAddress } from "../../../anyspend/utils/index.js";
-import { Button, ShinyButton, StyleRoot, toast, TransitionPanel, useAccountWallet, } from "../../../global-account/react/index.js";
+import { Button, ShinyButton, StyleRoot, toast, TransitionPanel, useAccountWallet, useModalStore, } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/cn.js";
 import { formatUnits } from "../../../shared/utils/number.js";
 import invariant from "invariant";
-import { ArrowDown, Loader2 } from "lucide-react";
+import { ArrowDown, CheckCircle, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useSetActiveWallet } from "thirdweb/react";
 import { B3_TOKEN } from "../../constants/index.js";
-import { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow.js";
+import { useDirectTransfer } from "../hooks/useDirectTransfer.js";
+import { generateEncodedData, PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
 import { CryptoPaySection } from "./common/CryptoPaySection.js";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
@@ -27,13 +29,14 @@ export function AnySpendCustomExactIn(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomExactInInner, { ...props }) }));
 }
-function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, customExactInConfig, orderType = "custom_exact_in", minDestinationAmount, header, returnToHomeUrl, customRecipientLabel, returnHomeLabel, }) {
+function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, customExactInConfig, destinationTokenAmount, orderType = "custom_exact_in", minDestinationAmount, header, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, allowDirectTransfer = false, }) {
     const actionLabel = customExactInConfig?.action ?? "Custom Execution";
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
     const DESTINATION_TOKEN_DETAILS = {
         SYMBOL: destinationToken.symbol ?? "TOKEN",
         LOGO_URI: destinationToken.metadata?.logoURI ?? "",
     };
-    const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, selectedDstToken, selectedDstChainId, srcAmount, setSrcAmount, dstAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, hasEnoughBalance, isBalanceLoading, anyspendQuote, isLoadingAnyspendQuote, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = useAnyspendFlow({
+    const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, selectedDstToken, selectedDstChainId, srcAmount, setSrcAmount, dstAmount, dstAmountInput, setDstAmountInput, isSrcInputDirty, setIsSrcInputDirty, tradeType, selectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, hasEnoughBalance, isBalanceLoading, anyspendQuote, isLoadingAnyspendQuote, isQuoteLoading, activeInputAmountInWei, activeOutputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = useAnyspendFlow({
         paymentType,
         recipientAddress,
         loadOrder,
@@ -45,9 +48,21 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         slippage: SLIPPAGE_PERCENT,
         disableUrlParamManagement: true,
         orderType,
+        customExactInConfig,
     });
     const { connectedEOAWallet } = useAccountWallet();
     const setActiveWallet = useSetActiveWallet();
+    const { executeDirectTransfer, isTransferring: isSwitchingOrExecuting } = useDirectTransfer();
+    // Check if source and destination are the same token on the same chain
+    const isSameChainSameToken = useMemo(() => {
+        return (paymentType === "crypto" &&
+            selectedSrcChainId === selectedDstChainId &&
+            selectedSrcToken?.address?.toLowerCase() === selectedDstToken?.address?.toLowerCase());
+    }, [paymentType, selectedSrcChainId, selectedDstChainId, selectedSrcToken?.address, selectedDstToken?.address]);
+    // Check if this is a direct transfer
+    const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
+    // State for direct transfer success
+    const [directTransferTxHash, setDirectTransferTxHash] = useState();
     // Get gas price for source chain (where the user pays from)
     const { gasPrice: gasPriceData, isLoading: isLoadingGas } = useGasPrice(selectedSrcChainId);
     const appliedPreferEoa = useRef(false);
@@ -59,6 +74,17 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             }
         }
     }, [preferEoa, connectedEOAWallet, setActiveWallet]);
+    // Prefill destination amount if provided (for EXACT_OUTPUT mode)
+    const appliedDestinationAmount = useRef(false);
+    useEffect(() => {
+        if (destinationTokenAmount && !appliedDestinationAmount.current) {
+            appliedDestinationAmount.current = true;
+            // Convert wei to human-readable format
+            const formattedAmount = formatUnits(destinationTokenAmount, destinationToken.decimals);
+            setDstAmountInput(formattedAmount);
+            setIsSrcInputDirty(false); // Switch to EXACT_OUTPUT mode
+        }
+    }, [destinationTokenAmount, destinationToken.decimals, setDstAmountInput, setIsSrcInputDirty]);
     const selectedRecipientOrDefault = selectedRecipientAddress ?? recipientAddress;
     const expectedDstAmountRaw = anyspendQuote?.data?.currencyOut?.amount ?? "0";
     const buildCustomPayload = (_recipient) => {
@@ -83,23 +109,31 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         };
     };
     const btnInfo = useMemo(() => {
-        if (activeInputAmountInWei === "0")
+        // Check for empty amount based on trade type
+        const isAmountEmpty = tradeType === "EXACT_OUTPUT" ? !dstAmountInput || dstAmountInput === "0" : activeInputAmountInWei === "0";
+        const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
+        if (isAmountEmpty)
             return { text: "Enter an amount", disable: true, error: false, loading: false };
         if (orderType === "hype_duel" && selectedSrcToken?.address?.toLowerCase() === B3_TOKEN.address.toLowerCase()) {
             return { text: "Convert to HYPE using B3", disable: false, error: false, loading: false };
         }
-        if (isLoadingAnyspendQuote)
+        if (isQuoteLoading && !isDirectTransfer)
             return { text: "Loading quote...", disable: true, error: false, loading: true };
-        if (isCreatingOrder || isCreatingOnrampOrder)
-            return { text: "Creating order...", disable: true, error: false, loading: true };
+        if (isCreatingOrder || isCreatingOnrampOrder || isSwitchingOrExecuting)
+            return {
+                text: isSwitchingOrExecuting ? "Transferring..." : "Creating order...",
+                disable: true,
+                error: false,
+                loading: true,
+            };
         if (!selectedRecipientOrDefault)
             return { text: "Select recipient", disable: false, error: false, loading: false };
-        if (!anyspendQuote || !anyspendQuote.success)
+        if ((!anyspendQuote || !anyspendQuote.success) && !isDirectTransfer)
             return { text: "Get quote error", disable: true, error: true, loading: false };
-        // Check minimum destination amount if specified
-        // Check minimum destination amount if specified
-        if (minDestinationAmount &&
-            anyspendQuote.data?.currencyOut?.amount &&
+        // Check minimum destination amount if specified (skip for direct transfers)
+        if (!isDirectTransfer &&
+            minDestinationAmount &&
+            anyspendQuote?.data?.currencyOut?.amount &&
             anyspendQuote.data.currencyOut.currency &&
             anyspendQuote.data.currencyOut.currency.decimals != null) {
             const rawAmountInWei = BigInt(anyspendQuote.data.currencyOut.amount);
@@ -123,8 +157,12 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                 effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
                 return { text: "Insufficient balance", disable: true, error: true, loading: false };
             }
-            // Use different text based on order type
-            const buttonText = orderType === "hype_duel" ? "Continue to deposit" : `Execute ${actionLabel}`;
+            // Use different text based on order type and whether it's a direct transfer
+            const buttonText = isDirectTransfer
+                ? "Transfer"
+                : orderType === "hype_duel"
+                    ? "Continue to deposit"
+                    : `Execute ${actionLabel}`;
             return { text: buttonText, disable: false, error: false, loading: false };
         }
         if (paymentType === "fiat") {
@@ -136,9 +174,10 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         return { text: "Continue", disable: false, error: false, loading: false };
     }, [
         activeInputAmountInWei,
-        isLoadingAnyspendQuote,
+        isQuoteLoading,
         isCreatingOrder,
         isCreatingOnrampOrder,
+        isSwitchingOrExecuting,
         selectedRecipientOrDefault,
         anyspendQuote,
         paymentType,
@@ -151,6 +190,10 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         DESTINATION_TOKEN_DETAILS.SYMBOL,
         orderType,
         selectedSrcToken,
+        tradeType,
+        dstAmountInput,
+        isSameChainSameToken,
+        allowDirectTransfer,
     ]);
     const onMainButtonClick = async () => {
         if (orderType === "hype_duel" && selectedSrcToken?.address?.toLowerCase() === B3_TOKEN.address.toLowerCase()) {
@@ -179,28 +222,82 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         }
     };
     const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsxs("div", { children: [_jsx("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), _jsx("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
-    const mainView = (_jsxs("div", { className: "anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(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: _jsx(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: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: 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: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => setActivePanel(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 = (_jsxs("div", { className: classes?.container ||
+            "anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(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: _jsx(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: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: classes?.swapDirectionButton ||
+                                    "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: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: false, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: isSrcInputDirty ? dstAmount : dstAmountInput, 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(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL) }))] }) }), _jsx(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: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), gasPriceData && !isLoadingGas && paymentType === "crypto" && (_jsx(GasIndicator, { gasPrice: gasPriceData, className: "mt-2 w-full" })), mainFooter ? mainFooter : null] }));
+                                setDstAmountInput(value);
+                            }, anyspendQuote: isDirectTransfer ? undefined : anyspendQuote, onShowPointsDetail: isDirectTransfer ? undefined : () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: isDirectTransfer ? undefined : () => setActivePanel(PanelView.FEE_DETAIL) }))] }) }), _jsx(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: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (btnInfo.error && classes?.mainButtonError) ||
+                        (btnInfo.disable && classes?.mainButtonDisabled) ||
+                        classes?.mainButton ||
+                        cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), gasPriceData && !isLoadingGas && paymentType === "crypto" && !isDirectTransfer && (_jsx(GasIndicator, { gasPrice: gasPriceData, className: classes?.gasIndicator || "mt-2 w-full" })), mainFooter ? mainFooter : null] }));
     const handleCryptoOrder = async () => {
         try {
-            invariant(anyspendQuote, "Relay price is not found");
+            const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
+            if (!isDirectTransfer) {
+                invariant(anyspendQuote, "Relay price is not found");
+            }
             invariant(selectedRecipientOrDefault, "Recipient address is not found");
-            const srcAmountBigInt = BigInt(activeInputAmountInWei);
-            const payload = buildCustomPayload(selectedRecipientOrDefault);
-            createOrder({
-                recipientAddress: selectedRecipientOrDefault,
-                orderType,
-                srcChain: selectedSrcChainId,
-                dstChain: selectedDstChainId,
-                srcToken: selectedSrcToken,
-                dstToken: selectedDstToken,
-                srcAmount: srcAmountBigInt.toString(),
-                expectedDstAmount: expectedDstAmountRaw,
-                creatorAddress: globalAddress,
-                payload,
-            });
+            // Handle direct transfer case (same token/chain) - bypass backend, transfer directly
+            if (isDirectTransfer) {
+                const srcAmountBigInt = BigInt(activeInputAmountInWei);
+                const txHash = await executeDirectTransfer({
+                    chainId: selectedSrcChainId,
+                    tokenAddress: selectedSrcToken.address,
+                    recipientAddress: selectedRecipientOrDefault,
+                    amount: srcAmountBigInt,
+                    method: effectiveCryptoPaymentMethod,
+                });
+                if (txHash) {
+                    setDirectTransferTxHash(txHash);
+                    setActivePanel(PanelView.DIRECT_TRANSFER_SUCCESS);
+                }
+                return;
+            }
+            // At this point, anyspendQuote is guaranteed to be defined (invariant above ensures this)
+            if (tradeType === "EXACT_OUTPUT") {
+                // EXACT_OUTPUT mode: create a custom order (like AnySpendStakeUpside)
+                const srcAmountFromQuote = anyspendQuote?.data?.currencyIn?.amount;
+                invariant(srcAmountFromQuote, "Source amount from quote is not found");
+                const expectedDstAmount = anyspendQuote?.data?.currencyOut?.amount ?? "0";
+                const encodedData = generateEncodedData(customExactInConfig, activeOutputAmountInWei);
+                createOrder({
+                    recipientAddress: selectedRecipientOrDefault,
+                    orderType: "custom",
+                    srcChain: selectedSrcChainId,
+                    dstChain: selectedDstChainId,
+                    srcToken: selectedSrcToken,
+                    dstToken: selectedDstToken,
+                    srcAmount: srcAmountFromQuote,
+                    expectedDstAmount,
+                    creatorAddress: globalAddress,
+                    payload: {
+                        amount: activeOutputAmountInWei,
+                        data: encodedData,
+                        to: customExactInConfig ? normalizeAddress(customExactInConfig.to) : undefined,
+                        spenderAddress: customExactInConfig?.spenderAddress
+                            ? normalizeAddress(customExactInConfig.spenderAddress)
+                            : undefined,
+                    },
+                });
+            }
+            else {
+                // EXACT_INPUT mode: create custom_exact_in order (original behavior)
+                const srcAmountBigInt = BigInt(activeInputAmountInWei);
+                const payload = buildCustomPayload(selectedRecipientOrDefault);
+                createOrder({
+                    recipientAddress: selectedRecipientOrDefault,
+                    orderType,
+                    srcChain: selectedSrcChainId,
+                    dstChain: selectedDstChainId,
+                    srcToken: selectedSrcToken,
+                    dstToken: selectedDstToken,
+                    srcAmount: srcAmountBigInt.toString(),
+                    expectedDstAmount: expectedDstAmountRaw,
+                    creatorAddress: globalAddress,
+                    payload,
+                });
+            }
         }
         catch (err) {
             console.error(err);
@@ -236,23 +333,50 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                 toast.error("Please select a payment method");
                 return;
             }
-            const payload = buildCustomPayload(selectedRecipientOrDefault);
-            createOnrampOrder({
-                recipientAddress: selectedRecipientOrDefault,
-                orderType,
-                dstChain: selectedDstChainId,
-                dstToken: selectedDstToken,
-                srcFiatAmount: srcAmount,
-                onramp: {
-                    vendor,
-                    paymentMethod: paymentMethodString,
-                    country: geoData?.country || "US",
-                    redirectUrl: window.location.origin,
-                },
-                expectedDstAmount: expectedDstAmountRaw,
-                creatorAddress: globalAddress,
-                payload,
-            });
+            const onrampOptions = {
+                vendor,
+                paymentMethod: paymentMethodString,
+                country: geoData?.country || "US",
+                redirectUrl: window.location.origin,
+            };
+            if (tradeType === "EXACT_OUTPUT") {
+                // EXACT_OUTPUT mode: create a custom order (like AnySpendStakeUpside)
+                const expectedDstAmount = anyspendQuote.data?.currencyOut?.amount ?? "0";
+                const encodedData = generateEncodedData(customExactInConfig, activeOutputAmountInWei);
+                createOnrampOrder({
+                    recipientAddress: selectedRecipientOrDefault,
+                    orderType: "custom",
+                    dstChain: selectedDstChainId,
+                    dstToken: selectedDstToken,
+                    srcFiatAmount: srcAmount,
+                    onramp: onrampOptions,
+                    expectedDstAmount,
+                    creatorAddress: globalAddress,
+                    payload: {
+                        amount: activeOutputAmountInWei,
+                        data: encodedData,
+                        to: customExactInConfig ? normalizeAddress(customExactInConfig.to) : undefined,
+                        spenderAddress: customExactInConfig?.spenderAddress
+                            ? normalizeAddress(customExactInConfig.spenderAddress)
+                            : undefined,
+                    },
+                });
+            }
+            else {
+                // EXACT_INPUT mode: create custom_exact_in order (original behavior)
+                const payload = buildCustomPayload(selectedRecipientOrDefault);
+                createOnrampOrder({
+                    recipientAddress: selectedRecipientOrDefault,
+                    orderType,
+                    dstChain: selectedDstChainId,
+                    dstToken: selectedDstToken,
+                    srcFiatAmount: srcAmount,
+                    onramp: onrampOptions,
+                    expectedDstAmount: expectedDstAmountRaw,
+                    creatorAddress: globalAddress,
+                    payload,
+                });
+            }
         }
         catch (err) {
             console.error(err);
@@ -282,7 +406,17 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             : anyspendQuote.data.currencyIn?.amountUsd
                 ? Number(anyspendQuote.data.currencyIn.amountUsd)
                 : undefined, onBack: () => setActivePanel(PanelView.MAIN) })) : null;
-    return (_jsx(StyleRoot, { children: _jsx("div", { className: cn("anyspend-container font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsx(TransitionPanel, { activeIndex: orderId
+    const directTransferSuccessView = (_jsxs(motion.div, { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, className: "flex flex-col items-center justify-center gap-6 py-8", children: [_jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-green-500/20", children: _jsx(CheckCircle, { className: "h-10 w-10 text-green-500" }) }), _jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-as-primary mb-2 text-xl font-bold", children: "Transfer Complete!" }), _jsxs("p", { className: "text-as-primary/60 text-sm", children: [srcAmount, " ", selectedSrcToken.symbol, " sent on ", getChainName(selectedSrcChainId)] }), _jsxs("p", { className: "text-as-primary/60 mt-1 text-sm", children: ["to ", selectedRecipientOrDefault?.slice(0, 6), "...", selectedRecipientOrDefault?.slice(-4)] })] }), directTransferTxHash && (_jsx("a", { href: getExplorerTxUrl(selectedSrcChainId, directTransferTxHash || ""), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand text-sm underline", children: "View Transaction" })), _jsx(Button, { className: "bg-as-brand hover:bg-as-brand/90 mt-4 w-full rounded-xl py-3 font-semibold text-white", onClick: () => {
+                    onSuccess?.(srcAmount);
+                    if (returnToHomeUrl) {
+                        window.location.href = returnToHomeUrl;
+                    }
+                    else {
+                        setB3ModalOpen(false);
+                    }
+                }, children: returnHomeLabel || (returnToHomeUrl ? "Return to Home" : "Done") })] }));
+    return (_jsx(StyleRoot, { children: _jsx("div", { className: classes?.root ||
+                cn("anyspend-container font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsx(TransitionPanel, { activeIndex: orderId
                     ? oat
                         ? PanelView.ORDER_DETAILS
                         : PanelView.LOADING
@@ -303,5 +437,6 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                     _jsx("div", { children: loadingView }, "loading-view"),
                     _jsx("div", { children: pointsDetailView }, "points-detail-view"),
                     _jsx("div", { children: feeDetailView }, "fee-detail-view"),
+                    _jsx("div", { children: directTransferSuccessView }, "direct-transfer-success-view"),
                 ] }) }) }));
 }

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

@@ -1,5 +1,6 @@
 import { components } from "../../../anyspend/types/api";
 import { GetQuoteResponse } from "../../../anyspend/types/api_req_res";
+import type { AnySpendAllClasses } from "./types/classes";
 export interface DepositContractConfig {
     /** Custom function ABI JSON string */
     functionAbi: string;
@@ -94,6 +95,10 @@ export interface AnySpendDepositProps {
      * Defaults to false.
      */
     isCustomDeposit?: boolean;
+    /** Custom class names for styling specific elements */
+    classes?: AnySpendAllClasses;
+    /** When true, allows direct transfer without swap if source and destination token/chain are the same */
+    allowDirectTransfer?: boolean;
 }
 /**
  * A flexible deposit component that wraps AnySpendCustomExactIn with optional chain selection.
@@ -130,4 +135,4 @@ export interface AnySpendDepositProps {
  *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
  * />
  */
-export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains, minPoolSize, topChainsCount, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains, minPoolSize, topChainsCount, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit, classes, allowDirectTransfer, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -94,7 +94,9 @@ function ChainIcon({ chainId, className }) {
  *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
  * />
  */
-export function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains = DEFAULT_SUPPORTED_CHAINS, minPoolSize = DEFAULT_MIN_POOL_SIZE, topChainsCount = 3, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit = false, }) {
+export function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains = DEFAULT_SUPPORTED_CHAINS, minPoolSize = DEFAULT_MIN_POOL_SIZE, topChainsCount = 3, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit = false, classes, allowDirectTransfer = false, }) {
+    // Extract deposit-specific classes for convenience
+    const depositClasses = classes?.deposit;
     const { connectedEOAWallet } = useAccountWallet();
     const eoaAddress = connectedEOAWallet?.getAccount()?.address;
     // Determine if we should show chain selection
@@ -184,12 +186,25 @@ export function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, p
     };
     // Chain selection view
     if (step === "select-chain") {
-        return (_jsxs("div", { className: 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 && (_jsx("button", { onClick: onClose, className: "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: _jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), !isBalanceLoading && totalBalance > 0 && (_jsxs("div", { className: "anyspend-deposit-balance border-theme-border-secondary border-b p-5", children: [_jsx("p", { className: "anyspend-deposit-balance-label text-as-secondary text-sm", children: "Your Balance" }), _jsxs("p", { className: "anyspend-deposit-balance-value text-as-primary text-3xl font-semibold", children: [formatDecimal(totalBalance), " ", _jsx("span", { className: "text-sm", children: "USD" })] })] })), _jsxs("div", { className: "anyspend-deposit-options flex flex-col gap-2 p-6", children: [isBalanceLoading && (_jsx("div", { className: "anyspend-deposit-chains-skeleton flex flex-col gap-2", children: [1, 2].map((_, i) => (_jsxs("div", { className: "border-border-primary flex items-center justify-between rounded-xl border p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "h-6 w-6 rounded-full" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-32" }), _jsx(Skeleton, { className: "h-3 w-20" })] })] }), _jsx(Skeleton, { className: "h-5 w-5" })] }, i))) })), topChainsWithBalance.length > 0 && (_jsx("div", { className: "anyspend-deposit-chains flex flex-col gap-2", children: topChainsWithBalance.map(chain => (_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: [_jsx("div", { className: "anyspend-deposit-chain-content", children: _jsxs("div", { className: "anyspend-deposit-chain-info", children: [_jsxs("span", { className: "anyspend-deposit-chain-name text-as-primary flex items-center gap-1.5 font-medium", children: ["Deposit from ", chain.name, _jsx(ChainIcon, { chainId: chain.id, className: "h-5 w-5" })] }), _jsxs("p", { className: "anyspend-deposit-chain-balance text-as-secondary text-xs", children: [formatUsd(chain.balance), " available"] })] }) }), _jsx(ChevronRight, { className: "anyspend-deposit-chain-chevron text-as-secondary h-5 w-5" })] }, chain.id))) })), _jsxs("div", { className: "anyspend-deposit-general-options flex flex-col gap-2", children: [_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: [_jsx("div", { className: "anyspend-deposit-option-content", children: _jsxs("div", { className: "anyspend-deposit-option-info", children: [_jsx("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit Crypto" }), _jsx("p", { className: "anyspend-deposit-option-description text-as-secondary text-xs", children: "Swap from any token on any chain" })] }) }), _jsx(ChevronRight, { className: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), _jsxs("div", { className: "anyspend-deposit-divider flex items-center gap-3", children: [_jsx("div", { className: "bg-as-stroke h-px flex-1" }), _jsx("span", { className: "anyspend-deposit-divider-text text-as-secondary text-sm", children: "More options" }), _jsx("div", { className: "bg-as-stroke h-px flex-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: [_jsxs("div", { className: "anyspend-deposit-option-content flex items-center gap-3", children: [_jsx(QrCodeIcon, { className: "anyspend-deposit-option-icon h-10 w-10" }), _jsxs("div", { className: "anyspend-deposit-option-info", children: [_jsx("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit with QR Code" }), _jsx("p", { className: "anyspend-deposit-option-description text-as-secondary text-xs", children: "Send tokens directly to deposit address" })] })] }), _jsx(ChevronRight, { className: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), _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: [_jsxs("div", { className: "anyspend-deposit-option-content flex items-center gap-3", children: [_jsx(CreditCardIcon, { className: "anyspend-deposit-option-icon h-10 w-10" }), _jsxs("div", { className: "anyspend-deposit-option-info", children: [_jsx("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Fund with Fiat" }), _jsx("p", { className: "anyspend-deposit-option-description text-as-secondary text-xs", children: "Pay with card or bank transfer" })] })] }), _jsx(ChevronRight, { className: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] })] }), _jsx(ChainWarningText, { chainId: destinationTokenChainId, className: "mt-2" })] })] }));
+        return (_jsxs("div", { className: depositClasses?.chainSelection ||
+                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 && (_jsx("button", { onClick: onClose, className: depositClasses?.closeButton ||
+                        "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: _jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), !isBalanceLoading && totalBalance > 0 && (_jsxs("div", { className: depositClasses?.balanceContainer || "anyspend-deposit-balance border-theme-border-secondary border-b p-5", children: [_jsx("p", { className: depositClasses?.balanceLabel || "anyspend-deposit-balance-label text-as-secondary text-sm", children: "Your Balance" }), _jsxs("p", { className: depositClasses?.balanceValue || "anyspend-deposit-balance-value text-as-primary text-3xl font-semibold", children: [formatDecimal(totalBalance), " ", _jsx("span", { className: "text-sm", children: "USD" })] })] })), _jsxs("div", { className: depositClasses?.optionsContainer || "anyspend-deposit-options flex flex-col gap-2 p-6", children: [isBalanceLoading && (_jsx("div", { className: depositClasses?.chainsSkeleton || "anyspend-deposit-chains-skeleton flex flex-col gap-2", children: [1, 2].map((_, i) => (_jsxs("div", { className: depositClasses?.skeletonItem ||
+                                    "border-border-primary flex items-center justify-between rounded-xl border p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "h-6 w-6 rounded-full" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-32" }), _jsx(Skeleton, { className: "h-3 w-20" })] })] }), _jsx(Skeleton, { className: "h-5 w-5" })] }, i))) })), topChainsWithBalance.length > 0 && (_jsx("div", { className: depositClasses?.chainsContainer || "anyspend-deposit-chains flex flex-col gap-2", children: topChainsWithBalance.map(chain => (_jsxs("button", { onClick: () => handleSelectChain(chain.id), className: depositClasses?.chainButton ||
+                                    "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: [_jsx("div", { className: depositClasses?.chainContent || "anyspend-deposit-chain-content", children: _jsxs("div", { className: depositClasses?.chainInfo || "anyspend-deposit-chain-info", children: [_jsxs("span", { className: depositClasses?.chainName ||
+                                                        "anyspend-deposit-chain-name text-as-primary flex items-center gap-1.5 font-medium", children: ["Deposit from ", chain.name, _jsx(ChainIcon, { chainId: chain.id, className: depositClasses?.chainIcon || "h-5 w-5" })] }), _jsxs("p", { className: depositClasses?.chainBalance || "anyspend-deposit-chain-balance text-as-secondary text-xs", children: [formatUsd(chain.balance), " available"] })] }) }), _jsx(ChevronRight, { className: depositClasses?.chainChevron || "anyspend-deposit-chain-chevron text-as-secondary h-5 w-5" })] }, chain.id))) })), _jsxs("div", { className: depositClasses?.generalOptions || "anyspend-deposit-general-options flex flex-col gap-2", children: [_jsxs("button", { onClick: handleSelectCrypto, className: depositClasses?.cryptoButton ||
+                                        "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: [_jsx("div", { className: depositClasses?.optionContent || "anyspend-deposit-option-content", children: _jsxs("div", { className: depositClasses?.optionInfo || "anyspend-deposit-option-info", children: [_jsx("span", { className: depositClasses?.optionTitle || "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit Crypto" }), _jsx("p", { className: depositClasses?.optionDescription ||
+                                                            "anyspend-deposit-option-description text-as-secondary text-xs", children: "Swap from any token on any chain" })] }) }), _jsx(ChevronRight, { className: depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), _jsxs("div", { className: depositClasses?.divider || "anyspend-deposit-divider flex items-center gap-3", children: [_jsx("div", { className: depositClasses?.dividerLine || "bg-as-stroke h-px flex-1" }), _jsx("span", { className: depositClasses?.dividerText || "anyspend-deposit-divider-text text-as-secondary text-sm", children: "More options" }), _jsx("div", { className: depositClasses?.dividerLine || "bg-as-stroke h-px flex-1" })] }), _jsxs("button", { onClick: handleSelectQrDeposit, className: depositClasses?.qrButton ||
+                                        "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: [_jsxs("div", { className: depositClasses?.optionContent || "anyspend-deposit-option-content flex items-center gap-3", children: [_jsx(QrCodeIcon, { className: depositClasses?.optionIcon || "anyspend-deposit-option-icon h-10 w-10" }), _jsxs("div", { className: depositClasses?.optionInfo || "anyspend-deposit-option-info", children: [_jsx("span", { className: depositClasses?.optionTitle || "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit with QR Code" }), _jsx("p", { className: depositClasses?.optionDescription ||
+                                                                "anyspend-deposit-option-description text-as-secondary text-xs", children: "Send tokens directly to deposit address" })] })] }), _jsx(ChevronRight, { className: depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), _jsxs("button", { onClick: handleSelectFiat, className: depositClasses?.fiatButton ||
+                                        "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: [_jsxs("div", { className: depositClasses?.optionContent || "anyspend-deposit-option-content flex items-center gap-3", children: [_jsx(CreditCardIcon, { className: depositClasses?.optionIcon || "anyspend-deposit-option-icon h-10 w-10" }), _jsxs("div", { className: depositClasses?.optionInfo || "anyspend-deposit-option-info", children: [_jsx("span", { className: depositClasses?.optionTitle || "anyspend-deposit-option-title text-as-primary font-medium", children: "Fund with Fiat" }), _jsx("p", { className: depositClasses?.optionDescription ||
+                                                                "anyspend-deposit-option-description text-as-secondary text-xs", children: "Pay with card or bank transfer" })] })] }), _jsx(ChevronRight, { className: depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] })] }), _jsx(ChainWarningText, { chainId: destinationTokenChainId, classes: classes?.chainWarningText || { root: "mt-2" } })] })] }));
     }
     // QR Deposit view
     if (step === "qr-deposit") {
-        return (_jsx(QRDeposit, { mode: mode, recipientAddress: recipientAddress, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, depositContractConfig: depositContractConfig, onBack: handleBack, onClose: onClose ?? handleBack }));
+        return (_jsx(QRDeposit, { mode: mode, recipientAddress: recipientAddress, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, depositContractConfig: depositContractConfig, onBack: handleBack, onClose: onClose ?? handleBack, classes: classes?.qrDeposit }));
     }
     // Deposit view
-    return (_jsxs("div", { className: "anyspend-deposit anyspend-deposit-form relative", children: [shouldShowChainSelection && (_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: [_jsx("svg", { className: "anyspend-deposit-back-icon h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }), _jsx("span", { className: "anyspend-deposit-back-text text-sm", children: "Back" })] })), onClose && (_jsx("button", { onClick: onClose, className: "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: _jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), _jsx("div", { className: cn("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isCustomDeposit ? (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel }, selectedChainId)) : (_jsx(AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel }, selectedChainId)) }), _jsx(ChainWarningText, { chainId: destinationTokenChainId, className: "px-4 pb-4" })] }));
+    return (_jsxs("div", { className: depositClasses?.form || "anyspend-deposit anyspend-deposit-form relative", children: [shouldShowChainSelection && (_jsxs("button", { onClick: handleBack, className: depositClasses?.backButton ||
+                    "anyspend-deposit-back-button text-as-secondary hover:text-as-primary absolute left-4 top-4 z-10 flex items-center gap-1", children: [_jsx("svg", { className: depositClasses?.backIcon || "anyspend-deposit-back-icon h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }), _jsx("span", { className: depositClasses?.backText || "anyspend-deposit-back-text text-sm", children: "Back" })] })), onClose && (_jsx("button", { onClick: onClose, className: depositClasses?.closeButton ||
+                    "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: _jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), _jsx("div", { className: depositClasses?.formContent || cn("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isCustomDeposit ? (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.customExactIn, allowDirectTransfer: allowDirectTransfer }, selectedChainId)) : (_jsx(AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.anySpend, allowDirectTransfer: allowDirectTransfer }, selectedChainId)) }), _jsx(ChainWarningText, { chainId: destinationTokenChainId, classes: classes?.chainWarningText || { root: "px-4 pb-4" } })] }));
 }

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

@@ -1,5 +1,5 @@
 import { components } from "../../../anyspend/types/api";
-export declare function AnySpendStakeUpsideExactIn({ loadOrder, mode, recipientAddress, sourceTokenAddress, sourceTokenChainId, stakingContractAddress, token, onSuccess, }: {
+export declare function AnySpendStakeUpsideExactIn({ loadOrder, mode, recipientAddress, sourceTokenAddress, sourceTokenChainId, destinationTokenAmount, stakingContractAddress, token, onSuccess, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     recipientAddress: string;
@@ -7,5 +7,6 @@ export declare function AnySpendStakeUpsideExactIn({ loadOrder, mode, recipientA
     sourceTokenChainId?: number;
     stakingContractAddress: string;
     token: components["schemas"]["Token"];
+    destinationTokenAmount?: string;
     onSuccess?: (amount: string) => void;
 }): import("react/jsx-runtime").JSX.Element | null;

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

@@ -14,7 +14,7 @@ const STAKE_FOR_FUNCTION_ABI = JSON.stringify([
         outputs: [],
     },
 ]);
-export function AnySpendStakeUpsideExactIn({ loadOrder, mode = "modal", recipientAddress, sourceTokenAddress, sourceTokenChainId, stakingContractAddress, token, onSuccess, }) {
+export function AnySpendStakeUpsideExactIn({ loadOrder, mode = "modal", recipientAddress, sourceTokenAddress, sourceTokenChainId, destinationTokenAmount, stakingContractAddress, token, onSuccess, }) {
     if (!recipientAddress)
         return null;
     const header = () => (_jsx(_Fragment, { children: _jsx("div", { className: "from-b3-react-background to-as-on-surface-1 w-full rounded-t-lg bg-gradient-to-t", children: _jsx("div", { className: "mb-1 flex w-full flex-col items-center gap-2", children: _jsxs("span", { className: "font-sf-rounded text-2xl font-semibold", children: ["Swap & Stake ", token.symbol, " (Exact In)"] }) }) }) }));
@@ -26,5 +26,5 @@ export function AnySpendStakeUpsideExactIn({ loadOrder, mode = "modal", recipien
         spenderAddress: stakingContractAddress,
         action: `stake ${token.symbol}`,
     };
-    return (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: token, destinationChainId: base.id, customExactInConfig: customExactInConfig, header: header, onSuccess: onSuccess }));
+    return (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: token, destinationChainId: base.id, destinationTokenAmount: destinationTokenAmount, customExactInConfig: customExactInConfig, header: header, onSuccess: onSuccess }));
 }

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

@@ -1,5 +1,6 @@
 import { components } from "../../../anyspend/types/api";
 import { DepositContractConfig } from "./AnySpendDeposit";
+import type { QRDepositClasses } from "./types/classes";
 export interface QRDepositProps {
     /** Display mode */
     mode?: "modal" | "page";
@@ -25,6 +26,8 @@ export interface QRDepositProps {
     onOrderCreated?: (orderId: string) => void;
     /** Callback when deposit is completed */
     onSuccess?: (txHash?: string) => void;
+    /** Custom classes for styling */
+    classes?: QRDepositClasses;
 }
 /**
  * A component for displaying QR code deposit functionality.
@@ -40,4 +43,4 @@ export interface QRDepositProps {
  *   onSuccess={(txHash) => console.log("Deposit complete:", txHash)}
  * />
  */
-export declare function QRDeposit({ mode, recipientAddress, sourceToken: sourceTokenProp, sourceChainId: sourceChainIdProp, destinationToken, destinationChainId, creatorAddress, depositContractConfig, onBack, onClose, onOrderCreated, onSuccess, }: QRDepositProps): import("react/jsx-runtime").JSX.Element;
+export declare function QRDeposit({ mode, recipientAddress, sourceToken: sourceTokenProp, sourceChainId: sourceChainIdProp, destinationToken, destinationChainId, creatorAddress, depositContractConfig, onBack, onClose, onOrderCreated, onSuccess, classes, }: QRDepositProps): import("react/jsx-runtime").JSX.Element;

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

@@ -38,7 +38,7 @@ const DEFAULT_ETH_ON_BASE = {
  *   onSuccess={(txHash) => console.log("Deposit complete:", txHash)}
  * />
  */
-export function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourceTokenProp, sourceChainId: sourceChainIdProp, destinationToken, destinationChainId, creatorAddress, depositContractConfig, onBack, onClose, onOrderCreated, onSuccess, }) {
+export function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourceTokenProp, sourceChainId: sourceChainIdProp, destinationToken, destinationChainId, creatorAddress, depositContractConfig, onBack, onClose, onOrderCreated, onSuccess, classes, }) {
     const [copied, setCopied] = useState(false);
     const [orderId, setOrderId] = useState();
     const [globalAddress, setGlobalAddress] = useState();
@@ -159,11 +159,19 @@ export function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourc
     }
     // Show order details if order has deposits or is being processed
     if (oat?.data && oat.data.depositTxs && oat.data.depositTxs.length > 0) {
-        return (_jsx("div", { className: cn("anyspend-container anyspend-qr-order-details font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsx("div", { className: "anyspend-qr-order-details-content relative flex flex-col gap-4", children: _jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: handleBack }) }) }));
+        return (_jsx("div", { className: classes?.orderDetailsContainer ||
+                cn("anyspend-container anyspend-qr-order-details font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsx("div", { className: classes?.orderDetailsContent || "anyspend-qr-order-details-content relative flex flex-col gap-4", children: _jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: handleBack }) }) }));
     }
     // Show loading state while creating order (but not if we already have an orderId or for pure transfers)
     if (isCreatingOrder && !orderId && !isPureTransfer) {
-        return (_jsx("div", { className: cn("anyspend-container anyspend-qr-loading font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsxs("div", { className: "anyspend-qr-loading-content flex flex-col items-center justify-center gap-4 py-12", children: [_jsx(Loader2, { className: "anyspend-qr-loading-spinner text-as-brand h-8 w-8 animate-spin" }), _jsx("p", { className: "anyspend-qr-loading-text text-as-secondary text-sm", children: "Creating deposit order..." })] }) }));
+        return (_jsx("div", { className: classes?.loadingContainer ||
+                cn("anyspend-container anyspend-qr-loading font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsxs("div", { className: classes?.loadingContent ||
+                    "anyspend-qr-loading-content flex flex-col items-center justify-center gap-4 py-12", children: [_jsx(Loader2, { className: classes?.loadingSpinner || "anyspend-qr-loading-spinner text-as-brand h-8 w-8 animate-spin" }), _jsx("p", { className: classes?.loadingText || "anyspend-qr-loading-text text-as-secondary text-sm", children: "Creating deposit order..." })] }) }));
     }
-    return (_jsx("div", { className: cn("anyspend-container anyspend-qr-deposit font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsxs("div", { className: "anyspend-qr-deposit-content flex flex-col gap-4", children: [_jsxs("div", { className: "anyspend-qr-header flex items-center justify-between", children: [_jsx("button", { onClick: handleBack, className: "anyspend-qr-back-button text-as-secondary hover:text-as-primary", children: _jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsx("h2", { className: "anyspend-qr-title text-as-primary text-base font-semibold", children: "Deposit" }), onClose ? (_jsx("button", { onClick: handleClose, className: "anyspend-qr-close-button text-as-secondary hover:text-as-primary", children: _jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })) : (_jsx("div", { className: "w-5" }))] }), _jsxs("div", { className: "anyspend-qr-token-selector flex flex-col gap-1.5", children: [_jsx("label", { className: "anyspend-qr-token-label text-as-secondary text-sm", children: "Send" }), _jsx(TokenSelector, { chainIdsFilter: getAvailableChainIds("from"), context: "from", fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: getAvailableChainIds("from"), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, setToken: handleTokenSelect, supportedWalletVMs: ["evm"], token: undefined, trigger: _jsxs(Button, { variant: "outline", role: "combobox", className: "anyspend-qr-token-trigger border-as-stroke bg-as-surface-secondary flex h-auto w-full items-center justify-between gap-2 rounded-xl border px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [sourceToken.metadata?.logoURI ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[sourceChainId]?.logoUrl, tokenUrl: sourceToken.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : (_jsx("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), _jsxs("div", { className: "flex flex-col items-start gap-0", children: [_jsx("div", { className: "text-as-primary font-semibold", children: sourceToken.symbol }), _jsx("div", { className: "text-as-primary/70 text-xs", children: ALL_CHAINS[sourceChainId]?.name ?? "Unknown" })] })] }), _jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) })] }), _jsxs("div", { className: "anyspend-qr-content border-as-stroke flex items-start gap-4 rounded-xl border p-4", children: [_jsxs("div", { className: "anyspend-qr-code-container flex flex-col items-center gap-2", children: [_jsx("div", { className: "anyspend-qr-code rounded-lg bg-white p-2", children: _jsx(QRCodeSVG, { value: displayAddress, size: 120, level: "M", marginSize: 0 }) }), _jsxs("span", { className: "anyspend-qr-scan-hint text-as-secondary text-xs", children: ["SCAN WITH ", _jsx("span", { className: "inline-block", children: "\uD83E\uDD8A" })] })] }), _jsxs("div", { className: "anyspend-qr-address-container flex flex-1 flex-col gap-1", children: [_jsx("span", { className: "anyspend-qr-address-label text-as-secondary text-sm", children: "Deposit address:" }), _jsxs("div", { className: "anyspend-qr-address-row flex items-start gap-1", children: [_jsx("span", { className: "anyspend-qr-address text-as-primary break-all font-mono text-sm leading-relaxed", children: displayAddress }), _jsx("button", { onClick: handleCopyAddress, className: "anyspend-qr-copy-icon text-as-secondary hover:text-as-primary mt-0.5 shrink-0", children: copied ? _jsx(Check, { className: "h-4 w-4" }) : _jsx(Copy, { className: "h-4 w-4" }) })] })] })] }), _jsx(ChainWarningText, { chainId: destinationChainId }), _jsxs(WarningText, { children: ["Only send ", sourceToken.symbol, " on ", ALL_CHAINS[sourceChainId]?.name ?? "the specified chain", ". Other tokens will not be converted."] }), isPureTransfer && isWatchingTransfer && (_jsxs("div", { className: "anyspend-qr-watching flex items-center justify-center gap-2 rounded-lg bg-blue-500/10 p-3", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin text-blue-500" }), _jsx("span", { className: "text-sm text-blue-500", children: "Watching for incoming transfer..." })] })), _jsx("button", { onClick: handleCopyAddress, className: "anyspend-qr-copy-button flex w-full items-center justify-center gap-2 rounded-xl bg-blue-500 py-3.5 font-medium text-white transition-all hover:bg-blue-600", children: "Copy deposit address" })] }) }));
+    return (_jsx("div", { className: classes?.container ||
+            cn("anyspend-container anyspend-qr-deposit font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsxs("div", { className: classes?.content || "anyspend-qr-deposit-content flex flex-col gap-4", children: [_jsxs("div", { className: classes?.header || "anyspend-qr-header flex items-center justify-between", children: [_jsx("button", { onClick: handleBack, className: classes?.backButton || "anyspend-qr-back-button text-as-secondary hover:text-as-primary", children: _jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsx("h2", { className: classes?.title || "anyspend-qr-title text-as-primary text-base font-semibold", children: "Deposit" }), onClose ? (_jsx("button", { onClick: handleClose, className: classes?.closeButton || "anyspend-qr-close-button text-as-secondary hover:text-as-primary", children: _jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })) : (_jsx("div", { className: "w-5" }))] }), _jsxs("div", { className: classes?.tokenSelectorContainer || "anyspend-qr-token-selector flex flex-col gap-1.5", children: [_jsx("label", { className: classes?.tokenSelectorLabel || "anyspend-qr-token-label text-as-secondary text-sm", children: "Send" }), _jsx(TokenSelector, { chainIdsFilter: getAvailableChainIds("from"), context: "from", fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: getAvailableChainIds("from"), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, setToken: handleTokenSelect, supportedWalletVMs: ["evm"], token: undefined, trigger: _jsxs(Button, { variant: "outline", role: "combobox", className: classes?.tokenSelectorTrigger ||
+                                    "anyspend-qr-token-trigger border-as-stroke bg-as-surface-secondary flex h-auto w-full items-center justify-between gap-2 rounded-xl border px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [sourceToken.metadata?.logoURI ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[sourceChainId]?.logoUrl, tokenUrl: sourceToken.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : (_jsx("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), _jsxs("div", { className: "flex flex-col items-start gap-0", children: [_jsx("div", { className: "text-as-primary font-semibold", children: sourceToken.symbol }), _jsx("div", { className: "text-as-primary/70 text-xs", children: ALL_CHAINS[sourceChainId]?.name ?? "Unknown" })] })] }), _jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) })] }), _jsxs("div", { className: classes?.qrContent || "anyspend-qr-content border-as-stroke flex items-start gap-4 rounded-xl border p-4", children: [_jsxs("div", { className: classes?.qrCodeContainer || "anyspend-qr-code-container flex flex-col items-center gap-2", children: [_jsx("div", { className: classes?.qrCode || "anyspend-qr-code rounded-lg bg-white p-2", children: _jsx(QRCodeSVG, { value: displayAddress, size: 120, level: "M", marginSize: 0 }) }), _jsxs("span", { className: classes?.qrScanHint || "anyspend-qr-scan-hint text-as-secondary text-xs", children: ["SCAN WITH ", _jsx("span", { className: "inline-block", children: "\uD83E\uDD8A" })] })] }), _jsxs("div", { className: classes?.addressContainer || "anyspend-qr-address-container flex flex-1 flex-col gap-1", children: [_jsx("span", { className: classes?.addressLabel || "anyspend-qr-address-label text-as-secondary text-sm", children: "Deposit address:" }), _jsxs("div", { className: classes?.addressRow || "anyspend-qr-address-row flex items-start gap-1", children: [_jsx("span", { className: classes?.address || "anyspend-qr-address text-as-primary break-all font-mono text-sm leading-relaxed", children: displayAddress }), _jsx("button", { onClick: handleCopyAddress, className: classes?.addressCopyIcon ||
+                                                "anyspend-qr-copy-icon text-as-secondary hover:text-as-primary mt-0.5 shrink-0", children: copied ? _jsx(Check, { className: "h-4 w-4" }) : _jsx(Copy, { className: "h-4 w-4" }) })] })] })] }), _jsx(ChainWarningText, { chainId: destinationChainId }), _jsxs(WarningText, { children: ["Only send ", sourceToken.symbol, " on ", ALL_CHAINS[sourceChainId]?.name ?? "the specified chain", ". Other tokens will not be converted."] }), isPureTransfer && isWatchingTransfer && (_jsxs("div", { className: classes?.watchingIndicator ||
+                        "anyspend-qr-watching flex items-center justify-center gap-2 rounded-lg bg-blue-500/10 p-3", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin text-blue-500" }), _jsx("span", { className: "text-sm text-blue-500", children: "Watching for incoming transfer..." })] })), _jsx("button", { onClick: handleCopyAddress, className: classes?.copyButton ||
+                        "anyspend-qr-copy-button flex w-full items-center justify-center gap-2 rounded-xl bg-blue-500 py-3.5 font-medium text-white transition-all hover:bg-blue-600", children: "Copy deposit address" })] }) }));
 }