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

package/dist/cjs/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/cjs/anyspend/react/components/AnySpendCustomExactIn.js

@@ -33,13 +33,13 @@ function AnySpendCustomExactIn(props) {
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
     return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.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, classes, }) {
+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, }) {
     const actionLabel = customExactInConfig?.action ?? "Custom Execution";
     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, } = (0, useAnyspendFlow_1.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, } = (0, useAnyspendFlow_1.useAnyspendFlow)({
         paymentType,
         recipientAddress,
         loadOrder,
@@ -51,6 +51,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         slippage: SLIPPAGE_PERCENT,
         disableUrlParamManagement: true,
         orderType,
+        customExactInConfig,
     });
     const { connectedEOAWallet } = (0, react_2.useAccountWallet)();
     const setActiveWallet = (0, react_5.useSetActiveWallet)();
@@ -65,6 +66,17 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             }
         }
     }, [preferEoa, connectedEOAWallet, setActiveWallet]);
+    // Prefill destination amount if provided (for EXACT_OUTPUT mode)
+    const appliedDestinationAmount = (0, react_4.useRef)(false);
+    (0, react_4.useEffect)(() => {
+        if (destinationTokenAmount && !appliedDestinationAmount.current) {
+            appliedDestinationAmount.current = true;
+            // Convert wei to human-readable format
+            const formattedAmount = (0, number_1.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) => {
@@ -89,12 +101,14 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         };
     };
     const btnInfo = (0, react_4.useMemo)(() => {
-        if (activeInputAmountInWei === "0")
+        // 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() === constants_1.B3_TOKEN.address.toLowerCase()) {
             return { text: "Convert to HYPE using B3", disable: false, error: false, loading: false };
         }
-        if (isLoadingAnyspendQuote)
+        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 };
@@ -142,7 +156,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         return { text: "Continue", disable: false, error: false, loading: false };
     }, [
         activeInputAmountInWei,
-        isLoadingAnyspendQuote,
+        isQuoteLoading,
         isCreatingOrder,
         isCreatingOnrampOrder,
         selectedRecipientOrDefault,
@@ -157,6 +171,8 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         DESTINATION_TOKEN_DETAILS.SYMBOL,
         orderType,
         selectedSrcToken,
+        tradeType,
+        dstAmountInput,
     ]);
     const onMainButtonClick = async () => {
         if (orderType === "hype_duel" && selectedSrcToken?.address?.toLowerCase() === constants_1.B3_TOKEN.address.toLowerCase()) {
@@ -187,9 +203,9 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
     const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
     const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: classes?.container ||
             "anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
+                                    "swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: false, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.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);
+                                setDstAmountInput(value);
                             }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL) }))] }) }), (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (btnInfo.error && classes?.mainButtonError) ||
                         (btnInfo.disable && classes?.mainButtonDisabled) ||
                         classes?.mainButton ||
@@ -198,20 +214,49 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         try {
             (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
             (0, invariant_1.default)(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;
+                (0, invariant_1.default)(srcAmountFromQuote, "Source amount from quote is not found");
+                const expectedDstAmount = anyspendQuote.data?.currencyOut?.amount ?? "0";
+                const encodedData = (0, useAnyspendFlow_1.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 ? (0, utils_1.normalizeAddress)(customExactInConfig.to) : undefined,
+                        spenderAddress: customExactInConfig?.spenderAddress
+                            ? (0, utils_1.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);
@@ -247,23 +292,50 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                 react_2.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 = (0, useAnyspendFlow_1.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 ? (0, utils_1.normalizeAddress)(customExactInConfig.to) : undefined,
+                        spenderAddress: customExactInConfig?.spenderAddress
+                            ? (0, utils_1.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);

package/dist/cjs/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/cjs/anyspend/react/components/AnySpendStakeUpsideExactIn.js

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

package/dist/cjs/anyspend/react/components/common/OrderDetails.js

@@ -354,13 +354,11 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
     if (!srcToken || !dstToken) {
         return (0, jsx_runtime_1.jsx)("div", { children: "Loading..." });
     }
-    const expectedDstAmount = order.type === "mint_nft" ||
-        order.type === "join_tournament" ||
-        order.type === "fund_tournament" ||
-        order.type === "custom" ||
-        order.type === "deposit_first"
+    const expectedDstAmount = order.type === "mint_nft" || order.type === "join_tournament" || order.type === "fund_tournament"
         ? "0"
-        : order.payload.expectedDstAmount.toString();
+        : order.type === "custom" || order.type === "deposit_first"
+            ? order.payload.amount?.toString() || "0"
+            : order.payload.expectedDstAmount.toString();
     const formattedExpectedDstAmount = (0, number_1.formatTokenAmount)(BigInt(expectedDstAmount), dstToken.decimals);
     const actualDstAmount = order.settlement?.actualDstAmount;
     const formattedActualDstAmount = actualDstAmount

package/dist/cjs/anyspend/react/components/common/OrderDetailsCollapsible.js

@@ -22,13 +22,12 @@ exports.OrderDetailsCollapsible = (0, react_3.memo)(function OrderDetailsCollaps
     const showOrderDetails = isOpen !== undefined ? isOpen : internalOpen;
     const setShowOrderDetails = onOpenChange || setInternalOpen;
     // Calculate expected amount if not provided
-    const expectedDstAmount = order.type === "mint_nft" ||
-        order.type === "join_tournament" ||
-        order.type === "fund_tournament" ||
-        order.type === "custom" ||
-        order.type === "deposit_first"
+    // For custom orders, use payload.amount as the expected destination amount
+    const expectedDstAmount = order.type === "mint_nft" || order.type === "join_tournament" || order.type === "fund_tournament"
         ? "0"
-        : order.payload.expectedDstAmount.toString();
+        : order.type === "custom" || order.type === "deposit_first"
+            ? order.payload.amount?.toString() || "0"
+            : order.payload.expectedDstAmount.toString();
     const finalFormattedExpectedDstAmount = formattedExpectedDstAmount || (0, number_1.formatTokenAmount)(BigInt(expectedDstAmount), dstToken.decimals);
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(classes?.container ||
             "order-details-collapsible bg-as-surface-secondary border-as-border-secondary rounded-xl border px-4 py-2", className), children: showOrderDetails ? ((0, jsx_runtime_1.jsx)(react_2.motion.div, { className: "order-details-expanded w-full", initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-content flex w-full flex-col items-center gap-3 whitespace-nowrap py-2 text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-details-recipient-section flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-recipient-label text-as-tertiarry", children: "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-recipient-info flex flex-col items-end gap-1", children: [recipientName && ((0, jsx_runtime_1.jsx)("div", { className: "order-details-recipient-name text-as-primary font-semibold", children: recipientName })), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: order.recipientAddress, onCopy: () => {
@@ -46,5 +45,5 @@ exports.OrderDetailsCollapsible = (0, react_3.memo)(function OrderDetailsCollaps
                                                 ? order.metadata.action
                                                     ? (0, anyspend_1.capitalizeFirstLetter)(order.metadata.action)
                                                     : "Contract execution"
-                                                : "" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-expected-value flex flex-wrap items-center justify-end gap-2", children: [order.type === "swap" || order.type === "deposit_first" ? ((0, jsx_runtime_1.jsx)("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : order.type === "mint_nft" ? ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-nft-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "order-details-nft-image h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-nft-name", children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-tournament-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "order-details-tournament-image h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-tournament-name", children: tournament?.name || "Tournament" })] })) : order.type === "hype_duel" ? ((0, jsx_runtime_1.jsx)("div", { className: "order-details-hype-info flex items-center gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-hype-amount", children: [(0, number_1.formatTokenAmount)(BigInt(order.payload.expectedDstAmount), dstToken.decimals), " HYPE"] }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "order-details-chain-info text-as-primary/50 flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "order-details-chain-text", children: ["on ", order.dstChain !== chains_1.b3.id && (0, anyspend_1.getChainName)(order.dstChain)] }), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: (0, utils_1.cn)("order-details-chain-logo h-3", order.dstChain !== chains_1.b3.id && "w-3 rounded-full", order.dstChain === chains_1.b3.id && "h-4") })] })] })] }), points !== undefined && points !== null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-divider divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-points-section flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-points-label text-as-tertiarry", children: "Points" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-points-value text-as-brand font-semibold", children: ["+", (0, formatNumber_1.formatNumber)(points), " pts"] })] })] })), (0, jsx_runtime_1.jsx)("div", { className: "order-details-divider divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-id-total-section flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-id-total-label text-as-tertiarry", children: showTotal ? "Total (included fee)" : "Order ID" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-collapsed flex w-full items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-collapsed-divider divider w-full" }), (0, jsx_runtime_1.jsx)("button", { className: "order-details-collapsed-button whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-collapsed-divider divider w-full" })] })) }));
+                                                : "" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-expected-value flex flex-wrap items-center justify-end gap-2", children: [order.type === "swap" || order.type === "deposit_first" ? ((0, jsx_runtime_1.jsx)("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : order.type === "mint_nft" ? ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-nft-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "order-details-nft-image h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-nft-name", children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-tournament-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "order-details-tournament-image h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-tournament-name", children: tournament?.name || "Tournament" })] })) : order.type === "hype_duel" ? ((0, jsx_runtime_1.jsx)("div", { className: "order-details-hype-info flex items-center gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-hype-amount", children: [(0, number_1.formatTokenAmount)(BigInt(order.payload.expectedDstAmount), dstToken.decimals), " HYPE"] }) })) : order.type === "custom" || order.type === "custom_exact_in" ? ((0, jsx_runtime_1.jsx)("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "order-details-chain-info text-as-primary/50 flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "order-details-chain-text", children: ["on ", order.dstChain !== chains_1.b3.id && (0, anyspend_1.getChainName)(order.dstChain)] }), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: (0, utils_1.cn)("order-details-chain-logo h-3", order.dstChain !== chains_1.b3.id && "w-3 rounded-full", order.dstChain === chains_1.b3.id && "h-4") })] })] })] }), points !== undefined && points !== null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-divider divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-points-section flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-points-label text-as-tertiarry", children: "Points" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-points-value text-as-brand font-semibold", children: ["+", (0, formatNumber_1.formatNumber)(points), " pts"] })] })] })), (0, jsx_runtime_1.jsx)("div", { className: "order-details-divider divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-id-total-section flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-id-total-label text-as-tertiarry", children: showTotal ? "Total (included fee)" : "Order ID" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-collapsed flex w-full items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-details-collapsed-divider divider w-full" }), (0, jsx_runtime_1.jsx)("button", { className: "order-details-collapsed-button whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), (0, jsx_runtime_1.jsx)("div", { className: "order-details-collapsed-divider divider w-full" })] })) }));
 });

package/dist/cjs/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("../../../anyspend/react").GeoData | undefined;
     coinbaseAvailablePaymentMethods: {
         id?: string;

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

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelView = void 0;
+exports.generateEncodedData = generateEncodedData;
 exports.useAnyspendFlow = useAnyspendFlow;
 const anyspend_1 = require("../../../anyspend");
 const react_1 = require("../../../anyspend/react");
 const anyspend_2 = require("../../../anyspend/services/anyspend");
+const utils_1 = require("../../../anyspend/utils");
 const react_2 = require("../../../global-account/react");
 const number_1 = require("../../../shared/utils/number");
 const react_3 = require("react");
@@ -27,8 +29,50 @@ var PanelView;
     PanelView[PanelView["POINTS_DETAIL"] = 6] = "POINTS_DETAIL";
     PanelView[PanelView["FEE_DETAIL"] = 7] = "FEE_DETAIL";
 })(PanelView || (exports.PanelView = PanelView = {}));
+/**
+ * Generates encoded function data for custom contract calls.
+ * Handles amount placeholder replacement and BigInt conversion.
+ */
+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 (0, viem_1.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
-function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, destinationTokenAddress, destinationTokenChainId, slippage = 0, disableUrlParamManagement = false, orderType = "hype_duel", }) {
+function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, destinationTokenAddress, destinationTokenChainId, slippage = 0, disableUrlParamManagement = false, orderType = "hype_duel", customExactInConfig, }) {
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
     // Panel and order state
@@ -43,6 +87,8 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
     const [selectedDstToken, setSelectedDstToken] = (0, react_3.useState)(defaultDstToken);
     const [srcAmount, setSrcAmount] = (0, react_3.useState)(paymentType === "fiat" ? "5" : "0");
     const [dstAmount, setDstAmount] = (0, react_3.useState)("");
+    const [dstAmountInput, setDstAmountInput] = (0, react_3.useState)(""); // User input for destination amount (EXACT_OUTPUT mode)
+    const [debouncedDstAmountInput, setDebouncedDstAmountInput] = (0, react_3.useState)(""); // Debounced version for quote requests
     const [isSrcInputDirty, setIsSrcInputDirty] = (0, react_3.useState)(true);
     // Derive destination chain ID from token or prop (cannot change)
     const selectedDstChainId = destinationTokenChainId || selectedDstToken.chainId;
@@ -120,6 +166,16 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
         };
         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)
+    (0, react_3.useEffect)(() => {
+        const timer = setTimeout(() => {
+            setDebouncedDstAmountInput(dstAmountInput);
+        }, 500);
+        return () => clearTimeout(timer);
+    }, [dstAmountInput]);
     // Helper function for onramp vendor mapping
     const getOnrampVendor = (paymentMethod) => {
         switch (paymentMethod) {
@@ -133,8 +189,16 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
     };
     // Get quote
     // For fiat payments, always use USDC decimals (6) regardless of selectedSrcToken
-    const effectiveDecimals = paymentType === "fiat" ? anyspend_1.USDC_BASE.decimals : selectedSrcToken.decimals;
-    const activeInputAmountInWei = (0, viem_1.parseUnits)(srcAmount.replace(/,/g, ""), effectiveDecimals).toString();
+    const effectiveSrcDecimals = paymentType === "fiat" ? anyspend_1.USDC_BASE.decimals : selectedSrcToken.decimals;
+    const activeInputAmountInWei = (0, viem_1.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
+        ? (0, viem_1.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 = {
@@ -149,8 +213,8 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
             return {
                 ...baseParams,
                 type: "swap",
-                tradeType: "EXACT_INPUT",
-                amount: activeInputAmountInWei,
+                tradeType: tradeType,
+                amount: tradeType === "EXACT_INPUT" ? activeInputAmountInWei : activeOutputAmountInWei,
             };
         }
         else if (orderType === "hype_duel") {
@@ -161,6 +225,22 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
             };
         }
         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 ? (0, utils_1.normalizeAddress)(customExactInConfig.to) : "",
+                        spenderAddress: customExactInConfig?.spenderAddress
+                            ? (0, utils_1.normalizeAddress)(customExactInConfig.spenderAddress)
+                            : undefined,
+                    },
+                };
+            }
             return {
                 ...baseParams,
                 type: "custom_exact_in",
@@ -169,22 +249,40 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
         }
     })();
     const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = (0, react_1.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 } = (0, react_1.useGeoOnrampOptions)(paymentType === "fiat" ? (0, number_1.formatUnits)(activeInputAmountInWei, anyspend_1.USDC_BASE.decimals) : "0");
-    // Update destination amount when quote changes
+    // Update amounts when quote changes based on trade type
     (0, react_3.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 = (0, number_1.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 = (0, number_1.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 = (0, number_1.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
     (0, react_3.useEffect)(() => {
         if (loadOrder || disableUrlParamManagement)
@@ -269,8 +367,11 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
         setSrcAmount,
         dstAmount,
         setDstAmount,
+        dstAmountInput,
+        setDstAmountInput,
         isSrcInputDirty,
         setIsSrcInputDirty,
+        tradeType,
         // Payment methods
         cryptoPaymentMethod,
         setCryptoPaymentMethod,
@@ -291,8 +392,10 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
         // 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/cjs/anyspend/react/hooks/useRecipientAddressState.js

@@ -38,7 +38,7 @@ function useRecipientAddressState({ recipientAddressFromProps, walletAddress, gl
     // selectedRecipientAddress: explicitly selected by user (undefined means no explicit selection)
     const [selectedRecipientAddress, setSelectedRecipientAddress] = (0, react_1.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);