@0xsequence/marketplace-sdk 0.8.7 → 0.8.9

package/dist/{chunk-Y6AOCO3Q.js → chunk-I2BYHDFE.js}

@@ -2,10 +2,10 @@
 
 import {
   ActionModal
-} from "./chunk-A6V7XDY4.js";
+} from "./chunk-YBOFRP65.js";
 import {
   useAnalytics
-} from "./chunk-O6GWM7C3.js";
+} from "./chunk-HHYNOPPI.js";
 import {
   BellIcon_default,
   CalendarIcon_default,
@@ -33,7 +33,7 @@ import {
   useSwitchChainModal,
   useTransferTokens,
   useWallet
-} from "./chunk-YAUZLETY.js";
+} from "./chunk-G3447GIP.js";
 import {
   DEFAULT_MARKETPLACE_FEE_PERCENTAGE
 } from "./chunk-Y63BOO6M.js";
@@ -45,13 +45,18 @@ import {
   truncateMiddle
 } from "./chunk-YEGD7PWE.js";
 import {
-  InvalidContractTypeError,
-  InvalidStepError,
+  SequenceMarketplaceV1_ABI
+} from "./chunk-XX4EVWBF.js";
+import {
   balanceQueries,
   collectableKeys,
   getMarketplaceClient,
   getQueryClient
-} from "./chunk-KTT27YUN.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";
@@ -226,7 +231,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"
       ),
@@ -259,7 +264,6 @@ var quantityInput_default = observer(function QuantityInput({
                 }
               )
             ] }),
-            numeric: true,
             value: localQuantity,
             onChange: (e) => handleChangeQuantity(e.target.value),
             width: "full"
@@ -552,7 +556,8 @@ var getBuyCollectableParams = async ({
   collectable,
   checkoutOptions,
   fee,
-  skipNativeBalanceCheck
+  skipNativeBalanceCheck,
+  nativeTokenAddress
 }) => {
   const marketplaceClient = getMarketplaceClient(chainId, config);
   const { steps: steps3 } = await marketplaceClient.generateBuyTransaction({
@@ -598,7 +603,7 @@ var getBuyCollectableParams = async ({
       callbacks?.onSuccess?.({ hash });
     },
     supplementaryAnalyticsInfo: {
-      orderId,
+      requestId: orderId,
       marketplaceKind: marketplace
     },
     onError: callbacks?.onError,
@@ -608,6 +613,7 @@ var getBuyCollectableParams = async ({
       buyModalStore.send({ type: "close" });
     },
     skipNativeBalanceCheck,
+    nativeTokenAddress,
     ...customCreditCardProviderCallback && {
       customProviderCallback: () => {
         customCreditCardProviderCallback(buyStep);
@@ -632,7 +638,8 @@ var usePaymentModalParams = (args) => {
     collectibleId,
     orderId,
     customCreditCardProviderCallback,
-    skipNativeBalanceCheck
+    skipNativeBalanceCheck,
+    nativeTokenAddress
   } = buyModalProps;
   const config = useConfig();
   const fee = useFees({
@@ -662,7 +669,8 @@ var usePaymentModalParams = (args) => {
         onError
       },
       customCreditCardProviderCallback,
-      skipNativeBalanceCheck
+      skipNativeBalanceCheck,
+      nativeTokenAddress
     }) : skipToken2
   });
 };
@@ -1199,7 +1207,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`
       }
@@ -1369,7 +1376,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,
@@ -1441,7 +1448,6 @@ var WaasFeeOptionsSelect = observer4(
     return /* @__PURE__ */ jsx14(
       Select,
       {
-        items: feeOptions,
         name: "fee-option",
         options: feeOptions.map((option) => ({
           label: option.content,
@@ -1915,6 +1921,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 +2619,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 +3220,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 +3235,7 @@ var useTransactionSteps2 = ({
             currencyAddress: offerInput.offer.currencyAddress,
             currencySymbol: currency?.symbol || "",
             chainId: chainId.toString(),
+            requestId: requestId || "",
             txnHash: hash || ""
           },
           nums: {
@@ -3805,9 +3853,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 || ""
           },
@@ -4218,16 +4269,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()}`
+          }
+        )
       }
     )
   ] });
@@ -4370,7 +4425,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(
@@ -4446,7 +4501,7 @@ var WalletAddressInput = observer13(() => {
   const handleChangeWalletAddress = (event) => {
     transferModal$.state.receiverAddress.set(event.target.value);
   };
-  return /* @__PURE__ */ jsxs24("div", { className: "[&>label>div>span]:text-sm [&>label>div>span]:text-text-80 [&>label]:gap-1", children: [
+  return /* @__PURE__ */ jsxs24("div", { className: "[&>label>div>>span]:text-sm [&>label>div>span]:text-text-80 [&>label]:gap-1", children: [
     /* @__PURE__ */ jsx31(
       TextInput,
       {
@@ -4793,7 +4848,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";
@@ -5078,111 +5133,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 +5142,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 +5167,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 +5190,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 +5202,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 +5217,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 +5228,7 @@ var Footer = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx40(
       TokenTypeBalancePill,
       {
         balance,
@@ -5294,11 +5244,314 @@ 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;
+          case "model":
+            result = "3d-model";
+            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/ModelViewer.tsx
+import { Skeleton as Skeleton10 } from "@0xsequence/design-system";
+import { Suspense, lazy } from "react";
+import { jsx as jsx41 } from "react/jsx-runtime";
+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/collectible-asset/CollectibleAssetSkeleton.tsx
+import { Skeleton as Skeleton11 } from "@0xsequence/design-system";
+import { jsx as jsx42 } from "react/jsx-runtime";
+function CollectibleAssetSkeleton() {
+  return /* @__PURE__ */ jsx42(
+    Skeleton11,
+    {
+      "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 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" : is3dModel(url) ? "3d-model" : null;
+    resolve(type);
+  });
+};
+
+// src/react/ui/components/collectible-card/collectible-asset/CollectibleAsset.tsx
+import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
+function CollectibleAsset({
+  name,
+  assets,
+  assetSrcPrefixUrl,
+  className
+}) {
+  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 = assets?.find((asset) => asset) || 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: cn(
+          "flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-background-secondary",
+          className
+        ),
+        children: [
+          (assetLoading || contentType.loading) && /* @__PURE__ */ jsx43(CollectibleAssetSkeleton, {}),
+          /* @__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: () => setAssetLoadFailed(true),
+              onLoad: () => setAssetLoading(false)
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (contentType.type === "3d-model" && !assetLoadFailed) {
+    return /* @__PURE__ */ jsx43("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx43(
+      ModelViewer_default,
+      {
+        src: proxiedAssetUrl,
+        posterSrc: placeholderImage,
+        onLoad: () => setAssetLoading(false),
+        onError: () => setAssetLoadFailed(true)
+      }
+    ) });
+  }
+  if (contentType.type === "video" && !assetLoadFailed) {
+    return /* @__PURE__ */ jsxs30(
+      "div",
+      {
+        className: cn(
+          "relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-background-secondary",
+          className
+        ),
+        children: [
+          (assetLoading || contentType.loading) && /* @__PURE__ */ jsx43(CollectibleAssetSkeleton, {}),
+          /* @__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"
+              ),
+              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__ */ jsx43("source", { src: proxiedAssetUrl })
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs30(
+    "div",
+    {
+      className: cn(
+        "relative aspect-square overflow-hidden bg-background-secondary",
+        className
+      ),
+      children: [
+        (assetLoading || contentType.loading) && /* @__PURE__ */ jsx43(CollectibleAssetSkeleton, {}),
+        /* @__PURE__ */ jsx43(
+          "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 jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
 function CollectibleSkeleton() {
   return /* @__PURE__ */ jsxs31(
     "div",
@@ -5306,8 +5559,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__ */ jsx42("div", { className: "relative aspect-square overflow-hidden bg-background-secondary", children: /* @__PURE__ */ jsx42(
-          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",
@@ -5317,8 +5570,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__ */ jsx44(Skeleton12, { size: "lg", className: "animate-shimmer" }),
+          /* @__PURE__ */ jsx44(Skeleton12, { size: "sm", className: "animate-shimmer" })
         ] })
       ]
     }
@@ -5349,10 +5602,10 @@ function CollectibleCard({
     }
   });
   if (cardLoading) {
-    return /* @__PURE__ */ jsx42(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__ */ jsx42(
+  return /* @__PURE__ */ jsx44(
     "div",
     {
       "data-testid": "collectible-card",
@@ -5363,16 +5616,20 @@ 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__ */ 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(
           CollectibleAsset,
           {
             name: collectibleMetadata?.name || "",
-            collectibleMetadata,
+            assets: [
+              collectibleMetadata?.image,
+              collectibleMetadata?.video,
+              collectibleMetadata?.animation_url
+            ],
             assetSrcPrefixUrl
           }
         ),
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx44(
           Footer,
           {
             name: collectibleMetadata?.name || "",
@@ -5385,7 +5642,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__ */ 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,
@@ -5412,6 +5669,7 @@ export {
   useCreateListingModal,
   useMakeOfferModal,
   useSellModal,
+  CollectibleAsset,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-Y6AOCO3Q.js.map
+//# sourceMappingURL=chunk-I2BYHDFE.js.map