@0xsequence/marketplace-sdk 0.8.8 → 0.8.10

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

@@ -2,15 +2,15 @@
 
 import {
   ActionModal
-} from "./chunk-YBOFRP65.js";
+} from "./chunk-FGM57QUU.js";
 import {
   useAnalytics
-} from "./chunk-HHYNOPPI.js";
+} from "./chunk-KTST7ORH.js";
 import {
   BellIcon_default,
   CalendarIcon_default,
   CartIcon_default
-} from "./chunk-35WWD5V6.js";
+} from "./chunk-M6NJ73Y5.js";
 import {
   AlertMessage,
   MODAL_OVERLAY_PROPS,
@@ -33,7 +33,7 @@ import {
   useSwitchChainModal,
   useTransferTokens,
   useWallet
-} from "./chunk-G3447GIP.js";
+} from "./chunk-SXVUTSMT.js";
 import {
   DEFAULT_MARKETPLACE_FEE_PERCENTAGE
 } from "./chunk-Y63BOO6M.js";
@@ -43,7 +43,7 @@ import {
   compareAddress,
   formatPriceWithFee,
   truncateMiddle
-} from "./chunk-YEGD7PWE.js";
+} from "./chunk-5O44EPXZ.js";
 import {
   SequenceMarketplaceV1_ABI
 } from "./chunk-XX4EVWBF.js";
@@ -51,8 +51,9 @@ import {
   balanceQueries,
   collectableKeys,
   getMarketplaceClient,
-  getQueryClient
-} from "./chunk-KGM2WLSP.js";
+  getQueryClient,
+  getSequenceApiClient
+} from "./chunk-7F27CJZW.js";
 import {
   InvalidContractTypeError,
   InvalidStepError
@@ -231,7 +232,7 @@ var quantityInput_default = observer(function QuantityInput({
     "div",
     {
       className: cn(
-        "flex w-full flex-col [&>label>div>div:has(:disabled):hover]:opacity-100 [&>label>div>div:has(:disabled)]:opacity-100 [&>label>div>div>input]:text-xs [&>label>div>div]:h-9 [&>label>div>div]:rounded [&>label>div>div]:pr-0 [&>label>div>div]:pl-3 [&>label>div>div]:text-xs [&>label]:gap-[2px]",
+        "flex w-full flex-col [&>label>div>div>div:has(:disabled):hover]:opacity-100 [&>label>div>div>div:has(:disabled)]:opacity-100 [&>label>div>div>div>input]:text-xs [&>label>div>div>div]:h-9 [&>label>div>div>div]:rounded [&>label>div>div>div]:pr-0 [&>label>div>div>div]:pl-3 [&>label>div>div>div]:text-xs [&>label]:gap-[2px]",
         className,
         disabled && "pointer-events-none opacity-50"
       ),
@@ -264,7 +265,6 @@ var quantityInput_default = observer(function QuantityInput({
                 }
               )
             ] }),
-            numeric: true,
             value: localQuantity,
             onChange: (e) => handleChangeQuantity(e.target.value),
             width: "full"
@@ -581,6 +581,19 @@ var getBuyCollectableParams = async ({
   if (!buyStep) {
     throw new Error("Buy step not found");
   }
+  const creditCardProviders = customCreditCardProviderCallback ? ["custom"] : checkoutOptions.nftCheckout || [];
+  const isTransakSupported = creditCardProviders.includes("transak");
+  let transakContractId;
+  if (isTransakSupported) {
+    const sequenceApiClient = getSequenceApiClient(config);
+    const transakContractIdResponse = await sequenceApiClient.checkoutOptionsGetTransakContractID({
+      chainId,
+      contractAddress: buyStep.to
+    });
+    if (transakContractIdResponse.contractId !== "") {
+      transakContractId = transakContractIdResponse.contractId;
+    }
+  }
   return {
     chain: chainId,
     collectibles: [
@@ -599,7 +612,7 @@ var getBuyCollectableParams = async ({
     recipientAddress: await wallet.address(),
     enableMainCurrencyPayment: true,
     enableSwapPayments: !!checkoutOptions.swap,
-    creditCardProviders: customCreditCardProviderCallback ? ["custom"] : checkoutOptions.nftCheckout || [],
+    creditCardProviders,
     onSuccess: (hash) => {
       callbacks?.onSuccess?.({ hash });
     },
@@ -620,6 +633,11 @@ var getBuyCollectableParams = async ({
         customCreditCardProviderCallback(buyStep);
         buyModalStore.send({ type: "close" });
       }
+    },
+    ...transakContractId && {
+      transakConfig: {
+        contractId: transakContractId
+      }
     }
   };
 };
@@ -1208,7 +1226,6 @@ var CustomSelect = ({
           /* @__PURE__ */ jsx11(ChevronDownIcon, { size: "xs" })
         ] }),
         shape: "circle",
-        opacity: "100",
         className: `bg-overlay-light py-1.5 pl-3 ${className || ""}`,
         "data-testid": `${testId}-trigger`
       }
@@ -1378,7 +1395,7 @@ function PriceInput({
       ),
       children: [
         /* @__PURE__ */ jsx13("div", { className: "absolute top-8 left-2 flex items-center", children: /* @__PURE__ */ jsx13(currencyImage_default, { price$: $price }) }),
-        /* @__PURE__ */ jsx13("div", { className: "[&>label>div>.rounded-xl]:h-9 [&>label>div>.rounded-xl]:rounded-sm [&>label>div>.rounded-xl]:px-2 [&>label]:gap-1", children: /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx13("div", { className: "[&>label>div>div>.rounded-xl]:h-9 [&>label>div>div>.rounded-xl]:rounded-sm [&>label>div>div>.rounded-xl]:px-2 [&>label]:gap-1", children: /* @__PURE__ */ jsx13(
           NumericInput2,
           {
             ref: inputRef,
@@ -1450,7 +1467,6 @@ var WaasFeeOptionsSelect = observer4(
     return /* @__PURE__ */ jsx14(
       Select,
       {
-        items: feeOptions,
         name: "fee-option",
         options: feeOptions.map((option) => ({
           label: option.content,
@@ -4272,16 +4288,20 @@ function SuccessfulPurchaseActions() {
       }
     ),
     /* @__PURE__ */ jsx28(
-      Button5,
+      "a",
       {
-        className: "w-full",
-        as: "a",
         href: successfulPurchaseModal$.state.explorerUrl.get(),
         target: "_blank",
         rel: "noopener noreferrer",
-        shape: "square",
-        leftIcon: ExternalLinkIcon,
-        label: `View on ${successfulPurchaseModal$.state.explorerName.get()}`
+        className: "w-full",
+        children: /* @__PURE__ */ jsx28(
+          Button5,
+          {
+            shape: "square",
+            leftIcon: ExternalLinkIcon,
+            label: `View on ${successfulPurchaseModal$.state.explorerName.get()}`
+          }
+        )
       }
     )
   ] });
@@ -4424,7 +4444,7 @@ var TokenQuantityInput = observer11(
               $invalidQuantity,
               decimals: collection?.decimals || 0,
               maxQuantity: balanceAmount ? String(balanceAmount) : "0",
-              className: "[&>label>div>div]:h-13 [&>label>div>div]:rounded-xl [&>label>div>span]:text-sm [&>label>div>span]:text-text-80 [&>label]:gap-1"
+              className: "[&>label>div>div>div>input]:text-sm [&>label>div>div>div]:h-13 [&>label>div>div>div]:rounded-xl [&>label>div>div>span]:text-sm [&>label>div>div>span]:text-text-80 [&>label]:gap-1"
             }
           ),
           /* @__PURE__ */ jsx29(
@@ -4847,7 +4867,7 @@ var useSellModal = (callbacks) => {
 };
 
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
-import { Skeleton as Skeleton11 } from "@0xsequence/design-system";
+import { Skeleton as Skeleton12 } from "@0xsequence/design-system";
 
 // src/react/ui/components/_internals/action-button/ActionButton.tsx
 import { observer as observer18 } from "@legendapp/state/react";
@@ -5246,7 +5266,7 @@ var TokenTypeBalancePill = ({
   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
+// src/react/ui/components/collectible-card/media/Media.tsx
 import { useEffect as useEffect12, useRef as useRef3, useState as useState10 } from "react";
 
 // src/utils/fetchContentType.ts
@@ -5256,6 +5276,9 @@ function fetchContentType(url) {
       reject(new Error("XMLHttpRequest is not supported in this environment."));
       return;
     }
+    if (!url) {
+      return;
+    }
     const client = new XMLHttpRequest();
     let settled = false;
     const settle = (value) => {
@@ -5301,6 +5324,9 @@ function fetchContentType(url) {
               result = "html";
             }
             break;
+          case "model":
+            result = "3d-model";
+            break;
         }
         settle(result);
         return;
@@ -5330,12 +5356,49 @@ function fetchContentType(url) {
   });
 }
 
-// src/react/ui/components/collectible-card/collectible-asset/CollectibleAssetSkeleton.tsx
+// src/react/ui/components/ModelViewer.tsx
 import { Skeleton as Skeleton10 } from "@0xsequence/design-system";
+import { Suspense, lazy } from "react";
 import { jsx as jsx41 } from "react/jsx-runtime";
-function CollectibleAssetSkeleton() {
-  return /* @__PURE__ */ jsx41(
-    Skeleton10,
+var ModelViewerComponent = lazy(
+  () => import("@google/model-viewer").then(() => ({
+    default: ({
+      posterSrc,
+      src,
+      onLoad,
+      onError
+    }) => /* @__PURE__ */ jsx41("div", { className: "h-full w-full bg-background-raised", children: /* @__PURE__ */ jsx41(
+      "model-viewer",
+      {
+        alt: "3d model",
+        "auto-rotate": true,
+        autoplay: true,
+        "camera-controls": true,
+        class: "h-full w-full",
+        error: onError,
+        load: onLoad,
+        loading: "eager",
+        poster: posterSrc,
+        reveal: "auto",
+        "shadow-intensity": "1",
+        src,
+        "touch-action": "pan-y"
+      }
+    ) })
+  }))
+);
+var ModelViewerLoading = () => /* @__PURE__ */ jsx41(Skeleton10, { className: "h-full w-full" });
+var ModelViewer = (props) => {
+  return /* @__PURE__ */ jsx41(Suspense, { fallback: /* @__PURE__ */ jsx41(ModelViewerLoading, {}), children: /* @__PURE__ */ jsx41(ModelViewerComponent, { ...props }) });
+};
+var ModelViewer_default = ModelViewer;
+
+// src/react/ui/components/collectible-card/media/MediaSkeleton.tsx
+import { Skeleton as Skeleton11 } from "@0xsequence/design-system";
+import { jsx as jsx42 } from "react/jsx-runtime";
+function MediaSkeleton() {
+  return /* @__PURE__ */ jsx42(
+    Skeleton11,
     {
       "data-testid": "collectible-asset-skeleton",
       size: "lg",
@@ -5347,7 +5410,7 @@ function CollectibleAssetSkeleton() {
   );
 }
 
-// src/react/ui/components/collectible-card/collectible-asset/utils.ts
+// src/react/ui/components/collectible-card/media/utils.ts
 var isImage = (fileName) => {
   const isImage2 = /.*\.(png|jpg|jpeg|gif|svg|webp)$/.test(
     fileName?.toLowerCase() || ""
@@ -5362,110 +5425,186 @@ var isVideo = (fileName) => {
   const isVideo2 = /.*\.(mp4|ogg|webm)$/.test(fileName?.toLowerCase() || "");
   return isVideo2;
 };
+var is3dModel = (fileName) => {
+  const is3dFile = /.*\.(gltf|glb|obj|fbx|stl|usdz)$/.test(
+    fileName?.toLowerCase() || ""
+  );
+  return is3dFile;
+};
 var getContentType = (url) => {
-  return new Promise((resolve) => {
-    const type = isHtml(url) ? "html" : isVideo(url) ? "video" : isImage(url) ? "image" : null;
-    resolve(type);
+  return new Promise((resolve, reject) => {
+    const type = isHtml(url) ? "html" : isVideo(url) ? "video" : isImage(url) ? "image" : is3dModel(url) ? "3d-model" : null;
+    if (type) {
+      resolve(type);
+    } else {
+      reject(new Error("Unsupported file type"));
+    }
   });
 };
 
-// src/react/ui/components/collectible-card/collectible-asset/CollectibleAsset.tsx
-import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
-function CollectibleAsset({
+// src/react/ui/components/collectible-card/media/Media.tsx
+import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
+function Media({
   name,
-  collectibleMetadata,
-  assetSrcPrefixUrl
+  assets,
+  assetSrcPrefixUrl,
+  className,
+  supply
 }) {
   const [assetLoadFailed, setAssetLoadFailed] = useState10(false);
   const [assetLoading, setAssetLoading] = useState10(true);
-  const [contentType, setContentType] = useState10({ type: null, loading: true, failed: false });
+  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;
+  const assetUrl = assets.find((asset) => !!asset);
+  const proxiedAssetUrl = assetUrl ? assetSrcPrefixUrl ? `${assetSrcPrefixUrl}${assetUrl}` : assetUrl : "";
+  const classNames = cn(
+    "relative aspect-square overflow-hidden bg-background-secondary",
+    supply !== void 0 && supply === 0 && "opacity-50",
+    className
+  );
   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 (!assetUrl) {
+      setContentType({ type: null, loading: false, failed: true });
+      return;
+    }
+    const determineContentType = async () => {
+      try {
+        const type = await getContentType(proxiedAssetUrl);
+        setContentType({ type, loading: false, failed: false });
+      } catch {
+        try {
+          const type = await fetchContentType(proxiedAssetUrl);
+          setContentType({ type, loading: false, failed: false });
+        } catch {
+          setContentType({ type: null, loading: false, failed: true });
         }
-      )
-    ] });
+      }
+    };
+    determineContentType();
+  }, [proxiedAssetUrl, assetUrl]);
+  const handleAssetError = () => {
+    setAssetLoadFailed(true);
+  };
+  const handleAssetLoad = () => {
+    setAssetLoading(false);
+  };
+  if (contentType.failed && !assetLoadFailed || !assetUrl) {
+    return /* @__PURE__ */ jsx43("div", { className: cn("h-full w-full", classNames), children: /* @__PURE__ */ jsx43(
+      "img",
+      {
+        src: placeholderImage,
+        alt: name || "Collectible",
+        className: "h-full w-full object-cover",
+        onError: (e) => {
+          console.error("Failed to load placeholder image");
+          e.currentTarget.style.display = "none";
+        }
+      }
+    ) });
+  }
+  if (contentType.type === "html" && !assetLoadFailed) {
+    return /* @__PURE__ */ jsxs30(
+      "div",
+      {
+        className: cn(
+          "flex w-full items-center justify-center rounded-lg",
+          classNames
+        ),
+        children: [
+          (assetLoading || contentType.loading) && /* @__PURE__ */ jsx43(MediaSkeleton, {}),
+          /* @__PURE__ */ jsx43(
+            "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: handleAssetError,
+              onLoad: handleAssetLoad
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (contentType.type === "3d-model" && !assetLoadFailed) {
+    return /* @__PURE__ */ jsx43("div", { className: cn("h-full w-full", classNames), children: /* @__PURE__ */ jsx43(
+      ModelViewer_default,
+      {
+        src: proxiedAssetUrl,
+        posterSrc: placeholderImage,
+        onLoad: handleAssetLoad,
+        onError: handleAssetError
+      }
+    ) });
   }
   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(
+    const videoClassNames = 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"
+    );
+    return /* @__PURE__ */ jsxs30("div", { className: classNames, children: [
+      (assetLoading || contentType.loading) && /* @__PURE__ */ jsx43(MediaSkeleton, {}),
+      /* @__PURE__ */ jsx43(
         "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"
-          ),
+          className: videoClassNames,
           autoPlay: true,
           loop: true,
           controls: true,
           playsInline: true,
           muted: true,
-          controlsList: "nodownload noremoteplayback nofullscreen ",
-          onError: () => {
-            setAssetLoadFailed(true);
-          },
-          onLoadedMetadata: () => {
-            setAssetLoading(false);
-          },
+          controlsList: "nodownload noremoteplayback nofullscreen",
+          onError: handleAssetError,
+          onLoadedMetadata: handleAssetLoad,
           "data-testid": "collectible-asset-video",
-          children: /* @__PURE__ */ jsx42("source", { src: proxiedAssetUrl })
+          children: /* @__PURE__ */ jsx43("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(
+  const imgSrc = assetLoadFailed || contentType.failed ? placeholderImage : proxiedAssetUrl;
+  const imgClassNames = cn(
+    "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"
+  );
+  return /* @__PURE__ */ jsxs30("div", { className: classNames, children: [
+    (assetLoading || contentType.loading) && /* @__PURE__ */ jsx43(MediaSkeleton, {}),
+    /* @__PURE__ */ jsx43(
       "img",
       {
-        src: assetLoadFailed || contentType.failed ? placeholderImage : proxiedAssetUrl,
+        src: imgSrc,
         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)
+        className: imgClassNames,
+        onError: (e) => {
+          if (contentType.type === "image") {
+            setAssetLoadFailed(true);
+          }
+          if (e.currentTarget.src === placeholderImage) {
+            console.error("Failed to load placeholder image");
+            e.currentTarget.style.display = "none";
+          }
+        },
+        onLoad: handleAssetLoad
       }
     )
   ] });
 }
 
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
-import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
 function CollectibleSkeleton() {
   return /* @__PURE__ */ jsxs31(
     "div",
@@ -5473,8 +5612,8 @@ 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__ */ jsx43("div", { className: "relative aspect-square overflow-hidden bg-background-secondary", children: /* @__PURE__ */ jsx43(
-          Skeleton11,
+        /* @__PURE__ */ jsx44("div", { className: "relative aspect-square overflow-hidden bg-background-secondary", children: /* @__PURE__ */ jsx44(
+          Skeleton12,
           {
             size: "lg",
             className: "absolute inset-0 h-full w-full animate-shimmer",
@@ -5484,8 +5623,8 @@ function CollectibleSkeleton() {
           }
         ) }),
         /* @__PURE__ */ jsxs31("div", { className: "mt-2 flex flex-col gap-2 px-4 pb-4", children: [
-          /* @__PURE__ */ jsx43(Skeleton11, { size: "lg", className: "animate-shimmer" }),
-          /* @__PURE__ */ jsx43(Skeleton11, { size: "sm", className: "animate-shimmer" })
+          /* @__PURE__ */ jsx44(Skeleton12, { size: "lg", className: "animate-shimmer" }),
+          /* @__PURE__ */ jsx44(Skeleton12, { size: "sm", className: "animate-shimmer" })
         ] })
       ]
     }
@@ -5516,10 +5655,10 @@ function CollectibleCard({
     }
   });
   if (cardLoading) {
-    return /* @__PURE__ */ jsx43(CollectibleSkeleton, {});
+    return /* @__PURE__ */ jsx44(CollectibleSkeleton, {});
   }
   const action = balance ? highestOffer && "Sell" /* SELL */ || !collectible?.listing && "Create listing" /* LIST */ || "Transfer" /* TRANSFER */ : collectible?.listing && "Buy" /* BUY */ || "Make an offer" /* OFFER */;
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     "div",
     {
       "data-testid": "collectible-card",
@@ -5530,16 +5669,20 @@ function CollectibleCard({
           onCollectibleClick?.(collectibleId);
         }
       },
-      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,
+      children: /* @__PURE__ */ jsx44("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__ */ jsx44(
+          Media,
           {
             name: collectibleMetadata?.name || "",
-            collectibleMetadata,
+            assets: [
+              collectibleMetadata?.image,
+              collectibleMetadata?.video,
+              collectibleMetadata?.animation_url
+            ],
             assetSrcPrefixUrl
           }
         ),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           Footer,
           {
             name: collectibleMetadata?.name || "",
@@ -5552,7 +5695,7 @@ function CollectibleCard({
             decimals: collectibleMetadata?.decimals
           }
         ),
-        (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(
+        (highestOffer || collectible) && !balanceIsLoading && /* @__PURE__ */ jsx44("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__ */ jsx44(
           ActionButton,
           {
             chainId,
@@ -5579,6 +5722,7 @@ export {
   useCreateListingModal,
   useMakeOfferModal,
   useSellModal,
+  Media,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-7IYKUVC3.js.map
+//# sourceMappingURL=chunk-UJSF7PSC.js.map