@b3dotfun/sdk 0.0.65-test.5 → 0.0.66-alpha.0

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

@@ -2,9 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getDefaultToken, USDC_BASE } from "../../../anyspend/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
-import { Button, ShinyButton, StyleRoot, TabsPrimitive, TransitionPanel, useAccountWallet, useB3, useModalStore, useProfile, useRouter, useSearchParamsSSR, useTokenBalanceDirect, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
-import BottomNavigation from "../../../global-account/react/components/ManageAccount/BottomNavigation.js";
-import { useAccountWalletImage } from "../../../global-account/react/hooks/useAccountWallet.js";
+import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet, useProfile, useRouter, useSearchParamsSSR, useTokenBalanceDirect, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/cn.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
 import invariant from "invariant";
@@ -12,11 +10,11 @@ import { ArrowDown, HistoryIcon, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
-import { defineChain } from "thirdweb";
 import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
 import { useAutoSelectCryptoPaymentMethod } from "../hooks/useAutoSelectCryptoPaymentMethod.js";
 import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi.js";
+import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
 import { CryptoPaySection } from "./common/CryptoPaySection.js";
@@ -51,25 +49,6 @@ export function AnySpend(props) {
 function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, }) {
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
-    const { partnerId } = useB3();
-    const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
-    // Define base chain with RPC for modal props
-    const baseChain = useMemo(() => defineChain({
-        id: 8453,
-        name: "Base",
-        nativeCurrency: {
-            name: "Ether",
-            symbol: "ETH",
-            decimals: 18,
-        },
-        rpc: "https://mainnet.base.org",
-        blockExplorers: [
-            {
-                name: "Basescan",
-                url: "https://basescan.org",
-            },
-        ],
-    }), []);
     // Determine if we're in "buy mode" based on whether destination token props are provided
     const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
     // Add refs to track URL state
@@ -99,9 +78,8 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         setActivePanel(targetPanel);
     }, [activePanel]);
     const [customRecipients, setCustomRecipients] = useState([]);
-    // Add state for selected payment method
-    const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState(CryptoPaymentMethodType.NONE);
-    // Add state for selected fiat payment method
+    // Payment method state with dual-state system (auto + explicit user selection)
+    const { cryptoPaymentMethod, setCryptoPaymentMethod, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, resetPaymentMethods, } = useCryptoPaymentMethodState();
     const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState(FiatPaymentMethod.NONE);
     // const [newRecipientAddress, setNewRecipientAddress] = useState("");
     // const recipientInputRef = useRef<HTMLInputElement>(null);
@@ -117,7 +95,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     });
     const [selectedSrcToken, setSelectedSrcToken] = useState(srcTokenFromUrl);
     const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
-    const [srcAmount, setSrcAmount] = useState(searchParams.get("fromAmount") || "0.01");
+    const [srcAmount, setSrcAmount] = useState(searchParams.get("fromAmount") || "0");
     // State for onramp amount
     const [srcAmountOnRamp, setSrcAmountOnRamp] = useState(searchParams.get("fromAmount") || "5");
     // State for destination chain/token selection
@@ -331,7 +309,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     const { address: globalAddress, wallet: globalWallet, connectedEOAWallet } = useAccountWallet();
     const recipientProfile = useProfile({ address: recipientAddress, fresh: true });
     const recipientName = recipientProfile.data?.name;
-    const globalWalletImage = useAccountWalletImage();
     // Auto-set active wallet from wagmi
     useAutoSetActiveWalletFromWagmi();
     // Check token balance for crypto payments
@@ -354,8 +331,9 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // Auto-select crypto payment method based on available wallets and balance
     useAutoSelectCryptoPaymentMethod({
         paymentType: activeTab,
+        cryptoPaymentMethod,
+        setCryptoPaymentMethod,
         selectedCryptoPaymentMethod,
-        setSelectedCryptoPaymentMethod,
         hasEnoughBalance,
         isBalanceLoading,
     });
@@ -476,9 +454,9 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             // Add orderId and payment method to URL for persistence
             const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
             params.set("orderId", orderId);
-            if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
-                console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
-                params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
+            if (effectiveCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+                console.log("Setting cryptoPaymentMethod in URL:", effectiveCryptoPaymentMethod);
+                params.set("cryptoPaymentMethod", effectiveCryptoPaymentMethod);
             }
             else {
                 console.log("Payment method is NONE, not setting in URL");
@@ -540,18 +518,18 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         if (activeTab === "crypto") {
             // For crypto: check payment method first, then recipient
             // If no payment method selected, show "Choose payment method"
-            if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
+            if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
                 return { text: "Choose payment method", disable: false, error: false, loading: false };
             }
             // Check recipient after payment method
             if (!recipientAddress)
                 return { text: "Select recipient", disable: false, error: false, loading: false };
             // If payment method selected, show appropriate action
-            if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
-                selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
+            if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
+                effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
                 return { text: "Swap", disable: false, error: false, loading: false };
             }
-            if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
+            if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
                 return { text: "Continue to payment", disable: false, error: false, loading: false };
             }
         }
@@ -565,7 +543,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         isCreatingOnrampOrder,
         anyspendQuote,
         activeTab,
-        selectedCryptoPaymentMethod,
+        effectiveCryptoPaymentMethod,
         selectedFiatPaymentMethod,
     ]);
     // Handle main button click
@@ -593,7 +571,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             if (activeTab === "crypto") {
                 // For crypto: check payment method first, then recipient
                 // If no payment method selected, show payment method selection
-                if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
+                if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
                     console.log("No payment method selected, showing selection panel");
                     navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward");
                     return;
@@ -605,11 +583,11 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 }
                 invariant(recipientAddress, "Recipient address is not found");
                 // If payment method is selected, create order with payment method info
-                if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
-                    selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ||
-                    selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
-                    console.log("Creating crypto order with payment method:", selectedCryptoPaymentMethod);
-                    await handleCryptoSwap(selectedCryptoPaymentMethod);
+                if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
+                    effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ||
+                    effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
+                    console.log("Creating crypto order with payment method:", effectiveCryptoPaymentMethod);
+                    await handleCryptoSwap(effectiveCryptoPaymentMethod);
                     return;
                 }
             }
@@ -622,10 +600,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     const onClickHistory = () => {
         setOrderId(undefined);
         navigateToPanel(PanelView.HISTORY, "forward");
-        setB3ModalContentType({
-            type: "anySpendOrderHistory",
-            showBackButton: false,
-        });
         // Remove orderId and paymentMethod from URL when going back to history
         const params = new URLSearchParams(searchParams.toString());
         params.delete("orderId");
@@ -787,58 +761,52 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         };
     }, [activePanel, navigateBack]);
     const historyView = (_jsx("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: _jsx(OrderHistory, { mode: mode, onBack: navigateBack, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full px-5", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, points: oat.data.points || undefined, onBack: () => {
+    const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: method => {
+                    // When user explicitly changes payment method, set it as selected
+                    setSelectedCryptoPaymentMethod(method);
+                }, points: oat.data.points || undefined, onBack: () => {
                     setOrderId(undefined);
                     navigateBack();
-                    setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
+                    // Reset payment methods when going back
+                    resetPaymentMethods();
                 } })) }) }));
-    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5", children: [_jsxs("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, 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: selectedCryptoPaymentMethod, 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)) {
-                                            navigateToPanel(panelIndex, "forward");
-                                        }
-                                        else {
-                                            setActivePanel(panelIndex);
-                                        }
-                                    }, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues }) })), _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
-                                    if (activeTab === "fiat" || isBuyMode) {
-                                        return;
-                                    }
-                                    // Swap chain selections
-                                    const tempSrcChainId = selectedSrcChainId;
-                                    const tempDstChainId = selectedDstChainId;
-                                    setSelectedSrcChainId(tempDstChainId);
-                                    setSelectedDstChainId(tempSrcChainId);
-                                    // Swap token selections
-                                    const tempSrcToken = selectedSrcToken;
-                                    const tempDstToken = selectedDstToken;
-                                    setSelectedSrcToken(tempDstToken);
-                                    setSelectedDstToken(tempSrcToken);
-                                    // Swap amounts
-                                    const tempSrcAmount = srcAmount;
-                                    const tempDstAmount = dstAmount;
-                                    setSrcAmount(tempDstAmount);
-                                    setDstAmount(tempSrcAmount);
-                                }, 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, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), setRecipientAddress: setRecipientAddress, recipientAddressFromProps: recipientAddressFromProps, globalAddress: globalAddress, dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
-                                    setIsSrcInputDirty(false);
-                                    setDstAmount(value);
-                                }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }))] }), _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: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }), _jsx("div", { className: "w-full", children: _jsx(TabsPrimitive, { defaultValue: "swap", onValueChange: value => {
-                        if (value === "settings" || value === "home") {
-                            setB3ModalContentType({
-                                type: "manageAccount",
-                                activeTab: value,
-                                setActiveTab: () => { },
-                                chain: baseChain,
-                                partnerId,
-                            });
-                        }
-                        else if (value === "swap") {
-                            setB3ModalContentType({
-                                type: "anySpend",
-                            });
-                        }
-                    }, children: _jsx(BottomNavigation, {}) }) })] }));
+    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: tab => {
+                    setActiveTab(tab);
+                    // 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) => {
+                                // Map panel index to navigation with direction
+                                const panelsWithForwardNav = [PanelView.FIAT_PAYMENT_METHOD, PanelView.RECIPIENT_SELECTION];
+                                if (panelsWithForwardNav.includes(panelIndex)) {
+                                    navigateToPanel(panelIndex, "forward");
+                                }
+                                else {
+                                    setActivePanel(panelIndex);
+                                }
+                            }, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues }) })), _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
+                            if (activeTab === "fiat" || isBuyMode) {
+                                return;
+                            }
+                            // Swap chain selections
+                            const tempSrcChainId = selectedSrcChainId;
+                            const tempDstChainId = selectedDstChainId;
+                            setSelectedSrcChainId(tempDstChainId);
+                            setSelectedDstChainId(tempSrcChainId);
+                            // Swap token selections
+                            const tempSrcToken = selectedSrcToken;
+                            const tempDstToken = selectedDstToken;
+                            setSelectedSrcToken(tempDstToken);
+                            setSelectedDstToken(tempSrcToken);
+                            // Swap amounts
+                            const tempSrcAmount = srcAmount;
+                            const tempDstAmount = dstAmount;
+                            setSrcAmount(tempDstAmount);
+                            setDstAmount(tempSrcAmount);
+                        }, 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, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), setRecipientAddress: setRecipientAddress, recipientAddressFromProps: recipientAddressFromProps, globalAddress: globalAddress, dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
+                            setIsSrcInputDirty(false);
+                            setDstAmount(value);
+                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }))] }), _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: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
     const onrampPaymentView = (_jsx(PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: recipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             navigateToPanel(PanelView.ORDER_DETAILS, "forward");
@@ -853,12 +821,16 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 params.set("paymentMethod", selectedCryptoPaymentMethod);
             }
             router.push(`${window.location.pathname}?${params.toString()}`);
-        }, onBack: navigateBack, recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWalletImage }));
+        }, onBack: navigateBack, recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWallet?.meta?.icon }));
     const recipientSelectionView = (_jsx(RecipientSelection, { initialValue: recipientAddress || "", onBack: navigateBack, onConfirm: address => {
             setRecipientAddress(address);
             navigateBack();
         } }));
-    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: navigateBack, onSelectPaymentMethod: (method) => {
+    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {
+            // When user explicitly selects a payment method, save it
+            setSelectedCryptoPaymentMethod(method);
+        }, isCreatingOrder: isCreatingOrder, onBack: navigateBack, onSelectPaymentMethod: (method) => {
+            // When user explicitly selects a payment method, save it and go back
             setSelectedCryptoPaymentMethod(method);
             navigateBack();
         } }));

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

@@ -15,6 +15,7 @@ import { toast } from "sonner";
 import { base } from "viem/chains";
 import { useFeatureFlags } from "../contexts/FeatureFlagsContext.js";
 import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi.js";
+import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
 import { FeeBreakDown } from "./common/FeeBreakDown.js";
@@ -115,8 +116,9 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     useAutoSetActiveWalletFromWagmi();
     const [activePanel, setActivePanel] = useState(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
     const [activeTab, setActiveTab] = useState(activeTabProps);
-    // Add state for selected payment methods
-    const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState(CryptoPaymentMethodType.NONE);
+    // Payment method state with dual-state system (auto + explicit user selection)
+    // Note: AnySpendCustom doesn't use auto-selection, only explicit user selection
+    const { setSelectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, resetPaymentMethods } = useCryptoPaymentMethodState();
     const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState(FiatPaymentMethod.NONE);
     // Get current user's wallet
     const currentWallet = useAccountWallet();
@@ -365,7 +367,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
             return;
         }
         // Check payment method selection for crypto tab
-        if (activeTab === "crypto" && selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
+        if (activeTab === "crypto" && effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
             setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
             return;
         }
@@ -437,12 +439,17 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                         : orderType === "join_tournament"
                             ? "Join for"
                             : "Recipient" }), _jsxs("div", { className: "flex items-center gap-2", children: [recipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx(_Fragment, { children: _jsx("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: _jsx("span", { children: recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress) }) }) }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) })), _jsx(ChevronRight, { className: "h-4 w-4" })] })] }, recipientAddress)) : null;
-    const historyView = (_jsx("div", { className: cn("mx-auto flex w-full max-w-2xl flex-col items-center", mode === "modal" && "bg-b3-react-background"), children: _jsx(OrderHistory, { mode: mode, onBack: () => {
+    const historyView = (_jsx("div", { className: cn("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: _jsx(OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background rounded-xl"), children: [oat && (_jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
+    const orderDetailsView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background rounded-xl"), children: [oat && (_jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: activeTab === "fiat" ? CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: method => {
+                    // When user explicitly changes payment method, set it as selected
+                    setSelectedCryptoPaymentMethod(method);
+                }, onBack: () => {
                     setOrderId(undefined);
                     setActivePanel(PanelView.CONFIRM_ORDER);
+                    // Reset payment methods when going back
+                    resetPaymentMethods();
                     // Remove orderId from URL when canceling
                     const params = new URLSearchParams(searchParams.toString());
                     params.delete("orderId");
@@ -462,17 +469,19 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     // Confirm order view.
     const confirmOrderView = (_jsxs("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), _jsxs(Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [_jsx("div", { className: "w-full", children: _jsxs("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [_jsx("div", { className: cn("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
                                         setActiveTab("crypto");
-                                        setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+                                        // Reset payment methods when switching tabs
+                                        resetPaymentMethods();
                                         setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
                                     }, children: "Pay with crypto" }), isOnrampSupported ? (_jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
                                         setActiveTab("fiat");
-                                        setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+                                        // Reset payment methods when switching tabs
+                                        resetPaymentMethods();
                                         setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
                                     }, children: "Pay with fiat" })) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", "text-as-primary/50 cursor-not-allowed bg-transparent"), disabled: true, children: "Pay with fiat" }) }), _jsx(TooltipContent, { children: _jsx("span", { className: "text-as-primary w-[140px]", children: "Fiat payments are not supported for this amount" }) })] }))] }) }), _jsx(TabsContent, { value: "crypto", children: _jsxs("div", { className: "mt-2 flex flex-col gap-6", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [_jsxs(motion.div, { initial: false, animate: {
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsx(_Fragment, { children: _jsx("span", { className: "text-as-tertiarry flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") }) })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsx(_Fragment, { children: _jsx("span", { className: "text-as-tertiarry flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") }) })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(motion.div, { initial: false, animate: {
                                                         opacity: hasMounted ? 1 : 0,
                                                         y: hasMounted ? 0 : 20,
                                                         filter: hasMounted ? "blur(0px)" : "blur(10px)",
@@ -488,7 +497,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
                                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                        }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote, onClick: () => handleConfirmOrder(), className: "relative w-full", children: isCreatingOrder ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Loading quote..." })] })) : !recipientAddress ? ("Select recipient") : selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE ? ("Choose payment method") : anyspendQuote ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Checkout" }), _jsx(ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) }), _jsx(TabsContent, { value: "fiat", children: _jsxs("div", { className: "mt-2 flex flex-col gap-6", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [_jsxs(motion.div, { initial: false, animate: {
+                                        }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote, onClick: () => handleConfirmOrder(), className: "relative w-full", children: isCreatingOrder ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Loading quote..." })] })) : !recipientAddress ? ("Select recipient") : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE ? ("Choose payment method") : anyspendQuote ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Checkout" }), _jsx(ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) }), _jsx(TabsContent, { value: "fiat", children: _jsxs("div", { className: "mt-2 flex flex-col gap-6", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [_jsxs(motion.div, { initial: false, animate: {
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
@@ -515,7 +524,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 setActivePanel(PanelView.CONFIRM_ORDER);
             } }) }));
     // Crypto payment method view
-    const cryptoPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(CryptoPaymentMethod, { selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
+    const cryptoPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(CryptoPaymentMethod, { globalAddress: currentWallet?.wallet?.address, globalWallet: currentWallet?.wallet, selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {
+                // When user explicitly selects a payment method, save it
+                setSelectedCryptoPaymentMethod(method);
+            }, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
+                // When user explicitly selects a payment method, save it and go back
                 setSelectedCryptoPaymentMethod(method);
                 setActivePanel(PanelView.CONFIRM_ORDER);
             } }) }));

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

@@ -24,7 +24,9 @@ export interface AnySpendCustomExactInProps {
     }) => void;
     customUsdInputValues?: string[];
     preferEoa?: boolean;
-    customExactInConfig: CustomExactInConfig;
+    customExactInConfig?: CustomExactInConfig;
+    orderType?: "hype_duel" | "custom_exact_in";
+    minDestinationAmount?: number;
     header?: ({ anyspendPrice, isLoadingAnyspendPrice, }: {
         anyspendPrice: GetQuoteResponse | undefined;
         isLoadingAnyspendPrice: boolean;