@b3dotfun/sdk 0.0.64 → 0.0.65-alpha.1

package/dist/types/anyspend/utils/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./accountStore";
 export * from "./address";
 export * from "./chain";
 export * from "./format";

package/dist/types/global-account/react/hooks/useGlobalAccount.d.ts

@@ -3,4 +3,5 @@ export declare function useGlobalAccount(): {
     account: Wallet | undefined;
     address: string | undefined;
     info: import("@tanstack/react-query").UseQueryResult<import("thirdweb/wallets").WalletInfo, Error>;
+    wallet: Wallet | undefined;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.64",
+  "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

@@ -8,8 +8,7 @@ import { ArrowDown, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useMemo, useRef } from "react";
 import { toast } from "sonner";
-import { useActiveWallet, useSetActiveWallet } from "thirdweb/react";
-import { useGlobalWalletState } from "../../utils";
+import { useSetActiveWallet } from "thirdweb/react";
 import { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaySection } from "./common/CryptoPaySection";
@@ -109,6 +108,7 @@ function AnySpendCustomExactInInner({
     isSrcInputDirty,
     setIsSrcInputDirty,
     selectedCryptoPaymentMethod,
+    effectiveCryptoPaymentMethod,
     setSelectedCryptoPaymentMethod,
     selectedFiatPaymentMethod,
     setSelectedFiatPaymentMethod,
@@ -145,19 +145,16 @@ function AnySpendCustomExactInInner({
 
   const { connectedEOAWallet } = useAccountWallet();
   const setActiveWallet = useSetActiveWallet();
-  const activeWallet = useActiveWallet();
-  const setGlobalAccountWallet = useGlobalWalletState(state => state.setGlobalAccountWallet);
   const appliedPreferEoa = useRef(false);
 
   useEffect(() => {
     if (preferEoa && !appliedPreferEoa.current) {
       if (connectedEOAWallet) {
         appliedPreferEoa.current = true;
-        setGlobalAccountWallet(activeWallet);
         setActiveWallet(connectedEOAWallet);
       }
     }
-  }, [preferEoa, connectedEOAWallet, setActiveWallet, activeWallet, setGlobalAccountWallet]);
+  }, [preferEoa, connectedEOAWallet, setActiveWallet]);
 
   const selectedRecipientOrDefault = selectedRecipientAddress ?? recipientAddress;
 
@@ -188,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 };
       }
@@ -217,7 +214,7 @@ function AnySpendCustomExactInInner({
     selectedRecipientOrDefault,
     anyspendQuote,
     paymentType,
-    selectedCryptoPaymentMethod,
+    effectiveCryptoPaymentMethod,
     selectedFiatPaymentMethod,
     hasEnoughBalance,
     isBalanceLoading,
@@ -274,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}
@@ -469,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

@@ -6,7 +6,7 @@ import invariant from "invariant";
 import { motion } from "motion/react";
 import { useEffect, useMemo, useRef } from "react";
 import { toast } from "sonner";
-import { useActiveWallet, useSetActiveWallet } from "thirdweb/react";
+import { useSetActiveWallet } from "thirdweb/react";
 import { base } from "viem/chains";
 import { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
@@ -20,7 +20,6 @@ import { PointsDetailPanel } from "./common/PointsDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
 
 import { ArrowDown, Loader2 } from "lucide-react";
-import { useGlobalWalletState } from "../../utils";
 import { PanelOnramp } from "./common/PanelOnramp";
 
 const SLIPPAGE_PERCENT = 3;
@@ -119,19 +118,16 @@ function AnySpendDepositHypeInner({
 
   const { connectedEOAWallet: connectedEOAWallet } = useAccountWallet();
   const setActiveWallet = useSetActiveWallet();
-  const activeWallet = useActiveWallet();
-  const setGlobalAccountWallet = useGlobalWalletState(state => state.setGlobalAccountWallet);
   const appliedPreferEoa = useRef(false);
 
   useEffect(() => {
     if (preferEoa && !appliedPreferEoa.current) {
       if (connectedEOAWallet) {
         appliedPreferEoa.current = true;
-        setGlobalAccountWallet(activeWallet);
         setActiveWallet(connectedEOAWallet);
       }
     }
-  }, [preferEoa, connectedEOAWallet, setActiveWallet, activeWallet, setGlobalAccountWallet]);
+  }, [preferEoa, connectedEOAWallet, setActiveWallet]);
 
   // Button state logic
   const btnInfo: { text: string; disable: boolean; error: boolean; loading: boolean } = useMemo(() => {

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

@@ -1,6 +1,5 @@
 "use client";
 
-import { useGlobalWalletState } from "@b3dotfun/sdk/anyspend/utils";
 import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
@@ -10,7 +9,7 @@ import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-reac
 import { useState } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
-import { useActiveWallet, useSetActiveWallet, useWalletInfo } from "thirdweb/react";
+import { useSetActiveWallet, useWalletInfo } from "thirdweb/react";
 import { WalletId, createWallet } from "thirdweb/wallets";
 import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
 import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
@@ -56,9 +55,6 @@ export function CryptoPaymentMethod({
   const setActiveWallet = useSetActiveWallet();
   const { data: eoaWalletInfo } = useWalletInfo(connectedEOAWallet?.id);
 
-  const activeWallet = useActiveWallet();
-  const setGlobalAccountWallet = useGlobalWalletState(state => state.setGlobalAccountWallet);
-
   const isConnected = !!connectedEOAWallet;
   const globalAddress = connectedSmartWallet?.getAccount()?.address;
 
@@ -225,7 +221,6 @@ export function CryptoPaymentMethod({
                     onClick={() => {
                       setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                       onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                      setGlobalAccountWallet(activeWallet);
                       if (connectedEOAWallet) {
                         setActiveWallet(connectedEOAWallet);
                       }

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

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,
   ]);
 }