@b3dotfun/sdk 0.0.7-alpha.7 → 0.0.7-alpha.8

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VENDOR_DISPLAY_NAMES = exports.PAYMENT_METHOD_ICONS = exports.STRIPE_CONFIG = exports.DEFAULT_NFT_CONTRACT = exports.NFT_CONTRACTS = exports.USDC_BASE = exports.B3_TOKEN = exports.SOLANA_TOKEN_2022_PROGRAM_ID = exports.SOLANA_ASSOCIATED_TOKEN_ACCOUNT_PROGRAM_ID = exports.RELAY_SOLANA_MAINNET_CHAIN_ID = exports.RELAY_SOL_ADDRESS = exports.RELAY_ETH_ADDRESS = exports.ANYSPEND_TESTNET_BASE_URL = exports.ANYSPEND_MAINNET_BASE_URL = void 0;
+const types_1 = require("../../anyspend/types");
 const chains_1 = require("viem/chains");
 exports.ANYSPEND_MAINNET_BASE_URL = process.env.NEXT_PUBLIC_ANYSPEND_BASE_URL || "https://mainnet.anyspend.com";
 exports.ANYSPEND_TESTNET_BASE_URL = process.env.NEXT_PUBLIC_ANYSPEND_BASE_URL || "https://testnet.anyspend.com";
@@ -39,7 +40,8 @@ exports.NFT_CONTRACTS = [
         imageUrl: "https://storage.googleapis.com/nftimagebucket/base/tokens/0x80f0e6644723abb03aa8867d21e32bd854b2a2d9/preview/TVRjME1EUTRORFl4T0E9PV8zNjcy.jpg",
         name: "Downhill Ski",
         description: "Downhill Ski",
-        tokenId: null
+        tokenId: null,
+        type: types_1.NftType.ERC721
     },
     {
         chainId: chains_1.base.id,
@@ -50,7 +52,8 @@ exports.NFT_CONTRACTS = [
         imageUrl: "https://cdn.b3.fun/game-weapon-demo.png",
         name: "Eclipse Venom",
         description: "The Eclipse Venom's crystalline blade channels imprisoned astral toxins through swirling currents of violet and teal light, synchronizing with its wielder's heartbeat for strikes that bypass conventional armor. Wounds from this otherworldly weapon resist healing as victims describe being consumed from within by liquid darkness, their final moments filled with visions of infinite cosmic depths.",
-        tokenId: null
+        tokenId: null,
+        type: types_1.NftType.ERC721
     }
 ];
 exports.DEFAULT_NFT_CONTRACT = exports.NFT_CONTRACTS[1];

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

@@ -1,6 +1,7 @@
 export * from "./react/hooks";
 export * from "./react/providers/AnyspendProvider";
 export * from "./types";
+export * from "./types/metadata";
 export * from "./utils/address";
 export * from "./utils/chain";
 export * from "./utils/format";

package/dist/cjs/anyspend/index.js

@@ -20,6 +20,7 @@ __exportStar(require("./react/hooks"), exports);
 __exportStar(require("./react/providers/AnyspendProvider"), exports);
 // Types
 __exportStar(require("./types"), exports);
+__exportStar(require("./types/metadata"), exports);
 // Utils
 __exportStar(require("./utils/address"), exports);
 __exportStar(require("./utils/chain"), exports);

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

@@ -6,20 +6,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnySpendBuySpin = AnySpendBuySpin;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../anyspend");
-const supported_1 = require("../../../shared/constants/chains/supported");
-const EthIcon_1 = require("./icons/EthIcon");
-const SolIcon_1 = require("./icons/SolIcon");
-const USDCIcon_1 = require("./icons/USDCIcon");
 const react_1 = require("../../../global-account/react");
-const react_2 = require("../../../global-account/react");
+const supported_1 = require("../../../shared/constants/chains/supported");
 const framer_motion_1 = require("framer-motion");
 const invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
-const react_3 = require("react");
+const react_2 = require("react");
 const sonner_1 = require("sonner");
 const viem_1 = require("viem");
 const wagmi_1 = require("wagmi");
 const AnySpendCustom_1 = require("./AnySpendCustom");
+const EthIcon_1 = require("./icons/EthIcon");
+const SolIcon_1 = require("./icons/SolIcon");
+const USDCIcon_1 = require("./icons/USDCIcon");
 const SPIN_WHEEL_ABI = [
     {
         inputs: [],
@@ -95,24 +94,24 @@ const basePublicClient = (0, viem_1.createPublicClient)({
     transport: (0, viem_1.http)()
 });
 function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess }) {
-    const hasMounted = (0, react_2.useHasMounted)();
-    const { setB3ModalOpen } = (0, react_2.useModalStore)();
+    const hasMounted = (0, react_1.useHasMounted)();
+    const { setB3ModalOpen } = (0, react_1.useModalStore)();
     // Payment config state
-    const [paymentConfig, setPaymentConfig] = (0, react_3.useState)(null);
-    const [isLoadingConfig, setIsLoadingConfig] = (0, react_3.useState)(true);
-    const [configError, setConfigError] = (0, react_3.useState)("");
-    const [wheelInfo, setWheelInfo] = (0, react_3.useState)(null);
+    const [paymentConfig, setPaymentConfig] = (0, react_2.useState)(null);
+    const [isLoadingConfig, setIsLoadingConfig] = (0, react_2.useState)(true);
+    const [configError, setConfigError] = (0, react_2.useState)("");
+    const [wheelInfo, setWheelInfo] = (0, react_2.useState)(null);
     // Fetch B3 token balance
-    const { formattedBalance: b3Balance, isLoading: isBalanceLoading, rawBalance: b3RawBalance } = (0, react_2.useTokenBalance)({
+    const { formattedBalance: b3Balance, isLoading: isBalanceLoading, rawBalance: b3RawBalance } = (0, react_1.useTokenBalance)({
         token: anyspend_1.B3_TOKEN
     });
     // Wagmi hooks
     const { address } = (0, wagmi_1.useAccount)();
     const { writeContractAsync } = (0, wagmi_1.useWriteContract)();
-    const { switchChainAndExecute } = (0, react_2.useChainSwitchWithAction)();
+    const { switchChainAndExecute } = (0, react_1.useChainSwitchWithAction)();
     // State for direct buying flow (when user has B3 tokens)
-    const [isBuying, setIsBuying] = (0, react_3.useState)(false);
-    const [buyingTxHash, setBuyingTxHash] = (0, react_3.useState)("");
+    const [isBuying, setIsBuying] = (0, react_2.useState)(false);
+    const [buyingTxHash, setBuyingTxHash] = (0, react_2.useState)("");
     const { isLoading: isTxPending, isSuccess: isTxSuccess, isError: isTxError, error: txError } = (0, wagmi_1.useWaitForTransactionReceipt)({
         hash: buyingTxHash,
         query: {
@@ -120,7 +119,7 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
         }
     });
     // Handle transaction status
-    (0, react_3.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (!buyingTxHash)
             return;
         if (isTxSuccess) {
@@ -137,14 +136,14 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
         }
     }, [isTxSuccess, isTxError, buyingTxHash, onSuccess, setB3ModalOpen, txError]);
     // Spin quantity state
-    const [userSpinQuantity, setUserSpinQuantity] = (0, react_3.useState)("");
-    const [showAmountPrompt, setShowAmountPrompt] = (0, react_3.useState)(true);
-    const [isQuantityValid, setIsQuantityValid] = (0, react_3.useState)(false);
-    const [validationError, setValidationError] = (0, react_3.useState)("");
-    const [displayQuantity, setDisplayQuantity] = (0, react_3.useState)("");
-    const [debouncedQuantity, setDebouncedQuantity] = (0, react_3.useState)("");
-    const [debouncedUserSpinQuantity, setDebouncedUserSpinQuantity] = (0, react_3.useState)("");
-    (0, react_3.useEffect)(() => {
+    const [userSpinQuantity, setUserSpinQuantity] = (0, react_2.useState)("");
+    const [showAmountPrompt, setShowAmountPrompt] = (0, react_2.useState)(true);
+    const [isQuantityValid, setIsQuantityValid] = (0, react_2.useState)(false);
+    const [validationError, setValidationError] = (0, react_2.useState)("");
+    const [displayQuantity, setDisplayQuantity] = (0, react_2.useState)("");
+    const [debouncedQuantity, setDebouncedQuantity] = (0, react_2.useState)("");
+    const [debouncedUserSpinQuantity, setDebouncedUserSpinQuantity] = (0, react_2.useState)("");
+    (0, react_2.useEffect)(() => {
         if (prefillQuantity && wheelInfo) {
             const remainingSpins = wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_;
             const adjustedQuantity = BigInt(prefillQuantity) > remainingSpins ? remainingSpins.toString() : prefillQuantity;
@@ -154,7 +153,7 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
     // Calculate total cost
     const totalCost = paymentConfig && userSpinQuantity ? paymentConfig.pricePerEntry * BigInt(userSpinQuantity) : BigInt(0);
     // Fetch payment configuration and wheel info
-    const fetchPaymentConfig = (0, react_3.useCallback)(async () => {
+    const fetchPaymentConfig = (0, react_2.useCallback)(async () => {
         if (!basePublicClient || !spinwheelContractAddress)
             return;
         try {
@@ -205,11 +204,11 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
         }
     }, [spinwheelContractAddress, chainId]);
     // Fetch config on mount and when dependencies change
-    (0, react_3.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         fetchPaymentConfig();
     }, [fetchPaymentConfig]);
     // Debounce the quantity for balance checks
-    (0, react_3.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         const timer = setTimeout(() => {
             setDebouncedQuantity(displayQuantity);
             setDebouncedUserSpinQuantity(userSpinQuantity);
@@ -322,7 +321,7 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
             setShowAmountPrompt(false);
         }
     };
-    const header = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative mx-auto size-32", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 scale-95 rounded-[50%] bg-gradient-to-br from-blue-500/20 to-purple-600/20 blur-xl" }), (0, jsx_runtime_1.jsxs)(react_2.GlareCardRounded, { className: "overflow-hidden rounded-full border-none bg-gradient-to-br from-blue-500/10 to-purple-600/10 backdrop-blur-sm", children: [(0, jsx_runtime_1.jsx)("img", { alt: "B3 Token", className: "size-full", src: "https://cdn.b3.fun/b3-coin-3d.png" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-[50%] border border-white/20" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "from-b3-react-background to-as-on-surface-1 mt-[-60px] w-full rounded-t-lg bg-gradient-to-t", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-[60px] 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.jsxs)("span", { className: "font-sf-rounded text-2xl font-semibold", children: ["Buy ", userSpinQuantity || "", " Spin", userSpinQuantity !== "1" ? "s" : ""] }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/70 text-sm", children: "Pay with B3 \u2022 Get spin wheel entries" })] })] })] }));
+    const header = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative mx-auto size-32", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 scale-95 rounded-[50%] bg-gradient-to-br from-blue-500/20 to-purple-600/20 blur-xl" }), (0, jsx_runtime_1.jsxs)(react_1.GlareCardRounded, { className: "overflow-hidden rounded-full border-none bg-gradient-to-br from-blue-500/10 to-purple-600/10 backdrop-blur-sm", children: [(0, jsx_runtime_1.jsx)("img", { alt: "B3 Token", className: "size-full", src: "https://cdn.b3.fun/b3-coin-3d.png" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-[50%] border border-white/20" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "from-b3-react-background to-as-on-surface-1 mt-[-60px] w-full rounded-t-lg bg-gradient-to-t", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-[60px] 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.jsxs)("span", { className: "font-sf-rounded text-2xl font-semibold", children: ["Buy ", userSpinQuantity || "", " Spin", userSpinQuantity !== "1" ? "s" : ""] }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/70 text-sm", children: "Pay with B3 \u2022 Get spin wheel entries" })] })] })] }));
     const onFocusQuantityInput = () => {
         window.scrollTo(0, 0);
         document.body.scrollTop = 0;
@@ -333,7 +332,7 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
     }
     // Error state
     if (configError || !paymentConfig) {
-        return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background flex w-full flex-col items-center justify-center p-8", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-as-red mb-4 text-center", children: configError || "Failed to load configuration" }), (0, jsx_runtime_1.jsx)(react_2.Button, { onClick: fetchPaymentConfig, variant: "outline", children: "Retry" })] }) }));
+        return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background flex w-full flex-col items-center justify-center p-8", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-as-red mb-4 text-center", children: configError || "Failed to load configuration" }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: fetchPaymentConfig, variant: "outline", children: "Retry" })] }) }));
     }
     // Render quantity input prompt
     if (showAmountPrompt) {
@@ -384,16 +383,17 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
                             opacity: hasMounted ? 1 : 0,
                             y: hasMounted ? 0 : 20,
                             filter: hasMounted ? "blur(0px)" : "blur(10px)"
-                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: isActive ? ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/70 text-sm font-medium", children: "Number of spins" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary/50 flex items-center gap-1 text-sm", children: ["Available: ", isBalanceLoading ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-3 w-3 animate-spin" }) : `${b3Balance} B3`] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { onFocus: onFocusQuantityInput, type: "text", placeholder: "1", value: displayQuantity, onChange: e => validateAndSetQuantity(e.target.value), className: `h-14 px-4 pr-20 text-lg ${!isQuantityValid && displayQuantity ? "border-as-red" : "border-b3-react-border"}` }), (0, jsx_runtime_1.jsx)("div", { className: "font-pack absolute right-4 top-1/2 -translate-y-1/2 text-lg font-medium text-blue-500/70", children: displayQuantity === "1" ? "Spin" : "Spins" })] }), !isQuantityValid && displayQuantity && (0, jsx_runtime_1.jsx)("p", { className: "text-as-red text-sm", children: validationError }), (0, jsx_runtime_1.jsx)("div", { className: "bg-as-on-surface-2/30 rounded-lg border border-white/10 p-4 backdrop-blur-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70 text-sm font-medium", children: "Total Cost:" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-lg font-bold", children: [displayQuantity && isQuantityValid ? (0, viem_1.formatUnits)(totalCost, 18) : "0", " B3"] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (() => {
+                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: isActive ? ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/70 text-sm font-medium", children: "Number of spins" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary/50 flex items-center gap-1 text-sm", children: ["Available: ", isBalanceLoading ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-3 w-3 animate-spin" }) : `${b3Balance} B3`] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Input, { onFocus: onFocusQuantityInput, type: "text", placeholder: "1", value: displayQuantity, onChange: e => validateAndSetQuantity(e.target.value), className: `h-14 px-4 pr-20 text-lg ${!isQuantityValid && displayQuantity ? "border-as-red" : "border-b3-react-border"}` }), (0, jsx_runtime_1.jsx)("div", { className: "font-pack absolute right-4 top-1/2 -translate-y-1/2 text-lg font-medium text-blue-500/70", children: displayQuantity === "1" ? "Spin" : "Spins" })] }), !isQuantityValid && displayQuantity && (0, jsx_runtime_1.jsx)("p", { className: "text-as-red text-sm", children: validationError }), (0, jsx_runtime_1.jsx)("div", { className: "bg-as-on-surface-2/30 rounded-lg border border-white/10 p-4 backdrop-blur-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70 text-sm font-medium", children: "Total Cost:" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-lg font-bold", children: [displayQuantity && isQuantityValid ? (0, viem_1.formatUnits)(totalCost, 18) : "0", " B3"] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (() => {
                                         const hasEnoughBalance = b3RawBalance && totalCost <= b3RawBalance;
                                         if (!hasEnoughBalance && debouncedQuantity) {
-                                            return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-brand/10 flex flex-col items-center gap-2 rounded-lg p-4 pb-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary text-sm font-semibold", children: "Swap & buy from any token" }), (0, jsx_runtime_1.jsxs)(react_2.TextLoop, { children: [(0, jsx_runtime_1.jsx)(EthIcon_1.EthIcon, { className: "h-8 w-8" }), (0, jsx_runtime_1.jsx)(SolIcon_1.SolIcon, { className: "h-8 w-8" }), (0, jsx_runtime_1.jsx)(USDCIcon_1.UsdcIcon, { className: "h-8 w-8" })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { className: "text-as-primary h-4 w-4" }), (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", className: "h-7 w-7", alt: "B3 Token" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/50 text-sm font-medium", children: "No problem, we'll help you swap to B3 for your spins!" })] }));
+                                            return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-brand/10 flex flex-col items-center gap-2 rounded-lg p-4 pb-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary text-sm font-semibold", children: "Swap & buy from any token" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { children: [(0, jsx_runtime_1.jsx)(EthIcon_1.EthIcon, { className: "h-8 w-8" }), (0, jsx_runtime_1.jsx)(SolIcon_1.SolIcon, { className: "h-8 w-8" }), (0, jsx_runtime_1.jsx)(USDCIcon_1.UsdcIcon, { className: "h-8 w-8" })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { className: "text-as-primary h-4 w-4" }), (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", className: "h-7 w-7", alt: "B3 Token" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/50 text-sm font-medium", children: "No problem, we'll help you swap to B3 for your spins!" })] }));
                                         }
-                                    })() }), (0, jsx_runtime_1.jsx)(react_2.Button, { onClick: confirmQuantity, disabled: !isQuantityValid || !displayQuantity || isBuying || isTxPending, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary mt-4 h-14 w-full rounded-xl text-lg font-medium", children: isBuying ? "Buying..." : isTxPending ? "Confirming..." : "Continue" })] })) : null })] }) }));
+                                    })() }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: confirmQuantity, disabled: !isQuantityValid || !displayQuantity || isBuying || isTxPending, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary mt-4 h-14 w-full rounded-xl text-lg font-medium", children: isBuying ? "Buying..." : isTxPending ? "Confirming..." : "Continue" })] })) : null })] }) }));
     }
     // AnySpend flow for when user needs to swap to B3
     const encodedData = generateEncodedDataForBuyEntriesAndSpin(address || "", userSpinQuantity);
     return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { isMainnet: isMainnet, loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: anyspend_1.OrderType.Custom, dstChainId: chainId, dstToken: anyspend_1.B3_TOKEN, dstAmount: totalCost.toString(), contractAddress: spinwheelContractAddress, spenderAddress: paymentConfig.entryModule, encodedData: encodedData, metadata: {
+            type: anyspend_1.OrderType.Custom,
             action: `buy ${userSpinQuantity} spin${userSpinQuantity !== "1" ? "s" : ""}`
         }, header: header, onSuccess: txHash => onSuccess?.(txHash), showRecipient: false }));
 }

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

@@ -1,4 +1,4 @@
-import { GetQuoteResponse, OrderType, Token } from "../../../anyspend";
+import { AnySpendMetadata, GetQuoteResponse, OrderType, Token } from "../../../anyspend";
 import React from "react";
 export declare function AnySpendCustom({ isMainnet, loadOrder, mode, recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient }: {
     isMainnet?: boolean;
@@ -12,7 +12,7 @@ export declare function AnySpendCustom({ isMainnet, loadOrder, mode, recipientAd
     dstAmount: string;
     contractAddress: string;
     encodedData: string;
-    metadata: any;
+    metadata: AnySpendMetadata;
     header: ({ anyspendPrice, isLoadingAnyspendPrice }: {
         anyspendPrice: GetQuoteResponse | undefined;
         isLoadingAnyspendPrice: boolean;

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

@@ -7,9 +7,6 @@ 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_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 +14,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_2 = require("react");
 const sonner_1 = require("sonner");
 const chains_1 = require("viem/chains");
 const OrderDetails_1 = require("./common/OrderDetails");
@@ -32,7 +29,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 +39,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: {
@@ -88,15 +87,15 @@ 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 }) {
-    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 { setB3ModalOpen, setB3ModalContentType } = (0, react_1.useModalStore)();
+    const hasMounted = (0, react_1.useHasMounted)();
+    const searchParams = (0, react_1.useSearchParamsSSR)();
+    const router = (0, react_1.useRouter)();
+    const [activePanel, setActivePanel] = (0, react_2.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
+    const [activeTab, setActiveTab] = (0, react_2.useState)("crypto");
     // Get current user's wallet
-    const currentWallet = (0, react_2.useAccountWallet)();
-    const recipientPropsProfile = (0, react_2.useBsmntProfile)({ address: recipientAddressProps });
+    const currentWallet = (0, react_1.useAccountWallet)();
+    const recipientPropsProfile = (0, react_1.useBsmntProfile)({ address: recipientAddressProps });
     const recipientAddress = recipientAddressProps || currentWallet.address;
     const recipientEnsName = recipientAddressProps
         ? recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "")
@@ -104,19 +103,19 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
     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);
+    const [orderId, setOrderId] = (0, react_2.useState)(loadOrder);
+    const [srcChainId, setSrcChainId] = (0, react_2.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 chainName = (0, react_2.useMemo)(() => (0, simplehash_1.simpleHashChainToChainName)(srcChainId), [srcChainId]);
     const { data: tokenList } = (0, anyspend_1.useAnyspendTokenList)(isMainnet, srcChainId, "");
     // Get token balances for the selected chain
-    const { nativeTokens, fungibleTokens } = (0, react_2.useTokenBalancesByChain)({
+    const { nativeTokens, fungibleTokens } = (0, react_1.useTokenBalancesByChain)({
         address: currentWallet?.wallet?.address || "",
         chainsIds: [srcChainId],
         enabled: !!currentWallet?.wallet?.address && !!chainName
     });
     // Find a token with a balance, prioritizing tokens the user already owns
-    const getTokenWithBalance = (0, react_5.useCallback)(() => {
+    const getTokenWithBalance = (0, react_2.useCallback)(() => {
         if (!currentWallet?.wallet?.address || (!nativeTokens && !fungibleTokens) || !tokenList) {
             return (0, anyspend_1.getDefaultToken)(srcChainId);
         }
@@ -146,10 +145,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_2.useState)((0, anyspend_1.getDefaultToken)(srcChainId));
+    const [dirtySelectSrcToken, setDirtySelectSrcToken] = (0, react_2.useState)(false);
     // Update token when chain changes or token balances are loaded
-    (0, react_5.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (tokenList?.length && !dirtySelectSrcToken) {
             const tokenWithBalance = getTokenWithBalance();
             if ((0, anyspend_1.eqci)(tokenWithBalance.address, dstToken.address) === false) {
@@ -166,6 +165,8 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
         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
     });
@@ -181,11 +182,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_2.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_2.useEffect)(() => {
         if (activeTab === "fiat") {
             setSrcChainId(chains_1.base.id);
             setSrcToken(anyspend_1.USDC_BASE);
@@ -193,7 +194,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
         }
     }, [activeTab]);
     // Update dependent amount when relay price changes
-    (0, react_5.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (anyspendQuote?.data &&
             anyspendQuote.data.currencyIn?.amount &&
             anyspendQuote.data.currencyIn?.currency?.decimals) {
@@ -205,7 +206,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
             setSrcAmount(null);
         }
     }, [anyspendQuote?.data]);
-    (0, react_5.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (oat?.data?.order.status === anyspend_1.OrderStatus.Executed) {
             console.log("Calling onSuccess");
             const txHash = oat?.data?.executeTx?.txHash;
@@ -245,21 +246,35 @@ 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
-                },
+                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,
+                            nftPrice: dstAmount
+                        }
+                        : {
+                            type: anyspend_1.NftType.ERC721,
+                            contractAddress: metadata.nftContract.contractAddress,
+                            contractType: metadata.nftContract.type,
+                            nftPrice: dstAmount
+                        }
+                    : undefined,
+                tournament: (0, anyspend_1.isTournamentMetadata)(metadata)
+                    ? {
+                        ...metadata.tournament,
+                        contractAddress: contractAddress,
+                        entryPriceOrFundAmount: dstAmount
+                    }
+                    : undefined,
                 payload: {
                     amount: dstAmount,
                     data: encodedData,
                     spenderAddress: spenderAddress,
                     to: contractAddress,
-                    action: metadata.action
+                    action: (0, anyspend_1.isCustomTxMetadata)(metadata) ? metadata.action : undefined
                 }
             };
             if (onramp) {
@@ -327,7 +342,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                         ? "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_1.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;
     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 }) }));
@@ -339,9 +354,9 @@ 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_1.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_1.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_1.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_1.Skeleton, { className: "h-8 w-48" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "ml-4 h-8 w-32" })] }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "mt-4 h-8 w-24" })] }), (0, jsx_runtime_1.jsx)(react_1.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_1.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_1.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_1.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_1.Skeleton, { className: "h-10 flex-1" }), (0, jsx_runtime_1.jsx)(react_1.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_1.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-4 w-32" })] }, i))) }), (0, jsx_runtime_1.jsx)(react_1.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_1.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_1.TabsList, { hideGradient: true, className: "justify-center", children: [(0, jsx_runtime_1.jsx)(react_1.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_1.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_1.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)"
@@ -356,9 +371,26 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                                             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
+                                        }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: (0, jsx_runtime_1.jsx)(react_1.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_1.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,
@@ -368,7 +400,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                                     }
                                     : 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
+    return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)(react_1.TransitionPanel, { activeIndex: orderId
                 ? oat
                     ? PanelView.ORDER_DETAILS
                     : PanelView.LOADING

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 }) {
+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/AnySpendStakeB3.js

@@ -6,9 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnySpendStakeB3 = AnySpendStakeB3;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../anyspend");
-const EthIcon_1 = require("./icons/EthIcon");
-const SolIcon_1 = require("./icons/SolIcon");
-const USDCIcon_1 = require("./icons/USDCIcon");
 const react_1 = require("../../../global-account/react");
 const number_1 = require("../../../shared/utils/number");
 const framer_motion_1 = require("framer-motion");
@@ -20,6 +17,9 @@ const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
 const wagmi_1 = require("wagmi");
 const AnySpendCustom_1 = require("./AnySpendCustom");
+const EthIcon_1 = require("./icons/EthIcon");
+const SolIcon_1 = require("./icons/SolIcon");
+const USDCIcon_1 = require("./icons/USDCIcon");
 const basePublicClient = (0, viem_1.createPublicClient)({
     chain: chains_1.base,
     transport: (0, viem_1.http)()
@@ -256,6 +256,7 @@ function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", recipien
     }
     const encodedData = generateEncodedDataForStakingB3(userStakeAmount, recipientAddress);
     return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { isMainnet: isMainnet, loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: anyspend_1.OrderType.Custom, dstChainId: chains_1.base.id, dstToken: anyspend_1.B3_TOKEN, dstAmount: userStakeAmount, contractAddress: ERC20Staking, encodedData: encodedData, metadata: {
+            type: anyspend_1.OrderType.Custom,
             action: "stake B3"
         }, header: header, onSuccess: onSuccess, showRecipient: true }));
 }

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

@@ -14,5 +14,8 @@ function AnySpendTournament(props) {
     const header = ({ anyspendPrice, isLoadingAnyspendPrice }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "z-10 mt-[-100px] flex h-[270px] w-full items-end justify-center", children: (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/tournament-play.svg", alt: "Tournament Play", className: "h-[200px] w-[360px] object-cover object-center" }) }), (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: "flex w-full flex-col items-center gap-1 p-6 pt-0", children: [(0, jsx_runtime_1.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] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2 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.jsxs)("div", { className: (0, utils_1.cn)("text-as-primary group flex items-center text-2xl font-semibold transition-all", {
                                             "opacity-0": isLoadingAnyspendPrice
                                         }), children: [(0, number_1.formatDisplayNumber)(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" }), " (", (0, number_1.formatTokenAmount)(BigInt(dstAmount), dstToken.decimals, 6, true), " ", dstToken.symbol, ")"] }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-[32px] w-full" })) })] })] })] }));
-    return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { isMainnet: isMainnet, loadOrder: loadOrder, mode: mode, recipientAddress: action === "join" ? props.joinFor : undefined, orderType: action === "join" ? anyspend_1.OrderType.JoinTournament : anyspend_1.OrderType.FundTournament, dstChainId: tournamentChainId, dstToken: dstToken, dstAmount: dstAmount, contractAddress: tournamentContractAddress, encodedData: "0x", metadata: { tournament: tournamentMetadata }, header: header, onSuccess: onSuccess, showRecipient: action === "join" }));
+    return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { isMainnet: isMainnet, loadOrder: loadOrder, mode: mode, recipientAddress: action === "join" ? props.joinFor : undefined, orderType: action === "join" ? anyspend_1.OrderType.JoinTournament : anyspend_1.OrderType.FundTournament, dstChainId: tournamentChainId, dstToken: dstToken, dstAmount: dstAmount, contractAddress: tournamentContractAddress, encodedData: "0x", metadata: {
+            type: action === "join" ? anyspend_1.OrderType.JoinTournament : anyspend_1.OrderType.FundTournament,
+            tournament: tournamentMetadata
+        }, header: header, onSuccess: onSuccess, showRecipient: action === "join" }));
 }

package/dist/cjs/anyspend/services/anyspend.d.ts

@@ -1,5 +1,5 @@
-import { GetOrderAndTxsResponse, GetQuoteRequest, GetQuoteResponse, SendPermitDataRequestBody, Token } from "../../anyspend/types";
 import { OnrampOptions } from "../../anyspend/react";
+import { GetOrderAndTxsResponse, GetQuoteRequest, GetQuoteResponse, SendPermitDataRequestBody, Token } from "../../anyspend/types";
 export declare const anyspendService: {
     getTokenList: (isMainnet: boolean, chainId: number, query: string) => Promise<Token[]>;
     getToken: (isMainnet: boolean, chainId: number, tokenAddress: string) => Promise<Token>;