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

package/dist/cjs/anyspend/utils/orderPayload.js

@@ -41,6 +41,8 @@ const buildPayload = (orderType, params) => {
             };
         case "custom":
             return { ...payload };
+        case "custom_exact_in":
+            return { ...payload, expectedDstAmount };
         case "hype_duel":
             return {
                 expectedDstAmount,
@@ -66,6 +68,8 @@ const buildMetadata = (orderType, params) => {
             return { ...baseMetadata, tournament };
         case "custom":
             return { ...baseMetadata, action: payload.action };
+        case "custom_exact_in":
+            return { ...baseMetadata, action: payload.action };
         case "hype_duel":
             return { ...baseMetadata };
         default:

package/dist/cjs/global-account/react/components/B3DynamicModal.js

@@ -5,11 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../anyspend/react");
 const AnyspendDepositHype_1 = require("../../../anyspend/react/components/AnyspendDepositHype");
 const AnySpendStakeUpside_1 = require("../../../anyspend/react/components/AnySpendStakeUpside");
+const AnySpendStakeUpsideExactIn_1 = require("../../../anyspend/react/components/AnySpendStakeUpsideExactIn");
 const utils_1 = require("../../../anyspend/utils");
 const react_2 = require("../../../global-account/react");
 const cn_1 = require("../../../shared/utils/cn");
 const debug_1 = require("../../../shared/utils/debug");
 const react_3 = require("react");
+const react_4 = require("thirdweb/react");
 const AvatarEditor_1 = require("./AvatarEditor/AvatarEditor");
 const useB3_1 = require("./B3Provider/useB3");
 const LinkAccount_1 = require("./LinkAccount/LinkAccount");
@@ -18,7 +20,6 @@ const RequestPermissions_1 = require("./RequestPermissions/RequestPermissions");
 const SignInWithB3Flow_1 = require("./SignInWithB3/SignInWithB3Flow");
 const dialog_1 = require("./ui/dialog");
 const drawer_1 = require("./ui/drawer");
-const react_4 = require("thirdweb/react");
 const debug = (0, debug_1.debugB3React)("B3DynamicModal");
 function B3DynamicModal() {
     const { isOpen, setB3ModalOpen, contentType, history, navigateBack } = (0, react_2.useModalStore)();
@@ -45,7 +46,9 @@ function B3DynamicModal() {
         "anySpendJoinTournament",
         "anySpendFundTournament",
         "anySpendStakeB3",
+        "anySpendStakeB3ExactIn",
         "anySpendStakeUpside",
+        "anySpendStakeUpsideExactIn",
         "anySpendBuySpin",
         "anySpendOrderHistory",
         "signInWithB3",
@@ -59,7 +62,9 @@ function B3DynamicModal() {
         "anySpendJoinTournament",
         "anySpendFundTournament",
         "anySpendStakeB3",
+        "anySpendStakeB3ExactIn",
         "anySpendStakeUpside",
+        "anySpendStakeUpsideExactIn",
         "anySpendBuySpin",
         "anySpendSignatureMint",
         "anySpendBondKit",
@@ -95,8 +100,12 @@ function B3DynamicModal() {
                 return (0, jsx_runtime_1.jsx)(react_1.OrderHistory, { onBack: () => { }, mode: "modal" });
             case "anySpendStakeB3":
                 return (0, jsx_runtime_1.jsx)(react_1.AnySpendStakeB3, { ...contentType, mode: "modal" });
+            case "anySpendStakeB3ExactIn":
+                return (0, jsx_runtime_1.jsx)(react_1.AnySpendStakeB3ExactIn, { ...contentType, mode: "modal" });
             case "anySpendStakeUpside":
                 return (0, jsx_runtime_1.jsx)(AnySpendStakeUpside_1.AnySpendStakeUpside, { ...contentType, mode: "modal" });
+            case "anySpendStakeUpsideExactIn":
+                return (0, jsx_runtime_1.jsx)(AnySpendStakeUpsideExactIn_1.AnySpendStakeUpsideExactIn, { ...contentType, mode: "modal" });
             case "anySpendBuySpin":
                 return (0, jsx_runtime_1.jsx)(react_1.AnySpendBuySpin, { ...contentType, mode: "modal" });
             case "anySpendSignatureMint":

package/dist/cjs/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/cjs/global-account/react/hooks/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useURLParams = exports.useUnifiedChainSwitchAndExecute = exports.useTokensFromAddress = exports.useTokenPriceWithFallback = exports.useTokenPrice = exports.useTokenFromUrl = exports.useTokenData = exports.useTokenBalancesByChain = exports.useTokenBalance = exports.useSiwe = exports.useSimBalance = exports.useSearchParamsSSR = exports.useRouter = exports.useRemoveSessionKey = exports.useQueryBSMNT = exports.useQueryB3 = exports.useProfilePreference = exports.useProfile = exports.useOneBalance = exports.useNativeBalanceFromRPC = exports.useNativeBalance = exports.useMediaQuery = exports.useIsomorphicLayoutEffect = exports.useIsMobile = exports.useHasMounted = exports.useHandleConnectWithPrivy = exports.useGlobalAccount = exports.useGetGeo = exports.useGetAllTWSigners = exports.useFirstEOA = exports.useExchangeRate = exports.useConnect = exports.useClient = exports.useChainSwitchWithAction = exports.useBestTransactionPath = exports.useB3EnsName = exports.useB3BalanceFromAddresses = exports.useAuthentication = exports.useAnalytics = exports.useAddTWSessionKey = exports.useAccountWallet = exports.useAccountAssets = exports.createWagmiConfig = void 0;
+exports.useUnifiedChainSwitchAndExecute = exports.useURLParams = exports.useTokensFromAddress = exports.useTokenPriceWithFallback = exports.useTokenPrice = exports.useTokenFromUrl = exports.useTokenData = exports.useTokenBalancesByChain = exports.useTokenBalanceDirect = exports.useTokenBalance = exports.useSiwe = exports.useSimBalance = exports.useSearchParamsSSR = exports.useRouter = exports.useRemoveSessionKey = exports.useQueryBSMNT = exports.useQueryB3 = exports.useProfilePreference = exports.useProfile = exports.useOneBalance = exports.useNativeBalanceFromRPC = exports.useNativeBalance = exports.useMediaQuery = exports.useIsomorphicLayoutEffect = exports.useIsMobile = exports.useHasMounted = exports.useHandleConnectWithPrivy = exports.useGlobalAccount = exports.useGetGeo = exports.useGetAllTWSigners = exports.useFirstEOA = exports.useExchangeRate = exports.useConnect = exports.useClient = exports.useChainSwitchWithAction = exports.useBestTransactionPath = exports.useB3EnsName = exports.useB3BalanceFromAddresses = exports.useAuthentication = exports.useAnalytics = exports.useAddTWSessionKey = exports.useAccountWallet = exports.useAccountAssets = exports.createWagmiConfig = void 0;
 var createWagmiConfig_1 = require("../utils/createWagmiConfig");
 Object.defineProperty(exports, "createWagmiConfig", { enumerable: true, get: function () { return createWagmiConfig_1.createWagmiConfig; } });
 var useAccountAssets_1 = require("./useAccountAssets");
@@ -84,6 +84,8 @@ var useSiwe_1 = require("./useSiwe");
 Object.defineProperty(exports, "useSiwe", { enumerable: true, get: function () { return useSiwe_1.useSiwe; } });
 var useTokenBalance_1 = require("./useTokenBalance");
 Object.defineProperty(exports, "useTokenBalance", { enumerable: true, get: function () { return useTokenBalance_1.useTokenBalance; } });
+var useTokenBalanceDirect_1 = require("./useTokenBalanceDirect");
+Object.defineProperty(exports, "useTokenBalanceDirect", { enumerable: true, get: function () { return useTokenBalanceDirect_1.useTokenBalanceDirect; } });
 var useTokenBalancesByChain_1 = require("./useTokenBalancesByChain");
 Object.defineProperty(exports, "useTokenBalancesByChain", { enumerable: true, get: function () { return useTokenBalancesByChain_1.useTokenBalancesByChain; } });
 var useTokenData_1 = require("./useTokenData");
@@ -96,7 +98,7 @@ var useTokenPriceWithFallback_1 = require("./useTokenPriceWithFallback");
 Object.defineProperty(exports, "useTokenPriceWithFallback", { enumerable: true, get: function () { return useTokenPriceWithFallback_1.useTokenPriceWithFallback; } });
 var useTokensFromAddress_1 = require("./useTokensFromAddress");
 Object.defineProperty(exports, "useTokensFromAddress", { enumerable: true, get: function () { return useTokensFromAddress_1.useTokensFromAddress; } });
-var useUnifiedChainSwitchAndExecute_1 = require("./useUnifiedChainSwitchAndExecute");
-Object.defineProperty(exports, "useUnifiedChainSwitchAndExecute", { enumerable: true, get: function () { return useUnifiedChainSwitchAndExecute_1.useUnifiedChainSwitchAndExecute; } });
 var useURLParams_1 = require("./useURLParams");
 Object.defineProperty(exports, "useURLParams", { enumerable: true, get: function () { return useURLParams_1.useURLParams; } });
+var useUnifiedChainSwitchAndExecute_1 = require("./useUnifiedChainSwitchAndExecute");
+Object.defineProperty(exports, "useUnifiedChainSwitchAndExecute", { enumerable: true, get: function () { return useUnifiedChainSwitchAndExecute_1.useUnifiedChainSwitchAndExecute; } });

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

@@ -0,0 +1,12 @@
+import { components } from "../../../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/dist/cjs/global-account/react/hooks/useTokenBalanceDirect.js

@@ -0,0 +1,62 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTokenBalanceDirect = useTokenBalanceDirect;
+const anyspend_1 = require("../../../anyspend");
+const react_1 = require("../../../global-account/react");
+const number_1 = require("../../../shared/utils/number");
+const thirdweb_insights_1 = require("../../../shared/utils/thirdweb-insights");
+const react_query_1 = require("@tanstack/react-query");
+const react_2 = require("react");
+function useTokenBalanceDirect({ token, address }) {
+    const account = (0, react_1.useAccountWallet)();
+    const effectiveAddress = address || account?.address;
+    const { data: tokenBalance, isLoading, isFetching, refetch, } = (0, react_query_1.useQuery)({
+        queryKey: ["tokenBalance", effectiveAddress, token.chainId, token.address],
+        queryFn: async () => {
+            if (!effectiveAddress)
+                return { formatted: "0", raw: null };
+            if ((0, anyspend_1.isNativeToken)(token.address)) {
+                const nativeToken = await (0, thirdweb_insights_1.getNativeTokenBalance)(effectiveAddress, token.chainId);
+                if (nativeToken && nativeToken.balance) {
+                    const rawBalance = nativeToken.balance;
+                    return {
+                        formatted: (0, number_1.formatTokenAmount)(BigInt(rawBalance), Number(nativeToken.decimals || 18)),
+                        raw: BigInt(rawBalance),
+                    };
+                }
+                return { formatted: "0", raw: null };
+            }
+            const response = await (0, thirdweb_insights_1.getERC20Balances)(effectiveAddress, {
+                chainIds: [token.chainId],
+                includeSpam: false,
+            });
+            const tokenBalance = response.data?.find(t => t.token_address === token.address);
+            if (tokenBalance?.balance) {
+                return {
+                    formatted: (0, number_1.formatTokenAmount)(BigInt(tokenBalance.balance), Number(tokenBalance.decimals || 18)),
+                    raw: BigInt(tokenBalance.balance),
+                };
+            }
+            return { formatted: "0", raw: null };
+        },
+        enabled: !!effectiveAddress,
+        staleTime: 30000,
+        gcTime: 5 * 60 * 1000,
+        retry: 2,
+        structuralSharing: false,
+    });
+    // Force a refetch when the wallet or token changes
+    (0, react_2.useEffect)(() => {
+        if (effectiveAddress) {
+            refetch();
+        }
+    }, [effectiveAddress, token.address, token.chainId, token.symbol, refetch]);
+    // Determine if we're actually loading
+    const isActuallyLoading = !effectiveAddress || isLoading || (isFetching && !tokenBalance);
+    return {
+        rawBalance: tokenBalance?.raw || BigInt(0),
+        formattedBalance: tokenBalance?.formatted || "0",
+        isLoading: isActuallyLoading,
+    };
+}

package/dist/cjs/global-account/react/hooks/useTokenFromUrl.js

@@ -32,10 +32,11 @@ function useTokenFromUrl({ defaultToken, prefix }) {
     // Get parameters from URL
     const currencyParam = searchParams.get(`${prefix}Currency`);
     const chainIdParam = searchParams.get(`${prefix}ChainId`);
-    // Determine if we should fetch token info
-    const shouldFetchToken = Boolean(currencyParam && chainIdParam && currencyParam.toLowerCase() !== defaultToken.address.toLowerCase());
     // Determine network based on chainId
-    const network = chainIdParam ? (0, supported_1.getCoingeckoChainInfo)(Number(chainIdParam)).coingecko_id : "";
+    const chainInfo = chainIdParam ? (0, supported_1.getCoingeckoChainInfo)(Number(chainIdParam)) : null;
+    const network = chainInfo?.coingecko_id || "";
+    // Determine if we should fetch token info
+    const shouldFetchToken = Boolean(currencyParam && chainIdParam && chainInfo && currencyParam.toLowerCase() !== defaultToken.address.toLowerCase());
     const { data: tokenInfo, isError } = (0, react_query_1.useQuery)({
         queryKey: ["tokenInfo", network, currencyParam],
         queryFn: () => fetchTokenInfo(network, currencyParam || ""),

package/dist/cjs/global-account/react/stores/useModalStore.d.ts

@@ -210,6 +210,20 @@ export interface AnySpendStakeB3Props extends BaseModalProps {
     /** Callback function called when the stake is successful */
     onSuccess?: () => void;
 }
+/**
+ * Props for the AnySpend Stake B3 (Custom Exact In) modal
+ * Handles B3 token staking operations using the custom exact in flow
+ */
+export interface AnySpendStakeB3ExactInProps extends BaseModalProps {
+    /** Modal type identifier */
+    type: "anySpendStakeB3ExactIn";
+    /** Recipient address to stake B3 for */
+    recipientAddress: string;
+    /** Stake amount */
+    stakeAmount?: string;
+    /** Callback function called when the stake is successful */
+    onSuccess?: () => void;
+}
 /**
  * Props for the AnySpend Stake Contract modal
  * Handles token staking operations to a given contract
@@ -230,6 +244,22 @@ export interface AnySpendStakeUpsideProps extends BaseModalProps {
     /** Callback function called when the stake is successful */
     onSuccess?: () => void;
 }
+/**
+ * Props for the AnySpend Stake Upside (Exact In) modal
+ * Handles token staking operations using the custom exact in flow
+ */
+export interface AnySpendStakeUpsideExactInProps extends BaseModalProps {
+    /** Modal type identifier */
+    type: "anySpendStakeUpsideExactIn";
+    /** Recipient address to stake tokens for */
+    recipientAddress: string;
+    /** Staking contract address */
+    stakingContractAddress: string;
+    /** Token to stake */
+    token: components["schemas"]["Token"];
+    /** Callback function called when the stake is successful */
+    onSuccess?: () => void;
+}
 /**
  * Props for the AnySpend Buy Spin modal
  * Handles spin wheel entry purchases
@@ -324,7 +354,7 @@ export interface AvatarEditorModalProps extends BaseModalProps {
 /**
  * Union type of all possible modal content types
  */
-export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps;
+export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps;
 /**
  * State interface for the modal store
  */

package/dist/esm/anyspend/react/components/AnySpend.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getDefaultToken, USDC_BASE } from "../../../anyspend/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
-import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet, useProfile, useRouter, useSearchParamsSSR, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
+import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet, useProfile, useRouter, useSearchParamsSSR, useTokenBalanceDirect, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/cn.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
 import invariant from "invariant";
@@ -12,17 +12,19 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
+import { useAutoSelectCryptoPaymentMethod } from "../hooks/useAutoSelectCryptoPaymentMethod.js";
+import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
 import { CryptoPaySection } from "./common/CryptoPaySection.js";
 import { CryptoReceiveSection } from "./common/CryptoReceiveSection.js";
+import { FeeDetailPanel } from "./common/FeeDetailPanel.js";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
 import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails.js";
 import { OrderHistory } from "./common/OrderHistory.js";
 import { PanelOnramp } from "./common/PanelOnramp.js";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment.js";
 import { PointsDetailPanel } from "./common/PointsDetailPanel.js";
-import { FeeDetailPanel } from "./common/FeeDetailPanel.js";
 import { RecipientSelection } from "./common/RecipientSelection.js";
 import { TabSection } from "./common/TabSection.js";
 export var PanelView;
@@ -304,13 +306,36 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // );
     // State for recipient selection
     const [recipientAddress, setRecipientAddress] = useState();
-    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);
     // Helper function to map payment method to onramp vendor
@@ -474,17 +499,30 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             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 ||
                 selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
@@ -494,14 +532,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 return { text: "Continue to payment", disable: false, error: false, loading: false };
             }
         }
-        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,
@@ -519,14 +549,15 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     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");
@@ -537,12 +568,19 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 return;
             }
             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");
                     navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward");
                     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 ||
                     selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ||
@@ -755,10 +793,10 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
+                        }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), setRecipientAddress: setRecipientAddress, recipientAddressFromProps: recipientAddressFromProps, globalAddress: globalAddress, dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
                             setIsSrcInputDirty(false);
                             setDstAmount(value);
-                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") }))] }), _jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
+                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }))] }), _jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
     const onrampPaymentView = (_jsx(PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: recipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             navigateToPanel(PanelView.ORDER_DETAILS, "forward");

package/dist/esm/anyspend/react/components/AnySpendCustom.js

@@ -14,6 +14,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { base } from "viem/chains";
 import { useFeatureFlags } from "../contexts/FeatureFlagsContext.js";
+import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
 import { FeeBreakDown } from "./common/FeeBreakDown.js";
@@ -110,6 +111,8 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     const featureFlags = useFeatureFlags();
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
+    // Auto-set active wallet from wagmi
+    useAutoSetActiveWalletFromWagmi();
     const [activePanel, setActivePanel] = useState(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
     const [activeTab, setActiveTab] = useState(activeTabProps);
     // Add state for selected payment methods

package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.d.ts

@@ -0,0 +1,34 @@
+import { components } from "../../../anyspend/types/api";
+import { GetQuoteResponse } from "../../../anyspend/types/api_req_res";
+type CustomExactInConfig = {
+    functionAbi: string;
+    functionName: string;
+    functionArgs: string[];
+    to: string;
+    spenderAddress?: string;
+    action?: string;
+};
+export interface AnySpendCustomExactInProps {
+    loadOrder?: string;
+    mode?: "modal" | "page";
+    recipientAddress: string;
+    paymentType?: "crypto" | "fiat";
+    sourceTokenAddress?: string;
+    sourceTokenChainId?: number;
+    destinationToken: components["schemas"]["Token"];
+    destinationChainId: number;
+    onSuccess?: () => void;
+    mainFooter?: React.ReactNode;
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
+    customUsdInputValues?: string[];
+    preferEoa?: boolean;
+    customExactInConfig: CustomExactInConfig;
+    header?: ({ anyspendPrice, isLoadingAnyspendPrice, }: {
+        anyspendPrice: GetQuoteResponse | undefined;
+        isLoadingAnyspendPrice: boolean;
+    }) => React.JSX.Element;
+}
+export declare function AnySpendCustomExactIn(props: AnySpendCustomExactInProps): import("react/jsx-runtime").JSX.Element;
+export {};