@b3dotfun/sdk 0.0.7-alpha.27 → 0.0.7-alpha.3

package/src/anyspend/react/components/AnySpend.tsx

@@ -1,11 +1,15 @@
 "use client";
 
-import { getDefaultToken, OrderType, Token, TradeType, USDC_BASE } from "@b3dotfun/sdk/anyspend";
 import {
+  getDefaultToken,
+  OrderType,
+  Token,
+  TradeType,
+  USDC_BASE,
   useAnyspendCreateOrder,
   useAnyspendOrderAndTransactions,
-  useAnyspendQuote,
-} from "@b3dotfun/sdk/anyspend/react";
+  useAnyspendQuote
+} from "@b3dotfun/sdk/anyspend";
 import {
   Button,
   ShinyButton,
@@ -16,7 +20,7 @@ import {
   useRouter,
   useSearchParamsSSR,
   useTokenData,
-  useTokenFromUrl,
+  useTokenFromUrl
 } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
@@ -27,7 +31,7 @@ import { ArrowDown, ChevronRightCircle, ChevronsUpDown, CircleAlert, ClipboardIc
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { parseUnits } from "viem";
-import { b3, b3Sepolia, base, mainnet, sepolia } from "viem/chains";
+import { b3Sepolia, base, mainnet, sepolia } from "viem/chains";
 import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
 import { OrderStatus } from "./common/OrderStatus";
@@ -35,7 +39,6 @@ import { OrderTokenAmount } from "./common/OrderTokenAmount";
 import { PanelOnramp } from "./common/PanelOnramp";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment";
 import { TokenBalance } from "./common/TokenBalance";
-import { Warning } from "./common/Warning";
 import { EnterRecipientModal } from "./modals/EnterRecipientModal";
 
 export interface RecipientOption {
@@ -50,7 +53,7 @@ export enum PanelView {
   HISTORY,
   ORDER_DETAILS,
   LOADING,
-  FIAT_PAYMENT,
+  FIAT_PAYMENT
 }
 
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
@@ -63,7 +66,7 @@ export function AnySpend({
   defaultActiveTab = "crypto",
   loadOrder,
   hideTransactionHistoryButton,
-  recipientAddress: recipientAddressFromProps,
+  recipientAddress: recipientAddressFromProps
 }: {
   destinationTokenAddress?: string;
   destinationTokenChainId?: number;
@@ -103,7 +106,7 @@ export function AnySpend({
   const [orderId, setOrderId] = useState<string | undefined>(loadOrder);
   const { orderAndTransactions: oat, getOrderAndTransactionsError } = useAnyspendOrderAndTransactions(
     isMainnet,
-    orderId,
+    orderId
   );
   !!getOrderAndTransactionsError && console.log("getOrderAndTransactionsError", getOrderAndTransactionsError);
 
@@ -123,7 +126,7 @@ export function AnySpend({
   const defaultSrcToken = getDefaultToken(selectedSrcChainId);
   const srcTokenFromUrl = useTokenFromUrl({
     defaultToken: defaultSrcToken,
-    prefix: "from",
+    prefix: "from"
   });
   const [selectedSrcToken, setSelectedSrcToken] = useState<Token>(srcTokenFromUrl);
   const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
@@ -141,12 +144,12 @@ export function AnySpend({
         address: destinationTokenAddress,
         name: "",
         decimals: 18,
-        metadata: {},
+        metadata: {}
       }
     : getDefaultToken(selectedDstChainId);
   const dstTokenFromUrl = useTokenFromUrl({
     defaultToken: defaultDstToken,
-    prefix: "to",
+    prefix: "to"
   });
   const [selectedDstToken, setSelectedDstToken] = useState<Token>(isBuyMode ? defaultDstToken : dstTokenFromUrl);
   const { data: dstTokenMetadata } = useTokenData(selectedDstToken?.chainId, selectedDstToken?.address);
@@ -170,8 +173,8 @@ export function AnySpend({
         name: srcTokenMetadata.name || selectedSrcToken.name,
         metadata: {
           ...selectedSrcToken.metadata,
-          logoURI: srcTokenMetadata?.logoURI || selectedSrcToken.metadata.logoURI,
-        },
+          logoURI: srcTokenMetadata?.logoURI || selectedSrcToken.metadata.logoURI
+        }
       };
 
       setSelectedSrcToken(enhancedToken);
@@ -196,8 +199,8 @@ export function AnySpend({
         name: dstTokenMetadata.name || selectedDstToken.name,
         metadata: {
           ...selectedDstToken.metadata,
-          logoURI: dstTokenMetadata?.logoURI || selectedDstToken.metadata.logoURI,
-        },
+          logoURI: dstTokenMetadata?.logoURI || selectedDstToken.metadata.logoURI
+        }
       };
 
       setSelectedDstToken(enhancedToken);
@@ -270,7 +273,7 @@ export function AnySpend({
       fromAmount: activeTab === "crypto" ? srcAmount : undefined,
       toChainId: selectedDstChainId.toString(),
       toCurrency: selectedDstToken.address,
-      toAmount: dstAmount,
+      toAmount: dstAmount
     };
 
     // Compare with last update to prevent unnecessary URL changes
@@ -328,7 +331,7 @@ export function AnySpend({
     selectedDstToken.address,
     dstAmount,
     router,
-    srcAmountOnRamp,
+    srcAmountOnRamp
   ]);
 
   // Update URL when relevant state changes - but only after initial render
@@ -343,7 +346,7 @@ export function AnySpend({
     selectedSrcToken.address,
     selectedDstChainId,
     selectedDstToken.address,
-    updateSwapParamsInURL,
+    updateSwapParamsInURL
   ]);
 
   // Use our hook for ENS resolution
@@ -390,7 +393,7 @@ export function AnySpend({
           dstTokenAddress: isBuyMode ? destinationTokenAddress : selectedDstToken.address,
           type: OrderType.Swap,
           tradeType: isSrcInputDirty ? TradeType.EXACT_INPUT : TradeType.EXPECTED_OUTPUT,
-          amount: activeInputAmountInWei,
+          amount: activeInputAmountInWei
         }
       : {
           srcChain: base.id,
@@ -399,8 +402,8 @@ export function AnySpend({
           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
@@ -598,7 +601,7 @@ export function AnySpend({
     onError: error => {
       console.error(error);
       toast.error("Failed to create order: " + error.message);
-    },
+    }
   });
 
   // Determine button state and text
@@ -618,7 +621,7 @@ export function AnySpend({
     anyspendQuote,
     activeTab,
     isBuyMode,
-    selectedDstToken.symbol,
+    selectedDstToken.symbol
   ]);
 
   // Handle main button click
@@ -653,7 +656,7 @@ export function AnySpend({
           : selectedDstToken,
         srcAmount: srcAmountBigInt.toString(),
         expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount || "0",
-        creatorAddress: globalAddress,
+        creatorAddress: globalAddress
       });
     } catch (err: any) {
       console.error(err);
@@ -732,7 +735,7 @@ export function AnySpend({
 
     return {
       percentage: Math.abs(percentageValue).toFixed(2),
-      isNegative: percentageValue < 0,
+      isNegative: percentageValue < 0
     };
   };
 
@@ -797,14 +800,14 @@ export function AnySpend({
           className={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",
+            activeTab === "fiat" ? "translate-x-full" : "translate-x-0"
           )}
           style={{ willChange: "transform" }}
         />
         <button
           className={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",
+            activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"
           )}
           onClick={() => setActiveTab("crypto")}
         >
@@ -813,7 +816,7 @@ export function AnySpend({
         <button
           className={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",
+            activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"
           )}
           onClick={() => setActiveTab("fiat")}
         >
@@ -821,14 +824,6 @@ export function AnySpend({
         </button>
       </div>
 
-      {/* {selectedSrcChainId === base.id || selectedDstChainId === base.id || activeTab === "fiat" ? (
-        <>
-          <Warning text="Base is experiencing temporary issues. Please check back later." />
-
-          <div className="h-1" />
-        </>
-      ) : null} */}
-
       <div className="relative flex max-w-[calc(100vw-32px)] flex-col gap-2">
         {/* Send section */}
         {activeTab === "crypto" ? (
@@ -881,7 +876,7 @@ export function AnySpend({
           variant="ghost"
           className={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",
+            (activeTab === "fiat" || isBuyMode) && "top-[calc(50%+56px)] cursor-default"
           )}
           onClick={() => {
             if (activeTab === "fiat" || isBuyMode) {
@@ -927,7 +922,7 @@ export function AnySpend({
                   "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",
+                    : "bg-as-yellow/70 hover:bg-as-yellow text-as-primary"
                 )}
                 onClick={() => setIsOpenPasteRecipientAddressModal(true)}
               >
@@ -991,7 +986,7 @@ export function AnySpend({
               (() => {
                 const { percentage, isNegative } = calculatePriceImpact(
                   anyspendQuote.data.currencyIn.amountUsd,
-                  anyspendQuote.data.currencyOut.amountUsd,
+                  anyspendQuote.data.currencyOut.amountUsd
                 );
 
                 // Parse the percentage as a number for comparison
@@ -1056,7 +1051,7 @@ export function AnySpend({
           onClick={onMainButtonClick}
           className={cn(
             "relative w-full",
-            btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand",
+            btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"
           )}
           textClassName={cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white")}
         >
@@ -1124,12 +1119,12 @@ export function AnySpend({
                 : 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 }}
         >
@@ -1138,7 +1133,7 @@ export function AnySpend({
             <div key="history-view">{historyView}</div>,
             <div key="order-details-view">{orderDetailsView}</div>,
             <div key="loading-view">{OrderDetailsLoadingView}</div>,
-            <div key="fiat-payment-view">{onrampPaymentView}</div>,
+            <div key="fiat-payment-view">{onrampPaymentView}</div>
           ]}
         </TransitionPanel>
         <EnterRecipientModal

package/src/anyspend/react/components/AnySpendBuySpin.tsx

@@ -1,16 +1,19 @@
 import { B3_TOKEN, OrderType } from "@b3dotfun/sdk/anyspend";
+import { baseMainnet } from "@b3dotfun/sdk/shared/constants/chains/supported";
+import { EthIcon } from "./icons/EthIcon";
+import { SolIcon } from "./icons/SolIcon";
+import { UsdcIcon } from "./icons/USDCIcon";
+import { StyleRoot } from "@b3dotfun/sdk/global-account/react";
 import {
   Button,
   GlareCardRounded,
   Input,
-  StyleRoot,
   TextLoop,
   useChainSwitchWithAction,
   useHasMounted,
-  useModalStore,
   useTokenBalance,
+  useModalStore
 } from "@b3dotfun/sdk/global-account/react";
-import { baseMainnet } from "@b3dotfun/sdk/shared/constants/chains/supported";
 import { motion } from "framer-motion";
 import invariant from "invariant";
 import { ArrowRight, Loader2 } from "lucide-react";
@@ -19,9 +22,6 @@ import { toast } from "sonner";
 import { createPublicClient, encodeFunctionData, erc20Abi, formatUnits, http } from "viem";
 import { useAccount, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
 import { AnySpendCustom } from "./AnySpendCustom";
-import { EthIcon } from "./icons/EthIcon";
-import { SolIcon } from "./icons/SolIcon";
-import { UsdcIcon } from "./icons/USDCIcon";
 
 const SPIN_WHEEL_ABI = [
   {
@@ -31,27 +31,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: [],
@@ -62,11 +62,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"
+  }
 ] as const;
 
 interface PaymentConfig {
@@ -113,14 +113,14 @@ function generateEncodedDataForBuyEntriesAndSpin(user: string, quantity: string)
   const encodedData = encodeFunctionData({
     abi: SPIN_WHEEL_ABI,
     functionName: "buyEntriesAndSpin",
-    args: [user as `0x${string}`, BigInt(quantity)],
+    args: [user as `0x${string}`, BigInt(quantity)]
   });
   return encodedData;
 }
 
 const basePublicClient = createPublicClient({
   chain: baseMainnet,
-  transport: http(),
+  transport: http()
 });
 
 export function AnySpendBuySpin({
@@ -131,7 +131,7 @@ export function AnySpendBuySpin({
   chainId,
   recipientAddress,
   prefillQuantity,
-  onSuccess,
+  onSuccess
 }: {
   isMainnet?: boolean;
   loadOrder?: string;
@@ -155,9 +155,9 @@ export function AnySpendBuySpin({
   const {
     formattedBalance: b3Balance,
     isLoading: isBalanceLoading,
-    rawBalance: b3RawBalance,
+    rawBalance: b3RawBalance
   } = useTokenBalance({
-    token: B3_TOKEN,
+    token: B3_TOKEN
   });
 
   // Wagmi hooks
@@ -172,12 +172,12 @@ export function AnySpendBuySpin({
     isLoading: isTxPending,
     isSuccess: isTxSuccess,
     isError: isTxError,
-    error: txError,
+    error: txError
   } = useWaitForTransactionReceipt({
     hash: buyingTxHash as `0x${string}`,
     query: {
-      structuralSharing: false,
-    },
+      structuralSharing: false
+    }
   });
 
   // Handle transaction status
@@ -232,25 +232,25 @@ export function AnySpendBuySpin({
         basePublicClient.readContract({
           address: spinwheelContractAddress as `0x${string}`,
           abi: SPIN_WHEEL_ABI,
-          functionName: "getPaymentConfig",
+          functionName: "getPaymentConfig"
         }),
         basePublicClient.readContract({
           address: spinwheelContractAddress as `0x${string}`,
           abi: SPIN_WHEEL_ABI,
-          functionName: "entryModule",
+          functionName: "entryModule"
         }),
         basePublicClient.readContract({
           address: spinwheelContractAddress as `0x${string}`,
           abi: SPIN_WHEEL_ABI,
-          functionName: "getWheelInfo",
-        }),
+          functionName: "getWheelInfo"
+        })
       ]);
 
       const paymentConfig: PaymentConfig = {
         pricePerEntry: config[1],
         maxEntriesPerUser: config[2],
         paymentRecipient: config[3],
-        entryModule: entryModuleAddress,
+        entryModule: entryModuleAddress
       };
 
       const wheelInfoData: WheelInfo = {
@@ -259,7 +259,7 @@ export function AnySpendBuySpin({
         endTime_: wheelInfo[2],
         totalPrizesAvailable_: wheelInfo[3],
         prizesRequestedCount_: wheelInfo[4],
-        state_: wheelInfo[5],
+        state_: wheelInfo[5]
       };
 
       setPaymentConfig(paymentConfig);
@@ -315,11 +315,7 @@ export function AnySpendBuySpin({
       }
 
       // 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`);
@@ -331,7 +327,7 @@ export function AnySpendBuySpin({
         setIsQuantityValid(false);
         setUserSpinQuantity("");
         setValidationError(
-          `Only ${(wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_).toString()} spins remaining`,
+          `Only ${(wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_).toString()} spins remaining`
         );
         return;
       }
@@ -358,7 +354,7 @@ export function AnySpendBuySpin({
           address: B3_TOKEN.address as `0x${string}`,
           abi: erc20Abi,
           functionName: "allowance",
-          args: [address, paymentConfig.entryModule as `0x${string}`],
+          args: [address, paymentConfig.entryModule as `0x${string}`]
         });
 
         // If allowance is insufficient, request approval
@@ -369,7 +365,7 @@ export function AnySpendBuySpin({
             address: B3_TOKEN.address as `0x${string}`,
             abi: erc20Abi,
             functionName: "approve",
-            args: [paymentConfig.entryModule as `0x${string}`, totalCost],
+            args: [paymentConfig.entryModule as `0x${string}`, totalCost]
           });
 
           toast.info("Approval confirmed. Proceeding with spin purchase...");
@@ -381,7 +377,7 @@ export function AnySpendBuySpin({
           address: spinwheelContractAddress as `0x${string}`,
           abi: SPIN_WHEEL_ABI,
           functionName: "buyEntriesAndSpin",
-          args: [address, BigInt(userSpinQuantity)],
+          args: [address, BigInt(userSpinQuantity)]
         });
 
         setBuyingTxHash(buyHash);
@@ -469,7 +465,7 @@ export function AnySpendBuySpin({
   // Render quantity input prompt
   if (showAmountPrompt) {
     const pricePerEntry = formatUnits(paymentConfig.pricePerEntry, 18);
-    const remainingEntries = wheelInfo ? wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_ : BigInt(0);
+    const remainingEntries = wheelInfo ? wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_ : 0n;
     const wheelStatus = wheelInfo ? getWheelStatus(wheelInfo) : null;
     const isSoldOut = wheelStatus === "sold_out";
     const isActive = wheelStatus === "active";
@@ -485,17 +481,17 @@ export function AnySpendBuySpin({
         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;
@@ -513,7 +509,7 @@ export function AnySpendBuySpin({
               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" : ""}`}
@@ -533,7 +529,7 @@ export function AnySpendBuySpin({
               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"
@@ -573,7 +569,7 @@ export function AnySpendBuySpin({
             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"
@@ -672,8 +668,7 @@ export function AnySpendBuySpin({
       spenderAddress={paymentConfig.entryModule}
       encodedData={encodedData}
       metadata={{
-        type: OrderType.Custom,
-        action: `buy ${userSpinQuantity} spin${userSpinQuantity !== "1" ? "s" : ""}`,
+        action: `buy ${userSpinQuantity} spin${userSpinQuantity !== "1" ? "s" : ""}`
       }}
       header={header}
       onSuccess={txHash => onSuccess?.(txHash)}