@b3dotfun/sdk 0.1.66-alpha.4 → 0.1.67-alpha.0

package/dist/cjs/anyspend/react/components/checkout/QRCheckoutPanel.js

@@ -1,157 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.QRCheckoutPanel = QRCheckoutPanel;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const anyspend_1 = require("../../../../anyspend");
-const chain_1 = require("../../../../anyspend/utils/chain");
-const useAnyspendQuote_1 = require("../../../../anyspend/react/hooks/useAnyspendQuote");
-const useAnyspendOrderAndTransactions_1 = require("../../../../anyspend/react/hooks/useAnyspendOrderAndTransactions");
-const useCreateDepositFirstOrder_1 = require("../../../../anyspend/react/hooks/useCreateDepositFirstOrder");
-const useOnOrderSuccess_1 = require("../../../../anyspend/react/hooks/useOnOrderSuccess");
-const useAnyspendTokens_1 = require("../../../../anyspend/react/hooks/useAnyspendTokens");
-const token_1 = require("../../../../anyspend/utils/token");
-const react_1 = require("../../../../global-account/react");
-const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
-const number_1 = require("../../../../shared/utils/number");
-const cn_1 = require("../../../../shared/utils/cn");
-const lucide_react_1 = require("lucide-react");
-const qrcode_react_1 = require("qrcode.react");
-const react_2 = require("react");
-const ChainTokenIcon_1 = require("../common/ChainTokenIcon");
-const CryptoCheckoutPanel_1 = require("./CryptoCheckoutPanel");
-// Default source token: ETH on Base
-const DEFAULT_ETH_ON_BASE = {
-    chainId: 8453,
-    address: anyspend_1.ZERO_ADDRESS,
-    symbol: "ETH",
-    name: "Ethereum",
-    decimals: 18,
-    metadata: { logoURI: "https://assets.relay.link/icons/1/light.png" },
-};
-function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata, classes, }) {
-    const [selectedSrcChainId, setSelectedSrcChainId] = (0, react_2.useState)(8453); // Base
-    const [selectedSrcToken, setSelectedSrcToken] = (0, react_2.useState)(DEFAULT_ETH_ON_BASE);
-    const [showTokenSelector, setShowTokenSelector] = (0, react_2.useState)(false);
-    const [tokenSearchQuery, setTokenSearchQuery] = (0, react_2.useState)("");
-    const [copied, setCopied] = (0, react_2.useState)(false);
-    const { address: walletAddress } = (0, react_1.useAccountWallet)();
-    const { partnerId } = (0, react_1.useB3Config)();
-    const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
-    const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
-    // Token list for selector
-    const { data: tokenList, isLoading: isLoadingTokens } = (0, useAnyspendTokens_1.useAnyspendTokenList)(selectedSrcChainId, tokenSearchQuery);
-    // Quote: how much source token is needed for the destination amount
-    const isSameToken = selectedSrcToken.address.toLowerCase() === destinationTokenAddress.toLowerCase() &&
-        selectedSrcToken.chainId === destinationTokenChainId;
-    const { anyspendQuote, isLoadingAnyspendQuote } = (0, useAnyspendQuote_1.useAnyspendQuote)({
-        type: "swap",
-        srcChain: selectedSrcChainId,
-        dstChain: destinationTokenChainId,
-        srcTokenAddress: selectedSrcToken.address,
-        dstTokenAddress: destinationTokenAddress,
-        tradeType: "EXACT_OUTPUT",
-        amount: totalAmount,
-    });
-    const srcAmount = (0, react_2.useMemo)(() => {
-        if (isSameToken)
-            return totalAmount;
-        return anyspendQuote?.data?.currencyIn?.amount || "0";
-    }, [isSameToken, totalAmount, anyspendQuote]);
-    const srcAmountFormatted = (0, react_2.useMemo)(() => {
-        const decimals = selectedSrcToken.decimals || 18;
-        return (0, number_1.formatTokenAmount)(BigInt(srcAmount || "0"), decimals);
-    }, [srcAmount, selectedSrcToken]);
-    // Order state
-    const [orderId, setOrderId] = (0, react_2.useState)();
-    const [globalAddress, setGlobalAddress] = (0, react_2.useState)();
-    const orderCreatedRef = (0, react_2.useRef)(false);
-    // Create deposit_first order
-    const { createOrder, isCreatingOrder } = (0, useCreateDepositFirstOrder_1.useCreateDepositFirstOrder)({
-        onSuccess: (data) => {
-            const id = data?.data?.id;
-            const addr = data?.data?.globalAddress;
-            setOrderId(id);
-            setGlobalAddress(addr);
-        },
-        onError: (error) => {
-            onError?.(error);
-        },
-    });
-    // Build destination token object
-    const dstToken = (0, react_2.useMemo)(() => ({
-        address: destinationTokenAddress,
-        chainId: destinationTokenChainId,
-        decimals: 18,
-        symbol: "",
-        name: "",
-        metadata: {},
-    }), [destinationTokenAddress, destinationTokenChainId]);
-    // Create order when token is selected and we don't have one yet
-    (0, react_2.useEffect)(() => {
-        if (orderCreatedRef.current)
-            return;
-        if (!selectedSrcToken)
-            return;
-        orderCreatedRef.current = true;
-        createOrder({
-            recipientAddress,
-            srcChain: selectedSrcChainId,
-            dstChain: destinationTokenChainId,
-            srcToken: selectedSrcToken,
-            dstToken,
-            callbackMetadata,
-        });
-    }, [
-        recipientAddress,
-        selectedSrcChainId,
-        destinationTokenChainId,
-        selectedSrcToken,
-        dstToken,
-        callbackMetadata,
-        createOrder,
-    ]);
-    // Poll order status
-    const { orderAndTransactions: oat } = (0, useAnyspendOrderAndTransactions_1.useAnyspendOrderAndTransactions)(orderId);
-    // Call onSuccess when order is executed
-    (0, useOnOrderSuccess_1.useOnOrderSuccess)({
-        orderData: oat,
-        orderId,
-        onSuccess: (txHash) => {
-            onSuccess?.({ orderId, txHash });
-        },
-    });
-    const displayAddress = globalAddress || "";
-    // Generate QR code value with amount from quote
-    const qrAmount = srcAmount && srcAmount !== "0" ? BigInt(srcAmount) : undefined;
-    const qrValue = displayAddress
-        ? (0, chain_1.getPaymentUrl)(displayAddress, qrAmount, (0, token_1.isNativeToken)(selectedSrcToken.address) ? "ETH" : selectedSrcToken.address, selectedSrcChainId, selectedSrcToken.decimals)
-        : "";
-    const handleCopyAddress = async () => {
-        if (displayAddress) {
-            await navigator.clipboard.writeText(displayAddress);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
-        }
-    };
-    const handleSelectToken = (token) => {
-        setSelectedSrcToken(token);
-        setSelectedSrcChainId(token.chainId);
-        setShowTokenSelector(false);
-        setTokenSearchQuery("");
-        // Reset order so a new one is created with the new token
-        setOrderId(undefined);
-        setGlobalAddress(undefined);
-        orderCreatedRef.current = false;
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-qr-checkout-panel flex flex-col gap-4", classes?.cryptoPanel), children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-token-selector", children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Deposit token" }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowTokenSelector(true), className: (0, cn_1.cn)("flex w-full items-center justify-between rounded-xl border border-gray-200 bg-white px-4 py-3 transition-colors hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-gray-600", classes?.tokenSelector), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[selectedSrcToken.chainId]?.logoUrl || "", tokenUrl: selectedSrcToken.metadata?.logoURI, className: "h-8 w-8" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-left", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: selectedSrcToken.symbol }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: anyspend_1.ALL_CHAINS[selectedSrcChainId]?.name || "" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-4 w-4 text-gray-400" })] })] }), (0, jsx_runtime_1.jsx)(CryptoCheckoutPanel_1.TokenSelectorModal, { open: showTokenSelector, onClose: () => {
-                    setShowTokenSelector(false);
-                    setTokenSearchQuery("");
-                }, tokenList: tokenList, isLoadingTokens: isLoadingTokens, tokenSearchQuery: tokenSearchQuery, onSearchChange: setTokenSearchQuery, onSelectToken: handleSelectToken, selectedToken: selectedSrcToken, walletAddress: walletAddress, chainId: selectedSrcChainId, onChainChange: chainId => {
-                    setSelectedSrcChainId(chainId);
-                    setTokenSearchQuery("");
-                } }), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800/50", classes?.quoteDisplay), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "You pay" }), isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsx)(react_1.TextShimmer, { duration: 1, className: "text-sm", children: "Fetching quote..." })) : ((0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken.symbol] }))] }) }), isCreatingOrder && !globalAddress ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-3 py-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500", children: "Creating deposit address..." })] })) : displayAddress ? ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-center gap-4 rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800/50", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "shrink-0 rounded-lg bg-white p-2", children: (0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: qrValue, size: 80, level: "M", marginSize: 0 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "min-w-0 break-all font-mono text-xs leading-relaxed text-gray-900 dark:text-gray-100", children: displayAddress }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: "mt-0.5 shrink-0 text-gray-400 transition-colors hover:text-gray-600 dark:hover:text-gray-300", children: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-3.5 w-3.5 text-green-500" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-3.5 w-3.5" }) })] }), (0, jsx_runtime_1.jsxs)("p", { className: "mt-1 text-xs text-amber-600 dark:text-amber-400", children: ["Only send ", selectedSrcToken.symbol, " on ", anyspend_1.ALL_CHAINS[selectedSrcChainId]?.name || "the specified chain", "."] })] })] }) })) : null, !walletAddress ? ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
-                    setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: b3Chain_1.thirdwebB3Chain, partnerId });
-                    setB3ModalOpen(true);
-                }, className: (0, cn_1.cn)("w-full rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all", "bg-blue-600 hover:bg-blue-700 active:scale-[0.98]", classes?.payButton), style: themeColor ? { backgroundColor: themeColor } : undefined, children: "Connect Wallet" })) : displayAddress ? ((0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: (0, cn_1.cn)("w-full rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all", "bg-blue-600 hover:bg-blue-700 active:scale-[0.98]", classes?.payButton), style: themeColor ? { backgroundColor: themeColor } : undefined, children: copied ? "Copied!" : "Copy deposit address" })) : null] }));
-}

package/dist/esm/anyspend/react/components/checkout/CryptoCheckoutPanel.d.ts

@@ -1,33 +0,0 @@
-import { components } from "../../../../anyspend/types/api";
-import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
-interface CryptoCheckoutPanelProps {
-    recipientAddress: string;
-    destinationTokenAddress: string;
-    destinationTokenChainId: number;
-    totalAmount: string;
-    buttonText?: string;
-    themeColor?: string;
-    onSuccess?: (result: {
-        txHash?: string;
-        orderId?: string;
-    }) => void;
-    onError?: (error: Error) => void;
-    callbackMetadata?: Record<string, unknown>;
-    classes?: AnySpendCheckoutClasses;
-}
-export declare function CryptoCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, onSuccess, onError, callbackMetadata, classes, }: CryptoCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
-export interface TokenSelectorModalProps {
-    open: boolean;
-    onClose: () => void;
-    tokenList: components["schemas"]["Token"][] | undefined;
-    isLoadingTokens: boolean;
-    tokenSearchQuery: string;
-    onSearchChange: (query: string) => void;
-    onSelectToken: (token: components["schemas"]["Token"]) => void;
-    selectedToken: components["schemas"]["Token"] | null;
-    walletAddress?: string;
-    chainId: number;
-    onChainChange: (chainId: number) => void;
-}
-export declare function TokenSelectorModal({ open, onClose, tokenList, isLoadingTokens, tokenSearchQuery, onSearchChange, onSelectToken, selectedToken, walletAddress, chainId, onChainChange, }: TokenSelectorModalProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/esm/anyspend/react/components/checkout/CryptoCheckoutPanel.js

@@ -1,313 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAnyspendQuote } from "../../../../anyspend/react/hooks/useAnyspendQuote.js";
-import { useAnyspendCreateOrder } from "../../../../anyspend/react/hooks/useAnyspendCreateOrder.js";
-import { useAnyspendOrderAndTransactions } from "../../../../anyspend/react/hooks/useAnyspendOrderAndTransactions.js";
-import { useAnyspendTokenList } from "../../../../anyspend/react/hooks/useAnyspendTokens.js";
-import { useOnOrderSuccess } from "../../../../anyspend/react/hooks/useOnOrderSuccess.js";
-import { ALL_CHAINS } from "../../../../anyspend/index.js";
-import { EVM_MAINNET } from "../../../../anyspend/utils/chain.js";
-import { useAccountWallet, useB3Config, useModalStore, useSimBalance, useSimTokenBalance, useTokenData, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
-import { thirdwebB3Chain } from "../../../../shared/constants/chains/b3Chain.js";
-import { formatTokenAmount } from "../../../../shared/utils/number.js";
-import { isNativeToken } from "../../../../anyspend/utils/token.js";
-import { cn } from "../../../../shared/utils/cn.js";
-import { TextShimmer } from "../../../../global-account/react/index.js";
-import { useIsMobile } from "../../../../global-account/react/index.js";
-import { Dialog, DialogContent, DialogDescription, DialogTitle, } from "../../../../global-account/react/components/ui/dialog.js";
-import { Drawer, DrawerContent, DrawerDescription, DrawerTitle, } from "../../../../global-account/react/components/ui/drawer.js";
-import { ChevronDown, Loader2, Search } from "lucide-react";
-import { encodeFunctionData, erc20Abi } from "viem";
-import { AnimatePresence, motion } from "motion/react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ChainTokenIcon } from "../common/ChainTokenIcon.js";
-export function CryptoCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText = "Pay", themeColor, onSuccess, onError, callbackMetadata, classes, }) {
-    const [selectedSrcChainId, setSelectedSrcChainId] = useState(destinationTokenChainId);
-    const [selectedSrcToken, setSelectedSrcToken] = useState(null);
-    const [showTokenSelector, setShowTokenSelector] = useState(false);
-    const [tokenSearchQuery, setTokenSearchQuery] = useState("");
-    // Get wallet & modal
-    const { address: walletAddress } = useAccountWallet();
-    const { partnerId } = useB3Config();
-    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
-    const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
-    // Get destination token data
-    const { data: dstTokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
-    // Get token list for source chain
-    const { data: tokenList, isLoading: isLoadingTokens } = useAnyspendTokenList(selectedSrcChainId, tokenSearchQuery);
-    // Set default source token to destination token (same-chain, no swap needed)
-    useEffect(() => {
-        if (!selectedSrcToken && tokenList && tokenList.length > 0) {
-            // Try to find the destination token in the list
-            const dstToken = tokenList.find((t) => t.address.toLowerCase() === destinationTokenAddress.toLowerCase() && t.chainId === destinationTokenChainId);
-            if (dstToken) {
-                setSelectedSrcToken(dstToken);
-            }
-            else {
-                // Default to first token
-                setSelectedSrcToken(tokenList[0]);
-            }
-        }
-    }, [tokenList, selectedSrcToken, destinationTokenAddress, destinationTokenChainId]);
-    // Compute source amount from destination amount using quote
-    const isSameToken = selectedSrcToken &&
-        selectedSrcToken.address.toLowerCase() === destinationTokenAddress.toLowerCase() &&
-        selectedSrcToken.chainId === destinationTokenChainId;
-    const { anyspendQuote, isLoadingAnyspendQuote } = useAnyspendQuote({
-        type: "swap",
-        srcChain: selectedSrcChainId,
-        dstChain: destinationTokenChainId,
-        srcTokenAddress: selectedSrcToken?.address || "",
-        dstTokenAddress: destinationTokenAddress,
-        tradeType: "EXACT_OUTPUT",
-        amount: totalAmount,
-    });
-    // Get balance
-    const tokenAddress = selectedSrcToken
-        ? isNativeToken(selectedSrcToken.address)
-            ? "native"
-            : selectedSrcToken.address
-        : undefined;
-    const { data: balanceData } = useSimTokenBalance(walletAddress, tokenAddress, selectedSrcChainId);
-    const balance = useMemo(() => {
-        const b = balanceData?.balances?.[0];
-        if (!b?.amount)
-            return { raw: BigInt(0), formatted: "0", decimals: 18 };
-        return {
-            raw: BigInt(b.amount),
-            formatted: formatTokenAmount(BigInt(b.amount), b.decimals),
-            decimals: b.decimals,
-        };
-    }, [balanceData]);
-    // Determine the amount to pay in source token
-    const srcAmount = useMemo(() => {
-        if (isSameToken)
-            return totalAmount;
-        return anyspendQuote?.data?.currencyIn?.amount || "0";
-    }, [isSameToken, totalAmount, anyspendQuote]);
-    const srcAmountFormatted = useMemo(() => {
-        if (!selectedSrcToken)
-            return "0";
-        const decimals = selectedSrcToken.decimals || 18;
-        return formatTokenAmount(BigInt(srcAmount || "0"), decimals);
-    }, [srcAmount, selectedSrcToken]);
-    // Check if user has enough balance
-    const hasEnoughBalance = balance.raw >= BigInt(srcAmount || "0");
-    // Order tracking state
-    const [orderId, setOrderId] = useState();
-    const [isSendingDeposit, setIsSendingDeposit] = useState(false);
-    const depositSentRef = useRef(false);
-    // Wallet transaction execution
-    const { switchChainAndExecute } = useUnifiedChainSwitchAndExecute();
-    // Create order
-    const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
-        onSuccess: (data) => {
-            const id = data?.data?.id;
-            if (id) {
-                setOrderId(id);
-            }
-        },
-        onError: (error) => {
-            setIsSendingDeposit(false);
-            onError?.(error);
-        },
-    });
-    // Poll order status until executed
-    const { orderAndTransactions: oat } = useAnyspendOrderAndTransactions(orderId);
-    // Send deposit transaction once order is created and ready
-    useEffect(() => {
-        if (!oat?.data?.order || depositSentRef.current)
-            return;
-        const order = oat.data.order;
-        if (order.status !== "scanning_deposit_transaction")
-            return;
-        if (oat.data.depositTxs?.length)
-            return; // Already deposited
-        depositSentRef.current = true;
-        const sendDeposit = async () => {
-            try {
-                setIsSendingDeposit(true);
-                const amount = BigInt(order.srcAmount);
-                if (isNativeToken(order.srcTokenAddress)) {
-                    await switchChainAndExecute(order.srcChain, {
-                        to: order.globalAddress,
-                        value: amount,
-                    });
-                }
-                else {
-                    const data = encodeFunctionData({
-                        abi: erc20Abi,
-                        functionName: "transfer",
-                        args: [order.globalAddress, amount],
-                    });
-                    await switchChainAndExecute(order.srcChain, {
-                        to: order.srcTokenAddress,
-                        data,
-                        value: BigInt(0),
-                    });
-                }
-            }
-            catch (error) {
-                depositSentRef.current = false;
-                onError?.(error instanceof Error ? error : new Error(error?.message || "Transaction rejected"));
-            }
-            finally {
-                setIsSendingDeposit(false);
-            }
-        };
-        sendDeposit();
-    }, [oat, switchChainAndExecute, onError]);
-    // Only call onSuccess when order is actually executed with a real txHash
-    useOnOrderSuccess({
-        orderData: oat,
-        orderId,
-        onSuccess: (txHash) => {
-            onSuccess?.({ orderId, txHash });
-        },
-    });
-    const isWaitingForExecution = !!orderId && oat?.data?.order.status !== "executed";
-    const handlePay = useCallback(async () => {
-        if (!selectedSrcToken || !walletAddress)
-            return;
-        depositSentRef.current = false;
-        const dstToken = {
-            address: destinationTokenAddress,
-            chainId: destinationTokenChainId,
-            decimals: dstTokenData?.decimals || 18,
-            symbol: dstTokenData?.symbol || "",
-            name: dstTokenData?.name || "",
-            metadata: {
-                logoURI: dstTokenData?.logoURI || "",
-            },
-        };
-        createOrder({
-            recipientAddress,
-            orderType: "swap",
-            srcChain: selectedSrcChainId,
-            dstChain: destinationTokenChainId,
-            srcToken: selectedSrcToken,
-            dstToken,
-            srcAmount,
-            expectedDstAmount: totalAmount,
-            callbackMetadata,
-        });
-    }, [
-        selectedSrcToken,
-        walletAddress,
-        recipientAddress,
-        selectedSrcChainId,
-        destinationTokenChainId,
-        destinationTokenAddress,
-        dstTokenData,
-        srcAmount,
-        totalAmount,
-        callbackMetadata,
-        createOrder,
-    ]);
-    const handleSelectToken = (token) => {
-        setSelectedSrcToken(token);
-        setSelectedSrcChainId(token.chainId);
-        setShowTokenSelector(false);
-        setTokenSearchQuery("");
-    };
-    const isLoading = isLoadingAnyspendQuote || isLoadingTokens;
-    const isPending = isCreatingOrder || isSendingDeposit || isWaitingForExecution;
-    const canPay = walletAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
-    return (_jsxs("div", { className: cn("anyspend-crypto-panel flex flex-col gap-4", classes?.cryptoPanel), children: [_jsxs("div", { className: "anyspend-token-selector", children: [_jsx("label", { className: "anyspend-token-label mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Pay with" }), _jsxs("button", { onClick: () => setShowTokenSelector(true), className: cn("anyspend-token-btn flex w-full items-center justify-between rounded-xl border border-gray-200 bg-white px-4 py-3 transition-colors hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-gray-600", classes?.tokenSelector), children: [selectedSrcToken ? (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[selectedSrcToken.chainId]?.logoUrl || "", tokenUrl: selectedSrcToken.metadata?.logoURI, className: "h-8 w-8" }), _jsxs("div", { className: "text-left", children: [_jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: selectedSrcToken.symbol }), _jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["Balance: ", balance.formatted] })] })] })) : (_jsx("span", { className: "text-sm text-gray-400", children: "Select token" })), _jsx(ChevronDown, { className: "h-4 w-4 text-gray-400" })] })] }), _jsx(TokenSelectorModal, { open: showTokenSelector, onClose: () => {
-                    setShowTokenSelector(false);
-                    setTokenSearchQuery("");
-                }, tokenList: tokenList, isLoadingTokens: isLoadingTokens, tokenSearchQuery: tokenSearchQuery, onSearchChange: setTokenSearchQuery, onSelectToken: handleSelectToken, selectedToken: selectedSrcToken, walletAddress: walletAddress, chainId: selectedSrcChainId, onChainChange: chainId => {
-                    setSelectedSrcChainId(chainId);
-                    setSelectedSrcToken(null);
-                    setTokenSearchQuery("");
-                } }), _jsx(motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("anyspend-quote-display rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800/50", classes?.quoteDisplay), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "You pay" }), _jsx(AnimatePresence, { mode: "wait", children: isLoadingAnyspendQuote ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: _jsx(TextShimmer, { duration: 1, className: "text-sm", children: "Fetching quote..." }) }, "quote-loading")) : (_jsxs(motion.span, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol || ""] }, "quote-amount")) })] }) }), _jsx(AnimatePresence, { children: walletAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && (_jsxs(motion.p, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2, ease: "easeOut" }, className: "anyspend-balance-warning text-center text-sm text-red-500", children: ["Insufficient ", selectedSrcToken.symbol, " balance"] }, "balance-warning")) }), !walletAddress ? (_jsx("button", { onClick: () => {
-                    setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: thirdwebB3Chain, partnerId });
-                    setB3ModalOpen(true);
-                }, className: cn("anyspend-crypto-pay-btn w-full rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all", "bg-blue-600 hover:bg-blue-700 active:scale-[0.98]", classes?.payButton), style: themeColor ? { backgroundColor: themeColor } : undefined, children: "Connect Wallet to Pay" })) : (_jsx("button", { onClick: handlePay, disabled: !canPay, className: cn("anyspend-crypto-pay-btn w-full rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all", canPay ? "bg-blue-600 hover:bg-blue-700 active:scale-[0.98]" : "cursor-not-allowed bg-blue-600 opacity-50", classes?.payButton), style: !canPay ? undefined : themeColor ? { backgroundColor: themeColor } : undefined, children: isPending ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), isCreatingOrder
-                            ? "Creating order..."
-                            : isSendingDeposit
-                                ? "Confirm in wallet..."
-                                : "Confirming transaction..."] })) : (buttonText) }))] }));
-}
-const SOURCE_CHAINS = Object.values(EVM_MAINNET).map(c => ({ id: c.id, name: c.name, logoUrl: c.logoUrl }));
-export function TokenSelectorModal({ open, onClose, tokenList, isLoadingTokens, tokenSearchQuery, onSearchChange, onSelectToken, selectedToken, walletAddress, chainId, onChainChange, }) {
-    const isMobile = useIsMobile();
-    const searchInputRef = useRef(null);
-    // Fetch all balances for the wallet on this chain
-    const { data: balanceData } = useSimBalance(walletAddress, [chainId]);
-    // Build a lookup map: lowercase token address -> balance info
-    const balanceMap = useMemo(() => {
-        const map = new Map();
-        if (!balanceData?.balances)
-            return map;
-        for (const b of balanceData.balances) {
-            if (b.amount && BigInt(b.amount) > BigInt(0)) {
-                map.set(b.address.toLowerCase(), {
-                    raw: BigInt(b.amount),
-                    formatted: formatTokenAmount(BigInt(b.amount), b.decimals),
-                    decimals: b.decimals,
-                });
-            }
-        }
-        return map;
-    }, [balanceData]);
-    // Sort tokens: tokens with balance first (sorted by balance desc), then the rest
-    const sortedTokenList = useMemo(() => {
-        if (!tokenList)
-            return undefined;
-        const withBalance = [];
-        const withoutBalance = [];
-        for (const token of tokenList) {
-            const bal = balanceMap.get(token.address.toLowerCase());
-            if (bal) {
-                withBalance.push(token);
-            }
-            else {
-                withoutBalance.push(token);
-            }
-        }
-        withBalance.sort((a, b) => {
-            const balA = balanceMap.get(a.address.toLowerCase())?.raw || BigInt(0);
-            const balB = balanceMap.get(b.address.toLowerCase())?.raw || BigInt(0);
-            if (balB > balA)
-                return 1;
-            if (balB < balA)
-                return -1;
-            return 0;
-        });
-        return [...withBalance, ...withoutBalance];
-    }, [tokenList, balanceMap]);
-    // Keep showing the previous list while new chain tokens are loading
-    const prevListRef = useRef(undefined);
-    if (sortedTokenList && sortedTokenList.length > 0) {
-        prevListRef.current = sortedTokenList;
-    }
-    const displayList = sortedTokenList && sortedTokenList.length > 0
-        ? sortedTokenList
-        : isLoadingTokens
-            ? prevListRef.current
-            : sortedTokenList;
-    // Focus search input when modal opens
-    useEffect(() => {
-        if (open) {
-            const timer = setTimeout(() => searchInputRef.current?.focus(), 100);
-            return () => clearTimeout(timer);
-        }
-    }, [open]);
-    const ModalComponent = isMobile ? Drawer : Dialog;
-    const ModalContent = isMobile ? DrawerContent : DialogContent;
-    const ModalTitle = isMobile ? DrawerTitle : DialogTitle;
-    const ModalDescription = isMobile ? DrawerDescription : DialogDescription;
-    return (_jsxs(ModalComponent, { open: open, onOpenChange: (v) => {
-            if (!v)
-                onClose();
-        }, children: [_jsx("style", { dangerouslySetInnerHTML: {
-                    __html: `.anyspend-token-modal .b3-modal-ga-branding { display: none; } .anyspend-token-modal .modal-inner-content { margin-bottom: 0; }`,
-                } }), _jsxs(ModalContent, { className: "anyspend-token-modal flex max-h-[80dvh] flex-col overflow-hidden rounded-2xl bg-white p-0 shadow-xl sm:max-h-[70dvh] dark:bg-gray-900", children: [_jsx(ModalTitle, { className: "sr-only", children: "Select token" }), _jsx(ModalDescription, { className: "sr-only", children: "Choose a token to pay with" }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "flex items-center justify-between px-5 py-4", children: _jsx("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Select token" }) }), _jsx("div", { className: "anyspend-chain-selector flex items-center gap-2 px-5 pb-3", children: SOURCE_CHAINS.map(chain => (_jsxs("button", { onClick: () => onChainChange(chain.id), title: chain.name, className: "relative shrink-0 rounded-full transition-opacity", style: { opacity: chain.id === chainId ? 1 : 0.4 }, children: [_jsx("img", { src: chain.logoUrl, alt: chain.name, className: "h-7 w-7 rounded-full" }), chain.id === chainId && (_jsx("div", { className: "absolute inset-0 rounded-full", style: { boxShadow: "0 0 0 2px #3b82f6" } }))] }, chain.id))) }), _jsxs("div", { className: "anyspend-token-search flex items-center gap-2 border-b border-gray-100 px-5 py-2.5 dark:border-gray-800", children: [_jsx(Search, { className: "h-4 w-4 shrink-0 text-gray-400" }), _jsx("input", { ref: searchInputRef, type: "text", value: tokenSearchQuery, onChange: e => onSearchChange(e.target.value), placeholder: "Search tokens...", className: "anyspend-token-search-input w-full bg-transparent text-sm outline-none placeholder:text-gray-400 dark:text-gray-100" })] }), _jsxs("div", { className: "anyspend-token-list relative flex-1 overflow-y-auto", style: { minHeight: 300 }, children: [displayList?.map((token) => {
-                                        const isSelected = selectedToken &&
-                                            selectedToken.address.toLowerCase() === token.address.toLowerCase() &&
-                                            selectedToken.chainId === token.chainId;
-                                        const tokenBalance = balanceMap.get(token.address.toLowerCase());
-                                        return (_jsxs("button", { onClick: () => onSelectToken(token), className: cn("anyspend-token-option flex w-full items-center gap-3 px-5 py-3 text-left transition-colors hover:bg-gray-50 dark:hover:bg-gray-800", isSelected && "bg-blue-50 dark:bg-blue-900/20"), children: [_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[token.chainId]?.logoUrl || "", tokenUrl: token.metadata?.logoURI, className: "h-8 w-8" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: token.symbol }), _jsx("p", { className: "truncate text-xs text-gray-500 dark:text-gray-400", children: token.name })] }), _jsxs("div", { className: "flex items-center gap-2", children: [tokenBalance && (_jsx("span", { className: "text-xs font-medium text-gray-600 dark:text-gray-300", children: tokenBalance.formatted })), isSelected && _jsx("div", { className: "h-2 w-2 rounded-full bg-blue-600" })] })] }, `${token.chainId}-${token.address}`));
-                                    }), !isLoadingTokens && displayList && displayList.length === 0 && (_jsx("div", { className: "px-5 py-8 text-center text-sm text-gray-400", children: "No tokens found" }))] })] })] })] }));
-}

package/dist/esm/anyspend/react/components/checkout/QRCheckoutPanel.d.ts

@@ -1,17 +0,0 @@
-import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
-interface QRCheckoutPanelProps {
-    recipientAddress: string;
-    destinationTokenAddress: string;
-    destinationTokenChainId: number;
-    totalAmount: string;
-    themeColor?: string;
-    onSuccess?: (result: {
-        txHash?: string;
-        orderId?: string;
-    }) => void;
-    onError?: (error: Error) => void;
-    callbackMetadata?: Record<string, unknown>;
-    classes?: AnySpendCheckoutClasses;
-}
-export declare function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata, classes, }: QRCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
-export {};