@b3dotfun/sdk 0.0.7 → 0.0.8

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

@@ -6,10 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnySpendCustom = AnySpendCustom;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../anyspend");
-const react_1 = require("../../../global-account/react");
+const react_1 = require("../../../anyspend/react");
 const react_2 = require("../../../global-account/react");
-const react_3 = require("../../../global-account/react");
-const react_4 = require("../../../global-account/react");
 const utils_1 = require("../../../shared/utils");
 const centerTruncate_1 = __importDefault(require("../../../shared/utils/centerTruncate"));
 const number_1 = require("../../../shared/utils/number");
@@ -17,7 +15,7 @@ const simplehash_1 = require("../../../shared/utils/simplehash");
 const framer_motion_1 = require("framer-motion");
 const invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
-const react_5 = require("react");
+const react_3 = require("react");
 const sonner_1 = require("sonner");
 const chains_1 = require("viem/chains");
 const OrderDetails_1 = require("./common/OrderDetails");
@@ -32,7 +30,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, encodedData, spenderAddress }) {
+function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChainId, dstToken, dstAmount, contractAddress, tokenId, contractType, encodedData, spenderAddress, }) {
     switch (orderType) {
         case anyspend_1.OrderType.MintNFT: {
             return {
@@ -42,7 +40,9 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
                 dstChain: dstChainId,
                 dstTokenAddress: dstToken.address,
                 price: dstAmount,
-                contractAddress: contractAddress
+                contractAddress: contractAddress,
+                tokenId: tokenId,
+                contractType: contractType,
             };
         }
         case anyspend_1.OrderType.JoinTournament: {
@@ -53,7 +53,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
                 dstChain: dstChainId,
                 dstTokenAddress: dstToken.address,
                 price: dstAmount,
-                contractAddress: contractAddress
+                contractAddress: contractAddress,
             };
         }
         case anyspend_1.OrderType.FundTournament: {
@@ -64,7 +64,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
                 dstChain: dstChainId,
                 dstTokenAddress: dstToken.address,
                 fundAmount: dstAmount,
-                contractAddress: contractAddress
+                contractAddress: contractAddress,
             };
         }
         case anyspend_1.OrderType.Custom: {
@@ -78,8 +78,8 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
                     amount: dstAmount,
                     data: encodedData,
                     to: contractAddress,
-                    spenderAddress: spenderAddress
-                }
+                    spenderAddress: spenderAddress,
+                },
             };
         }
         default: {
@@ -87,36 +87,37 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
         }
     }
 }
-function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true }) {
+function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, }) {
     const { setB3ModalOpen, setB3ModalContentType } = (0, react_2.useModalStore)();
     const hasMounted = (0, react_2.useHasMounted)();
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
-    const [activePanel, setActivePanel] = (0, react_5.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
-    const [activeTab, setActiveTab] = (0, react_5.useState)("crypto");
+    const [activePanel, setActivePanel] = (0, react_3.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
+    const [activeTab, setActiveTab] = (0, react_3.useState)("crypto");
     // Get current user's wallet
     const currentWallet = (0, react_2.useAccountWallet)();
-    const recipientPropsProfile = (0, react_2.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] = (0, react_5.useState)(loadOrder);
-    const [srcChainId, setSrcChainId] = (0, react_5.useState)(isMainnet ? chains_1.base.id : chains_1.baseSepolia.id);
+    // Add state for recipient modal
+    const [isRecipientModalOpen, setIsRecipientModalOpen] = (0, react_3.useState)(false);
+    // Add state for custom recipient
+    const [customRecipientAddress, setCustomRecipientAddress] = (0, react_3.useState)(recipientAddressProps);
+    // Update recipient logic to use custom recipient
+    const recipientAddress = customRecipientAddress || currentWallet.address;
+    const recipientPropsProfile = (0, react_2.useBsmntProfile)({ address: recipientAddress });
+    const recipientEnsName = recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "");
+    const recipientImageUrl = recipientPropsProfile.data?.avatar || currentWallet.wallet.meta?.icon;
+    const [orderId, setOrderId] = (0, react_3.useState)(loadOrder);
+    const [srcChainId, setSrcChainId] = (0, react_3.useState)(isMainnet ? chains_1.base.id : chains_1.baseSepolia.id);
     // Get token list for token balance check
-    const chainName = (0, react_5.useMemo)(() => (0, simplehash_1.simpleHashChainToChainName)(srcChainId), [srcChainId]);
-    const { data: tokenList } = (0, anyspend_1.useAnyspendTokenList)(isMainnet, srcChainId, "");
+    const chainName = (0, react_3.useMemo)(() => (0, simplehash_1.simpleHashChainToChainName)(srcChainId), [srcChainId]);
+    const { data: tokenList } = (0, react_1.useAnyspendTokenList)(isMainnet, srcChainId, "");
     // Get token balances for the selected chain
     const { nativeTokens, fungibleTokens } = (0, react_2.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 = (0, react_5.useCallback)(() => {
+    const getTokenWithBalance = (0, react_3.useCallback)(() => {
         if (!currentWallet?.wallet?.address || (!nativeTokens && !fungibleTokens) || !tokenList) {
             return (0, anyspend_1.getDefaultToken)(srcChainId);
         }
@@ -146,10 +147,10 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
         return (0, anyspend_1.getDefaultToken)(srcChainId);
     }, [currentWallet?.wallet?.address, nativeTokens, fungibleTokens, tokenList, srcChainId]);
     // Set the selected token with preference for tokens user owns
-    const [srcToken, setSrcToken] = (0, react_5.useState)((0, anyspend_1.getDefaultToken)(srcChainId));
-    const [dirtySelectSrcToken, setDirtySelectSrcToken] = (0, react_5.useState)(false);
+    const [srcToken, setSrcToken] = (0, react_3.useState)((0, anyspend_1.getDefaultToken)(srcChainId));
+    const [dirtySelectSrcToken, setDirtySelectSrcToken] = (0, react_3.useState)(false);
     // Update token when chain changes or token balances are loaded
-    (0, react_5.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         if (tokenList?.length && !dirtySelectSrcToken) {
             const tokenWithBalance = getTokenWithBalance();
             if ((0, anyspend_1.eqci)(tokenWithBalance.address, dstToken.address) === false) {
@@ -157,22 +158,37 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
             }
         }
     }, [srcChainId, tokenList, getTokenWithBalance, nativeTokens, fungibleTokens, dirtySelectSrcToken, dstToken.address]);
-    const { account: isAuthenticated } = (0, react_1.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 } = (0, anyspend_1.useAnyspendQuote)(isMainnet, getRelayQuoteRequest);
+    const { account: isAuthenticated } = (0, react_2.useB3)();
+    const getRelayQuoteRequest = (0, react_3.useMemo)(() => {
+        return generateGetRelayQuoteRequest({
+            orderType: orderType,
+            srcChainId: srcChainId,
+            srcToken: srcToken,
+            dstChainId: dstChainId,
+            dstToken: dstToken,
+            dstAmount: dstAmount,
+            contractAddress: contractAddress,
+            tokenId: (0, anyspend_1.isNftMetadata)(metadata) ? metadata.nftContract.tokenId : undefined,
+            contractType: (0, anyspend_1.isNftMetadata)(metadata) ? metadata.nftContract.type : undefined,
+            encodedData: encodedData,
+            spenderAddress: spenderAddress,
+        });
+    }, [
+        contractAddress,
+        dstAmount,
+        dstChainId,
+        dstToken,
+        encodedData,
+        metadata,
+        orderType,
+        spenderAddress,
+        srcChainId,
+        srcToken,
+    ]);
+    const { anyspendQuote, isLoadingAnyspendQuote } = (0, react_1.useAnyspendQuote)(isMainnet, getRelayQuoteRequest);
     // Get geo data and onramp options (after quote is available)
-    const { geoData, isOnrampSupported } = (0, anyspend_1.useGeoOnrampOptions)(isMainnet, anyspendQuote?.data?.currencyIn?.amountUsd || "0");
-    const { orderAndTransactions: oat } = (0, anyspend_1.useAnyspendOrderAndTransactions)(isMainnet, orderId);
+    const { geoData, isOnrampSupported } = (0, react_1.useGeoOnrampOptions)(isMainnet, anyspendQuote?.data?.currencyIn?.amountUsd || "0");
+    const { orderAndTransactions: oat } = (0, react_1.useAnyspendOrderAndTransactions)(isMainnet, orderId);
     const onSelectOrder = (selectedOrderId) => {
         setActivePanel(PanelView.ORDER_DETAILS);
         setOrderId(selectedOrderId);
@@ -181,11 +197,11 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
         params.set("orderId", selectedOrderId);
         router.push(`${window.location.pathname}?${params.toString()}`);
     };
-    const [srcAmount, setSrcAmount] = (0, react_5.useState)(null);
+    const [srcAmount, setSrcAmount] = (0, react_3.useState)(null);
     const formattedSrcAmount = srcAmount ? (0, number_1.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.
-    (0, react_5.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         if (activeTab === "fiat") {
             setSrcChainId(chains_1.base.id);
             setSrcToken(anyspend_1.USDC_BASE);
@@ -193,7 +209,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
         }
     }, [activeTab]);
     // Update dependent amount when relay price changes
-    (0, react_5.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         if (anyspendQuote?.data &&
             anyspendQuote.data.currencyIn?.amount &&
             anyspendQuote.data.currencyIn?.currency?.decimals) {
@@ -205,30 +221,30 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
             setSrcAmount(null);
         }
     }, [anyspendQuote?.data]);
-    (0, react_5.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         if (oat?.data?.order.status === anyspend_1.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 } = (0, anyspend_1.useAnyspendCreateOrder)({
+    const { createOrder: createRegularOrder, isCreatingOrder: isCreatingRegularOrder } = (0, react_1.useAnyspendCreateOrder)({
         onSuccess: data => {
             setOrderId(data.data.id);
         },
         onError: error => {
             console.error(error);
             sonner_1.toast.error("Failed to create order: " + error.message);
-        }
+        },
     });
-    const { createOrder: createOnrampOrder, isCreatingOrder: isCreatingOnrampOrder } = (0, anyspend_1.useAnyspendCreateOnrampOrder)({
+    const { createOrder: createOnrampOrder, isCreatingOrder: isCreatingOnrampOrder } = (0, react_1.useAnyspendCreateOnrampOrder)({
         onSuccess: data => {
             setOrderId(data.data.id);
         },
         onError: error => {
             console.error(error);
             sonner_1.toast.error("Failed to create order: " + error.message);
-        }
+        },
     });
     const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
     const handleCreateOrder = async (recipientAddress, onramp) => {
@@ -245,22 +261,44 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                 srcAmount: srcAmount.toString(),
                 recipientAddress,
                 creatorAddress: currentWallet?.wallet?.address,
-                nft: {
-                    ...metadata.nftContract,
-                    type: anyspend_1.NftType.ERC721
-                },
-                tournament: {
-                    ...metadata.tournament,
-                    contractAddress: contractAddress,
-                    entryPriceOrFundAmount: dstAmount
-                },
-                payload: {
-                    amount: dstAmount,
-                    data: encodedData,
-                    spenderAddress: spenderAddress,
-                    to: contractAddress,
-                    action: metadata.action
-                }
+                nft: (0, anyspend_1.isNftMetadata)(metadata)
+                    ? metadata.nftContract.type === anyspend_1.NftType.ERC1155
+                        ? {
+                            type: anyspend_1.NftType.ERC1155,
+                            contractAddress: metadata.nftContract.contractAddress,
+                            tokenId: metadata.nftContract.tokenId,
+                            name: metadata.nftContract.name,
+                            description: metadata.nftContract.description,
+                            imageUrl: metadata.nftContract.imageUrl,
+                            price: dstAmount,
+                        }
+                        : {
+                            type: anyspend_1.NftType.ERC721,
+                            contractAddress: metadata.nftContract.contractAddress,
+                            contractType: metadata.nftContract.type,
+                            price: dstAmount,
+                            name: metadata.nftContract.name,
+                            description: metadata.nftContract.description,
+                            imageUrl: metadata.nftContract.imageUrl,
+                        }
+                    : undefined,
+                tournament: (0, anyspend_1.isTournamentMetadata)(metadata)
+                    ? {
+                        ...metadata.tournament,
+                        contractAddress: contractAddress,
+                        entryPriceOrFundAmount: dstAmount,
+                    }
+                    : undefined,
+                // only populate payload for custom tx
+                payload: (0, anyspend_1.isCustomTxMetadata)(metadata)
+                    ? {
+                        amount: dstAmount,
+                        data: encodedData,
+                        spenderAddress: spenderAddress,
+                        to: contractAddress,
+                        action: metadata.action,
+                    }
+                    : undefined,
             };
             if (onramp) {
                 (0, invariant_1.default)(srcToken.address === anyspend_1.USDC_BASE.address, "Selected src token is not USDC");
@@ -275,9 +313,9 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                         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 {
@@ -298,11 +336,11 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                     ...chains_1.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;
@@ -320,18 +358,18 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
     const recipientSection = showRecipient && isAuthenticated && recipientAddress ? ((0, jsx_runtime_1.jsxs)(framer_motion_1.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: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-react-foreground", children: orderType === anyspend_1.OrderType.Swap
                     ? "Recipient"
                     : orderType === anyspend_1.OrderType.MintNFT
                         ? "Receive NFT at"
                         : orderType === anyspend_1.OrderType.JoinTournament
                             ? "Join for"
-                            : "Recipient" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "outline", className: "w-full justify-between border-none p-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-1", children: [recipientEnsName && (0, jsx_runtime_1.jsxs)("span", { children: ["@", recipientEnsName] }), (0, jsx_runtime_1.jsx)("span", { children: (0, centerTruncate_1.default)(recipientAddress) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) })] })) : null;
+                            : "Recipient" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "outline", className: "w-full justify-between border-none p-0", onClick: () => setIsRecipientModalOpen(true), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-1", children: [recipientEnsName && (0, jsx_runtime_1.jsxs)("span", { children: ["@", recipientEnsName] }), (0, jsx_runtime_1.jsx)("span", { children: (0, centerTruncate_1.default)(recipientAddress) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) })] })) : null;
     const historyView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background"), children: [oat && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: oat.data.order }), (0, jsx_runtime_1.jsx)(OrderDetails_1.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 = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: oat.data.order }), (0, jsx_runtime_1.jsx)(OrderDetails_1.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
@@ -339,49 +377,68 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                             params.delete("orderId");
                             router.push(`${window.location.pathname}?${params.toString()}`);
                         } })] })), mode === "page" && (0, jsx_runtime_1.jsx)("div", { className: "h-12" })] }));
-    const loadingView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background"), children: [(0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-react-foreground size-4 animate-spin" }), (0, jsx_runtime_1.jsx)(react_3.TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-8 w-48" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "ml-4 h-8 w-32" })] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mt-4 h-8 w-24" })] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mb-4 h-12 w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)(react_2.Skeleton, { className: "rounded-lg bg-white/5 p-6 pb-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "size-[200px]" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3 flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsx)("div", { className: "size-5 rounded-full" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 w-full" }, i))) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-muted/30 mt-8 w-full rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mb-3 h-4 w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 flex-1" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 flex-1" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-3", children: [1, 2, 3, 4, 5].map(i => ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-32" })] }, i))) }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 w-full" }), mode === "page" && (0, jsx_runtime_1.jsx)("div", { className: "h-12" })] }));
+    const loadingView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background"), children: [(0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-react-foreground size-4 animate-spin" }), (0, jsx_runtime_1.jsx)(react_2.TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-8 w-48" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "ml-4 h-8 w-32" })] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mt-4 h-8 w-24" })] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mb-4 h-12 w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)(react_2.Skeleton, { className: "rounded-lg bg-white/5 p-6 pb-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "size-[200px]" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3 flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsx)("div", { className: "size-5 rounded-full" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 w-full" }, i))) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-muted/30 mt-8 w-full rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mb-3 h-4 w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 flex-1" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 flex-1" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-3", children: [1, 2, 3, 4, 5].map(i => ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-32" })] }, i))) }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 w-full" }), mode === "page" && (0, jsx_runtime_1.jsx)("div", { className: "h-12" })] }));
     // Confirm order view.
-    const confirmOrderView = ((0, jsx_runtime_1.jsxs)("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_2.Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background w-full p-5", children: [isOnrampSupported || activeTab === "fiat" ? ((0, jsx_runtime_1.jsxs)(react_2.TabsList, { hideGradient: true, className: "justify-center", children: [(0, jsx_runtime_1.jsx)(react_2.TabTrigger, { value: "crypto", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Pay with crypto" }) }), (0, jsx_runtime_1.jsx)(react_2.TabTrigger, { value: "fiat", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Pay with fiat" }) })] })) : null, (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "crypto", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: false, animate: {
+    const confirmOrderView = ((0, jsx_runtime_1.jsxs)("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_2.Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [(0, jsx_runtime_1.jsxs)(react_2.TabsList, { hideGradient: true, className: "justify-center", children: [(0, jsx_runtime_1.jsx)(react_2.TabTrigger, { value: "crypto", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Pay with crypto" }) }), isOnrampSupported ? ((0, jsx_runtime_1.jsx)(react_2.TabTrigger, { value: "fiat", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Pay with fiat" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(react_2.TabTrigger, { value: "fiat", disabled: true, children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Pay with fiat" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Fiat payments are not supported for this amount" }) })] }))] }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "crypto", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(framer_motion_1.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: [(0, jsx_runtime_1.jsx)("div", { className: "font-medium", children: "Pay with" }), (0, jsx_runtime_1.jsx)(OrderToken_1.OrderToken, { address: currentWallet?.wallet?.address, context: "from", chainId: srcChainId, setChainId: setSrcChainId, token: srcToken, setToken: token => {
                                                         setDirtySelectSrcToken(true);
                                                         setSrcToken(token);
                                                     }, requiredAmount: srcAmount || undefined })] }), (0, jsx_runtime_1.jsxs)(framer_motion_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Price" }), (0, jsx_runtime_1.jsxs)("h2", { className: (0, utils_1.cn)("text-as-primary text-2xl font-semibold"), children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] })] }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(framer_motion_1.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: (0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading quote..." })] })) : anyspendQuote ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Checkout" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "fiat", children: (0, jsx_runtime_1.jsx)("div", { className: "mt-6 flex w-full flex-col gap-6", children: (0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.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
+                                            filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                                        }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: (0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading quote..." })] })) : anyspendQuote ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Checkout" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "fiat", children: (0, jsx_runtime_1.jsx)("div", { className: "mt-6 flex w-full flex-col gap-6", children: (0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.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: (0, anyspend_1.isNftMetadata)(metadata)
+                                    ? metadata.nftContract.type === anyspend_1.NftType.ERC1155
+                                        ? {
+                                            type: anyspend_1.NftType.ERC1155,
+                                            contractAddress: metadata.nftContract.contractAddress,
+                                            tokenId: metadata.nftContract.tokenId,
+                                            imageUrl: metadata.nftContract.imageUrl,
+                                            name: metadata.nftContract.name,
+                                            description: metadata.nftContract.description,
+                                            price: dstAmount,
+                                        }
+                                        : {
+                                            type: anyspend_1.NftType.ERC721,
+                                            contractAddress: metadata.nftContract.contractAddress,
+                                            name: metadata.nftContract.name,
+                                            description: metadata.nftContract.description,
+                                            imageUrl: metadata.nftContract.imageUrl,
+                                            price: dstAmount,
+                                        }
+                                    : undefined, payload: (0, anyspend_1.isCustomTxMetadata)(metadata)
                                     ? {
                                         ...metadata,
                                         amount: dstAmount,
                                         data: encodedData,
                                         to: contractAddress,
-                                        spenderAddress: spenderAddress
+                                        spenderAddress: spenderAddress,
                                     }
                                     : undefined, recipientEnsName: recipientEnsName, recipientImageUrl: recipientImageUrl }) }) })] })] }));
     // Return the TransitionPanel with all views
-    return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)(react_4.TransitionPanel, { activeIndex: orderId
-                ? oat
-                    ? PanelView.ORDER_DETAILS
-                    : PanelView.LOADING
-                : activePanel === PanelView.ORDER_DETAILS
-                    ? PanelView.CONFIRM_ORDER
-                    : activePanel, className: (0, utils_1.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: [
-                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: confirmOrderView }, "edit-recipient-view"),
-                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: historyView }, "history-view"),
-                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: orderDetailsView }, "order-details-view"),
-                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: loadingView }, "loading-view")
-            ] }) }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.StyleRoot, { children: [(0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
+                    ? oat
+                        ? PanelView.ORDER_DETAILS
+                        : PanelView.LOADING
+                    : activePanel === PanelView.ORDER_DETAILS
+                        ? PanelView.CONFIRM_ORDER
+                        : activePanel, className: (0, utils_1.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: [
+                    (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: confirmOrderView }, "edit-recipient-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: historyView }, "history-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: orderDetailsView }, "order-details-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: loadingView }, "loading-view"),
+                ] }), (0, jsx_runtime_1.jsx)(react_2.Dialog, { open: isRecipientModalOpen, onOpenChange: setIsRecipientModalOpen, children: (0, jsx_runtime_1.jsx)(react_2.DialogContent, { className: "w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: "To address" }), (0, jsx_runtime_1.jsx)(react_2.Input, { value: customRecipientAddress || "", onChange: e => setCustomRecipientAddress(e.target.value), placeholder: "Enter address", className: "h-12 rounded-lg", spellCheck: false }), (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full rounded-lg", onClick: () => {
+                                    setIsRecipientModalOpen(false);
+                                }, children: "Save" })] }) }) })] }));
 }

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

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

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnySpendNFT = AnySpendNFT;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../anyspend");
-const constants_1 = require("../../../anyspend/constants");
 const react_1 = require("../../../global-account/react");
 const utils_1 = require("../../../shared/utils");
 const ipfs_1 = require("../../../shared/utils/ipfs");
@@ -13,11 +12,14 @@ const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
 const chains_1 = require("viem/chains");
 const AnySpendCustom_1 = require("./AnySpendCustom");
-function AnySpendNFT({ isMainnet = true, loadOrder, mode = "modal", recipientAddress, nftContract = constants_1.DEFAULT_NFT_CONTRACT }) {
-    const header = ({ anyspendPrice, isLoadingAnyspendPrice }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative size-[200px]", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 scale-95 bg-black/30 blur-md" }), (0, jsx_runtime_1.jsxs)(react_1.GlareCard, { className: "overflow-hidden", children: [(0, jsx_runtime_1.jsx)("img", { src: (0, ipfs_1.getIpfsUrl)(nftContract.imageUrl), alt: nftContract.name, className: "size-full object-cover" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-xl border border-white/10" })] }), (0, jsx_runtime_1.jsx)(DropdownMenu, { nftContract: nftContract })] }), (0, jsx_runtime_1.jsxs)("div", { className: "from-b3-react-background to-as-on-surface-1 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-[100px] w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-sf-rounded text-2xl font-semibold", children: nftContract.name }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-fit items-center gap-1", children: anyspendPrice ? ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-as-primary group flex items-center text-3xl font-semibold transition-all", {
-                                            "opacity-0": isLoadingAnyspendPrice
+function AnySpendNFT({ isMainnet = true, loadOrder, mode = "modal", recipientAddress, nftContract, onSuccess, }) {
+    const header = ({ anyspendPrice, isLoadingAnyspendPrice, }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative size-[200px]", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 scale-95 bg-black/30 blur-md" }), (0, jsx_runtime_1.jsxs)(react_1.GlareCard, { className: "overflow-hidden", children: [(0, jsx_runtime_1.jsx)("img", { src: (0, ipfs_1.getIpfsUrl)(nftContract.imageUrl), alt: nftContract.name, className: "size-full object-cover" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-xl border border-white/10" })] }), (0, jsx_runtime_1.jsx)(DropdownMenu, { nftContract: nftContract })] }), (0, jsx_runtime_1.jsxs)("div", { className: "from-b3-react-background to-as-on-surface-1 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-[100px] w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-sf-rounded text-2xl font-semibold", children: nftContract.name }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-fit items-center gap-1", children: anyspendPrice ? ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-as-primary group flex items-center text-3xl font-semibold transition-all", {
+                                            "opacity-0": isLoadingAnyspendPrice,
                                         }), children: (0, number_1.formatDisplayNumber)(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" }) }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-[36px] w-full" })) })] })] })] }));
-    return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { isMainnet: isMainnet, loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: anyspend_1.OrderType.MintNFT, dstChainId: nftContract.chainId, dstToken: nftContract.currency, dstAmount: nftContract.price, contractAddress: nftContract.contractAddress, encodedData: "0x", metadata: { nftContract }, header: header }));
+    return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { isMainnet: isMainnet, loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: anyspend_1.OrderType.MintNFT, dstChainId: nftContract.chainId, dstToken: nftContract.currency, dstAmount: nftContract.price, contractAddress: nftContract.contractAddress, encodedData: "0x", metadata: {
+            type: anyspend_1.OrderType.MintNFT,
+            nftContract: nftContract,
+        }, header: header, onSuccess: onSuccess }));
 }
 function DropdownMenu({ nftContract }) {
     const [open, setOpen] = (0, react_2.useState)(false);

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

@@ -10,7 +10,7 @@ function AnySpendNFTButton({ nftContract = constants_1.DEFAULT_NFT_CONTRACT, rec
         setB3ModalContentType({
             type: "anySpendNft",
             nftContract,
-            recipientAddress
+            recipientAddress,
         });
         setB3ModalOpen(true);
     };

package/dist/cjs/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";