@b3dotfun/sdk 0.0.62-alpha.2 → 0.0.62-alpha.3

package/dist/types/anyspend/react/components/common/CryptoReceiveSection.d.ts

@@ -1,10 +1,14 @@
 import { components } from "../../../types/api";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 interface CryptoReceiveSectionProps {
     isDepositMode?: boolean;
     isBuyMode?: boolean;
     selectedRecipientAddress?: string;
     recipientName?: string;
     onSelectRecipient: () => void;
+    setRecipientAddress?: (address: string | undefined) => void;
+    recipientAddressFromProps?: string;
+    globalAddress?: string;
     dstAmount: string;
     dstToken: components["schemas"]["Token"];
     selectedDstChainId?: number;
@@ -17,6 +21,7 @@ interface CryptoReceiveSectionProps {
     dstTokenLogoURI?: string;
     onShowPointsDetail?: () => void;
     onShowFeeDetail?: () => void;
+    selectedCryptoPaymentMethod?: CryptoPaymentMethodType;
 }
-export declare function CryptoReceiveSection({ isDepositMode, isBuyMode, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, isSrcInputDirty, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, onShowFeeDetail, }: CryptoReceiveSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function CryptoReceiveSection({ isDepositMode, isBuyMode, selectedRecipientAddress, recipientName, onSelectRecipient, setRecipientAddress, recipientAddressFromProps, globalAddress, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, isSrcInputDirty, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, onShowFeeDetail, selectedCryptoPaymentMethod, }: CryptoReceiveSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/anyspend/react/components/common/OrderTokenAmount.d.ts

@@ -1,5 +1,5 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
-export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect, canEditAmount, className, innerClassName, amountClassName, tokenSelectClassName, onTokenSelect, }: {
+export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect, canEditAmount, className, innerClassName, amountClassName, tokenSelectClassName, onTokenSelect, walletAddress, }: {
     disabled?: boolean;
     inputValue: string;
     onChangeInput: (value: string) => void;
@@ -18,4 +18,5 @@ export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput,
     onTokenSelect?: (token: components["schemas"]["Token"], event: {
         preventDefault: () => void;
     }) => void;
+    walletAddress?: string | undefined;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
+interface UseAutoSelectCryptoPaymentMethodParams {
+    /** Current payment type (crypto or fiat) */
+    paymentType?: "crypto" | "fiat";
+    /** Currently selected payment method */
+    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 */
+    isBalanceLoading: boolean;
+}
+/**
+ * Custom hook to automatically select appropriate crypto payment method
+ * based on available wallets and balance.
+ *
+ * Auto-selection logic:
+ * - Only auto-selects when payment method is NONE (doesn't override user choices)
+ * - 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 {};

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

@@ -0,0 +1,10 @@
+/**
+ * Hook that automatically sets the active thirdweb wallet when a wagmi wallet connects.
+ *
+ * This is useful for syncing wagmi wallet connections with thirdweb's wallet system,
+ * ensuring that when users connect via wagmi, the active wallet is properly set.
+ *
+ * Place this hook in components that stay mounted throughout the user flow
+ * (not in components that unmount during navigation).
+ */
+export declare function useAutoSetActiveWalletFromWagmi(): void;

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

@@ -0,0 +1,14 @@
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
+interface UseConnectedWalletDisplayResult {
+    walletAddress: string | undefined;
+    shouldShowConnectedEOA: boolean;
+    shouldShowWagmiWallet: boolean;
+    isWalletDuplicated: boolean;
+    suggestedPaymentMethod: CryptoPaymentMethodType;
+}
+/**
+ * Custom hook to determine which wallet to display and its address
+ * Handles logic for showing EOA wallet, wagmi wallet, or global wallet based on payment method
+ */
+export declare function useConnectedWalletDisplay(selectedCryptoPaymentMethod?: CryptoPaymentMethodType): UseConnectedWalletDisplayResult;
+export {};

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

@@ -0,0 +1,36 @@
+interface UsePhantomTransferParams {
+    /** RPC endpoint URL for Solana network */
+    rpcEndpoint?: string;
+}
+interface PhantomTransferParams {
+    /** Amount in lamports (for SOL) or smallest token unit (for SPL tokens) */
+    amountLamports: string;
+    /** Token address (use "11111111111111111111111111111111" for native SOL) */
+    tokenAddress: string;
+    /** Recipient address */
+    recipientAddress: string;
+}
+/**
+ * Custom hook for handling Phantom wallet transfers on Solana.
+ * Supports both native SOL and SPL token transfers with automatic priority fee calculation.
+ *
+ * @example
+ * ```tsx
+ * const { initiateTransfer, isPhantomAvailable } = usePhantomTransfer();
+ *
+ * await initiateTransfer({
+ *   amountLamports: "1000000000", // 1 SOL
+ *   tokenAddress: "11111111111111111111111111111111",
+ *   recipientAddress: "..."
+ * });
+ * ```
+ */
+export declare function usePhantomTransfer({ rpcEndpoint }?: UsePhantomTransferParams): {
+    /** Function to initiate a transfer */
+    initiateTransfer: ({ amountLamports, tokenAddress, recipientAddress }: PhantomTransferParams) => Promise<void>;
+    /** Whether Phantom wallet is available (installed) */
+    isPhantomAvailable: any;
+    /** Get the currently connected Phantom wallet address */
+    getConnectedAddress: () => any;
+};
+export {};

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

@@ -32,11 +32,12 @@ export { useSearchParamsSSR } from "./useSearchParamsSSR";
 export { useSimBalance } from "./useSimBalance";
 export { useSiwe } from "./useSiwe";
 export { useTokenBalance } from "./useTokenBalance";
+export { useTokenBalanceDirect } from "./useTokenBalanceDirect";
 export { useTokenBalancesByChain } from "./useTokenBalancesByChain";
 export { useTokenData } from "./useTokenData";
 export { useTokenFromUrl } from "./useTokenFromUrl";
 export { useTokenPrice } from "./useTokenPrice";
 export { useTokenPriceWithFallback } from "./useTokenPriceWithFallback";
 export { useTokensFromAddress } from "./useTokensFromAddress";
-export { useUnifiedChainSwitchAndExecute } from "./useUnifiedChainSwitchAndExecute";
 export { useURLParams } from "./useURLParams";
+export { useUnifiedChainSwitchAndExecute } from "./useUnifiedChainSwitchAndExecute";

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

@@ -0,0 +1,12 @@
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+interface UseTokenBalanceProps {
+    token: components["schemas"]["Token"];
+    address?: string;
+}
+export interface TokenBalanceResult {
+    rawBalance: bigint | null;
+    formattedBalance: string;
+    isLoading: boolean;
+}
+export declare function useTokenBalanceDirect({ token, address }: UseTokenBalanceProps): TokenBalanceResult;
+export {};

package/package.json

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

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

@@ -17,6 +17,7 @@ import {
   useProfile,
   useRouter,
   useSearchParamsSSR,
+  useTokenBalanceDirect,
   useTokenData,
   useTokenFromUrl,
 } from "@b3dotfun/sdk/global-account/react";
@@ -30,17 +31,19 @@ import { toast } from "sonner";
 import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
 import { components } from "../../types/api";
+import { useAutoSelectCryptoPaymentMethod } from "../hooks/useAutoSelectCryptoPaymentMethod";
+import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
 import { CryptoPaySection } from "./common/CryptoPaySection";
 import { CryptoReceiveSection } from "./common/CryptoReceiveSection";
+import { FeeDetailPanel } from "./common/FeeDetailPanel";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
 import { PanelOnramp } from "./common/PanelOnramp";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment";
 import { PointsDetailPanel } from "./common/PointsDetailPanel";
-import { FeeDetailPanel } from "./common/FeeDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
 import { TabSection } from "./common/TabSection";
 
@@ -437,14 +440,38 @@ function AnySpendInner({
   // State for recipient selection
   const [recipientAddress, setRecipientAddress] = useState<string | undefined>();
 
-  const { address: globalAddress, wallet: globalWallet } = useAccountWallet();
+  const { address: globalAddress, wallet: globalWallet, connectedEOAWallet } = useAccountWallet();
   const recipientProfile = useProfile({ address: recipientAddress, fresh: true });
   const recipientName = recipientProfile.data?.name;
 
-  // Set default recipient address when wallet changes
-  useEffect(() => {
-    setRecipientAddress(recipientAddressFromProps || globalAddress);
-  }, [recipientAddressFromProps, globalAddress]);
+  // Auto-set active wallet from wagmi
+  useAutoSetActiveWalletFromWagmi();
+
+  // Check token balance for crypto payments
+  const { rawBalance, isLoading: isBalanceLoading } = useTokenBalanceDirect({
+    token: selectedSrcToken,
+    address: connectedEOAWallet?.getAccount()?.address,
+  });
+
+  // Check if user has enough balanceuseAutoSetActiveWalletFromWagmi
+  const hasEnoughBalance = useMemo(() => {
+    if (!rawBalance || isBalanceLoading || activeTab !== "crypto") return false;
+    try {
+      const requiredAmount = parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
+      return rawBalance >= requiredAmount;
+    } catch {
+      return false;
+    }
+  }, [rawBalance, srcAmount, selectedSrcToken.decimals, isBalanceLoading, activeTab]);
+
+  // Auto-select crypto payment method based on available wallets and balance
+  useAutoSelectCryptoPaymentMethod({
+    paymentType: activeTab,
+    selectedCryptoPaymentMethod,
+    setSelectedCryptoPaymentMethod,
+    hasEnoughBalance,
+    isBalanceLoading,
+  });
 
   // Get geo-based onramp options for fiat payments
   const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
@@ -624,17 +651,34 @@ function AnySpendInner({
     if (isSameChainSameToken)
       return { text: "Select a different token or chain", disable: true, error: false, loading: false };
     if (isLoadingAnyspendQuote) return { text: "Loading quote...", disable: true, error: false, loading: true };
-    if (!recipientAddress) return { text: "Select recipient", disable: false, error: false, loading: false };
     if (isCreatingOrder || isCreatingOnrampOrder)
       return { text: "Creating order...", disable: true, error: false, loading: true };
     if (!anyspendQuote || !anyspendQuote.success)
       return { text: "No quote found", disable: true, error: false, loading: false };
 
+    if (activeTab === "fiat") {
+      // For fiat: check recipient first, then payment method
+      if (!recipientAddress) return { text: "Select recipient", disable: false, error: false, loading: false };
+
+      // If no fiat payment method selected, show "Select payment method"
+      if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
+        return { text: "Select payment method", disable: false, error: false, loading: false };
+      }
+      // If payment method is selected, show "Buy"
+      return { text: "Buy", disable: false, error: false, loading: false };
+    }
+
     if (activeTab === "crypto") {
+      // For crypto: check payment method first, then recipient
+
       // If no payment method selected, show "Choose payment method"
       if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
         return { text: "Choose payment method", disable: false, error: false, loading: false };
       }
+
+      // Check recipient after payment method
+      if (!recipientAddress) return { text: "Select recipient", disable: false, error: false, loading: false };
+
       // If payment method selected, show appropriate action
       if (
         selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
@@ -647,15 +691,6 @@ function AnySpendInner({
       }
     }
 
-    if (activeTab === "fiat") {
-      // If no fiat payment method selected, show "Select payment method"
-      if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
-        return { text: "Select payment method", disable: false, error: false, loading: false };
-      }
-      // If payment method is selected, show "Buy"
-      return { text: "Buy", disable: false, error: false, loading: false };
-    }
-
     return { text: "Buy", disable: false, error: false, loading: false };
   }, [
     activeInputAmountInWei,
@@ -674,16 +709,18 @@ function AnySpendInner({
   const onMainButtonClick = async () => {
     if (btnInfo.disable) return;
 
-    if (!recipientAddress) {
-      navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
-      return;
-    }
-
     try {
       invariant(anyspendQuote, "Relay price is not found");
-      invariant(recipientAddress, "Recipient address is not found");
 
       if (activeTab === "fiat") {
+        // For fiat: check recipient first
+        if (!recipientAddress) {
+          navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
+          return;
+        }
+
+        invariant(recipientAddress, "Recipient address is not found");
+
         // If no fiat payment method selected, show payment method selection
         if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
           navigateToPanel(PanelView.FIAT_PAYMENT_METHOD, "forward");
@@ -695,6 +732,8 @@ function AnySpendInner({
       }
 
       if (activeTab === "crypto") {
+        // For crypto: check payment method first, then recipient
+
         // If no payment method selected, show payment method selection
         if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
           console.log("No payment method selected, showing selection panel");
@@ -702,6 +741,14 @@ function AnySpendInner({
           return;
         }
 
+        // Check recipient after payment method
+        if (!recipientAddress) {
+          navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
+          return;
+        }
+
+        invariant(recipientAddress, "Recipient address is not found");
+
         // If payment method is selected, create order with payment method info
         if (
           selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
@@ -1057,6 +1104,9 @@ function AnySpendInner({
             selectedRecipientAddress={recipientAddress}
             recipientName={recipientName || undefined}
             onSelectRecipient={() => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward")}
+            setRecipientAddress={setRecipientAddress}
+            recipientAddressFromProps={recipientAddressFromProps}
+            globalAddress={globalAddress}
             dstAmount={dstAmount}
             dstToken={selectedDstToken}
             selectedDstChainId={selectedDstChainId}
@@ -1070,6 +1120,7 @@ function AnySpendInner({
             anyspendQuote={anyspendQuote}
             onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
             onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
+            selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
           />
         )}
       </div>

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

@@ -44,6 +44,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { base } from "viem/chains";
 import { useFeatureFlags } from "../contexts/FeatureFlagsContext";
+import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
 import { FeeBreakDown } from "./common/FeeBreakDown";
@@ -241,6 +242,9 @@ function AnySpendCustomInner({
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
 
+  // Auto-set active wallet from wagmi
+  useAutoSetActiveWalletFromWagmi();
+
   const [activePanel, setActivePanel] = useState<PanelView>(
     loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER,
   );

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

@@ -6,6 +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 { base } from "viem/chains";
 import { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
@@ -17,11 +18,10 @@ import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaym
 import { OrderDetails } from "./common/OrderDetails";
 import { PointsDetailPanel } from "./common/PointsDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
-import { useActiveWallet, useSetActiveWallet } from "thirdweb/react";
 
 import { ArrowDown, Loader2 } from "lucide-react";
-import { PanelOnramp } from "./common/PanelOnramp";
 import { useGlobalWalletState } from "../../utils";
+import { PanelOnramp } from "./common/PanelOnramp";
 
 const SLIPPAGE_PERCENT = 3;
 
@@ -286,9 +286,12 @@ function AnySpendDepositHypeInner({
             <CryptoReceiveSection
               isDepositMode={false}
               isBuyMode={true}
-              selectedRecipientAddress={recipientAddress}
+              selectedRecipientAddress={selectedRecipientAddress}
               recipientName={recipientName || undefined}
               onSelectRecipient={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
+              setRecipientAddress={setSelectedRecipientAddress}
+              recipientAddressFromProps={recipientAddress}
+              globalAddress={globalAddress}
               dstAmount={dstAmount}
               dstToken={B3_TOKEN}
               dstTokenSymbol={HYPE_TOKEN_DETAILS.SYMBOL}
@@ -304,6 +307,7 @@ function AnySpendDepositHypeInner({
               anyspendQuote={anyspendQuote}
               onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
               onShowFeeDetail={() => setActivePanel(PanelView.FEE_DETAIL)}
+              selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
             />
           )}
         </div>

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

@@ -1,4 +1,4 @@
-import { useAccountWallet, useProfile, useTokenData } from "@b3dotfun/sdk/global-account/react";
+import { useProfile, useTokenData } from "@b3dotfun/sdk/global-account/react";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
@@ -6,6 +6,7 @@ import { ChevronRight, Info } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useRef } from "react";
 import { components } from "../../../types/api";
+import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderTokenAmount } from "./OrderTokenAmount";
 import { TokenBalance } from "./TokenBalance";
@@ -46,14 +47,10 @@ export function CryptoPaySection({
   onTokenSelect,
   onShowFeeDetail,
 }: CryptoPaySectionProps) {
-  const { connectedSmartWallet, connectedEOAWallet } = useAccountWallet();
   const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
 
-  // Determine which address to use based on payment method
-  const walletAddress =
-    selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
-      ? connectedSmartWallet?.getAccount()?.address
-      : connectedEOAWallet?.getAccount()?.address;
+  // Use custom hook to determine wallet address based on payment method
+  const { walletAddress } = useConnectedWalletDisplay(selectedCryptoPaymentMethod);
 
   const { data: profileData } = useProfile({ address: walletAddress });
   const connectedName = profileData?.displayName;
@@ -137,6 +134,7 @@ export function CryptoPaySection({
       </div>
       <OrderTokenAmount
         address={walletAddress}
+        walletAddress={walletAddress}
         context="from"
         inputValue={srcAmount}
         onChangeInput={value => {

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

@@ -13,6 +13,7 @@ import { toast } from "sonner";
 import { useActiveWallet, useSetActiveWallet, useWalletInfo } from "thirdweb/react";
 import { WalletId, createWallet } from "thirdweb/wallets";
 import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
+import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
 
 export enum CryptoPaymentMethodType {
   NONE = "none",
@@ -47,7 +48,7 @@ export function CryptoPaymentMethod({
     connectedEOAWallet: connectedEOAWallet,
     connectedSmartWallet: connectedSmartWallet,
   } = useAccountWallet();
-  const { connector, address, isConnected: wagmiWalletIsConnected } = useAccount();
+  const { connector, address } = useAccount();
   const { connect, connectors, isPending } = useConnect();
   const { disconnect } = useDisconnect();
   const { data: walletClient } = useWalletClient();
@@ -61,20 +62,8 @@ export function CryptoPaymentMethod({
   const isConnected = !!connectedEOAWallet;
   const globalAddress = connectedSmartWallet?.getAccount()?.address;
 
-  // Helper function to check if two addresses are the same
-  const isSameAddress = (addr1?: string, addr2?: string): boolean => {
-    if (!addr1 || !addr2) return false;
-    return addr1.toLowerCase() === addr2.toLowerCase();
-  };
-
-  // Check if connectedEOAWallet and wagmi wallet represent the same wallet
-  const connectedEOAAddress = connectedEOAWallet?.getAccount()?.address;
-  const wagmiAddress = address;
-  const isWalletDuplicated = isSameAddress(connectedEOAAddress, wagmiAddress);
-
-  // Determine which wallet to show (prefer connectedEOAWallet if both exist and are the same)
-  const shouldShowConnectedEOA = !!connectedEOAWallet;
-  const shouldShowWagmiWallet = wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
+  // Use custom hook to determine wallet display logic
+  const { shouldShowConnectedEOA, shouldShowWagmiWallet } = useConnectedWalletDisplay(selectedPaymentMethod);
 
   // Map wagmi connector names to thirdweb wallet IDs
   const getThirdwebWalletId = (connectorName: string): WalletId | null => {
@@ -237,11 +226,13 @@ export function CryptoPaymentMethod({
                       setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                       onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                       setGlobalAccountWallet(activeWallet);
-                      setActiveWallet(connectedEOAWallet);
+                      if (connectedEOAWallet) {
+                        setActiveWallet(connectedEOAWallet);
+                      }
                       toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
                     }}
                     className={cn(
-                      "crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
+                      "crypto-payment-method-connect-wallet eoa-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
                       selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
                         ? "connected-wallet border-as-brand bg-as-brand/5"
                         : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80",
@@ -300,7 +291,7 @@ export function CryptoPaymentMethod({
                       toast.success(`Selected ${connector?.name || "wallet"}`);
                     }}
                     className={cn(
-                      "crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
+                      "crypto-payment-method-connect-wallet wagmi-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
                       selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
                         ? "connected-wallet border-as-brand bg-as-brand/5"
                         : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80",

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

@@ -4,8 +4,11 @@ import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import { ChevronRight, Info } from "lucide-react";
 import { motion } from "motion/react";
+import { useEffect } from "react";
 import { components } from "../../../types/api";
 import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
+import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderTokenAmount } from "./OrderTokenAmount";
 import { PointsBadge } from "./PointsBadge";
 
@@ -16,6 +19,9 @@ interface CryptoReceiveSectionProps {
   selectedRecipientAddress?: string;
   recipientName?: string;
   onSelectRecipient: () => void;
+  setRecipientAddress?: (address: string | undefined) => void;
+  recipientAddressFromProps?: string;
+  globalAddress?: string;
   // Token data
   dstAmount: string;
   dstToken: components["schemas"]["Token"];
@@ -34,6 +40,8 @@ interface CryptoReceiveSectionProps {
   onShowPointsDetail?: () => void;
   // Fee detail navigation
   onShowFeeDetail?: () => void;
+  // Payment method for wallet tracking
+  selectedCryptoPaymentMethod?: CryptoPaymentMethodType;
 }
 
 export function CryptoReceiveSection({
@@ -42,6 +50,9 @@ export function CryptoReceiveSection({
   selectedRecipientAddress,
   recipientName,
   onSelectRecipient,
+  setRecipientAddress,
+  recipientAddressFromProps,
+  globalAddress,
   dstAmount,
   dstToken,
   selectedDstChainId,
@@ -54,9 +65,20 @@ export function CryptoReceiveSection({
   dstTokenLogoURI,
   onShowPointsDetail,
   onShowFeeDetail,
+  selectedCryptoPaymentMethod,
 }: CryptoReceiveSectionProps) {
   const featureFlags = useFeatureFlags();
 
+  // Get wallet address based on selected payment method
+  const { walletAddress } = useConnectedWalletDisplay(selectedCryptoPaymentMethod);
+
+  // Set default recipient address when wallet changes
+  useEffect(() => {
+    if (setRecipientAddress) {
+      setRecipientAddress(recipientAddressFromProps || walletAddress || globalAddress);
+    }
+  }, [recipientAddressFromProps, walletAddress, globalAddress, setRecipientAddress]);
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}