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

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/AnySpendStakeB3.tsx

@@ -1,4 +1,4 @@
-import { ABI_ERC20_STAKING, B3_TOKEN } from "@b3dotfun/sdk/anyspend";
+import { ABI_ERC20_STAKING, B3_TOKEN, eqci } from "@b3dotfun/sdk/anyspend";
 import {
   Button,
   GlareCardRounded,
@@ -7,7 +7,7 @@ import {
   TextLoop,
   useHasMounted,
   useModalStore,
-  useTokenBalance,
+  useSimBalance,
   useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
 import { PUBLIC_BASE_RPC_URL } from "@b3dotfun/sdk/shared/constants";
@@ -58,19 +58,16 @@ export function AnySpendStakeB3({
   const hasMounted = useHasMounted();
   const { setB3ModalOpen } = useModalStore();
 
-  // Fetch B3 token balance
-  const {
-    formattedBalance: b3Balance,
-    isLoading: isBalanceLoading,
-    rawBalance: b3RawBalance,
-  } = useTokenBalance({
-    token: B3_TOKEN,
-  });
-
   // Wagmi hooks for direct staking
   const { address } = useAccount();
   const { switchChainAndExecute, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
 
+  // Fetch B3 token balance
+  const { data: simBalance, isLoading: isBalanceLoading } = useSimBalance(address, [base.id]);
+  const b3RawBalanceStr = simBalance?.balances.find(b => eqci(b.address, B3_TOKEN.address))?.amount || "0";
+  const b3RawBalance = BigInt(b3RawBalanceStr);
+  const b3Balance = formatTokenAmount(b3RawBalance, B3_TOKEN.decimals);
+
   // State for direct staking flow
   const [isStaking, setIsStaking] = useState(false);
   const [stakingTxHash, setStakingTxHash] = useState<string>("");

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)" }}