@b3dotfun/sdk 0.0.7 → 0.0.8

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

@@ -12,6 +12,7 @@ import {
   getPaymentUrl,
   getStatusDisplay,
   isNativeToken,
+  OnrampVendor,
   Order,
   OrderStatus,
   OrderType,
@@ -20,21 +21,22 @@ import {
   RelayTransaction,
   zNft,
   zToken,
-  zTournament
+  zTournament,
 } from "@b3dotfun/sdk/anyspend";
 import {
-  CopyToClipboard,
   Badge,
+  Button,
+  CopyToClipboard,
   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";
@@ -50,9 +52,8 @@ 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";
@@ -81,7 +82,7 @@ function getOrderSuccessText({
   formattedActualDstAmount,
   dstToken,
   recipientName,
-  centerTruncate
+  centerTruncate,
 }: {
   order: Order;
   tournament?: any;
@@ -207,7 +208,7 @@ export const OrderDetails = memo(function OrderDetails({
   relayTx,
   executeTx,
   refundTxs,
-  onBack
+  onBack,
 }: OrderDetailsProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -232,23 +233,6 @@ 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(() => {
@@ -271,35 +255,6 @@ 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
@@ -308,7 +263,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 {
@@ -318,12 +273,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
@@ -334,11 +289,34 @@ 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);
+    const params = new URLSearchParams(searchParams.toString());
     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 });
@@ -413,7 +391,11 @@ export const OrderDetails = memo(function OrderDetails({
             ? depositTxs.map(dTx => (
                 <TransactionDetails
                   key={dTx.txHash}
-                  title={`Received ${formatTokenAmount(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`}
+                  title={
+                    order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                      ? `Received payment`
+                      : `Received ${formatTokenAmount(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`
+                  }
                   chainId={order.srcChain}
                   tx={dTx}
                   isProcessing={false}
@@ -441,7 +423,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" ? onBack : () => setB3ModalOpen(false)}
+          onClick={mode === "page" ? handleBack : handleCloseModal}
         >
           {mode === "page" ? (
             <>
@@ -471,7 +453,11 @@ export const OrderDetails = memo(function OrderDetails({
             ? depositTxs.map(dTxs => (
                 <TransactionDetails
                   key={dTxs.txHash}
-                  title={`Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`}
+                  title={
+                    order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                      ? `Received payment`
+                      : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`
+                  }
                   chainId={order.srcChain}
                   tx={dTxs}
                   isProcessing={false}
@@ -517,7 +503,7 @@ export const OrderDetails = memo(function OrderDetails({
                 formattedActualDstAmount: formattedActualDstAmount,
                 dstToken,
                 recipientName,
-                centerTruncate
+                centerTruncate,
               })}
               <ExternalLink className="ml-2 h-4 w-4" />
             </a>
@@ -530,7 +516,7 @@ export const OrderDetails = memo(function OrderDetails({
             textColor="text-white"
             className="flex w-full items-center gap-2"
             disabled={txLoading || isSwitchingOrExecuting}
-            onClick={() => setB3ModalOpen(false)}
+            onClick={handleCloseModal}
           >
             <span className="pl-4">Continue to Tournament</span>
             <ChevronRight className="h-4 w-4" />
@@ -540,7 +526,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" ? onBack : () => setB3ModalOpen(false)}
+            onClick={mode === "page" ? handleBack : handleCloseModal}
           >
             {mode === "page" ? (
               <>
@@ -571,7 +557,11 @@ export const OrderDetails = memo(function OrderDetails({
             ? depositTxs.map(dTxs => (
                 <TransactionDetails
                   key={dTxs.txHash}
-                  title={`Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`}
+                  title={
+                    order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                      ? `Received payment`
+                      : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`
+                  }
                   chainId={order.srcChain}
                   tx={dTxs}
                   isProcessing={false}
@@ -641,7 +631,7 @@ export const OrderDetails = memo(function OrderDetails({
                 formattedActualDstAmount,
                 dstToken,
                 recipientName,
-                centerTruncate
+                centerTruncate,
               })}
               <ExternalLink className="ml-2 h-4 w-4" />
             </a>
@@ -654,7 +644,7 @@ export const OrderDetails = memo(function OrderDetails({
             textColor="text-white"
             className="flex w-full items-center gap-2"
             disabled={txLoading || isSwitchingOrExecuting}
-            onClick={() => setB3ModalOpen(false)}
+            onClick={handleCloseModal}
           >
             <span className="pl-4">Continue to Tournament</span>
             <ChevronRight className="h-4 w-4" />
@@ -664,7 +654,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" ? onBack : () => setB3ModalOpen(false)}
+            onClick={mode === "page" ? handleBack : handleCloseModal}
           >
             {mode === "page" ? (
               <>
@@ -696,7 +686,11 @@ export const OrderDetails = memo(function OrderDetails({
           {(depositTxs || []).map((dTxs, index) => (
             <TransactionDetails
               key={dTxs.txHash}
-              title={`Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`}
+              title={
+                order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                  ? `Received payment`
+                  : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`
+              }
               chainId={order.srcChain}
               tx={dTxs}
               isProcessing={index < (depositTxs || []).length - 1 ? false : !depositEnoughAmount}
@@ -730,7 +724,11 @@ export const OrderDetails = memo(function OrderDetails({
             />
           ) : (
             <TransactionDetails
-              title={`Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`}
+              title={
+                order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                  ? `Waiting for payment`
+                  : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`
+              }
               chainId={order.srcChain}
               tx={null}
               isProcessing={true}
@@ -863,9 +861,9 @@ 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,
                       )}
-                      size={200}
+                      className="max-w-[200px]"
                     />
                     <div className="mt-3 flex items-center justify-center gap-2 text-sm">
                       <span className="label-style text-as-brand/70 text-sm">Scan with</span>
@@ -932,7 +930,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 {
@@ -1006,7 +1004,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>
@@ -1054,7 +1052,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={onBack}
+        onClick={handleBack}
       >
         Cancel and start over <RefreshCcw className="ml-2 h-4 w-4" />
       </button>
@@ -1069,7 +1067,7 @@ function TransactionDetails({
   chainId,
   tx,
   isProcessing,
-  delay
+  delay,
 }: {
   title: string;
   chainId: number;
@@ -1097,7 +1095,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";
+import { useAnyspendOrderHistory } from "@b3dotfun/sdk/anyspend/react";
 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 ? (

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

@@ -1,4 +1,4 @@
-import { useCoinbaseOnrampOptions } from "@b3dotfun/sdk/anyspend";
+import { useCoinbaseOnrampOptions } from "@b3dotfun/sdk/anyspend/react";
 import { Input, useGetGeo } from "@b3dotfun/sdk/global-account/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { useRef } from "react";
@@ -7,7 +7,7 @@ import { PaymentOptions } from "./PaymentOptions";
 
 export function PanelOnramp({
   srcAmountOnRamp,
-  setSrcAmountOnRamp
+  setSrcAmountOnRamp,
 }: {
   srcAmountOnRamp: string;
   setSrcAmountOnRamp: (amount: string) => void;
@@ -47,7 +47,7 @@ export function PanelOnramp({
         {parseFloat(srcAmountOnRamp) >
         (coinbaseOnrampOptions?.paymentCurrencies?.[0]?.limits?.find(l => l.id === "ACH_BANK_ACCOUNT")?.max
           ? parseFloat(
-              coinbaseOnrampOptions.paymentCurrencies[0].limits.find(l => l.id === "ACH_BANK_ACCOUNT")?.max || "25000"
+              coinbaseOnrampOptions.paymentCurrencies[0].limits.find(l => l.id === "ACH_BANK_ACCOUNT")?.max || "25000",
             )
           : 25000) ? (
           <p className="label-style -mb-3 mt-3 text-xs text-red-400 dark:bg-transparent">
@@ -72,7 +72,7 @@ export function PanelOnramp({
             className="placeholder:text-b3-react-foreground/60 h-auto min-w-[70px] border-0 bg-transparent py-6 text-center text-4xl font-semibold focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-transparent"
             style={{
               width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
-              minWidth: srcAmountOnRamp ? `auto` : "105px"
+              minWidth: srcAmountOnRamp ? `auto` : "105px",
             }}
           />
 

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

@@ -1,13 +1,5 @@
-import {
-  GetQuoteResponse,
-  Nft,
-  OnrampVendor,
-  OrderType,
-  Token,
-  Tournament,
-  useAnyspendCreateOnrampOrder,
-  useGeoOnrampOptions
-} from "@b3dotfun/sdk/anyspend";
+import { GetQuoteResponse, Nft, OnrampVendor, OrderType, Token, Tournament } from "@b3dotfun/sdk/anyspend";
+import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions } from "@b3dotfun/sdk/anyspend/react";
 import { Button } from "@b3dotfun/sdk/global-account/react";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { motion } from "framer-motion";
@@ -57,7 +49,7 @@ export function PanelOnrampPayment({
   tournament,
   payload,
   recipientEnsName,
-  recipientImageUrl
+  recipientImageUrl,
 }: PanelOnrampPaymentProps) {
   // Use a stable amount for geo onramp options to prevent unnecessary refetches
   const [stableAmountForGeo, setStableAmountForGeo] = useState(srcAmountOnRamp);
@@ -77,7 +69,7 @@ export function PanelOnrampPayment({
     coinbaseAvailablePaymentMethods,
     isStripeOnrampSupported,
     isStripeWeb2Supported,
-    isLoading: isLoadingGeoOnramp
+    isLoading: isLoadingGeoOnramp,
   } = useGeoOnrampOptions(isMainnet, stableAmountForGeo);
 
   const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
@@ -88,7 +80,7 @@ export function PanelOnrampPayment({
     onError: error => {
       console.error(error);
       toast.error("Failed to create order: " + error.message);
-    }
+    },
   });
 
   const handlePaymentMethodClick = async (vendor: OnrampVendor, paymentMethod?: string) => {
@@ -129,7 +121,7 @@ export function PanelOnrampPayment({
           return {
             ...selectedDstToken,
             chainId: destinationTokenChainId || selectedDstChainId,
-            address: destinationTokenAddress
+            address: destinationTokenAddress,
           };
         }
         return selectedDstToken;
@@ -148,13 +140,13 @@ export function PanelOnrampPayment({
           country: geoData?.country || "US",
           ipAddress: geoData?.ip,
           redirectUrl:
-            window.location.origin === "https://basement.fun" ? "https://basement.fun/deposit" : window.location.origin
+            window.location.origin === "https://basement.fun" ? "https://basement.fun/deposit" : window.location.origin,
         },
         expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
         creatorAddress: globalAddress,
         nft,
         tournament,
-        payload
+        payload,
       });
     } catch (err: any) {
       console.error(err);
@@ -175,7 +167,7 @@ export function PanelOnrampPayment({
               animate={{
                 opacity: 1,
                 y: 0,
-                filter: "blur(0px)"
+                filter: "blur(0px)",
               }}
               transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
               className="flex items-center justify-between"

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

@@ -6,7 +6,7 @@ export default function PaymentMethodIcons() {
     { name: "Mastercard", src: PAYMENT_METHOD_ICONS.mastercard },
     { name: "Amex", src: PAYMENT_METHOD_ICONS.amex },
     { name: "Apple Pay", src: PAYMENT_METHOD_ICONS.applePay },
-    { name: "Google Pay", src: PAYMENT_METHOD_ICONS.googlePay }
+    { name: "Google Pay", src: PAYMENT_METHOD_ICONS.googlePay },
   ];
 
   return (

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

@@ -17,12 +17,12 @@ export default function PaymentOneClick({ order }: PaymentOneClickProps) {
   const howItWorksSteps = [
     {
       number: 1,
-      description: `Click the link above to pay with ${paymentDescription}`
+      description: `Click the link above to pay with ${paymentDescription}`,
     },
     {
       number: 2,
-      description: `After payment, you'll be redirected back here, where we continue to execute the order.`
-    }
+      description: `After payment, you'll be redirected back here, where we continue to execute the order.`,
+    },
   ];
 
   return (