@0xsequence/marketplace-sdk 0.8.6 → 0.8.8

package/dist/{chunk-TGFX3TMV.js → chunk-7IYKUVC3.js}

@@ -2,15 +2,15 @@
 
 import {
   ActionModal
-} from "./chunk-V3NVAVHV.js";
+} from "./chunk-YBOFRP65.js";
 import {
   useAnalytics
-} from "./chunk-QMWMJVTX.js";
+} from "./chunk-HHYNOPPI.js";
 import {
   BellIcon_default,
   CalendarIcon_default,
   CartIcon_default
-} from "./chunk-WXKV5N4T.js";
+} from "./chunk-35WWD5V6.js";
 import {
   AlertMessage,
   MODAL_OVERLAY_PROPS,
@@ -33,7 +33,7 @@ import {
   useSwitchChainModal,
   useTransferTokens,
   useWallet
-} from "./chunk-6SEJI7YS.js";
+} from "./chunk-G3447GIP.js";
 import {
   DEFAULT_MARKETPLACE_FEE_PERCENTAGE
 } from "./chunk-Y63BOO6M.js";
@@ -43,15 +43,20 @@ import {
   compareAddress,
   formatPriceWithFee,
   truncateMiddle
-} from "./chunk-BGY4WXER.js";
+} from "./chunk-YEGD7PWE.js";
+import {
+  SequenceMarketplaceV1_ABI
+} from "./chunk-XX4EVWBF.js";
 import {
-  InvalidContractTypeError,
-  InvalidStepError,
   balanceQueries,
   collectableKeys,
   getMarketplaceClient,
   getQueryClient
-} from "./chunk-ALICO7NG.js";
+} from "./chunk-KGM2WLSP.js";
+import {
+  InvalidContractTypeError,
+  InvalidStepError
+} from "./chunk-NX52D7NX.js";
 
 // src/react/ui/modals/modal-provider.tsx
 import { observer as observer17 } from "@legendapp/state/react";
@@ -552,7 +557,8 @@ var getBuyCollectableParams = async ({
   collectable,
   checkoutOptions,
   fee,
-  skipNativeBalanceCheck
+  skipNativeBalanceCheck,
+  nativeTokenAddress
 }) => {
   const marketplaceClient = getMarketplaceClient(chainId, config);
   const { steps: steps3 } = await marketplaceClient.generateBuyTransaction({
@@ -598,7 +604,7 @@ var getBuyCollectableParams = async ({
       callbacks?.onSuccess?.({ hash });
     },
     supplementaryAnalyticsInfo: {
-      orderId,
+      requestId: orderId,
       marketplaceKind: marketplace
     },
     onError: callbacks?.onError,
@@ -608,6 +614,7 @@ var getBuyCollectableParams = async ({
       buyModalStore.send({ type: "close" });
     },
     skipNativeBalanceCheck,
+    nativeTokenAddress,
     ...customCreditCardProviderCallback && {
       customProviderCallback: () => {
         customCreditCardProviderCallback(buyStep);
@@ -632,7 +639,8 @@ var usePaymentModalParams = (args) => {
     collectibleId,
     orderId,
     customCreditCardProviderCallback,
-    skipNativeBalanceCheck
+    skipNativeBalanceCheck,
+    nativeTokenAddress
   } = buyModalProps;
   const config = useConfig();
   const fee = useFees({
@@ -662,7 +670,8 @@ var usePaymentModalParams = (args) => {
         onError
       },
       customCreditCardProviderCallback,
-      skipNativeBalanceCheck
+      skipNativeBalanceCheck,
+      nativeTokenAddress
     }) : skipToken2
   });
 };
@@ -1915,6 +1924,29 @@ var useGetTokenApprovalData = (params) => {
 // src/react/ui/modals/CreateListingModal/hooks/useTransactionSteps.tsx
 import { formatUnits as formatUnits5 } from "viem";
 
+// src/utils/getSequenceMarketRequestId.ts
+import {
+  parseEventLogs
+} from "viem";
+var getSequenceMarketplaceRequestId = async (hash, publicClient, walletAddress) => {
+  try {
+    const receipt = await publicClient.getTransactionReceipt({
+      hash
+    });
+    const logs = parseEventLogs({
+      abi: SequenceMarketplaceV1_ABI,
+      eventName: "RequestCreated",
+      args: {
+        creator: walletAddress
+      },
+      logs: receipt.logs
+    });
+    return logs[0].args.requestId.toString();
+  } catch (error) {
+    console.error(error);
+  }
+};
+
 // src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
 import { Modal, Skeleton as Skeleton8, Text as Text15 } from "@0xsequence/design-system";
 import { use$ as use$3 } from "@legendapp/state/react";
@@ -2590,12 +2622,22 @@ var useTransactionSteps = ({
         const currencyValueDecimal = Number(
           formatUnits5(BigInt(currencyValueRaw), currencyDecimal)
         );
+        let requestId = orderId;
+        if (hash && (orderbookKind === "sequence_marketplace_v1" /* sequence_marketplace_v1 */ || orderbookKind === "sequence_marketplace_v2" /* sequence_marketplace_v2 */)) {
+          requestId = await getSequenceMarketplaceRequestId(
+            hash,
+            wallet.publicClient,
+            await wallet.address()
+          );
+        }
         analytics.trackCreateListing({
           props: {
             orderbookKind,
             collectionAddress,
             currencyAddress: listingInput.listing.currencyAddress,
-            currencySymbol: "",
+            currencySymbol: currency?.symbol || "",
+            tokenId: listingInput.listing.tokenId,
+            requestId: requestId || "",
             chainId: chainId.toString(),
             txnHash: hash || ""
           },
@@ -3181,6 +3223,14 @@ var useTransactionSteps2 = ({
         const currencyValueDecimal = Number(
           formatUnits6(BigInt(currencyValueRaw), currencyDecimal)
         );
+        let requestId = orderId;
+        if (hash && (orderbookKind === "sequence_marketplace_v1" /* sequence_marketplace_v1 */ || orderbookKind === "sequence_marketplace_v2" /* sequence_marketplace_v2 */)) {
+          requestId = await getSequenceMarketplaceRequestId(
+            hash,
+            wallet.publicClient,
+            await wallet.address()
+          );
+        }
         analytics.trackCreateOffer({
           props: {
             orderbookKind,
@@ -3188,6 +3238,7 @@ var useTransactionSteps2 = ({
             currencyAddress: offerInput.offer.currencyAddress,
             currencySymbol: currency?.symbol || "",
             chainId: chainId.toString(),
+            requestId: requestId || "",
             txnHash: hash || ""
           },
           nums: {
@@ -3805,9 +3856,12 @@ var useTransactionSteps3 = ({
         analytics.trackSellItems({
           props: {
             marketplaceKind: marketplace,
+            userId: await wallet.address(),
             collectionAddress,
             currencyAddress: ordersData[0].currencyAddress,
             currencySymbol,
+            requestId: ordersData[0].orderId,
+            tokenId: collectibleId,
             chainId: chainId.toString(),
             txnHash: hash || ""
           },
@@ -5078,111 +5132,6 @@ var ActionButton = observer18(
   }
 );
 
-// src/react/ui/components/collectible-card/CollectibleAsset.tsx
-import { Skeleton as Skeleton10 } from "@0xsequence/design-system";
-import { useEffect as useEffect12, useRef as useRef3, useState as useState10 } from "react";
-import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
-function CollectibleAssetSkeleton() {
-  return /* @__PURE__ */ jsx40(
-    Skeleton10,
-    {
-      "data-testid": "collectible-asset-skeleton",
-      size: "lg",
-      className: "absolute inset-0 h-full w-full animate-shimmer",
-      style: {
-        borderRadius: 0
-      }
-    }
-  );
-}
-var isHtml = (fileName) => {
-  const isHtml2 = /.*\.(html\?.+|html)$/.test(fileName?.toLowerCase() || "");
-  return isHtml2;
-};
-var isVideo = (fileName) => {
-  const isVideo2 = /.*\.(mp4|ogg|webm)$/.test(fileName?.toLowerCase() || "");
-  return isVideo2;
-};
-function CollectibleAsset({
-  name,
-  collectibleMetadata,
-  assetSrcPrefixUrl
-}) {
-  const [assetLoadFailed, setAssetLoadFailed] = useState10(false);
-  const [assetLoading, setAssetLoading] = useState10(true);
-  const videoRef = useRef3(null);
-  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-  const placeholderImage = chess_tile_default;
-  const assetUrl = collectibleMetadata?.image || collectibleMetadata?.video || collectibleMetadata?.animation_url || collectibleMetadata?.assets?.[0]?.url || placeholderImage;
-  const proxiedAssetUrl = assetSrcPrefixUrl ? `${assetSrcPrefixUrl}${assetUrl}` : assetUrl;
-  useEffect12(() => {
-    if (videoRef.current) {
-      videoRef.current.addEventListener("loadedmetadata", () => {
-        setAssetLoading(false);
-      });
-    }
-  }, []);
-  if (isHtml(assetUrl)) {
-    return /* @__PURE__ */ jsxs29("div", { className: "flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-background-secondary", children: [
-      assetLoading && /* @__PURE__ */ jsx40(CollectibleAssetSkeleton, {}),
-      /* @__PURE__ */ jsx40(
-        "iframe",
-        {
-          title: name || "Collectible",
-          className: "aspect-square w-full",
-          src: proxiedAssetUrl,
-          allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
-          sandbox: "allow-scripts",
-          style: {
-            border: "0px"
-          },
-          onError: () => setAssetLoadFailed(true),
-          onLoad: () => setAssetLoading(false)
-        }
-      )
-    ] });
-  }
-  if (isVideo(assetUrl)) {
-    return /* @__PURE__ */ jsxs29("div", { className: "relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-background-secondary", children: [
-      assetLoading && /* @__PURE__ */ jsx40(CollectibleAssetSkeleton, {}),
-      /* @__PURE__ */ jsx40(
-        "video",
-        {
-          ref: videoRef,
-          className: cn(
-            `absolute inset-0 h-full w-full object-cover transition-transform duration-200 ease-in-out group-hover:scale-hover ${assetLoading ? "invisible" : "visible"}`,
-            // we can't hide the video controls in safari, when user hovers over the video they show up. `pointer-events-none` is the only way to hide them on hover
-            isSafari && "pointer-events-none"
-          ),
-          autoPlay: true,
-          loop: true,
-          controls: true,
-          playsInline: true,
-          muted: true,
-          controlsList: "nodownload noremoteplayback nofullscreen ",
-          onError: () => {
-            setAssetLoadFailed(true);
-          },
-          children: /* @__PURE__ */ jsx40("source", { src: proxiedAssetUrl })
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs29("div", { className: "relative aspect-square overflow-hidden bg-background-secondary", children: [
-    assetLoading && /* @__PURE__ */ jsx40(CollectibleAssetSkeleton, {}),
-    /* @__PURE__ */ jsx40(
-      "img",
-      {
-        src: assetLoadFailed ? placeholderImage : proxiedAssetUrl,
-        alt: name || "Collectible",
-        className: `absolute inset-0 h-full w-full object-cover transition-transform duration-200 ease-in-out group-hover:scale-hover ${assetLoading ? "invisible" : "visible"}`,
-        onError: () => setAssetLoadFailed(true),
-        onLoad: () => setAssetLoading(false)
-      }
-    )
-  ] });
-}
-
 // src/react/ui/components/collectible-card/Footer.tsx
 import {
   ChevronLeftIcon,
@@ -5192,22 +5141,22 @@ import {
   Text as Text21
 } from "@0xsequence/design-system";
 import { formatUnits as formatUnits8 } from "viem";
-import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
 var OVERFLOW_PRICE = 1e8;
 var UNDERFLOW_PRICE = 1e-4;
 var formatPrice = (amount, currency) => {
   const formattedPrice = formatUnits8(BigInt(amount), currency.decimals);
   const numericPrice = Number.parseFloat(formattedPrice);
   if (numericPrice < UNDERFLOW_PRICE) {
-    return /* @__PURE__ */ jsxs30("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx41(ChevronLeftIcon, { className: "h-3 w-3 text-text-100" }),
-      /* @__PURE__ */ jsx41(Text21, { children: `${UNDERFLOW_PRICE} ${currency.symbol}` })
+    return /* @__PURE__ */ jsxs29("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx40(ChevronLeftIcon, { className: "h-3 w-3 text-text-100" }),
+      /* @__PURE__ */ jsx40(Text21, { children: `${UNDERFLOW_PRICE} ${currency.symbol}` })
     ] });
   }
   if (numericPrice > OVERFLOW_PRICE) {
-    return /* @__PURE__ */ jsxs30("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx41(ChevronRightIcon, { className: "h-3 w-3 text-text-100" }),
-      /* @__PURE__ */ jsx41(Text21, { children: `${OVERFLOW_PRICE.toLocaleString("en-US", {
+    return /* @__PURE__ */ jsxs29("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx40(ChevronRightIcon, { className: "h-3 w-3 text-text-100" }),
+      /* @__PURE__ */ jsx40(Text21, { children: `${OVERFLOW_PRICE.toLocaleString("en-US", {
         maximumFractionDigits: 2
       })} ${currency.symbol}` })
     ] });
@@ -5217,7 +5166,7 @@ var formatPrice = (amount, currency) => {
     minimumFractionDigits: 0,
     maximumFractionDigits: maxDecimals
   });
-  return /* @__PURE__ */ jsx41("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsxs30(Text21, { children: [
+  return /* @__PURE__ */ jsx40("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsxs29(Text21, { children: [
     formattedNumber,
     " ",
     currency.symbol
@@ -5240,10 +5189,10 @@ var Footer = ({
   if (name.length > 17 && !highestOffer) {
     name = `${name.substring(0, 17)}...`;
   }
-  return /* @__PURE__ */ jsxs30("div", { className: "relative flex flex-col items-start gap-2 whitespace-nowrap bg-background-primary p-4", children: [
-    /* @__PURE__ */ jsxs30("div", { className: "relative flex w-full items-center justify-between", children: [
-      /* @__PURE__ */ jsx41(Text21, { className: "text-left font-body font-bold text-sm text-text-100", children: name || "Untitled" }),
-      highestOffer && onOfferClick && /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsxs29("div", { className: "relative flex flex-col items-start gap-2 whitespace-nowrap bg-background-primary p-4", children: [
+    /* @__PURE__ */ jsxs29("div", { className: "relative flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ jsx40(Text21, { className: "text-left font-body font-bold text-sm text-text-100", children: name || "Untitled" }),
+      highestOffer && onOfferClick && /* @__PURE__ */ jsx40(
         IconButton2,
         {
           className: "absolute top-0 right-0 h-[22px] w-[22px] hover:animate-bell-ring",
@@ -5252,12 +5201,12 @@ var Footer = ({
           onClick: (e) => {
             onOfferClick?.(e);
           },
-          icon: (props) => /* @__PURE__ */ jsx41(BellIcon_default, { ...props, size: "xs" })
+          icon: (props) => /* @__PURE__ */ jsx40(BellIcon_default, { ...props, size: "xs" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-1", children: [
-      listed && lowestListingCurrency.imageUrl && /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-1", children: [
+      listed && lowestListingCurrency.imageUrl && /* @__PURE__ */ jsx40(
         Image7,
         {
           className: "h-3 w-3",
@@ -5267,7 +5216,7 @@ var Footer = ({
           }
         }
       ),
-      /* @__PURE__ */ jsxs30(
+      /* @__PURE__ */ jsxs29(
         Text21,
         {
           className: `text-left font-body font-bold text-sm ${listed ? "text-text-100" : "text-text-50"}`,
@@ -5278,7 +5227,7 @@ var Footer = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx40(
       TokenTypeBalancePill,
       {
         balance,
@@ -5294,11 +5243,229 @@ var TokenTypeBalancePill = ({
   decimals
 }) => {
   const displayText = type === "ERC1155" /* ERC1155 */ ? balance ? `Owned: ${formatUnits8(BigInt(balance), decimals ?? 0)}` : "ERC-1155" : "ERC-721";
-  return /* @__PURE__ */ jsx41(Text21, { className: "rounded-lg bg-background-secondary px-2 py-1 text-left font-medium text-text-80 text-xs", children: displayText });
+  return /* @__PURE__ */ jsx40(Text21, { className: "rounded-lg bg-background-secondary px-2 py-1 text-left font-medium text-text-80 text-xs", children: displayText });
 };
 
+// src/react/ui/components/collectible-card/collectible-asset/CollectibleAsset.tsx
+import { useEffect as useEffect12, useRef as useRef3, useState as useState10 } from "react";
+
+// src/utils/fetchContentType.ts
+function fetchContentType(url) {
+  return new Promise((resolve, reject) => {
+    if (typeof XMLHttpRequest === "undefined") {
+      reject(new Error("XMLHttpRequest is not supported in this environment."));
+      return;
+    }
+    const client = new XMLHttpRequest();
+    let settled = false;
+    const settle = (value) => {
+      if (!settled) {
+        settled = true;
+        resolve(value);
+        client.abort();
+      }
+    };
+    const fail = (error) => {
+      if (!settled) {
+        settled = true;
+        reject(error);
+      }
+    };
+    client.open("HEAD", url, true);
+    client.onreadystatechange = () => {
+      if (settled || client.readyState < XMLHttpRequest.HEADERS_RECEIVED) {
+        return;
+      }
+      if (client.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
+        const status = client.status;
+        if (status < 200 || status >= 300) {
+          settle(null);
+          return;
+        }
+        const contentType = client.getResponseHeader("Content-Type");
+        if (!contentType) {
+          settle(null);
+          return;
+        }
+        const primaryType = contentType.split("/")[0].toLowerCase();
+        let result = null;
+        switch (primaryType) {
+          case "image":
+            result = "image";
+            break;
+          case "video":
+            result = "video";
+            break;
+          case "text":
+            if (contentType.toLowerCase().includes("html")) {
+              result = "html";
+            }
+            break;
+        }
+        settle(result);
+        return;
+      }
+    };
+    client.onerror = (errorEvent) => {
+      fail(
+        new Error(`XMLHttpRequest network error for URL: ${url}`, {
+          cause: errorEvent
+        })
+      );
+    };
+    client.onabort = () => {
+      if (!settled) {
+        settle(null);
+      }
+    };
+    try {
+      client.send();
+    } catch (error) {
+      fail(
+        new Error(`Error sending XMLHttpRequest for URL: ${url}`, {
+          cause: error
+        })
+      );
+    }
+  });
+}
+
+// src/react/ui/components/collectible-card/collectible-asset/CollectibleAssetSkeleton.tsx
+import { Skeleton as Skeleton10 } from "@0xsequence/design-system";
+import { jsx as jsx41 } from "react/jsx-runtime";
+function CollectibleAssetSkeleton() {
+  return /* @__PURE__ */ jsx41(
+    Skeleton10,
+    {
+      "data-testid": "collectible-asset-skeleton",
+      size: "lg",
+      className: "absolute inset-0 h-full w-full animate-shimmer",
+      style: {
+        borderRadius: 0
+      }
+    }
+  );
+}
+
+// src/react/ui/components/collectible-card/collectible-asset/utils.ts
+var isImage = (fileName) => {
+  const isImage2 = /.*\.(png|jpg|jpeg|gif|svg|webp)$/.test(
+    fileName?.toLowerCase() || ""
+  );
+  return isImage2;
+};
+var isHtml = (fileName) => {
+  const isHtml2 = /.*\.(html\?.+|html)$/.test(fileName?.toLowerCase() || "");
+  return isHtml2;
+};
+var isVideo = (fileName) => {
+  const isVideo2 = /.*\.(mp4|ogg|webm)$/.test(fileName?.toLowerCase() || "");
+  return isVideo2;
+};
+var getContentType = (url) => {
+  return new Promise((resolve) => {
+    const type = isHtml(url) ? "html" : isVideo(url) ? "video" : isImage(url) ? "image" : null;
+    resolve(type);
+  });
+};
+
+// src/react/ui/components/collectible-card/collectible-asset/CollectibleAsset.tsx
+import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+function CollectibleAsset({
+  name,
+  collectibleMetadata,
+  assetSrcPrefixUrl
+}) {
+  const [assetLoadFailed, setAssetLoadFailed] = useState10(false);
+  const [assetLoading, setAssetLoading] = useState10(true);
+  const [contentType, setContentType] = useState10({ type: null, loading: true, failed: false });
+  const videoRef = useRef3(null);
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+  const placeholderImage = chess_tile_default;
+  const assetUrl = collectibleMetadata?.image || collectibleMetadata?.video || collectibleMetadata?.animation_url || collectibleMetadata?.assets?.[0]?.url || placeholderImage;
+  const proxiedAssetUrl = assetSrcPrefixUrl ? `${assetSrcPrefixUrl}${assetUrl}` : assetUrl;
+  useEffect12(() => {
+    getContentType(proxiedAssetUrl).then((contentType2) => {
+      setContentType({ type: contentType2, loading: false, failed: false });
+    }).catch(() => {
+      fetchContentType(proxiedAssetUrl).then((contentType2) => {
+        setContentType({
+          type: contentType2,
+          loading: false,
+          failed: false
+        });
+      }).catch(() => {
+        setContentType({ type: null, loading: false, failed: true });
+      });
+    });
+  }, [proxiedAssetUrl]);
+  if (contentType.type === "html" && !assetLoadFailed) {
+    return /* @__PURE__ */ jsxs30("div", { className: "flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-background-secondary", children: [
+      (assetLoading || contentType.loading) && /* @__PURE__ */ jsx42(CollectibleAssetSkeleton, {}),
+      /* @__PURE__ */ jsx42(
+        "iframe",
+        {
+          title: name || "Collectible",
+          className: "aspect-square w-full",
+          src: proxiedAssetUrl,
+          allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+          sandbox: "allow-scripts",
+          style: {
+            border: "0px"
+          },
+          onError: () => setAssetLoadFailed(true),
+          onLoad: () => setAssetLoading(false)
+        }
+      )
+    ] });
+  }
+  if (contentType.type === "video" && !assetLoadFailed) {
+    return /* @__PURE__ */ jsxs30("div", { className: "relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-background-secondary", children: [
+      (assetLoading || contentType.loading) && /* @__PURE__ */ jsx42(CollectibleAssetSkeleton, {}),
+      /* @__PURE__ */ jsx42(
+        "video",
+        {
+          ref: videoRef,
+          className: cn(
+            `absolute inset-0 h-full w-full object-cover transition-transform duration-200 ease-in-out group-hover:scale-hover ${assetLoading ? "invisible" : "visible"}`,
+            // we can't hide the video controls in safari, when user hovers over the video they show up. `pointer-events-none` is the only way to hide them on hover
+            isSafari && "pointer-events-none"
+          ),
+          autoPlay: true,
+          loop: true,
+          controls: true,
+          playsInline: true,
+          muted: true,
+          controlsList: "nodownload noremoteplayback nofullscreen ",
+          onError: () => {
+            setAssetLoadFailed(true);
+          },
+          onLoadedMetadata: () => {
+            setAssetLoading(false);
+          },
+          "data-testid": "collectible-asset-video",
+          children: /* @__PURE__ */ jsx42("source", { src: proxiedAssetUrl })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs30("div", { className: "relative aspect-square overflow-hidden bg-background-secondary", children: [
+    (assetLoading || contentType.loading) && /* @__PURE__ */ jsx42(CollectibleAssetSkeleton, {}),
+    /* @__PURE__ */ jsx42(
+      "img",
+      {
+        src: assetLoadFailed || contentType.failed ? placeholderImage : proxiedAssetUrl,
+        alt: name || "Collectible",
+        className: `absolute inset-0 h-full w-full object-cover transition-transform duration-200 ease-in-out group-hover:scale-hover ${assetLoading || contentType.loading ? "invisible" : "visible"}`,
+        onError: () => setAssetLoadFailed(true),
+        onLoad: () => setAssetLoading(false)
+      }
+    )
+  ] });
+}
+
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
-import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
 function CollectibleSkeleton() {
   return /* @__PURE__ */ jsxs31(
     "div",
@@ -5306,7 +5473,7 @@ function CollectibleSkeleton() {
       "data-testid": "collectible-card-skeleton",
       className: "w-card-width overflow-hidden rounded-xl border border-border-base focus-visible:border-border-focus focus-visible:shadow-none focus-visible:outline-focus active:border-border-focus active:shadow-none",
       children: [
-        /* @__PURE__ */ jsx42("div", { className: "relative aspect-square overflow-hidden bg-background-secondary", children: /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43("div", { className: "relative aspect-square overflow-hidden bg-background-secondary", children: /* @__PURE__ */ jsx43(
           Skeleton11,
           {
             size: "lg",
@@ -5317,8 +5484,8 @@ function CollectibleSkeleton() {
           }
         ) }),
         /* @__PURE__ */ jsxs31("div", { className: "mt-2 flex flex-col gap-2 px-4 pb-4", children: [
-          /* @__PURE__ */ jsx42(Skeleton11, { size: "lg", className: "animate-shimmer" }),
-          /* @__PURE__ */ jsx42(Skeleton11, { size: "sm", className: "animate-shimmer" })
+          /* @__PURE__ */ jsx43(Skeleton11, { size: "lg", className: "animate-shimmer" }),
+          /* @__PURE__ */ jsx43(Skeleton11, { size: "sm", className: "animate-shimmer" })
         ] })
       ]
     }
@@ -5349,10 +5516,10 @@ function CollectibleCard({
     }
   });
   if (cardLoading) {
-    return /* @__PURE__ */ jsx42(CollectibleSkeleton, {});
+    return /* @__PURE__ */ jsx43(CollectibleSkeleton, {});
   }
   const action = balance ? highestOffer && "Sell" /* SELL */ || !collectible?.listing && "Create listing" /* LIST */ || "Transfer" /* TRANSFER */ : collectible?.listing && "Buy" /* BUY */ || "Make an offer" /* OFFER */;
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       "data-testid": "collectible-card",
@@ -5363,8 +5530,8 @@ function CollectibleCard({
           onCollectibleClick?.(collectibleId);
         }
       },
-      children: /* @__PURE__ */ jsx42("div", { className: "group relative z-10 flex h-full w-full cursor-pointer flex-col items-start overflow-hidden rounded-xl border-none bg-none p-0 focus:outline-none [&:focus]:rounded-[10px] [&:focus]:outline-[3px] [&:focus]:outline-black [&:focus]:outline-offset-[-3px]", children: /* @__PURE__ */ jsxs31("article", { className: "w-full rounded-xl", children: [
-        /* @__PURE__ */ jsx42(
+      children: /* @__PURE__ */ jsx43("div", { className: "group relative z-10 flex h-full w-full cursor-pointer flex-col items-start overflow-hidden rounded-xl border-none bg-none p-0 focus:outline-none [&:focus]:rounded-[10px] [&:focus]:outline-[3px] [&:focus]:outline-black [&:focus]:outline-offset-[-3px]", children: /* @__PURE__ */ jsxs31("article", { className: "w-full rounded-xl", children: [
+        /* @__PURE__ */ jsx43(
           CollectibleAsset,
           {
             name: collectibleMetadata?.name || "",
@@ -5372,7 +5539,7 @@ function CollectibleCard({
             assetSrcPrefixUrl
           }
         ),
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(
           Footer,
           {
             name: collectibleMetadata?.name || "",
@@ -5385,7 +5552,7 @@ function CollectibleCard({
             decimals: collectibleMetadata?.decimals
           }
         ),
-        (highestOffer || collectible) && !balanceIsLoading && /* @__PURE__ */ jsx42("div", { className: "-bottom-action-offset absolute flex w-full items-center justify-center bg-overlay-light p-2 backdrop-blur transition-transform duration-200 ease-in-out group-hover:translate-y-[-44px]", children: /* @__PURE__ */ jsx42(
+        (highestOffer || collectible) && !balanceIsLoading && /* @__PURE__ */ jsx43("div", { className: "-bottom-16 absolute flex w-full origin-bottom items-center justify-center bg-overlay-light p-2 backdrop-blur transition-transform duration-200 ease-in-out group-hover:translate-y-[-64px]", children: /* @__PURE__ */ jsx43(
           ActionButton,
           {
             chainId,
@@ -5414,4 +5581,4 @@ export {
   useSellModal,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-TGFX3TMV.js.map
+//# sourceMappingURL=chunk-7IYKUVC3.js.map