@b3dotfun/sdk 0.0.7 → 0.0.8

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

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { getDefaultToken, OrderType, TradeType, USDC_BASE, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote } from "../../../anyspend/index.js";
-import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet, useOnchainName, useRouter, useSearchParamsSSR, useTokenData, useTokenFromUrl } from "../../../global-account/react/index.js";
+import { getDefaultToken, OrderType, TradeType, USDC_BASE } from "../../../anyspend/index.js";
+import { useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, } from "../../../anyspend/react/index.js";
+import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet, useOnchainName, useRouter, useSearchParamsSSR, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/cn.js";
 import { shortenAddress } from "../../../shared/utils/formatAddress.js";
 import { formatDisplayNumber, formatTokenAmount } from "../../../shared/utils/number.js";
@@ -29,7 +30,7 @@ export var PanelView;
     PanelView[PanelView["FIAT_PAYMENT"] = 4] = "FIAT_PAYMENT";
 })(PanelView || (PanelView = {}));
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
-export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet = true, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps }) {
+export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet = true, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, }) {
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     // Determine if we're in "buy mode" based on whether destination token props are provided
@@ -54,7 +55,7 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
     const defaultSrcToken = getDefaultToken(selectedSrcChainId);
     const srcTokenFromUrl = useTokenFromUrl({
         defaultToken: defaultSrcToken,
-        prefix: "from"
+        prefix: "from",
     });
     const [selectedSrcToken, setSelectedSrcToken] = useState(srcTokenFromUrl);
     const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
@@ -70,12 +71,12 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
             address: destinationTokenAddress,
             name: "",
             decimals: 18,
-            metadata: {}
+            metadata: {},
         }
         : getDefaultToken(selectedDstChainId);
     const dstTokenFromUrl = useTokenFromUrl({
         defaultToken: defaultDstToken,
-        prefix: "to"
+        prefix: "to",
     });
     const [selectedDstToken, setSelectedDstToken] = useState(isBuyMode ? defaultDstToken : dstTokenFromUrl);
     const { data: dstTokenMetadata } = useTokenData(selectedDstToken?.chainId, selectedDstToken?.address);
@@ -96,8 +97,8 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
                 name: srcTokenMetadata.name || selectedSrcToken.name,
                 metadata: {
                     ...selectedSrcToken.metadata,
-                    logoURI: srcTokenMetadata?.logoURI || selectedSrcToken.metadata.logoURI
-                }
+                    logoURI: srcTokenMetadata?.logoURI || selectedSrcToken.metadata.logoURI,
+                },
             };
             setSelectedSrcToken(enhancedToken);
         }
@@ -118,8 +119,8 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
                 name: dstTokenMetadata.name || selectedDstToken.name,
                 metadata: {
                     ...selectedDstToken.metadata,
-                    logoURI: dstTokenMetadata?.logoURI || selectedDstToken.metadata.logoURI
-                }
+                    logoURI: dstTokenMetadata?.logoURI || selectedDstToken.metadata.logoURI,
+                },
             };
             setSelectedDstToken(enhancedToken);
         }
@@ -185,7 +186,7 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
             fromAmount: activeTab === "crypto" ? srcAmount : undefined,
             toChainId: selectedDstChainId.toString(),
             toCurrency: selectedDstToken.address,
-            toAmount: dstAmount
+            toAmount: dstAmount,
         };
         // Compare with last update to prevent unnecessary URL changes
         const lastState = lastUrlUpdate.current;
@@ -234,7 +235,7 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
         selectedDstToken.address,
         dstAmount,
         router,
-        srcAmountOnRamp
+        srcAmountOnRamp,
     ]);
     // Update URL when relevant state changes - but only after initial render
     useEffect(() => {
@@ -248,7 +249,7 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
         selectedSrcToken.address,
         selectedDstChainId,
         selectedDstToken.address,
-        updateSwapParamsInURL
+        updateSwapParamsInURL,
     ]);
     // Use our hook for ENS resolution
     // const { address: resolvedAddress } = useResolveOnchainName(
@@ -287,7 +288,7 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
             dstTokenAddress: isBuyMode ? destinationTokenAddress : selectedDstToken.address,
             type: OrderType.Swap,
             tradeType: isSrcInputDirty ? TradeType.EXACT_INPUT : TradeType.EXPECTED_OUTPUT,
-            amount: activeInputAmountInWei
+            amount: activeInputAmountInWei,
         }
         : {
             srcChain: base.id,
@@ -296,7 +297,7 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
             dstTokenAddress: isBuyMode ? destinationTokenAddress : selectedDstToken.address,
             type: OrderType.Swap,
             tradeType: TradeType.EXACT_INPUT,
-            amount: srcAmountOnrampInWei
+            amount: srcAmountOnrampInWei,
         });
     // Replace the old ENS lookup with our new hooks
     const { name: recipientName } = useOnchainName(recipientAddress);
@@ -475,7 +476,7 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
         onError: error => {
             console.error(error);
             toast.error("Failed to create order: " + error.message);
-        }
+        },
     });
     // Determine button state and text
     const btnInfo = useMemo(() => {
@@ -500,7 +501,7 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
         anyspendQuote,
         activeTab,
         isBuyMode,
-        selectedDstToken.symbol
+        selectedDstToken.symbol,
     ]);
     // Handle main button click
     const onMainButtonClick = async () => {
@@ -530,7 +531,7 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
                     : selectedDstToken,
                 srcAmount: srcAmountBigInt.toString(),
                 expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount || "0",
-                creatorAddress: globalAddress
+                creatorAddress: globalAddress,
             });
         }
         catch (err) {
@@ -598,7 +599,7 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
         }
         return {
             percentage: Math.abs(percentageValue).toFixed(2),
-            isNegative: percentageValue < 0
+            isNegative: percentageValue < 0,
         };
     };
     // Add state for rate details toggle
@@ -669,16 +670,16 @@ export function AnySpend({ destinationTokenAddress, destinationTokenChainId, isM
                         : activePanel === PanelView.ORDER_DETAILS
                             ? PanelView.MAIN
                             : activePanel, className: cn("w-full", {
-                        "mt-0": mode === "modal"
+                        "mt-0": mode === "modal",
                     }), variants: {
                         enter: { x: 300, opacity: 0 },
                         center: { x: 0, opacity: 1 },
-                        exit: { x: -300, opacity: 0 }
+                        exit: { x: -300, opacity: 0 },
                     }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
                         _jsx("div", { children: mainView }, "main-view"),
                         _jsx("div", { children: historyView }, "history-view"),
                         _jsx("div", { children: orderDetailsView }, "order-details-view"),
                         _jsx("div", { children: OrderDetailsLoadingView }, "loading-view"),
-                        _jsx("div", { children: onrampPaymentView }, "fiat-payment-view")
+                        _jsx("div", { children: onrampPaymentView }, "fiat-payment-view"),
                     ] }), _jsx(EnterRecipientModal, { isOpenPasteRecipientAddress: isOpenPasteRecipientAddressModal, setIsOpenPasteRecipientAddress: setIsOpenPasteRecipientAddressModal, recipientAddress: recipientAddress, setRecipientAddress: setRecipientAddress })] }) }));
 }

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

@@ -1,4 +1,4 @@
-export declare function AnySpendBuySpin({ isMainnet, loadOrder, mode, spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess }: {
+export declare function AnySpendBuySpin({ isMainnet, loadOrder, mode, spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, }: {
     isMainnet?: boolean;
     loadOrder?: string;
     mode?: "modal" | "page";

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

@@ -1,11 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { B3_TOKEN, OrderType } from "../../../anyspend/index.js";
+import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, useChainSwitchWithAction, useHasMounted, useModalStore, useTokenBalance, } from "../../../global-account/react/index.js";
 import { baseMainnet } from "../../../shared/constants/chains/supported.js";
-import { EthIcon } from "./icons/EthIcon.js";
-import { SolIcon } from "./icons/SolIcon.js";
-import { UsdcIcon } from "./icons/USDCIcon.js";
-import { StyleRoot } from "../../../global-account/react/index.js";
-import { Button, GlareCardRounded, Input, TextLoop, useChainSwitchWithAction, useHasMounted, useTokenBalance, useModalStore } from "../../../global-account/react/index.js";
 import { motion } from "framer-motion";
 import invariant from "invariant";
 import { ArrowRight, Loader2 } from "lucide-react";
@@ -14,6 +10,9 @@ import { toast } from "sonner";
 import { createPublicClient, encodeFunctionData, erc20Abi, formatUnits, http } from "viem";
 import { useAccount, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
 import { AnySpendCustom } from "./AnySpendCustom.js";
+import { EthIcon } from "./icons/EthIcon.js";
+import { SolIcon } from "./icons/SolIcon.js";
+import { UsdcIcon } from "./icons/USDCIcon.js";
 const SPIN_WHEEL_ABI = [
     {
         inputs: [],
@@ -22,27 +21,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: [],
@@ -53,11 +52,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));
@@ -80,15 +79,15 @@ function generateEncodedDataForBuyEntriesAndSpin(user, quantity) {
     const encodedData = encodeFunctionData({
         abi: SPIN_WHEEL_ABI,
         functionName: "buyEntriesAndSpin",
-        args: [user, BigInt(quantity)]
+        args: [user, BigInt(quantity)],
     });
     return encodedData;
 }
 const basePublicClient = createPublicClient({
     chain: baseMainnet,
-    transport: http()
+    transport: http(),
 });
-export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess }) {
+export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, }) {
     const hasMounted = useHasMounted();
     const { setB3ModalOpen } = useModalStore();
     // Payment config state
@@ -97,8 +96,8 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
     const [configError, setConfigError] = useState("");
     const [wheelInfo, setWheelInfo] = useState(null);
     // Fetch B3 token balance
-    const { formattedBalance: b3Balance, isLoading: isBalanceLoading, rawBalance: b3RawBalance } = useTokenBalance({
-        token: B3_TOKEN
+    const { formattedBalance: b3Balance, isLoading: isBalanceLoading, rawBalance: b3RawBalance, } = useTokenBalance({
+        token: B3_TOKEN,
     });
     // Wagmi hooks
     const { address } = useAccount();
@@ -107,11 +106,11 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
     // State for direct buying flow (when user has B3 tokens)
     const [isBuying, setIsBuying] = useState(false);
     const [buyingTxHash, setBuyingTxHash] = useState("");
-    const { isLoading: isTxPending, isSuccess: isTxSuccess, isError: isTxError, error: txError } = useWaitForTransactionReceipt({
+    const { isLoading: isTxPending, isSuccess: isTxSuccess, isError: isTxError, error: txError, } = useWaitForTransactionReceipt({
         hash: buyingTxHash,
         query: {
-            structuralSharing: false
-        }
+            structuralSharing: false,
+        },
     });
     // Handle transaction status
     useEffect(() => {
@@ -159,24 +158,24 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
                 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],
@@ -184,7 +183,7 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
                 endTime_: wheelInfo[2],
                 totalPrizesAvailable_: wheelInfo[3],
                 prizesRequestedCount_: wheelInfo[4],
-                state_: wheelInfo[5]
+                state_: wheelInfo[5],
             };
             setPaymentConfig(paymentConfig);
             setWheelInfo(wheelInfoData);
@@ -232,7 +231,9 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
                 return;
             }
             // Check maximum entries per user (0 means no limit)
-            if (paymentConfig && paymentConfig.maxEntriesPerUser > 0n && BigInt(numValue) > paymentConfig.maxEntriesPerUser) {
+            if (paymentConfig &&
+                paymentConfig.maxEntriesPerUser > BigInt(0) &&
+                BigInt(numValue) > paymentConfig.maxEntriesPerUser) {
                 setIsQuantityValid(false);
                 setUserSpinQuantity("");
                 setValidationError(`Maximum ${paymentConfig.maxEntriesPerUser.toString()} spins allowed`);
@@ -266,7 +267,7 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
                     address: B3_TOKEN.address,
                     abi: erc20Abi,
                     functionName: "allowance",
-                    args: [address, paymentConfig.entryModule]
+                    args: [address, paymentConfig.entryModule],
                 });
                 // If allowance is insufficient, request approval
                 if (allowance < totalCost) {
@@ -275,7 +276,7 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
                         address: B3_TOKEN.address,
                         abi: erc20Abi,
                         functionName: "approve",
-                        args: [paymentConfig.entryModule, totalCost]
+                        args: [paymentConfig.entryModule, totalCost],
                     });
                     toast.info("Approval confirmed. Proceeding with spin purchase...");
                 }
@@ -285,7 +286,7 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
                     address: spinwheelContractAddress,
                     abi: SPIN_WHEEL_ABI,
                     functionName: "buyEntriesAndSpin",
-                    args: [address, BigInt(userSpinQuantity)]
+                    args: [address, BigInt(userSpinQuantity)],
                 });
                 setBuyingTxHash(buyHash);
                 toast.success("Spin purchase transaction submitted!");
@@ -332,7 +333,7 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
     // Render quantity input prompt
     if (showAmountPrompt) {
         const pricePerEntry = formatUnits(paymentConfig.pricePerEntry, 18);
-        const remainingEntries = wheelInfo ? wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_ : 0n;
+        const remainingEntries = wheelInfo ? wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_ : BigInt(0);
         const wheelStatus = wheelInfo ? getWheelStatus(wheelInfo) : null;
         const isSoldOut = wheelStatus === "sold_out";
         const isActive = wheelStatus === "active";
@@ -346,17 +347,17 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
                 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;
@@ -366,18 +367,18 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
         return (_jsx(StyleRoot, { children: _jsxs("div", { className: "bg-b3-react-background flex w-full flex-col items-center", children: [_jsxs("div", { className: "w-full px-4 pb-2 pt-4", children: [_jsx(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: _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" }) }), _jsx(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 ? (_jsxs(_Fragment, { children: [_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 && (_jsxs("div", { className: "inline-flex items-center gap-2", children: [_jsx("div", { className: "bg-as-brand/10 border-as-brand/10 inline-flex items-center rounded-full border px-3 py-1", children: _jsxs("p", { className: "text-as-brand text-sm font-medium", children: [pricePerEntry, " $B3 per spin"] }) }), _jsx("div", { className: "bg-as-brand/10 border-as-brand/10 inline-flex items-center rounded-full border px-3 py-1", children: _jsxs("p", { className: "text-as-brand text-sm font-medium", children: [remainingEntries.toString(), " remaining"] }) })] }))] })) : (statusInfo && (_jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-as-primary text-lg font-semibold", children: statusInfo.title }), _jsx("p", { className: "text-as-primary/70 mt-2 text-sm", children: statusInfo.message })] }))) })] }), _jsx(motion.div, { initial: false, animate: {
                             opacity: hasMounted ? 1 : 0,
                             y: hasMounted ? 0 : 20,
-                            filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                            filter: hasMounted ? "blur(0px)" : "blur(10px)",
                         }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: isActive ? (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-as-primary/70 text-sm font-medium", children: "Number of spins" }), _jsxs("span", { className: "text-as-primary/50 flex items-center gap-1 text-sm", children: ["Available: ", isBalanceLoading ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : `${b3Balance} B3`] })] }), _jsxs("div", { className: "relative", children: [_jsx(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"}` }), _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 && _jsx("p", { className: "text-as-red text-sm", children: validationError }), _jsx("div", { className: "bg-as-on-surface-2/30 rounded-lg border border-white/10 p-4 backdrop-blur-sm", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-primary/70 text-sm font-medium", children: "Total Cost:" }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs("span", { className: "text-as-primary text-lg font-bold", children: [displayQuantity && isQuantityValid ? formatUnits(totalCost, 18) : "0", " B3"] }) })] }) }), _jsx("div", { className: "mt-4", children: (() => {
                                         const hasEnoughBalance = b3RawBalance && totalCost <= b3RawBalance;
                                         if (!hasEnoughBalance && debouncedQuantity) {
@@ -388,6 +389,7 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
     // AnySpend flow for when user needs to swap to B3
     const encodedData = generateEncodedDataForBuyEntriesAndSpin(address || "", userSpinQuantity);
     return (_jsx(AnySpendCustom, { isMainnet: isMainnet, loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: OrderType.Custom, dstChainId: chainId, dstToken: B3_TOKEN, dstAmount: totalCost.toString(), contractAddress: spinwheelContractAddress, spenderAddress: paymentConfig.entryModule, encodedData: encodedData, metadata: {
-            action: `buy ${userSpinQuantity} spin${userSpinQuantity !== "1" ? "s" : ""}`
+            type: OrderType.Custom,
+            action: `buy ${userSpinQuantity} spin${userSpinQuantity !== "1" ? "s" : ""}`,
         }, header: header, onSuccess: txHash => onSuccess?.(txHash), showRecipient: false }));
 }

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

@@ -1,6 +1,6 @@
-import { GetQuoteResponse, OrderType, Token } from "../../../anyspend";
+import { AnySpendMetadata, GetQuoteResponse, OrderType, Token } from "../../../anyspend";
 import React from "react";
-export declare function AnySpendCustom({ isMainnet, loadOrder, mode, recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient }: {
+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: any;
-    header: ({ anyspendPrice, isLoadingAnyspendPrice }: {
+    metadata: AnySpendMetadata;
+    header: ({ anyspendPrice, isLoadingAnyspendPrice, }: {
         anyspendPrice: GetQuoteResponse | undefined;
         isLoadingAnyspendPrice: boolean;
     }) => React.JSX.Element;