@b3dotfun/sdk 0.0.7-alpha.9 → 0.0.8-alpha.0

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { eqci, getDefaultToken, isCustomTxMetadata, isNftMetadata, isTournamentMetadata, NftType, OrderStatus, OrderType, RELAY_ETH_ADDRESS, USDC_BASE, useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useAnyspendTokenList, useGeoOnrampOptions } from "../../../anyspend/index.js";
-import { Badge, Button, ShinyButton, Skeleton, StyleRoot, Tabs, TabsContent, TabsList, TabTrigger, TextShimmer, TransitionPanel, useAccountWallet, useB3, useBsmntProfile, useHasMounted, useModalStore, useRouter, useSearchParamsSSR, useTokenBalancesByChain } from "../../../global-account/react/index.js";
+import { eqci, getDefaultToken, isCustomTxMetadata, isNftMetadata, isTournamentMetadata, NftType, OrderStatus, OrderType, RELAY_ETH_ADDRESS, USDC_BASE, } from "../../../anyspend/index.js";
+import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useAnyspendTokenList, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
+import { Badge, Button, Dialog, DialogContent, Input, ShinyButton, Skeleton, StyleRoot, Tabs, TabsContent, TabsList, TabTrigger, TextShimmer, Tooltip, TooltipContent, TooltipTrigger, TransitionPanel, useAccountWallet, useB3, useBsmntProfile, useHasMounted, useModalStore, useRouter, useSearchParamsSSR, useTokenBalancesByChain, } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/index.js";
 import centerTruncate from "../../../shared/utils/centerTruncate.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
@@ -23,7 +24,7 @@ var PanelView;
     PanelView[PanelView["ORDER_DETAILS"] = 2] = "ORDER_DETAILS";
     PanelView[PanelView["LOADING"] = 3] = "LOADING";
 })(PanelView || (PanelView = {}));
-function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChainId, dstToken, dstAmount, contractAddress, tokenId, contractType, encodedData, spenderAddress }) {
+function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChainId, dstToken, dstAmount, contractAddress, tokenId, contractType, encodedData, spenderAddress, }) {
     switch (orderType) {
         case OrderType.MintNFT: {
             return {
@@ -35,7 +36,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
                 price: dstAmount,
                 contractAddress: contractAddress,
                 tokenId: tokenId,
-                contractType: contractType
+                contractType: contractType,
             };
         }
         case OrderType.JoinTournament: {
@@ -46,7 +47,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
                 dstChain: dstChainId,
                 dstTokenAddress: dstToken.address,
                 price: dstAmount,
-                contractAddress: contractAddress
+                contractAddress: contractAddress,
             };
         }
         case OrderType.FundTournament: {
@@ -57,7 +58,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
                 dstChain: dstChainId,
                 dstTokenAddress: dstToken.address,
                 fundAmount: dstAmount,
-                contractAddress: contractAddress
+                contractAddress: contractAddress,
             };
         }
         case OrderType.Custom: {
@@ -71,8 +72,8 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
                     amount: dstAmount,
                     data: encodedData,
                     to: contractAddress,
-                    spenderAddress: spenderAddress
-                }
+                    spenderAddress: spenderAddress,
+                },
             };
         }
         default: {
@@ -80,7 +81,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
         }
     }
 }
-export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true }) {
+export 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 = useSearchParamsSSR();
@@ -89,14 +90,15 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
     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;
+    // Add state for recipient modal
+    const [isRecipientModalOpen, setIsRecipientModalOpen] = useState(false);
+    // Add state for custom recipient
+    const [customRecipientAddress, setCustomRecipientAddress] = useState(recipientAddressProps);
+    // Update recipient logic to use custom recipient
+    const recipientAddress = customRecipientAddress || currentWallet.address;
+    const recipientPropsProfile = useBsmntProfile({ address: recipientAddress });
+    const recipientEnsName = recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "");
+    const recipientImageUrl = 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
@@ -106,7 +108,7 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
     const { nativeTokens, fungibleTokens } = useTokenBalancesByChain({
         address: currentWallet?.wallet?.address || "",
         chainsIds: [srcChainId],
-        enabled: !!currentWallet?.wallet?.address && !!chainName
+        enabled: !!currentWallet?.wallet?.address && !!chainName,
     });
     // Find a token with a balance, prioritizing tokens the user already owns
     const getTokenWithBalance = useCallback(() => {
@@ -151,19 +153,32 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
         }
     }, [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,
-        tokenId: isNftMetadata(metadata) ? metadata.nftContract.tokenId : undefined,
-        contractType: isNftMetadata(metadata) ? metadata.nftContract.type : undefined,
-        encodedData: encodedData,
-        spenderAddress: spenderAddress
-    });
+    const getRelayQuoteRequest = useMemo(() => {
+        return generateGetRelayQuoteRequest({
+            orderType: orderType,
+            srcChainId: srcChainId,
+            srcToken: srcToken,
+            dstChainId: dstChainId,
+            dstToken: dstToken,
+            dstAmount: dstAmount,
+            contractAddress: contractAddress,
+            tokenId: isNftMetadata(metadata) ? metadata.nftContract.tokenId : undefined,
+            contractType: isNftMetadata(metadata) ? metadata.nftContract.type : undefined,
+            encodedData: encodedData,
+            spenderAddress: spenderAddress,
+        });
+    }, [
+        contractAddress,
+        dstAmount,
+        dstChainId,
+        dstToken,
+        encodedData,
+        metadata,
+        orderType,
+        spenderAddress,
+        srcChainId,
+        srcToken,
+    ]);
     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");
@@ -214,7 +229,7 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
         onError: error => {
             console.error(error);
             toast.error("Failed to create order: " + error.message);
-        }
+        },
     });
     const { createOrder: createOnrampOrder, isCreatingOrder: isCreatingOnrampOrder } = useAnyspendCreateOnrampOrder({
         onSuccess: data => {
@@ -223,7 +238,7 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
         onError: error => {
             console.error(error);
             toast.error("Failed to create order: " + error.message);
-        }
+        },
     });
     const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
     const handleCreateOrder = async (recipientAddress, onramp) => {
@@ -249,32 +264,35 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                             name: metadata.nftContract.name,
                             description: metadata.nftContract.description,
                             imageUrl: metadata.nftContract.imageUrl,
-                            nftPrice: dstAmount
+                            price: dstAmount,
                         }
                         : {
                             type: NftType.ERC721,
                             contractAddress: metadata.nftContract.contractAddress,
                             contractType: metadata.nftContract.type,
-                            nftPrice: dstAmount,
+                            price: dstAmount,
                             name: metadata.nftContract.name,
                             description: metadata.nftContract.description,
-                            imageUrl: metadata.nftContract.imageUrl
+                            imageUrl: metadata.nftContract.imageUrl,
                         }
                     : undefined,
                 tournament: isTournamentMetadata(metadata)
                     ? {
                         ...metadata.tournament,
                         contractAddress: contractAddress,
-                        entryPriceOrFundAmount: dstAmount
+                        entryPriceOrFundAmount: dstAmount,
+                    }
+                    : undefined,
+                // only populate payload for custom tx
+                payload: isCustomTxMetadata(metadata)
+                    ? {
+                        amount: dstAmount,
+                        data: encodedData,
+                        spenderAddress: spenderAddress,
+                        to: contractAddress,
+                        action: metadata.action,
                     }
                     : undefined,
-                payload: {
-                    amount: dstAmount,
-                    data: encodedData,
-                    spenderAddress: spenderAddress,
-                    to: contractAddress,
-                    action: isCustomTxMetadata(metadata) ? metadata.action : undefined
-                }
             };
             if (onramp) {
                 invariant(srcToken.address === USDC_BASE.address, "Selected src token is not USDC");
@@ -289,9 +307,9 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                         ipAddress: geoData?.ip,
                         redirectUrl: window.location.origin === "https://basement.fun"
                             ? "https://basement.fun/deposit"
-                            : window.location.origin
+                            : window.location.origin,
                     },
-                    expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0"
+                    expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
                 });
             }
             else {
@@ -312,11 +330,11 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                     ...b3,
                     rpc: "https://mainnet-rpc.b3.fun",
                     blockExplorers: [{ name: "B3 Explorer", url: "https://explorer.b3.fun/" }],
-                    testnet: undefined
+                    testnet: undefined,
                 },
                 partnerId: String(process.env.NEXT_PUBLIC_GLOBAL_ACCOUNTS_PARTNER_ID),
                 type: "signInWithB3",
-                showBackButton: false
+                showBackButton: false,
             });
             setB3ModalOpen(true);
             return;
@@ -334,18 +352,18 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
     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)"
+            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;
+                            : "Recipient" }), _jsx("div", { children: _jsxs(Button, { variant: "outline", className: "w-full justify-between border-none p-0", onClick: () => setIsRecipientModalOpen(true), 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: () => {
+    const orderDetailsView = (_jsxs("div", { className: cn("mx-auto flex max-h-[90dvh] w-full flex-col items-center gap-4 overflow-y-auto 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
@@ -355,21 +373,21 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                         } })] })), 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: {
+    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 max-h-[60dvh] w-full overflow-y-auto p-5", children: [_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" }) }), isOnrampSupported ? (_jsx(TabTrigger, { value: "fiat", children: _jsx("span", { className: "text-as-primary w-[140px]", children: "Pay with fiat" }) })) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(TabTrigger, { value: "fiat", disabled: true, children: _jsx("span", { className: "text-as-primary w-[140px]", children: "Pay with fiat" }) }) }), _jsx(TooltipContent, { children: _jsx("span", { className: "text-as-primary w-[140px]", children: "Fiat payments are not supported for this amount" }) })] }))] }), _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)"
+                                                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)"
+                                                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)"
+                                            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: isNftMetadata(metadata)
                                     ? metadata.nftContract.type === NftType.ERC1155
                                         ? {
@@ -379,7 +397,7 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                                             imageUrl: metadata.nftContract.imageUrl,
                                             name: metadata.nftContract.name,
                                             description: metadata.nftContract.description,
-                                            price: dstAmount
+                                            price: dstAmount,
                                         }
                                         : {
                                             type: NftType.ERC721,
@@ -387,7 +405,7 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                                             name: metadata.nftContract.name,
                                             description: metadata.nftContract.description,
                                             imageUrl: metadata.nftContract.imageUrl,
-                                            price: dstAmount
+                                            price: dstAmount,
                                         }
                                     : undefined, payload: isCustomTxMetadata(metadata)
                                     ? {
@@ -395,24 +413,26 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                                         amount: dstAmount,
                                         data: encodedData,
                                         to: contractAddress,
-                                        spenderAddress: spenderAddress
+                                        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")
-            ] }) }));
+    return (_jsxs(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"),
+                ] }), _jsx(Dialog, { open: isRecipientModalOpen, onOpenChange: setIsRecipientModalOpen, children: _jsx(DialogContent, { className: "w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { className: "text-as-primary font-semibold", children: "To address" }), _jsx(Input, { value: customRecipientAddress || "", onChange: e => setCustomRecipientAddress(e.target.value), placeholder: "Enter address", className: "h-12 rounded-lg", spellCheck: false }), _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full rounded-lg", onClick: () => {
+                                    setIsRecipientModalOpen(false);
+                                }, children: "Save" })] }) }) })] }));
 }

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

@@ -1,5 +1,5 @@
 import { NftContract } from "../../../anyspend/types";
-export declare function AnySpendNFT({ isMainnet, loadOrder, mode, recipientAddress, nftContract, onSuccess }: {
+export declare function AnySpendNFT({ isMainnet, loadOrder, mode, recipientAddress, nftContract, onSuccess, }: {
     isMainnet?: boolean;
     loadOrder?: string;
     mode?: "modal" | "page";

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

@@ -9,13 +9,13 @@ import { MoreVertical } from "lucide-react";
 import { useState } from "react";
 import { b3 } from "viem/chains";
 import { AnySpendCustom } from "./AnySpendCustom.js";
-export function AnySpendNFT({ isMainnet = true, loadOrder, mode = "modal", recipientAddress, nftContract, onSuccess }) {
-    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
+export function AnySpendNFT({ isMainnet = true, loadOrder, mode = "modal", recipientAddress, nftContract, onSuccess, }) {
+    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: {
             type: OrderType.MintNFT,
-            nftContract: nftContract
+            nftContract: nftContract,
         }, header: header, onSuccess: onSuccess }));
 }
 function DropdownMenu({ nftContract }) {

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

@@ -7,7 +7,7 @@ export function AnySpendNFTButton({ nftContract = DEFAULT_NFT_CONTRACT, recipien
         setB3ModalContentType({
             type: "anySpendNft",
             nftContract,
-            recipientAddress
+            recipientAddress,
         });
         setB3ModalOpen(true);
     };

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

@@ -1,4 +1,4 @@
-export declare function AnySpendStakeB3({ isMainnet, loadOrder, mode, recipientAddress, stakeAmount, onSuccess }: {
+export declare function AnySpendStakeB3({ isMainnet, loadOrder, mode, recipientAddress, stakeAmount, onSuccess, }: {
     isMainnet?: boolean;
     loadOrder?: string;
     mode?: "modal" | "page";

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ABI_ERC20_STAKING, B3_TOKEN, OrderType } from "../../../anyspend/index.js";
-import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, useChainSwitchWithAction, useHasMounted, useModalStore, useTokenBalance } from "../../../global-account/react/index.js";
+import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, useChainSwitchWithAction, useHasMounted, useModalStore, useTokenBalance, } from "../../../global-account/react/index.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
 import { motion } from "framer-motion";
 import invariant from "invariant";
@@ -16,7 +16,7 @@ import { SolIcon } from "./icons/SolIcon.js";
 import { UsdcIcon } from "./icons/USDCIcon.js";
 const basePublicClient = createPublicClient({
     chain: base,
-    transport: http()
+    transport: http(),
 });
 const ERC20Staking = "0xbf04200be3cbf371467a539706393c81c470f523";
 function generateEncodedDataForStakingB3(amount, beneficiary) {
@@ -24,16 +24,16 @@ function generateEncodedDataForStakingB3(amount, beneficiary) {
     const encodedData = encodeFunctionData({
         abi: ABI_ERC20_STAKING,
         functionName: "stake",
-        args: [BigInt(amount), beneficiary]
+        args: [BigInt(amount), beneficiary],
     });
     return encodedData;
 }
-export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", recipientAddress, stakeAmount, onSuccess }) {
+export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", recipientAddress, stakeAmount, onSuccess, }) {
     const hasMounted = useHasMounted();
     const { setB3ModalOpen } = useModalStore();
     // Fetch B3 token balance
-    const { formattedBalance: b3Balance, isLoading: isBalanceLoading, rawBalance: b3RawBalance } = useTokenBalance({
-        token: B3_TOKEN
+    const { formattedBalance: b3Balance, isLoading: isBalanceLoading, rawBalance: b3RawBalance, } = useTokenBalance({
+        token: B3_TOKEN,
     });
     // Wagmi hooks for direct staking
     const { address } = useAccount();
@@ -47,8 +47,8 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
     const { isLoading: isTxPending, isSuccess: isTxSuccess } = useWaitForTransactionReceipt({
         hash: stakingTxHash,
         query: {
-            structuralSharing: false // Disable to avoid BigInt serialization issues
-        }
+            structuralSharing: false, // Disable to avoid BigInt serialization issues
+        },
     });
     // Show success modal when transaction is confirmed
     useEffect(() => {
@@ -148,7 +148,7 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
                     address: B3_TOKEN.address,
                     abi: erc20Abi,
                     functionName: "allowance",
-                    args: [address, ERC20Staking]
+                    args: [address, ERC20Staking],
                 });
                 // If allowance is insufficient, request approval
                 if (allowance < BigInt(userStakeAmount)) {
@@ -157,7 +157,7 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
                         address: B3_TOKEN.address,
                         abi: erc20Abi,
                         functionName: "approve",
-                        args: [ERC20Staking, BigInt(userStakeAmount)]
+                        args: [ERC20Staking, BigInt(userStakeAmount)],
                     });
                     toast.info("Approval confirmed. Proceeding with stake...");
                 }
@@ -167,7 +167,7 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
                     address: ERC20Staking,
                     abi: ABI_ERC20_STAKING,
                     functionName: "stake",
-                    args: [BigInt(userStakeAmount), recipientAddress]
+                    args: [BigInt(userStakeAmount), recipientAddress],
                 });
                 setStakingTxHash(stakeHash);
                 toast.success("Staking transaction submitted!");
@@ -208,18 +208,18 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
         return (_jsx(StyleRoot, { children: _jsxs("div", { className: "bg-b3-react-background flex w-full flex-col items-center", children: [_jsxs("div", { className: "w-full px-4", children: [_jsx(motion.div, { initial: false, animate: {
                                     opacity: hasMounted ? 1 : 0,
                                     y: hasMounted ? 0 : 20,
-                                    filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)",
                                 }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative mx-auto size-48", children: _jsx("video", { autoPlay: true, muted: true, playsInline: true, className: "size-full", src: "https://cdn.b3.fun/b3-sphere-to-coin.mp4" }) }), _jsx(motion.div, { initial: false, animate: {
                                     opacity: hasMounted ? 1 : 0,
                                     y: hasMounted ? 0 : 20,
-                                    filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)",
                                 }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, children: _jsx("h2", { className: "font-sf-rounded font-neue-montreal-medium mb-1 text-center text-2xl font-semibold", children: (() => {
                                         const hasEnoughBalance = b3RawBalance && BigInt(debouncedUserStakeAmount || "0") <= b3RawBalance;
                                         return hasEnoughBalance || !debouncedAmount ? "Stake B3" : "Swap & Stake B3";
                                     })() }) })] }), _jsxs(motion.div, { initial: false, animate: {
                             opacity: hasMounted ? 1 : 0,
                             y: hasMounted ? 0 : 20,
-                            filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                            filter: hasMounted ? "blur(0px)" : "blur(10px)",
                         }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [_jsx("div", { className: "mb-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-as-primary/70 text-sm font-medium", children: "I want to stake" }), _jsxs("span", { className: "text-as-primary/50 flex items-center gap-1 text-sm", children: ["Available: ", isBalanceLoading ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : `${b3Balance} B3`] })] }) }), _jsxs("div", { className: "relative", children: [_jsx(Input, { onFocus: onFocusStakeAmountInput, type: "text", placeholder: "0.00", value: displayAmount, onChange: e => validateAndSetAmount(e.target.value), className: `h-14 px-4 text-lg ${!isAmountValid && displayAmount ? "border-as-red" : "border-b3-react-border"}` }), _jsx("div", { className: "font-pack absolute right-4 top-1/2 -translate-y-1/2 text-lg font-medium text-blue-500/70", children: "B3" })] }), !isAmountValid && displayAmount && _jsx("p", { className: "text-as-red mt-2 text-sm", children: validationError }), _jsx("div", { className: "mt-4", children: (() => {
                                     const hasEnoughBalance = b3RawBalance && BigInt(debouncedUserStakeAmount || "0") <= b3RawBalance;
                                     if (!hasEnoughBalance || !debouncedAmount) {
@@ -234,15 +234,15 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
         return (_jsx(StyleRoot, { children: _jsxs("div", { className: "bg-b3-react-background flex w-full flex-col items-center", children: [_jsxs("div", { className: "w-full p-4", children: [_jsxs(motion.div, { initial: false, animate: {
                                     opacity: hasMounted ? 1 : 0,
                                     y: hasMounted ? 0 : 20,
-                                    filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)",
                                 }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative mx-auto mb-4 size-[120px]", children: [_jsx("div", { className: "absolute inset-0 scale-95 rounded-[50%] bg-black/30 blur-md" }), _jsxs(GlareCardRounded, { className: "overflow-hidden rounded-full border-none", children: [_jsx("img", { alt: "b3 coin", loading: "lazy", width: "64", height: "64", decoding: "async", "data-nimg": "1", className: "size-full shrink-0 bg-transparent text-transparent", src: "https://cdn.b3.fun/b3-coin-3d.png" }), _jsx("div", { className: "absolute inset-0 rounded-[50%] border border-white/10" })] })] }), _jsx(motion.div, { initial: false, animate: {
                                     opacity: hasMounted ? 1 : 0,
                                     y: hasMounted ? 0 : 20,
-                                    filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)",
                                 }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, children: _jsxs("h2", { className: "font-sf-rounded mb-1 text-center text-2xl font-semibold", children: ["Staked ", formatTokenAmount(BigInt(userStakeAmount), 18), " B3"] }) })] }), _jsxs(motion.div, { initial: false, animate: {
                             opacity: hasMounted ? 1 : 0,
                             y: hasMounted ? 0 : 20,
-                            filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                            filter: hasMounted ? "blur(0px)" : "blur(10px)",
                         }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [_jsx("div", { className: "mb-6", children: _jsx("a", { href: `https://basescan.org/tx/${stakingTxHash}`, target: "_blank", rel: "noopener noreferrer", className: "text-as-primary/70 hover:text-as-primary block break-all text-center font-mono text-sm underline transition-colors", children: "View transaction" }) }), _jsx(Button, { onClick: () => {
                                     setB3ModalOpen(false);
                                     onSuccess?.();
@@ -251,6 +251,6 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
     const encodedData = generateEncodedDataForStakingB3(userStakeAmount, recipientAddress);
     return (_jsx(AnySpendCustom, { isMainnet: isMainnet, loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: OrderType.Custom, dstChainId: base.id, dstToken: B3_TOKEN, dstAmount: userStakeAmount, contractAddress: ERC20Staking, encodedData: encodedData, metadata: {
             type: OrderType.Custom,
-            action: "stake B3"
+            action: "stake B3",
         }, header: header, onSuccess: onSuccess, showRecipient: true }));
 }

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

@@ -5,14 +5,14 @@ import { formatDisplayNumber, formatTokenAmount } from "../../../shared/utils/nu
 import { AnimatePresence } from "framer-motion";
 import { AnySpendCustom } from "./AnySpendCustom.js";
 export function AnySpendTournament(props) {
-    const { isMainnet = true, mode = "modal", action, loadOrder, tournamentChainId, tournamentContractAddress, tournamentMetadata, onSuccess } = props;
+    const { isMainnet = true, mode = "modal", action, loadOrder, tournamentChainId, tournamentContractAddress, tournamentMetadata, onSuccess, } = props;
     const dstToken = action === "join" ? props.tournamentEntryToken : props.tournamentFundToken;
     const dstAmount = action === "join" ? props.tournamentEntryFee : props.tournamentFundAmount;
-    const header = ({ anyspendPrice, isLoadingAnyspendPrice }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "z-10 mt-[-100px] flex h-[270px] w-full items-end justify-center", children: _jsx("img", { src: "https://cdn.b3.fun/tournament-play.svg", alt: "Tournament Play", className: "h-[200px] w-[360px] object-cover object-center" }) }), _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: "flex w-full flex-col items-center gap-1 p-6 pt-0", children: [_jsxs("span", { className: "font-sf-rounded text-center text-lg font-semibold", children: [action === "join" ? "Pay entry fee to join " : "Pay to fund ", " ", tournamentMetadata.name] }), _jsx("div", { className: "mt-2 flex w-fit items-center gap-1", children: anyspendPrice ? (_jsx(AnimatePresence, { mode: "wait", children: _jsxs("div", { className: cn("text-as-primary group flex items-center text-2xl font-semibold transition-all", {
-                                            "opacity-0": isLoadingAnyspendPrice
+    const header = ({ anyspendPrice, isLoadingAnyspendPrice, }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "z-10 mt-[-100px] flex h-[270px] w-full items-end justify-center", children: _jsx("img", { src: "https://cdn.b3.fun/tournament-play.svg", alt: "Tournament Play", className: "h-[200px] w-[360px] object-cover object-center" }) }), _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: "flex w-full flex-col items-center gap-1 p-6 pt-0", children: [_jsxs("span", { className: "font-sf-rounded text-center text-lg font-semibold", children: [action === "join" ? "Pay entry fee to join " : "Pay to fund ", " ", tournamentMetadata.name] }), _jsx("div", { className: "mt-2 flex w-fit items-center gap-1", children: anyspendPrice ? (_jsx(AnimatePresence, { mode: "wait", children: _jsxs("div", { className: cn("text-as-primary group flex items-center text-2xl font-semibold transition-all", {
+                                            "opacity-0": isLoadingAnyspendPrice,
                                         }), children: [formatDisplayNumber(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" }), " (", formatTokenAmount(BigInt(dstAmount), dstToken.decimals, 6, true), " ", dstToken.symbol, ")"] }) })) : (_jsx("div", { className: "h-[32px] w-full" })) })] })] })] }));
     return (_jsx(AnySpendCustom, { isMainnet: isMainnet, loadOrder: loadOrder, mode: mode, recipientAddress: action === "join" ? props.joinFor : undefined, orderType: action === "join" ? OrderType.JoinTournament : OrderType.FundTournament, dstChainId: tournamentChainId, dstToken: dstToken, dstAmount: dstAmount, contractAddress: tournamentContractAddress, encodedData: "0x", metadata: {
             type: action === "join" ? OrderType.JoinTournament : OrderType.FundTournament,
-            tournament: tournamentMetadata
+            tournament: tournamentMetadata,
         }, header: header, onSuccess: onSuccess, showRecipient: action === "join" }));
 }

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

@@ -0,0 +1,8 @@
+import { GenerateSigMintResponse } from "../../types/signature-mint";
+export declare function AnyspendSignatureMint({ loadOrder, mode, signatureData, imageUrl, onSuccess, }: {
+    loadOrder?: string;
+    mode?: "modal" | "page";
+    signatureData: GenerateSigMintResponse;
+    imageUrl?: string;
+    onSuccess?: (txHash?: string) => void;
+}): import("react/jsx-runtime").JSX.Element;