@b3dotfun/sdk 0.1.2-alpha.2 → 0.1.2-alpha.4

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";
@@ -23,8 +24,50 @@ export var PanelView;
     PanelView[PanelView["POINTS_DETAIL"] = 6] = "POINTS_DETAIL";
     PanelView[PanelView["FEE_DETAIL"] = 7] = "FEE_DETAIL";
 })(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 +82,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 +161,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 +184,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 +208,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 +220,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 +244,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 +362,11 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
         setSrcAmount,
         dstAmount,
         setDstAmount,
+        dstAmountInput,
+        setDstAmountInput,
         isSrcInputDirty,
         setIsSrcInputDirty,
+        tradeType,
         // Payment methods
         cryptoPaymentMethod,
         setCryptoPaymentMethod,
@@ -287,8 +387,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,

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

@@ -35,7 +35,7 @@ export function useRecipientAddressState({ recipientAddressFromProps, walletAddr
     // selectedRecipientAddress: explicitly selected by user (undefined means no explicit selection)
     const [selectedRecipientAddress, setSelectedRecipientAddress] = useState(undefined);
     // The effective recipient address, derived on each render, respecting priority.
-    const effectiveRecipientAddress = recipientAddressFromProps || selectedRecipientAddress || walletAddress || globalAddress;
+    const effectiveRecipientAddress = selectedRecipientAddress || recipientAddressFromProps || walletAddress || globalAddress;
     // Helper function to reset user's manual selection.
     const resetRecipientAddress = () => {
         setSelectedRecipientAddress(undefined);

package/dist/esm/anyspend/utils/format.js

@@ -3,7 +3,11 @@ export const getStatusDisplay = (order) => {
     const srcToken = order.metadata?.srcToken;
     const dstToken = order.metadata?.dstToken;
     const formattedSrcAmount = srcToken ? formatTokenAmount(BigInt(order.srcAmount), srcToken.decimals) : undefined;
-    const actualDstAmount = order.settlement?.actualDstAmount;
+    // For custom orders, use payload.amount as fallback if actualDstAmount is not available
+    const actualDstAmount = order.settlement?.actualDstAmount ||
+        (order.type === "custom" || order.type === "custom_exact_in" || order.type === "deposit_first"
+            ? order.payload.amount?.toString()
+            : undefined);
     const formattedActualDstAmount = actualDstAmount && dstToken ? formatTokenAmount(BigInt(actualDstAmount), dstToken.decimals) : undefined;
     switch (order.status) {
         case "scanning_deposit_transaction": {
@@ -40,6 +44,7 @@ export const getStatusDisplay = (order) => {
             };
         case "executed": {
             const receivedText = formattedActualDstAmount && dstToken ? `Received ${formattedActualDstAmount} ${dstToken.symbol}` : undefined;
+            const actionText = order.metadata?.action || "Order";
             const { text, description } = order.type === "swap"
                 ? { text: receivedText || "Swap Complete", description: "Your swap has been completed successfully." }
                 : order.type === "mint_nft"
@@ -48,7 +53,12 @@ export const getStatusDisplay = (order) => {
                         ? { text: "Tournament Joined", description: "You have joined the tournament" }
                         : order.type === "fund_tournament"
                             ? { text: "Tournament Funded", description: "You have funded the tournament" }
-                            : { text: receivedText || "Order Complete", description: "Your order has been completed" };
+                            : order.type === "custom" || order.type === "custom_exact_in"
+                                ? {
+                                    text: receivedText || `${actionText} Complete`,
+                                    description: "Your order has been completed successfully.",
+                                }
+                                : { text: receivedText || "Order Complete", description: "Your order has been completed" };
             return { text, status: "success", description };
         }
         case "refunding":

package/dist/esm/global-account/react/stores/useModalStore.d.ts

@@ -306,6 +306,8 @@ export interface AnySpendDepositUpsideProps extends BaseModalProps {
     depositContractAddress: string;
     /** Token to deposit */
     token: components["schemas"]["Token"];
+    /** The exact amount of destination tokens to receive, in wei. This will pre-fill the output amount and switch to an exact output swap. */
+    destinationTokenAmount?: string;
     /** Callback function called when the deposit is successful */
     onSuccess?: () => void;
 }

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

@@ -18,6 +18,7 @@ export interface AnySpendCustomExactInProps {
     sourceTokenChainId?: number;
     destinationToken: components["schemas"]["Token"];
     destinationChainId: number;
+    destinationTokenAmount?: string;
     onSuccess?: (amount: string) => void;
     onOpenCustomModal?: () => void;
     mainFooter?: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import { components } from "@b3dotfun/sdk/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/types/anyspend/react/hooks/useAnyspendFlow.d.ts

@@ -11,6 +11,19 @@ export declare enum PanelView {
     POINTS_DETAIL = 6,
     FEE_DETAIL = 7
 }
+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 +38,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 +105,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 +193,10 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
         statusCode: number;
     } | undefined;
     isLoadingAnyspendQuote: boolean;
+    isQuoteLoading: boolean;
     getAnyspendQuoteError: Error | null;
     activeInputAmountInWei: string;
+    activeOutputAmountInWei: string;
     geoData: import("@b3dotfun/sdk/anyspend/react").GeoData | undefined;
     coinbaseAvailablePaymentMethods: {
         id?: string;

package/dist/types/global-account/react/stores/useModalStore.d.ts

@@ -306,6 +306,8 @@ export interface AnySpendDepositUpsideProps extends BaseModalProps {
     depositContractAddress: string;
     /** Token to deposit */
     token: components["schemas"]["Token"];
+    /** The exact amount of destination tokens to receive, in wei. This will pre-fill the output amount and switch to an exact output swap. */
+    destinationTokenAmount?: string;
     /** Callback function called when the deposit is successful */
     onSuccess?: () => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.1.2-alpha.2",
+  "version": "0.1.2-alpha.4",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/react/components/AnySpendCustomExactIn.tsx

@@ -12,15 +12,15 @@ import {
 } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
-import type { AnySpendCustomExactInClasses } from "./types/classes";
 import invariant from "invariant";
 import { ArrowDown, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useMemo, useRef } from "react";
+import type { AnySpendCustomExactInClasses } from "./types/classes";
 
 import { useSetActiveWallet } from "thirdweb/react";
 import { B3_TOKEN } from "../../constants";
-import { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow";
+import { generateEncodedData, PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaySection } from "./common/CryptoPaySection";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
@@ -53,6 +53,7 @@ export interface AnySpendCustomExactInProps {
   sourceTokenChainId?: number;
   destinationToken: components["schemas"]["Token"];
   destinationChainId: number;
+  destinationTokenAmount?: string;
   onSuccess?: (amount: string) => void;
   onOpenCustomModal?: () => void;
   mainFooter?: React.ReactNode;
@@ -105,6 +106,7 @@ function AnySpendCustomExactInInner({
   customUsdInputValues,
   preferEoa,
   customExactInConfig,
+  destinationTokenAmount,
   orderType = "custom_exact_in",
   minDestinationAmount,
   header,
@@ -135,8 +137,11 @@ function AnySpendCustomExactInInner({
     srcAmount,
     setSrcAmount,
     dstAmount,
+    dstAmountInput,
+    setDstAmountInput,
     isSrcInputDirty,
     setIsSrcInputDirty,
+    tradeType,
     selectedCryptoPaymentMethod,
     effectiveCryptoPaymentMethod,
     setSelectedCryptoPaymentMethod,
@@ -150,7 +155,9 @@ function AnySpendCustomExactInInner({
     isBalanceLoading,
     anyspendQuote,
     isLoadingAnyspendQuote,
+    isQuoteLoading,
     activeInputAmountInWei,
+    activeOutputAmountInWei,
     geoData,
     coinbaseAvailablePaymentMethods,
     stripeWeb2Support,
@@ -170,6 +177,7 @@ function AnySpendCustomExactInInner({
     slippage: SLIPPAGE_PERCENT,
     disableUrlParamManagement: true,
     orderType,
+    customExactInConfig,
   });
 
   const { connectedEOAWallet } = useAccountWallet();
@@ -188,6 +196,18 @@ function AnySpendCustomExactInInner({
     }
   }, [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";
@@ -216,11 +236,15 @@ function AnySpendCustomExactInInner({
   };
 
   const btnInfo: { text: string; disable: boolean; error: boolean; loading: boolean } = useMemo(() => {
-    if (activeInputAmountInWei === "0") return { text: "Enter an amount", disable: true, error: false, loading: false };
+    // Check for empty amount based on trade type
+    const isAmountEmpty =
+      tradeType === "EXACT_OUTPUT" ? !dstAmountInput || dstAmountInput === "0" : activeInputAmountInWei === "0";
+
+    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) return { text: "Loading quote...", disable: true, error: false, loading: true };
+    if (isQuoteLoading) return { text: "Loading quote...", disable: true, error: false, loading: true };
     if (isCreatingOrder || isCreatingOnrampOrder)
       return { text: "Creating order...", disable: true, error: false, loading: true };
     if (!selectedRecipientOrDefault) return { text: "Select recipient", disable: false, error: false, loading: false };
@@ -275,7 +299,7 @@ function AnySpendCustomExactInInner({
     return { text: "Continue", disable: false, error: false, loading: false };
   }, [
     activeInputAmountInWei,
-    isLoadingAnyspendQuote,
+    isQuoteLoading,
     isCreatingOrder,
     isCreatingOnrampOrder,
     selectedRecipientOrDefault,
@@ -290,6 +314,8 @@ function AnySpendCustomExactInInner({
     DESTINATION_TOKEN_DETAILS.SYMBOL,
     orderType,
     selectedSrcToken,
+    tradeType,
+    dstAmountInput,
   ]);
 
   const onMainButtonClick = async () => {
@@ -405,12 +431,12 @@ function AnySpendCustomExactInInner({
           {paymentType === "crypto" && (
             <CryptoReceiveSection
               isDepositMode={false}
-              isBuyMode={true}
+              isBuyMode={false}
               effectiveRecipientAddress={selectedRecipientOrDefault}
               recipientName={recipientName || undefined}
               customRecipientLabel={customRecipientLabel}
               onSelectRecipient={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
-              dstAmount={dstAmount}
+              dstAmount={isSrcInputDirty ? dstAmount : dstAmountInput}
               dstToken={selectedDstToken}
               dstTokenSymbol={DESTINATION_TOKEN_DETAILS.SYMBOL}
               dstTokenLogoURI={DESTINATION_TOKEN_DETAILS.LOGO_URI}
@@ -420,7 +446,7 @@ function AnySpendCustomExactInInner({
               isSrcInputDirty={isSrcInputDirty}
               onChangeDstAmount={value => {
                 setIsSrcInputDirty(false);
-                setSrcAmount(value);
+                setDstAmountInput(value);
               }}
               anyspendQuote={anyspendQuote}
               onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
@@ -472,21 +498,51 @@ function AnySpendCustomExactInInner({
       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,
-      });
+      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: any) {
       console.error(err);
       toast.error("Failed to create order: " + err.message);
@@ -524,24 +580,52 @@ function AnySpendCustomExactInInner({
         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: any) {
       console.error(err);
       toast.error("Failed to create order: " + err.message);