@b3dotfun/sdk 0.0.7-alpha.18 → 0.0.7-alpha.2

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

@@ -6,19 +6,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnySpendBuySpin = AnySpendBuySpin;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../anyspend");
-const react_1 = require("../../../global-account/react");
 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 framer_motion_1 = require("framer-motion");
 const invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
-const react_2 = require("react");
+const react_3 = 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: [],
@@ -27,27 +28,27 @@ const SPIN_WHEEL_ABI = [
             { internalType: "address", name: "paymentToken", type: "address" },
             { internalType: "uint256", name: "pricePerEntry", type: "uint256" },
             { internalType: "uint256", name: "maxEntriesPerUser", type: "uint256" },
-            { internalType: "address", name: "paymentRecipient", type: "address" },
+            { internalType: "address", name: "paymentRecipient", type: "address" }
         ],
         stateMutability: "view",
-        type: "function",
+        type: "function"
     },
     {
         inputs: [],
         name: "entryModule",
         outputs: [{ internalType: "contract IEntryModuleV2", name: "", type: "address" }],
         stateMutability: "view",
-        type: "function",
+        type: "function"
     },
     {
         inputs: [
             { internalType: "address", name: "user", type: "address" },
-            { internalType: "uint256", name: "quantity", type: "uint256" },
+            { internalType: "uint256", name: "quantity", type: "uint256" }
         ],
         name: "buyEntriesAndSpin",
         outputs: [],
         stateMutability: "payable",
-        type: "function",
+        type: "function"
     },
     {
         inputs: [],
@@ -58,11 +59,11 @@ const SPIN_WHEEL_ABI = [
             { internalType: "uint256", name: "endTime_", type: "uint256" },
             { internalType: "uint256", name: "totalPrizesAvailable_", type: "uint256" },
             { internalType: "uint256", name: "prizesRequestedCount_", type: "uint256" },
-            { internalType: "enum SpinWheelV2.WheelState", name: "state_", type: "uint8" },
+            { internalType: "enum SpinWheelV2.WheelState", name: "state_", type: "uint8" }
         ],
         stateMutability: "view",
-        type: "function",
-    },
+        type: "function"
+    }
 ];
 function getWheelStatus(wheelInfo) {
     const now = BigInt(Math.floor(Date.now() / 1000));
@@ -85,41 +86,41 @@ function generateEncodedDataForBuyEntriesAndSpin(user, quantity) {
     const encodedData = (0, viem_1.encodeFunctionData)({
         abi: SPIN_WHEEL_ABI,
         functionName: "buyEntriesAndSpin",
-        args: [user, BigInt(quantity)],
+        args: [user, BigInt(quantity)]
     });
     return encodedData;
 }
 const basePublicClient = (0, viem_1.createPublicClient)({
     chain: supported_1.baseMainnet,
-    transport: (0, viem_1.http)(),
+    transport: (0, viem_1.http)()
 });
-function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, }) {
-    const hasMounted = (0, react_1.useHasMounted)();
-    const { setB3ModalOpen } = (0, react_1.useModalStore)();
+function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess }) {
+    const hasMounted = (0, react_2.useHasMounted)();
+    const { setB3ModalOpen } = (0, react_2.useModalStore)();
     // Payment config state
-    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);
+    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);
     // Fetch B3 token balance
-    const { formattedBalance: b3Balance, isLoading: isBalanceLoading, rawBalance: b3RawBalance, } = (0, react_1.useTokenBalance)({
-        token: anyspend_1.B3_TOKEN,
+    const { formattedBalance: b3Balance, isLoading: isBalanceLoading, rawBalance: b3RawBalance } = (0, react_2.useTokenBalance)({
+        token: anyspend_1.B3_TOKEN
     });
     // Wagmi hooks
     const { address } = (0, wagmi_1.useAccount)();
     const { writeContractAsync } = (0, wagmi_1.useWriteContract)();
-    const { switchChainAndExecute } = (0, react_1.useChainSwitchWithAction)();
+    const { switchChainAndExecute } = (0, react_2.useChainSwitchWithAction)();
     // State for direct buying flow (when user has B3 tokens)
-    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)({
+    const [isBuying, setIsBuying] = (0, react_3.useState)(false);
+    const [buyingTxHash, setBuyingTxHash] = (0, react_3.useState)("");
+    const { isLoading: isTxPending, isSuccess: isTxSuccess, isError: isTxError, error: txError } = (0, wagmi_1.useWaitForTransactionReceipt)({
         hash: buyingTxHash,
         query: {
-            structuralSharing: false,
-        },
+            structuralSharing: false
+        }
     });
     // Handle transaction status
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         if (!buyingTxHash)
             return;
         if (isTxSuccess) {
@@ -136,14 +137,14 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
         }
     }, [isTxSuccess, isTxError, buyingTxHash, onSuccess, setB3ModalOpen, txError]);
     // Spin quantity state
-    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)(() => {
+    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)(() => {
         if (prefillQuantity && wheelInfo) {
             const remainingSpins = wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_;
             const adjustedQuantity = BigInt(prefillQuantity) > remainingSpins ? remainingSpins.toString() : prefillQuantity;
@@ -153,7 +154,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_2.useCallback)(async () => {
+    const fetchPaymentConfig = (0, react_3.useCallback)(async () => {
         if (!basePublicClient || !spinwheelContractAddress)
             return;
         try {
@@ -164,24 +165,24 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
                 basePublicClient.readContract({
                     address: spinwheelContractAddress,
                     abi: SPIN_WHEEL_ABI,
-                    functionName: "getPaymentConfig",
+                    functionName: "getPaymentConfig"
                 }),
                 basePublicClient.readContract({
                     address: spinwheelContractAddress,
                     abi: SPIN_WHEEL_ABI,
-                    functionName: "entryModule",
+                    functionName: "entryModule"
                 }),
                 basePublicClient.readContract({
                     address: spinwheelContractAddress,
                     abi: SPIN_WHEEL_ABI,
-                    functionName: "getWheelInfo",
-                }),
+                    functionName: "getWheelInfo"
+                })
             ]);
             const paymentConfig = {
                 pricePerEntry: config[1],
                 maxEntriesPerUser: config[2],
                 paymentRecipient: config[3],
-                entryModule: entryModuleAddress,
+                entryModule: entryModuleAddress
             };
             const wheelInfoData = {
                 creator_: wheelInfo[0],
@@ -189,7 +190,7 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
                 endTime_: wheelInfo[2],
                 totalPrizesAvailable_: wheelInfo[3],
                 prizesRequestedCount_: wheelInfo[4],
-                state_: wheelInfo[5],
+                state_: wheelInfo[5]
             };
             setPaymentConfig(paymentConfig);
             setWheelInfo(wheelInfoData);
@@ -204,11 +205,11 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
         }
     }, [spinwheelContractAddress, chainId]);
     // Fetch config on mount and when dependencies change
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         fetchPaymentConfig();
     }, [fetchPaymentConfig]);
     // Debounce the quantity for balance checks
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         const timer = setTimeout(() => {
             setDebouncedQuantity(displayQuantity);
             setDebouncedUserSpinQuantity(userSpinQuantity);
@@ -237,9 +238,7 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
                 return;
             }
             // Check maximum entries per user (0 means no limit)
-            if (paymentConfig &&
-                paymentConfig.maxEntriesPerUser > BigInt(0) &&
-                BigInt(numValue) > paymentConfig.maxEntriesPerUser) {
+            if (paymentConfig && paymentConfig.maxEntriesPerUser > 0n && BigInt(numValue) > paymentConfig.maxEntriesPerUser) {
                 setIsQuantityValid(false);
                 setUserSpinQuantity("");
                 setValidationError(`Maximum ${paymentConfig.maxEntriesPerUser.toString()} spins allowed`);
@@ -273,7 +272,7 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
                     address: anyspend_1.B3_TOKEN.address,
                     abi: viem_1.erc20Abi,
                     functionName: "allowance",
-                    args: [address, paymentConfig.entryModule],
+                    args: [address, paymentConfig.entryModule]
                 });
                 // If allowance is insufficient, request approval
                 if (allowance < totalCost) {
@@ -282,7 +281,7 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
                         address: anyspend_1.B3_TOKEN.address,
                         abi: viem_1.erc20Abi,
                         functionName: "approve",
-                        args: [paymentConfig.entryModule, totalCost],
+                        args: [paymentConfig.entryModule, totalCost]
                     });
                     sonner_1.toast.info("Approval confirmed. Proceeding with spin purchase...");
                 }
@@ -292,7 +291,7 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
                     address: spinwheelContractAddress,
                     abi: SPIN_WHEEL_ABI,
                     functionName: "buyEntriesAndSpin",
-                    args: [address, BigInt(userSpinQuantity)],
+                    args: [address, BigInt(userSpinQuantity)]
                 });
                 setBuyingTxHash(buyHash);
                 sonner_1.toast.success("Spin purchase transaction submitted!");
@@ -323,7 +322,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_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 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 onFocusQuantityInput = () => {
         window.scrollTo(0, 0);
         document.body.scrollTop = 0;
@@ -334,12 +333,12 @@ 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_1.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_2.Button, { onClick: fetchPaymentConfig, variant: "outline", children: "Retry" })] }) }));
     }
     // Render quantity input prompt
     if (showAmountPrompt) {
         const pricePerEntry = (0, viem_1.formatUnits)(paymentConfig.pricePerEntry, 18);
-        const remainingEntries = wheelInfo ? wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_ : BigInt(0);
+        const remainingEntries = wheelInfo ? wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_ : 0n;
         const wheelStatus = wheelInfo ? getWheelStatus(wheelInfo) : null;
         const isSoldOut = wheelStatus === "sold_out";
         const isActive = wheelStatus === "active";
@@ -353,17 +352,17 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
                 case "not_started":
                     return {
                         title: "Spin Wheel Not Started",
-                        message: `Starts at ${formatDate(wheelInfo.startTime_)}`,
+                        message: `Starts at ${formatDate(wheelInfo.startTime_)}`
                     };
                 case "ended":
                     return {
                         title: "Spin Wheel Ended",
-                        message: `Ended at ${formatDate(wheelInfo.endTime_)}`,
+                        message: `Ended at ${formatDate(wheelInfo.endTime_)}`
                     };
                 case "sold_out":
                     return {
                         title: "All Spins Have Been Claimed",
-                        message: "Stay tuned for the next spin wheel event!",
+                        message: "Stay tuned for the next spin wheel event!"
                     };
                 default:
                     return null;
@@ -373,29 +372,28 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
         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", children: [(0, jsx_runtime_1.jsxs)("div", { className: "w-full px-4 pb-2 pt-4", 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)",
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)"
                                 }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: `flex justify-center ${isActive ? "mb-4" : ""}`, children: (0, jsx_runtime_1.jsx)("img", { alt: "B3 Token", loading: "lazy", width: "64", height: "64", decoding: "async", className: "rounded-full", src: "https://cdn.b3.fun/b3-coin-3d.png" }) }), (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)",
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)"
                                 }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "text-center", children: isActive ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "font-sf-rounded text-as-primary mb-4 text-2xl font-bold", children: (() => {
                                                 const hasEnoughBalance = b3RawBalance && totalCost <= b3RawBalance;
                                                 return hasEnoughBalance || !debouncedQuantity ? "Buy Spins" : `Swap & Buy Spins`;
                                             })() }), wheelInfo && ((0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-brand/10 border-as-brand/10 inline-flex items-center rounded-full border px-3 py-1", children: (0, jsx_runtime_1.jsxs)("p", { className: "text-as-brand text-sm font-medium", children: [pricePerEntry, " $B3 per spin"] }) }), (0, jsx_runtime_1.jsx)("div", { className: "bg-as-brand/10 border-as-brand/10 inline-flex items-center rounded-full border px-3 py-1", children: (0, jsx_runtime_1.jsxs)("p", { className: "text-as-brand text-sm font-medium", children: [remainingEntries.toString(), " remaining"] }) })] }))] })) : (statusInfo && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-as-primary text-lg font-semibold", children: statusInfo.title }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/70 mt-2 text-sm", children: statusInfo.message })] }))) })] }), (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.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: (() => {
+                            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: (() => {
                                         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_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!" })] }));
+                                            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!" })] }));
                                         }
-                                    })() }), (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 })] }) }));
+                                    })() }), (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 })] }) }));
     }
     // 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" : ""}`,
+            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,6 +1,6 @@
-import { AnySpendMetadata, GetQuoteResponse, OrderType, Token } from "../../../anyspend";
+import { 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, }: {
+export declare function AnySpendCustom({ isMainnet, loadOrder, mode, recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient }: {
     isMainnet?: boolean;
     loadOrder?: string;
     mode?: "modal" | "page";
@@ -12,8 +12,8 @@ export declare function AnySpendCustom({ isMainnet, loadOrder, mode, recipientAd
     dstAmount: string;
     contractAddress: string;
     encodedData: string;
-    metadata: AnySpendMetadata;
-    header: ({ anyspendPrice, isLoadingAnyspendPrice, }: {
+    metadata: any;
+    header: ({ anyspendPrice, isLoadingAnyspendPrice }: {
         anyspendPrice: GetQuoteResponse | undefined;
         isLoadingAnyspendPrice: boolean;
     }) => React.JSX.Element;