@b3dotfun/sdk 0.0.1-alpha.1

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

@@ -0,0 +1,393 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { eqci, getDefaultToken, NftType, OrderStatus, OrderType, RELAY_ETH_ADDRESS, USDC_BASE, useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useAnyspendTokenList, useGeoOnrampOptions } from "../../../anyspend";
+import { useB3 } from "../../../global-account";
+import StyleRoot from "../../../global-account/react/components/StyleRoot";
+import { Badge } from "../../../global-account/react/components/ui/badge";
+import { Button } from "../../../global-account/react/components/ui/button";
+import ShinyButton from "../../../global-account/react/components/ui/ShinyButton";
+import { Skeleton } from "../../../global-account/react/components/ui/skeleton";
+import { Tabs, TabsContent, TabsList, TabTrigger } from "../../../global-account/react/components/ui/TabSystem";
+import { TextShimmer } from "../../../global-account/react/components/ui/text-shimmer";
+import { TransitionPanel } from "../../../global-account/react/components/ui/transition-panel";
+import { useAccountWallet } from "../../../global-account/react/hooks/useAccountWallet";
+import { useBsmntProfile } from "../../../global-account/react/hooks/useBsmntProfile";
+import { useHasMounted } from "../../../global-account/react/hooks/useHasMounted";
+import { useRouter } from "../../../global-account/react/hooks/useRouter";
+import useSearchParams from "../../../global-account/react/hooks/useSearchParamsSSR";
+import { useTokenBalancesByChain } from "../../../global-account/react/hooks/useTokenBalancesByChain";
+import { useModalStore } from "../../../global-account/react/stores/useModalStore";
+import { cn } from "../../../shared/utils";
+import centerTruncate from "../../../shared/utils/centerTruncate";
+import { formatTokenAmount } from "../../../shared/utils/number";
+import { simpleHashChainToChainName } from "../../../shared/utils/simplehash";
+import { motion } from "framer-motion";
+import invariant from "invariant";
+import { ChevronRightCircle, Loader2 } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { b3, base, baseSepolia } from "viem/chains";
+import { OrderDetails } from "./common/OrderDetails";
+import OrderHistory from "./common/OrderHistory";
+import { OrderStatusDisplay } from "./common/OrderStatus";
+import { OrderToken } from "./common/OrderToken";
+import { PanelOnrampPayment } from "./common/PanelOnrampPayment";
+var PanelView;
+(function (PanelView) {
+    PanelView[PanelView["CONFIRM_ORDER"] = 0] = "CONFIRM_ORDER";
+    PanelView[PanelView["HISTORY"] = 1] = "HISTORY";
+    PanelView[PanelView["ORDER_DETAILS"] = 2] = "ORDER_DETAILS";
+    PanelView[PanelView["LOADING"] = 3] = "LOADING";
+})(PanelView || (PanelView = {}));
+function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChainId, dstToken, dstAmount, contractAddress, encodedData, spenderAddress }) {
+    switch (orderType) {
+        case OrderType.MintNFT: {
+            return {
+                type: OrderType.MintNFT,
+                srcChain: srcChainId,
+                srcTokenAddress: srcToken.address,
+                dstChain: dstChainId,
+                dstTokenAddress: dstToken.address,
+                price: dstAmount,
+                contractAddress: contractAddress
+            };
+        }
+        case OrderType.JoinTournament: {
+            return {
+                type: OrderType.JoinTournament,
+                srcChain: srcChainId,
+                srcTokenAddress: srcToken.address,
+                dstChain: dstChainId,
+                dstTokenAddress: dstToken.address,
+                price: dstAmount,
+                contractAddress: contractAddress
+            };
+        }
+        case OrderType.FundTournament: {
+            return {
+                type: OrderType.FundTournament,
+                srcChain: srcChainId,
+                srcTokenAddress: srcToken.address,
+                dstChain: dstChainId,
+                dstTokenAddress: dstToken.address,
+                fundAmount: dstAmount,
+                contractAddress: contractAddress
+            };
+        }
+        case OrderType.Custom: {
+            return {
+                type: OrderType.Custom,
+                srcChain: srcChainId,
+                srcTokenAddress: srcToken.address,
+                dstChain: dstChainId,
+                dstTokenAddress: dstToken.address,
+                payload: {
+                    amount: dstAmount,
+                    data: encodedData,
+                    to: contractAddress,
+                    spenderAddress: spenderAddress
+                }
+            };
+        }
+        default: {
+            throw new Error("Unsupported order type");
+        }
+    }
+}
+export default function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true }) {
+    const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
+    const hasMounted = useHasMounted();
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const [activePanel, setActivePanel] = useState(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
+    const [activeTab, setActiveTab] = useState("crypto");
+    // Get current user's wallet
+    const currentWallet = useAccountWallet();
+    const recipientPropsProfile = useBsmntProfile({ address: recipientAddressProps });
+    const recipientAddress = recipientAddressProps || currentWallet.address;
+    const recipientEnsName = recipientAddressProps
+        ? recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "")
+        : currentWallet.ensName;
+    const recipientImageUrl = recipientAddressProps
+        ? recipientPropsProfile.data?.avatar
+        : currentWallet.wallet.meta?.icon;
+    const [orderId, setOrderId] = useState(loadOrder);
+    const [srcChainId, setSrcChainId] = useState(isMainnet ? base.id : baseSepolia.id);
+    // Get token list for token balance check
+    const chainName = useMemo(() => simpleHashChainToChainName(srcChainId), [srcChainId]);
+    const { data: tokenList } = useAnyspendTokenList(isMainnet, srcChainId, "");
+    // Get token balances for the selected chain
+    const { nativeTokens, fungibleTokens } = useTokenBalancesByChain({
+        address: currentWallet?.wallet?.address || "",
+        chainsIds: [srcChainId],
+        enabled: !!currentWallet?.wallet?.address && !!chainName
+    });
+    // Find a token with a balance, prioritizing tokens the user already owns
+    const getTokenWithBalance = useCallback(() => {
+        if (!currentWallet?.wallet?.address || (!nativeTokens && !fungibleTokens) || !tokenList) {
+            return getDefaultToken(srcChainId);
+        }
+        // First check native tokens (ETH, etc.)
+        const nativeToken = nativeTokens?.find(t => t.chainId === srcChainId && Number(t.displayValue) > 0);
+        if (nativeToken) {
+            const matchingToken = tokenList.find(t => t.address === RELAY_ETH_ADDRESS);
+            if (matchingToken)
+                return matchingToken;
+        }
+        // Then check ERC20 tokens
+        if (fungibleTokens?.length) {
+            // Find the token with the highest balance
+            const tokensWithBalance = fungibleTokens
+                .filter(t => t.chain_id === srcChainId && Number(t.balance) > 0)
+                .sort((a, b) => Number(b.balance) - Number(a.balance));
+            if (tokensWithBalance.length > 0) {
+                // Extract the token address from fungible_id (chain.address)
+                const topToken = tokensWithBalance[0];
+                const tokenAddress = topToken.token_address;
+                const matchingToken = tokenList.find(t => t.address.toLowerCase() === tokenAddress);
+                if (matchingToken)
+                    return matchingToken;
+            }
+        }
+        // Default fallback
+        return getDefaultToken(srcChainId);
+    }, [currentWallet?.wallet?.address, nativeTokens, fungibleTokens, tokenList, srcChainId]);
+    // Set the selected token with preference for tokens user owns
+    const [srcToken, setSrcToken] = useState(getDefaultToken(srcChainId));
+    const [dirtySelectSrcToken, setDirtySelectSrcToken] = useState(false);
+    // Update token when chain changes or token balances are loaded
+    useEffect(() => {
+        if (tokenList?.length && !dirtySelectSrcToken) {
+            const tokenWithBalance = getTokenWithBalance();
+            if (eqci(tokenWithBalance.address, dstToken.address) === false) {
+                setSrcToken(tokenWithBalance);
+            }
+        }
+    }, [srcChainId, tokenList, getTokenWithBalance, nativeTokens, fungibleTokens, dirtySelectSrcToken, dstToken.address]);
+    const { account: isAuthenticated } = useB3();
+    const getRelayQuoteRequest = generateGetRelayQuoteRequest({
+        orderType: orderType,
+        srcChainId: srcChainId,
+        srcToken: srcToken,
+        dstChainId: dstChainId,
+        dstToken: dstToken,
+        dstAmount: dstAmount,
+        contractAddress: contractAddress,
+        encodedData: encodedData,
+        spenderAddress: spenderAddress
+    });
+    const { anyspendQuote, isLoadingAnyspendQuote } = useAnyspendQuote(isMainnet, getRelayQuoteRequest);
+    // Get geo data and onramp options (after quote is available)
+    const { geoData, isOnrampSupported } = useGeoOnrampOptions(isMainnet, anyspendQuote?.data?.currencyIn?.amountUsd || "0");
+    const { orderAndTransactions: oat } = useAnyspendOrderAndTransactions(isMainnet, orderId);
+    const onSelectOrder = (selectedOrderId) => {
+        setActivePanel(PanelView.ORDER_DETAILS);
+        setOrderId(selectedOrderId);
+        // Update URL with the new orderId
+        const params = new URLSearchParams(searchParams.toString());
+        params.set("orderId", selectedOrderId);
+        router.push(`${window.location.pathname}?${params.toString()}`);
+    };
+    const [srcAmount, setSrcAmount] = useState(null);
+    const formattedSrcAmount = srcAmount ? formatTokenAmount(srcAmount, srcToken.decimals, 6, false) : null;
+    // Update the selected src token to USDC and chain to base when the active tab is fiat,
+    // also force not to update srcToken by setting dirtySelectSrcToken to true.
+    useEffect(() => {
+        if (activeTab === "fiat") {
+            setSrcChainId(base.id);
+            setSrcToken(USDC_BASE);
+            setDirtySelectSrcToken(true);
+        }
+    }, [activeTab]);
+    // Update dependent amount when relay price changes
+    useEffect(() => {
+        if (anyspendQuote?.data &&
+            anyspendQuote.data.currencyIn?.amount &&
+            anyspendQuote.data.currencyIn?.currency?.decimals) {
+            // Use toPrecision instead of toSignificant
+            const amount = anyspendQuote.data.currencyIn.amount;
+            setSrcAmount(BigInt(amount));
+        }
+        else {
+            setSrcAmount(null);
+        }
+    }, [anyspendQuote?.data]);
+    useEffect(() => {
+        if (oat?.data?.order.status === OrderStatus.Executed) {
+            console.log("Calling onSuccess");
+            const txHash = oat?.data?.executeTx?.txHash;
+            onSuccess?.(txHash);
+        }
+    }, [oat?.data?.executeTx?.txHash, oat?.data?.order.status, onSuccess]);
+    const { createOrder: createRegularOrder, isCreatingOrder: isCreatingRegularOrder } = useAnyspendCreateOrder({
+        onSuccess: data => {
+            setOrderId(data.data.id);
+        },
+        onError: error => {
+            console.error(error);
+            toast.error("Failed to create order: " + error.message);
+        }
+    });
+    const { createOrder: createOnrampOrder, isCreatingOrder: isCreatingOnrampOrder } = useAnyspendCreateOnrampOrder({
+        onSuccess: data => {
+            setOrderId(data.data.id);
+        },
+        onError: error => {
+            console.error(error);
+            toast.error("Failed to create order: " + error.message);
+        }
+    });
+    const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
+    const handleCreateOrder = async (recipientAddress, onramp) => {
+        try {
+            invariant(anyspendQuote, "Relay price is not found");
+            invariant(srcAmount, "Src amount is null");
+            const createOrderParams = {
+                isMainnet: isMainnet,
+                orderType: orderType,
+                srcChain: srcChainId,
+                dstChain: dstChainId,
+                srcToken: srcToken,
+                dstToken: dstToken,
+                srcAmount: srcAmount.toString(),
+                recipientAddress,
+                creatorAddress: currentWallet?.wallet?.address,
+                nft: {
+                    ...metadata.nftContract,
+                    type: NftType.ERC721
+                },
+                tournament: {
+                    ...metadata.tournament,
+                    contractAddress: contractAddress,
+                    entryPriceOrFundAmount: dstAmount
+                },
+                payload: {
+                    amount: dstAmount,
+                    data: encodedData,
+                    spenderAddress: spenderAddress,
+                    to: contractAddress,
+                    action: metadata.action
+                }
+            };
+            if (onramp) {
+                invariant(srcToken.address === USDC_BASE.address, "Selected src token is not USDC");
+                invariant(srcChainId === base.id, "Selected src chain is not base");
+                void createOnrampOrder({
+                    ...createOrderParams,
+                    srcFiatAmount: anyspendQuote?.data?.currencyIn?.amountUsd || "0",
+                    onramp: {
+                        vendor: onramp.vendor,
+                        paymentMethod: onramp.paymentMethod,
+                        country: geoData?.country || "US",
+                        ipAddress: geoData?.ip,
+                        redirectUrl: window.location.origin === "https://basement.fun"
+                            ? "https://basement.fun/deposit"
+                            : window.location.origin
+                    },
+                    expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0"
+                });
+            }
+            else {
+                void createRegularOrder(createOrderParams);
+            }
+        }
+        catch (err) {
+            console.error(err);
+            toast.error(err.message);
+            throw err;
+        }
+    };
+    const handleConfirmOrder = async (onramp) => {
+        if (!isAuthenticated) {
+            // Copied from https://github.com/b3-fun/b3-mono/blob/main/apps/anyspend-web/components/User/index.tsx#L85
+            setB3ModalContentType({
+                chain: {
+                    ...b3,
+                    rpc: "https://mainnet-rpc.b3.fun",
+                    blockExplorers: [{ name: "B3 Explorer", url: "https://explorer.b3.fun/" }],
+                    testnet: undefined
+                },
+                partnerId: String(process.env.NEXT_PUBLIC_GLOBAL_ACCOUNTS_PARTNER_ID),
+                type: "signInWithB3",
+                showBackButton: false
+            });
+            setB3ModalOpen(true);
+            return;
+        }
+        if (recipientAddress) {
+            try {
+                await handleCreateOrder(recipientAddress, onramp);
+            }
+            catch (err) {
+                console.error("Error creating order:", err);
+                toast(`Error creating order: ${err instanceof Error ? err.message : err}`);
+            }
+        }
+    };
+    const recipientSection = showRecipient && isAuthenticated && recipientAddress ? (_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: "flex w-full items-center justify-between gap-4", children: [_jsx("div", { className: "text-b3-react-foreground", children: orderType === OrderType.Swap
+                    ? "Recipient"
+                    : orderType === OrderType.MintNFT
+                        ? "Receive NFT at"
+                        : orderType === OrderType.JoinTournament
+                            ? "Join for"
+                            : "Recipient" }), _jsx("div", { children: _jsxs(Button, { variant: "outline", className: "w-full justify-between border-none p-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [recipientImageUrl && (_jsx("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "flex flex-col items-start gap-1", children: [recipientEnsName && _jsxs("span", { children: ["@", recipientEnsName] }), _jsx("span", { children: centerTruncate(recipientAddress) })] })] }), _jsx(ChevronRightCircle, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) })] })) : null;
+    const historyView = (_jsx("div", { className: cn("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: _jsx(OrderHistory, { mode: mode, onBack: () => {
+                setActivePanel(PanelView.HISTORY);
+            }, onSelectOrder: onSelectOrder }) }));
+    const orderDetailsView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background"), children: [oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatusDisplay, { order: oat.data.order }), _jsx(OrderDetails, { isMainnet: isMainnet, mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: () => {
+                            setOrderId(undefined);
+                            setActivePanel(PanelView.CONFIRM_ORDER);
+                            // Remove orderId from URL when canceling
+                            const params = new URLSearchParams(searchParams.toString());
+                            params.delete("orderId");
+                            router.push(`${window.location.pathname}?${params.toString()}`);
+                        } })] })), mode === "page" && _jsx("div", { className: "h-12" })] }));
+    const loadingView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background"), children: [_jsxs(Badge, { variant: "default", className: "bg-b3-react-muted/30 border-b3-react-border hover:bg-b3-react-muted/50 flex items-center gap-3 px-4 py-1 text-base transition-all", children: [_jsx(Loader2, { className: "text-b3-react-foreground size-4 animate-spin" }), _jsx(TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), _jsxs("div", { className: "flex w-full flex-1 flex-col", children: [_jsxs("div", { className: "mb-4 flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-8 w-48" }), _jsx(Skeleton, { className: "ml-4 h-8 w-32" })] }), _jsx(Skeleton, { className: "mt-4 h-8 w-24" })] }), _jsx(Skeleton, { className: "mb-4 h-12 w-full" }), _jsxs("div", { className: "flex w-full items-center justify-between gap-4", children: [_jsxs(Skeleton, { className: "rounded-lg bg-white/5 p-6 pb-3", children: [_jsx("div", { className: "size-[200px]" }), _jsx("div", { className: "mt-3 flex items-center justify-center gap-2", children: _jsx("div", { className: "size-5 rounded-full" }) })] }), _jsx("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => (_jsx(Skeleton, { className: "h-10 w-full" }, i))) })] })] }), _jsxs("div", { className: "bg-b3-react-muted/30 mt-8 w-full rounded-lg p-4", children: [_jsx(Skeleton, { className: "mb-3 h-4 w-48" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "h-10 flex-1" }), _jsx(Skeleton, { className: "h-10 flex-1" })] })] }), _jsx("div", { className: "flex w-full flex-col gap-3", children: [1, 2, 3, 4, 5].map(i => (_jsxs("div", { className: "flex w-full justify-between", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsx(Skeleton, { className: "h-4 w-32" })] }, i))) }), _jsx(Skeleton, { className: "h-10 w-full" }), mode === "page" && _jsx("div", { className: "h-12" })] }));
+    // Confirm order view.
+    const confirmOrderView = (_jsxs("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), _jsx("div", { className: "divider w-full" }), _jsxs(Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background w-full p-5", children: [isOnrampSupported || activeTab === "fiat" ? (_jsxs(TabsList, { hideGradient: true, className: "justify-center", children: [_jsx(TabTrigger, { value: "crypto", children: _jsx("span", { className: "text-as-primary w-[140px]", children: "Pay with crypto" }) }), _jsx(TabTrigger, { value: "fiat", children: _jsx("span", { className: "text-as-primary w-[140px]", children: "Pay with fiat" }) })] })) : null, _jsx(TabsContent, { value: "crypto", children: _jsxs("div", { className: "mt-2 flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-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 flex w-full items-center justify-between", children: [_jsx("div", { className: "font-medium", children: "Pay with" }), _jsx(OrderToken, { address: currentWallet?.wallet?.address, context: "from", chainId: srcChainId, setChainId: setSrcChainId, token: srcToken, setToken: token => {
+                                                        setDirtySelectSrcToken(true);
+                                                        setSrcToken(token);
+                                                    }, requiredAmount: srcAmount || undefined })] }), _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.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("span", { className: "font-medium", children: "Price" }), _jsxs("h2", { className: cn("text-as-primary text-2xl font-semibold"), children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] })] }), recipientSection, _jsx("div", { className: cn("flex w-full flex-col items-center justify-between gap-2"), 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.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote, onClick: () => handleConfirmOrder(), className: "relative w-full", children: !isAuthenticated ? ("Sign in with B3") : isCreatingOrder ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Loading quote..." })] })) : anyspendQuote ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Checkout" }), _jsx(ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) }), _jsx(TabsContent, { value: "fiat", children: _jsx("div", { className: "mt-6 flex w-full flex-col gap-6", children: _jsx(PanelOnrampPayment, { srcAmountOnRamp: anyspendQuote?.data?.currencyIn?.amountUsd || "0", recipientName: recipientEnsName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: false, selectedDstChainId: dstChainId, selectedDstToken: dstToken, anyspendQuote: anyspendQuote, globalAddress: currentWallet?.wallet?.address, onOrderCreated: (orderId) => setOrderId(orderId), onBack: () => setActiveTab("crypto"), orderType: orderType, nft: metadata.nftContract ? { ...metadata.nftContract, price: dstAmount } : undefined, tournament: metadata.tournament
+                                    ? { ...metadata.tournament, contractAddress: contractAddress, entryPriceOrFundAmount: dstAmount }
+                                    : undefined, payload: metadata.action
+                                    ? {
+                                        ...metadata,
+                                        amount: dstAmount,
+                                        data: encodedData,
+                                        to: contractAddress,
+                                        spenderAddress: spenderAddress
+                                    }
+                                    : undefined, recipientEnsName: recipientEnsName, recipientImageUrl: recipientImageUrl }) }) })] })] }));
+    // Return the TransitionPanel with all views
+    return (_jsx(StyleRoot, { children: _jsx(TransitionPanel, { activeIndex: orderId
+                ? oat
+                    ? PanelView.ORDER_DETAILS
+                    : PanelView.LOADING
+                : activePanel === PanelView.ORDER_DETAILS
+                    ? PanelView.CONFIRM_ORDER
+                    : activePanel, className: cn("w-full"), variants: {
+                enter: { x: 300, opacity: 0 },
+                center: { x: 0, opacity: 1 },
+                exit: { x: -300, opacity: 0 }
+            }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
+                _jsx("div", { className: "w-full", children: confirmOrderView }, "edit-recipient-view"),
+                _jsx("div", { className: "w-full", children: historyView }, "history-view"),
+                _jsx("div", { className: "w-full", children: orderDetailsView }, "order-details-view"),
+                _jsx("div", { className: "w-full", children: loadingView }, "loading-view")
+            ] }) }));
+}

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

@@ -0,0 +1,8 @@
+import { NftContract } from "../../../anyspend/types";
+export default function AnySpendNFT({ isMainnet, loadOrder, mode, recipientAddress, nftContract }: {
+    isMainnet?: boolean;
+    loadOrder?: string;
+    mode?: "modal" | "page";
+    recipientAddress?: string;
+    nftContract?: NftContract;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ALL_CHAINS, getChainName, getExplorerAddressUrl, OrderType } from "../../../anyspend";
+import { DEFAULT_NFT_CONTRACT } from "../../../anyspend/constants";
+import { GlareCard } from "../../../global-account/react/components/ui/glare-card";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../global-account/react/components/ui/popover";
+import { cn } from "../../../shared/utils";
+import { getIpfsUrl } from "../../../shared/utils/ipfs";
+import { formatDisplayNumber, formatTokenAmount } from "../../../shared/utils/number";
+import { AnimatePresence } from "framer-motion";
+import { MoreVertical } from "lucide-react";
+import { useState } from "react";
+import { b3 } from "viem/chains";
+import AnySpendCustom from "./AnySpendCustom";
+export default function AnySpendNFT({ isMainnet = true, loadOrder, mode = "modal", recipientAddress, nftContract = DEFAULT_NFT_CONTRACT }) {
+    const header = ({ anyspendPrice, isLoadingAnyspendPrice }) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative size-[200px]", children: [_jsx("div", { className: "absolute inset-0 scale-95 bg-black/30 blur-md" }), _jsxs(GlareCard, { className: "overflow-hidden", children: [_jsx("img", { src: getIpfsUrl(nftContract.imageUrl), alt: nftContract.name, className: "size-full object-cover" }), _jsx("div", { className: "absolute inset-0 rounded-xl border border-white/10" })] }), _jsx(DropdownMenu, { nftContract: nftContract })] }), _jsxs("div", { className: "from-b3-react-background to-as-on-surface-1 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t", children: [_jsx("div", { className: "h-[100px] w-full" }), _jsxs("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: [_jsx("span", { className: "font-sf-rounded text-2xl font-semibold", children: nftContract.name }), _jsx("div", { className: "flex w-fit items-center gap-1", children: anyspendPrice ? (_jsx(AnimatePresence, { mode: "wait", children: _jsx("div", { className: cn("text-as-primary group flex items-center text-3xl font-semibold transition-all", {
+                                            "opacity-0": isLoadingAnyspendPrice
+                                        }), children: formatDisplayNumber(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" }) }) })) : (_jsx("div", { className: "h-[36px] w-full" })) })] })] })] }));
+    return (_jsx(AnySpendCustom, { isMainnet: isMainnet, loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: OrderType.MintNFT, dstChainId: nftContract.chainId, dstToken: nftContract.currency, dstAmount: nftContract.price, contractAddress: nftContract.contractAddress, encodedData: "0x", metadata: { nftContract }, header: header }));
+}
+function DropdownMenu({ nftContract }) {
+    const [open, setOpen] = useState(false);
+    const chain = ALL_CHAINS[nftContract.chainId];
+    const nftUrl = getExplorerAddressUrl(nftContract.chainId, nftContract.contractAddress);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { className: "absolute bottom-3 right-3 z-10 flex items-center justify-center rounded-full bg-black/20 p-1 text-white hover:bg-black/30", "aria-label": "Open NFT menu", children: _jsx(MoreVertical, { className: "h-3 w-3" }) }) }), _jsx(PopoverContent, { align: "end", className: "bg-b3-react-background border-b3-react-border min-w-48 rounded-lg border p-0 shadow-md backdrop-blur-sm", children: _jsxs("div", { className: "pointer-events-auto flex w-full flex-col gap-2 py-2", children: [_jsxs("div", { className: "hover:bg-as-on-surface-3 flex cursor-default items-center gap-2 rounded px-2 text-sm", children: ["Native mint price:", _jsxs("span", { className: "font-semibold", children: [formatTokenAmount(BigInt(nftContract.price), nftContract.currency.decimals, 6, false), " ", nftContract.currency.symbol] })] }), _jsxs("div", { className: "hover:bg-as-on-surface-3 flex cursor-default items-center gap-2 rounded px-2", children: [_jsx("img", { src: chain?.logoUrl, className: cn("h-5 w-5", nftContract.chainId !== b3.id && "rounded-full") }), _jsxs("span", { className: "text-sm", children: ["Minted on ", _jsx("span", { className: "font-semibold", children: chain ? getChainName(nftContract.chainId) : "Unknown" })] })] }), _jsx("a", { href: nftUrl, target: "_blank", rel: "noopener noreferrer", className: "hover:bg-as-on-surface-3 text-as-primary flex items-center gap-2 rounded px-2 text-sm", children: "View NFT onchain" })] }) })] }));
+}

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

@@ -0,0 +1,7 @@
+import { NftContract } from "../../../anyspend/types";
+type AnySpendNFTButtonProps = {
+    nftContract?: NftContract;
+    recipientAddress?: string;
+};
+export declare function AnySpendNFTButton({ nftContract, recipientAddress }: AnySpendNFTButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../../global-account/react/components/ui/button";
+import { DEFAULT_NFT_CONTRACT } from "../../../anyspend/constants";
+import { useModalStore } from "../../../global-account/react/stores/useModalStore";
+export function AnySpendNFTButton({ nftContract = DEFAULT_NFT_CONTRACT, recipientAddress }) {
+    const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
+    const handleClick = () => {
+        setB3ModalContentType({
+            type: "anySpendNft",
+            nftContract,
+            recipientAddress
+        });
+        setB3ModalOpen(true);
+    };
+    return (_jsxs(Button, { onClick: handleClick, style: { backgroundColor: "#3368ef" }, className: "flex items-center gap-2 font-medium text-white", children: [_jsx("span", { children: "AnySpend NFT" }), _jsx("img", { src: "https://cdn.b3.fun/b3_logo_white.svg", alt: "B3 Logo", className: "h-5 w-6" })] }));
+}

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

@@ -0,0 +1,8 @@
+export default function AnySpendStakeB3({ isMainnet, loadOrder, mode, recipientAddress, stakeAmount, onSuccess }: {
+    isMainnet?: boolean;
+    loadOrder?: string;
+    mode?: "modal" | "page";
+    recipientAddress: string;
+    stakeAmount?: string;
+    onSuccess?: () => void;
+}): import("react/jsx-runtime").JSX.Element;