@b3dotfun/sdk 0.0.1-alpha.8 → 0.0.3-alpha.0

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

@@ -11,7 +11,7 @@ export declare enum PanelView {
     LOADING = 3,
     FIAT_PAYMENT = 4
 }
-export declare function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet, mode, defaultActiveTab, loadOrder, hideTransactionHistoryButton }: {
+export declare function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet, mode, defaultActiveTab, loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps }: {
     destinationTokenAddress?: string;
     destinationTokenChainId?: number;
     isMainnet?: boolean;
@@ -19,4 +19,5 @@ export declare function AnySpend({ destinationTokenAddress, destinationTokenChai
     defaultActiveTab?: "crypto" | "fiat";
     loadOrder?: string;
     hideTransactionHistoryButton?: boolean;
+    recipientAddress?: string;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -9,8 +9,8 @@ exports.AnySpend = AnySpend;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../anyspend");
 const react_1 = require("../../../global-account/react");
-const formatAddress_1 = require("../../../shared/utils/formatAddress");
 const cn_1 = require("../../../shared/utils/cn");
+const formatAddress_1 = require("../../../shared/utils/formatAddress");
 const number_1 = require("../../../shared/utils/number");
 const framer_motion_1 = require("framer-motion");
 const invariant_1 = __importDefault(require("invariant"));
@@ -36,7 +36,7 @@ var PanelView;
     PanelView[PanelView["FIAT_PAYMENT"] = 4] = "FIAT_PAYMENT";
 })(PanelView || (exports.PanelView = PanelView = {}));
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
-function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet = true, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton }) {
+function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet = true, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps }) {
     const searchParams = (0, react_1.useSearchParamsSSR)();
     const router = (0, react_1.useRouter)();
     // Determine if we're in "buy mode" based on whether destination token props are provided
@@ -279,8 +279,8 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
     const { address: globalAddress, wallet: globalWallet } = (0, react_1.useAccountWallet)();
     // Set default recipient address when wallet changes
     (0, react_2.useEffect)(() => {
-        setRecipientAddress(globalAddress);
-    }, [globalAddress]);
+        setRecipientAddress(recipientAddressFromProps || globalAddress);
+    }, [recipientAddressFromProps, globalAddress]);
     // Get anyspend price
     const activeInputAmountInWei = isSrcInputDirty
         ? (0, viem_1.parseUnits)(srcAmount.replaceAll(",", ""), selectedSrcToken.decimals).toString()

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

@@ -1,9 +1,10 @@
-export declare function AnySpendBuySpin({ isMainnet, loadOrder, mode, spinwheelContractAddress, chainId, recipientAddress, onSuccess }: {
+export declare function AnySpendBuySpin({ isMainnet, loadOrder, mode, spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess }: {
     isMainnet?: boolean;
     loadOrder?: string;
     mode?: "modal" | "page";
     spinwheelContractAddress: string;
     chainId: number;
     recipientAddress: string;
+    prefillQuantity?: string;
     onSuccess?: (txHash?: string) => void;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -6,6 +6,7 @@ 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");
@@ -17,7 +18,6 @@ const lucide_react_1 = require("lucide-react");
 const react_3 = require("react");
 const sonner_1 = require("sonner");
 const viem_1 = require("viem");
-const chains_1 = require("viem/chains");
 const wagmi_1 = require("wagmi");
 const AnySpendCustom_1 = require("./AnySpendCustom");
 const SPIN_WHEEL_ABI = [
@@ -49,8 +49,37 @@ const SPIN_WHEEL_ABI = [
         outputs: [],
         stateMutability: "payable",
         type: "function"
+    },
+    {
+        inputs: [],
+        name: "getWheelInfo",
+        outputs: [
+            { internalType: "address", name: "creator_", type: "address" },
+            { internalType: "uint256", name: "startTime_", type: "uint256" },
+            { 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" }
+        ],
+        stateMutability: "view",
+        type: "function"
     }
 ];
+function getWheelStatus(wheelInfo) {
+    const now = BigInt(Math.floor(Date.now() / 1000));
+    console.log("@@anyspend-buy-spin:now:", now);
+    console.log("@@anyspend-buy-spin:wheelInfo:", wheelInfo);
+    if (now < wheelInfo.startTime_) {
+        return "not_started";
+    }
+    if (now > wheelInfo.endTime_) {
+        return "ended";
+    }
+    if (wheelInfo.totalPrizesAvailable_ <= wheelInfo.prizesRequestedCount_) {
+        return "sold_out";
+    }
+    return "active";
+}
 function generateEncodedDataForBuyEntriesAndSpin(user, quantity) {
     (0, invariant_1.default)(BigInt(quantity) > 0, "Quantity must be greater than zero");
     console.log("@@anyspend-buy-spin:encoded-data:", { user, quantity });
@@ -62,16 +91,17 @@ function generateEncodedDataForBuyEntriesAndSpin(user, quantity) {
     return encodedData;
 }
 const basePublicClient = (0, viem_1.createPublicClient)({
-    chain: chains_1.base,
+    chain: supported_1.baseMainnet,
     transport: (0, viem_1.http)()
 });
-function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwheelContractAddress, chainId, recipientAddress, onSuccess }) {
+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_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_2.useTokenBalance)({
         token: anyspend_1.B3_TOKEN
@@ -83,22 +113,29 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
     // 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 [showSuccessModal, setShowSuccessModal] = (0, react_3.useState)(false);
-    // Wait for transaction confirmation
-    const { isLoading: isTxPending, isSuccess: isTxSuccess } = (0, wagmi_1.useWaitForTransactionReceipt)({
+    const { isLoading: isTxPending, isSuccess: isTxSuccess, isError: isTxError, error: txError } = (0, wagmi_1.useWaitForTransactionReceipt)({
         hash: buyingTxHash,
         query: {
             structuralSharing: false
         }
     });
-    // Show success modal when transaction is confirmed
+    // Handle transaction status
     (0, react_3.useEffect)(() => {
-        if (isTxSuccess && buyingTxHash) {
-            setShowAmountPrompt(false);
-            setShowSuccessModal(true);
+        if (!buyingTxHash)
+            return;
+        if (isTxSuccess) {
+            setB3ModalOpen(false);
+            onSuccess?.(buyingTxHash);
+            sonner_1.toast.success("Spin purchase transaction confirmed!");
+            setIsBuying(false);
+        }
+        else if (isTxError) {
+            console.error("@@anyspend-buy-spin:tx-error:", txError);
+            sonner_1.toast.error("Transaction failed. Please try again.");
+            setB3ModalOpen(false);
             setIsBuying(false);
         }
-    }, [isTxSuccess, buyingTxHash]);
+    }, [isTxSuccess, isTxError, buyingTxHash, onSuccess, setB3ModalOpen, txError]);
     // Spin quantity state
     const [userSpinQuantity, setUserSpinQuantity] = (0, react_3.useState)("");
     const [showAmountPrompt, setShowAmountPrompt] = (0, react_3.useState)(true);
@@ -106,9 +143,17 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
     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;
+            validateAndSetQuantity(adjustedQuantity);
+        }
+    }, [prefillQuantity, wheelInfo]);
     // Calculate total cost
     const totalCost = paymentConfig && userSpinQuantity ? paymentConfig.pricePerEntry * BigInt(userSpinQuantity) : BigInt(0);
-    // Fetch payment configuration
+    // Fetch payment configuration and wheel info
     const fetchPaymentConfig = (0, react_3.useCallback)(async () => {
         if (!basePublicClient || !spinwheelContractAddress)
             return;
@@ -116,7 +161,7 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
             setIsLoadingConfig(true);
             setConfigError("");
             console.log("@@anyspend-buy-spin:fetch-config:", { spinwheelContractAddress, chainId });
-            const [config, entryModuleAddress] = await Promise.all([
+            const [config, entryModuleAddress, wheelInfo] = await Promise.all([
                 basePublicClient.readContract({
                     address: spinwheelContractAddress,
                     abi: SPIN_WHEEL_ABI,
@@ -126,6 +171,11 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
                     address: spinwheelContractAddress,
                     abi: SPIN_WHEEL_ABI,
                     functionName: "entryModule"
+                }),
+                basePublicClient.readContract({
+                    address: spinwheelContractAddress,
+                    abi: SPIN_WHEEL_ABI,
+                    functionName: "getWheelInfo"
                 })
             ]);
             const paymentConfig = {
@@ -134,13 +184,16 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
                 paymentRecipient: config[3],
                 entryModule: entryModuleAddress
             };
-            console.log("@@anyspend-buy-spin:config-fetched:", {
-                pricePerEntry: paymentConfig.pricePerEntry.toString(),
-                maxEntriesPerUser: paymentConfig.maxEntriesPerUser.toString(),
-                paymentRecipient: paymentConfig.paymentRecipient,
-                entryModule: paymentConfig.entryModule
-            });
+            const wheelInfoData = {
+                creator_: wheelInfo[0],
+                startTime_: wheelInfo[1],
+                endTime_: wheelInfo[2],
+                totalPrizesAvailable_: wheelInfo[3],
+                prizesRequestedCount_: wheelInfo[4],
+                state_: wheelInfo[5]
+            };
             setPaymentConfig(paymentConfig);
+            setWheelInfo(wheelInfoData);
         }
         catch (error) {
             console.error("@@anyspend-buy-spin:config-error:", error);
@@ -159,6 +212,7 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
     (0, react_3.useEffect)(() => {
         const timer = setTimeout(() => {
             setDebouncedQuantity(displayQuantity);
+            setDebouncedUserSpinQuantity(userSpinQuantity);
         }, 500);
         return () => clearTimeout(timer);
     }, [displayQuantity, userSpinQuantity]);
@@ -184,14 +238,19 @@ 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`);
                 return;
             }
+            // Check if quantity exceeds remaining entries
+            if (wheelInfo && BigInt(numValue) > wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_) {
+                setIsQuantityValid(false);
+                setUserSpinQuantity("");
+                setValidationError(`Only ${(wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_).toString()} spins remaining`);
+                return;
+            }
             setUserSpinQuantity(value);
             setIsQuantityValid(true);
             setValidationError("");
@@ -241,7 +300,7 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
         catch (error) {
             console.error("@@anyspend-buy-spin:error:", error);
             sonner_1.toast.error("Spin purchase failed. Please try again.");
-            setShowSuccessModal(false);
+            setB3ModalOpen(false);
         }
         finally {
             setIsBuying(false);
@@ -279,46 +338,58 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
     // Render quantity input prompt
     if (showAmountPrompt) {
         const pricePerEntry = (0, viem_1.formatUnits)(paymentConfig.pricePerEntry, 18);
+        const remainingEntries = wheelInfo ? wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_ : 0n;
+        const wheelStatus = wheelInfo ? getWheelStatus(wheelInfo) : null;
+        const isSoldOut = wheelStatus === "sold_out";
+        const isActive = wheelStatus === "active";
+        const getStatusMessage = () => {
+            if (!wheelInfo)
+                return null;
+            const formatDate = (timestamp) => {
+                return new Date(Number(timestamp) * 1000).toLocaleString();
+            };
+            switch (wheelStatus) {
+                case "not_started":
+                    return {
+                        title: "Spin Wheel Not Started",
+                        message: `Starts at ${formatDate(wheelInfo.startTime_)}`
+                    };
+                case "ended":
+                    return {
+                        title: "Spin Wheel Ended",
+                        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!"
+                    };
+                default:
+                    return null;
+            }
+        };
+        const statusInfo = getStatusMessage();
         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)"
-                                }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "mb-4 flex justify-center", 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.jsxs)(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.1, ease: "easeInOut" }, className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "font-sf-rounded text-as-primary mb-2 text-2xl font-bold", children: (() => {
-                                            const hasEnoughBalance = b3RawBalance && totalCost <= b3RawBalance;
-                                            return hasEnoughBalance || !debouncedQuantity ? "Buy Spins" : `Swap & Buy Spins`;
-                                        })() }), (0, jsx_runtime_1.jsx)("div", { className: "bg-as-on-surface-2/50 inline-flex items-center gap-2 rounded-full border border-white/10 px-3 py-1 backdrop-blur-sm", children: (0, jsx_runtime_1.jsxs)("p", { className: "text-as-primary/80 text-sm", children: [pricePerEntry, " $B3 per spin"] }) })] })] }), (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)"
-                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [(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_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_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" })] })] }) }));
-    }
-    // Success Modal for Direct Buying
-    if (showSuccessModal) {
-        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 p-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)"
-                                }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative mx-auto mb-4 size-[120px]", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 scale-95 rounded-[50%] bg-gradient-to-br from-green-500/30 to-blue-500/30 blur-xl" }), (0, jsx_runtime_1.jsxs)(react_2.GlareCardRounded, { className: "overflow-hidden rounded-full border-none bg-gradient-to-br from-green-500/10 to-blue-500/10 backdrop-blur-sm", children: [(0, jsx_runtime_1.jsx)("img", { alt: "B3 Token", loading: "lazy", width: "120", height: "120", decoding: "async", "data-nimg": "1", className: "size-full shrink-0 bg-transparent text-transparent", 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)(framer_motion_1.motion.div, { initial: false, animate: {
+                                }, 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)"
-                                }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "font-sf-rounded mb-3 bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-3xl font-bold text-transparent", children: "\uD83C\uDF89 Purchase Complete!" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-as-on-surface-2/50 inline-flex items-center gap-2 rounded-full border border-white/10 px-4 py-2 backdrop-blur-sm", children: (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary/80 text-sm font-medium", children: [userSpinQuantity, " Spin", userSpinQuantity !== "1" ? "s" : "", " \u2022 ", (0, viem_1.formatUnits)(totalCost, 18), " B3"] }) })] })] }), (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: false, animate: {
+                                }, 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: [(0, jsx_runtime_1.jsx)("div", { className: "mb-6", children: (0, jsx_runtime_1.jsx)("a", { href: `https://basescan.org/tx/${buyingTxHash}`, target: "_blank", rel: "noopener noreferrer", className: "text-as-primary/70 hover:text-as-primary block break-all text-center font-mono text-sm underline transition-colors", children: "View transaction" }) }), (0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => {
-                                    setB3ModalOpen(false);
-                                    onSuccess?.(buyingTxHash);
-                                }, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary h-14 w-full rounded-xl text-lg font-medium", children: "Done" })] })] }) }));
+                        }, 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_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_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);

package/dist/cjs/global-account/react/components/B3DynamicModal.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../anyspend/react");
 const react_2 = require("../../../global-account/react");
 const debug_1 = require("../../../shared/utils/debug");
-const B3Provider_1 = require("./B3Provider");
+const useB3_1 = require("./B3Provider/useB3");
 const ManageAccount_1 = require("./ManageAccount/ManageAccount");
 const RequestPermissions_1 = require("./RequestPermissions/RequestPermissions");
 const SignInWithB3Flow_1 = require("./SignInWithB3/SignInWithB3Flow");
@@ -15,7 +15,7 @@ const drawer_1 = require("./ui/drawer");
 const debug = (0, debug_1.debugB3React)("B3DynamicModal");
 function B3DynamicModal() {
     const { isOpen, setB3ModalOpen, contentType, history, navigateBack } = (0, react_2.useModalStore)();
-    const { theme } = (0, B3Provider_1.useB3)();
+    const { theme } = (0, useB3_1.useB3)();
     const isMobile = (0, react_2.useIsMobile)();
     let contentClass = `b3-modal ${theme === "dark" ? "dark" : ""}`;
     let hideCloseButton = false;

package/dist/cjs/global-account/react/components/{B3Provider.d.ts → B3Provider/B3Provider.d.ts}

@@ -1,34 +1,8 @@
-import { User } from "../../../global-account/types/b3-api.types";
-import { PermissionsConfig } from "../../../global-account/types/permissions";
-import { Account, Wallet } from "thirdweb/wallets";
+import { PermissionsConfig } from "../../../../global-account/types/permissions";
+import { Account } from "thirdweb/wallets";
 import "@reservoir0x/relay-kit-ui/styles.css";
+import { B3ContextType } from "./types";
 export declare const wagmiConfig: import("wagmi").Config<readonly [import("viem").Chain, ...import("viem").Chain[]], any, readonly import("wagmi").CreateConnectorFn[]>;
-/**
- * Context type for B3Provider
- */
-export interface B3ContextType {
-    account?: Account;
-    automaticallySetFirstEoa: boolean;
-    user?: User;
-    setAccount: (account: Account) => void;
-    setWallet: (wallet: Wallet) => void;
-    wallet?: Wallet;
-    setUser: (user?: User) => void;
-    initialized: boolean;
-    ready: boolean;
-    environment?: "development" | "production";
-    defaultPermissions?: PermissionsConfig;
-    theme: "light" | "dark";
-}
-/**
- * Context for B3 provider
- */
-export declare const B3Context: import("react").Context<B3ContextType>;
-/**
- * Hook to access the B3 context
- * @throws Error if used outside a B3Provider
- */
-export declare function useB3(): B3ContextType;
 /**
  * Main B3Provider component
  */

package/dist/cjs/global-account/react/components/{B3Provider.js → B3Provider/B3Provider.js}

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.B3Context = exports.wagmiConfig = void 0;
-exports.useB3 = useB3;
+exports.wagmiConfig = void 0;
 exports.B3Provider = B3Provider;
 exports.InnerProvider = InnerProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const supported_1 = require("../../../shared/constants/chains/supported");
+const supported_1 = require("../../../../shared/constants/chains/supported");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const sonner_1 = require("sonner");
 const react_2 = require("thirdweb/react");
 const wagmi_1 = require("wagmi");
-const RelayKitProviderWrapper_1 = require("./RelayKitProviderWrapper");
-const StyleRoot_1 = require("./StyleRoot");
+const RelayKitProviderWrapper_1 = require("../RelayKitProviderWrapper");
+const StyleRoot_1 = require("../StyleRoot");
 require("@reservoir0x/relay-kit-ui/styles.css");
+const types_1 = require("./types");
 /**
  * Default permissions configuration for B3 provider
  */
@@ -27,34 +27,6 @@ exports.wagmiConfig = (0, wagmi_1.createConfig)({
     chains: [supported_1.supportedChains[0], ...supported_1.supportedChains.slice(1)],
     transports: Object.fromEntries(supported_1.supportedChains.map(chain => [chain.id, (0, wagmi_1.http)()]))
 });
-/**
- * Context for B3 provider
- */
-exports.B3Context = (0, react_1.createContext)({
-    account: undefined,
-    automaticallySetFirstEoa: false,
-    user: undefined,
-    setAccount: () => { },
-    setWallet: () => { },
-    wallet: undefined,
-    setUser: () => { },
-    initialized: false,
-    ready: false,
-    environment: "development",
-    theme: "light"
-});
-/**
- * Hook to access the B3 context
- * @throws Error if used outside a B3Provider
- */
-function useB3() {
-    const context = (0, react_1.useContext)(exports.B3Context);
-    if (!context.initialized) {
-        throw new Error("useB3 must be used within a B3Provider");
-    }
-    // Return a stable reference
-    return (0, react_1.useMemo)(() => context, [context]);
-}
 // Create queryClient instance
 const queryClient = new react_query_1.QueryClient();
 /**
@@ -98,7 +70,7 @@ function InnerProvider({ children, accountOverride, environment, defaultPermissi
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [automaticallySetFirstEoa, wallets]);
-    return ((0, jsx_runtime_1.jsx)(exports.B3Context.Provider, { value: {
+    return ((0, jsx_runtime_1.jsx)(types_1.B3Context.Provider, { value: {
             account: effectiveAccount,
             setAccount,
             setWallet,

package/dist/{esm/global-account/react/components → cjs/global-account/react/components/B3Provider}/B3Provider.native.d.ts

@@ -1,29 +1,6 @@
-import { PermissionsConfig } from "../../../global-account/types/permissions";
+import { PermissionsConfig } from "../../../../global-account/types/permissions";
 import { Account } from "thirdweb/wallets";
-import { User } from "../../../global-account/types/b3-api.types";
-/**
- * Context type for B3Provider
- */
-export interface B3ContextType {
-    account?: Account;
-    user?: User;
-    setAccount: (account: Account) => void;
-    setUser: (user?: User) => void;
-    initialized: boolean;
-    ready: boolean;
-    environment?: "development" | "production";
-    defaultPermissions?: PermissionsConfig;
-    theme: "light" | "dark";
-}
-/**
- * Context for B3 provider
- */
-export declare const B3Context: import("react").Context<B3ContextType>;
-/**
- * Hook to access the B3 context
- * @throws Error if used outside a B3Provider
- */
-export declare function useB3(): B3ContextType;
+import { B3ContextType } from "./types";
 /**
  * Main B3Provider component
  */

package/dist/cjs/global-account/react/components/{B3Provider.native.js → B3Provider/B3Provider.native.js}

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.B3Context = void 0;
-exports.useB3 = useB3;
 exports.B3Provider = B3Provider;
 exports.InnerProvider = InnerProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const react_2 = require("thirdweb/react");
+const types_1 = require("./types");
 /**
  * Default permissions configuration for B3 provider
  */
@@ -17,31 +16,6 @@ const DEFAULT_PERMISSIONS = {
     startDate: new Date(),
     endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365) // 1 year from now
 };
-/**
- * Context for B3 provider
- */
-exports.B3Context = (0, react_1.createContext)({
-    account: undefined,
-    user: undefined,
-    setAccount: () => { },
-    setUser: () => { },
-    initialized: false,
-    ready: false,
-    environment: "development",
-    theme: "light"
-});
-/**
- * Hook to access the B3 context
- * @throws Error if used outside a B3Provider
- */
-function useB3() {
-    const context = (0, react_1.useContext)(exports.B3Context);
-    if (!context.initialized) {
-        throw new Error("useB3 must be used within a B3Provider");
-    }
-    // Return a stable reference
-    return (0, react_1.useMemo)(() => context, [context]);
-}
 // Create queryClient instance
 const queryClient = new react_query_1.QueryClient();
 /**
@@ -62,8 +36,11 @@ function InnerProvider({ children, accountOverride, environment, defaultPermissi
     const setAccount = (account) => {
         setManuallySetAccount(account);
     };
-    return ((0, jsx_runtime_1.jsx)(exports.B3Context.Provider, { value: {
+    return ((0, jsx_runtime_1.jsx)(types_1.B3Context.Provider, { value: {
             account: effectiveAccount,
+            automaticallySetFirstEoa: false,
+            setWallet: () => { },
+            wallet: undefined,
             setAccount,
             user,
             setUser,

package/dist/cjs/global-account/react/components/B3Provider/types.d.ts

@@ -0,0 +1,25 @@
+import { Account } from "thirdweb/wallets";
+import { User } from "../../../../global-account/types/b3-api.types";
+import { Wallet } from "thirdweb/wallets";
+import { PermissionsConfig } from "../../../../global-account/types/permissions";
+/**
+ * Context type for B3Provider
+ */
+export interface B3ContextType {
+    account?: Account;
+    automaticallySetFirstEoa: boolean;
+    user?: User;
+    setAccount: (account: Account) => void;
+    setWallet: (wallet: Wallet) => void;
+    wallet?: Wallet;
+    setUser: (user?: User) => void;
+    initialized: boolean;
+    ready: boolean;
+    environment?: "development" | "production";
+    defaultPermissions?: PermissionsConfig;
+    theme: "light" | "dark";
+}
+/**
+ * Context for B3 provider
+ */
+export declare const B3Context: import("react").Context<B3ContextType>;