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

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

@@ -1,14 +1,17 @@
 import { ABI_ERC20_STAKING, B3_TOKEN, OrderType } from "@b3dotfun/sdk/anyspend";
+import { EthIcon } from "./icons/EthIcon";
+import { SolIcon } from "./icons/SolIcon";
+import { UsdcIcon } from "./icons/USDCIcon";
 import {
   Button,
   GlareCardRounded,
   Input,
-  StyleRoot,
   TextLoop,
-  useChainSwitchWithAction,
   useHasMounted,
   useModalStore,
+  useChainSwitchWithAction,
   useTokenBalance,
+  StyleRoot
 } from "@b3dotfun/sdk/global-account/react";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { motion } from "framer-motion";
@@ -20,13 +23,10 @@ import { createPublicClient, encodeFunctionData, erc20Abi, http } from "viem";
 import { base } from "viem/chains";
 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 basePublicClient = createPublicClient({
   chain: base,
-  transport: http(),
+  transport: http()
 });
 
 const ERC20Staking = "0xbf04200be3cbf371467a539706393c81c470f523";
@@ -36,7 +36,7 @@ function generateEncodedDataForStakingB3(amount: string, beneficiary: string): s
   const encodedData = encodeFunctionData({
     abi: ABI_ERC20_STAKING,
     functionName: "stake",
-    args: [BigInt(amount), beneficiary],
+    args: [BigInt(amount), beneficiary]
   });
   return encodedData;
 }
@@ -47,7 +47,7 @@ export function AnySpendStakeB3({
   mode = "modal",
   recipientAddress,
   stakeAmount,
-  onSuccess,
+  onSuccess
 }: {
   isMainnet?: boolean;
   loadOrder?: string;
@@ -63,9 +63,9 @@ export function AnySpendStakeB3({
   const {
     formattedBalance: b3Balance,
     isLoading: isBalanceLoading,
-    rawBalance: b3RawBalance,
+    rawBalance: b3RawBalance
   } = useTokenBalance({
-    token: B3_TOKEN,
+    token: B3_TOKEN
   });
 
   // Wagmi hooks for direct staking
@@ -82,8 +82,8 @@ export function AnySpendStakeB3({
   const { isLoading: isTxPending, isSuccess: isTxSuccess } = useWaitForTransactionReceipt({
     hash: stakingTxHash as `0x${string}`,
     query: {
-      structuralSharing: false, // Disable to avoid BigInt serialization issues
-    },
+      structuralSharing: false // Disable to avoid BigInt serialization issues
+    }
   });
 
   // Show success modal when transaction is confirmed
@@ -197,7 +197,7 @@ export function AnySpendStakeB3({
           address: B3_TOKEN.address as `0x${string}`,
           abi: erc20Abi,
           functionName: "allowance",
-          args: [address, ERC20Staking as `0x${string}`],
+          args: [address, ERC20Staking as `0x${string}`]
         });
 
         // If allowance is insufficient, request approval
@@ -208,7 +208,7 @@ export function AnySpendStakeB3({
             address: B3_TOKEN.address as `0x${string}`,
             abi: erc20Abi,
             functionName: "approve",
-            args: [ERC20Staking as `0x${string}`, BigInt(userStakeAmount)],
+            args: [ERC20Staking as `0x${string}`, BigInt(userStakeAmount)]
           });
 
           toast.info("Approval confirmed. Proceeding with stake...");
@@ -220,7 +220,7 @@ export function AnySpendStakeB3({
           address: ERC20Staking as `0x${string}`,
           abi: ABI_ERC20_STAKING,
           functionName: "stake",
-          args: [BigInt(userStakeAmount), recipientAddress as `0x${string}`],
+          args: [BigInt(userStakeAmount), recipientAddress as `0x${string}`]
         });
 
         setStakingTxHash(stakeHash);
@@ -285,7 +285,7 @@ export function AnySpendStakeB3({
               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="relative mx-auto size-48"
@@ -297,7 +297,7 @@ export function AnySpendStakeB3({
               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" }}
             >
@@ -315,7 +315,7 @@ export function AnySpendStakeB3({
             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"
@@ -397,7 +397,7 @@ export function AnySpendStakeB3({
               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="relative mx-auto mb-4 size-[120px]"
@@ -422,7 +422,7 @@ export function AnySpendStakeB3({
               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" }}
             >
@@ -437,7 +437,7 @@ export function AnySpendStakeB3({
             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"
@@ -483,8 +483,7 @@ export function AnySpendStakeB3({
       contractAddress={ERC20Staking}
       encodedData={encodedData}
       metadata={{
-        type: OrderType.Custom,
-        action: "stake B3",
+        action: "stake B3"
       }}
       header={header}
       onSuccess={onSuccess}

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

@@ -40,7 +40,7 @@ export function AnySpendTournament(props: AnySpendTournamentProps) {
     tournamentChainId,
     tournamentContractAddress,
     tournamentMetadata,
-    onSuccess,
+    onSuccess
   } = props;
 
   const dstToken = action === "join" ? props.tournamentEntryToken : props.tournamentFundToken;
@@ -48,7 +48,7 @@ export function AnySpendTournament(props: AnySpendTournamentProps) {
 
   const header = ({
     anyspendPrice,
-    isLoadingAnyspendPrice,
+    isLoadingAnyspendPrice
   }: {
     anyspendPrice: GetQuoteResponse | undefined;
     isLoadingAnyspendPrice: boolean;
@@ -72,7 +72,7 @@ export function AnySpendTournament(props: AnySpendTournamentProps) {
               <AnimatePresence mode="wait">
                 <div
                   className={cn("text-as-primary group flex items-center text-2xl font-semibold transition-all", {
-                    "opacity-0": isLoadingAnyspendPrice,
+                    "opacity-0": isLoadingAnyspendPrice
                   })}
                 >
                   {formatDisplayNumber(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" })} (
@@ -100,10 +100,7 @@ export function AnySpendTournament(props: AnySpendTournamentProps) {
       dstAmount={dstAmount}
       contractAddress={tournamentContractAddress}
       encodedData="0x"
-      metadata={{
-        type: action === "join" ? OrderType.JoinTournament : OrderType.FundTournament,
-        tournament: tournamentMetadata,
-      }}
+      metadata={{ tournament: tournamentMetadata }}
       header={header}
       onSuccess={onSuccess}
       showRecipient={action === "join"}

package/src/anyspend/react/components/common/ChainTokenIcon.tsx

@@ -1,7 +1,7 @@
 export function ChainTokenIcon({
   chainUrl,
   tokenUrl,
-  className = "",
+  className = ""
 }: {
   chainUrl: string;
   tokenUrl: string;

package/src/anyspend/react/components/common/OrderDetails.tsx

@@ -12,7 +12,6 @@ import {
   getPaymentUrl,
   getStatusDisplay,
   isNativeToken,
-  OnrampVendor,
   Order,
   OrderStatus,
   OrderType,
@@ -21,22 +20,21 @@ import {
   RelayTransaction,
   zNft,
   zToken,
-  zTournament,
+  zTournament
 } from "@b3dotfun/sdk/anyspend";
 import {
-  Badge,
-  Button,
   CopyToClipboard,
+  Badge,
   ShinyButton,
   Skeleton,
   TextLoop,
   TextShimmer,
+  Button,
   useAccountWallet,
   useChainSwitchWithAction,
-  useModalStore,
   useOnchainName,
+  useModalStore
 } from "@b3dotfun/sdk/global-account/react";
-import { useRouter, useSearchParams } from "@b3dotfun/sdk/shared/react/hooks";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
@@ -52,8 +50,9 @@ import {
   Home,
   Loader2,
   RefreshCcw,
-  SquareArrowOutUpRight,
+  SquareArrowOutUpRight
 } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { QRCodeSVG } from "qrcode.react";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import TimeAgo from "react-timeago";
@@ -82,7 +81,7 @@ function getOrderSuccessText({
   formattedActualDstAmount,
   dstToken,
   recipientName,
-  centerTruncate,
+  centerTruncate
 }: {
   order: Order;
   tournament?: any;
@@ -208,7 +207,7 @@ export const OrderDetails = memo(function OrderDetails({
   relayTx,
   executeTx,
   refundTxs,
-  onBack,
+  onBack
 }: OrderDetailsProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -233,6 +232,23 @@ export const OrderDetails = memo(function OrderDetails({
 
   const { switchChainAndExecute, isSwitchingOrExecuting } = useChainSwitchWithAction();
 
+  // const { permitData, isCheckingPermit } = usePermitData({
+  //   chainId: order.srcChain,
+  //   tokenAddress: order.srcTokenAddress as Hex,
+  //   ownerAddress: account?.address && isAddress(account.address) ? getAddress(account.address) : undefined,
+  //   amount: BigInt(order.srcAmount)
+  // });
+
+  // const { sendPermitData } = useAnyspendSendPermitData({
+  //   onSuccess: _data => {
+  //     toast.info("Sent permit data successfully");
+  //   },
+  //   onError: error => {
+  //     console.error(error);
+  //     toast.error("Failed to send permit data: " + error.message);
+  //   }
+  // });
+
   const { colorMode } = useColorMode();
 
   const roundedUpSrcAmount = useMemo(() => {
@@ -255,6 +271,35 @@ export const OrderDetails = memo(function OrderDetails({
 
       console.log("Processing transaction on chain:", currentWalletClient.chain.id);
 
+      // Process transaction
+      // if (permitData?.data && account.address) {
+      //   const signature = await currentWalletClient.signTypedData({
+      //     domain: permitData.data.domain,
+      //     types: permitData.data.types,
+      //     primaryType: "Permit",
+      //     message: permitData.data.messageToSign
+      //   });
+
+      //   // Split signature into v, r, s components
+      //   const r = signature.slice(0, 66);
+      //   const s = "0x" + signature.slice(66, 130);
+      //   const v = parseInt(signature.slice(130, 132), 16);
+
+      //   sendPermitData({
+      //     isMainnet: true,
+      //     orderId: order.id,
+      //     permitData: {
+      //       deadline: Number(permitData.data.messageToSign.deadline),
+      //       ownerAddress: account.address,
+      //       r,
+      //       s,
+      //       v
+      //     }
+      //   });
+
+      //   return;
+      // }
+
       const signer = currentWalletClient.account!;
 
       // Send transaction
@@ -263,7 +308,7 @@ export const OrderDetails = memo(function OrderDetails({
           account: signer,
           chain: EVM_CHAINS[order.srcChain].viem,
           to: order.globalAddress as `0x${string}`,
-          value: BigInt(order.srcAmount),
+          value: BigInt(order.srcAmount)
         });
         setTxHash(hash);
       } else {
@@ -273,12 +318,12 @@ export const OrderDetails = memo(function OrderDetails({
           address: order.srcTokenAddress as `0x${string}`,
           abi: erc20Abi,
           functionName: "transfer",
-          args: [order.globalAddress as Address, BigInt(order.srcAmount)],
+          args: [order.globalAddress as Address, BigInt(order.srcAmount)]
         });
         setTxHash(hash);
       }
     },
-    [order],
+    [order]
   );
 
   // Main payment handler that triggers chain switch and payment
@@ -289,34 +334,11 @@ export const OrderDetails = memo(function OrderDetails({
 
   // When waitingForDeposit is true, we show a message to the user to wait for the deposit to be processed.
   const setWaitingForDeposit = useCallback(() => {
-    const params = new URLSearchParams(searchParams.toString());
+    const params = new URLSearchParams(searchParams);
     params.set("waitingForDeposit", "true");
     router.push(`?${params}`);
   }, [router, searchParams]);
 
-  // Clean up URL parameters before closing modal or navigating back
-  const cleanupUrlParams = useCallback(() => {
-    const params = new URLSearchParams(searchParams.toString());
-    params.delete("waitingForDeposit");
-    params.delete("orderId");
-
-    // Only update URL if params were actually removed
-    if (params.toString() !== searchParams.toString()) {
-      router.push(`?${params}`);
-    }
-  }, [router, searchParams]);
-
-  // Helper functions that clean up URL params before executing actions
-  const handleCloseModal = useCallback(() => {
-    cleanupUrlParams();
-    setB3ModalOpen(false);
-  }, [cleanupUrlParams, setB3ModalOpen]);
-
-  const handleBack = useCallback(() => {
-    cleanupUrlParams();
-    onBack?.();
-  }, [cleanupUrlParams, onBack]);
-
   useEffect(() => {
     if (txSuccess) {
       toast.success("Transaction successful! We are processing your order.", { duration: 10000 });
@@ -391,11 +413,7 @@ export const OrderDetails = memo(function OrderDetails({
             ? depositTxs.map(dTx => (
                 <TransactionDetails
                   key={dTx.txHash}
-                  title={
-                    order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
-                      ? `Received payment`
-                      : `Received ${formatTokenAmount(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`
-                  }
+                  title={`Received ${formatTokenAmount(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`}
                   chainId={order.srcChain}
                   tx={dTx}
                   isProcessing={false}
@@ -423,7 +441,7 @@ export const OrderDetails = memo(function OrderDetails({
         )}
         <button
           className="bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2"
-          onClick={mode === "page" ? handleBack : handleCloseModal}
+          onClick={mode === "page" ? onBack : () => setB3ModalOpen(false)}
         >
           {mode === "page" ? (
             <>
@@ -453,11 +471,7 @@ export const OrderDetails = memo(function OrderDetails({
             ? depositTxs.map(dTxs => (
                 <TransactionDetails
                   key={dTxs.txHash}
-                  title={
-                    order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
-                      ? `Received payment`
-                      : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`
-                  }
+                  title={`Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`}
                   chainId={order.srcChain}
                   tx={dTxs}
                   isProcessing={false}
@@ -503,7 +517,7 @@ export const OrderDetails = memo(function OrderDetails({
                 formattedActualDstAmount: formattedActualDstAmount,
                 dstToken,
                 recipientName,
-                centerTruncate,
+                centerTruncate
               })}
               <ExternalLink className="ml-2 h-4 w-4" />
             </a>
@@ -516,7 +530,7 @@ export const OrderDetails = memo(function OrderDetails({
             textColor="text-white"
             className="flex w-full items-center gap-2"
             disabled={txLoading || isSwitchingOrExecuting}
-            onClick={handleCloseModal}
+            onClick={() => setB3ModalOpen(false)}
           >
             <span className="pl-4">Continue to Tournament</span>
             <ChevronRight className="h-4 w-4" />
@@ -526,7 +540,7 @@ export const OrderDetails = memo(function OrderDetails({
         {order.status === OrderStatus.Executed && (
           <button
             className="bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2"
-            onClick={mode === "page" ? handleBack : handleCloseModal}
+            onClick={mode === "page" ? onBack : () => setB3ModalOpen(false)}
           >
             {mode === "page" ? (
               <>
@@ -557,11 +571,7 @@ export const OrderDetails = memo(function OrderDetails({
             ? depositTxs.map(dTxs => (
                 <TransactionDetails
                   key={dTxs.txHash}
-                  title={
-                    order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
-                      ? `Received payment`
-                      : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`
-                  }
+                  title={`Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`}
                   chainId={order.srcChain}
                   tx={dTxs}
                   isProcessing={false}
@@ -631,7 +641,7 @@ export const OrderDetails = memo(function OrderDetails({
                 formattedActualDstAmount,
                 dstToken,
                 recipientName,
-                centerTruncate,
+                centerTruncate
               })}
               <ExternalLink className="ml-2 h-4 w-4" />
             </a>
@@ -644,7 +654,7 @@ export const OrderDetails = memo(function OrderDetails({
             textColor="text-white"
             className="flex w-full items-center gap-2"
             disabled={txLoading || isSwitchingOrExecuting}
-            onClick={handleCloseModal}
+            onClick={() => setB3ModalOpen(false)}
           >
             <span className="pl-4">Continue to Tournament</span>
             <ChevronRight className="h-4 w-4" />
@@ -654,7 +664,7 @@ export const OrderDetails = memo(function OrderDetails({
         {order.status === OrderStatus.Executed && (
           <button
             className="bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2"
-            onClick={mode === "page" ? handleBack : handleCloseModal}
+            onClick={mode === "page" ? onBack : () => setB3ModalOpen(false)}
           >
             {mode === "page" ? (
               <>
@@ -686,11 +696,7 @@ export const OrderDetails = memo(function OrderDetails({
           {(depositTxs || []).map((dTxs, index) => (
             <TransactionDetails
               key={dTxs.txHash}
-              title={
-                order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
-                  ? `Received payment`
-                  : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`
-              }
+              title={`Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`}
               chainId={order.srcChain}
               tx={dTxs}
               isProcessing={index < (depositTxs || []).length - 1 ? false : !depositEnoughAmount}
@@ -724,11 +730,7 @@ export const OrderDetails = memo(function OrderDetails({
             />
           ) : (
             <TransactionDetails
-              title={
-                order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
-                  ? `Waiting for payment`
-                  : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`
-              }
+              title={`Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`}
               chainId={order.srcChain}
               tx={null}
               isProcessing={true}
@@ -861,7 +863,7 @@ export const OrderDetails = memo(function OrderDetails({
                       value={getPaymentUrl(
                         order.globalAddress,
                         BigInt(order.srcAmount),
-                        order.srcTokenAddress === RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress,
+                        order.srcTokenAddress === RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress
                       )}
                       className="max-w-[200px]"
                     />
@@ -930,7 +932,7 @@ export const OrderDetails = memo(function OrderDetails({
                       .share({
                         title: "Complete Deposit",
                         text: "Complete your deposit on BSMNT.fun",
-                        url: permalink,
+                        url: permalink
                       })
                       .catch(error => console.log("Error sharing:", error));
                   } else {
@@ -1004,7 +1006,7 @@ export const OrderDetails = memo(function OrderDetails({
                     className={cn(
                       "h-3",
                       order.dstChain !== b3.id && "w-3 rounded-full",
-                      order.dstChain === b3.id && "h-4",
+                      order.dstChain === b3.id && "h-4"
                     )}
                   />
                 </div>
@@ -1052,7 +1054,7 @@ export const OrderDetails = memo(function OrderDetails({
 
       <button
         className="bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2"
-        onClick={handleBack}
+        onClick={onBack}
       >
         Cancel and start over <RefreshCcw className="ml-2 h-4 w-4" />
       </button>
@@ -1067,7 +1069,7 @@ function TransactionDetails({
   chainId,
   tx,
   isProcessing,
-  delay,
+  delay
 }: {
   title: string;
   chainId: number;
@@ -1095,7 +1097,7 @@ function TransactionDetails({
               transition={{ duration: 0.5, ease: "easeOut", delay }}
               className="bg-as-brand/70 absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg shadow-purple-500/30 backdrop-blur-sm"
               style={{
-                boxShadow: "0 0 15px 5px rgba(138, 43, 226, 0.2)",
+                boxShadow: "0 0 15px 5px rgba(138, 43, 226, 0.2)"
               }}
             >
               <CheckIcon className="text-as-primary h-3 w-3" />

package/src/anyspend/react/components/common/OrderHistory.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useAnyspendOrderHistory } from "@b3dotfun/sdk/anyspend/react";
+import { useAnyspendOrderHistory } from "@b3dotfun/sdk/anyspend";
 import { Button, Skeleton, useAccountWallet } from "@b3dotfun/sdk/global-account/react";
 import { ArrowLeft, RefreshCcw } from "lucide-react";
 import { OrderHistoryItem } from "./OrderHistoryItem";

package/src/anyspend/react/components/common/OrderHistoryItem.tsx

@@ -43,7 +43,7 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryIte
       key={`anyspend-${order.id}`}
       className={cn(
         "bg-as-light-brand/20 rounded-lg border p-4",
-        onSelectOrder && "hover:bg-as-light-brand/30 hover:border-as-brand cursor-pointer transition-colors",
+        onSelectOrder && "hover:bg-as-light-brand/30 hover:border-as-brand cursor-pointer transition-colors"
       )}
       onClick={() => onSelectOrder?.(order.id)}
     >
@@ -53,7 +53,7 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryIte
             "px-3 py-1 text-xs",
             orderDisplayStatus === "processing" && "bg-yellow-500/10 text-yellow-500",
             orderDisplayStatus === "success" && "bg-green-500/10 text-green-500",
-            orderDisplayStatus === "failure" && "bg-red-500/10 text-red-500",
+            orderDisplayStatus === "failure" && "bg-red-500/10 text-red-500"
           )}
         >
           {orderStatusText}
@@ -160,7 +160,7 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryIte
                         : expectedDstAmount
                           ? BigInt(expectedDstAmount)
                           : BigInt(0),
-                      dstToken.decimals,
+                      dstToken.decimals
                     )}{" "}
                     {dstToken.symbol}
                   </div>

package/src/anyspend/react/components/common/OrderToken.tsx

@@ -18,7 +18,7 @@ export function OrderToken({
   token,
   setToken,
   requiredAmount,
-  tokenSelectClassName,
+  tokenSelectClassName
 }: {
   context: "from" | "to";
   address: string | undefined;
@@ -36,7 +36,7 @@ export function OrderToken({
   const { nativeTokens, fungibleTokens } = useTokenBalancesByChain({
     address: wallet?.address || "",
     chainsIds: [chainId],
-    enabled: !!wallet?.address && !!chainName,
+    enabled: !!wallet?.address && !!chainName
   });
 
   const { formattedBalance, hasEnoughBalance } = useMemo(() => {
@@ -61,7 +61,7 @@ export function OrderToken({
 
     return {
       formattedBalance,
-      hasEnoughBalance,
+      hasEnoughBalance
     };
   }, [chainId, fungibleTokens, nativeTokens, requiredAmount, token, wallet?.address]);
 
@@ -86,7 +86,7 @@ export function OrderToken({
           decimals: token.decimals,
           metadata: { logoURI: token.logoURI },
           name: token.name,
-          symbol: token.symbol,
+          symbol: token.symbol
         });
       }}
       supportedWalletVMs={["evm", "svm"]}
@@ -97,7 +97,7 @@ export function OrderToken({
           role="combobox"
           className={cn(
             "bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center",
-            tokenSelectClassName,
+            tokenSelectClassName
           )}
         >
           {token.metadata.logoURI ? (

package/src/anyspend/react/components/common/OrderTokenAmount.tsx

@@ -25,7 +25,7 @@ export function OrderTokenAmount({
   className,
   innerClassName,
   amountClassName,
-  tokenSelectClassName,
+  tokenSelectClassName
 }: {
   disabled?: boolean;
   inputValue: string;
@@ -76,7 +76,7 @@ export function OrderTokenAmount({
       decimals: newToken.decimals,
       metadata: { logoURI: newToken.logoURI },
       name: newToken.name,
-      symbol: newToken.symbol,
+      symbol: newToken.symbol
     });
 
     // If this is the source token, reset the amount immediately
@@ -109,7 +109,7 @@ export function OrderTokenAmount({
             spellCheck="false"
             className={cn(
               "placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]",
-              amountClassName,
+              amountClassName
             )}
             pattern="^[0-9]*[.,]?[0-9]*$"
             disabled={disabled}
@@ -141,7 +141,7 @@ export function OrderTokenAmount({
                 role="combobox"
                 className={cn(
                   "bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center",
-                  tokenSelectClassName,
+                  tokenSelectClassName
                 )}
               >
                 {token.metadata.logoURI ? (