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

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

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

@@ -0,0 +1,71 @@
+import { useState } from "react";
+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 function useCryptoPaymentMethodState(): UseCryptoPaymentMethodStateResult {
+  // cryptoPaymentMethod: auto-selected based on balance
+  const [cryptoPaymentMethod, setCryptoPaymentMethod] = useState<CryptoPaymentMethodType>(CryptoPaymentMethodType.NONE);
+
+  // selectedCryptoPaymentMethod: explicitly selected by user (NONE means no explicit selection)
+  const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState<CryptoPaymentMethodType>(
+    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,
+  };
+}