@b3dotfun/sdk 0.0.63-test.0 → 0.0.63

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/components/SignInWithB3/steps/LoginStep.js

@@ -41,8 +41,8 @@ function LoginStep({ onSuccess, chain }) {
             }, header: {
                 title: "Sign in with B3",
                 titleIcon: "https://cdn.b3.fun/b3_logo.svg",
-            }, className: "b3-login-step", onConnect: async (wallet) => {
-                await onConnect(wallet);
+            }, className: "b3-login-step", onConnect: async (wallet, allConnectedWallets) => {
+                await onConnect(wallet, allConnectedWallets);
                 const account = wallet.getAccount();
                 if (!account)
                     throw new Error("No account found");

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

@@ -8,9 +8,9 @@ export declare function useAuthentication(partnerId: string): {
     isConnected: boolean;
     wallet: import("thirdweb/dist/types/wallets/in-app/core/wallet/types").EcosystemWallet;
     preAuthenticate: typeof preAuthenticate;
-    connect: (wallet: Wallet) => Promise<void>;
+    connect: (_walleAutoConnectedWith: Wallet, allConnectedWallets: Wallet[]) => Promise<void>;
     isAuthenticating: boolean;
-    onConnect: (wallet: Wallet) => Promise<void>;
+    onConnect: (_walleAutoConnectedWith: Wallet, allConnectedWallets: Wallet[]) => Promise<void>;
     user: {
         email?: string | undefined;
         username?: string | undefined;

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

@@ -142,7 +142,12 @@ function useAuthentication(partnerId) {
             return userAuth;
         }
     }, [activeWallet, partnerId, authenticate, setIsAuthenticated, setIsAuthenticating, setUser, setHasStartedConnecting]);
-    const onConnect = (0, react_2.useCallback)(async (wallet) => {
+    const onConnect = (0, react_2.useCallback)(async (_walleAutoConnectedWith, allConnectedWallets) => {
+        debug("@@useAuthentication:onConnect", { _walleAutoConnectedWith, allConnectedWallets });
+        const wallet = allConnectedWallets.find(wallet => wallet.id.startsWith("ecosystem."));
+        if (!wallet) {
+            throw new Error("No smart wallet found during auto-connect");
+        }
         debug("@@useAuthentication:onConnect", { wallet });
         try {
             setHasStartedConnecting(true);
@@ -209,7 +214,7 @@ function useAuthentication(partnerId) {
     const { isLoading: useAutoConnectLoading } = (0, react_3.useAutoConnect)({
         client: thirdweb_1.client,
         wallets: [wallet],
-        onConnect: onConnect,
+        onConnect,
     });
     /**
      * useAutoConnectLoading starts as false

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/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/esm/anyspend/react/components/AnySpendCustomExactIn.js

@@ -0,0 +1,269 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { normalizeAddress } from "../../../anyspend/utils/index.js";
+import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet } from "../../../global-account/react/index.js";
+import { cn } from "../../../shared/utils/cn.js";
+import invariant from "invariant";
+import { ArrowDown, Loader2 } from "lucide-react";
+import { motion } from "motion/react";
+import { useEffect, useMemo, useRef } from "react";
+import { toast } from "sonner";
+import { useActiveWallet, useSetActiveWallet } from "thirdweb/react";
+import { useGlobalWalletState } from "../../utils/index.js";
+import { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow.js";
+import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
+import { CryptoPaySection } from "./common/CryptoPaySection.js";
+import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
+import { CryptoReceiveSection } from "./common/CryptoReceiveSection.js";
+import { FeeDetailPanel } from "./common/FeeDetailPanel.js";
+import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
+import { OrderDetails } from "./common/OrderDetails.js";
+import { PanelOnramp } from "./common/PanelOnramp.js";
+import { PointsDetailPanel } from "./common/PointsDetailPanel.js";
+import { RecipientSelection } from "./common/RecipientSelection.js";
+const SLIPPAGE_PERCENT = 3;
+export function AnySpendCustomExactIn(props) {
+    const fingerprintConfig = getFingerprintConfig();
+    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _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, } = 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 } = useAccountWallet();
+    const setActiveWallet = useSetActiveWallet();
+    const activeWallet = useActiveWallet();
+    const setGlobalAccountWallet = useGlobalWalletState(state => state.setGlobalAccountWallet);
+    const appliedPreferEoa = useRef(false);
+    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: normalizeAddress(customExactInConfig.to),
+            spenderAddress: customExactInConfig.spenderAddress
+                ? normalizeAddress(customExactInConfig.spenderAddress)
+                : undefined,
+            action: customExactInConfig.action,
+        };
+    };
+    const btnInfo = 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 === CryptoPaymentMethodType.NONE) {
+                return { text: "Choose payment method", disable: false, error: false, loading: false };
+            }
+            if (!hasEnoughBalance &&
+                !isBalanceLoading &&
+                selectedCryptoPaymentMethod === 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.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(PanelView.RECIPIENT_SELECTION);
+            return;
+        }
+        if (paymentType === "crypto") {
+            if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
+                setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
+                return;
+            }
+            await handleCryptoOrder();
+        }
+        else if (paymentType === "fiat") {
+            if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
+                setActivePanel(PanelView.FIAT_PAYMENT_METHOD);
+                return;
+            }
+            await handleFiatOrder();
+        }
+    };
+    const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsxs("div", { children: [_jsx("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), _jsx("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
+    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(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: _jsx(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: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: 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: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(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(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL) }))] }) }), _jsx(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] }) }) }), mainFooter ? mainFooter : null] }));
+    const handleCryptoOrder = async () => {
+        try {
+            invariant(anyspendQuote, "Relay price is not found");
+            invariant(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);
+            toast.error("Failed to create order: " + err.message);
+        }
+    };
+    const handleFiatOrder = async () => {
+        try {
+            invariant(anyspendQuote, "Relay price is not found");
+            invariant(selectedRecipientOrDefault, "Recipient address is not found");
+            if (!srcAmount || parseFloat(srcAmount) <= 0) {
+                toast.error("Please enter a valid amount");
+                return;
+            }
+            let vendor;
+            let paymentMethodString = "";
+            if (selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY) {
+                if (coinbaseAvailablePaymentMethods.length === 0) {
+                    toast.error("Coinbase Pay not available");
+                    return;
+                }
+                vendor = "coinbase";
+                paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || "";
+            }
+            else if (selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE) {
+                if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
+                    toast.error("Stripe not available");
+                    return;
+                }
+                vendor = "stripe-web2";
+            }
+            else {
+                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);
+            toast.error("Failed to create order: " + err.message);
+        }
+    };
+    const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(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" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
+                    setOrderId(undefined);
+                    setActivePanel(PanelView.MAIN);
+                }, disableUrlParamManagement: true, points: oat.data.points || undefined })) }) }));
+    const loadingView = (_jsx("div", { className: "mx-auto flex w-full flex-col items-center gap-4 p-5", children: _jsx("div", { className: "text-as-primary", children: "Loading order details..." }) }));
+    const recipientSelectionView = (_jsx(RecipientSelection, { initialValue: selectedRecipientOrDefault || "", onBack: () => setActivePanel(PanelView.MAIN), onConfirm: address => {
+            setSelectedRecipientAddress(address);
+            setActivePanel(PanelView.MAIN);
+        } }));
+    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: undefined, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
+            setSelectedCryptoPaymentMethod(method);
+            setActivePanel(PanelView.MAIN);
+        } }));
+    const fiatPaymentMethodView = (_jsx(FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
+            setSelectedFiatPaymentMethod(method);
+            setActivePanel(PanelView.MAIN);
+        }, srcAmountOnRamp: srcAmount }));
+    const pointsDetailView = (_jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.MAIN) }));
+    const feeDetailView = anyspendQuote?.data?.fee ? (_jsx(FeeDetailPanel, { fee: anyspendQuote.data.fee, transactionAmountUsd: paymentType === "fiat"
+            ? parseFloat(srcAmount)
+            : anyspendQuote.data.currencyIn?.amountUsd
+                ? Number(anyspendQuote.data.currencyIn.amountUsd)
+                : undefined, onBack: () => setActivePanel(PanelView.MAIN) })) : null;
+    return (_jsx(StyleRoot, { children: _jsx("div", { className: 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: _jsx(TransitionPanel, { activeIndex: orderId
+                    ? oat
+                        ? PanelView.ORDER_DETAILS
+                        : PanelView.LOADING
+                    : activePanel === PanelView.ORDER_DETAILS
+                        ? PanelView.MAIN
+                        : activePanel, className: 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: [
+                    _jsx("div", { children: mainView }, "main-view"),
+                    _jsx("div", { children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
+                    _jsx("div", { children: fiatPaymentMethodView }, "fiat-payment-method-view"),
+                    _jsx("div", { children: recipientSelectionView }, "recipient-selection-view"),
+                    _jsx("div", { children: orderDetailsView }, "order-details-view"),
+                    _jsx("div", { children: loadingView }, "loading-view"),
+                    _jsx("div", { children: pointsDetailView }, "points-detail-view"),
+                    _jsx("div", { children: feeDetailView }, "fee-detail-view"),
+                ] }) }) }));
+}

package/dist/esm/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;