@b3dotfun/sdk 0.0.7 → 0.0.8

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

@@ -1,15 +1,11 @@
 "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";
+  useAnyspendQuote,
+} from "@b3dotfun/sdk/anyspend/react";
 import {
   Button,
   ShinyButton,
@@ -20,7 +16,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";
@@ -31,7 +27,7 @@ import { ArrowDown, ChevronRightCircle, ChevronsUpDown, CircleAlert, ClipboardIc
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { parseUnits } from "viem";
-import { b3Sepolia, base, mainnet, sepolia } from "viem/chains";
+import { b3, b3Sepolia, base, mainnet, sepolia } from "viem/chains";
 import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
 import { OrderStatus } from "./common/OrderStatus";
@@ -39,6 +35,7 @@ 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 {
@@ -53,7 +50,7 @@ export enum PanelView {
   HISTORY,
   ORDER_DETAILS,
   LOADING,
-  FIAT_PAYMENT
+  FIAT_PAYMENT,
 }
 
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
@@ -66,7 +63,7 @@ export function AnySpend({
   defaultActiveTab = "crypto",
   loadOrder,
   hideTransactionHistoryButton,
-  recipientAddress: recipientAddressFromProps
+  recipientAddress: recipientAddressFromProps,
 }: {
   destinationTokenAddress?: string;
   destinationTokenChainId?: number;
@@ -106,7 +103,7 @@ export function AnySpend({
   const [orderId, setOrderId] = useState<string | undefined>(loadOrder);
   const { orderAndTransactions: oat, getOrderAndTransactionsError } = useAnyspendOrderAndTransactions(
     isMainnet,
-    orderId
+    orderId,
   );
   !!getOrderAndTransactionsError && console.log("getOrderAndTransactionsError", getOrderAndTransactionsError);
 
@@ -126,7 +123,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);
@@ -144,12 +141,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);
@@ -173,8 +170,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);
@@ -199,8 +196,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);
@@ -273,7 +270,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
@@ -331,7 +328,7 @@ export function AnySpend({
     selectedDstToken.address,
     dstAmount,
     router,
-    srcAmountOnRamp
+    srcAmountOnRamp,
   ]);
 
   // Update URL when relevant state changes - but only after initial render
@@ -346,7 +343,7 @@ export function AnySpend({
     selectedSrcToken.address,
     selectedDstChainId,
     selectedDstToken.address,
-    updateSwapParamsInURL
+    updateSwapParamsInURL,
   ]);
 
   // Use our hook for ENS resolution
@@ -393,7 +390,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,
@@ -402,8 +399,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
@@ -601,7 +598,7 @@ export function AnySpend({
     onError: error => {
       console.error(error);
       toast.error("Failed to create order: " + error.message);
-    }
+    },
   });
 
   // Determine button state and text
@@ -621,7 +618,7 @@ export function AnySpend({
     anyspendQuote,
     activeTab,
     isBuyMode,
-    selectedDstToken.symbol
+    selectedDstToken.symbol,
   ]);
 
   // Handle main button click
@@ -656,7 +653,7 @@ export function AnySpend({
           : selectedDstToken,
         srcAmount: srcAmountBigInt.toString(),
         expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount || "0",
-        creatorAddress: globalAddress
+        creatorAddress: globalAddress,
       });
     } catch (err: any) {
       console.error(err);
@@ -735,7 +732,7 @@ export function AnySpend({
 
     return {
       percentage: Math.abs(percentageValue).toFixed(2),
-      isNegative: percentageValue < 0
+      isNegative: percentageValue < 0,
     };
   };
 
@@ -800,14 +797,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")}
         >
@@ -816,7 +813,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")}
         >
@@ -824,6 +821,14 @@ 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" ? (
@@ -876,7 +881,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) {
@@ -922,7 +927,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)}
               >
@@ -986,7 +991,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
@@ -1051,7 +1056,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")}
         >
@@ -1119,12 +1124,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 }}
         >
@@ -1133,7 +1138,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,19 +1,16 @@
 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";
@@ -22,6 +19,9 @@ 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,7 +315,11 @@ export function AnySpendBuySpin({
       }
 
       // 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`);
@@ -327,7 +331,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;
       }
@@ -354,7 +358,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
@@ -365,7 +369,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...");
@@ -377,7 +381,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);
@@ -465,7 +469,7 @@ export function AnySpendBuySpin({
   // 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";
@@ -481,17 +485,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;
@@ -509,7 +513,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" : ""}`}
@@ -529,7 +533,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"
@@ -569,7 +573,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"
@@ -668,7 +672,8 @@ export function AnySpendBuySpin({
       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)}