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

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);
@@ -197,7 +204,7 @@ function AnySpendInner({
   });
   const [selectedSrcToken, setSelectedSrcToken] = useState<components["schemas"]["Token"]>(srcTokenFromUrl);
   const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
-  const [srcAmount, setSrcAmount] = useState<string>(searchParams.get("fromAmount") || "0.01");
+  const [srcAmount, setSrcAmount] = useState<string>(searchParams.get("fromAmount") || "0");
 
   // State for onramp amount
   const [srcAmountOnRamp, setSrcAmountOnRamp] = useState<string>(searchParams.get("fromAmount") || "5");
@@ -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,
@@ -229,7 +230,7 @@ function AnySpendCustomExactInInner({
     }
 
     if (paymentType === "crypto") {
-      if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
+      if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
         setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
         return;
       }
@@ -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/components/AnyspendDepositHype.tsx

@@ -87,6 +87,7 @@ function AnySpendDepositHypeInner({
     isSrcInputDirty,
     setIsSrcInputDirty,
     selectedCryptoPaymentMethod,
+    effectiveCryptoPaymentMethod,
     setSelectedCryptoPaymentMethod,
     selectedFiatPaymentMethod,
     setSelectedFiatPaymentMethod,
@@ -153,7 +154,7 @@ function AnySpendDepositHypeInner({
     }
 
     if (paymentType === "crypto") {
-      if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
+      if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
         return { text: "Choose payment method", disable: false, error: false, loading: false };
       }
       return { text: "Continue to deposit", disable: false, error: false, loading: false };
@@ -169,6 +170,7 @@ function AnySpendDepositHypeInner({
     return { text: "Continue to deposit", disable: false, error: false, loading: false };
   }, [
     activeInputAmountInWei,
+    effectiveCryptoPaymentMethod,
     isLoadingAnyspendQuote,
     isCreatingOrder,
     isCreatingOnrampOrder,
@@ -176,7 +178,6 @@ function AnySpendDepositHypeInner({
     anyspendQuote,
     dstAmount,
     paymentType,
-    selectedCryptoPaymentMethod,
     selectedFiatPaymentMethod,
   ]);
 
@@ -189,7 +190,7 @@ function AnySpendDepositHypeInner({
     }
 
     if (paymentType === "crypto") {
-      if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
+      if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
         setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
         return;
       }
@@ -227,7 +228,7 @@ function AnySpendDepositHypeInner({
               setSrcAmount={setSrcAmount}
               isSrcInputDirty={isSrcInputDirty}
               setIsSrcInputDirty={setIsSrcInputDirty}
-              selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+              selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod}
               onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
               anyspendQuote={anyspendQuote}
               onTokenSelect={onTokenSelect}

package/src/anyspend/react/components/common/OrderTokenAmount.tsx

@@ -53,8 +53,6 @@ export function OrderTokenAmount({
 }) {
   // Track previous token to detect changes
   const prevTokenRef = useRef<string>(token.address);
-  // Track if initial balance has been set
-  const initialBalanceSetRef = useRef(false);
 
   // Only get token balance when context is "from" (for setting max amount)
   const { rawBalance } = useTokenBalance({
@@ -62,23 +60,15 @@ export function OrderTokenAmount({
     address: context === "from" && walletAddress ? walletAddress : undefined,
   });
 
-  // Reset balance ref when token address or chain changes
-  useEffect(() => {
-    initialBalanceSetRef.current = false;
-  }, [token.address, token.chainId]);
-
   useEffect(() => {
     // Only handle "from" context
     if (context !== "from") return;
 
     // Check if token changed or if this is the initial load with balance
     const isTokenChanged = prevTokenRef.current !== token.address;
-    const isInitialLoad = !initialBalanceSetRef.current && rawBalance;
 
-    if ((isTokenChanged || isInitialLoad) && rawBalance) {
-      console.log(
-        `Setting max balance - Token: ${token.address}, Changed: ${isTokenChanged}, Initial: ${isInitialLoad}`,
-      );
+    if (isTokenChanged && rawBalance) {
+      console.log(`Setting max balance - Token: ${token.address}, Changed: ${isTokenChanged}`);
 
       // Calculate max amount with gas reserve for native tokens
       let maxAmount: bigint;
@@ -97,7 +87,6 @@ export function OrderTokenAmount({
 
       // Update refs
       prevTokenRef.current = token.address;
-      initialBalanceSetRef.current = true;
     }
   }, [token.address, token.chainId, token.decimals, chainId, context, onChangeInput, rawBalance]);
 

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,
@@ -85,22 +86,28 @@ export function useAnyspendFlow({
   const defaultDstToken = B3_TOKEN; // Default destination token
   const [selectedSrcToken, setSelectedSrcToken] = useState<components["schemas"]["Token"]>(defaultSrcToken);
   const [selectedDstToken, setSelectedDstToken] = useState<components["schemas"]["Token"]>(defaultDstToken);
-  const [srcAmount, setSrcAmount] = useState<string>(paymentType === "fiat" ? "5" : "0.1");
+  const [srcAmount, setSrcAmount] = useState<string>(paymentType === "fiat" ? "5" : "0");
   const [dstAmount, setDstAmount] = useState<string>("");
   const [isSrcInputDirty, setIsSrcInputDirty] = useState(true);
 
   // 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

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

@@ -5,10 +5,12 @@ import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay";
 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 */
@@ -20,7 +22,7 @@ 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
@@ -28,8 +30,9 @@ interface UseAutoSelectCryptoPaymentMethodParams {
  */
 export function useAutoSelectCryptoPaymentMethod({
   paymentType = "crypto",
+  cryptoPaymentMethod: _cryptoPaymentMethod,
+  setCryptoPaymentMethod,
   selectedCryptoPaymentMethod,
-  setSelectedCryptoPaymentMethod,
   hasEnoughBalance,
   isBalanceLoading,
 }: UseAutoSelectCryptoPaymentMethodParams) {
@@ -37,8 +40,13 @@ export function useAutoSelectCryptoPaymentMethod({
   const { suggestedPaymentMethod } = useConnectedWalletDisplay(selectedCryptoPaymentMethod);
 
   useEffect(() => {
-    // Only auto-select when on crypto payment type and payment method is NONE
-    if (paymentType !== "crypto" || selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+    // Only auto-select when on crypto payment type
+    if (paymentType !== "crypto") {
+      return;
+    }
+
+    // Only auto-switch if user hasn't explicitly selected a payment method
+    if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
       return;
     }
 
@@ -48,25 +56,25 @@ export function useAutoSelectCryptoPaymentMethod({
       // Otherwise, default to TRANSFER_CRYPTO if balance is insufficient
       if (!isBalanceLoading) {
         if (hasEnoughBalance && suggestedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
-          setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+          setCryptoPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
         } else if (!hasEnoughBalance && suggestedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
           // Wallet connected but insufficient balance - suggest transfer
-          setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+          setCryptoPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
         } else {
           // Use suggested method (e.g., GLOBAL_WALLET)
-          setSelectedCryptoPaymentMethod(suggestedPaymentMethod);
+          setCryptoPaymentMethod(suggestedPaymentMethod);
         }
       } else {
         // Balance still loading, use suggested method
-        setSelectedCryptoPaymentMethod(suggestedPaymentMethod);
+        setCryptoPaymentMethod(suggestedPaymentMethod);
       }
     }
   }, [
     paymentType,
+    setCryptoPaymentMethod,
     selectedCryptoPaymentMethod,
     suggestedPaymentMethod,
     hasEnoughBalance,
     isBalanceLoading,
-    setSelectedCryptoPaymentMethod,
   ]);
 }