@b3dotfun/sdk 0.1.2 → 0.1.5

package/dist/esm/anyspend/react/components/types/classes.d.ts

@@ -0,0 +1,390 @@
+/**
+ * Classes prop types for AnySpend components customization.
+ * Use these to override default styling of specific elements.
+ */
+/** Classes for AnySpendDeposit component */
+export interface AnySpendDepositClasses {
+    root?: string;
+    chainSelection?: string;
+    form?: string;
+    formContent?: string;
+    closeButton?: string;
+    balanceContainer?: string;
+    balanceLabel?: string;
+    balanceValue?: string;
+    optionsContainer?: string;
+    chainsSkeleton?: string;
+    skeletonItem?: string;
+    chainsContainer?: string;
+    chainButton?: string;
+    chainContent?: string;
+    chainInfo?: string;
+    chainName?: string;
+    chainIcon?: string;
+    chainBalance?: string;
+    chainChevron?: string;
+    generalOptions?: string;
+    optionButton?: string;
+    cryptoButton?: string;
+    qrButton?: string;
+    fiatButton?: string;
+    optionContent?: string;
+    optionInfo?: string;
+    optionTitle?: string;
+    optionDescription?: string;
+    optionIcon?: string;
+    optionChevron?: string;
+    divider?: string;
+    dividerLine?: string;
+    dividerText?: string;
+    backButton?: string;
+    backIcon?: string;
+    backText?: string;
+    header?: string;
+    title?: string;
+}
+/** Classes for AnySpend component */
+export interface AnySpendClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    headerLogo?: string;
+    headerTitle?: string;
+    tabSection?: string;
+    tabList?: string;
+    tabTrigger?: string;
+    tabTriggerActive?: string;
+    mainContent?: string;
+    inputSection?: string;
+    swapDirectionButton?: string;
+    mainButton?: string;
+    mainButtonDisabled?: string;
+    mainButtonError?: string;
+    historyButton?: string;
+    bottomNavigation?: string;
+    gasIndicator?: string;
+}
+/** Classes for AnySpendCustomExactIn component */
+export interface AnySpendCustomExactInClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    headerTitle?: string;
+    headerDescription?: string;
+    contentArea?: string;
+    inputSection?: string;
+    swapDirectionButton?: string;
+    mainButton?: string;
+    mainButtonDisabled?: string;
+    mainButtonError?: string;
+    footer?: string;
+    gasIndicator?: string;
+}
+/** Classes for CryptoPaySection component */
+export interface CryptoPaySectionClasses {
+    root?: string;
+    container?: string;
+    label?: string;
+    inputContainer?: string;
+    input?: string;
+    tokenSelector?: string;
+    tokenIcon?: string;
+    tokenSymbol?: string;
+    chainBadge?: string;
+    balanceRow?: string;
+    balanceLabel?: string;
+    balanceValue?: string;
+    maxButton?: string;
+    paymentMethodButton?: string;
+    feeRow?: string;
+}
+/** Classes for CryptoReceiveSection component */
+export interface CryptoReceiveSectionClasses {
+    root?: string;
+    container?: string;
+    label?: string;
+    inputContainer?: string;
+    input?: string;
+    tokenSelector?: string;
+    tokenIcon?: string;
+    tokenSymbol?: string;
+    chainBadge?: string;
+    recipientRow?: string;
+    recipientLabel?: string;
+    recipientValue?: string;
+    recipientButton?: string;
+    pointsRow?: string;
+    feeRow?: string;
+}
+/** Classes for PanelOnramp component */
+export interface PanelOnrampClasses {
+    root?: string;
+    container?: string;
+    amountInput?: string;
+    presetButtons?: string;
+    presetButton?: string;
+    paymentMethodRow?: string;
+    recipientRow?: string;
+    destinationRow?: string;
+    feeRow?: string;
+    pointsRow?: string;
+}
+/** Classes for OrderDetails component */
+export interface OrderDetailsClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    statusBadge?: string;
+    statusPending?: string;
+    statusSuccess?: string;
+    statusFailed?: string;
+    amountSection?: string;
+    detailsSection?: string;
+    detailRow?: string;
+    detailLabel?: string;
+    detailValue?: string;
+    transactionLink?: string;
+    actionButton?: string;
+    backButton?: string;
+    returnButton?: string;
+}
+/** Classes for RecipientSelection component */
+export interface RecipientSelectionClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    searchInput?: string;
+    recipientList?: string;
+    recipientItem?: string;
+    recipientItemActive?: string;
+    recipientAvatar?: string;
+    recipientName?: string;
+    recipientAddress?: string;
+    confirmButton?: string;
+    backButton?: string;
+}
+/** Classes for CryptoPaymentMethod component */
+export interface CryptoPaymentMethodClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    optionsList?: string;
+    optionItem?: string;
+    optionItemActive?: string;
+    optionIcon?: string;
+    optionLabel?: string;
+    optionDescription?: string;
+    backButton?: string;
+}
+/** Classes for FiatPaymentMethod component */
+export interface FiatPaymentMethodClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    optionsList?: string;
+    optionItem?: string;
+    optionItemActive?: string;
+    optionIcon?: string;
+    optionLabel?: string;
+    optionDescription?: string;
+    backButton?: string;
+}
+/** Classes for WarningText component */
+export interface WarningTextClasses {
+    root?: string;
+}
+/** Classes for ChainWarningText component */
+export interface ChainWarningTextClasses {
+    root?: string;
+}
+/** Classes for TabSection component */
+export interface TabSectionClasses {
+    root?: string;
+    container?: string;
+    tabIndicator?: string;
+    tabButton?: string;
+    tabButtonActive?: string;
+}
+/** Classes for FeeDetailPanel component */
+export interface FeeDetailPanelClasses {
+    root?: string;
+    container?: string;
+    title?: string;
+    tierCard?: string;
+    tierCardTitle?: string;
+    tierRow?: string;
+    tierRowActive?: string;
+    tierLabel?: string;
+    tierValue?: string;
+    expandButton?: string;
+    summaryCard?: string;
+    summaryRow?: string;
+    summaryLabel?: string;
+    summaryValue?: string;
+    summaryDivider?: string;
+    totalRow?: string;
+    totalLabel?: string;
+    totalValue?: string;
+    backButton?: string;
+}
+/** Classes for PointsDetailPanel component */
+export interface PointsDetailPanelClasses {
+    root?: string;
+    container?: string;
+    title?: string;
+    description?: string;
+    highlightText?: string;
+    link?: string;
+    infoCard?: string;
+    infoCardTitle?: string;
+    infoList?: string;
+    infoListItem?: string;
+    backButton?: string;
+}
+/** Classes for PanelOnrampPayment component */
+export interface PanelOnrampPaymentClasses {
+    root?: string;
+    container?: string;
+    summaryTitle?: string;
+    summaryCard?: string;
+    summaryRow?: string;
+    summaryLabel?: string;
+    summaryValue?: string;
+    summaryDivider?: string;
+    amountRow?: string;
+    amountValue?: string;
+    feeText?: string;
+    loadingContainer?: string;
+    loadingSpinner?: string;
+    loadingText?: string;
+    paymentMethodTitle?: string;
+    paymentMethodIcons?: string;
+    paymentOption?: string;
+    paymentOptionIcon?: string;
+    paymentOptionContent?: string;
+    paymentOptionTitle?: string;
+    paymentOptionDescription?: string;
+    paymentOptionFee?: string;
+    paymentOptionChevron?: string;
+    backButton?: string;
+}
+/** Classes for OrderDetailsCollapsible component */
+export interface OrderDetailsCollapsibleClasses {
+    root?: string;
+    container?: string;
+    expandedContent?: string;
+    recipientSection?: string;
+    recipientLabel?: string;
+    recipientInfo?: string;
+    recipientName?: string;
+    recipientAddress?: string;
+    recipientCopyIcon?: string;
+    divider?: string;
+    expectedSection?: string;
+    expectedLabel?: string;
+    expectedValue?: string;
+    expectedAmount?: string;
+    chainInfo?: string;
+    chainText?: string;
+    chainLogo?: string;
+    pointsSection?: string;
+    pointsLabel?: string;
+    pointsValue?: string;
+    idSection?: string;
+    idLabel?: string;
+    idValue?: string;
+    collapsedContainer?: string;
+    collapsedButton?: string;
+    collapsedChevron?: string;
+}
+/** Classes for TransferCryptoDetails component */
+export interface TransferCryptoDetailsClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    backButton?: string;
+    title?: string;
+    timer?: string;
+    timerSvg?: string;
+    timerBackground?: string;
+    timerProgress?: string;
+    timerText?: string;
+    cardsContainer?: string;
+    amountCard?: string;
+    amountLabel?: string;
+    amountContainer?: string;
+    amountText?: string;
+    amountCopyIcon?: string;
+    chainCard?: string;
+    chainLabel?: string;
+    chainContainer?: string;
+    chainLogo?: string;
+    chainName?: string;
+    qrDepositCard?: string;
+    qrSection?: string;
+    qrWrapper?: string;
+    qrContainer?: string;
+    qrCode?: string;
+    walletHint?: string;
+    walletText?: string;
+    walletIcon?: string;
+    addressSection?: string;
+    addressLabel?: string;
+    addressCopyContainer?: string;
+    addressText?: string;
+    addressCopyIcon?: string;
+    actionsContainer?: string;
+    copyButton?: string;
+}
+/** Classes for QRDeposit component */
+export interface QRDepositClasses {
+    root?: string;
+    container?: string;
+    content?: string;
+    header?: string;
+    backButton?: string;
+    title?: string;
+    closeButton?: string;
+    tokenSelectorContainer?: string;
+    tokenSelectorLabel?: string;
+    tokenSelectorTrigger?: string;
+    qrContent?: string;
+    qrCodeContainer?: string;
+    qrCode?: string;
+    qrScanHint?: string;
+    addressContainer?: string;
+    addressLabel?: string;
+    addressRow?: string;
+    address?: string;
+    addressCopyIcon?: string;
+    watchingIndicator?: string;
+    copyButton?: string;
+    loadingContainer?: string;
+    loadingContent?: string;
+    loadingSpinner?: string;
+    loadingText?: string;
+    orderDetailsContainer?: string;
+    orderDetailsContent?: string;
+}
+/** Combined classes for all AnySpend-related components */
+export interface AnySpendAllClasses {
+    deposit?: AnySpendDepositClasses;
+    anySpend?: AnySpendClasses;
+    customExactIn?: AnySpendCustomExactInClasses;
+    cryptoPaySection?: CryptoPaySectionClasses;
+    cryptoReceiveSection?: CryptoReceiveSectionClasses;
+    panelOnramp?: PanelOnrampClasses;
+    orderDetails?: OrderDetailsClasses;
+    recipientSelection?: RecipientSelectionClasses;
+    cryptoPaymentMethod?: CryptoPaymentMethodClasses;
+    fiatPaymentMethod?: FiatPaymentMethodClasses;
+    qrDeposit?: QRDepositClasses;
+    warningText?: WarningTextClasses;
+    chainWarningText?: ChainWarningTextClasses;
+    tabSection?: TabSectionClasses;
+    feeDetailPanel?: FeeDetailPanelClasses;
+    pointsDetailPanel?: PointsDetailPanelClasses;
+    panelOnrampPayment?: PanelOnrampPaymentClasses;
+    orderDetailsCollapsible?: OrderDetailsCollapsibleClasses;
+    transferCryptoDetails?: TransferCryptoDetailsClasses;
+}

package/dist/esm/anyspend/react/components/types/classes.js

@@ -0,0 +1,5 @@
+/**
+ * Classes prop types for AnySpend components customization.
+ * Use these to override default styling of specific elements.
+ */
+export {};

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

@@ -1,4 +1,5 @@
 export * from "./useAnyspendCreateOnrampOrder";
+export * from "./useDirectTransfer";
 export * from "./useAnyspendCreateOrder";
 export * from "./useCreateDepositFirstOrder";
 export * from "./useAnyspendOrderAndTransactions";

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

@@ -1,4 +1,5 @@
 export * from "./useAnyspendCreateOnrampOrder.js";
+export * from "./useDirectTransfer.js";
 export * from "./useAnyspendCreateOrder.js";
 export * from "./useCreateDepositFirstOrder.js";
 export * from "./useAnyspendOrderAndTransactions.js";

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

@@ -9,8 +9,22 @@ export declare enum PanelView {
     ORDER_DETAILS = 4,
     LOADING = 5,
     POINTS_DETAIL = 6,
-    FEE_DETAIL = 7
+    FEE_DETAIL = 7,
+    DIRECT_TRANSFER_SUCCESS = 8
 }
+export type CustomExactInConfig = {
+    functionAbi: string;
+    functionName: string;
+    functionArgs: string[];
+    to: string;
+    spenderAddress?: string;
+    action?: string;
+};
+/**
+ * Generates encoded function data for custom contract calls.
+ * Handles amount placeholder replacement and BigInt conversion.
+ */
+export declare function generateEncodedData(config: CustomExactInConfig | undefined, amountInWei: string): string | undefined;
 interface UseAnyspendFlowProps {
     paymentType?: "crypto" | "fiat";
     recipientAddress?: string;
@@ -25,8 +39,9 @@ interface UseAnyspendFlowProps {
     slippage?: number;
     disableUrlParamManagement?: boolean;
     orderType?: "hype_duel" | "custom_exact_in" | "swap";
+    customExactInConfig?: CustomExactInConfig;
 }
-export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, destinationTokenAddress, destinationTokenChainId, slippage, disableUrlParamManagement, orderType, }: UseAnyspendFlowProps): {
+export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, destinationTokenAddress, destinationTokenChainId, slippage, disableUrlParamManagement, orderType, customExactInConfig, }: UseAnyspendFlowProps): {
     activePanel: PanelView;
     setActivePanel: import("react").Dispatch<import("react").SetStateAction<PanelView>>;
     orderId: string | undefined;
@@ -91,8 +106,11 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
     setSrcAmount: import("react").Dispatch<import("react").SetStateAction<string>>;
     dstAmount: string;
     setDstAmount: import("react").Dispatch<import("react").SetStateAction<string>>;
+    dstAmountInput: string;
+    setDstAmountInput: import("react").Dispatch<import("react").SetStateAction<string>>;
     isSrcInputDirty: boolean;
     setIsSrcInputDirty: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    tradeType: string;
     cryptoPaymentMethod: CryptoPaymentMethodType;
     setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
     selectedCryptoPaymentMethod: CryptoPaymentMethodType;
@@ -176,8 +194,10 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
         statusCode: number;
     } | undefined;
     isLoadingAnyspendQuote: boolean;
+    isQuoteLoading: boolean;
     getAnyspendQuoteError: Error | null;
     activeInputAmountInWei: string;
+    activeOutputAmountInWei: string;
     geoData: import("../../../anyspend/react").GeoData | undefined;
     coinbaseAvailablePaymentMethods: {
         id?: string;

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

@@ -1,10 +1,11 @@
 import { B3_TOKEN, getDefaultToken, USDC_BASE } from "../../../anyspend/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
 import { anyspendService } from "../../../anyspend/services/anyspend.js";
+import { normalizeAddress } from "../../../anyspend/utils/index.js";
 import { toast, useAccountWallet, useProfile, useRouter, useSearchParamsSSR, useTokenBalance, } from "../../../global-account/react/index.js";
 import { formatTokenAmount, formatUnits } from "../../../shared/utils/number.js";
 import { useEffect, useMemo, useState } from "react";
-import { parseUnits } from "viem";
+import { encodeFunctionData, parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
 import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod.js";
 import { FiatPaymentMethod } from "../components/common/FiatPaymentMethod.js";
@@ -22,9 +23,52 @@ export var PanelView;
     PanelView[PanelView["LOADING"] = 5] = "LOADING";
     PanelView[PanelView["POINTS_DETAIL"] = 6] = "POINTS_DETAIL";
     PanelView[PanelView["FEE_DETAIL"] = 7] = "FEE_DETAIL";
+    PanelView[PanelView["DIRECT_TRANSFER_SUCCESS"] = 8] = "DIRECT_TRANSFER_SUCCESS";
 })(PanelView || (PanelView = {}));
+/**
+ * Generates encoded function data for custom contract calls.
+ * Handles amount placeholder replacement and BigInt conversion.
+ */
+export function generateEncodedData(config, amountInWei) {
+    if (!config || !config.functionAbi || !config.functionName || !config.functionArgs) {
+        console.warn("customExactInConfig missing required fields for encoding:", {
+            hasConfig: !!config,
+            hasFunctionAbi: !!config?.functionAbi,
+            hasFunctionName: !!config?.functionName,
+            hasFunctionArgs: !!config?.functionArgs,
+        });
+        return undefined;
+    }
+    try {
+        const abi = JSON.parse(config.functionAbi);
+        const processedArgs = config.functionArgs.map(arg => {
+            // Replace amount placeholders ({{dstAmount}}, {{amount_out}}, etc.)
+            if (arg === "{{dstAmount}}" || arg === "{{amount_out}}") {
+                return BigInt(amountInWei);
+            }
+            // Convert numeric strings to BigInt for uint256 args
+            if (/^\d+$/.test(arg)) {
+                return BigInt(arg);
+            }
+            return arg;
+        });
+        return encodeFunctionData({
+            abi,
+            functionName: config.functionName,
+            args: processedArgs,
+        });
+    }
+    catch (e) {
+        console.error("Failed to encode function data:", e, {
+            functionAbi: config.functionAbi,
+            functionName: config.functionName,
+            functionArgs: config.functionArgs,
+        });
+        return undefined;
+    }
+}
 // This hook serves for order hype_duel and custom_exact_in
-export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, destinationTokenAddress, destinationTokenChainId, slippage = 0, disableUrlParamManagement = false, orderType = "hype_duel", }) {
+export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, destinationTokenAddress, destinationTokenChainId, slippage = 0, disableUrlParamManagement = false, orderType = "hype_duel", customExactInConfig, }) {
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     // Panel and order state
@@ -39,6 +83,8 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
     const [selectedDstToken, setSelectedDstToken] = useState(defaultDstToken);
     const [srcAmount, setSrcAmount] = useState(paymentType === "fiat" ? "5" : "0");
     const [dstAmount, setDstAmount] = useState("");
+    const [dstAmountInput, setDstAmountInput] = useState(""); // User input for destination amount (EXACT_OUTPUT mode)
+    const [debouncedDstAmountInput, setDebouncedDstAmountInput] = useState(""); // Debounced version for quote requests
     const [isSrcInputDirty, setIsSrcInputDirty] = useState(true);
     // Derive destination chain ID from token or prop (cannot change)
     const selectedDstChainId = destinationTokenChainId || selectedDstToken.chainId;
@@ -116,6 +162,16 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
         };
         fetchDestinationToken();
     }, [destinationTokenAddress, destinationTokenChainId]);
+    // Check if destination token is ready (matches the expected address from props)
+    // This is important for EXACT_OUTPUT mode where we need correct decimals
+    const isDestinationTokenReady = !destinationTokenAddress || selectedDstToken.address.toLowerCase() === destinationTokenAddress.toLowerCase();
+    // Debounce destination amount input for quote requests (500ms delay)
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedDstAmountInput(dstAmountInput);
+        }, 500);
+        return () => clearTimeout(timer);
+    }, [dstAmountInput]);
     // Helper function for onramp vendor mapping
     const getOnrampVendor = (paymentMethod) => {
         switch (paymentMethod) {
@@ -129,8 +185,16 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
     };
     // Get quote
     // For fiat payments, always use USDC decimals (6) regardless of selectedSrcToken
-    const effectiveDecimals = paymentType === "fiat" ? USDC_BASE.decimals : selectedSrcToken.decimals;
-    const activeInputAmountInWei = parseUnits(srcAmount.replace(/,/g, ""), effectiveDecimals).toString();
+    const effectiveSrcDecimals = paymentType === "fiat" ? USDC_BASE.decimals : selectedSrcToken.decimals;
+    const activeInputAmountInWei = parseUnits(srcAmount.replace(/,/g, ""), effectiveSrcDecimals).toString();
+    // Calculate output amount in wei for EXACT_OUTPUT mode
+    // Only calculate when destination token is ready (has correct decimals)
+    // Use debounced value to reduce quote API calls
+    const activeOutputAmountInWei = isDestinationTokenReady
+        ? parseUnits(debouncedDstAmountInput.replace(/,/g, "") || "0", selectedDstToken.decimals).toString()
+        : "0";
+    // Determine trade type based on which input was last edited
+    const tradeType = isSrcInputDirty ? "EXACT_INPUT" : "EXACT_OUTPUT";
     // Build quote request based on order type
     const quoteRequest = (() => {
         const baseParams = {
@@ -145,8 +209,8 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
             return {
                 ...baseParams,
                 type: "swap",
-                tradeType: "EXACT_INPUT",
-                amount: activeInputAmountInWei,
+                tradeType: tradeType,
+                amount: tradeType === "EXACT_INPUT" ? activeInputAmountInWei : activeOutputAmountInWei,
             };
         }
         else if (orderType === "hype_duel") {
@@ -157,6 +221,22 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
             };
         }
         else {
+            // custom_exact_in - for EXACT_OUTPUT, use custom type to get the quote
+            if (tradeType === "EXACT_OUTPUT") {
+                const encodedData = generateEncodedData(customExactInConfig, activeOutputAmountInWei);
+                return {
+                    ...baseParams,
+                    type: "custom",
+                    payload: {
+                        amount: activeOutputAmountInWei,
+                        data: encodedData || "",
+                        to: customExactInConfig ? normalizeAddress(customExactInConfig.to) : "",
+                        spenderAddress: customExactInConfig?.spenderAddress
+                            ? normalizeAddress(customExactInConfig.spenderAddress)
+                            : undefined,
+                    },
+                };
+            }
             return {
                 ...baseParams,
                 type: "custom_exact_in",
@@ -165,22 +245,40 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
         }
     })();
     const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = useAnyspendQuote(quoteRequest);
+    // Combined loading state: includes debounce waiting period and actual quote fetching
+    // For EXACT_OUTPUT mode, also check if we're waiting for debounce
+    const isDebouncingDstAmount = tradeType === "EXACT_OUTPUT" && dstAmountInput !== debouncedDstAmountInput;
+    const isQuoteLoading = isLoadingAnyspendQuote || isDebouncingDstAmount;
     // Get geo options for fiat
     const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(paymentType === "fiat" ? formatUnits(activeInputAmountInWei, USDC_BASE.decimals) : "0");
-    // Update destination amount when quote changes
+    // Update amounts when quote changes based on trade type
     useEffect(() => {
-        if (anyspendQuote?.data?.currencyOut?.amount && anyspendQuote.data.currencyOut.currency?.decimals) {
-            const amount = anyspendQuote.data.currencyOut.amount;
-            const decimals = anyspendQuote.data.currencyOut.currency.decimals;
-            // Apply slippage (0-100) - reduce amount by slippage percentageFixed slippage value
-            const amountWithSlippage = (BigInt(amount) * BigInt(100 - slippage)) / BigInt(100);
-            const formattedAmount = formatTokenAmount(amountWithSlippage, decimals, 6, false);
-            setDstAmount(formattedAmount);
+        if (isSrcInputDirty) {
+            // EXACT_INPUT mode: update destination amount from quote
+            if (anyspendQuote?.data?.currencyOut?.amount && anyspendQuote.data.currencyOut.currency?.decimals) {
+                const amount = anyspendQuote.data.currencyOut.amount;
+                const decimals = anyspendQuote.data.currencyOut.currency.decimals;
+                // Apply slippage (0-100) - reduce amount by slippage percentage
+                const amountWithSlippage = (BigInt(amount) * BigInt(100 - slippage)) / BigInt(100);
+                const formattedAmount = formatTokenAmount(amountWithSlippage, decimals, 6, false);
+                setDstAmount(formattedAmount);
+            }
+            else {
+                setDstAmount("");
+            }
         }
         else {
-            setDstAmount("");
+            // EXACT_OUTPUT mode: update source amount from quote
+            if (anyspendQuote?.data?.currencyIn?.amount && anyspendQuote.data.currencyIn.currency?.decimals) {
+                const amount = anyspendQuote.data.currencyIn.amount;
+                const decimals = anyspendQuote.data.currencyIn.currency.decimals;
+                const formattedAmount = formatTokenAmount(BigInt(amount), decimals, 6, false);
+                setSrcAmount(formattedAmount);
+            }
+            // Also set the display destination amount from the user input
+            setDstAmount(dstAmountInput);
         }
-    }, [anyspendQuote, slippage]);
+    }, [anyspendQuote, slippage, isSrcInputDirty, dstAmountInput]);
     // Update useEffect for URL parameter to not override loadOrder
     useEffect(() => {
         if (loadOrder || disableUrlParamManagement)
@@ -265,8 +363,11 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
         setSrcAmount,
         dstAmount,
         setDstAmount,
+        dstAmountInput,
+        setDstAmountInput,
         isSrcInputDirty,
         setIsSrcInputDirty,
+        tradeType,
         // Payment methods
         cryptoPaymentMethod,
         setCryptoPaymentMethod,
@@ -287,8 +388,10 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
         // Quote data
         anyspendQuote,
         isLoadingAnyspendQuote,
+        isQuoteLoading, // Combined loading state (includes debounce + quote fetching)
         getAnyspendQuoteError,
         activeInputAmountInWei,
+        activeOutputAmountInWei, // User's destination amount input in wei (for EXACT_OUTPUT mode)
         // Geo/onramp data
         geoData,
         coinbaseAvailablePaymentMethods,