@0xsequence/marketplace-sdk 0.8.9 → 0.8.10

package/dist/{chunk-I2BYHDFE.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
@@ -580,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: [
@@ -598,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 });
     },
@@ -619,6 +633,11 @@ var getBuyCollectableParams = async ({
         customCreditCardProviderCallback(buyStep);
         buyModalStore.send({ type: "close" });
       }
+    },
+    ...transakContractId && {
+      transakConfig: {
+        contractId: transakContractId
+      }
     }
   };
 };
@@ -4501,7 +4520,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,
       {
@@ -5247,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
@@ -5257,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) => {
@@ -5371,10 +5393,10 @@ var ModelViewer = (props) => {
 };
 var ModelViewer_default = ModelViewer;
 
-// src/react/ui/components/collectible-card/collectible-asset/CollectibleAssetSkeleton.tsx
+// 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 CollectibleAssetSkeleton() {
+function MediaSkeleton() {
   return /* @__PURE__ */ jsx42(
     Skeleton11,
     {
@@ -5388,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() || ""
@@ -5410,53 +5432,92 @@ var is3dModel = (fileName) => {
   return is3dFile;
 };
 var getContentType = (url) => {
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
     const type = isHtml(url) ? "html" : isVideo(url) ? "video" : isImage(url) ? "image" : is3dModel(url) ? "3d-model" : null;
-    resolve(type);
+    if (type) {
+      resolve(type);
+    } else {
+      reject(new Error("Unsupported file type"));
+    }
   });
 };
 
-// src/react/ui/components/collectible-card/collectible-asset/CollectibleAsset.tsx
+// src/react/ui/components/collectible-card/media/Media.tsx
 import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
-function CollectibleAsset({
+function Media({
   name,
   assets,
   assetSrcPrefixUrl,
-  className
+  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 = assets?.find((asset) => asset) || 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 (!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 aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-background-secondary",
-          className
+          "flex w-full items-center justify-center rounded-lg",
+          classNames
         ),
         children: [
-          (assetLoading || contentType.loading) && /* @__PURE__ */ jsx43(CollectibleAssetSkeleton, {}),
+          (assetLoading || contentType.loading) && /* @__PURE__ */ jsx43(MediaSkeleton, {}),
           /* @__PURE__ */ jsx43(
             "iframe",
             {
@@ -5465,11 +5526,9 @@ function CollectibleAsset({
               src: proxiedAssetUrl,
               allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
               sandbox: "allow-scripts",
-              style: {
-                border: "0px"
-              },
-              onError: () => setAssetLoadFailed(true),
-              onLoad: () => setAssetLoading(false)
+              style: { border: "0px" },
+              onError: handleAssetError,
+              onLoad: handleAssetLoad
             }
           )
         ]
@@ -5477,77 +5536,71 @@ function CollectibleAsset({
     );
   }
   if (contentType.type === "3d-model" && !assetLoadFailed) {
-    return /* @__PURE__ */ jsx43("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx43("div", { className: cn("h-full w-full", classNames), children: /* @__PURE__ */ jsx43(
       ModelViewer_default,
       {
         src: proxiedAssetUrl,
         posterSrc: placeholderImage,
-        onLoad: () => setAssetLoading(false),
-        onError: () => setAssetLoadFailed(true)
+        onLoad: handleAssetLoad,
+        onError: handleAssetError
       }
     ) });
   }
   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 })
-            }
-          )
-        ]
-      }
+    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: videoClassNames,
+          autoPlay: true,
+          loop: true,
+          controls: true,
+          playsInline: true,
+          muted: true,
+          controlsList: "nodownload noremoteplayback nofullscreen",
+          onError: handleAssetError,
+          onLoadedMetadata: handleAssetLoad,
+          "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)
-          }
-        )
-      ]
-    }
+  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: imgSrc,
+        alt: name || "Collectible",
+        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
@@ -5618,7 +5671,7 @@ function CollectibleCard({
       },
       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,
+          Media,
           {
             name: collectibleMetadata?.name || "",
             assets: [
@@ -5669,7 +5722,7 @@ export {
   useCreateListingModal,
   useMakeOfferModal,
   useSellModal,
-  CollectibleAsset,
+  Media,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-I2BYHDFE.js.map
+//# sourceMappingURL=chunk-UJSF7PSC.js.map