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

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

@@ -0,0 +1,285 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ABI_ERC20_STAKING, B3_TOKEN, eqci } from "../../../anyspend/index.js";
+import { normalizeAddress } from "../../../anyspend/utils/index.js";
+import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, useHasMounted, useModalStore, useSimBalance, useUnifiedChainSwitchAndExecute, } from "../../../global-account/react/index.js";
+import { PUBLIC_BASE_RPC_URL } from "../../../shared/constants/index.js";
+import { formatTokenAmount } from "../../../shared/utils/number.js";
+import { ArrowRight, Loader2 } from "lucide-react";
+import { motion } from "motion/react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { createPublicClient, encodeFunctionData, erc20Abi, http } from "viem";
+import { base } from "viem/chains";
+import { useAccount, useWaitForTransactionReceipt } from "wagmi";
+import { AnySpendCustomExactIn } from "./AnySpendCustomExactIn.js";
+import { EthIcon } from "./icons/EthIcon.js";
+import { SolIcon } from "./icons/SolIcon.js";
+import { UsdcIcon } from "./icons/USDCIcon.js";
+const basePublicClient = createPublicClient({
+    chain: base,
+    transport: http(PUBLIC_BASE_RPC_URL),
+});
+const ERC20Staking = "0xbf04200be3cbf371467a539706393c81c470f523";
+const STAKE_FUNCTION_ABI = JSON.stringify([
+    {
+        name: "stake",
+        type: "function",
+        stateMutability: "nonpayable",
+        inputs: [
+            { name: "amount", type: "uint256" },
+            { name: "beneficiary", type: "address" },
+        ],
+        outputs: [],
+    },
+]);
+export function AnySpendStakeB3ExactIn({ loadOrder, mode = "modal", sourceTokenAddress, sourceTokenChainId, recipientAddress, stakeAmount, onSuccess, }) {
+    const hasMounted = useHasMounted();
+    const { setB3ModalOpen } = useModalStore();
+    // Wagmi hooks for direct staking
+    const { address } = useAccount();
+    const { switchChainAndExecute, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
+    // Fetch B3 token balance
+    const { data: simBalance, isLoading: isBalanceLoading } = useSimBalance(address, [base.id]);
+    const b3RawBalanceStr = simBalance?.balances.find(b => eqci(b.address, B3_TOKEN.address))?.amount || "0";
+    const b3RawBalance = BigInt(b3RawBalanceStr);
+    const b3Balance = formatTokenAmount(b3RawBalance, B3_TOKEN.decimals);
+    // State for direct staking flow
+    const [isStaking, setIsStaking] = useState(false);
+    const [stakingTxHash, setStakingTxHash] = useState("");
+    const [showSuccessModal, setShowSuccessModal] = useState(false);
+    // Wait for transaction confirmation
+    const { isLoading: isTxPending, isSuccess: isTxSuccess } = useWaitForTransactionReceipt({
+        hash: stakingTxHash,
+        query: {
+            structuralSharing: false, // Disable to avoid BigInt serialization issues
+        },
+    });
+    // Show success modal when transaction is confirmed
+    useEffect(() => {
+        if (isTxSuccess && stakingTxHash) {
+            setShowAmountPrompt(false);
+            setShowSuccessModal(true);
+            setIsStaking(false);
+        }
+    }, [isTxSuccess, stakingTxHash]);
+    const [userStakeAmount, setUserStakeAmount] = useState(stakeAmount || "");
+    const [showAmountPrompt, setShowAmountPrompt] = useState(!stakeAmount);
+    const [isAmountValid, setIsAmountValid] = useState(!!stakeAmount);
+    const [validationError, setValidationError] = useState("");
+    // Store display amount for UI
+    const [displayAmount, setDisplayAmount] = useState("");
+    // Debounced state for balance checks and messaging
+    const [debouncedAmount, setDebouncedAmount] = useState("");
+    const [debouncedUserStakeAmount, setDebouncedUserStakeAmount] = useState("");
+    // Debounce the amount for balance checks
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedAmount(displayAmount);
+            setDebouncedUserStakeAmount(userStakeAmount);
+        }, 500);
+        return () => clearTimeout(timer);
+    }, [displayAmount, userStakeAmount]);
+    useEffect(() => {
+        if (stakeAmount) {
+            setUserStakeAmount(stakeAmount);
+            setShowAmountPrompt(false);
+            setIsAmountValid(true);
+        }
+    }, [stakeAmount]);
+    if (!recipientAddress)
+        return null;
+    const validateAndSetAmount = (value) => {
+        // Allow decimal input by validating against a pattern
+        // This regex allows numbers with up to 18 decimal places
+        const isValidFormat = /^(\d+\.?\d{0,18}|\.\d{1,18})$/.test(value) || value === "";
+        if (!isValidFormat && value !== "") {
+            return;
+        }
+        setDisplayAmount(value);
+        try {
+            if (value === "" || value === ".") {
+                setUserStakeAmount("");
+                setIsAmountValid(false);
+                setValidationError("");
+                return;
+            }
+            // For UI validation - check if it's a positive number
+            const numValue = parseFloat(value);
+            if (isNaN(numValue) || numValue <= 0) {
+                setIsAmountValid(false);
+                setUserStakeAmount("");
+                setValidationError("Please enter a valid positive number");
+                return;
+            }
+            // Check minimum stake amount (50 B3)
+            if (numValue < 50) {
+                setIsAmountValid(false);
+                setUserStakeAmount("");
+                setValidationError("Minimum stake amount is 50 B3");
+                return;
+            }
+            // Convert to wei (multiply by 10^18)
+            // Handle decimal places correctly by removing the decimal point
+            let fullAmount;
+            if (value.includes(".")) {
+                const [whole, fraction = ""] = value.split(".");
+                // Pad with zeros to 18 decimal places
+                const paddedFraction = fraction.padEnd(18, "0");
+                fullAmount = whole + paddedFraction;
+            }
+            else {
+                fullAmount = value + "000000000000000000"; // Add 18 zeros
+            }
+            // Remove leading zeros
+            fullAmount = fullAmount.replace(/^0+/, "") || "0";
+            // Set the full amount for the actual transaction
+            setUserStakeAmount(fullAmount);
+            setIsAmountValid(true);
+            setValidationError("");
+        }
+        catch (error) {
+            setIsAmountValid(false);
+            setUserStakeAmount("");
+            setValidationError("Please enter a valid amount");
+        }
+    };
+    const handleDirectStaking = async () => {
+        if (!address || !basePublicClient || !userStakeAmount)
+            return;
+        try {
+            setIsStaking(true);
+            // Check current allowance
+            const allowance = await basePublicClient.readContract({
+                address: B3_TOKEN.address,
+                abi: erc20Abi,
+                functionName: "allowance",
+                args: [address, ERC20Staking],
+            });
+            // If allowance is insufficient, request approval first
+            if (allowance < BigInt(userStakeAmount)) {
+                toast.info("Approving B3 spending...");
+                const approvalData = encodeFunctionData({
+                    abi: erc20Abi,
+                    functionName: "approve",
+                    args: [ERC20Staking, BigInt(userStakeAmount)],
+                });
+                const approvalHash = await switchChainAndExecute(base.id, {
+                    to: B3_TOKEN.address,
+                    data: approvalData,
+                    value: BigInt(0),
+                });
+                if (!approvalHash) {
+                    toast.error("Approval failed. Please try again.");
+                    return;
+                }
+                const approvalReceipt = await basePublicClient.waitForTransactionReceipt({
+                    hash: approvalHash,
+                    confirmations: 1,
+                });
+                if (approvalReceipt?.status !== "success") {
+                    toast.error("Approval failed. Please try again.");
+                    return;
+                }
+            }
+            // Execute the stake
+            toast.info("Staking B3...");
+            const stakeData = encodeFunctionData({
+                abi: ABI_ERC20_STAKING,
+                functionName: "stake",
+                args: [BigInt(userStakeAmount), recipientAddress],
+            });
+            const stakeHash = await switchChainAndExecute(base.id, {
+                to: ERC20Staking,
+                data: stakeData,
+                value: BigInt(0),
+            });
+            if (stakeHash) {
+                setStakingTxHash(stakeHash);
+                toast.success("Staking transaction submitted!");
+            }
+        }
+        catch (error) {
+            console.error("@@b3-stake-custom-exact-in:error:", error);
+            toast.error("Staking failed. Please try again.");
+            setShowSuccessModal(false); // Ensure modal doesn't show on error
+        }
+        finally {
+            setIsStaking(false);
+        }
+    };
+    const confirmAmount = () => {
+        if (!isAmountValid) {
+            toast.error("Please enter a valid amount to stake");
+            return;
+        }
+        // Check if user has sufficient B3 balance for direct staking
+        const hasEnoughBalance = b3RawBalance && BigInt(userStakeAmount) <= b3RawBalance;
+        if (hasEnoughBalance) {
+            // User has enough B3, proceed with direct staking
+            handleDirectStaking();
+        }
+        else {
+            // User needs more B3, proceed to AnySpend conversion flow
+            setShowAmountPrompt(false);
+        }
+    };
+    const header = () => (_jsxs(_Fragment, { children: [_jsx("div", { className: "relative mx-auto size-32", children: _jsx("img", { alt: "b3 coin", className: "size-full", src: "https://cdn.b3.fun/b3-coin-3d.png" }) }), _jsxs("div", { className: "from-b3-react-background to-as-on-surface-1 mt-[-60px] w-full rounded-t-lg bg-gradient-to-t", children: [_jsx("div", { className: "h-[60px] w-full" }), _jsx("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: _jsxs("span", { className: "font-sf-rounded text-2xl font-semibold", children: ["Swap & Stake ", userStakeAmount ? formatTokenAmount(BigInt(userStakeAmount), 18) : "", " B3 (Exact In)"] }) })] })] }));
+    const onFocusStakeAmountInput = () => {
+        window.scrollTo(0, 0);
+        document.body.scrollTop = 0;
+    };
+    const customExactInConfig = {
+        functionAbi: STAKE_FUNCTION_ABI,
+        functionName: "stake",
+        functionArgs: ["{{amount_out}}", normalizeAddress(recipientAddress)],
+        to: ERC20Staking,
+        spenderAddress: ERC20Staking,
+        action: "stake B3",
+    };
+    // Render amount input prompt if no stake amount is provided
+    if (showAmountPrompt) {
+        return (_jsx(StyleRoot, { children: _jsxs("div", { className: "bg-b3-react-background flex w-full flex-col items-center", children: [_jsxs("div", { className: "w-full px-4", children: [_jsx(motion.div, { initial: false, animate: {
+                                    opacity: hasMounted ? 1 : 0,
+                                    y: hasMounted ? 0 : 20,
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                                }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative mx-auto size-48", children: _jsx("video", { autoPlay: true, muted: true, playsInline: true, className: "size-full", src: "https://cdn.b3.fun/b3-sphere-to-coin.mp4" }) }), _jsx(motion.div, { initial: false, animate: {
+                                    opacity: hasMounted ? 1 : 0,
+                                    y: hasMounted ? 0 : 20,
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                                }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, children: _jsx("h2", { className: "font-sf-rounded font-neue-montreal-medium mb-1 text-center text-2xl font-semibold", children: (() => {
+                                        const hasEnoughBalance = b3RawBalance && BigInt(debouncedUserStakeAmount || "0") <= b3RawBalance;
+                                        return hasEnoughBalance || !debouncedAmount ? "Stake B3" : "Swap & Stake B3";
+                                    })() }) })] }), _jsxs(motion.div, { initial: false, animate: {
+                            opacity: hasMounted ? 1 : 0,
+                            y: hasMounted ? 0 : 20,
+                            filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [_jsx("div", { className: "mb-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-as-primary/70 text-sm font-medium", children: "I want to stake" }), _jsxs("span", { className: "text-as-primary/50 flex items-center gap-1 text-sm", children: ["Available: ", isBalanceLoading ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : `${b3Balance} B3`] })] }) }), _jsxs("div", { className: "relative", children: [_jsx(Input, { onFocus: onFocusStakeAmountInput, type: "text", placeholder: "0.00", value: displayAmount, onChange: e => validateAndSetAmount(e.target.value), className: `h-14 px-4 text-lg ${!isAmountValid && displayAmount ? "border-as-red" : "border-b3-react-border"}` }), _jsx("div", { className: "font-pack absolute right-4 top-1/2 -translate-y-1/2 text-lg font-medium text-blue-500/70", children: "B3" })] }), !isAmountValid && displayAmount && _jsx("p", { className: "text-as-red mt-2 text-sm", children: validationError }), _jsx("div", { className: "mt-4", children: (() => {
+                                    const hasEnoughBalance = b3RawBalance && BigInt(debouncedUserStakeAmount || "0") <= b3RawBalance;
+                                    if (!hasEnoughBalance || !debouncedAmount) {
+                                        return (_jsxs("div", { className: "bg-as-brand/10 flex flex-col items-center gap-2 rounded-lg p-4 pb-5", children: [_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-as-primary text-sm font-semibold", children: "Swap & stake from any token" }), _jsxs(TextLoop, { children: [_jsx(EthIcon, { className: "h-8 w-8" }), _jsx(SolIcon, { className: "h-8 w-8" }), _jsx(UsdcIcon, { className: "h-8 w-8" })] }), _jsx(ArrowRight, { className: "text-as-primary h-4 w-4" }), _jsx("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", className: "h-7 w-7", alt: "B3 Token" })] }), _jsx("p", { className: "text-as-primary/50 text-sm font-medium", children: debouncedAmount
+                                                        ? `No problem, we'll help you swap to ${debouncedAmount} B3!`
+                                                        : "Not enough B3? We'll help you swap from other coins." })] }));
+                                    }
+                                })() }), _jsx(Button, { onClick: confirmAmount, disabled: !isAmountValid || !displayAmount || isStaking || isTxPending || isSwitchingOrExecuting, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary mt-4 h-14 w-full rounded-xl text-lg font-medium", children: isStaking || isSwitchingOrExecuting ? "Staking..." : isTxPending ? "Confirming..." : "Continue" })] })] }) }));
+    }
+    // Success Modal for Direct Staking
+    if (showSuccessModal) {
+        return (_jsx(StyleRoot, { children: _jsxs("div", { className: "bg-b3-react-background flex w-full flex-col items-center", children: [_jsxs("div", { className: "w-full p-4", children: [_jsxs(motion.div, { initial: false, animate: {
+                                    opacity: hasMounted ? 1 : 0,
+                                    y: hasMounted ? 0 : 20,
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                                }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative mx-auto mb-4 size-[120px]", children: [_jsx("div", { className: "absolute inset-0 scale-95 rounded-[50%] bg-black/30 blur-md" }), _jsxs(GlareCardRounded, { className: "overflow-hidden rounded-full border-none", children: [_jsx("img", { alt: "b3 coin", loading: "lazy", width: "64", height: "64", decoding: "async", "data-nimg": "1", className: "size-full shrink-0 bg-transparent text-transparent", src: "https://cdn.b3.fun/b3-coin-3d.png" }), _jsx("div", { className: "absolute inset-0 rounded-[50%] border border-white/10" })] })] }), _jsx(motion.div, { initial: false, animate: {
+                                    opacity: hasMounted ? 1 : 0,
+                                    y: hasMounted ? 0 : 20,
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                                }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, children: _jsxs("h2", { className: "font-sf-rounded mb-1 text-center text-2xl font-semibold", children: ["Staked ", formatTokenAmount(BigInt(userStakeAmount), 18), " B3"] }) })] }), _jsxs(motion.div, { initial: false, animate: {
+                            opacity: hasMounted ? 1 : 0,
+                            y: hasMounted ? 0 : 20,
+                            filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [_jsx("div", { className: "mb-6", children: _jsx("a", { href: `https://basescan.org/tx/${stakingTxHash}`, target: "_blank", rel: "noopener noreferrer", className: "text-as-primary/70 hover:text-as-primary block break-all text-center font-mono text-sm underline transition-colors", children: "View transaction" }) }), _jsx(Button, { onClick: () => {
+                                    setB3ModalOpen(false);
+                                    onSuccess?.(formatTokenAmount(BigInt(userStakeAmount), 18) ?? "");
+                                }, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary h-14 w-full rounded-xl text-lg font-medium", children: "Done" })] })] }) }));
+    }
+    return (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: B3_TOKEN, destinationChainId: base.id, customExactInConfig: customExactInConfig, header: header, onSuccess: onSuccess }));
+}

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

@@ -0,0 +1,11 @@
+import { components } from "../../../anyspend/types/api";
+export declare function AnySpendStakeUpsideExactIn({ loadOrder, mode, recipientAddress, sourceTokenAddress, sourceTokenChainId, stakingContractAddress, token, onSuccess, }: {
+    loadOrder?: string;
+    mode?: "modal" | "page";
+    recipientAddress: string;
+    sourceTokenAddress?: string;
+    sourceTokenChainId?: number;
+    stakingContractAddress: string;
+    token: components["schemas"]["Token"];
+    onSuccess?: (amount: string) => void;
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,30 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { normalizeAddress } from "../../../anyspend/utils/index.js";
+import { base } from "viem/chains";
+import { AnySpendCustomExactIn } from "./AnySpendCustomExactIn.js";
+const STAKE_FOR_FUNCTION_ABI = JSON.stringify([
+    {
+        name: "stakeFor",
+        type: "function",
+        stateMutability: "nonpayable",
+        inputs: [
+            { name: "user", type: "address" },
+            { name: "amount", type: "uint256" },
+        ],
+        outputs: [],
+    },
+]);
+export function AnySpendStakeUpsideExactIn({ loadOrder, mode = "modal", recipientAddress, sourceTokenAddress, sourceTokenChainId, stakingContractAddress, token, onSuccess, }) {
+    if (!recipientAddress)
+        return null;
+    const header = () => (_jsx(_Fragment, { children: _jsx("div", { className: "from-b3-react-background to-as-on-surface-1 w-full rounded-t-lg bg-gradient-to-t", children: _jsx("div", { className: "mb-1 flex w-full flex-col items-center gap-2", children: _jsxs("span", { className: "font-sf-rounded text-2xl font-semibold", children: ["Swap & Stake ", token.symbol, " (Exact In)"] }) }) }) }));
+    const customExactInConfig = {
+        functionAbi: STAKE_FOR_FUNCTION_ABI,
+        functionName: "stakeFor",
+        functionArgs: [normalizeAddress(recipientAddress), "{{amount_out}}"],
+        to: stakingContractAddress,
+        spenderAddress: stakingContractAddress,
+        action: `stake ${token.symbol}`,
+    };
+    return (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: token, destinationChainId: base.id, customExactInConfig: customExactInConfig, header: header, onSuccess: onSuccess }));
+}

package/dist/esm/anyspend/react/components/common/OrderDetails.js

@@ -48,6 +48,12 @@ function getOrderSuccessText({ order, tournament, formattedActualDstAmount, form
         case "custom":
             actionText = order.metadata.action || `executed contract`;
             return `Successfully ${actionText}`;
+        case "x402_swap":
+            actionText = `sent ${formattedActualDstAmount || "--"} ${dstToken.symbol}`;
+            return `Successfully ${actionText} to ${recipient}`;
+        case "custom_exact_in":
+            actionText = `executed contract`;
+            return `Successfully ${actionText}`;
         default:
             throw new Error("Invalid order type");
     }
@@ -360,7 +366,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                             ? depositTxs.map(dTxs => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
-                                            : null, relayTxs.map(relayTx => (_jsx(TransactionDetails, { title: "Processed Transaction", chainId: relayTx.chain, isProcessing: false, tx: relayTx, delay: 0.5 }))), order.status === "executing" && (_jsx(TransactionDetails, { title: order.type === "swap"
+                                            : null, relayTxs.map(relayTx => (_jsx(TransactionDetails, { title: "Processed Transaction", chainId: relayTx.chain, isProcessing: false, tx: relayTx, delay: 0.5 }))), order.status === "executing" && (_jsx(TransactionDetails, { title: order.type === "swap" || order.type === "x402_swap"
                                                 ? "Processing Swap"
                                                 : order.type === "mint_nft"
                                                     ? "Minting NFT"
@@ -370,7 +376,9 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                                             ? "Funding Tournament"
                                                             : order.type === "hype_duel"
                                                                 ? "Depositing Hype Duel"
-                                                                : "Processing Bridge", chainId: order.dstChain, isProcessing: true, tx: null, delay: 1 }))] }) })] }) }), order.type === "join_tournament" && order.status === "executed" && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && (_jsx("button", { className: "order-close-button order-details-close-btn bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
+                                                                : order.type === "custom" || order.type === "custom_exact_in"
+                                                                    ? "Executing Contract"
+                                                                    : "Processing Bridge", chainId: order.dstChain, isProcessing: true, tx: null, delay: 1 }))] }) })] }) }), order.type === "join_tournament" && order.status === "executed" && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && (_jsx("button", { className: "order-close-button order-details-close-btn bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     // This boolean indicates that user finish payment, and waiting for the deposit to be confirmed. We get this from query params (waitingForDeposit=true)
     const waitingForDeposit = new URLSearchParams(window.location.search).get("waitingForDeposit") === "true";

package/dist/esm/anyspend/react/components/common/OrderDetailsCollapsible.js

@@ -17,8 +17,7 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({ o
     const expectedDstAmount = order.type === "mint_nft" ||
         order.type === "join_tournament" ||
         order.type === "fund_tournament" ||
-        order.type === "custom" ||
-        order.type === "hype_duel"
+        order.type === "custom"
         ? "0"
         : order.payload.expectedDstAmount.toString();
     const finalFormattedExpectedDstAmount = formattedExpectedDstAmount || formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
@@ -30,7 +29,7 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({ o
                                         ? "Join tournament"
                                         : order.type === "fund_tournament"
                                             ? "Fund tournament"
-                                            : order.type === "custom"
+                                            : order.type === "custom" || order.type === "custom_exact_in"
                                                 ? order.metadata.action
                                                     ? capitalizeFirstLetter(order.metadata.action)
                                                     : "Contract execution"

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

@@ -2,11 +2,15 @@ export { AnySpend } from "./AnySpend";
 export { AnySpendBondKit } from "./AnySpendBondKit";
 export { AnySpendBuySpin } from "./AnySpendBuySpin";
 export { AnySpendCustom } from "./AnySpendCustom";
+export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
 export * from "./AnySpendFingerprintWrapper";
 export { AnySpendNFT } from "./AnySpendNFT";
+export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3";
+export { AnySpendStakeB3ExactIn } from "./AnySpendStakeB3ExactIn";
+export { AnySpendStakeUpside } from "./AnySpendStakeUpside";
+export { AnySpendStakeUpsideExactIn } from "./AnySpendStakeUpsideExactIn";
 export { AnySpendTournament } from "./AnySpendTournament";
-export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
 export { AnySpendNFTButton } from "./common/AnySpendNFTButton";
 export { ChainTokenIcon } from "./common/ChainTokenIcon";
 export { CryptoPaySection } from "./common/CryptoPaySection";

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

@@ -3,11 +3,15 @@ export { AnySpend } from "./AnySpend.js";
 export { AnySpendBondKit } from "./AnySpendBondKit.js";
 export { AnySpendBuySpin } from "./AnySpendBuySpin.js";
 export { AnySpendCustom } from "./AnySpendCustom.js";
+export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn.js";
 export * from "./AnySpendFingerprintWrapper.js";
 export { AnySpendNFT } from "./AnySpendNFT.js";
+export { AnyspendSignatureMint } from "./AnyspendSignatureMint.js";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3.js";
+export { AnySpendStakeB3ExactIn } from "./AnySpendStakeB3ExactIn.js";
+export { AnySpendStakeUpside } from "./AnySpendStakeUpside.js";
+export { AnySpendStakeUpsideExactIn } from "./AnySpendStakeUpsideExactIn.js";
 export { AnySpendTournament } from "./AnySpendTournament.js";
-export { AnyspendSignatureMint } from "./AnyspendSignatureMint.js";
 export { AnySpendNFTButton } from "./common/AnySpendNFTButton.js";
 // Common Components
 export { ChainTokenIcon } from "./common/ChainTokenIcon.js";

package/dist/esm/anyspend/react/hooks/useAnyspendFlow.d.ts

@@ -17,13 +17,16 @@ interface UseAnyspendFlowProps {
     loadOrder?: string;
     isDepositMode?: boolean;
     onOrderSuccess?: (orderId: string) => void;
-    onTransactionSuccess?: (amount?: string) => void;
+    onTransactionSuccess?: (amount: string) => void;
     sourceTokenAddress?: string;
     sourceTokenChainId?: number;
+    destinationTokenAddress?: string;
+    destinationTokenChainId?: number;
     slippage?: number;
     disableUrlParamManagement?: boolean;
+    orderType?: "hype_duel" | "custom_exact_in";
 }
-export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, isDepositMode, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage, disableUrlParamManagement, }: UseAnyspendFlowProps): {
+export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, isDepositMode, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, destinationTokenAddress, destinationTokenChainId, slippage, disableUrlParamManagement, orderType, }: UseAnyspendFlowProps): {
     activePanel: PanelView;
     setActivePanel: import("react").Dispatch<import("react").SetStateAction<PanelView>>;
     orderId: string | undefined;
@@ -44,7 +47,6 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
     selectedSrcChainId: number;
     setSelectedSrcChainId: import("react").Dispatch<import("react").SetStateAction<number>>;
     selectedDstChainId: number;
-    setSelectedDstChainId: import("react").Dispatch<import("react").SetStateAction<number>>;
     selectedSrcToken: {
         chainId: number;
         address: string;
@@ -65,6 +67,26 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
             logoURI?: string;
         };
     }>>;
+    selectedDstToken: {
+        chainId: number;
+        address: string;
+        symbol: string;
+        name: string;
+        decimals: number;
+        metadata: {
+            logoURI?: string;
+        };
+    };
+    setSelectedDstToken: import("react").Dispatch<import("react").SetStateAction<{
+        chainId: number;
+        address: string;
+        symbol: string;
+        name: string;
+        decimals: number;
+        metadata: {
+            logoURI?: string;
+        };
+    }>>;
     srcAmount: string;
     setSrcAmount: import("react").Dispatch<import("react").SetStateAction<string>>;
     dstAmount: string;

package/dist/esm/anyspend/react/hooks/useAnyspendFlow.js

@@ -23,21 +23,25 @@ export var PanelView;
     PanelView[PanelView["POINTS_DETAIL"] = 6] = "POINTS_DETAIL";
     PanelView[PanelView["FEE_DETAIL"] = 7] = "FEE_DETAIL";
 })(PanelView || (PanelView = {}));
-export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage = 0, disableUrlParamManagement = false, }) {
+// This hook serves for order hype_duel and custom_exact_in
+export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, destinationTokenAddress, destinationTokenChainId, slippage = 0, disableUrlParamManagement = false, orderType = "hype_duel", }) {
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     // Panel and order state
     const [activePanel, setActivePanel] = useState(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
     const [orderId, setOrderId] = useState(loadOrder);
     const { orderAndTransactions: oat } = useAnyspendOrderAndTransactions(orderId);
-    // Token selection state - use provided sourceTokenChainId if available
+    // Token selection state - use provided sourceTokenChainId and destinationTokenChainId if available
     const [selectedSrcChainId, setSelectedSrcChainId] = useState(sourceTokenChainId || (paymentType === "fiat" ? base.id : mainnet.id));
-    const [selectedDstChainId, setSelectedDstChainId] = useState(base.id); // Default to Base for cross-chain swaps
     const defaultSrcToken = paymentType === "fiat" ? USDC_BASE : getDefaultToken(selectedSrcChainId);
+    const defaultDstToken = B3_TOKEN; // Default destination token
     const [selectedSrcToken, setSelectedSrcToken] = useState(defaultSrcToken);
+    const [selectedDstToken, setSelectedDstToken] = useState(defaultDstToken);
     const [srcAmount, setSrcAmount] = useState(paymentType === "fiat" ? "5" : "0.1");
     const [dstAmount, setDstAmount] = useState("");
     const [isSrcInputDirty, setIsSrcInputDirty] = useState(true);
+    // Derive destination chain ID from token or prop (cannot change)
+    const selectedDstChainId = destinationTokenChainId || selectedDstToken.chainId;
     // Payment method state
     const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState(CryptoPaymentMethodType.NONE);
     const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState(FiatPaymentMethod.NONE);
@@ -97,6 +101,23 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
         };
         fetchSourceToken();
     }, [sourceTokenAddress, sourceTokenChainId]);
+    // Fetch specific token when destinationTokenAddress and destinationTokenChainId are provided
+    useEffect(() => {
+        const fetchDestinationToken = async () => {
+            if (destinationTokenAddress && destinationTokenChainId) {
+                try {
+                    const token = await anyspendService.getToken(destinationTokenChainId, destinationTokenAddress);
+                    setSelectedDstToken(token);
+                }
+                catch (error) {
+                    console.error("Failed to fetch destination token:", error);
+                    toast.error(`Failed to load token ${destinationTokenAddress} on chain ${destinationTokenChainId}`);
+                    // Keep the default token on error
+                }
+            }
+        };
+        fetchDestinationToken();
+    }, [destinationTokenAddress, destinationTokenChainId]);
     // Helper function for onramp vendor mapping
     const getOnrampVendor = (paymentMethod) => {
         switch (paymentMethod) {
@@ -116,8 +137,8 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
         srcChain: paymentType === "fiat" ? base.id : selectedSrcChainId,
         dstChain: isDepositMode ? base.id : selectedDstChainId, // For deposits, always Base; for swaps, use selected destination
         srcTokenAddress: paymentType === "fiat" ? USDC_BASE.address : selectedSrcToken.address,
-        dstTokenAddress: isDepositMode ? B3_TOKEN.address : selectedSrcToken.address, // For deposits, always B3
-        type: "hype_duel",
+        dstTokenAddress: selectedDstToken.address,
+        type: orderType,
         amount: activeInputAmountInWei,
         recipientAddress: selectedRecipientAddress,
         onrampVendor: paymentType === "fiat" ? getOnrampVendor(selectedFiatPaymentMethod) : undefined,
@@ -195,7 +216,7 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
             const formattedActualDstAmount = amount
                 ? formatTokenAmount(BigInt(amount), oat.data.order.metadata.dstToken.decimals)
                 : undefined;
-            onTransactionSuccess?.(formattedActualDstAmount);
+            onTransactionSuccess?.(formattedActualDstAmount ?? "");
         }
     }, [
         oat?.data?.order.status,
@@ -213,10 +234,11 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
         // Token state
         selectedSrcChainId,
         setSelectedSrcChainId,
-        selectedDstChainId,
-        setSelectedDstChainId,
+        selectedDstChainId, // Derived, not stateful
         selectedSrcToken,
         setSelectedSrcToken,
+        selectedDstToken,
+        setSelectedDstToken,
         srcAmount,
         setSrcAmount,
         dstAmount,