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

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

@@ -6,7 +6,11 @@ const getStatusDisplay = (order) => {
     const srcToken = order.metadata?.srcToken;
     const dstToken = order.metadata?.dstToken;
     const formattedSrcAmount = srcToken ? (0, number_1.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 ? (0, number_1.formatTokenAmount)(BigInt(actualDstAmount), dstToken.decimals) : undefined;
     switch (order.status) {
         case "scanning_deposit_transaction": {
@@ -43,6 +47,7 @@ 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"
@@ -51,7 +56,12 @@ 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/cjs/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/esm/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/esm/anyspend/react/components/AnySpendCustomExactIn.js

@@ -10,7 +10,7 @@ import { motion } from "motion/react";
 import { useEffect, useMemo, useRef } from "react";
 import { useSetActiveWallet } from "thirdweb/react";
 import { B3_TOKEN } from "../../constants/index.js";
-import { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow.js";
+import { generateEncodedData, PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
 import { CryptoPaySection } from "./common/CryptoPaySection.js";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
@@ -27,13 +27,13 @@ export function AnySpendCustomExactIn(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomExactInInner, { ...props }) }));
 }
-function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, customExactInConfig, orderType = "custom_exact_in", minDestinationAmount, header, returnToHomeUrl, customRecipientLabel, returnHomeLabel, 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, } = useAnyspendFlow({
+    const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, selectedDstToken, selectedDstChainId, srcAmount, setSrcAmount, dstAmount, dstAmountInput, setDstAmountInput, isSrcInputDirty, setIsSrcInputDirty, tradeType, selectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, hasEnoughBalance, isBalanceLoading, anyspendQuote, isLoadingAnyspendQuote, isQuoteLoading, activeInputAmountInWei, activeOutputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = useAnyspendFlow({
         paymentType,
         recipientAddress,
         loadOrder,
@@ -45,6 +45,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         slippage: SLIPPAGE_PERCENT,
         disableUrlParamManagement: true,
         orderType,
+        customExactInConfig,
     });
     const { connectedEOAWallet } = useAccountWallet();
     const setActiveWallet = useSetActiveWallet();
@@ -59,6 +60,17 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             }
         }
     }, [preferEoa, connectedEOAWallet, setActiveWallet]);
+    // Prefill destination amount if provided (for EXACT_OUTPUT mode)
+    const appliedDestinationAmount = useRef(false);
+    useEffect(() => {
+        if (destinationTokenAmount && !appliedDestinationAmount.current) {
+            appliedDestinationAmount.current = true;
+            // Convert wei to human-readable format
+            const formattedAmount = formatUnits(destinationTokenAmount, destinationToken.decimals);
+            setDstAmountInput(formattedAmount);
+            setIsSrcInputDirty(false); // Switch to EXACT_OUTPUT mode
+        }
+    }, [destinationTokenAmount, destinationToken.decimals, setDstAmountInput, setIsSrcInputDirty]);
     const selectedRecipientOrDefault = selectedRecipientAddress ?? recipientAddress;
     const expectedDstAmountRaw = anyspendQuote?.data?.currencyOut?.amount ?? "0";
     const buildCustomPayload = (_recipient) => {
@@ -83,12 +95,14 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         };
     };
     const btnInfo = useMemo(() => {
-        if (activeInputAmountInWei === "0")
+        // Check for empty amount based on trade type
+        const isAmountEmpty = tradeType === "EXACT_OUTPUT" ? !dstAmountInput || dstAmountInput === "0" : activeInputAmountInWei === "0";
+        if (isAmountEmpty)
             return { text: "Enter an amount", disable: true, error: false, loading: false };
         if (orderType === "hype_duel" && selectedSrcToken?.address?.toLowerCase() === B3_TOKEN.address.toLowerCase()) {
             return { text: "Convert to HYPE using B3", disable: false, error: false, loading: false };
         }
-        if (isLoadingAnyspendQuote)
+        if (isQuoteLoading)
             return { text: "Loading quote...", disable: true, error: false, loading: true };
         if (isCreatingOrder || isCreatingOnrampOrder)
             return { text: "Creating order...", disable: true, error: false, loading: true };
@@ -136,7 +150,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         return { text: "Continue", disable: false, error: false, loading: false };
     }, [
         activeInputAmountInWei,
-        isLoadingAnyspendQuote,
+        isQuoteLoading,
         isCreatingOrder,
         isCreatingOnrampOrder,
         selectedRecipientOrDefault,
@@ -151,6 +165,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() === B3_TOKEN.address.toLowerCase()) {
@@ -181,9 +197,9 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
     const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsxs("div", { children: [_jsx("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), _jsx("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
     const mainView = (_jsxs("div", { className: classes?.container ||
             "anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: classes?.swapDirectionButton ||
-                                    "swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
+                                    "swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: false, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: isSrcInputDirty ? dstAmount : dstAmountInput, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
                                 setIsSrcInputDirty(false);
-                                setSrcAmount(value);
+                                setDstAmountInput(value);
                             }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL) }))] }) }), _jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (btnInfo.error && classes?.mainButtonError) ||
                         (btnInfo.disable && classes?.mainButtonDisabled) ||
                         classes?.mainButton ||
@@ -192,20 +208,49 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         try {
             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) {
             console.error(err);
@@ -241,23 +286,50 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                 toast.error("Please select a payment method");
                 return;
             }
-            const payload = buildCustomPayload(selectedRecipientOrDefault);
-            createOnrampOrder({
-                recipientAddress: selectedRecipientOrDefault,
-                orderType,
-                dstChain: selectedDstChainId,
-                dstToken: selectedDstToken,
-                srcFiatAmount: srcAmount,
-                onramp: {
-                    vendor,
-                    paymentMethod: paymentMethodString,
-                    country: geoData?.country || "US",
-                    redirectUrl: window.location.origin,
-                },
-                expectedDstAmount: expectedDstAmountRaw,
-                creatorAddress: globalAddress,
-                payload,
-            });
+            const onrampOptions = {
+                vendor,
+                paymentMethod: paymentMethodString,
+                country: geoData?.country || "US",
+                redirectUrl: window.location.origin,
+            };
+            if (tradeType === "EXACT_OUTPUT") {
+                // EXACT_OUTPUT mode: create a custom order (like AnySpendStakeUpside)
+                const expectedDstAmount = anyspendQuote.data?.currencyOut?.amount ?? "0";
+                const encodedData = generateEncodedData(customExactInConfig, activeOutputAmountInWei);
+                createOnrampOrder({
+                    recipientAddress: selectedRecipientOrDefault,
+                    orderType: "custom",
+                    dstChain: selectedDstChainId,
+                    dstToken: selectedDstToken,
+                    srcFiatAmount: srcAmount,
+                    onramp: onrampOptions,
+                    expectedDstAmount,
+                    creatorAddress: globalAddress,
+                    payload: {
+                        amount: activeOutputAmountInWei,
+                        data: encodedData,
+                        to: customExactInConfig ? normalizeAddress(customExactInConfig.to) : undefined,
+                        spenderAddress: customExactInConfig?.spenderAddress
+                            ? normalizeAddress(customExactInConfig.spenderAddress)
+                            : undefined,
+                    },
+                });
+            }
+            else {
+                // EXACT_INPUT mode: create custom_exact_in order (original behavior)
+                const payload = buildCustomPayload(selectedRecipientOrDefault);
+                createOnrampOrder({
+                    recipientAddress: selectedRecipientOrDefault,
+                    orderType,
+                    dstChain: selectedDstChainId,
+                    dstToken: selectedDstToken,
+                    srcFiatAmount: srcAmount,
+                    onramp: onrampOptions,
+                    expectedDstAmount: expectedDstAmountRaw,
+                    creatorAddress: globalAddress,
+                    payload,
+                });
+            }
         }
         catch (err) {
             console.error(err);

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

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

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

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

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

@@ -348,13 +348,11 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
     if (!srcToken || !dstToken) {
         return _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 = formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
     const actualDstAmount = order.settlement?.actualDstAmount;
     const formattedActualDstAmount = actualDstAmount

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

@@ -16,13 +16,12 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({ o
     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 || formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
     return (_jsx("div", { className: cn(classes?.container ||
             "order-details-collapsible bg-as-surface-secondary border-as-border-secondary rounded-xl border px-4 py-2", className), children: showOrderDetails ? (_jsx(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: _jsxs("div", { className: "order-details-content flex w-full flex-col items-center gap-3 whitespace-nowrap py-2 text-sm", children: [_jsxs("div", { className: "order-details-recipient-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-recipient-label text-as-tertiarry", children: "Recipient" }), _jsxs("div", { className: "order-details-recipient-info flex flex-col items-end gap-1", children: [recipientName && (_jsx("div", { className: "order-details-recipient-name text-as-primary font-semibold", children: recipientName })), _jsx(CopyToClipboard, { text: order.recipientAddress, onCopy: () => {
@@ -40,5 +39,5 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({ o
                                                 ? order.metadata.action
                                                     ? capitalizeFirstLetter(order.metadata.action)
                                                     : "Contract execution"
-                                                : "" }), _jsxs("div", { className: "order-details-expected-value flex flex-wrap items-center justify-end gap-2", children: [order.type === "swap" || order.type === "deposit_first" ? (_jsx("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : order.type === "mint_nft" ? (_jsxs("div", { className: "order-details-nft-info flex items-center gap-2", children: [_jsx("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "order-details-nft-image h-5 w-5" }), _jsx("div", { className: "order-details-nft-name", children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? (_jsxs("div", { className: "order-details-tournament-info flex items-center gap-2", children: [_jsx("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "order-details-tournament-image h-5 w-5" }), _jsx("div", { className: "order-details-tournament-name", children: tournament?.name || "Tournament" })] })) : order.type === "hype_duel" ? (_jsx("div", { className: "order-details-hype-info flex items-center gap-2", children: _jsxs("div", { className: "order-details-hype-amount", children: [formatTokenAmount(BigInt(order.payload.expectedDstAmount), dstToken.decimals), " HYPE"] }) })) : null, _jsxs("div", { className: "order-details-chain-info text-as-primary/50 flex items-center gap-2", children: [_jsxs("span", { className: "order-details-chain-text", children: ["on ", order.dstChain !== b3.id && getChainName(order.dstChain)] }), _jsx("img", { src: ALL_CHAINS[order.dstChain].logoUrl, alt: getChainName(order.dstChain), className: cn("order-details-chain-logo h-3", order.dstChain !== b3.id && "w-3 rounded-full", order.dstChain === b3.id && "h-4") })] })] })] }), points !== undefined && points !== null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-points-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-points-label text-as-tertiarry", children: "Points" }), _jsxs("div", { className: "order-details-points-value text-as-brand font-semibold", children: ["+", formatNumber(points), " pts"] })] })] })), _jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-id-total-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-id-total-label text-as-tertiarry", children: showTotal ? "Total (included fee)" : "Order ID" }), _jsx("div", { className: "order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : (_jsxs("div", { className: "order-details-collapsed flex w-full items-center", children: [_jsx("div", { className: "order-details-collapsed-divider divider w-full" }), _jsx("button", { className: "order-details-collapsed-button whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "order-details-collapsed-divider divider w-full" })] })) }));
+                                                : "" }), _jsxs("div", { className: "order-details-expected-value flex flex-wrap items-center justify-end gap-2", children: [order.type === "swap" || order.type === "deposit_first" ? (_jsx("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : order.type === "mint_nft" ? (_jsxs("div", { className: "order-details-nft-info flex items-center gap-2", children: [_jsx("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "order-details-nft-image h-5 w-5" }), _jsx("div", { className: "order-details-nft-name", children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? (_jsxs("div", { className: "order-details-tournament-info flex items-center gap-2", children: [_jsx("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "order-details-tournament-image h-5 w-5" }), _jsx("div", { className: "order-details-tournament-name", children: tournament?.name || "Tournament" })] })) : order.type === "hype_duel" ? (_jsx("div", { className: "order-details-hype-info flex items-center gap-2", children: _jsxs("div", { className: "order-details-hype-amount", children: [formatTokenAmount(BigInt(order.payload.expectedDstAmount), dstToken.decimals), " HYPE"] }) })) : order.type === "custom" || order.type === "custom_exact_in" ? (_jsx("span", { className: "order-details-amount-text", children: `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}` })) : null, _jsxs("div", { className: "order-details-chain-info text-as-primary/50 flex items-center gap-2", children: [_jsxs("span", { className: "order-details-chain-text", children: ["on ", order.dstChain !== b3.id && getChainName(order.dstChain)] }), _jsx("img", { src: ALL_CHAINS[order.dstChain].logoUrl, alt: getChainName(order.dstChain), className: cn("order-details-chain-logo h-3", order.dstChain !== b3.id && "w-3 rounded-full", order.dstChain === b3.id && "h-4") })] })] })] }), points !== undefined && points !== null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-points-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-points-label text-as-tertiarry", children: "Points" }), _jsxs("div", { className: "order-details-points-value text-as-brand font-semibold", children: ["+", formatNumber(points), " pts"] })] })] })), _jsx("div", { className: "order-details-divider divider w-full" }), _jsxs("div", { className: "order-details-id-total-section flex w-full justify-between gap-4", children: [_jsx("div", { className: "order-details-id-total-label text-as-tertiarry", children: showTotal ? "Total (included fee)" : "Order ID" }), _jsx("div", { className: "order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : (_jsxs("div", { className: "order-details-collapsed flex w-full items-center", children: [_jsx("div", { className: "order-details-collapsed-divider divider w-full" }), _jsx("button", { className: "order-details-collapsed-button whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "order-details-collapsed-divider divider w-full" })] })) }));
 });

package/dist/esm/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;