@b3dotfun/sdk 0.0.65 → 0.0.66-alpha.0

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCryptoPaymentMethodState = useCryptoPaymentMethodState;
+const react_1 = require("react");
+const CryptoPaymentMethod_1 = require("../components/common/CryptoPaymentMethod");
+/**
+ * Custom hook to manage crypto payment method state with dual-state system:
+ *
+ * - `cryptoPaymentMethod`: Auto-selected based on wallet availability and balance
+ * - `selectedCryptoPaymentMethod`: Explicitly selected by user
+ * - `effectiveCryptoPaymentMethod`: User selection takes priority over auto-selection
+ *
+ * This allows automatic payment method suggestions while respecting explicit user choices.
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   cryptoPaymentMethod,
+ *   setCryptoPaymentMethod,
+ *   selectedCryptoPaymentMethod,
+ *   setSelectedCryptoPaymentMethod,
+ *   effectiveCryptoPaymentMethod,
+ *   resetPaymentMethods
+ * } = useCryptoPaymentMethodState();
+ *
+ * // Use effectiveCryptoPaymentMethod for display
+ * // Use setSelectedCryptoPaymentMethod when user explicitly selects
+ * // Call resetPaymentMethods when switching tabs or going back
+ * ```
+ */
+function useCryptoPaymentMethodState() {
+    // cryptoPaymentMethod: auto-selected based on balance
+    const [cryptoPaymentMethod, setCryptoPaymentMethod] = (0, react_1.useState)(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE);
+    // selectedCryptoPaymentMethod: explicitly selected by user (NONE means no explicit selection)
+    const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = (0, react_1.useState)(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE);
+    // The effective payment method (user selection takes priority over auto-selection)
+    const effectiveCryptoPaymentMethod = selectedCryptoPaymentMethod !== CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE ? selectedCryptoPaymentMethod : cryptoPaymentMethod;
+    // Helper function to reset both states
+    const resetPaymentMethods = () => {
+        setCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE);
+        setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE);
+    };
+    return {
+        cryptoPaymentMethod,
+        setCryptoPaymentMethod,
+        selectedCryptoPaymentMethod,
+        setSelectedCryptoPaymentMethod,
+        effectiveCryptoPaymentMethod,
+        resetPaymentMethods,
+    };
+}

package/dist/cjs/global-account/react/components/B3DynamicModal.js

@@ -20,6 +20,7 @@ const RequestPermissions_1 = require("./RequestPermissions/RequestPermissions");
 const SignInWithB3Flow_1 = require("./SignInWithB3/SignInWithB3Flow");
 const dialog_1 = require("./ui/dialog");
 const drawer_1 = require("./ui/drawer");
+const AnySpendDepositUpside_1 = require("../../../anyspend/react/components/AnySpendDepositUpside");
 const debug = (0, debug_1.debugB3React)("B3DynamicModal");
 function B3DynamicModal() {
     const { isOpen, setB3ModalOpen, contentType, history, navigateBack } = (0, react_2.useModalStore)();
@@ -105,6 +106,8 @@ function B3DynamicModal() {
                 return (0, jsx_runtime_1.jsx)(AnySpendStakeUpside_1.AnySpendStakeUpside, { ...contentType, mode: "modal" });
             case "anySpendStakeUpsideExactIn":
                 return (0, jsx_runtime_1.jsx)(AnySpendStakeUpsideExactIn_1.AnySpendStakeUpsideExactIn, { ...contentType, mode: "modal" });
+            case "anySpendDepositUpside":
+                return (0, jsx_runtime_1.jsx)(AnySpendDepositUpside_1.AnySpendDepositUpside, { ...contentType, mode: "modal" });
             case "anySpendBuySpin":
                 return (0, jsx_runtime_1.jsx)(react_1.AnySpendBuySpin, { ...contentType, mode: "modal" });
             case "anySpendSignatureMint":

package/dist/cjs/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js

@@ -12,7 +12,6 @@ const invariant_1 = __importDefault(require("invariant"));
 const react_1 = require("react");
 const sonner_1 = require("sonner");
 const thirdweb_2 = require("thirdweb");
-const react_2 = require("thirdweb/react");
 const viem_1 = require("viem");
 const wagmi_1 = require("wagmi");
 const components_1 = require("../components");
@@ -25,7 +24,6 @@ const partnerId = String(process.env.PUBLIC_THIRDWEB_PARTNER_ID ||
 function useUnifiedChainSwitchAndExecute() {
     const { switchChainAsync } = (0, wagmi_1.useSwitchChain)();
     const [isSwitchingOrExecuting, setIsSwitchingOrExecuting] = (0, react_1.useState)(false);
-    const activeWallet = (0, react_2.useActiveWallet)();
     const { isActiveSmartWallet, isActiveEOAWallet, connectedEOAWallet } = (0, useAccountWallet_1.useAccountWallet)();
     const { account: aaAccount } = (0, components_1.useB3)();
     // Handle EOA wallet chain switch and execute transaction
@@ -40,18 +38,18 @@ function useUnifiedChainSwitchAndExecute() {
             sonner_1.toast.error(`Chain ${targetChainId} is not supported`);
             return;
         }
-        const currentChainId = activeWallet?.getChain()?.id;
+        const currentChainId = connectedEOAWallet?.getChain()?.id;
         const onCorrectChain = currentChainId === targetChainId;
         // Helper function to execute the transaction
         const executeTransaction = async () => {
-            const signer = activeWallet?.getAccount();
+            const signer = connectedEOAWallet?.getAccount();
             if (!signer) {
                 throw new Error("No account connected");
             }
             // Coinbase Smart Wallet specific chain switching (different behavior from other wallets)
             const walletChain = connectedEOAWallet.getChain();
             if (walletChain?.id !== targetChainId) {
-                activeWallet?.switchChain((0, supported_1.getThirdwebChain)(targetChainId));
+                connectedEOAWallet?.switchChain((0, supported_1.getThirdwebChain)(targetChainId));
             }
             (0, invariant_1.default)((0, viem_1.isAddress)(params.to), "params.to is not a valid address");
             const result = await signer.sendTransaction({
@@ -103,7 +101,7 @@ function useUnifiedChainSwitchAndExecute() {
         finally {
             setIsSwitchingOrExecuting(false);
         }
-    }, [connectedEOAWallet, activeWallet, switchChainAsync]);
+    }, [connectedEOAWallet, switchChainAsync]);
     // Handle AA wallet transaction (no chain switch needed for AA)
     const handleAASendTransaction = (0, react_1.useCallback)(async (targetChainId, params) => {
         if (!aaAccount) {
@@ -159,14 +157,8 @@ function useUnifiedChainSwitchAndExecute() {
         if (isActiveSmartWallet) {
             return handleAASendTransaction(targetChainId, params);
         }
-        else if (isActiveEOAWallet) {
-            return handleEOASwitchChainAndSendTransaction(targetChainId, params);
-        }
-        else {
-            sonner_1.toast.error("No wallet connected");
-            return undefined;
-        }
-    }, [isActiveSmartWallet, isActiveEOAWallet, handleAASendTransaction, handleEOASwitchChainAndSendTransaction]);
+        return handleEOASwitchChainAndSendTransaction(targetChainId, params);
+    }, [isActiveSmartWallet, handleAASendTransaction, handleEOASwitchChainAndSendTransaction]);
     return {
         switchChainAndExecute,
         switchChainAndExecuteWithEOA: handleEOASwitchChainAndSendTransaction,

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

@@ -260,6 +260,26 @@ export interface AnySpendStakeUpsideExactInProps extends BaseModalProps {
     /** Callback function called when the stake is successful */
     onSuccess?: () => void;
 }
+/**
+ * Props for the AnySpend Deposit Upside (Exact In) modal
+ * Handles token deposit operations using the custom exact in flow
+ */
+export interface AnySpendDepositUpsideProps extends BaseModalProps {
+    /** Modal type identifier */
+    type: "anySpendDepositUpside";
+    /**	Source token address */
+    sourceTokenAddress?: string;
+    /** Source token address */
+    sourceTokenChainId?: number;
+    /** Recipient address to deposit tokens for */
+    recipientAddress: string;
+    /** Deposit contract address */
+    depositContractAddress: string;
+    /** Token to deposit */
+    token: components["schemas"]["Token"];
+    /** Callback function called when the deposit is successful */
+    onSuccess?: () => void;
+}
 /**
  * Props for the AnySpend Buy Spin modal
  * Handles spin wheel entry purchases
@@ -360,7 +380,7 @@ export interface ProfileEditorModalProps extends BaseModalProps {
 /**
  * Union type of all possible modal content types
  */
-export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | ProfileEditorModalProps;
+export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendDepositUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | ProfileEditorModalProps;
 /**
  * State interface for the modal store
  */

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

@@ -14,6 +14,7 @@ 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";
@@ -77,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);
@@ -95,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,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,
     });
@@ -453,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");
@@ -517,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 };
             }
         }
@@ -542,7 +543,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         isCreatingOnrampOrder,
         anyspendQuote,
         activeTab,
-        selectedCryptoPaymentMethod,
+        effectiveCryptoPaymentMethod,
         selectedFiatPaymentMethod,
     ]);
     // Handle main button click
@@ -570,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;
@@ -582,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;
                 }
             }
@@ -760,12 +761,21 @@ 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", 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", 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) => {
+    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)) {
@@ -796,7 +806,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                         }, 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] })] }));
+                        }, 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");
@@ -816,7 +826,11 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             setRecipientAddress(address);
             navigateBack();
         } }));
-    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, 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;
         }
@@ -440,9 +442,14 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     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, { globalAddress: currentWallet?.wallet?.address, globalWallet: currentWallet?.wallet, 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;