@b3dotfun/sdk 0.0.62 → 0.0.63-test.0-alpha.0

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

@@ -19,17 +19,19 @@ const react_4 = require("react");
 const sonner_1 = require("sonner");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
+const useAutoSelectCryptoPaymentMethod_1 = require("../hooks/useAutoSelectCryptoPaymentMethod");
+const useAutoSetActiveWalletFromWagmi_1 = require("../hooks/useAutoSetActiveWalletFromWagmi");
 const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
 const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
 const CryptoPaySection_1 = require("./common/CryptoPaySection");
 const CryptoReceiveSection_1 = require("./common/CryptoReceiveSection");
+const FeeDetailPanel_1 = require("./common/FeeDetailPanel");
 const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
 const OrderDetails_1 = require("./common/OrderDetails");
 const OrderHistory_1 = require("./common/OrderHistory");
 const PanelOnramp_1 = require("./common/PanelOnramp");
 const PanelOnrampPayment_1 = require("./common/PanelOnrampPayment");
 const PointsDetailPanel_1 = require("./common/PointsDetailPanel");
-const FeeDetailPanel_1 = require("./common/FeeDetailPanel");
 const RecipientSelection_1 = require("./common/RecipientSelection");
 const TabSection_1 = require("./common/TabSection");
 var PanelView;
@@ -311,13 +313,36 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // );
     // State for recipient selection
     const [recipientAddress, setRecipientAddress] = (0, react_4.useState)();
-    const { address: globalAddress, wallet: globalWallet } = (0, react_2.useAccountWallet)();
+    const { address: globalAddress, wallet: globalWallet, connectedEOAWallet } = (0, react_2.useAccountWallet)();
     const recipientProfile = (0, react_2.useProfile)({ address: recipientAddress, fresh: true });
     const recipientName = recipientProfile.data?.name;
-    // Set default recipient address when wallet changes
-    (0, react_4.useEffect)(() => {
-        setRecipientAddress(recipientAddressFromProps || globalAddress);
-    }, [recipientAddressFromProps, globalAddress]);
+    // Auto-set active wallet from wagmi
+    (0, useAutoSetActiveWalletFromWagmi_1.useAutoSetActiveWalletFromWagmi)();
+    // Check token balance for crypto payments
+    const { rawBalance, isLoading: isBalanceLoading } = (0, react_2.useTokenBalanceDirect)({
+        token: selectedSrcToken,
+        address: connectedEOAWallet?.getAccount()?.address,
+    });
+    // Check if user has enough balanceuseAutoSetActiveWalletFromWagmi
+    const hasEnoughBalance = (0, react_4.useMemo)(() => {
+        if (!rawBalance || isBalanceLoading || activeTab !== "crypto")
+            return false;
+        try {
+            const requiredAmount = (0, viem_1.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
+    (0, useAutoSelectCryptoPaymentMethod_1.useAutoSelectCryptoPaymentMethod)({
+        paymentType: activeTab,
+        selectedCryptoPaymentMethod,
+        setSelectedCryptoPaymentMethod,
+        hasEnoughBalance,
+        isBalanceLoading,
+    });
     // Get geo-based onramp options for fiat payments
     const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
     // Helper function to map payment method to onramp vendor
@@ -481,17 +506,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_1.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 === CryptoPaymentMethod_1.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 === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
                 selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET) {
@@ -501,14 +539,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_1.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,
@@ -526,14 +556,15 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     const onMainButtonClick = async () => {
         if (btnInfo.disable)
             return;
-        if (!recipientAddress) {
-            navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
-            return;
-        }
         try {
             (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
-            (0, invariant_1.default)(recipientAddress, "Recipient address is not found");
             if (activeTab === "fiat") {
+                // For fiat: check recipient first
+                if (!recipientAddress) {
+                    navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
+                    return;
+                }
+                (0, invariant_1.default)(recipientAddress, "Recipient address is not found");
                 // If no fiat payment method selected, show payment method selection
                 if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
                     navigateToPanel(PanelView.FIAT_PAYMENT_METHOD, "forward");
@@ -544,12 +575,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 === CryptoPaymentMethod_1.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;
+                }
+                (0, invariant_1.default)(recipientAddress, "Recipient address is not found");
                 // If payment method is selected, create order with payment method info
                 if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
                     selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ||
@@ -762,10 +800,10 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.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: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.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") }))] }), (0, jsx_runtime_1.jsxs)(react_3.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: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.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 }))] }), (0, jsx_runtime_1.jsxs)(react_3.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: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
     const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.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/cjs/anyspend/react/components/AnySpendCustom.js

@@ -53,6 +53,7 @@ const react_4 = __importStar(require("react"));
 const sonner_1 = require("sonner");
 const chains_1 = require("viem/chains");
 const FeatureFlagsContext_1 = require("../contexts/FeatureFlagsContext");
+const useAutoSetActiveWalletFromWagmi_1 = require("../hooks/useAutoSetActiveWalletFromWagmi");
 const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
 const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
 const FeeBreakDown_1 = require("./common/FeeBreakDown");
@@ -149,6 +150,8 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     const featureFlags = (0, FeatureFlagsContext_1.useFeatureFlags)();
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
+    // Auto-set active wallet from wagmi
+    (0, useAutoSetActiveWalletFromWagmi_1.useAutoSetActiveWalletFromWagmi)();
     const [activePanel, setActivePanel] = (0, react_4.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
     const [activeTab, setActiveTab] = (0, react_4.useState)(activeTabProps);
     // Add state for selected payment methods

package/dist/cjs/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?: (amount: string) => 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 {};

package/dist/cjs/anyspend/react/components/AnySpendCustomExactIn.js

@@ -0,0 +1,275 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnySpendCustomExactIn = AnySpendCustomExactIn;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../anyspend/utils");
+const react_1 = require("../../../global-account/react");
+const cn_1 = require("../../../shared/utils/cn");
+const invariant_1 = __importDefault(require("invariant"));
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("motion/react");
+const react_3 = require("react");
+const sonner_1 = require("sonner");
+const react_4 = require("thirdweb/react");
+const utils_2 = require("../../utils");
+const useAnyspendFlow_1 = require("../hooks/useAnyspendFlow");
+const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
+const CryptoPaySection_1 = require("./common/CryptoPaySection");
+const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
+const CryptoReceiveSection_1 = require("./common/CryptoReceiveSection");
+const FeeDetailPanel_1 = require("./common/FeeDetailPanel");
+const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
+const OrderDetails_1 = require("./common/OrderDetails");
+const PanelOnramp_1 = require("./common/PanelOnramp");
+const PointsDetailPanel_1 = require("./common/PointsDetailPanel");
+const RecipientSelection_1 = require("./common/RecipientSelection");
+const SLIPPAGE_PERCENT = 3;
+function AnySpendCustomExactIn(props) {
+    const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
+    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendCustomExactInInner, { ...props }) }));
+}
+function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, destinationToken, destinationChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, customExactInConfig, header, }) {
+    const actionLabel = customExactInConfig.action ?? "Custom Execution";
+    const DESTINATION_TOKEN_DETAILS = {
+        SYMBOL: destinationToken.symbol ?? "TOKEN",
+        LOGO_URI: destinationToken.metadata?.logoURI ?? "",
+    };
+    const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, selectedDstToken, selectedDstChainId, srcAmount, setSrcAmount, dstAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, hasEnoughBalance, isBalanceLoading, anyspendQuote, isLoadingAnyspendQuote, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = (0, useAnyspendFlow_1.useAnyspendFlow)({
+        paymentType,
+        recipientAddress,
+        loadOrder,
+        isDepositMode: true,
+        onTransactionSuccess: onSuccess,
+        sourceTokenAddress,
+        sourceTokenChainId,
+        destinationTokenAddress: destinationToken.address,
+        destinationTokenChainId: destinationChainId,
+        slippage: SLIPPAGE_PERCENT,
+        disableUrlParamManagement: true,
+        orderType: "custom_exact_in",
+    });
+    const { connectedEOAWallet } = (0, react_1.useAccountWallet)();
+    const setActiveWallet = (0, react_4.useSetActiveWallet)();
+    const activeWallet = (0, react_4.useActiveWallet)();
+    const setGlobalAccountWallet = (0, utils_2.useGlobalWalletState)(state => state.setGlobalAccountWallet);
+    const appliedPreferEoa = (0, react_3.useRef)(false);
+    (0, react_3.useEffect)(() => {
+        if (preferEoa && !appliedPreferEoa.current) {
+            if (connectedEOAWallet) {
+                appliedPreferEoa.current = true;
+                setGlobalAccountWallet(activeWallet);
+                setActiveWallet(connectedEOAWallet);
+            }
+        }
+    }, [preferEoa, connectedEOAWallet, setActiveWallet, activeWallet, setGlobalAccountWallet]);
+    const selectedRecipientOrDefault = selectedRecipientAddress ?? recipientAddress;
+    const expectedDstAmountRaw = anyspendQuote?.data?.currencyOut?.amount ?? "0";
+    const buildCustomPayload = (_recipient) => {
+        return {
+            amount: expectedDstAmountRaw,
+            expectedDstAmount: expectedDstAmountRaw,
+            functionAbi: customExactInConfig.functionAbi,
+            functionName: customExactInConfig.functionName,
+            functionArgs: customExactInConfig.functionArgs,
+            to: (0, utils_1.normalizeAddress)(customExactInConfig.to),
+            spenderAddress: customExactInConfig.spenderAddress
+                ? (0, utils_1.normalizeAddress)(customExactInConfig.spenderAddress)
+                : undefined,
+            action: customExactInConfig.action,
+        };
+    };
+    const btnInfo = (0, react_3.useMemo)(() => {
+        if (activeInputAmountInWei === "0")
+            return { text: "Enter an amount", disable: true, error: false, loading: false };
+        if (isLoadingAnyspendQuote)
+            return { text: "Loading quote...", disable: true, error: false, loading: true };
+        if (isCreatingOrder || isCreatingOnrampOrder)
+            return { text: "Creating order...", disable: true, error: false, loading: true };
+        if (!selectedRecipientOrDefault)
+            return { text: "Select recipient", disable: false, error: false, loading: false };
+        if (!anyspendQuote || !anyspendQuote.success)
+            return { text: "Get quote error", disable: true, error: true, loading: false };
+        if (paymentType === "crypto") {
+            if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
+                return { text: "Choose payment method", disable: false, error: false, loading: false };
+            }
+            if (!hasEnoughBalance &&
+                !isBalanceLoading &&
+                selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET) {
+                return { text: "Insufficient balance", disable: true, error: true, loading: false };
+            }
+            return { text: `Execute ${actionLabel}`, disable: false, error: false, loading: false };
+        }
+        if (paymentType === "fiat") {
+            if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
+                return { text: "Select payment method", disable: false, error: false, loading: false };
+            }
+            return { text: "Buy", disable: false, error: false, loading: false };
+        }
+        return { text: "Continue", disable: false, error: false, loading: false };
+    }, [
+        activeInputAmountInWei,
+        isLoadingAnyspendQuote,
+        isCreatingOrder,
+        isCreatingOnrampOrder,
+        selectedRecipientOrDefault,
+        anyspendQuote,
+        paymentType,
+        selectedCryptoPaymentMethod,
+        selectedFiatPaymentMethod,
+        hasEnoughBalance,
+        isBalanceLoading,
+        actionLabel,
+    ]);
+    const onMainButtonClick = async () => {
+        if (btnInfo.disable)
+            return;
+        if (!selectedRecipientOrDefault) {
+            setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION);
+            return;
+        }
+        if (paymentType === "crypto") {
+            if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
+                setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD);
+                return;
+            }
+            await handleCryptoOrder();
+        }
+        else if (paymentType === "fiat") {
+            if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
+                setActivePanel(useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD);
+                return;
+            }
+            await handleFiatOrder();
+        }
+    };
+    const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
+    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
+                                setIsSrcInputDirty(false);
+                                setSrcAmount(value);
+                            }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL) }))] }) }), (0, jsx_runtime_1.jsx)(react_2.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: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), mainFooter ? mainFooter : null] }));
+    const handleCryptoOrder = async () => {
+        try {
+            (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
+            (0, invariant_1.default)(selectedRecipientOrDefault, "Recipient address is not found");
+            const srcAmountBigInt = BigInt(activeInputAmountInWei);
+            const payload = buildCustomPayload(selectedRecipientOrDefault);
+            createOrder({
+                recipientAddress: selectedRecipientOrDefault,
+                orderType: "custom_exact_in",
+                srcChain: selectedSrcChainId,
+                dstChain: selectedDstChainId,
+                srcToken: selectedSrcToken,
+                dstToken: selectedDstToken,
+                srcAmount: srcAmountBigInt.toString(),
+                expectedDstAmount: expectedDstAmountRaw,
+                creatorAddress: globalAddress,
+                payload,
+            });
+        }
+        catch (err) {
+            console.error(err);
+            sonner_1.toast.error("Failed to create order: " + err.message);
+        }
+    };
+    const handleFiatOrder = async () => {
+        try {
+            (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
+            (0, invariant_1.default)(selectedRecipientOrDefault, "Recipient address is not found");
+            if (!srcAmount || parseFloat(srcAmount) <= 0) {
+                sonner_1.toast.error("Please enter a valid amount");
+                return;
+            }
+            let vendor;
+            let paymentMethodString = "";
+            if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY) {
+                if (coinbaseAvailablePaymentMethods.length === 0) {
+                    sonner_1.toast.error("Coinbase Pay not available");
+                    return;
+                }
+                vendor = "coinbase";
+                paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || "";
+            }
+            else if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE) {
+                if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
+                    sonner_1.toast.error("Stripe not available");
+                    return;
+                }
+                vendor = "stripe-web2";
+            }
+            else {
+                sonner_1.toast.error("Please select a payment method");
+                return;
+            }
+            const payload = buildCustomPayload(selectedRecipientOrDefault);
+            createOnrampOrder({
+                recipientAddress: selectedRecipientOrDefault,
+                orderType: "custom_exact_in",
+                dstChain: selectedDstChainId,
+                dstToken: selectedDstToken,
+                srcFiatAmount: srcAmount,
+                onramp: {
+                    vendor,
+                    paymentMethod: paymentMethodString,
+                    country: geoData?.country || "US",
+                    redirectUrl: window.location.origin,
+                },
+                expectedDstAmount: expectedDstAmountRaw,
+                creatorAddress: globalAddress,
+                payload,
+            });
+        }
+        catch (err) {
+            console.error(err);
+            sonner_1.toast.error("Failed to create order: " + err.message);
+        }
+    };
+    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
+                    setOrderId(undefined);
+                    setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
+                }, disableUrlParamManagement: true, points: oat.data.points || undefined })) }) }));
+    const loadingView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-full flex-col items-center gap-4 p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: "Loading order details..." }) }));
+    const recipientSelectionView = ((0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { initialValue: selectedRecipientOrDefault || "", onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN), onConfirm: address => {
+            setSelectedRecipientAddress(address);
+            setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
+        } }));
+    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: undefined, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN), onSelectPaymentMethod: (method) => {
+            setSelectedCryptoPaymentMethod(method);
+            setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
+        } }));
+    const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)(FiatPaymentMethod_1.FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN), onSelectPaymentMethod: (method) => {
+            setSelectedFiatPaymentMethod(method);
+            setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
+        }, srcAmountOnRamp: srcAmount }));
+    const pointsDetailView = ((0, jsx_runtime_1.jsx)(PointsDetailPanel_1.PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN) }));
+    const feeDetailView = anyspendQuote?.data?.fee ? ((0, jsx_runtime_1.jsx)(FeeDetailPanel_1.FeeDetailPanel, { fee: anyspendQuote.data.fee, transactionAmountUsd: paymentType === "fiat"
+            ? parseFloat(srcAmount)
+            : anyspendQuote.data.currencyIn?.amountUsd
+                ? Number(anyspendQuote.data.currencyIn.amountUsd)
+                : undefined, onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN) })) : null;
+    return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsx)(react_1.TransitionPanel, { activeIndex: orderId
+                    ? oat
+                        ? useAnyspendFlow_1.PanelView.ORDER_DETAILS
+                        : useAnyspendFlow_1.PanelView.LOADING
+                    : activePanel === useAnyspendFlow_1.PanelView.ORDER_DETAILS
+                        ? useAnyspendFlow_1.PanelView.MAIN
+                        : activePanel, className: (0, cn_1.cn)("rounded-2xl", {
+                    "mt-0": mode === "modal",
+                }), variants: {
+                    enter: { x: 300, opacity: 0 },
+                    center: { x: 0, opacity: 1 },
+                    exit: { x: -300, opacity: 0 },
+                }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
+                    (0, jsx_runtime_1.jsx)("div", { children: mainView }, "main-view"),
+                    (0, jsx_runtime_1.jsx)("div", { children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
+                    (0, jsx_runtime_1.jsx)("div", { children: fiatPaymentMethodView }, "fiat-payment-method-view"),
+                    (0, jsx_runtime_1.jsx)("div", { children: recipientSelectionView }, "recipient-selection-view"),
+                    (0, jsx_runtime_1.jsx)("div", { children: orderDetailsView }, "order-details-view"),
+                    (0, jsx_runtime_1.jsx)("div", { children: loadingView }, "loading-view"),
+                    (0, jsx_runtime_1.jsx)("div", { children: pointsDetailView }, "points-detail-view"),
+                    (0, jsx_runtime_1.jsx)("div", { children: feeDetailView }, "fee-detail-view"),
+                ] }) }) }));
+}

package/dist/cjs/anyspend/react/components/AnySpendStakeB3.js

@@ -38,13 +38,14 @@ function generateEncodedDataForStakingB3(amount, beneficiary) {
 function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, stakeAmount, onSuccess, }) {
     const hasMounted = (0, react_1.useHasMounted)();
     const { setB3ModalOpen } = (0, react_1.useModalStore)();
-    // Fetch B3 token balance
-    const { formattedBalance: b3Balance, isLoading: isBalanceLoading, rawBalance: b3RawBalance, } = (0, react_1.useTokenBalance)({
-        token: anyspend_1.B3_TOKEN,
-    });
     // Wagmi hooks for direct staking
     const { address } = (0, wagmi_1.useAccount)();
     const { switchChainAndExecute, isSwitchingOrExecuting } = (0, react_1.useUnifiedChainSwitchAndExecute)();
+    // Fetch B3 token balance
+    const { data: simBalance, isLoading: isBalanceLoading } = (0, react_1.useSimBalance)(address, [chains_1.base.id]);
+    const b3RawBalanceStr = simBalance?.balances.find(b => (0, anyspend_1.eqci)(b.address, anyspend_1.B3_TOKEN.address))?.amount || "0";
+    const b3RawBalance = BigInt(b3RawBalanceStr);
+    const b3Balance = (0, number_1.formatTokenAmount)(b3RawBalance, anyspend_1.B3_TOKEN.decimals);
     // State for direct staking flow
     const [isStaking, setIsStaking] = (0, react_3.useState)(false);
     const [stakingTxHash, setStakingTxHash] = (0, react_3.useState)("");

package/dist/cjs/anyspend/react/components/AnySpendStakeB3ExactIn.d.ts

@@ -0,0 +1,9 @@
+export declare function AnySpendStakeB3ExactIn({ loadOrder, mode, sourceTokenAddress, sourceTokenChainId, recipientAddress, stakeAmount, onSuccess, }: {
+    loadOrder?: string;
+    mode?: "modal" | "page";
+    sourceTokenAddress?: string;
+    sourceTokenChainId?: number;
+    recipientAddress: string;
+    stakeAmount?: string;
+    onSuccess?: (amount: string) => void;
+}): import("react/jsx-runtime").JSX.Element | null;