@b3dotfun/sdk 0.0.65 → 0.0.66-alpha.0

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

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,
+  };
+}

package/src/global-account/react/components/B3DynamicModal.tsx

@@ -26,6 +26,7 @@ import { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./ui/dialog";
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./ui/drawer";
+import { AnySpendDepositUpside } from "@b3dotfun/sdk/anyspend/react/components/AnySpendDepositUpside";
 
 const debug = debugB3React("B3DynamicModal");
 
@@ -130,6 +131,8 @@ export function B3DynamicModal() {
         return <AnySpendStakeUpside {...contentType} mode="modal" />;
       case "anySpendStakeUpsideExactIn":
         return <AnySpendStakeUpsideExactIn {...contentType} mode="modal" />;
+      case "anySpendDepositUpside":
+        return <AnySpendDepositUpside {...contentType} mode="modal" />;
       case "anySpendBuySpin":
         return <AnySpendBuySpin {...contentType} mode="modal" />;
       case "anySpendSignatureMint":

package/src/global-account/react/hooks/useUnifiedChainSwitchAndExecute.ts

@@ -6,7 +6,6 @@ import invariant from "invariant";
 import { useCallback, useState } from "react";
 import { toast } from "sonner";
 import { prepareTransaction, sendTransaction as twSendTransaction } from "thirdweb";
-import { useActiveWallet } from "thirdweb/react";
 import { isAddress } from "viem";
 import { useSwitchChain } from "wagmi";
 import { useB3 } from "../components";
@@ -29,7 +28,6 @@ invariant(partnerId, "Partner ID is required");
 export function useUnifiedChainSwitchAndExecute() {
   const { switchChainAsync } = useSwitchChain();
   const [isSwitchingOrExecuting, setIsSwitchingOrExecuting] = useState(false);
-  const activeWallet = useActiveWallet();
 
   const { isActiveSmartWallet, isActiveEOAWallet, connectedEOAWallet } = useAccountWallet();
   const { account: aaAccount } = useB3();
@@ -49,12 +47,12 @@ export function useUnifiedChainSwitchAndExecute() {
         return;
       }
 
-      const currentChainId = activeWallet?.getChain()?.id;
+      const currentChainId = connectedEOAWallet?.getChain()?.id;
       const onCorrectChain = currentChainId === targetChainId;
 
       // Helper function to execute the transaction
       const executeTransaction = async (): Promise<string> => {
-        const signer = activeWallet?.getAccount();
+        const signer = connectedEOAWallet?.getAccount();
         if (!signer) {
           throw new Error("No account connected");
         }
@@ -62,7 +60,7 @@ export function useUnifiedChainSwitchAndExecute() {
         // Coinbase Smart Wallet specific chain switching (different behavior from other wallets)
         const walletChain = connectedEOAWallet.getChain();
         if (walletChain?.id !== targetChainId) {
-          activeWallet?.switchChain(getThirdwebChain(targetChainId));
+          connectedEOAWallet?.switchChain(getThirdwebChain(targetChainId));
         }
 
         invariant(isAddress(params.to), "params.to is not a valid address");
@@ -121,7 +119,7 @@ export function useUnifiedChainSwitchAndExecute() {
         setIsSwitchingOrExecuting(false);
       }
     },
-    [connectedEOAWallet, activeWallet, switchChainAsync],
+    [connectedEOAWallet, switchChainAsync],
   );
 
   // Handle AA wallet transaction (no chain switch needed for AA)
@@ -186,14 +184,10 @@ export function useUnifiedChainSwitchAndExecute() {
       // Check which wallet type is active
       if (isActiveSmartWallet) {
         return handleAASendTransaction(targetChainId, params);
-      } else if (isActiveEOAWallet) {
-        return handleEOASwitchChainAndSendTransaction(targetChainId, params);
-      } else {
-        toast.error("No wallet connected");
-        return undefined;
       }
+      return handleEOASwitchChainAndSendTransaction(targetChainId, params);
     },
-    [isActiveSmartWallet, isActiveEOAWallet, handleAASendTransaction, handleEOASwitchChainAndSendTransaction],
+    [isActiveSmartWallet, handleAASendTransaction, handleEOASwitchChainAndSendTransaction],
   );
 
   return {

package/src/global-account/react/stores/useModalStore.ts

@@ -276,6 +276,27 @@ export interface AnySpendStakeUpsideExactInProps extends BaseModalProps {
   onSuccess?: () => void;
 }
 
+/**
+ * Props for the AnySpend Deposit Upside (Exact In) modal
+ * Handles token deposit operations using the custom exact in flow
+ */
+export interface AnySpendDepositUpsideProps extends BaseModalProps {
+  /** Modal type identifier */
+  type: "anySpendDepositUpside";
+  /**	Source token address */
+  sourceTokenAddress?: string;
+  /** Source token address */
+  sourceTokenChainId?: number;
+  /** Recipient address to deposit tokens for */
+  recipientAddress: string;
+  /** Deposit contract address */
+  depositContractAddress: string;
+  /** Token to deposit */
+  token: components["schemas"]["Token"];
+  /** Callback function called when the deposit is successful */
+  onSuccess?: () => void;
+}
+
 /**
  * Props for the AnySpend Buy Spin modal
  * Handles spin wheel entry purchases
@@ -397,6 +418,7 @@ export type ModalContentType =
   | AnySpendStakeB3ExactInProps
   | AnySpendStakeUpsideProps
   | AnySpendStakeUpsideExactInProps
+  | AnySpendDepositUpsideProps
   | AnySpendBuySpinProps
   | AnySpendSignatureMintProps
   | AnySpendBondKitProps

package/src/styles/index.css

@@ -630,6 +630,14 @@ Dark version
       font-size: 16px !important;
     }
   }
+
+  input[placeholder="Search Wallet"] {
+    padding-left: 48px !important;
+  }
+
+  li[style="list-style: none;"] {
+    margin-bottom: 12px !important;
+  }
 }
 /* Radix UI Accordion animations */
 @keyframes accordion-down {