@0xsequence/marketplace-sdk 0.5.2 → 0.5.4

package/dist/{chunk-MSTTVFVQ.js → chunk-ZGVCOQ4I.js}

@@ -3,7 +3,10 @@ import {
   ActionModal,
   CustomSelect,
   useCurrencyBalance
-} from "./chunk-MKGSGTQC.js";
+} from "./chunk-TLNRD4BQ.js";
+import {
+  useAnalytics
+} from "./chunk-WGGZEQHL.js";
 import {
   CalendarIcon_default,
   MinusIcon_default,
@@ -33,7 +36,7 @@ import {
   quantityInputWrapper,
   tokenPreview,
   transferModalContent
-} from "./chunk-5NORRVPM.js";
+} from "./chunk-UZIAX32Y.js";
 import {
   AlertMessage,
   dateToUnixTime,
@@ -44,7 +47,6 @@ import {
   useConfig,
   useCurrencies,
   useCurrency,
-  useCurrencyOptions,
   useGenerateListingTransaction,
   useGenerateOfferTransaction,
   useGenerateSellTransaction,
@@ -55,14 +57,14 @@ import {
   useSwitchChainModal,
   useTransferTokens,
   useWallet
-} from "./chunk-I37CRQ4S.js";
+} from "./chunk-JWNONWD6.js";
 import {
   iconVariants
 } from "./chunk-TQWM4ER6.js";
 import {
   calculatePriceDifferencePercentage,
   truncateMiddle
-} from "./chunk-XP3WY5AX.js";
+} from "./chunk-7C7ADZ2H.js";
 import {
   getProviderEl
 } from "./chunk-YOKGP2EQ.js";
@@ -136,6 +138,9 @@ var useGetTokenApprovalData = (params) => {
   };
 };
 
+// src/react/ui/modals/MakeOfferModal/hooks/useTransactionSteps.tsx
+import { formatUnits as formatUnits3 } from "viem";
+
 // src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
 import {
   CloseIcon,
@@ -768,6 +773,7 @@ var useTransactionSteps = ({
   const expiry = new Date(Number(offerInput.offer.expiry) * 1e3);
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
   const sdkConfig = useConfig();
+  const analytics = useAnalytics();
   const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
   const { generateOfferTransactionAsync, isPending: generatingSteps } = useGenerateOfferTransaction({
     chainId,
@@ -837,7 +843,8 @@ var useTransactionSteps = ({
       if (!transactionStep && !signatureStep) {
         throw new Error("No transaction or signature step found");
       }
-      let hash, orderId;
+      let hash;
+      let orderId;
       if (transactionStep) {
         hash = await executeTransaction({ transactionStep });
       }
@@ -874,6 +881,27 @@ var useTransactionSteps = ({
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
       }
+      if (hash || orderId) {
+        const currencyDecimal = currency?.decimals || 0;
+        const currencyValueRaw = Number(offerInput.offer.pricePerToken);
+        const currencyValueDecimal = Number(
+          formatUnits3(BigInt(currencyValueRaw), currencyDecimal)
+        );
+        analytics.trackCreateOffer({
+          props: {
+            orderbookKind,
+            collectionAddress,
+            currencyAddress: offerInput.offer.currencyAddress,
+            currencySymbol: currency?.symbol || "",
+            chainId,
+            txnHash: hash || ""
+          },
+          nums: {
+            currencyValueDecimal,
+            currencyValueRaw
+          }
+        });
+      }
     } catch (error) {
       steps$.transaction.isExecuting.set(false);
       steps$.transaction.exist.set(false);
@@ -925,7 +953,7 @@ var useMakeOffer = ({
 }) => {
   const { data: marketplaceConfig, isLoading: marketplaceIsLoading } = useMarketplaceConfig();
   const collectionConfig = marketplaceConfig?.collections.find(
-    (c) => c.collectionAddress === collectionAddress
+    (c) => c.address === collectionAddress
   );
   orderbookKind = orderbookKind ?? collectionConfig?.destinationMarketplace ?? "sequence_marketplace_v2" /* sequence_marketplace_v2 */;
   const { data: tokenApproval, isLoading: tokenApprovalIsLoading } = useGetTokenApprovalData({
@@ -963,7 +991,7 @@ var useMakeOffer = ({
 };
 
 // src/react/ui/modals/_internal/components/actionModal/ErrorModal.tsx
-import { Box as Box4 } from "@0xsequence/design-system";
+import { Box as Box4, Text as Text5 } from "@0xsequence/design-system";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var ErrorModal = ({
   isOpen,
@@ -987,7 +1015,7 @@ var ErrorModal = ({
         justifyContent: "center",
         alignItems: "center",
         padding: "4",
-        children: message || "Error loading item details"
+        children: /* @__PURE__ */ jsx5(Text5, { color: "text80", fontFamily: "body", children: message || "Error loading item details" })
       }
     )
   }
@@ -1024,7 +1052,7 @@ var LoadingModal = ({
 );
 
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
-import { Box as Box6, Skeleton as Skeleton3, Text as Text5 } from "@0xsequence/design-system";
+import { Box as Box6, Skeleton as Skeleton3, Text as Text6 } from "@0xsequence/design-system";
 import { observer as observer2 } from "@legendapp/state/react";
 import { addDays } from "date-fns";
 
@@ -1175,7 +1203,7 @@ var ExpirationDateSelect = observer2(function ExpirationDateSelect2({
   }
   return /* @__PURE__ */ jsxs5(Box6, { width: "full", position: "relative", children: [
     /* @__PURE__ */ jsx9(
-      Text5,
+      Text6,
       {
         fontSize: "small",
         fontWeight: "medium",
@@ -1235,7 +1263,7 @@ var ExpirationDateSelect = observer2(function ExpirationDateSelect2({
 var expirationDateSelect_default = ExpirationDateSelect;
 
 // src/react/ui/modals/_internal/components/floorPriceText/index.tsx
-import { Text as Text6 } from "@0xsequence/design-system";
+import { Text as Text7 } from "@0xsequence/design-system";
 import { jsx as jsx10 } from "react/jsx-runtime";
 function FloorPriceText({
   chainId,
@@ -1262,7 +1290,7 @@ function FloorPriceText({
   });
   const floorPriceDifferenceText = floorPriceRaw === price.amountRaw ? "Same as floor price" : `${floorPriceDifference}% ${floorPriceRaw > price.amountRaw ? "below" : "above"} floor price`;
   return /* @__PURE__ */ jsx10(
-    Text6,
+    Text7,
     {
       fontSize: "small",
       fontWeight: "medium",
@@ -1276,7 +1304,7 @@ function FloorPriceText({
 }
 
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { Box as Box8, NumericInput, Text as Text7 } from "@0xsequence/design-system";
+import { Box as Box8, NumericInput, Text as Text8 } from "@0xsequence/design-system";
 import { parseUnits } from "viem";
 import { useAccount } from "wagmi";
 
@@ -1338,10 +1366,9 @@ var CurrencyOptionsSelect = observer3(function CurrencyOptionsSelect2({
   includeNativeCurrency
 }) {
   const currency = selectedCurrency$.get();
-  const currencyOptions = useCurrencyOptions({ collectionAddress });
   const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
     chainId,
-    currencyOptions,
+    collectionAddress,
     includeNativeCurrency
   });
   useEffect4(() => {
@@ -1458,7 +1485,7 @@ function PriceInput({
       }
     ),
     balanceError && /* @__PURE__ */ jsx13(
-      Text7,
+      Text8,
       {
         color: "negative",
         fontSize: "xsmall",
@@ -1586,7 +1613,7 @@ function QuantityInput({
 }
 
 // src/react/ui/modals/_internal/components/tokenPreview/index.tsx
-import { Box as Box10, Image as Image2, Skeleton as Skeleton5, Text as Text8 } from "@0xsequence/design-system";
+import { Box as Box10, Image as Image2, Skeleton as Skeleton5, Text as Text9 } from "@0xsequence/design-system";
 import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function TokenPreview({
   collectionName,
@@ -1622,7 +1649,7 @@ function TokenPreview({
     ),
     /* @__PURE__ */ jsxs8(Box10, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
       /* @__PURE__ */ jsx15(
-        Text8,
+        Text9,
         {
           fontSize: "small",
           color: "text80",
@@ -1632,7 +1659,7 @@ function TokenPreview({
         }
       ),
       /* @__PURE__ */ jsx15(
-        Text8,
+        Text9,
         {
           fontSize: "small",
           fontWeight: "bold",
@@ -1739,14 +1766,12 @@ var Modal2 = observer4(() => {
     chainId,
     collectionAddress
   });
-  const currencyOptions = useCurrencyOptions({ collectionAddress });
   const {
     data: currencies,
     isLoading: currenciesLoading,
     isError: currenciesIsError
   } = useCurrencies({
     chainId,
-    currencyOptions,
     includeNativeCurrency: false
   });
   const { isLoading, executeApproval, makeOffer } = useMakeOffer({
@@ -1881,8 +1906,8 @@ import { Show as Show2, observer as observer5 } from "@legendapp/state/react";
 import { parseUnits as parseUnits3 } from "viem";
 
 // src/react/ui/modals/_internal/components/transactionDetails/index.tsx
-import { Box as Box11, Image as Image3, Skeleton as Skeleton6, Text as Text9 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits3 } from "viem";
+import { Box as Box11, Image as Image3, Skeleton as Skeleton6, Text as Text10 } from "@0xsequence/design-system";
+import { formatUnits as formatUnits4 } from "viem";
 import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
 function TransactionDetails({
@@ -1895,15 +1920,15 @@ function TransactionDetails({
 }) {
   const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
   const marketplaceFeePercentage = data?.collections.find(
-    (collection) => collection.collectionAddress === collectionAddress
-  )?.marketplaceFeePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
+    (collection) => collection.address === collectionAddress
+  )?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
   const { data: royaltyPercentage, isLoading: royaltyPercentageLoading } = useRoyaltyPercentage({
     chainId,
     collectionAddress,
     collectibleId
   });
   const priceLoading = !price || marketplaceConfigLoading || royaltyPercentageLoading;
-  let formattedAmount = price && formatUnits3(BigInt(price.amountRaw), price.currency.decimals);
+  let formattedAmount = price && formatUnits4(BigInt(price.amountRaw), price.currency.decimals);
   if (royaltyPercentage !== void 0 && formattedAmount && price) {
     formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * Number(royaltyPercentage) / 100).toFixed(price.currency.decimals);
   }
@@ -1918,10 +1943,10 @@ function TransactionDetails({
       justifyContent: "space-between",
       alignItems: "center",
       children: [
-        /* @__PURE__ */ jsx17(Text9, { fontSize: "small", color: "text50", fontFamily: "body", children: "Total earnings" }),
+        /* @__PURE__ */ jsx17(Text10, { fontSize: "small", color: "text50", fontFamily: "body", children: "Total earnings" }),
         /* @__PURE__ */ jsxs10(Box11, { display: "flex", alignItems: "center", gap: "2", children: [
           /* @__PURE__ */ jsx17(Image3, { src: currencyImageUrl, width: "3", height: "3" }),
-          priceLoading ? /* @__PURE__ */ jsx17(Skeleton6, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs10(Text9, { fontSize: "small", color: "text100", fontFamily: "body", children: [
+          priceLoading ? /* @__PURE__ */ jsx17(Skeleton6, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs10(Text10, { fontSize: "small", color: "text100", fontFamily: "body", children: [
             showPlaceholderPrice ? "0" : formattedAmount,
             " ",
             price.currency.symbol
@@ -1933,7 +1958,7 @@ function TransactionDetails({
 }
 
 // src/react/ui/modals/_internal/components/transactionHeader/index.tsx
-import { Box as Box12, Image as Image4, Skeleton as Skeleton7, Text as Text10 } from "@0xsequence/design-system";
+import { Box as Box12, Image as Image4, Skeleton as Skeleton7, Text as Text11 } from "@0xsequence/design-system";
 import { formatDistanceToNow as formatDistanceToNow2 } from "date-fns";
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function TransactionHeader({
@@ -1943,7 +1968,7 @@ function TransactionHeader({
 }) {
   return /* @__PURE__ */ jsxs11(Box12, { display: "flex", alignItems: "center", width: "full", children: [
     /* @__PURE__ */ jsx18(
-      Text10,
+      Text11,
       {
         fontSize: "small",
         fontWeight: "medium",
@@ -1955,7 +1980,7 @@ function TransactionHeader({
     ),
     /* @__PURE__ */ jsx18(Image4, { src: currencyImageUrl, width: "3", height: "3", marginRight: "1" }),
     date && /* @__PURE__ */ jsxs11(
-      Text10,
+      Text11,
       {
         fontSize: "small",
         color: "text50",
@@ -1971,44 +1996,11 @@ function TransactionHeader({
   ] });
 }
 
-// src/react/ui/modals/SellModal/store.ts
-import { observable as observable3 } from "@legendapp/state";
-var initialState3 = {
-  isOpen: false,
-  collectionAddress: "",
-  chainId: "",
-  tokenId: "",
-  order: void 0,
-  callbacks: void 0,
-  open: (args) => {
-    sellModal$.collectionAddress.set(args.collectionAddress);
-    sellModal$.chainId.set(args.chainId);
-    sellModal$.tokenId.set(args.tokenId);
-    sellModal$.order.set(args.order);
-    sellModal$.callbacks.set(args.callbacks);
-    sellModal$.isOpen.set(true);
-  },
-  close: () => {
-    sellModal$.isOpen.set(false);
-    sellModal$.callbacks.set(void 0);
-  },
-  steps: {
-    approval: {
-      exist: false,
-      isExecuting: false,
-      execute: () => Promise.resolve()
-    },
-    transaction: {
-      exist: false,
-      isExecuting: false,
-      execute: () => Promise.resolve()
-    }
-  }
-};
-var sellModal$ = observable3(initialState3);
+// src/react/ui/modals/SellModal/hooks/useSell.tsx
+import { useEffect as useEffect5 } from "react";
 
 // src/react/ui/modals/SellModal/hooks/useGetTokenApproval.tsx
-import { useQuery as useQuery3 } from "@tanstack/react-query";
+import { skipToken as skipToken3, useQuery as useQuery3 } from "@tanstack/react-query";
 
 // src/react/ui/modals/BuyModal/hooks/useFees.ts
 import { avalanche, optimism } from "viem/chains";
@@ -2021,15 +2013,13 @@ var useFees = ({
   const avalancheAndOptimismPlatformFeeRecipient = "0x400cdab4676c17aec07e8ec748a5fc3b674bca41";
   const { data: marketplaceConfig } = useMarketplaceConfig();
   const collection = marketplaceConfig?.collections.find(
-    (collection2) => collection2.collectionAddress.toLowerCase() === collectionAddress.toLowerCase() && chainId === Number(collection2.chainId)
+    (collection2) => collection2.address.toLowerCase() === collectionAddress.toLowerCase() && chainId === Number(collection2.chainId)
   );
   const avalancheOrOptimism = chainId === avalanche.id || chainId === optimism.id;
   const receiver = avalancheOrOptimism ? avalancheAndOptimismPlatformFeeRecipient : defaultPlatformFeeRecipient;
   const percentageToBPS = (percentage) => Number(percentage) * 1e4 / 100;
   return {
-    amount: percentageToBPS(
-      collection?.marketplaceFeePercentage || defaultFee
-    ).toString(),
+    amount: percentageToBPS(collection?.feePercentage || defaultFee).toString(),
     receiver
   };
 };
@@ -2045,7 +2035,7 @@ var useGetTokenApprovalData2 = (params) => {
   });
   const { data, isLoading, isSuccess } = useQuery3({
     queryKey: ["token-approval-data", params.ordersData],
-    queryFn: async () => {
+    queryFn: wallet ? async () => {
       const address = await wallet.address();
       const args = {
         collectionAddress: params.collectionAddress,
@@ -2072,7 +2062,7 @@ var useGetTokenApprovalData2 = (params) => {
       return {
         step: tokenApprovalStep
       };
-    },
+    } : skipToken3,
     enabled: !!wallet && !!params.collectionAddress
   });
   return {
@@ -2083,6 +2073,7 @@ var useGetTokenApprovalData2 = (params) => {
 };
 
 // src/react/ui/modals/SellModal/hooks/useTransactionSteps.tsx
+import { formatUnits as formatUnits5 } from "viem";
 var useTransactionSteps2 = ({
   collectibleId,
   chainId,
@@ -2097,10 +2088,14 @@ var useTransactionSteps2 = ({
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
   const sdkConfig = useConfig();
   const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
+  const analytics = useAnalytics();
   const { amount, receiver } = useFees({
     chainId: Number(chainId),
     collectionAddress
   });
+  const { data: currencies } = useCurrencies({
+    chainId: Number(chainId)
+  });
   const { generateSellTransactionAsync, isPending: generatingSteps } = useGenerateSellTransaction({
     chainId,
     onSuccess: (steps3) => {
@@ -2165,7 +2160,8 @@ var useTransactionSteps2 = ({
       if (!transactionStep && !signatureStep) {
         throw new Error("No transaction or signature step found");
       }
-      let hash, orderId;
+      let hash;
+      let orderId;
       if (transactionStep) {
         hash = await executeTransaction({ transactionStep });
       }
@@ -2192,6 +2188,31 @@ var useTransactionSteps2 = ({
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
       }
+      if (hash || orderId) {
+        const currency = currencies?.find(
+          (currency2) => currency2.contractAddress === ordersData[0].currencyAddress
+        );
+        const currencyDecimal = currency?.decimals || 0;
+        const currencySymbol = currency?.symbol || "";
+        const currencyValueRaw = Number(ordersData[0].pricePerToken);
+        const currencyValueDecimal = Number(
+          formatUnits5(BigInt(currencyValueRaw), currencyDecimal)
+        );
+        analytics.trackSellItems({
+          props: {
+            marketplaceKind: marketplace,
+            collectionAddress,
+            currencyAddress: ordersData[0].currencyAddress,
+            currencySymbol,
+            chainId,
+            txnHash: hash || ""
+          },
+          nums: {
+            currencyValueDecimal,
+            currencyValueRaw
+          }
+        });
+      }
     } catch (error) {
       steps$.transaction.isExecuting.set(false);
       steps$.transaction.exist.set(false);
@@ -2232,7 +2253,6 @@ var useTransactionSteps2 = ({
 };
 
 // src/react/ui/modals/SellModal/hooks/useSell.tsx
-import { useEffect as useEffect5 } from "react";
 var useSell = ({
   collectibleId,
   chainId,
@@ -2273,6 +2293,42 @@ var useSell = ({
   };
 };
 
+// src/react/ui/modals/SellModal/store.ts
+import { observable as observable3 } from "@legendapp/state";
+var initialState3 = {
+  isOpen: false,
+  collectionAddress: "",
+  chainId: "",
+  tokenId: "",
+  order: void 0,
+  callbacks: void 0,
+  open: (args) => {
+    sellModal$.collectionAddress.set(args.collectionAddress);
+    sellModal$.chainId.set(args.chainId);
+    sellModal$.tokenId.set(args.tokenId);
+    sellModal$.order.set(args.order);
+    sellModal$.callbacks.set(args.callbacks);
+    sellModal$.isOpen.set(true);
+  },
+  close: () => {
+    sellModal$.isOpen.set(false);
+    sellModal$.callbacks.set(void 0);
+  },
+  steps: {
+    approval: {
+      exist: false,
+      isExecuting: false,
+      execute: () => Promise.resolve()
+    },
+    transaction: {
+      exist: false,
+      isExecuting: false,
+      execute: () => Promise.resolve()
+    }
+  }
+};
+var sellModal$ = observable3(initialState3);
+
 // src/react/ui/modals/SellModal/Modal.tsx
 import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var SellModal = () => {
@@ -2312,7 +2368,9 @@ var Modal3 = observer5(() => {
         quantity: order?.quantityRemaining ? parseUnits3(
           order.quantityRemaining,
           collectible?.decimals || 0
-        ).toString() : "1"
+        ).toString() : "1",
+        pricePerToken: order?.priceAmount ?? "",
+        currencyAddress: order?.priceCurrencyAddress ?? ""
       }
     ],
     callbacks,
@@ -2409,7 +2467,7 @@ import {
   ExternalLinkIcon,
   IconButton as IconButton3,
   Image as Image5,
-  Text as Text11
+  Text as Text12
 } from "@0xsequence/design-system";
 import { observer as observer6 } from "@legendapp/state/react";
 import { Close as Close2, Content as Content3, Overlay as Overlay2, Portal as Portal3, Root as Root3 } from "@radix-ui/react-dialog";
@@ -2470,7 +2528,7 @@ var SuccessfulPurchaseModal = observer6(() => {
     /* @__PURE__ */ jsxs13(Content3, { className: dialogContent.narrow, children: [
       /* @__PURE__ */ jsxs13(Box13, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
         /* @__PURE__ */ jsx20(
-          Text11,
+          Text12,
           {
             textAlign: "center",
             fontSize: "medium",
@@ -2486,10 +2544,10 @@ var SuccessfulPurchaseModal = observer6(() => {
           }
         ),
         /* @__PURE__ */ jsxs13(Box13, { display: "flex", alignItems: "center", gap: "1", children: [
-          /* @__PURE__ */ jsx20(Text11, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "You bought" }),
-          /* @__PURE__ */ jsx20(Text11, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
-          /* @__PURE__ */ jsx20(Text11, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "items for" }),
-          /* @__PURE__ */ jsx20(Text11, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().totalPrice })
+          /* @__PURE__ */ jsx20(Text12, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "You bought" }),
+          /* @__PURE__ */ jsx20(Text12, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
+          /* @__PURE__ */ jsx20(Text12, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "items for" }),
+          /* @__PURE__ */ jsx20(Text12, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().totalPrice })
         ] }),
         /* @__PURE__ */ jsx20(SuccessfulPurchaseActions, {})
       ] }),
@@ -2570,7 +2628,7 @@ function CollectiblesGrid({ collectibles }) {
               background: "backgroundOverlay",
               backdropFilter: "blur",
               children: /* @__PURE__ */ jsxs13(
-                Text11,
+                Text12,
                 {
                   fontSize: "small",
                   fontWeight: "medium",
@@ -2642,7 +2700,7 @@ var initialState5 = {
 var transferModal$ = observable5(initialState5);
 
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Box as Box14, Button as Button3, Text as Text12, TextInput } from "@0xsequence/design-system";
+import { Box as Box14, Button as Button3, Text as Text13, TextInput } from "@0xsequence/design-system";
 import { observable as observable6 } from "@legendapp/state";
 import { isAddress } from "viem";
 import { useAccount as useAccount2 } from "wagmi";
@@ -2752,7 +2810,7 @@ var EnterWalletAddressView = () => {
     transferModal$.view.set("followWalletInstructions");
   }
   return /* @__PURE__ */ jsxs14(Box14, { display: "grid", gap: "6", flexGrow: "1", children: [
-    /* @__PURE__ */ jsx21(Text12, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
+    /* @__PURE__ */ jsx21(Text13, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
     /* @__PURE__ */ jsxs14(Box14, { display: "flex", flexDirection: "column", gap: "3", children: [
       /* @__PURE__ */ jsx21(
         AlertMessage,
@@ -2783,7 +2841,7 @@ var EnterWalletAddressView = () => {
           }
         ),
         /* @__PURE__ */ jsx21(
-          Text12,
+          Text13,
           {
             color: insufficientBalance ? "negative" : "text50",
             fontSize: "small",
@@ -2813,12 +2871,12 @@ var EnterWalletAddressView = () => {
 var enterWalletAddress_default = EnterWalletAddressView;
 
 // src/react/ui/modals/TransferModal/_views/followWalletInstructions/index.tsx
-import { Box as Box15, Button as Button4, Text as Text13 } from "@0xsequence/design-system";
+import { Box as Box15, Button as Button4, Text as Text14 } from "@0xsequence/design-system";
 import { observer as observer7 } from "@legendapp/state/react";
 import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var FollowWalletInstructionsView = observer7(() => {
   return /* @__PURE__ */ jsxs15(Box15, { display: "grid", gap: "6", flexGrow: "1", children: [
-    /* @__PURE__ */ jsx22(Text13, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
+    /* @__PURE__ */ jsx22(Text14, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
     /* @__PURE__ */ jsx22(Box15, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx22(
       AlertMessage,
       {
@@ -2973,7 +3031,7 @@ var createListingModal$ = observable7({
 import { useEffect as useEffect6 } from "react";
 
 // src/react/ui/modals/CreateListingModal/hooks/useGetTokenApproval.ts
-import { skipToken as skipToken3, useQuery as useQuery4 } from "@tanstack/react-query";
+import { skipToken as skipToken4, useQuery as useQuery4 } from "@tanstack/react-query";
 import { useAccount as useAccount4 } from "wagmi";
 var ONE_DAY_IN_SECONDS2 = 60 * 60 * 24;
 var useGetTokenApprovalData3 = (params) => {
@@ -3012,7 +3070,7 @@ var useGetTokenApprovalData3 = (params) => {
       return {
         step: tokenApprovalStep
       };
-    } : skipToken3
+    } : skipToken4
   });
   return {
     data,
@@ -3022,6 +3080,7 @@ var useGetTokenApprovalData3 = (params) => {
 };
 
 // src/react/ui/modals/CreateListingModal/hooks/useTransactionSteps.tsx
+import { formatUnits as formatUnits6 } from "viem";
 var useTransactionSteps3 = ({
   listingInput,
   chainId,
@@ -3035,7 +3094,11 @@ var useTransactionSteps3 = ({
   const expiry = new Date(Number(listingInput.listing.expiry) * 1e3);
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
   const sdkConfig = useConfig();
+  const { data: currencies } = useCurrencies({
+    chainId: Number(chainId)
+  });
   const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
+  const analytics = useAnalytics();
   const { generateListingTransactionAsync, isPending: generatingSteps } = useGenerateListingTransaction({
     chainId,
     onSuccess: (steps3) => {
@@ -3100,7 +3163,8 @@ var useTransactionSteps3 = ({
       if (!transactionStep && !signatureStep) {
         throw new Error("No transaction or signature step found");
       }
-      let hash, orderId;
+      let hash;
+      let orderId;
       if (transactionStep) {
         hash = await executeTransaction({ transactionStep });
       }
@@ -3133,6 +3197,29 @@ var useTransactionSteps3 = ({
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
       }
+      if (hash || orderId) {
+        const currencyDecimal = currencies?.find(
+          (currency) => currency.contractAddress === listingInput.listing.currencyAddress
+        )?.decimals || 0;
+        const currencyValueRaw = Number(listingInput.listing.pricePerToken);
+        const currencyValueDecimal = Number(
+          formatUnits6(BigInt(currencyValueRaw), currencyDecimal)
+        );
+        analytics.trackCreateListing({
+          props: {
+            orderbookKind,
+            collectionAddress,
+            currencyAddress: listingInput.listing.currencyAddress,
+            currencySymbol: "",
+            chainId,
+            txnHash: hash || ""
+          },
+          nums: {
+            currencyValueDecimal,
+            currencyValueRaw
+          }
+        });
+      }
     } catch (error) {
       steps$.transaction.isExecuting.set(false);
       steps$.transaction.exist.set(false);
@@ -3184,7 +3271,7 @@ var useCreateListing = ({
 }) => {
   const { data: marketplaceConfig, isLoading: marketplaceIsLoading } = useMarketplaceConfig();
   const collectionConfig = marketplaceConfig?.collections.find(
-    (c) => c.collectionAddress === collectionAddress
+    (c) => c.address === collectionAddress
   );
   orderbookKind = orderbookKind ?? collectionConfig?.destinationMarketplace ?? "sequence_marketplace_v2" /* sequence_marketplace_v2 */;
   const { data: tokenApproval, isLoading: tokenApprovalIsLoading } = useGetTokenApprovalData3({
@@ -3246,14 +3333,13 @@ var Modal5 = observer9(() => {
     collectionAddress,
     collectibleId
   });
-  const currencyOptions = useCurrencyOptions({ collectionAddress });
   const {
     data: currencies,
     isLoading: currenciesLoading,
     isError: currenciesIsError
   } = useCurrencies({
     chainId,
-    currencyOptions,
+    collectionAddress,
     includeNativeCurrency: true
   });
   const {
@@ -3408,6 +3494,9 @@ var Modal5 = observer9(() => {
 // src/react/ui/modals/BuyModal/Modal.tsx
 import { use$ as use$3 } from "@legendapp/state/react";
 
+// src/react/ui/modals/BuyModal/hooks/useBuyCollectable.ts
+import { useSelectPaymentModal } from "@0xsequence/kit-checkout";
+
 // src/react/ui/modals/BuyModal/store.ts
 import { observable as observable8 } from "@legendapp/state";
 var buyState = {
@@ -3415,7 +3504,8 @@ var buyState = {
   quantity: "1",
   invalidQuantity: false,
   checkoutModalIsLoading: false,
-  checkoutModalLoaded: false
+  checkoutModalLoaded: false,
+  purchaseProcessing: false
 };
 var initialState7 = {
   isOpen: false,
@@ -3429,7 +3519,8 @@ var initialState7 = {
       order: args.order,
       invalidQuantity: false,
       checkoutModalIsLoading: false,
-      checkoutModalLoaded: false
+      checkoutModalLoaded: false,
+      purchaseProcessing: false
     });
     buyModal$.callbacks.set(callbacks || defaultCallbacks);
     buyModal$.isOpen.set(true);
@@ -3446,187 +3537,14 @@ var initialState7 = {
   setCheckoutModalLoaded: (isLoaded) => {
     buyModal$.state.checkoutModalLoaded.set(isLoaded);
   },
+  setPurchaseProcessing: (isProcessing) => {
+    buyModal$.state.purchaseProcessing.set(isProcessing);
+  },
   callbacks: void 0
 };
 var buyModal$ = observable8(initialState7);
 
-// src/react/ui/modals/BuyModal/modals/CheckoutModal.tsx
-import { useEffect as useEffect7 } from "react";
-import { parseUnits as parseUnits5 } from "viem";
-function CheckoutModal({ buy, collectable, order }) {
-  useEffect7(() => {
-    if (buyModal$.state.checkoutModalIsLoading.get() || buyModal$.state.checkoutModalLoaded.get())
-      return;
-    const executeBuy = () => {
-      buy({
-        orderId: order.orderId,
-        collectableDecimals: collectable.decimals || 0,
-        quantity: parseUnits5("1", collectable.decimals || 0).toString(),
-        marketplace: order.marketplace
-      });
-    };
-    executeBuy();
-  }, []);
-  return null;
-}
-
-// src/react/ui/modals/BuyModal/modals/Modal1155.tsx
-import { Box as Box17, Text as Text14, TokenImage as TokenImage2 } from "@0xsequence/design-system";
-import { observer as observer10 } from "@legendapp/state/react";
-import { formatUnits as formatUnits4, parseUnits as parseUnits6 } from "viem";
-import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
-var ERC1155QuantityModal = observer10(
-  ({ buy, collectable, order }) => {
-    const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
-      chainId: order.chainId,
-      currencyAddress: order.priceCurrencyAddress
-    });
-    const quantity = Number(buyModal$.state.quantity.get());
-    const pricePerToken = order.priceAmount;
-    const totalPrice = (BigInt(quantity) * BigInt(pricePerToken)).toString();
-    if (buyModal$.state.checkoutModalLoaded.get() && buyModal$.isOpen.get() && buyModal$.state.checkoutModalIsLoading.get()) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx25(
-      ActionModal,
-      {
-        isOpen: buyModal$.isOpen.get(),
-        chainId: order.chainId,
-        onClose: () => buyModal$.close(),
-        title: "Select Quantity",
-        ctas: [
-          {
-            label: "Buy now",
-            onClick: () => {
-              buyModal$.state.checkoutModalIsLoading.set(true);
-              buy({
-                quantity: parseUnits6(
-                  buyModal$.state.quantity.get(),
-                  collectable.decimals || 0
-                ).toString(),
-                orderId: order.orderId,
-                collectableDecimals: collectable.decimals || 0,
-                marketplace: order.marketplace
-              });
-            },
-            disabled: buyModal$.state.checkoutModalIsLoading.get(),
-            pending: buyModal$.state.checkoutModalIsLoading.get()
-          }
-        ],
-        children: /* @__PURE__ */ jsxs18(Box17, { display: "flex", flexDirection: "column", gap: "4", children: [
-          /* @__PURE__ */ jsx25(
-            QuantityInput,
-            {
-              $quantity: buyModal$.state.quantity,
-              $invalidQuantity: buyModal$.state.invalidQuantity,
-              decimals: order.quantityDecimals,
-              maxQuantity: order.quantityRemaining
-            }
-          ),
-          /* @__PURE__ */ jsxs18(Box17, { display: "flex", justifyContent: "space-between", children: [
-            /* @__PURE__ */ jsx25(Text14, { color: "text50", fontSize: "small", fontFamily: "body", children: "Total Price" }),
-            /* @__PURE__ */ jsx25(Box17, { display: "flex", alignItems: "center", gap: "2", children: isCurrencyLoading || !currency ? /* @__PURE__ */ jsx25(Box17, { display: "flex", alignItems: "center", gap: "2", children: /* @__PURE__ */ jsx25(Text14, { color: "text50", fontSize: "small", fontFamily: "body", children: "Loading..." }) }) : /* @__PURE__ */ jsxs18(Fragment3, { children: [
-              currency.imageUrl && /* @__PURE__ */ jsx25(TokenImage2, { src: currency.imageUrl, size: "xs" }),
-              /* @__PURE__ */ jsx25(
-                Text14,
-                {
-                  color: "text100",
-                  fontSize: "small",
-                  fontWeight: "bold",
-                  fontFamily: "body",
-                  children: formatUnits4(BigInt(totalPrice), currency.decimals || 0)
-                }
-              ),
-              /* @__PURE__ */ jsx25(Text14, { color: "text80", fontSize: "small", fontFamily: "body", children: currency?.symbol })
-            ] }) })
-          ] })
-        ] })
-      }
-    );
-  }
-);
-
-// src/react/ui/modals/BuyModal/hooks/useCheckoutOptions.ts
-import { skipToken as skipToken4, useQuery as useQuery5 } from "@tanstack/react-query";
-var useCheckoutOptions = (input) => {
-  const config = useConfig();
-  const { wallet } = useWallet();
-  const fees = useFees({
-    chainId: input.chainId,
-    collectionAddress: input.collectionAddress
-  });
-  return useQuery5({
-    queryKey: [
-      "checkoutOptions",
-      input.chainId,
-      input.collectionAddress,
-      input.orderId,
-      input.marketplace
-    ],
-    queryFn: wallet ? async () => {
-      const marketplaceClient = getMarketplaceClient(input.chainId, config);
-      return marketplaceClient.checkoutOptionsMarketplace({
-        wallet: await wallet.address(),
-        orders: [
-          {
-            contractAddress: input.collectionAddress,
-            orderId: input.orderId,
-            marketplace: input.marketplace
-          }
-        ],
-        additionalFee: Number(fees.amount)
-      }).then((res) => res.options);
-    } : skipToken4,
-    enabled: !!wallet
-  });
-};
-
-// src/react/ui/modals/BuyModal/hooks/useLoadData.ts
-var useLoadData = ({
-  chainId,
-  collectionAddress,
-  collectibleId,
-  orderId,
-  marketplace
-}) => {
-  const {
-    data: collection,
-    isLoading: collectionLoading,
-    isError: collectionError
-  } = useCollection({
-    chainId,
-    collectionAddress
-  });
-  const {
-    data: collectable,
-    isLoading: collectableLoading,
-    isError: collectableError
-  } = useCollectible({
-    chainId: String(chainId),
-    collectionAddress,
-    collectibleId
-  });
-  const {
-    data: checkoutOptions,
-    isLoading: checkoutOptionsLoading,
-    isError: checkoutOptionsError
-  } = useCheckoutOptions({
-    chainId,
-    collectionAddress,
-    orderId,
-    marketplace
-  });
-  return {
-    collection,
-    collectable,
-    checkoutOptions,
-    isLoading: collectionLoading || collectableLoading || checkoutOptionsLoading,
-    isError: collectionError || collectableError || checkoutOptionsError
-  };
-};
-
 // src/react/ui/modals/BuyModal/hooks/useBuyCollectable.ts
-import { useSelectPaymentModal } from "@0xsequence/kit-checkout";
 var useBuyCollectable = ({
   chainId,
   collectionAddress,
@@ -3714,6 +3632,182 @@ var useBuyCollectable = ({
   };
 };
 
+// src/react/ui/modals/BuyModal/hooks/useCheckoutOptions.ts
+import { skipToken as skipToken5, useQuery as useQuery5 } from "@tanstack/react-query";
+var useCheckoutOptions = (input) => {
+  const config = useConfig();
+  const { wallet } = useWallet();
+  const fees = useFees({
+    chainId: input.chainId,
+    collectionAddress: input.collectionAddress
+  });
+  return useQuery5({
+    queryKey: [
+      "checkoutOptions",
+      input.chainId,
+      input.collectionAddress,
+      input.orderId,
+      input.marketplace
+    ],
+    queryFn: wallet ? async () => {
+      const marketplaceClient = getMarketplaceClient(input.chainId, config);
+      return marketplaceClient.checkoutOptionsMarketplace({
+        wallet: await wallet.address(),
+        orders: [
+          {
+            contractAddress: input.collectionAddress,
+            orderId: input.orderId,
+            marketplace: input.marketplace
+          }
+        ],
+        additionalFee: Number(fees.amount)
+      }).then((res) => res.options);
+    } : skipToken5,
+    enabled: !!wallet
+  });
+};
+
+// src/react/ui/modals/BuyModal/hooks/useLoadData.ts
+var useLoadData = ({
+  chainId,
+  collectionAddress,
+  collectibleId,
+  orderId,
+  marketplace
+}) => {
+  const {
+    data: collection,
+    isLoading: collectionLoading,
+    isError: collectionError
+  } = useCollection({
+    chainId,
+    collectionAddress
+  });
+  const {
+    data: collectable,
+    isLoading: collectableLoading,
+    isError: collectableError
+  } = useCollectible({
+    chainId: String(chainId),
+    collectionAddress,
+    collectibleId
+  });
+  const {
+    data: checkoutOptions,
+    isLoading: checkoutOptionsLoading,
+    isError: checkoutOptionsError
+  } = useCheckoutOptions({
+    chainId,
+    collectionAddress,
+    orderId,
+    marketplace
+  });
+  return {
+    collection,
+    collectable,
+    checkoutOptions,
+    isLoading: collectionLoading || collectableLoading || checkoutOptionsLoading,
+    isError: collectionError || collectableError || checkoutOptionsError
+  };
+};
+
+// src/react/ui/modals/BuyModal/modals/CheckoutModal.tsx
+import { useEffect as useEffect7 } from "react";
+import { parseUnits as parseUnits5 } from "viem";
+function CheckoutModal({ buy, collectable, order }) {
+  useEffect7(() => {
+    if (buyModal$.state.checkoutModalIsLoading.get() || buyModal$.state.checkoutModalLoaded.get())
+      return;
+    const executeBuy = () => {
+      buy({
+        orderId: order.orderId,
+        collectableDecimals: collectable.decimals || 0,
+        quantity: parseUnits5("1", collectable.decimals || 0).toString(),
+        marketplace: order.marketplace
+      });
+    };
+    executeBuy();
+  }, []);
+  return null;
+}
+
+// src/react/ui/modals/BuyModal/modals/Modal1155.tsx
+import { Box as Box17, Text as Text15, TokenImage as TokenImage2 } from "@0xsequence/design-system";
+import { observer as observer10 } from "@legendapp/state/react";
+import { formatUnits as formatUnits7, parseUnits as parseUnits6 } from "viem";
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+var ERC1155QuantityModal = observer10(
+  ({ buy, collectable, order }) => {
+    const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
+      chainId: order.chainId,
+      currencyAddress: order.priceCurrencyAddress
+    });
+    const quantity = Number(buyModal$.state.quantity.get());
+    const pricePerToken = order.priceAmount;
+    const totalPrice = (BigInt(quantity) * BigInt(pricePerToken)).toString();
+    if (buyModal$.state.checkoutModalLoaded.get() && buyModal$.isOpen.get() && buyModal$.state.checkoutModalIsLoading.get() && buyModal$.state.purchaseProcessing.get()) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx25(
+      ActionModal,
+      {
+        isOpen: buyModal$.isOpen.get(),
+        chainId: order.chainId,
+        onClose: () => buyModal$.close(),
+        title: "Select Quantity",
+        ctas: [
+          {
+            label: "Buy now",
+            onClick: () => {
+              buyModal$.state.checkoutModalIsLoading.set(true);
+              buyModal$.state.purchaseProcessing.set(true);
+              buy({
+                quantity: parseUnits6(
+                  buyModal$.state.quantity.get(),
+                  collectable.decimals || 0
+                ).toString(),
+                orderId: order.orderId,
+                collectableDecimals: collectable.decimals || 0,
+                marketplace: order.marketplace
+              });
+            },
+            disabled: buyModal$.state.checkoutModalIsLoading.get(),
+            pending: buyModal$.state.checkoutModalIsLoading.get()
+          }
+        ],
+        children: /* @__PURE__ */ jsxs18(Box17, { display: "flex", flexDirection: "column", gap: "4", children: [
+          /* @__PURE__ */ jsx25(
+            QuantityInput,
+            {
+              $quantity: buyModal$.state.quantity,
+              $invalidQuantity: buyModal$.state.invalidQuantity,
+              decimals: order.quantityDecimals,
+              maxQuantity: order.quantityRemaining
+            }
+          ),
+          /* @__PURE__ */ jsxs18(Box17, { display: "flex", justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsx25(Text15, { color: "text50", fontSize: "small", fontFamily: "body", children: "Total Price" }),
+            /* @__PURE__ */ jsx25(Box17, { display: "flex", alignItems: "center", gap: "2", children: isCurrencyLoading || !currency ? /* @__PURE__ */ jsx25(Box17, { display: "flex", alignItems: "center", gap: "2", children: /* @__PURE__ */ jsx25(Text15, { color: "text50", fontSize: "small", fontFamily: "body", children: "Loading..." }) }) : /* @__PURE__ */ jsxs18(Fragment3, { children: [
+              currency.imageUrl && /* @__PURE__ */ jsx25(TokenImage2, { src: currency.imageUrl, size: "xs" }),
+              /* @__PURE__ */ jsx25(
+                Text15,
+                {
+                  color: "text100",
+                  fontSize: "small",
+                  fontWeight: "bold",
+                  fontFamily: "body",
+                  children: formatUnits7(BigInt(totalPrice), currency.decimals || 0)
+                }
+              ),
+              /* @__PURE__ */ jsx25(Text15, { color: "text80", fontSize: "small", fontFamily: "body", children: currency?.symbol })
+            ] }) })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+
 // src/react/ui/modals/BuyModal/Modal.tsx
 import { jsx as jsx26 } from "react/jsx-runtime";
 var BuyModal = () => {
@@ -3756,6 +3850,7 @@ var BuyModalContent = () => {
   const buyAction = (input) => {
     if (buy && checkoutOptions) {
       buy({ ...input, checkoutOptions });
+      buyModal$.state.purchaseProcessing.set(true);
     } else {
       console.error("buy is null or undefined");
     }
@@ -3782,6 +3877,9 @@ var BuyModalContent = () => {
       }
     );
   }
+  if (buyModal$.state.purchaseProcessing.get()) {
+    return null;
+  }
   return collection.type === "ERC721" /* ERC721 */ ? /* @__PURE__ */ jsx26(
     CheckoutModal,
     {
@@ -4239,8 +4337,8 @@ var ActionButton = observer12(
 );
 
 // src/react/ui/components/collectible-card/Footer.tsx
-import { Box as Box21, IconButton as IconButton5, Image as Image6, Text as Text15 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits5 } from "viem";
+import { Box as Box21, IconButton as IconButton5, Image as Image6, Text as Text16 } from "@0xsequence/design-system";
+import { formatUnits as formatUnits8 } from "viem";
 
 // src/react/ui/icons/Bell.tsx
 import { Box as Box20 } from "@0xsequence/design-system";
@@ -4283,6 +4381,11 @@ var Bell_default = SvgBellIcon;
 
 // src/react/ui/components/collectible-card/Footer.tsx
 import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
+var formatPrice = (amount, currency) => {
+  const formattedPrice = formatUnits8(BigInt(amount), currency.decimals);
+  const numericPrice = Number.parseFloat(formattedPrice);
+  return numericPrice < 1e-4 ? `< 0.0001 ${currency.symbol}` : `${formattedPrice} ${currency.symbol}`;
+};
 var Footer = ({
   name,
   type,
@@ -4321,7 +4424,7 @@ var Footer = ({
             width: "full",
             children: [
               /* @__PURE__ */ jsx35(
-                Text15,
+                Text16,
                 {
                   color: "text100",
                   fontSize: "normal",
@@ -4354,7 +4457,7 @@ var Footer = ({
         /* @__PURE__ */ jsxs23(Box21, { display: "flex", alignItems: "center", gap: "1", children: [
           listed && lowestListingCurrency.imageUrl && /* @__PURE__ */ jsx35(Image6, { src: lowestListingCurrency.imageUrl, width: "3", height: "3" }),
           /* @__PURE__ */ jsxs23(
-            Text15,
+            Text16,
             {
               color: listed ? "text100" : "text50",
               fontSize: "small",
@@ -4362,10 +4465,7 @@ var Footer = ({
               textAlign: "left",
               fontFamily: "body",
               children: [
-                listed && `${formatUnits5(
-                  BigInt(lowestListingPriceAmount),
-                  lowestListingCurrency.decimals
-                )} ${lowestListingCurrency.symbol}`,
+                listed && formatPrice(lowestListingPriceAmount, lowestListingCurrency),
                 !listed && "Not listed yet"
               ]
             }
@@ -4382,7 +4482,7 @@ var TokenTypeBalancePill = ({
 }) => {
   const displayText = type === "ERC1155" /* ERC1155 */ ? balance ? `Owned: ${balance}` : "ERC-1155" : "ERC-721";
   return /* @__PURE__ */ jsx35(
-    Text15,
+    Text16,
     {
       background: "backgroundSecondary",
       color: "text80",
@@ -4578,4 +4678,4 @@ export {
   useBuyModal,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-MSTTVFVQ.js.map
+//# sourceMappingURL=chunk-ZGVCOQ4I.js.map