@b3dotfun/sdk 0.0.14-alpha.2 → 0.0.14-alpha.3

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

@@ -13,10 +13,10 @@ const react_2 = require("../../../global-account/react");
 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"));
 const lucide_react_1 = require("lucide-react");
-const react_3 = require("react");
+const react_3 = require("motion/react");
+const react_4 = require("react");
 const sonner_1 = require("sonner");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
@@ -43,14 +43,14 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
     // Determine if we're in "buy mode" based on whether destination token props are provided
     const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
     // Add refs to track URL state
-    const initialUrlProcessed = (0, react_3.useRef)(false);
-    const lastUrlUpdate = (0, react_3.useRef)(null);
-    const [activeTab, setActiveTab] = (0, react_3.useState)(defaultActiveTab);
-    const [orderId, setOrderId] = (0, react_3.useState)(loadOrder);
+    const initialUrlProcessed = (0, react_4.useRef)(false);
+    const lastUrlUpdate = (0, react_4.useRef)(null);
+    const [activeTab, setActiveTab] = (0, react_4.useState)(defaultActiveTab);
+    const [orderId, setOrderId] = (0, react_4.useState)(loadOrder);
     const { orderAndTransactions: oat, getOrderAndTransactionsError } = (0, react_1.useAnyspendOrderAndTransactions)(isMainnet, orderId);
     !!getOrderAndTransactionsError && console.log("getOrderAndTransactionsError", getOrderAndTransactionsError);
-    const [activePanel, setActivePanel] = (0, react_3.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
-    const [customRecipients, setCustomRecipients] = (0, react_3.useState)([]);
+    const [activePanel, setActivePanel] = (0, react_4.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
+    const [customRecipients, setCustomRecipients] = (0, react_4.useState)([]);
     // const [newRecipientAddress, setNewRecipientAddress] = useState("");
     // const recipientInputRef = useRef<HTMLInputElement>(null);
     // Get initial chain IDs from URL or defaults
@@ -58,19 +58,19 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
     const initialDstChainId = parseInt(searchParams.get("toChainId") || "0") ||
         (isBuyMode ? destinationTokenChainId : isMainnet ? chains_1.base.id : chains_1.b3Sepolia.id);
     // State for source chain/token selection
-    const [selectedSrcChainId, setSelectedSrcChainId] = (0, react_3.useState)(initialSrcChainId);
+    const [selectedSrcChainId, setSelectedSrcChainId] = (0, react_4.useState)(initialSrcChainId);
     const defaultSrcToken = (0, anyspend_1.getDefaultToken)(selectedSrcChainId);
     const srcTokenFromUrl = (0, react_2.useTokenFromUrl)({
         defaultToken: defaultSrcToken,
         prefix: "from",
     });
-    const [selectedSrcToken, setSelectedSrcToken] = (0, react_3.useState)(srcTokenFromUrl);
+    const [selectedSrcToken, setSelectedSrcToken] = (0, react_4.useState)(srcTokenFromUrl);
     const { data: srcTokenMetadata } = (0, react_2.useTokenData)(selectedSrcToken?.chainId, selectedSrcToken?.address);
-    const [srcAmount, setSrcAmount] = (0, react_3.useState)(searchParams.get("fromAmount") || "0.01");
+    const [srcAmount, setSrcAmount] = (0, react_4.useState)(searchParams.get("fromAmount") || "0.01");
     // State for onramp amount
-    const [srcAmountOnRamp, setSrcAmountOnRamp] = (0, react_3.useState)(searchParams.get("fromAmount") || "5");
+    const [srcAmountOnRamp, setSrcAmountOnRamp] = (0, react_4.useState)(searchParams.get("fromAmount") || "5");
     // State for destination chain/token selection
-    const [selectedDstChainId, setSelectedDstChainId] = (0, react_3.useState)(initialDstChainId);
+    const [selectedDstChainId, setSelectedDstChainId] = (0, react_4.useState)(initialDstChainId);
     const defaultDstToken = isBuyMode
         ? {
             symbol: "",
@@ -85,15 +85,15 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         defaultToken: defaultDstToken,
         prefix: "to",
     });
-    const [selectedDstToken, setSelectedDstToken] = (0, react_3.useState)(isBuyMode ? defaultDstToken : dstTokenFromUrl);
+    const [selectedDstToken, setSelectedDstToken] = (0, react_4.useState)(isBuyMode ? defaultDstToken : dstTokenFromUrl);
     const { data: dstTokenMetadata } = (0, react_2.useTokenData)(selectedDstToken?.chainId, selectedDstToken?.address);
-    const [dstAmount, setDstAmount] = (0, react_3.useState)(searchParams.get("toAmount") || "");
-    const [isSrcInputDirty, setIsSrcInputDirty] = (0, react_3.useState)(true);
+    const [dstAmount, setDstAmount] = (0, react_4.useState)(searchParams.get("toAmount") || "");
+    const [isSrcInputDirty, setIsSrcInputDirty] = (0, react_4.useState)(true);
     // Add refs to track if we've applied metadata
-    const appliedSrcMetadataRef = (0, react_3.useRef)(false);
-    const appliedDstMetadataRef = (0, react_3.useRef)(false);
+    const appliedSrcMetadataRef = (0, react_4.useRef)(false);
+    const appliedDstMetadataRef = (0, react_4.useRef)(false);
     // Update source token with metadata
-    (0, react_3.useEffect)(() => {
+    (0, react_4.useEffect)(() => {
         if (selectedSrcToken && srcTokenMetadata && !appliedSrcMetadataRef.current) {
             // Mark as applied
             appliedSrcMetadataRef.current = true;
@@ -111,11 +111,11 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         }
     }, [srcTokenMetadata, selectedSrcToken]);
     // Reset source token ref when address/chain changes
-    (0, react_3.useEffect)(() => {
+    (0, react_4.useEffect)(() => {
         appliedSrcMetadataRef.current = false;
     }, [selectedSrcToken.address, selectedSrcToken.chainId]);
     // Update destination token with metadata
-    (0, react_3.useEffect)(() => {
+    (0, react_4.useEffect)(() => {
         if (selectedDstToken && dstTokenMetadata && !appliedDstMetadataRef.current) {
             // Mark as applied
             appliedDstMetadataRef.current = true;
@@ -133,11 +133,11 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         }
     }, [dstTokenMetadata, selectedDstToken]);
     // Reset destination token ref when address/chain changes
-    (0, react_3.useEffect)(() => {
+    (0, react_4.useEffect)(() => {
         appliedDstMetadataRef.current = false;
     }, [selectedDstToken.address, selectedDstToken.chainId]);
     // Load swap configuration from URL on initial render
-    (0, react_3.useEffect)(() => {
+    (0, react_4.useEffect)(() => {
         // Skip if we've already processed the URL or if we have an order to load
         if (initialUrlProcessed.current || loadOrder)
             return;
@@ -174,7 +174,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         initialUrlProcessed.current = true;
     }, [searchParams, loadOrder]);
     // Update URL when swap configuration changes - but not on initial load
-    const updateSwapParamsInURL = (0, react_3.useCallback)(() => {
+    const updateSwapParamsInURL = (0, react_4.useCallback)(() => {
         // Skip if:
         // 1. There's an active order or orderId in the URL
         // 2. We're not on the main panel
@@ -245,7 +245,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         srcAmountOnRamp,
     ]);
     // Update URL when relevant state changes - but only after initial render
-    (0, react_3.useEffect)(() => {
+    (0, react_4.useEffect)(() => {
         // Skip the URL update on first render
         if (initialUrlProcessed.current) {
             updateSwapParamsInURL();
@@ -276,10 +276,10 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
     //   [selectedDstChainId, newRecipientAddress, resolvedAddress]
     // );
     // State for recipient selection
-    const [recipientAddress, setRecipientAddress] = (0, react_3.useState)();
+    const [recipientAddress, setRecipientAddress] = (0, react_4.useState)();
     const { address: globalAddress, wallet: globalWallet } = (0, react_2.useAccountWallet)();
     // Set default recipient address when wallet changes
-    (0, react_3.useEffect)(() => {
+    (0, react_4.useEffect)(() => {
         setRecipientAddress(recipientAddressFromProps || globalAddress);
     }, [recipientAddressFromProps, globalAddress]);
     // Get anyspend price
@@ -309,7 +309,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
     const recipientProfile = (0, react_2.useProfile)({ address: recipientAddress });
     const recipientName = recipientProfile.data?.name?.replace(/\.b3\.fun/g, "");
     // Load custom recipients from local storage on mount
-    (0, react_3.useEffect)(() => {
+    (0, react_4.useEffect)(() => {
         try {
             const savedRecipients = localStorage.getItem(ANYSPEND_RECIPIENTS_KEY);
             if (savedRecipients) {
@@ -440,7 +440,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
     //   }
     // };
     // Update dependent amount when relay price changes
-    (0, react_3.useEffect)(() => {
+    (0, react_4.useEffect)(() => {
         if (anyspendQuote?.data &&
             anyspendQuote.data.currencyIn?.amount &&
             anyspendQuote.data.currencyIn?.currency?.decimals &&
@@ -483,7 +483,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         },
     });
     // Determine button state and text
-    const btnInfo = (0, react_3.useMemo)(() => {
+    const btnInfo = (0, react_4.useMemo)(() => {
         if (activeInputAmountInWei === "0")
             return { text: "Enter an amount", disable: true, error: false };
         if (isLoadingAnyspendQuote)
@@ -555,7 +555,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
     // const setIsDynamicModalOpen = useModalStore(state => state.setB3ModalOpen);
     // const setDynamicModalContentType = useModalStore(state => state.setB3ModalContentType);
     // Update useEffect for URL parameter to not override loadOrder
-    (0, react_3.useEffect)(() => {
+    (0, react_4.useEffect)(() => {
         if (loadOrder)
             return; // Skip if we have a loadOrder
         const orderIdParam = searchParams.get("orderId");
@@ -573,7 +573,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         router.push(`${window.location.pathname}?${params.toString()}`);
     };
     // Save custom recipients to local storage when they change
-    (0, react_3.useEffect)(() => {
+    (0, react_4.useEffect)(() => {
         try {
             localStorage.setItem(ANYSPEND_RECIPIENTS_KEY, JSON.stringify(customRecipients));
         }
@@ -582,10 +582,10 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         }
     }, [customRecipients]);
     // Scroll to top when panel changes
-    (0, react_3.useEffect)(() => {
+    (0, react_4.useEffect)(() => {
         window.scrollTo({ top: 0, behavior: "smooth" });
     }, [activePanel]);
-    const [isOpenPasteRecipientAddressModal, setIsOpenPasteRecipientAddressModal] = (0, react_3.useState)(false);
+    const [isOpenPasteRecipientAddressModal, setIsOpenPasteRecipientAddressModal] = (0, react_4.useState)(false);
     const calculatePriceImpact = (inputUsd, outputUsd) => {
         if (!inputUsd || !outputUsd) {
             return { percentage: "0.00", isNegative: false };
@@ -613,13 +613,13 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
                                 setOrderId(undefined);
                                 setActivePanel(PanelView.MAIN);
                             } })] })), mode === "page" && (0, jsx_runtime_1.jsx)("div", { className: "h-12" })] }) }));
-    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 relative mx-auto mb-4 grid h-10 w-fit min-w-[180px] grid-cols-2 rounded-xl", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("relative z-10 h-full w-full rounded-xl px-6 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => setActiveTab("crypto"), children: "Crypto" }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("relative z-10 h-full w-full rounded-xl px-6 text-sm font-medium transition-colors duration-100", activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => setActiveTab("fiat"), children: "Fiat" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-on-surface-1 relative flex w-full flex-col gap-2 rounded-2xl p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Send" }), (0, jsx_runtime_1.jsx)(TokenBalance_1.TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
+    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 relative mx-auto mb-4 grid h-10 w-fit min-w-[180px] grid-cols-2 rounded-xl", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("relative z-10 h-full w-full rounded-xl px-6 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => setActiveTab("crypto"), children: "Crypto" }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("relative z-10 h-full w-full rounded-xl px-6 text-sm font-medium transition-colors duration-100", activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => setActiveTab("fiat"), children: "Fiat" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-on-surface-1 relative flex w-full flex-col gap-2 rounded-2xl p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Send" }), (0, jsx_runtime_1.jsx)(TokenBalance_1.TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
                                             setIsSrcInputDirty(true);
                                             setSrcAmount(value);
                                         } })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                                     setIsSrcInputDirty(true);
                                     setSrcAmount(value);
-                                }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, { style: "currency", fallback: "" }) })] })) : ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("bg-as-n-8 border-as-stroke absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-2xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", (activeTab === "fiat" || isBuyMode) && "top-[calc(50%+56px)] cursor-default"), onClick: () => {
+                                }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, { style: "currency", fallback: "" }) })] })) : ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("bg-as-n-8 border-as-stroke absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-2xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", (activeTab === "fiat" || isBuyMode) && "top-[calc(50%+56px)] cursor-default"), onClick: () => {
                             if (activeTab === "fiat" || isBuyMode) {
                                 return;
                             }
@@ -638,7 +638,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-on-surface-1 relative flex w-full flex-col gap-2 rounded-2xl p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: (0, cn_1.cn)("text-as-primary/50 flex h-7 items-center gap-1 rounded-lg px-2", globalAddress && recipientAddress === globalAddress
+                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-on-surface-1 relative flex w-full flex-col gap-2 rounded-2xl p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: (0, cn_1.cn)("text-as-primary/50 flex h-7 items-center gap-1 rounded-lg px-2", globalAddress && recipientAddress === globalAddress
                                             ? "bg-as-on-surface-2 hover:bg-as-on-surface-3"
                                             : "bg-as-yellow/70 hover:bg-as-yellow text-as-primary"), onClick: () => setIsOpenPasteRecipientAddressModal(true), children: [globalAddress && recipientAddress === globalAddress && globalWallet?.meta?.icon ? ((0, jsx_runtime_1.jsx)("img", { src: globalWallet?.meta?.icon, alt: "Current wallet", className: "bg-as-primary h-4 w-4 rounded-full" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ClipboardIcon, { className: "h-4 w-4" })), (0, jsx_runtime_1.jsx)("div", { className: "text-sm", children: recipientName ? recipientName : (0, formatAddress_1.shortenAddress)(recipientAddress) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-3 w-3" })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setIsOpenPasteRecipientAddressModal(true), children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-3 w-3" })] }))] }), isBuyMode ? (
                             // Fixed destination token display in buy mode
@@ -657,7 +657,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
                                             }
                                             // Using inline style to ensure color displays
                                             return ((0, jsx_runtime_1.jsxs)("span", { className: "ml-2", style: { color: percentageNum >= 10 ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
-                                        })()] })] })] }), getAnyspendQuoteError && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl p-4", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { className: "bg-as-red h-4 min-h-4 w-4 min-w-4 rounded-full p-0 text-sm font-medium text-white" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm", children: getAnyspendQuoteError.message })] })), (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "flex w-full max-w-[460px] flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: [btnInfo.text, !btnInfo.disable && !btnInfo.error && ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 h-6 w-6 -translate-y-1/2 opacity-70" }))] }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-full" }))] })] }));
+                                        })()] })] })] }), getAnyspendQuoteError && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl p-4", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { className: "bg-as-red h-4 min-h-4 w-4 min-w-4 rounded-full p-0 text-sm font-medium text-white" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm", children: getAnyspendQuoteError.message })] })), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "flex w-full max-w-[460px] flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: [btnInfo.text, !btnInfo.disable && !btnInfo.error && ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 h-6 w-6 -translate-y-1/2 opacity-70" }))] }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-full" }))] })] }));
     const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             setActivePanel(PanelView.ORDER_DETAILS);

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

@@ -5,8 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const bondkit_1 = require("@b3dotfun/bondkit");
 const react_1 = require("../../../global-account/react");
 const supported_1 = require("../../../shared/constants/chains/supported");
-const framer_motion_1 = require("framer-motion");
-const react_2 = require("react");
+const react_2 = require("motion/react");
+const react_3 = require("react");
 const viem_1 = require("viem");
 const bondKit_1 = require("../../abis/bondKit");
 const AnySpendCustom_1 = require("./AnySpendCustom");
@@ -26,16 +26,16 @@ function formatNumberWithCommas(x) {
 }
 function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, minTokensOut = "0", imageUrl, ethAmount: initialEthAmount, onSuccess, }) {
     const hasMounted = (0, react_1.useHasMounted)();
-    const [showAmountPrompt, setShowAmountPrompt] = (0, react_2.useState)(!initialEthAmount);
-    const [ethAmount, setEthAmount] = (0, react_2.useState)(initialEthAmount || "");
-    const [isAmountValid, setIsAmountValid] = (0, react_2.useState)(!!initialEthAmount);
-    const [validationError, setValidationError] = (0, react_2.useState)("");
-    const [tokenName, setTokenName] = (0, react_2.useState)("");
-    const [tokenSymbol, setTokenSymbol] = (0, react_2.useState)("");
-    const [quote, setQuote] = (0, react_2.useState)(null);
-    const [isLoadingQuote, setIsLoadingQuote] = (0, react_2.useState)(false);
+    const [showAmountPrompt, setShowAmountPrompt] = (0, react_3.useState)(!initialEthAmount);
+    const [ethAmount, setEthAmount] = (0, react_3.useState)(initialEthAmount || "");
+    const [isAmountValid, setIsAmountValid] = (0, react_3.useState)(!!initialEthAmount);
+    const [validationError, setValidationError] = (0, react_3.useState)("");
+    const [tokenName, setTokenName] = (0, react_3.useState)("");
+    const [tokenSymbol, setTokenSymbol] = (0, react_3.useState)("");
+    const [quote, setQuote] = (0, react_3.useState)(null);
+    const [isLoadingQuote, setIsLoadingQuote] = (0, react_3.useState)(false);
     // Create BondKit client
-    const bondkitTokenClient = (0, react_2.useMemo)(() => {
+    const bondkitTokenClient = (0, react_3.useMemo)(() => {
         if (!contractAddress)
             return null;
         try {
@@ -54,7 +54,7 @@ function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, mi
         transport: (0, viem_1.http)(),
     });
     // Fetch token name from contract
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         async function fetchTokenName() {
             try {
                 const [name, symbol] = await Promise.all([
@@ -85,7 +85,7 @@ function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, mi
     // Get native token data for the chain
     const { data: tokenData, isError: isTokenError, isLoading, } = (0, react_1.useTokenData)(supported_1.baseMainnet.id, "0x0000000000000000000000000000000000000000");
     // Convert token data to AnySpend Token type
-    const dstToken = (0, react_2.useMemo)(() => {
+    const dstToken = (0, react_3.useMemo)(() => {
         if (!tokenData)
             return null;
         return {
@@ -100,7 +100,7 @@ function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, mi
         };
     }, [tokenData]);
     // Debounced quote fetching
-    const debouncedGetQuote = (0, react_2.useMemo)(() => debounce(async (val) => {
+    const debouncedGetQuote = (0, react_3.useMemo)(() => debounce(async (val) => {
         if (!val || Number(val) <= 0 || !bondkitTokenClient) {
             setQuote(null);
             return;
@@ -120,7 +120,7 @@ function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, mi
         }
     }, 500), [bondkitTokenClient]);
     // Fetch initial quote if ethAmount is provided
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         if (initialEthAmount && bondkitTokenClient) {
             debouncedGetQuote(initialEthAmount);
         }
@@ -179,15 +179,15 @@ function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, mi
         return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: "b3-root b3-modal bg-b3-react-background flex w-full flex-col items-center p-8", children: (0, jsx_runtime_1.jsxs)("p", { className: "text-as-red text-center text-sm", children: ["Failed to fetch native token information for chain ", supported_1.baseMainnet.id, ". Please try again."] }) }) }));
     }
     if (showAmountPrompt) {
-        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: {
+        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)(react_2.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: imageUrl && ((0, jsx_runtime_1.jsxs)("div", { className: "relative size-16", 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: "token preview", className: "size-full rounded-lg object-cover", src: imageUrl }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-[50%] border border-white/20" })] })] })) }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: false, animate: {
+                                }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "mb-4 flex justify-center", children: imageUrl && ((0, jsx_runtime_1.jsxs)("div", { className: "relative size-16", 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: "token preview", className: "size-full rounded-lg object-cover", src: imageUrl }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-[50%] border border-white/20" })] })] })) }), (0, jsx_runtime_1.jsx)(react_2.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.jsxs)("h2", { className: "font-sf-rounded text-as-primary mb-4 text-2xl font-bold", children: ["Buy ", tokenName] }) })] }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: false, animate: {
+                                }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "text-center", children: (0, jsx_runtime_1.jsxs)("h2", { className: "font-sf-rounded text-as-primary mb-4 text-2xl font-bold", children: ["Buy ", tokenName] }) })] }), (0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: false, animate: {
                             opacity: hasMounted ? 1 : 0,
                             y: hasMounted ? 0 : 20,
                             filter: hasMounted ? "blur(0px)" : "blur(10px)",

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

@@ -8,10 +8,10 @@ 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 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_2 = require("motion/react");
+const react_3 = require("react");
 const sonner_1 = require("sonner");
 const viem_1 = require("viem");
 const wagmi_1 = require("wagmi");
@@ -94,10 +94,10 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
     const hasMounted = (0, react_1.useHasMounted)();
     const { setB3ModalOpen } = (0, react_1.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,
@@ -107,8 +107,8 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
     const { writeContractAsync } = (0, wagmi_1.useWriteContract)();
     const { switchChainAndExecute } = (0, react_1.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 [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: {
@@ -116,7 +116,7 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
         },
     });
     // Handle transaction status
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         if (!buyingTxHash)
             return;
         if (isTxSuccess) {
@@ -133,13 +133,13 @@ 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)("");
-    (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)("");
+    (0, react_3.useEffect)(() => {
         if (prefillQuantity && wheelInfo) {
             const remainingSpins = wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_;
             const adjustedQuantity = BigInt(prefillQuantity) > remainingSpins ? remainingSpins.toString() : prefillQuantity;
@@ -149,7 +149,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 {
@@ -199,11 +199,11 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
         }
     }, [spinwheelContractAddress]);
     // 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);
         }, 500);
@@ -363,18 +363,18 @@ function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwhee
             }
         };
         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: {
+        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)(react_2.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: `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: {
+                                }, 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)(react_2.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: 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: {
+                                            })() }), 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)(react_2.motion.div, { initial: false, animate: {
                             opacity: hasMounted ? 1 : 0,
                             y: hasMounted ? 0 : 20,
                             filter: hasMounted ? "blur(0px)" : "blur(10px)",