@0xsequence/marketplace-sdk 0.8.8 → 0.8.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @0xsequence/marketplace-sdk
 
+## 0.8.9
+
+### Patch Changes
+
+- Fixed issues with input components while using sequence-design-system v2.1.12
+
 ## 0.8.8
 
 ### Patch Changes

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

@@ -231,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"
       ),
@@ -264,7 +264,6 @@ var quantityInput_default = observer(function QuantityInput({
                 }
               )
             ] }),
-            numeric: true,
             value: localQuantity,
             onChange: (e) => handleChangeQuantity(e.target.value),
             width: "full"
@@ -1208,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`
       }
@@ -1378,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,
@@ -1450,7 +1448,6 @@ var WaasFeeOptionsSelect = observer4(
     return /* @__PURE__ */ jsx14(
       Select,
       {
-        items: feeOptions,
         name: "fee-option",
         options: feeOptions.map((option) => ({
           label: option.content,
@@ -4272,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()}`
+          }
+        )
       }
     )
   ] });
@@ -4424,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(
@@ -4500,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,
       {
@@ -4847,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";
@@ -5301,6 +5302,9 @@ function fetchContentType(url) {
               result = "html";
             }
             break;
+          case "model":
+            result = "3d-model";
+            break;
         }
         settle(result);
         return;
@@ -5330,12 +5334,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";
+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__ */ jsx41(
-    Skeleton10,
+  return /* @__PURE__ */ jsx42(
+    Skeleton11,
     {
       "data-testid": "collectible-asset-skeleton",
       size: "lg",
@@ -5362,19 +5403,26 @@ 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;
+    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 jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
 function CollectibleAsset({
   name,
-  collectibleMetadata,
-  assetSrcPrefixUrl
+  assets,
+  assetSrcPrefixUrl,
+  className
 }) {
   const [assetLoadFailed, setAssetLoadFailed] = useState10(false);
   const [assetLoading, setAssetLoading] = useState10(true);
@@ -5382,7 +5430,7 @@ function CollectibleAsset({
   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 assetUrl = assets?.find((asset) => asset) || placeholderImage;
   const proxiedAssetUrl = assetSrcPrefixUrl ? `${assetSrcPrefixUrl}${assetUrl}` : assetUrl;
   useEffect12(() => {
     getContentType(proxiedAssetUrl).then((contentType2) => {
@@ -5400,72 +5448,110 @@ function CollectibleAsset({
     });
   }, [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)
-        }
-      )
-    ] });
+    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 === "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 })
-        }
-      )
-    ] });
+  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)
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsxs30("div", { className: "relative aspect-square overflow-hidden bg-background-secondary", children: [
-    (assetLoading || contentType.loading) && /* @__PURE__ */ jsx42(CollectibleAssetSkeleton, {}),
-    /* @__PURE__ */ jsx42(
-      "img",
+  if (contentType.type === "video" && !assetLoadFailed) {
+    return /* @__PURE__ */ jsxs30(
+      "div",
       {
-        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)
+        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 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 +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__ */ 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 +5570,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 +5602,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 +5616,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(
+      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__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           Footer,
           {
             name: collectibleMetadata?.name || "",
@@ -5552,7 +5642,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 +5669,7 @@ export {
   useCreateListingModal,
   useMakeOfferModal,
   useSellModal,
+  CollectibleAsset,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-7IYKUVC3.js.map
+//# sourceMappingURL=chunk-I2BYHDFE.js.map