@b3dotfun/sdk 0.0.8 → 0.0.9-alpha.1

package/dist/cjs/shared/utils/payment.utils.d.ts

@@ -1,5 +1,5 @@
-import { OnrampVendor } from "../../anyspend";
-export declare function getVendorDisplayName(vendor?: OnrampVendor): string;
-export declare function getPaymentMethodDescription(vendor?: OnrampVendor): string;
+import { components } from "../../anyspend/types/api";
+export declare function getVendorDisplayName(vendor?: components["schemas"]["OnrampMetadata"]["vendor"]): string;
+export declare function getPaymentMethodDescription(vendor?: components["schemas"]["OnrampMetadata"]["vendor"]): string;
 export declare function formatStripeAmount(amount: number): string;
 export declare function generateReturnUrl(orderId: string): string;

package/dist/cjs/shared/utils/payment.utils.js

@@ -4,14 +4,13 @@ exports.getVendorDisplayName = getVendorDisplayName;
 exports.getPaymentMethodDescription = getPaymentMethodDescription;
 exports.formatStripeAmount = formatStripeAmount;
 exports.generateReturnUrl = generateReturnUrl;
-const anyspend_1 = require("../../anyspend");
 const constants_1 = require("../../anyspend/constants");
 function getVendorDisplayName(vendor) {
     switch (vendor) {
-        case anyspend_1.OnrampVendor.Coinbase:
+        case "coinbase":
             return constants_1.VENDOR_DISPLAY_NAMES.coinbase;
-        case anyspend_1.OnrampVendor.Stripe:
-        case anyspend_1.OnrampVendor.StripeWeb2:
+        case "stripe":
+        case "stripe-web2":
             return constants_1.VENDOR_DISPLAY_NAMES.stripe;
         default:
             return constants_1.VENDOR_DISPLAY_NAMES.unknown;
@@ -19,10 +18,10 @@ function getVendorDisplayName(vendor) {
 }
 function getPaymentMethodDescription(vendor) {
     switch (vendor) {
-        case anyspend_1.OnrampVendor.Stripe:
-        case anyspend_1.OnrampVendor.StripeWeb2:
+        case "stripe":
+        case "stripe-web2":
             return "card, Apple Pay, Google Pay, and more";
-        case anyspend_1.OnrampVendor.Coinbase:
+        case "coinbase":
             return "debit card, or using your Coinbase account";
         default:
             return "supported payment method";

package/dist/esm/anyspend/abis/bondKit.d.ts

@@ -0,0 +1,35 @@
+export declare const ABI_bondKit: readonly [{
+    readonly inputs: readonly [{
+        readonly internalType: "address";
+        readonly name: "_recipient";
+        readonly type: "address";
+    }, {
+        readonly internalType: "uint256";
+        readonly name: "_minTokensOut";
+        readonly type: "uint256";
+    }];
+    readonly name: "buyFor";
+    readonly outputs: readonly [];
+    readonly stateMutability: "payable";
+    readonly type: "function";
+}, {
+    readonly inputs: readonly [];
+    readonly name: "name";
+    readonly outputs: readonly [{
+        readonly internalType: "string";
+        readonly name: "";
+        readonly type: "string";
+    }];
+    readonly stateMutability: "view";
+    readonly type: "function";
+}, {
+    readonly inputs: readonly [];
+    readonly name: "symbol";
+    readonly outputs: readonly [{
+        readonly internalType: "string";
+        readonly name: "";
+        readonly type: "string";
+    }];
+    readonly stateMutability: "view";
+    readonly type: "function";
+}];

package/dist/esm/anyspend/abis/bondKit.js

@@ -0,0 +1,26 @@
+export const ABI_bondKit = [
+    {
+        inputs: [
+            { internalType: "address", name: "_recipient", type: "address" },
+            { internalType: "uint256", name: "_minTokensOut", type: "uint256" },
+        ],
+        name: "buyFor",
+        outputs: [],
+        stateMutability: "payable",
+        type: "function",
+    },
+    {
+        inputs: [],
+        name: "name",
+        outputs: [{ internalType: "string", name: "", type: "string" }],
+        stateMutability: "view",
+        type: "function",
+    },
+    {
+        inputs: [],
+        name: "symbol",
+        outputs: [{ internalType: "string", name: "", type: "string" }],
+        stateMutability: "view",
+        type: "function",
+    },
+];

package/dist/esm/anyspend/constants/index.d.ts

@@ -1,4 +1,4 @@
-import { NftContract, Token } from "../../anyspend/types";
+import { components } from "../types/api";
 export declare const ANYSPEND_MAINNET_BASE_URL: string;
 export declare const ANYSPEND_TESTNET_BASE_URL: string;
 export declare const RELAY_ETH_ADDRESS = "0x0000000000000000000000000000000000000000";
@@ -6,10 +6,21 @@ export declare const RELAY_SOL_ADDRESS = "11111111111111111111111111111111";
 export declare const RELAY_SOLANA_MAINNET_CHAIN_ID = 792703809;
 export declare const SOLANA_ASSOCIATED_TOKEN_ACCOUNT_PROGRAM_ID = "ATokenGPvbdGVxr1b2hvZbsiqW5xWH25efTNsLJA8knL";
 export declare const SOLANA_TOKEN_2022_PROGRAM_ID = "TokenzQdBNbLqP5VEhdkAS6EPFLC1PHnBqCXEpPxuEb";
-export declare const B3_TOKEN: Token;
-export declare const USDC_BASE: Token;
-export declare const NFT_CONTRACTS: NftContract[];
-export declare const DEFAULT_NFT_CONTRACT: NftContract;
+export declare const B3_TOKEN: components["schemas"]["Token"];
+export declare const USDC_BASE: components["schemas"]["Token"];
+export declare const NFT_CONTRACTS: components["schemas"]["NftContract"][];
+export declare const DEFAULT_NFT_CONTRACT: {
+    chainId: number;
+    contractAddress: string;
+    price: string;
+    priceFormatted: string;
+    currency: components["schemas"]["Token"];
+    imageUrl: string;
+    name: string;
+    description: string;
+    tokenId: number | null;
+    type: "erc721" | "erc1155";
+};
 export declare const STRIPE_CONFIG: {
     readonly publishableKey: "pk_live_51QkrBwJnoDg53PsPq7QYOxSLfnXvtCVeD9UuyZ6c136i42XtYC2Z2bl1W5xbDg6AaoGyq63ErCc0yv3C2KBX29CG002AE862CP";
 };

package/dist/esm/anyspend/constants/index.js

@@ -1,4 +1,3 @@
-import { NftType } from "../../anyspend/types/index.js";
 import { base } from "viem/chains";
 export const ANYSPEND_MAINNET_BASE_URL = process.env.NEXT_PUBLIC_ANYSPEND_BASE_URL || "https://mainnet.anyspend.com";
 export const ANYSPEND_TESTNET_BASE_URL = process.env.NEXT_PUBLIC_ANYSPEND_BASE_URL || "https://testnet.anyspend.com";
@@ -37,8 +36,8 @@ export const NFT_CONTRACTS = [
         imageUrl: "https://storage.googleapis.com/nftimagebucket/base/tokens/0x80f0e6644723abb03aa8867d21e32bd854b2a2d9/preview/TVRjME1EUTRORFl4T0E9PV8zNjcy.jpg",
         name: "Downhill Ski",
         description: "Downhill Ski",
-        tokenId: null,
-        type: NftType.ERC721,
+        tokenId: 0,
+        type: "erc721",
     },
     {
         chainId: base.id,
@@ -50,7 +49,7 @@ export const NFT_CONTRACTS = [
         name: "Eclipse Venom",
         description: "The Eclipse Venom's crystalline blade channels imprisoned astral toxins through swirling currents of violet and teal light, synchronizing with its wielder's heartbeat for strikes that bypass conventional armor. Wounds from this otherworldly weapon resist healing as victims describe being consumed from within by liquid darkness, their final moments filled with visions of infinite cosmic depths.",
         tokenId: null,
-        type: NftType.ERC721,
+        type: "erc721",
     },
 ];
 export const DEFAULT_NFT_CONTRACT = NFT_CONTRACTS[1];

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

@@ -1,8 +1,4 @@
-export * from "./types";
-export * from "./types/metadata";
-export * from "./types/relay";
-export * from "./types/signature-mint";
-export * from "./types/token";
+export * from "./types/api";
 export * from "./utils/address";
 export * from "./utils/chain";
 export * from "./utils/format";
@@ -11,5 +7,5 @@ export * from "./utils/number";
 export * from "./utils/string";
 export * from "./utils/token";
 export * from "./constants";
-export * from "./abis/abi-usdc-base";
-export * from "./abis/erc20-staking";
+export * from "./abis/abiUsdcBase";
+export * from "./abis/erc20Staking";

package/dist/esm/anyspend/index.js

@@ -1,9 +1,5 @@
 // Types
-export * from "./types/index.js";
-export * from "./types/metadata.js";
-export * from "./types/relay.js";
-export * from "./types/signature-mint.js";
-export * from "./types/token.js";
+export * from "./types/api.js";
 // Utils
 export * from "./utils/address.js";
 export * from "./utils/chain.js";
@@ -15,5 +11,5 @@ export * from "./utils/token.js";
 // Constants
 export * from "./constants/index.js";
 // Abis
-export * from "./abis/abi-usdc-base.js";
-export * from "./abis/erc20-staking.js";
+export * from "./abis/abiUsdcBase.js";
+export * from "./abis/erc20Staking.js";

package/dist/esm/anyspend/index.native.d.ts

@@ -1,6 +1,6 @@
 export * from "./react/hooks";
 export * from "./react/providers/AnyspendProvider";
-export * from "./types";
+export * from "./types/api";
 export * from "./utils/address";
 export * from "./utils/chain";
 export * from "./utils/format";
@@ -9,5 +9,5 @@ export * from "./utils/number";
 export * from "./utils/string";
 export * from "./utils/token";
 export * from "./constants";
-export * from "./abis/abi-usdc-base";
-export * from "./abis/erc20-staking";
+export * from "./abis/abiUsdcBase";
+export * from "./abis/erc20Staking";

package/dist/esm/anyspend/index.native.js

@@ -3,7 +3,7 @@ export * from "./react/hooks/index.js";
 // Providers
 export * from "./react/providers/AnyspendProvider.js";
 // Types
-export * from "./types/index.js";
+export * from "./types/api.js";
 // Utils
 export * from "./utils/address.js";
 export * from "./utils/chain.js";
@@ -15,5 +15,5 @@ export * from "./utils/token.js";
 // Constants
 export * from "./constants/index.js";
 // Abis
-export * from "./abis/abi-usdc-base.js";
-export * from "./abis/erc20-staking.js";
+export * from "./abis/abiUsdcBase.js";
+export * from "./abis/erc20Staking.js";

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { getDefaultToken, OrderType, TradeType, USDC_BASE } from "../../../anyspend/index.js";
+import { getDefaultToken, USDC_BASE } from "../../../anyspend/index.js";
 import { useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, } from "../../../anyspend/react/index.js";
 import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet, useOnchainName, useRouter, useSearchParamsSSR, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/cn.js";
@@ -277,17 +277,17 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
     }, [recipientAddressFromProps, globalAddress]);
     // Get anyspend price
     const activeInputAmountInWei = isSrcInputDirty
-        ? parseUnits(srcAmount.replaceAll(",", ""), selectedSrcToken.decimals).toString()
-        : parseUnits(dstAmount.replaceAll(",", ""), selectedDstToken.decimals).toString();
-    const srcAmountOnrampInWei = parseUnits(srcAmountOnRamp.replaceAll(",", ""), USDC_BASE.decimals).toString();
+        ? parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals).toString()
+        : parseUnits(dstAmount.replace(/,/g, ""), selectedDstToken.decimals).toString();
+    const srcAmountOnrampInWei = parseUnits(srcAmountOnRamp.replace(/,/g, ""), USDC_BASE.decimals).toString();
     const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = useAnyspendQuote(isMainnet, activeTab === "crypto"
         ? {
             srcChain: selectedSrcChainId,
             dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
             srcTokenAddress: selectedSrcToken.address,
             dstTokenAddress: isBuyMode ? destinationTokenAddress : selectedDstToken.address,
-            type: OrderType.Swap,
-            tradeType: isSrcInputDirty ? TradeType.EXACT_INPUT : TradeType.EXPECTED_OUTPUT,
+            type: "swap",
+            tradeType: isSrcInputDirty ? "EXACT_INPUT" : "EXPECTED_OUTPUT",
             amount: activeInputAmountInWei,
         }
         : {
@@ -295,8 +295,8 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
             dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
             srcTokenAddress: USDC_BASE.address,
             dstTokenAddress: isBuyMode ? destinationTokenAddress : selectedDstToken.address,
-            type: OrderType.Swap,
-            tradeType: TradeType.EXACT_INPUT,
+            type: "swap",
+            tradeType: "EXACT_INPUT",
             amount: srcAmountOnrampInWei,
         });
     // Replace the old ENS lookup with our new hooks
@@ -362,11 +362,11 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
     // const handleCreateOrder = async (recipientAddress: string) => {
     //   try {
     //     invariant(anyspendPrice, "Relay price is not found");
-    //     const srcAmountBigInt = parseUnits(srcAmount.replaceAll(",", ""), selectedSrcToken.decimals);
+    //     const srcAmountBigInt = parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
     //     createOrder({
     //       isMainnet,
     //       recipientAddress,
-    //       orderType: OrderType.Swap,
+    //       orderType: "swap",
     //       srcChain: selectedSrcChainId,
     //       dstChain: selectedDstChainId,
     //       srcToken: selectedSrcToken,
@@ -518,11 +518,11 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
                 setActivePanel(PanelView.FIAT_PAYMENT);
                 return;
             }
-            const srcAmountBigInt = parseUnits(srcAmount.replaceAll(",", ""), selectedSrcToken.decimals);
+            const srcAmountBigInt = parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
             createOrder({
                 isMainnet,
                 recipientAddress,
-                orderType: OrderType.Swap,
+                orderType: "swap",
                 srcChain: selectedSrcChainId,
                 dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
                 srcToken: selectedSrcToken,
@@ -654,7 +654,7 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
                                             // Using inline style to ensure color displays
                                             return (_jsxs("span", { className: "ml-2", style: { color: percentageNum >= 10 ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
                                         })()] })] })] }), getAnyspendQuoteError && (_jsxs("div", { className: "bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl p-4", children: [_jsx(CircleAlert, { className: "bg-as-red h-4 min-h-4 w-4 min-w-4 rounded-full p-0 text-sm font-medium text-white" }), _jsx("div", { className: "text-as-red text-sm", children: getAnyspendQuoteError.message })] })), _jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "flex w-full max-w-[460px] flex-col gap-2", children: [_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("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: [btnInfo.text, !btnInfo.disable && !btnInfo.error && (_jsx(ChevronRightCircle, { className: "absolute right-0 top-1/2 h-6 w-6 -translate-y-1/2 opacity-70" }))] }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : (_jsx("div", { className: "h-2 w-full" }))] })] }));
-    const onrampPaymentView = (_jsx(PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: OrderType.Swap, anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
+    const onrampPaymentView = (_jsx(PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             setActivePanel(PanelView.ORDER_DETAILS);
             // Add orderId to URL for persistence

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

@@ -0,0 +1,2 @@
+import { AnySpendBondKitProps } from "../../../global-account/react/stores/useModalStore";
+export declare function AnySpendBondKit({ mode, recipientAddress, contractAddress, minTokensOut, imageUrl, ethAmount: initialEthAmount, onSuccess, }: AnySpendBondKitProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,206 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { BondkitToken } from "@b3dotfun/bondkit";
+import { Button, GlareCardRounded, Input, StyleRoot, useHasMounted, useTokenData, } from "../../../global-account/react/index.js";
+import { baseMainnet } from "../../../shared/constants/chains/supported.js";
+import { motion } from "framer-motion";
+import { useEffect, useMemo, useState } from "react";
+import { createPublicClient, encodeFunctionData, formatEther, http, parseEther } from "viem";
+import { ABI_bondKit } from "../../abis/bondKit.js";
+import { AnySpendCustom } from "./AnySpendCustom.js";
+// Debounce utility function
+function debounce(func, wait) {
+    let timeout;
+    return (...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func(...args), wait);
+    };
+}
+// Format number with commas
+function formatNumberWithCommas(x) {
+    const parts = x.split(".");
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return parts.join(".");
+}
+export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, minTokensOut = "0", imageUrl, ethAmount: initialEthAmount, onSuccess, }) {
+    const hasMounted = useHasMounted();
+    const [showAmountPrompt, setShowAmountPrompt] = useState(!initialEthAmount);
+    const [ethAmount, setEthAmount] = useState(initialEthAmount || "");
+    const [isAmountValid, setIsAmountValid] = useState(!!initialEthAmount);
+    const [validationError, setValidationError] = useState("");
+    const [tokenName, setTokenName] = useState("");
+    const [tokenSymbol, setTokenSymbol] = useState("");
+    const [quote, setQuote] = useState(null);
+    const [isLoadingQuote, setIsLoadingQuote] = useState(false);
+    // Create BondKit client
+    const bondkitTokenClient = useMemo(() => {
+        if (!contractAddress)
+            return null;
+        try {
+            const client = new BondkitToken(contractAddress);
+            client.connect();
+            return client;
+        }
+        catch (error) {
+            console.error("Error creating bondkit client", error);
+            return null;
+        }
+    }, [contractAddress]);
+    // Create a public client for reading contract data
+    const basePublicClient = createPublicClient({
+        chain: baseMainnet,
+        transport: http(),
+    });
+    // Fetch token name from contract
+    useEffect(() => {
+        async function fetchTokenName() {
+            try {
+                const [name, symbol] = await Promise.all([
+                    basePublicClient.readContract({
+                        address: contractAddress,
+                        abi: ABI_bondKit,
+                        functionName: "name",
+                    }),
+                    basePublicClient.readContract({
+                        address: contractAddress,
+                        abi: ABI_bondKit,
+                        functionName: "symbol",
+                    }),
+                ]);
+                setTokenName(name);
+                setTokenSymbol(symbol);
+            }
+            catch (error) {
+                console.error("Error fetching token name:", error);
+                setTokenName("BondKit Token");
+                setTokenSymbol("BOND");
+            }
+        }
+        if (contractAddress) {
+            fetchTokenName();
+        }
+    }, [contractAddress, basePublicClient]);
+    // Get native token data for the chain
+    const { data: tokenData, isError: isTokenError, isLoading, } = useTokenData(baseMainnet.id, "0x0000000000000000000000000000000000000000");
+    // Convert token data to AnySpend Token type
+    const dstToken = useMemo(() => {
+        if (!tokenData)
+            return null;
+        return {
+            address: tokenData.address,
+            chainId: baseMainnet.id,
+            name: tokenData.name,
+            symbol: tokenData.symbol,
+            decimals: tokenData.decimals,
+            metadata: {
+                logoURI: tokenData.logoURI,
+            },
+        };
+    }, [tokenData]);
+    // Debounced quote fetching
+    const debouncedGetQuote = useMemo(() => debounce(async (val) => {
+        if (!val || Number(val) <= 0 || !bondkitTokenClient) {
+            setQuote(null);
+            return;
+        }
+        try {
+            setIsLoadingQuote(true);
+            const parsedAmount = parseEther(val);
+            const buyQuote = await bondkitTokenClient.getAmountOfTokensToBuy(parsedAmount);
+            setQuote(buyQuote ? formatEther(buyQuote) : null);
+        }
+        catch (error) {
+            console.error("Error getting buy quote:", error);
+            setQuote(null);
+        }
+        finally {
+            setIsLoadingQuote(false);
+        }
+    }, 500), [bondkitTokenClient]);
+    // Fetch initial quote if ethAmount is provided
+    useEffect(() => {
+        if (initialEthAmount && bondkitTokenClient) {
+            debouncedGetQuote(initialEthAmount);
+        }
+    }, [initialEthAmount, bondkitTokenClient, debouncedGetQuote]);
+    const validateAndSetAmount = (value) => {
+        // Allow empty input
+        if (value === "") {
+            setEthAmount("");
+            setIsAmountValid(false);
+            setValidationError("");
+            setQuote(null);
+            return;
+        }
+        // Only allow valid number format (no leading zeros unless decimal)
+        if (!/^(0|[1-9]\d*)?\.?\d*$/.test(value)) {
+            setIsAmountValid(false);
+            setValidationError("Please enter a valid number");
+            return;
+        }
+        // Prevent multiple decimal points
+        if ((value.match(/\./g) || []).length > 1) {
+            return;
+        }
+        // Prevent more than 18 decimal places (ETH precision)
+        const parts = value.split(".");
+        if (parts[1] && parts[1].length > 18) {
+            return;
+        }
+        // Clean the input - remove leading zeros if not decimal
+        const cleanedValue = value.startsWith("0") && !value.startsWith("0.") ? value.replace(/^0+/, "0") : value;
+        setEthAmount(cleanedValue);
+        try {
+            const parsedAmount = parseEther(cleanedValue);
+            if (parsedAmount <= BigInt(0)) {
+                setIsAmountValid(false);
+                setValidationError("Amount must be greater than 0");
+                return;
+            }
+            setIsAmountValid(true);
+            setValidationError("");
+            debouncedGetQuote(cleanedValue);
+        }
+        catch (error) {
+            console.error("Error validating amount:", error);
+            setIsAmountValid(false);
+            setValidationError("Please enter a valid amount");
+        }
+    };
+    const header = () => (_jsx("div", { className: "w-full px-6 py-4", children: _jsxs("div", { className: "flex w-full flex-col items-center space-y-6", children: [_jsxs("h2", { className: "text-[28px] font-bold", children: ["Buy ", tokenName, " (", tokenSymbol, ")"] }), _jsxs("div", { className: "flex w-full flex-col items-center space-y-2", children: [_jsxs("span", { className: "text-[28px] font-bold", children: [ethAmount, " ETH"] }), quote && (_jsxs("span", { className: "text-lg", children: ["\u2248 ", formatNumberWithCommas(parseFloat(quote).toFixed(4)), " ", tokenSymbol] }))] })] }) }));
+    // Show loading state while fetching token data
+    if (isLoading) {
+        return (_jsx(StyleRoot, { children: _jsx("div", { className: "b3-root b3-modal bg-b3-react-background flex w-full flex-col items-center p-8", children: _jsx("p", { className: "text-as-primary/70 text-center text-sm", children: "Loading payment information..." }) }) }));
+    }
+    // If we don't have token data after loading, show error state
+    if (!dstToken || isTokenError) {
+        return (_jsx(StyleRoot, { children: _jsx("div", { className: "b3-root b3-modal bg-b3-react-background flex w-full flex-col items-center p-8", children: _jsxs("p", { className: "text-as-red text-center text-sm", children: ["Failed to fetch native token information for chain ", baseMainnet.id, ". Please try again."] }) }) }));
+    }
+    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 pb-2 pt-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: "mb-4 flex justify-center", children: imageUrl && (_jsxs("div", { className: "relative size-16", children: [_jsx("div", { className: "absolute inset-0 scale-95 rounded-[50%] bg-gradient-to-br from-blue-500/20 to-purple-600/20 blur-xl" }), _jsxs(GlareCardRounded, { className: "overflow-hidden rounded-full border-none bg-gradient-to-br from-blue-500/10 to-purple-600/10 backdrop-blur-sm", children: [_jsx("img", { alt: "token preview", className: "size-full rounded-lg object-cover", src: imageUrl }), _jsx("div", { className: "absolute inset-0 rounded-[50%] border border-white/20" })] })] })) }), _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" }, className: "text-center", children: _jsxs("h2", { className: "font-sf-rounded text-as-primary mb-4 text-2xl font-bold", children: ["Buy ", tokenName] }) })] }), _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.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("p", { className: "text-as-primary/70 text-sm font-medium", children: "ETH Amount" }) }), _jsx("div", { className: "relative", children: _jsx(Input, { type: "text", inputMode: "decimal", placeholder: "0.1", value: ethAmount, onChange: e => validateAndSetAmount(e.target.value), className: `h-14 px-4 text-lg ${!isAmountValid && ethAmount ? "border-as-red" : "border-b3-react-border"}` }) }), !isAmountValid && ethAmount && _jsx("p", { className: "text-as-red text-sm", children: validationError }), _jsxs("div", { className: "bg-as-on-surface-2/30 rounded-lg border border-white/10 p-4 backdrop-blur-sm", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-primary/70 text-sm font-medium", children: "Total Cost:" }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs("span", { className: "text-as-primary text-lg font-bold", children: [ethAmount || "0", " ETH"] }) })] }), isLoadingQuote ? (_jsx("div", { className: "mt-2 text-center", children: _jsx("span", { className: "text-as-primary/70 text-sm", children: "Calculating tokens..." }) })) : quote ? (_jsxs("div", { className: "mt-2 flex items-center justify-between", children: [_jsx("span", { className: "text-as-primary/70 text-sm font-medium", children: "You'll receive:" }), _jsxs("span", { className: "text-as-primary text-sm font-medium", children: ["\u2248 ", formatNumberWithCommas(parseFloat(quote).toFixed(4)), " ", tokenSymbol] })] })) : null] }), _jsx(Button, { onClick: () => {
+                                        if (isAmountValid && ethAmount) {
+                                            setShowAmountPrompt(false);
+                                        }
+                                    }, disabled: !isAmountValid || !ethAmount || isLoadingQuote, 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: "Continue" })] }) })] }) }));
+    }
+    const encodedData = encodeFunctionData({
+        abi: ABI_bondKit,
+        functionName: "buyFor",
+        args: [recipientAddress, BigInt(minTokensOut)],
+    });
+    return (_jsx(AnySpendCustom, { isMainnet: true, mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: baseMainnet.id, dstToken: dstToken, dstAmount: parseEther(ethAmount).toString(), contractAddress: contractAddress, encodedData: encodedData, metadata: {
+            type: "custom",
+            action: "BondKit Buy",
+        }, header: header, onSuccess: onSuccess, showRecipient: true }));
+}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { B3_TOKEN, OrderType } from "../../../anyspend/index.js";
+import { B3_TOKEN } from "../../../anyspend/index.js";
 import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, useChainSwitchWithAction, useHasMounted, useModalStore, useTokenBalance, } from "../../../global-account/react/index.js";
 import { baseMainnet } from "../../../shared/constants/chains/supported.js";
 import { motion } from "framer-motion";
@@ -60,8 +60,6 @@ const SPIN_WHEEL_ABI = [
 ];
 function getWheelStatus(wheelInfo) {
     const now = BigInt(Math.floor(Date.now() / 1000));
-    console.log("@@anyspend-buy-spin:now:", now);
-    console.log("@@anyspend-buy-spin:wheelInfo:", wheelInfo);
     if (now < wheelInfo.startTime_) {
         return "not_started";
     }
@@ -75,7 +73,6 @@ function getWheelStatus(wheelInfo) {
 }
 function generateEncodedDataForBuyEntriesAndSpin(user, quantity) {
     invariant(BigInt(quantity) > 0, "Quantity must be greater than zero");
-    console.log("@@anyspend-buy-spin:encoded-data:", { user, quantity });
     const encodedData = encodeFunctionData({
         abi: SPIN_WHEEL_ABI,
         functionName: "buyEntriesAndSpin",
@@ -136,7 +133,6 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
     const [validationError, setValidationError] = useState("");
     const [displayQuantity, setDisplayQuantity] = useState("");
     const [debouncedQuantity, setDebouncedQuantity] = useState("");
-    const [debouncedUserSpinQuantity, setDebouncedUserSpinQuantity] = useState("");
     useEffect(() => {
         if (prefillQuantity && wheelInfo) {
             const remainingSpins = wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_;
@@ -153,7 +149,6 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
         try {
             setIsLoadingConfig(true);
             setConfigError("");
-            console.log("@@anyspend-buy-spin:fetch-config:", { spinwheelContractAddress, chainId });
             const [config, entryModuleAddress, wheelInfo] = await Promise.all([
                 basePublicClient.readContract({
                     address: spinwheelContractAddress,
@@ -196,7 +191,7 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
         finally {
             setIsLoadingConfig(false);
         }
-    }, [spinwheelContractAddress, chainId]);
+    }, [spinwheelContractAddress]);
     // Fetch config on mount and when dependencies change
     useEffect(() => {
         fetchPaymentConfig();
@@ -205,7 +200,6 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
     useEffect(() => {
         const timer = setTimeout(() => {
             setDebouncedQuantity(displayQuantity);
-            setDebouncedUserSpinQuantity(userSpinQuantity);
         }, 500);
         return () => clearTimeout(timer);
     }, [displayQuantity, userSpinQuantity]);
@@ -335,7 +329,6 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
         const pricePerEntry = formatUnits(paymentConfig.pricePerEntry, 18);
         const remainingEntries = wheelInfo ? wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_ : BigInt(0);
         const wheelStatus = wheelInfo ? getWheelStatus(wheelInfo) : null;
-        const isSoldOut = wheelStatus === "sold_out";
         const isActive = wheelStatus === "active";
         const getStatusMessage = () => {
             if (!wheelInfo)
@@ -388,8 +381,8 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
     }
     // AnySpend flow for when user needs to swap to B3
     const encodedData = generateEncodedDataForBuyEntriesAndSpin(address || "", userSpinQuantity);
-    return (_jsx(AnySpendCustom, { isMainnet: isMainnet, loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: OrderType.Custom, dstChainId: chainId, dstToken: B3_TOKEN, dstAmount: totalCost.toString(), contractAddress: spinwheelContractAddress, spenderAddress: paymentConfig.entryModule, encodedData: encodedData, metadata: {
-            type: OrderType.Custom,
+    return (_jsx(AnySpendCustom, { isMainnet: isMainnet, loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: chainId, dstToken: B3_TOKEN, dstAmount: totalCost.toString(), contractAddress: spinwheelContractAddress, spenderAddress: paymentConfig.entryModule, encodedData: encodedData, metadata: {
+            type: "custom",
             action: `buy ${userSpinQuantity} spin${userSpinQuantity !== "1" ? "s" : ""}`,
         }, header: header, onSuccess: txHash => onSuccess?.(txHash), showRecipient: false }));
 }

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

@@ -1,4 +1,5 @@
-import { AnySpendMetadata, GetQuoteResponse, OrderType, Token } from "../../../anyspend";
+import { components } from "../../../anyspend/types/api";
+import { GetQuoteResponse } from "../../../anyspend/types/api_req_res";
 import React from "react";
 export declare function AnySpendCustom({ isMainnet, loadOrder, mode, recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient, }: {
     isMainnet?: boolean;
@@ -6,13 +7,13 @@ export declare function AnySpendCustom({ isMainnet, loadOrder, mode, recipientAd
     mode?: "modal" | "page";
     recipientAddress?: string;
     spenderAddress?: string;
-    orderType: OrderType;
+    orderType: components["schemas"]["Order"]["type"];
     dstChainId: number;
-    dstToken: Token;
+    dstToken: components["schemas"]["Token"];
     dstAmount: string;
     contractAddress: string;
     encodedData: string;
-    metadata: AnySpendMetadata;
+    metadata: any;
     header: ({ anyspendPrice, isLoadingAnyspendPrice, }: {
         anyspendPrice: GetQuoteResponse | undefined;
         isLoadingAnyspendPrice: boolean;