@b3dotfun/sdk 0.0.65-alpha.0 → 0.0.65-alpha.1

package/dist/esm/anyspend/react/hooks/useCryptoPaymentMethodState.d.ts

@@ -0,0 +1,42 @@
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
+interface UseCryptoPaymentMethodStateResult {
+    /** Auto-selected payment method based on balance */
+    cryptoPaymentMethod: CryptoPaymentMethodType;
+    /** Function to update the auto-selected payment method */
+    setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    /** User explicitly selected payment method (NONE means no explicit selection) */
+    selectedCryptoPaymentMethod: CryptoPaymentMethodType;
+    /** Function to update the user-selected payment method */
+    setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    /** Effective payment method (user selection takes priority over auto-selection) */
+    effectiveCryptoPaymentMethod: CryptoPaymentMethodType;
+    /** Reset both payment method states to NONE */
+    resetPaymentMethods: () => void;
+}
+/**
+ * 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
+ * ```
+ */
+export declare function useCryptoPaymentMethodState(): UseCryptoPaymentMethodStateResult;
+export {};

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

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod.js";
+/**
+ * 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
+ * ```
+ */
+export function useCryptoPaymentMethodState() {
+    // cryptoPaymentMethod: auto-selected based on balance
+    const [cryptoPaymentMethod, setCryptoPaymentMethod] = useState(CryptoPaymentMethodType.NONE);
+    // selectedCryptoPaymentMethod: explicitly selected by user (NONE means no explicit selection)
+    const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState(CryptoPaymentMethodType.NONE);
+    // The effective payment method (user selection takes priority over auto-selection)
+    const effectiveCryptoPaymentMethod = selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE ? selectedCryptoPaymentMethod : cryptoPaymentMethod;
+    // Helper function to reset both states
+    const resetPaymentMethods = () => {
+        setCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+        setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+    };
+    return {
+        cryptoPaymentMethod,
+        setCryptoPaymentMethod,
+        selectedCryptoPaymentMethod,
+        setSelectedCryptoPaymentMethod,
+        effectiveCryptoPaymentMethod,
+        resetPaymentMethods,
+    };
+}

package/dist/types/anyspend/react/hooks/useAnyspendFlow.d.ts

@@ -93,8 +93,12 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
     setDstAmount: import("react").Dispatch<import("react").SetStateAction<string>>;
     isSrcInputDirty: boolean;
     setIsSrcInputDirty: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    cryptoPaymentMethod: CryptoPaymentMethodType;
+    setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
     selectedCryptoPaymentMethod: CryptoPaymentMethodType;
-    setSelectedCryptoPaymentMethod: import("react").Dispatch<import("react").SetStateAction<CryptoPaymentMethodType>>;
+    setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    effectiveCryptoPaymentMethod: CryptoPaymentMethodType;
+    resetPaymentMethods: () => void;
     selectedFiatPaymentMethod: FiatPaymentMethod;
     setSelectedFiatPaymentMethod: import("react").Dispatch<import("react").SetStateAction<FiatPaymentMethod>>;
     selectedRecipientAddress: string | undefined;

package/dist/types/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.d.ts

@@ -2,10 +2,12 @@ import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMetho
 interface UseAutoSelectCryptoPaymentMethodParams {
     /** Current payment type (crypto or fiat) */
     paymentType?: "crypto" | "fiat";
-    /** Currently selected payment method */
+    /** Auto-selected payment method based on balance (not used in hook logic, but part of state management) */
+    cryptoPaymentMethod: CryptoPaymentMethodType;
+    /** Function to update the auto-selected payment method */
+    setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    /** User explicitly selected payment method (NONE means no explicit selection) */
     selectedCryptoPaymentMethod: CryptoPaymentMethodType;
-    /** Function to update the selected payment method */
-    setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
     /** Whether user has enough balance to pay */
     hasEnoughBalance: boolean;
     /** Whether balance is still loading */
@@ -16,11 +18,11 @@ interface UseAutoSelectCryptoPaymentMethodParams {
  * based on available wallets and balance.
  *
  * Auto-selection logic:
- * - Only auto-selects when payment method is NONE (doesn't override user choices)
+ * - Only auto-selects when selectedCryptoPaymentMethod is NONE (user hasn't explicitly chosen)
  * - If EOA/Wagmi wallet connected + has balance → CONNECT_WALLET
  * - If EOA/Wagmi wallet connected + insufficient balance → TRANSFER_CRYPTO
  * - If only Global wallet available → GLOBAL_WALLET
  * - If no wallets → remains NONE
  */
-export declare function useAutoSelectCryptoPaymentMethod({ paymentType, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, hasEnoughBalance, isBalanceLoading, }: UseAutoSelectCryptoPaymentMethodParams): void;
+export declare function useAutoSelectCryptoPaymentMethod({ paymentType, cryptoPaymentMethod: _cryptoPaymentMethod, setCryptoPaymentMethod, selectedCryptoPaymentMethod, hasEnoughBalance, isBalanceLoading, }: UseAutoSelectCryptoPaymentMethodParams): void;
 export {};

package/dist/types/anyspend/react/hooks/useCryptoPaymentMethodState.d.ts

@@ -0,0 +1,42 @@
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
+interface UseCryptoPaymentMethodStateResult {
+    /** Auto-selected payment method based on balance */
+    cryptoPaymentMethod: CryptoPaymentMethodType;
+    /** Function to update the auto-selected payment method */
+    setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    /** User explicitly selected payment method (NONE means no explicit selection) */
+    selectedCryptoPaymentMethod: CryptoPaymentMethodType;
+    /** Function to update the user-selected payment method */
+    setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    /** Effective payment method (user selection takes priority over auto-selection) */
+    effectiveCryptoPaymentMethod: CryptoPaymentMethodType;
+    /** Reset both payment method states to NONE */
+    resetPaymentMethods: () => void;
+}
+/**
+ * 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
+ * ```
+ */
+export declare function useCryptoPaymentMethodState(): UseCryptoPaymentMethodStateResult;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.65-alpha.0",
+  "version": "0.0.65-alpha.1",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/react/components/AnySpend.tsx

@@ -33,6 +33,7 @@ import { base, mainnet } from "viem/chains";
 import { components } from "../../types/api";
 import { useAutoSelectCryptoPaymentMethod } from "../hooks/useAutoSelectCryptoPaymentMethod";
 import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi";
+import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
 import { CryptoPaySection } from "./common/CryptoPaySection";
@@ -174,11 +175,17 @@ function AnySpendInner({
     setActivePanel(targetPanel);
   }, [activePanel]);
   const [customRecipients, setCustomRecipients] = useState<RecipientOption[]>([]);
-  // Add state for selected payment method
-  const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState<CryptoPaymentMethodType>(
-    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>(FiatPaymentMethod.NONE);
   // const [newRecipientAddress, setNewRecipientAddress] = useState("");
   // const recipientInputRef = useRef<HTMLInputElement>(null);
@@ -467,8 +474,9 @@ function AnySpendInner({
   // Auto-select crypto payment method based on available wallets and balance
   useAutoSelectCryptoPaymentMethod({
     paymentType: activeTab,
+    cryptoPaymentMethod,
+    setCryptoPaymentMethod,
     selectedCryptoPaymentMethod,
-    setSelectedCryptoPaymentMethod,
     hasEnoughBalance,
     isBalanceLoading,
   });
@@ -602,9 +610,9 @@ function AnySpendInner({
       // 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");
       }
@@ -672,7 +680,7 @@ function AnySpendInner({
       // 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 };
       }
 
@@ -681,12 +689,12 @@ function AnySpendInner({
 
       // If payment method selected, show appropriate action
       if (
-        selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
-        selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
+        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 };
       }
     }
@@ -701,7 +709,7 @@ function AnySpendInner({
     isCreatingOnrampOrder,
     anyspendQuote,
     activeTab,
-    selectedCryptoPaymentMethod,
+    effectiveCryptoPaymentMethod,
     selectedFiatPaymentMethod,
   ]);
 
@@ -735,7 +743,7 @@ function AnySpendInner({
         // 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;
@@ -751,12 +759,12 @@ function AnySpendInner({
 
         // If payment method is selected, create order with payment method info
         if (
-          selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
-          selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ||
-          selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO
+          effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
+          effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ||
+          effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO
         ) {
-          console.log("Creating crypto order with payment method:", selectedCryptoPaymentMethod);
-          await handleCryptoSwap(selectedCryptoPaymentMethod);
+          console.log("Creating crypto order with payment method:", effectiveCryptoPaymentMethod);
+          await handleCryptoSwap(effectiveCryptoPaymentMethod);
           return;
         }
       }
@@ -962,13 +970,17 @@ function AnySpendInner({
             relayTxs={oat.data.relayTxs}
             executeTx={oat.data.executeTx}
             refundTxs={oat.data.refundTxs}
-            selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
-            onPaymentMethodChange={setSelectedCryptoPaymentMethod}
+            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();
             }}
           />
         )}
@@ -1000,7 +1012,12 @@ function AnySpendInner({
       {/* Tab section */}
       <TabSection
         activeTab={activeTab}
-        setActiveTab={setActiveTab}
+        setActiveTab={tab => {
+          setActiveTab(tab);
+          // Reset payment methods when switching tabs
+          resetPaymentMethods();
+          setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
+        }}
         setSelectedCryptoPaymentMethod={setSelectedCryptoPaymentMethod}
         setSelectedFiatPaymentMethod={setSelectedFiatPaymentMethod}
       />
@@ -1017,7 +1034,7 @@ function AnySpendInner({
             setSrcAmount={setSrcAmount}
             isSrcInputDirty={isSrcInputDirty}
             setIsSrcInputDirty={setIsSrcInputDirty}
-            selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+            selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod}
             onSelectCryptoPaymentMethod={() => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward")}
             anyspendQuote={anyspendQuote}
             onTokenSelect={onTokenSelect}
@@ -1120,7 +1137,7 @@ function AnySpendInner({
             anyspendQuote={anyspendQuote}
             onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
             onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
-            selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+            selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod}
           />
         )}
       </div>
@@ -1209,11 +1226,15 @@ function AnySpendInner({
     <CryptoPaymentMethod
       globalAddress={globalAddress}
       globalWallet={globalWallet}
-      selectedPaymentMethod={selectedCryptoPaymentMethod}
-      setSelectedPaymentMethod={setSelectedCryptoPaymentMethod}
+      selectedPaymentMethod={effectiveCryptoPaymentMethod}
+      setSelectedPaymentMethod={method => {
+        // When user explicitly selects a payment method, save it
+        setSelectedCryptoPaymentMethod(method);
+      }}
       isCreatingOrder={isCreatingOrder}
       onBack={navigateBack}
       onSelectPaymentMethod={(method: CryptoPaymentMethodType) => {
+        // When user explicitly selects a payment method, save it and go back
         setSelectedCryptoPaymentMethod(method);
         navigateBack();
       }}

package/src/anyspend/react/components/AnySpendCustom.tsx

@@ -45,6 +45,7 @@ import { toast } from "sonner";
 import { base } from "viem/chains";
 import { useFeatureFlags } from "../contexts/FeatureFlagsContext";
 import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi";
+import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
 import { FeeBreakDown } from "./common/FeeBreakDown";
@@ -250,10 +251,11 @@ function AnySpendCustomInner({
   );
   const [activeTab, setActiveTab] = useState<"crypto" | "fiat">(activeTabProps);
 
-  // Add state for selected payment methods
-  const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState<CryptoPaymentMethodType>(
-    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>(FiatPaymentMethod.NONE);
 
   // Get current user's wallet
@@ -550,7 +552,7 @@ function AnySpendCustomInner({
     }
 
     // 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;
     }
@@ -693,12 +695,17 @@ function AnySpendCustomInner({
           relayTxs={oat.data.relayTxs}
           executeTx={oat.data.executeTx}
           refundTxs={oat.data.refundTxs}
-          cryptoPaymentMethod={activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
-          selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
-          onPaymentMethodChange={setSelectedCryptoPaymentMethod}
+          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");
@@ -832,7 +839,8 @@ function AnySpendCustomInner({
               )}
               onClick={() => {
                 setActiveTab("crypto");
-                setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+                // Reset payment methods when switching tabs
+                resetPaymentMethods();
                 setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
               }}
             >
@@ -846,7 +854,8 @@ function AnySpendCustomInner({
                 )}
                 onClick={() => {
                   setActiveTab("fiat");
-                  setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+                  // Reset payment methods when switching tabs
+                  resetPaymentMethods();
                   setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
                 }}
               >
@@ -902,7 +911,7 @@ function AnySpendCustomInner({
                   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)}
                 >
-                  {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
+                  {effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
                     <>
                       {connectedAddress ? (
                         <>
@@ -915,7 +924,7 @@ function AnySpendCustomInner({
                       )}
                       <ChevronRight className="h-4 w-4" />
                     </>
-                  ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
+                  ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
                     <>
                       Transfer crypto
                       <ChevronRight className="h-4 w-4" />
@@ -1043,7 +1052,7 @@ function AnySpendCustomInner({
                     </div>
                   ) : !recipientAddress ? (
                     "Select recipient"
-                  ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE ? (
+                  ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE ? (
                     "Choose payment method"
                   ) : anyspendQuote ? (
                     <>
@@ -1239,11 +1248,15 @@ function AnySpendCustomInner({
       <CryptoPaymentMethod
         globalAddress={currentWallet?.wallet?.address}
         globalWallet={currentWallet?.wallet}
-        selectedPaymentMethod={selectedCryptoPaymentMethod}
-        setSelectedPaymentMethod={setSelectedCryptoPaymentMethod}
+        selectedPaymentMethod={effectiveCryptoPaymentMethod}
+        setSelectedPaymentMethod={method => {
+          // When user explicitly selects a payment method, save it
+          setSelectedCryptoPaymentMethod(method);
+        }}
         isCreatingOrder={isCreatingOrder}
         onBack={() => setActivePanel(PanelView.CONFIRM_ORDER)}
         onSelectPaymentMethod={(method: CryptoPaymentMethodType) => {
+          // When user explicitly selects a payment method, save it and go back
           setSelectedCryptoPaymentMethod(method);
           setActivePanel(PanelView.CONFIRM_ORDER);
         }}

package/src/anyspend/react/components/AnySpendCustomExactIn.tsx

@@ -108,6 +108,7 @@ function AnySpendCustomExactInInner({
     isSrcInputDirty,
     setIsSrcInputDirty,
     selectedCryptoPaymentMethod,
+    effectiveCryptoPaymentMethod,
     setSelectedCryptoPaymentMethod,
     selectedFiatPaymentMethod,
     setSelectedFiatPaymentMethod,
@@ -184,13 +185,13 @@ function AnySpendCustomExactInInner({
       return { text: "Get quote error", disable: true, error: true, loading: false };
 
     if (paymentType === "crypto") {
-      if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
+      if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
         return { text: "Choose payment method", disable: false, error: false, loading: false };
       }
       if (
         !hasEnoughBalance &&
         !isBalanceLoading &&
-        selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
+        effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
       ) {
         return { text: "Insufficient balance", disable: true, error: true, loading: false };
       }
@@ -213,7 +214,7 @@ function AnySpendCustomExactInInner({
     selectedRecipientOrDefault,
     anyspendQuote,
     paymentType,
-    selectedCryptoPaymentMethod,
+    effectiveCryptoPaymentMethod,
     selectedFiatPaymentMethod,
     hasEnoughBalance,
     isBalanceLoading,
@@ -270,7 +271,7 @@ function AnySpendCustomExactInInner({
               setSrcAmount={setSrcAmount}
               isSrcInputDirty={isSrcInputDirty}
               setIsSrcInputDirty={setIsSrcInputDirty}
-              selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+              selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod}
               onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
               anyspendQuote={anyspendQuote}
               onTokenSelect={onTokenSelect}
@@ -465,8 +466,8 @@ function AnySpendCustomExactInInner({
             relayTxs={oat.data.relayTxs}
             executeTx={oat.data.executeTx}
             refundTxs={oat.data.refundTxs}
-            cryptoPaymentMethod={paymentType === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
-            selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+            cryptoPaymentMethod={paymentType === "fiat" ? CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod}
+            selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod}
             onPaymentMethodChange={setSelectedCryptoPaymentMethod}
             onBack={() => {
               setOrderId(undefined);

package/src/anyspend/react/hooks/useAnyspendFlow.ts

@@ -19,12 +19,13 @@ import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
-import { useAccount } from "wagmi";
 import { components } from "../../types/api";
 import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
 import { FiatPaymentMethod } from "../components/common/FiatPaymentMethod";
 import { useAutoSelectCryptoPaymentMethod } from "./useAutoSelectCryptoPaymentMethod";
 import { useAutoSetActiveWalletFromWagmi } from "./useAutoSetActiveWalletFromWagmi";
+import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay";
+import { useCryptoPaymentMethodState } from "./useCryptoPaymentMethodState";
 
 export enum PanelView {
   MAIN,
@@ -92,15 +93,21 @@ export function useAnyspendFlow({
   // Derive destination chain ID from token or prop (cannot change)
   const selectedDstChainId = destinationTokenChainId || selectedDstToken.chainId;
 
-  // Payment method state
-  const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState<CryptoPaymentMethodType>(
-    CryptoPaymentMethodType.NONE,
-  );
+  // Payment method state with dual-state system (auto + explicit user selection)
+  const {
+    cryptoPaymentMethod,
+    setCryptoPaymentMethod,
+    selectedCryptoPaymentMethod,
+    setSelectedCryptoPaymentMethod,
+    effectiveCryptoPaymentMethod,
+    resetPaymentMethods,
+  } = useCryptoPaymentMethodState();
+
   const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState<FiatPaymentMethod>(FiatPaymentMethod.NONE);
 
   // Recipient state
   const { address: globalAddress } = useAccountWallet();
-  const { address: wagmiAddress } = useAccount();
+  const { walletAddress } = useConnectedWalletDisplay(effectiveCryptoPaymentMethod);
   const [selectedRecipientAddress, setSelectedRecipientAddress] = useState<string | undefined>(recipientAddress);
   const recipientProfile = useProfile({ address: selectedRecipientAddress, fresh: true });
   const recipientName = recipientProfile.data?.name;
@@ -118,7 +125,7 @@ export function useAnyspendFlow({
   // Check token balance for crypto payments
   const { rawBalance, isLoading: isBalanceLoading } = useTokenBalance({
     token: selectedSrcToken,
-    address: wagmiAddress,
+    address: walletAddress,
   });
 
   // Check if user has enough balance
@@ -135,8 +142,9 @@ export function useAnyspendFlow({
   // Auto-select crypto payment method based on available wallets and balance
   useAutoSelectCryptoPaymentMethod({
     paymentType,
+    cryptoPaymentMethod,
+    setCryptoPaymentMethod,
     selectedCryptoPaymentMethod,
-    setSelectedCryptoPaymentMethod,
     hasEnoughBalance,
     isBalanceLoading,
   });
@@ -248,9 +256,9 @@ export function useAnyspendFlow({
       if (!disableUrlParamManagement) {
         const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
         params.set("orderId", newOrderId);
-        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");
         }
@@ -316,8 +324,12 @@ export function useAnyspendFlow({
     isSrcInputDirty,
     setIsSrcInputDirty,
     // Payment methods
+    cryptoPaymentMethod,
+    setCryptoPaymentMethod,
     selectedCryptoPaymentMethod,
     setSelectedCryptoPaymentMethod,
+    effectiveCryptoPaymentMethod,
+    resetPaymentMethods,
     selectedFiatPaymentMethod,
     setSelectedFiatPaymentMethod,
     // Recipient