@b3dotfun/sdk 0.1.70-alpha.21 → 0.1.70-alpha.22

package/dist/cjs/anyspend/react/components/AnySpend.d.ts

@@ -64,6 +64,13 @@ export declare function AnySpend(props: {
     allowDirectTransfer?: boolean;
     /** Fixed destination token amount (in wei/smallest unit). When provided, user cannot change the amount. */
     destinationTokenAmount?: string;
+    /**
+     * Editable default destination token amount (in wei/smallest unit). Seeds the same
+     * destination-amount input as `destinationTokenAmount`, but leaves it user-editable. Ignored
+     * when `destinationTokenAmount` is also set — that prop locks the field and wins.
+     * Seeds the field once on first apply; a later change to this value does not re-fill it, so it never overwrites what the user typed.
+     */
+    defaultDestinationTokenAmount?: string;
     /** Opaque metadata passed to the order for callbacks (e.g., workflow form data) */
     callbackMetadata?: Record<string, unknown>;
     /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
@@ -78,4 +85,16 @@ export declare function AnySpend(props: {
     kycEnabled?: boolean;
     /** Whether to show the "Pay with Fiat" tab. Defaults to true. When false, the fiat tab is hidden and activeTab is forced to "crypto". */
     showFiatOption?: boolean;
+    /**
+     * Internal: true when `AnySpendDeposit` has an amount to prefill (`defaultDestinationTokenAmount`
+     * set), as opposed to any other `AnySpend`/`AnySpendDeposit` usage. Only changes
+     * `CryptoReceiveSection`'s fixed-destination branch: it lets the receive amount become an
+     * editable input (still gated by `disableAmountInput`) instead of a read-only display. Scoped
+     * this narrowly on purpose — `AnySpendDeposit` backs 15+ funding modals that are source-exact-in
+     * (the user sets the "pay with" amount; the receive side is an intended computed display), so
+     * this must stay off for all of them and only turn on for the one page that actually prefills a
+     * receive amount. Not intended for external callers — `AnySpendDeposit` derives this itself.
+     * @internal
+     */
+    isDepositMode?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/anyspend/react/components/AnySpend.js

@@ -69,7 +69,7 @@ function AnySpend(props) {
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
     return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendCustomizationContext_1.AnySpendCustomizationProvider, { slots: props.slots, content: props.content, theme: props.theme, children: (0, jsx_runtime_1.jsx)(AnySpendInner, { ...props }) }) }));
 }
-function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, lockDestinationToken = true, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, allowDirectTransfer = false, destinationTokenAmount, callbackMetadata, senderAddress, kycEnabled = false, showFiatOption = true, }) {
+function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, lockDestinationToken = true, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, allowDirectTransfer = false, destinationTokenAmount, defaultDestinationTokenAmount, callbackMetadata, senderAddress, kycEnabled = false, showFiatOption = true, isDepositMode = false, }) {
     const { slots, content } = (0, AnySpendCustomizationContext_1.useAnySpendCustomization)();
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
@@ -237,6 +237,21 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             sessionStorage.setItem("anyspend_dst_token", JSON.stringify(selectedDstToken));
     }, [selectedDstToken, isBuyMode]);
     const [isSrcInputDirty, setIsSrcInputDirty] = (0, react_4.useState)(true);
+    // Synchronous mirror of `isSrcInputDirty`. `setIsSrcInputDirty` is async relative to OTHER
+    // effects in the same commit — the quote effect (declared later, same commit) would otherwise
+    // read a pre-flip closure value and clear a just-seeded receive amount before it ever paints.
+    // Every flip goes through `markSrcDirty`, which writes this ref in the same statement, so
+    // same-commit siblings always see the latest intent. Deliberately NOT kept in sync by its own
+    // effect: an effect reading `isSrcInputDirty` from its closure would itself go stale across
+    // React 18 StrictMode's dev-mode double-invoke of mount effects (same closure re-run twice)
+    // and re-stomp this ref back to the pre-flip value between the two passes.
+    const isSrcInputDirtyRef = (0, react_4.useRef)(isSrcInputDirty);
+    // Single writer for the direction flag: keeps state and its synchronous ref mirror in lockstep
+    // so no call site — parent or child (CryptoPaySection) — can flip one without the other.
+    const markSrcDirty = (0, react_4.useCallback)((next) => {
+        setIsSrcInputDirty(next);
+        isSrcInputDirtyRef.current = next;
+    }, []);
     // Add refs to track if we've applied metadata
     const appliedSrcMetadataRef = (0, react_4.useRef)(false);
     const appliedDstMetadataRef = (0, react_4.useRef)(false);
@@ -289,17 +304,24 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     (0, react_4.useEffect)(() => {
         appliedDstMetadataRef.current = false;
     }, [selectedDstToken.address, selectedDstToken.chainId]);
-    // Prefill destination amount if provided (for fixed amount mode)
+    // Prefill destination amount if provided — fixed (locking) mode wins over the editable default,
+    // since `destinationTokenAmount` also disables the input (see `disableAmountInput` below).
     const appliedDestinationAmount = (0, react_4.useRef)(false);
+    const seedDestinationAmount = destinationTokenAmount ?? defaultDestinationTokenAmount;
     (0, react_4.useEffect)(() => {
         // Only apply when we have real metadata (not default decimals)
-        if (destinationTokenAmount && dstTokenMetadata?.decimals && !appliedDestinationAmount.current) {
-            appliedDestinationAmount.current = true;
-            const formattedAmount = (0, viem_1.formatUnits)(BigInt(destinationTokenAmount), dstTokenMetadata.decimals);
-            setDstAmount(formattedAmount);
-            setIsSrcInputDirty(false); // Switch to EXACT_OUTPUT mode
+        if (seedDestinationAmount && dstTokenMetadata?.decimals && !appliedDestinationAmount.current) {
+            try {
+                const formattedAmount = (0, viem_1.formatUnits)(BigInt(seedDestinationAmount), dstTokenMetadata.decimals);
+                appliedDestinationAmount.current = true;
+                setDstAmount(formattedAmount);
+                markSrcDirty(false); // Switch to EXACT_OUTPUT mode
+            }
+            catch {
+                // invalid seed value — no-op rather than throw into the effect (fail-closed)
+            }
         }
-    }, [destinationTokenAmount, dstTokenMetadata]);
+    }, [seedDestinationAmount, dstTokenMetadata, markSrcDirty]);
     // Load swap configuration from URL on initial render
     (0, react_4.useEffect)(() => {
         // Skip if we've already processed the URL, if we have an order to load, or if URL param management is disabled
@@ -322,7 +344,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                         }
                         else {
                             setSrcAmount(fromAmountParam);
-                            setIsSrcInputDirty(true);
+                            markSrcDirty(true);
                         }
                     }
                 }
@@ -336,7 +358,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         }
         // Mark that we've processed the initial URL
         initialUrlProcessed.current = true;
-    }, [searchParams, loadOrder, disableUrlParamManagement]);
+    }, [searchParams, loadOrder, disableUrlParamManagement, markSrcDirty]);
     // Update URL when swap configuration changes - but not on initial load
     const updateSwapParamsInURL = (0, react_4.useCallback)(() => {
         // Skip if:
@@ -558,12 +580,20 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     }, [globalAddress, effectiveRecipientAddress, customRecipients.length, setSelectedRecipientAddress]);
     // Update dependent amount when relay price changes
     (0, react_4.useEffect)(() => {
+        // Read the ref (not the closed-over `isSrcInputDirty` param) for the branch decision: the
+        // SEED effect (declared above, same commit when it fires) writes to the ref synchronously
+        // when it flips this to exact-out mode, so this effect sees that flip immediately even
+        // though `setIsSrcInputDirty`'s state update won't be visible in THIS render's closure until
+        // the next commit. Using the stale closure value here was the actual bug — it caused this
+        // effect to still treat a freshly-seeded exact-out amount as exact-in-with-no-data and clear
+        // it before it ever painted. The dependency array below stays on the real state, so this
+        // effect still re-runs correctly on every genuine transition.
         if (anyspendQuote?.data &&
             anyspendQuote.data.currencyIn?.amount &&
             anyspendQuote.data.currencyIn?.currency?.decimals &&
             anyspendQuote.data.currencyOut?.amount &&
             anyspendQuote.data.currencyOut?.currency?.decimals) {
-            if (isSrcInputDirty) {
+            if (isSrcInputDirtyRef.current) {
                 // The user is driving the SOURCE (exact-in): reflect the quote's OUTPUT even
                 // when a fixed destinationTokenAmount pre-filled the receive. That lock only
                 // governs the INITIAL exact-out state (untouched source → compute the pay for
@@ -581,7 +611,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             }
         }
         else {
-            if (isSrcInputDirty) {
+            if (isSrcInputDirtyRef.current) {
                 setDstAmount("");
             }
             else {
@@ -1067,7 +1097,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                             // Reset payment methods when switching tabs
                             resetPaymentMethods();
                             setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
-                        }, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod })), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "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: () => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward"), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect, onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") })) : ((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: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: (panelIndex) => {
+                        }, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod })), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: markSrcDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward"), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect, onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") })) : ((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: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: (panelIndex) => {
                                         // Map panel index to navigation with direction
                                         const panelsWithForwardNav = [PanelView.FIAT_PAYMENT_METHOD, PanelView.RECIPIENT_SELECTION];
                                         if (panelsWithForwardNav.includes(panelIndex)) {
@@ -1094,8 +1124,8 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                                         // Swap amounts
                                         setSrcAmount(dstAmount);
                                         setDstAmount(srcAmount);
-                                    }, 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" }) }) }) })), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, effectiveRecipientAddress: effectiveRecipientAddress, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
-                                    setIsSrcInputDirty(false);
+                                    }, 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" }) }) }) })), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: isDepositMode, isBuyMode: isBuyMode, effectiveRecipientAddress: effectiveRecipientAddress, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
+                                    markSrcDirty(false);
                                     setDstAmount(value);
                                 }, disableAmountInput: !!destinationTokenAmount, anyspendQuote: isDirectTransfer ? undefined : anyspendQuote, onShowPointsDetail: isDirectTransfer ? undefined : () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: isDirectTransfer ? undefined : () => navigateToPanel(PanelView.FEE_DETAIL, "forward") }))] }), gasPriceData && !isLoadingGas && activeTab === "crypto" && !isDirectTransfer && ((0, jsx_runtime_1.jsx)(GasIndicator_1.GasIndicator, { gasPrice: gasPriceData, className: classes?.gasIndicator || "mt-2 w-full" })), (0, jsx_runtime_1.jsxs)(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: [slots.actionButton ? (slots.actionButton({
                                 onClick: onMainButtonClick,

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

@@ -116,6 +116,14 @@ export interface AnySpendDepositProps {
     pureTransferOnly?: boolean;
     /** Fixed destination token amount (in wei/smallest unit). When provided, user cannot change the amount. */
     destinationTokenAmount?: string;
+    /**
+     * Editable default destination token amount (in wei/smallest unit). Seeds the same
+     * destination-amount input as `destinationTokenAmount`, but leaves it user-editable. Ignored
+     * when `destinationTokenAmount` is also set — that prop locks the field and wins. Applies to
+     * the standard deposit flow only; custom-function deposits ignore it.
+     * Seeds the field once on first apply; a later change to this value does not re-fill it, so it never overwrites what the user typed.
+     */
+    defaultDestinationTokenAmount?: string;
     /** Opaque metadata passed to the order for callbacks (e.g., workflow form data) */
     callbackMetadata?: Record<string, unknown>;
     /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
@@ -162,4 +170,4 @@ export interface AnySpendDepositProps {
  *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
  * />
  */
-export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, lockDestinationToken, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, showFiatOption, supportedChains, topChainsCount, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit, classes, allowDirectTransfer, pureTransferOnly, destinationTokenAmount, callbackMetadata, senderAddress, slots, content, theme, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, lockDestinationToken, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, showFiatOption, supportedChains, topChainsCount, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit, classes, allowDirectTransfer, pureTransferOnly, destinationTokenAmount, defaultDestinationTokenAmount, callbackMetadata, senderAddress, slots, content, theme, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -110,7 +110,7 @@ function ChainIcon({ chainId, className }) {
  *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
  * />
  */
-function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, lockDestinationToken = true, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, showFiatOption = true, supportedChains = DEFAULT_SUPPORTED_CHAINS, topChainsCount = 3, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit = false, classes, allowDirectTransfer = false, pureTransferOnly = false, destinationTokenAmount, callbackMetadata, senderAddress, slots, content, theme, }) {
+function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, lockDestinationToken = true, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, showFiatOption = true, supportedChains = DEFAULT_SUPPORTED_CHAINS, topChainsCount = 3, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit = false, classes, allowDirectTransfer = false, pureTransferOnly = false, destinationTokenAmount, defaultDestinationTokenAmount, callbackMetadata, senderAddress, slots, content, theme, }) {
     // Extract deposit-specific classes for convenience
     const depositClasses = classes?.deposit;
     const { connectedEOAWallet } = (0, react_1.useAccountWallet)();
@@ -269,5 +269,9 @@ function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentT
     // Deposit view
     return ((0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.form || "anyspend-deposit anyspend-deposit-form relative", children: [shouldShowChainSelection && ((0, jsx_runtime_1.jsxs)("button", { onClick: handleBack, className: depositClasses?.backButton ||
                     "anyspend-deposit-back-button text-as-secondary hover:text-as-primary absolute left-4 top-4 z-10 flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("svg", { className: depositClasses?.backIcon || "anyspend-deposit-back-icon h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }), (0, jsx_runtime_1.jsx)("span", { className: depositClasses?.backText || "anyspend-deposit-back-text text-sm", children: "Back" })] })), onClose && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: depositClasses?.closeButton ||
-                    "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), (0, jsx_runtime_1.jsx)("div", { className: depositClasses?.formContent || (0, cn_1.cn)("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isCustomDeposit ? ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.customExactIn, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, callbackMetadata: callbackMetadata, senderAddress: senderAddress, showFiatOption: showFiatOption, slots: slots, content: content, theme: theme }, selectedChainId)) : ((0, jsx_runtime_1.jsx)(AnySpend_1.AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, lockDestinationToken: lockDestinationToken, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.anySpend, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, callbackMetadata: callbackMetadata, senderAddress: senderAddress, showFiatOption: showFiatOption, slots: slots, content: content, theme: theme }, selectedChainId)) }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationTokenChainId, classes: classes?.chainWarningText || { root: "px-4 pb-4" } })] }));
+                    "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), (0, jsx_runtime_1.jsx)("div", { className: depositClasses?.formContent || (0, cn_1.cn)("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isCustomDeposit ? ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.customExactIn, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, callbackMetadata: callbackMetadata, senderAddress: senderAddress, showFiatOption: showFiatOption, slots: slots, content: content, theme: theme }, selectedChainId)) : ((0, jsx_runtime_1.jsx)(AnySpend_1.AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, lockDestinationToken: lockDestinationToken, 
+                    // Scoped to ONLY the prefill case (not every AnySpendDeposit caller — 15+ other
+                    // funding modals rely on the source-exact-in "computed display" behavior this would
+                    // otherwise change): editable destination amount only when there's a value to seed.
+                    isDepositMode: !!defaultDestinationTokenAmount, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.anySpend, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, defaultDestinationTokenAmount: defaultDestinationTokenAmount, callbackMetadata: callbackMetadata, senderAddress: senderAddress, showFiatOption: showFiatOption, slots: slots, content: content, theme: theme }, selectedChainId)) }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationTokenChainId, classes: classes?.chainWarningText || { root: "px-4 pb-4" } })] }));
 }

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

@@ -14,8 +14,12 @@ function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, effect
     return ((0, jsx_runtime_1.jsxs)(react_1.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: classes?.container ||
             "receive-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.label || "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: [isDepositMode ? "Deposit" : "Receive", isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }))] }), effectiveRecipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: classes?.recipientButton || "text-as-tertiary flex h-7 items-center gap-2 rounded-lg", onClick: onSelectRecipient, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: classes?.recipientValue || "text-as-tertiary flex items-center gap-1 text-sm", children: customRecipientLabel ||
                                         (recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(effectiveRecipientAddress || "")) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }) })) : ((0, jsx_runtime_1.jsx)("button", { className: classes?.recipientButton || "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: onSelectRecipient, children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode || isDepositMode ? (
-            // Fixed destination token display for buy mode and deposit mode
-            (0, jsx_runtime_1.jsxs)("div", { className: classes?.inputContainer || "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: classes?.input || "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.tokenSelector ||
+            // Fixed destination TOKEN for buy mode and deposit mode. The AMOUNT differs: buy mode
+            // always derives the receive amount from the source pay-in (read-only here), but deposit
+            // mode is the flow where the user states how much to receive directly — so when it's not
+            // locked (no destinationTokenAmount from the caller), render an editable amount input
+            // while keeping the token side fixed/non-interactive (hideTokenSelect).
+            (0, jsx_runtime_1.jsxs)("div", { className: classes?.inputContainer || "flex items-center justify-between", children: [isDepositMode && !disableAmountInput ? ((0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: effectiveRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: () => { }, token: dstToken, setToken: () => { }, hideTokenSelect: true, className: "w-auto flex-1 gap-0 rounded-none border-0 p-0", innerClassName: "gap-0", amountClassName: classes?.input || "text-as-primary text-2xl font-bold" })) : ((0, jsx_runtime_1.jsx)("div", { className: classes?.input || "text-as-primary text-2xl font-bold", children: dstAmount || "0" })), (0, jsx_runtime_1.jsxs)("div", { className: classes?.tokenSelector ||
                             "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [(dstTokenLogoURI || dstToken.metadata?.logoURI) && ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("img", { src: dstTokenLogoURI || dstToken.metadata?.logoURI, alt: dstTokenSymbol || dstToken.symbol, className: classes?.tokenIcon || "h-8 w-8 rounded-full" }), anyspend_1.ALL_CHAINS[dstToken.chainId]?.logoUrl && ((0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[dstToken.chainId].logoUrl, alt: "Chain", className: classes?.chainBadge || "absolute -bottom-1 -right-1 h-4 w-4 rounded-full border border-white" }))] })), (0, jsx_runtime_1.jsx)("span", { className: classes?.tokenSymbol || "text-as-brand text-lg font-bold", children: dstTokenSymbol || dstToken.symbol })] })] })) : (
             // Token selection for regular swap mode
             (0, jsx_runtime_1.jsx)("div", { className: classes?.inputContainer, children: (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: effectiveRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: setSelectedDstChainId || (() => { }), token: dstToken, setToken: setSelectedDstToken || (() => { }), disabled: disableAmountInput }) })), (0, jsx_runtime_1.jsxs)("div", { className: classes?.feeRow || "text-as-primary/50 flex h-5 items-center justify-start gap-2 text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyOut?.amountUsd, {

package/dist/cjs/global-account/react/components/B3Provider/BetterAuthProvider.js

@@ -64,20 +64,27 @@ const BetterAuthProvider = ({ partnerId }) => {
         hasAttemptedRestore.current = true;
         const restoreSession = async () => {
             debug("Attempting session restore");
+            // A _ba_token in the URL OUTRANKS a cached Feathers JWT: the user just
+            // arrived through a live sign-in link (magic link / OAuth callback), and
+            // restoring a previous identity first would strand them as the wrong
+            // user with the token silently dropped.
+            const incomingBaToken = new URLSearchParams(window.location.search).get("_ba_token");
             // 1. Try existing Feathers JWT first (fastest — no network call to Better Auth)
-            try {
-                const response = await app_1.default.reAuthenticate();
-                if (response?.user) {
-                    debug("Feathers JWT restored", { userId: response.user.userId });
-                    setUser(response.user);
-                    setIsAuthenticated(true);
-                    setIsConnected(true);
-                    setIsAuthenticating(false);
-                    return;
+            if (!incomingBaToken) {
+                try {
+                    const response = await app_1.default.reAuthenticate();
+                    if (response?.user) {
+                        debug("Feathers JWT restored", { userId: response.user.userId });
+                        setUser(response.user);
+                        setIsAuthenticated(true);
+                        setIsConnected(true);
+                        setIsAuthenticating(false);
+                        return;
+                    }
+                }
+                catch {
+                    debug("No existing Feathers JWT");
                 }
-            }
-            catch {
-                debug("No existing Feathers JWT");
             }
             // 2. Check for _ba_token in URL (OAuth callback with third-party cookie bypass).
             //    When the API and frontend are on different domains, browsers with third-party
@@ -117,6 +124,23 @@ const BetterAuthProvider = ({ partnerId }) => {
                 }
                 catch (err) {
                     debug("_ba_token exchange failed", err);
+                    // A dead injected token (expired link param, revoked session) must
+                    // not strand a user who HAS a valid cached session — fall back to
+                    // the reAuthenticate lane the token's presence skipped.
+                    try {
+                        const cached = await app_1.default.reAuthenticate();
+                        if (cached?.user) {
+                            debug("Fell back to cached Feathers JWT after _ba_token failure", { userId: cached.user.userId });
+                            setUser(cached.user);
+                            setIsAuthenticated(true);
+                            setIsConnected(true);
+                            setIsAuthenticating(false);
+                            return;
+                        }
+                    }
+                    catch {
+                        debug("No cached session to fall back to");
+                    }
                 }
             }
             // 3. Check for a Better Auth session via cookie (works when API and frontend

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

@@ -64,6 +64,13 @@ export declare function AnySpend(props: {
     allowDirectTransfer?: boolean;
     /** Fixed destination token amount (in wei/smallest unit). When provided, user cannot change the amount. */
     destinationTokenAmount?: string;
+    /**
+     * Editable default destination token amount (in wei/smallest unit). Seeds the same
+     * destination-amount input as `destinationTokenAmount`, but leaves it user-editable. Ignored
+     * when `destinationTokenAmount` is also set — that prop locks the field and wins.
+     * Seeds the field once on first apply; a later change to this value does not re-fill it, so it never overwrites what the user typed.
+     */
+    defaultDestinationTokenAmount?: string;
     /** Opaque metadata passed to the order for callbacks (e.g., workflow form data) */
     callbackMetadata?: Record<string, unknown>;
     /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
@@ -78,4 +85,16 @@ export declare function AnySpend(props: {
     kycEnabled?: boolean;
     /** Whether to show the "Pay with Fiat" tab. Defaults to true. When false, the fiat tab is hidden and activeTab is forced to "crypto". */
     showFiatOption?: boolean;
+    /**
+     * Internal: true when `AnySpendDeposit` has an amount to prefill (`defaultDestinationTokenAmount`
+     * set), as opposed to any other `AnySpend`/`AnySpendDeposit` usage. Only changes
+     * `CryptoReceiveSection`'s fixed-destination branch: it lets the receive amount become an
+     * editable input (still gated by `disableAmountInput`) instead of a read-only display. Scoped
+     * this narrowly on purpose — `AnySpendDeposit` backs 15+ funding modals that are source-exact-in
+     * (the user sets the "pay with" amount; the receive side is an intended computed display), so
+     * this must stay off for all of them and only turn on for the one page that actually prefills a
+     * receive amount. Not intended for external callers — `AnySpendDeposit` derives this itself.
+     * @internal
+     */
+    isDepositMode?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -62,7 +62,7 @@ export function AnySpend(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomizationProvider, { slots: props.slots, content: props.content, theme: props.theme, children: _jsx(AnySpendInner, { ...props }) }) }));
 }
-function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, lockDestinationToken = true, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, allowDirectTransfer = false, destinationTokenAmount, callbackMetadata, senderAddress, kycEnabled = false, showFiatOption = true, }) {
+function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, lockDestinationToken = true, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, allowDirectTransfer = false, destinationTokenAmount, defaultDestinationTokenAmount, callbackMetadata, senderAddress, kycEnabled = false, showFiatOption = true, isDepositMode = false, }) {
     const { slots, content } = useAnySpendCustomization();
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
@@ -230,6 +230,21 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             sessionStorage.setItem("anyspend_dst_token", JSON.stringify(selectedDstToken));
     }, [selectedDstToken, isBuyMode]);
     const [isSrcInputDirty, setIsSrcInputDirty] = useState(true);
+    // Synchronous mirror of `isSrcInputDirty`. `setIsSrcInputDirty` is async relative to OTHER
+    // effects in the same commit — the quote effect (declared later, same commit) would otherwise
+    // read a pre-flip closure value and clear a just-seeded receive amount before it ever paints.
+    // Every flip goes through `markSrcDirty`, which writes this ref in the same statement, so
+    // same-commit siblings always see the latest intent. Deliberately NOT kept in sync by its own
+    // effect: an effect reading `isSrcInputDirty` from its closure would itself go stale across
+    // React 18 StrictMode's dev-mode double-invoke of mount effects (same closure re-run twice)
+    // and re-stomp this ref back to the pre-flip value between the two passes.
+    const isSrcInputDirtyRef = useRef(isSrcInputDirty);
+    // Single writer for the direction flag: keeps state and its synchronous ref mirror in lockstep
+    // so no call site — parent or child (CryptoPaySection) — can flip one without the other.
+    const markSrcDirty = useCallback((next) => {
+        setIsSrcInputDirty(next);
+        isSrcInputDirtyRef.current = next;
+    }, []);
     // Add refs to track if we've applied metadata
     const appliedSrcMetadataRef = useRef(false);
     const appliedDstMetadataRef = useRef(false);
@@ -282,17 +297,24 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     useEffect(() => {
         appliedDstMetadataRef.current = false;
     }, [selectedDstToken.address, selectedDstToken.chainId]);
-    // Prefill destination amount if provided (for fixed amount mode)
+    // Prefill destination amount if provided — fixed (locking) mode wins over the editable default,
+    // since `destinationTokenAmount` also disables the input (see `disableAmountInput` below).
     const appliedDestinationAmount = useRef(false);
+    const seedDestinationAmount = destinationTokenAmount ?? defaultDestinationTokenAmount;
     useEffect(() => {
         // Only apply when we have real metadata (not default decimals)
-        if (destinationTokenAmount && dstTokenMetadata?.decimals && !appliedDestinationAmount.current) {
-            appliedDestinationAmount.current = true;
-            const formattedAmount = formatUnits(BigInt(destinationTokenAmount), dstTokenMetadata.decimals);
-            setDstAmount(formattedAmount);
-            setIsSrcInputDirty(false); // Switch to EXACT_OUTPUT mode
+        if (seedDestinationAmount && dstTokenMetadata?.decimals && !appliedDestinationAmount.current) {
+            try {
+                const formattedAmount = formatUnits(BigInt(seedDestinationAmount), dstTokenMetadata.decimals);
+                appliedDestinationAmount.current = true;
+                setDstAmount(formattedAmount);
+                markSrcDirty(false); // Switch to EXACT_OUTPUT mode
+            }
+            catch {
+                // invalid seed value — no-op rather than throw into the effect (fail-closed)
+            }
         }
-    }, [destinationTokenAmount, dstTokenMetadata]);
+    }, [seedDestinationAmount, dstTokenMetadata, markSrcDirty]);
     // Load swap configuration from URL on initial render
     useEffect(() => {
         // Skip if we've already processed the URL, if we have an order to load, or if URL param management is disabled
@@ -315,7 +337,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                         }
                         else {
                             setSrcAmount(fromAmountParam);
-                            setIsSrcInputDirty(true);
+                            markSrcDirty(true);
                         }
                     }
                 }
@@ -329,7 +351,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         }
         // Mark that we've processed the initial URL
         initialUrlProcessed.current = true;
-    }, [searchParams, loadOrder, disableUrlParamManagement]);
+    }, [searchParams, loadOrder, disableUrlParamManagement, markSrcDirty]);
     // Update URL when swap configuration changes - but not on initial load
     const updateSwapParamsInURL = useCallback(() => {
         // Skip if:
@@ -551,12 +573,20 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     }, [globalAddress, effectiveRecipientAddress, customRecipients.length, setSelectedRecipientAddress]);
     // Update dependent amount when relay price changes
     useEffect(() => {
+        // Read the ref (not the closed-over `isSrcInputDirty` param) for the branch decision: the
+        // SEED effect (declared above, same commit when it fires) writes to the ref synchronously
+        // when it flips this to exact-out mode, so this effect sees that flip immediately even
+        // though `setIsSrcInputDirty`'s state update won't be visible in THIS render's closure until
+        // the next commit. Using the stale closure value here was the actual bug — it caused this
+        // effect to still treat a freshly-seeded exact-out amount as exact-in-with-no-data and clear
+        // it before it ever painted. The dependency array below stays on the real state, so this
+        // effect still re-runs correctly on every genuine transition.
         if (anyspendQuote?.data &&
             anyspendQuote.data.currencyIn?.amount &&
             anyspendQuote.data.currencyIn?.currency?.decimals &&
             anyspendQuote.data.currencyOut?.amount &&
             anyspendQuote.data.currencyOut?.currency?.decimals) {
-            if (isSrcInputDirty) {
+            if (isSrcInputDirtyRef.current) {
                 // The user is driving the SOURCE (exact-in): reflect the quote's OUTPUT even
                 // when a fixed destinationTokenAmount pre-filled the receive. That lock only
                 // governs the INITIAL exact-out state (untouched source → compute the pay for
@@ -574,7 +604,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             }
         }
         else {
-            if (isSrcInputDirty) {
+            if (isSrcInputDirtyRef.current) {
                 setDstAmount("");
             }
             else {
@@ -1060,7 +1090,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                             // Reset payment methods when switching tabs
                             resetPaymentMethods();
                             setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
-                        }, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod })), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward"), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect, onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") })) : (_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: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: (panelIndex) => {
+                        }, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod })), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: markSrcDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward"), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect, onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") })) : (_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: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: (panelIndex) => {
                                         // Map panel index to navigation with direction
                                         const panelsWithForwardNav = [PanelView.FIAT_PAYMENT_METHOD, PanelView.RECIPIENT_SELECTION];
                                         if (panelsWithForwardNav.includes(panelIndex)) {
@@ -1087,8 +1117,8 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                                         // Swap amounts
                                         setSrcAmount(dstAmount);
                                         setDstAmount(srcAmount);
-                                    }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) })), activeTab === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, effectiveRecipientAddress: effectiveRecipientAddress, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
-                                    setIsSrcInputDirty(false);
+                                    }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) })), activeTab === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: isDepositMode, isBuyMode: isBuyMode, effectiveRecipientAddress: effectiveRecipientAddress, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
+                                    markSrcDirty(false);
                                     setDstAmount(value);
                                 }, disableAmountInput: !!destinationTokenAmount, anyspendQuote: isDirectTransfer ? undefined : anyspendQuote, onShowPointsDetail: isDirectTransfer ? undefined : () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: isDirectTransfer ? undefined : () => navigateToPanel(PanelView.FEE_DETAIL, "forward") }))] }), gasPriceData && !isLoadingGas && activeTab === "crypto" && !isDirectTransfer && (_jsx(GasIndicator, { gasPrice: gasPriceData, className: classes?.gasIndicator || "mt-2 w-full" })), _jsxs(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: [slots.actionButton ? (slots.actionButton({
                                 onClick: onMainButtonClick,

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

@@ -116,6 +116,14 @@ export interface AnySpendDepositProps {
     pureTransferOnly?: boolean;
     /** Fixed destination token amount (in wei/smallest unit). When provided, user cannot change the amount. */
     destinationTokenAmount?: string;
+    /**
+     * Editable default destination token amount (in wei/smallest unit). Seeds the same
+     * destination-amount input as `destinationTokenAmount`, but leaves it user-editable. Ignored
+     * when `destinationTokenAmount` is also set — that prop locks the field and wins. Applies to
+     * the standard deposit flow only; custom-function deposits ignore it.
+     * Seeds the field once on first apply; a later change to this value does not re-fill it, so it never overwrites what the user typed.
+     */
+    defaultDestinationTokenAmount?: string;
     /** Opaque metadata passed to the order for callbacks (e.g., workflow form data) */
     callbackMetadata?: Record<string, unknown>;
     /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
@@ -162,4 +170,4 @@ export interface AnySpendDepositProps {
  *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
  * />
  */
-export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, lockDestinationToken, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, showFiatOption, supportedChains, topChainsCount, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit, classes, allowDirectTransfer, pureTransferOnly, destinationTokenAmount, callbackMetadata, senderAddress, slots, content, theme, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, lockDestinationToken, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, showFiatOption, supportedChains, topChainsCount, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit, classes, allowDirectTransfer, pureTransferOnly, destinationTokenAmount, defaultDestinationTokenAmount, callbackMetadata, senderAddress, slots, content, theme, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -107,7 +107,7 @@ function ChainIcon({ chainId, className }) {
  *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
  * />
  */
-export function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, lockDestinationToken = true, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, showFiatOption = true, supportedChains = DEFAULT_SUPPORTED_CHAINS, topChainsCount = 3, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit = false, classes, allowDirectTransfer = false, pureTransferOnly = false, destinationTokenAmount, callbackMetadata, senderAddress, slots, content, theme, }) {
+export function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, lockDestinationToken = true, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, showFiatOption = true, supportedChains = DEFAULT_SUPPORTED_CHAINS, topChainsCount = 3, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit = false, classes, allowDirectTransfer = false, pureTransferOnly = false, destinationTokenAmount, defaultDestinationTokenAmount, callbackMetadata, senderAddress, slots, content, theme, }) {
     // Extract deposit-specific classes for convenience
     const depositClasses = classes?.deposit;
     const { connectedEOAWallet } = useAccountWallet();
@@ -266,5 +266,9 @@ export function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, p
     // Deposit view
     return (_jsxs("div", { className: depositClasses?.form || "anyspend-deposit anyspend-deposit-form relative", children: [shouldShowChainSelection && (_jsxs("button", { onClick: handleBack, className: depositClasses?.backButton ||
                     "anyspend-deposit-back-button text-as-secondary hover:text-as-primary absolute left-4 top-4 z-10 flex items-center gap-1", children: [_jsx("svg", { className: depositClasses?.backIcon || "anyspend-deposit-back-icon h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }), _jsx("span", { className: depositClasses?.backText || "anyspend-deposit-back-text text-sm", children: "Back" })] })), onClose && (_jsx("button", { onClick: onClose, className: depositClasses?.closeButton ||
-                    "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: _jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), _jsx("div", { className: depositClasses?.formContent || cn("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isCustomDeposit ? (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.customExactIn, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, callbackMetadata: callbackMetadata, senderAddress: senderAddress, showFiatOption: showFiatOption, slots: slots, content: content, theme: theme }, selectedChainId)) : (_jsx(AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, lockDestinationToken: lockDestinationToken, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.anySpend, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, callbackMetadata: callbackMetadata, senderAddress: senderAddress, showFiatOption: showFiatOption, slots: slots, content: content, theme: theme }, selectedChainId)) }), _jsx(ChainWarningText, { chainId: destinationTokenChainId, classes: classes?.chainWarningText || { root: "px-4 pb-4" } })] }));
+                    "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: _jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), _jsx("div", { className: depositClasses?.formContent || cn("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isCustomDeposit ? (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.customExactIn, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, callbackMetadata: callbackMetadata, senderAddress: senderAddress, showFiatOption: showFiatOption, slots: slots, content: content, theme: theme }, selectedChainId)) : (_jsx(AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, lockDestinationToken: lockDestinationToken, 
+                    // Scoped to ONLY the prefill case (not every AnySpendDeposit caller — 15+ other
+                    // funding modals rely on the source-exact-in "computed display" behavior this would
+                    // otherwise change): editable destination amount only when there's a value to seed.
+                    isDepositMode: !!defaultDestinationTokenAmount, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.anySpend, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, defaultDestinationTokenAmount: defaultDestinationTokenAmount, callbackMetadata: callbackMetadata, senderAddress: senderAddress, showFiatOption: showFiatOption, slots: slots, content: content, theme: theme }, selectedChainId)) }), _jsx(ChainWarningText, { chainId: destinationTokenChainId, classes: classes?.chainWarningText || { root: "px-4 pb-4" } })] }));
 }

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

@@ -11,8 +11,12 @@ export function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false,
     return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: classes?.container ||
             "receive-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsxs("div", { className: classes?.label || "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: [isDepositMode ? "Deposit" : "Receive", isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && (_jsx("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }))] }), effectiveRecipientAddress ? (_jsx("button", { className: classes?.recipientButton || "text-as-tertiary flex h-7 items-center gap-2 rounded-lg", onClick: onSelectRecipient, children: _jsxs(_Fragment, { children: [_jsx("span", { className: classes?.recipientValue || "text-as-tertiary flex items-center gap-1 text-sm", children: customRecipientLabel ||
                                         (recipientName ? formatUsername(recipientName) : shortenAddress(effectiveRecipientAddress || "")) }), _jsx(ChevronRight, { className: "h-4 w-4" })] }) })) : (_jsx("button", { className: classes?.recipientButton || "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: onSelectRecipient, children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode || isDepositMode ? (
-            // Fixed destination token display for buy mode and deposit mode
-            _jsxs("div", { className: classes?.inputContainer || "flex items-center justify-between", children: [_jsx("div", { className: classes?.input || "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), _jsxs("div", { className: classes?.tokenSelector ||
+            // Fixed destination TOKEN for buy mode and deposit mode. The AMOUNT differs: buy mode
+            // always derives the receive amount from the source pay-in (read-only here), but deposit
+            // mode is the flow where the user states how much to receive directly — so when it's not
+            // locked (no destinationTokenAmount from the caller), render an editable amount input
+            // while keeping the token side fixed/non-interactive (hideTokenSelect).
+            _jsxs("div", { className: classes?.inputContainer || "flex items-center justify-between", children: [isDepositMode && !disableAmountInput ? (_jsx(OrderTokenAmount, { address: effectiveRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: () => { }, token: dstToken, setToken: () => { }, hideTokenSelect: true, className: "w-auto flex-1 gap-0 rounded-none border-0 p-0", innerClassName: "gap-0", amountClassName: classes?.input || "text-as-primary text-2xl font-bold" })) : (_jsx("div", { className: classes?.input || "text-as-primary text-2xl font-bold", children: dstAmount || "0" })), _jsxs("div", { className: classes?.tokenSelector ||
                             "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [(dstTokenLogoURI || dstToken.metadata?.logoURI) && (_jsxs("div", { className: "relative", children: [_jsx("img", { src: dstTokenLogoURI || dstToken.metadata?.logoURI, alt: dstTokenSymbol || dstToken.symbol, className: classes?.tokenIcon || "h-8 w-8 rounded-full" }), ALL_CHAINS[dstToken.chainId]?.logoUrl && (_jsx("img", { src: ALL_CHAINS[dstToken.chainId].logoUrl, alt: "Chain", className: classes?.chainBadge || "absolute -bottom-1 -right-1 h-4 w-4 rounded-full border border-white" }))] })), _jsx("span", { className: classes?.tokenSymbol || "text-as-brand text-lg font-bold", children: dstTokenSymbol || dstToken.symbol })] })] })) : (
             // Token selection for regular swap mode
             _jsx("div", { className: classes?.inputContainer, children: _jsx(OrderTokenAmount, { address: effectiveRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: setSelectedDstChainId || (() => { }), token: dstToken, setToken: setSelectedDstToken || (() => { }), disabled: disableAmountInput }) })), _jsxs("div", { className: classes?.feeRow || "text-as-primary/50 flex h-5 items-center justify-start gap-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [formatDisplayNumber(anyspendQuote?.data?.currencyOut?.amountUsd, {