@0xsequence/marketplace-sdk 0.8.9 → 0.8.10

package/dist/utils/abi/primary-sale/index.js

@@ -0,0 +1,9 @@
+import {
+  ERC1155_SALES_CONTRACT_ABI,
+  ERC721_SALE_ABI
+} from "../../../chunk-Q3ECVC4F.js";
+export {
+  ERC1155_SALES_CONTRACT_ABI,
+  ERC721_SALE_ABI
+};
+//# sourceMappingURL=index.js.map

package/dist/utils/abi/primary-sale/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/utils/index.d.ts

@@ -1,5 +1,6 @@
 export { EIP2981_ABI, SequenceMarketplaceV1_ABI, SequenceMarketplaceV2_ABI } from './abi/marketplace/index.js';
 export { ERC1155_ABI, ERC20_ABI, ERC721_ABI } from './abi/token/index.js';
+export { ERC1155_SALES_CONTRACT_ABI, ERC721_SALE_ABI } from './abi/primary-sale/index.js';
 import { Image } from '@0xsequence/design-system';
 import { ComponentType } from 'react';
 import { M as MarketplaceKind } from '../marketplace.gen-DQzWciwC.js';

package/dist/utils/index.js

@@ -10,9 +10,13 @@ import {
   networkToWagmiChain,
   truncateEnd,
   truncateMiddle
-} from "../chunk-YEGD7PWE.js";
-import "../chunk-FMEEJFAF.js";
-import "../chunk-UISBTKFF.js";
+} from "../chunk-5O44EPXZ.js";
+import "../chunk-5C6ZZ6WX.js";
+import "../chunk-6CTFVBKU.js";
+import {
+  ERC1155_SALES_CONTRACT_ABI,
+  ERC721_SALE_ABI
+} from "../chunk-Q3ECVC4F.js";
 import {
   ERC1155_ABI,
   ERC20_ABI,
@@ -25,14 +29,16 @@ import {
 } from "../chunk-XX4EVWBF.js";
 import "../chunk-2PSNAIAT.js";
 import "../chunk-DWTLVJAW.js";
-import "../chunk-KGM2WLSP.js";
+import "../chunk-7F27CJZW.js";
 import "../chunk-D7RVSZAQ.js";
 import "../chunk-NX52D7NX.js";
 export {
   EIP2981_ABI,
   ERC1155_ABI,
+  ERC1155_SALES_CONTRACT_ABI,
   ERC20_ABI,
   ERC721_ABI,
+  ERC721_SALE_ABI,
   SequenceMarketplaceV1_ABI,
   SequenceMarketplaceV2_ABI,
   calculateEarningsAfterFees,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@0xsequence/marketplace-sdk",
   "private": false,
-  "version": "0.8.9",
+  "version": "0.8.10",
   "type": "module",
   "sideEffects": [
     "**/*.css"
@@ -41,60 +41,60 @@
   "dependencies": {
     "@databeat/tracker": "^0.9.3",
     "@legendapp/state": "^3.0.0-beta.30",
-    "@tailwindcss/postcss": "^4.0.15",
-    "@xstate/store": "^3.4.3",
+    "@tailwindcss/postcss": "^4.1.6",
+    "@xstate/store": "^3.6.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "dnum": "^2.14.0",
     "nuqs": "^2.4.3",
     "react-day-picker": "^9.6.7",
-    "tailwind-merge": "^3.0.2",
-    "zod": "^3.24.2"
+    "tailwind-merge": "^3.3.0",
+    "zod": "^3.24.4"
   },
   "peerDependencies": {
-    "0xsequence": "^2.3.8",
-    "@0xsequence/api": "^2.3.8",
-    "@0xsequence/checkout": "^5.2.2",
-    "@0xsequence/connect": "^5.2.2",
+    "0xsequence": "^2.3.12",
+    "@0xsequence/api": "^2.3.12",
+    "@0xsequence/checkout": "^5.3.1",
+    "@0xsequence/connect": "^5.3.1",
     "@0xsequence/design-system": "^2.1.12",
-    "@0xsequence/indexer": "^2.3.8",
-    "@0xsequence/metadata": "^2.3.8",
-    "@0xsequence/network": "^2.3.8",
-    "@tanstack/react-query": "^5.74.3",
+    "@0xsequence/indexer": "^2.3.12",
+    "@0xsequence/metadata": "^2.3.12",
+    "@0xsequence/network": "^2.3.12",
+    "@tanstack/react-query": "^5.76.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "viem": "^2.27.0",
-    "wagmi": "^2.14.16",
+    "viem": "^2.29.2",
+    "wagmi": "^2.15.3",
     "@google/model-viewer": "^4.1.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@changesets/cli": "^2.29.0",
-    "@eslint/js": "^9.23.0",
+    "@changesets/cli": "^2.29.4",
+    "@eslint/js": "^9.26.0",
     "@testing-library/jest-dom": "6.4.7",
-    "@testing-library/react": "^16.2.0",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
     "@vitest/coverage-v8": "3.0.9",
     "ctix": "^2.7.1",
     "esbuild-plugin-preserve-directives": "^0.0.11",
-    "eslint": "^9.23.0",
+    "eslint": "^9.26.0",
     "eslint-config-biome": "^1.9.4",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "globals": "^16.0.0",
-    "happy-dom": "^17.4.4",
-    "jsdom": "^26.0.0",
-    "msw": "^2.7.3",
+    "globals": "^16.1.0",
+    "happy-dom": "^17.4.7",
+    "jsdom": "^26.1.0",
+    "msw": "^2.8.2",
     "postcss": "^8.5.3",
-    "prool": "^0.0.23",
-    "tailwindcss": "^4.1.4",
+    "prool": "^0.0.24",
+    "tailwindcss": "^4.1.6",
     "tsup": "^8.4.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.27.0",
+    "typescript-eslint": "^8.32.1",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.9"
+    "vitest": "^3.1.3"
   },
   "scripts": {
     "build": "tsc -b && tsup",

package/src/react/_internal/api/services.ts

@@ -1,3 +1,4 @@
+import { SequenceAPIClient } from '@0xsequence/api';
 import { SequenceIndexer } from '@0xsequence/indexer';
 import { SequenceMetadata } from '@0xsequence/metadata';
 import { networks, stringTemplate } from '@0xsequence/network';
@@ -6,7 +7,7 @@ import { MissingConfigError } from '../../../utils/_internal/error/transaction';
 import { SequenceMarketplace } from './marketplace-api';
 
 const SERVICES = {
-	sequenceApi: 'https://api.sequence.app',
+	sequenceApi: 'https://${prefix}api.sequence.app',
 	metadata: 'https://${prefix}metadata.sequence.app',
 	indexer: 'https://${prefix}${network}-indexer.sequence.app',
 	marketplaceApi: 'https://${prefix}marketplace-api.sequence.app/${network}',
@@ -51,6 +52,11 @@ export const builderRpcApi = (env: Env = 'production') => {
 	return stringTemplate(SERVICES.builderRpcApi, { prefix });
 };
 
+export const sequenceApiUrl = (env: Env = 'production') => {
+	const prefix = getPrefix(env);
+	return stringTemplate(SERVICES.sequenceApi, { prefix });
+};
+
 export const builderMarketplaceApi = (
 	projectId: string,
 	env: Env = 'production',
@@ -82,6 +88,11 @@ export const getMarketplaceClient = (
 		projectAccessKey,
 	);
 };
+export const getSequenceApiClient = (config: SdkConfig) => {
+	const env = config._internal?.sequenceApiEnv || 'production';
+	const projectAccessKey = getAccessKey({ env, config });
+	return new SequenceAPIClient(sequenceApiUrl(env), projectAccessKey);
+};
 const getAccessKey = ({ env, config }: { env: Env; config: SdkConfig }) => {
 	switch (env) {
 		case 'development':

package/src/react/hooks/index.ts

@@ -36,3 +36,4 @@ export * from './useListCollections';
 export * from './useCancelOrder';
 export * from './useCollectionDetails';
 export * from './useCollectionDetailsPolling';
+export * from './useListTokenMetadata';

package/src/react/hooks/useList1155SaleSupplies.tsx

@@ -0,0 +1,62 @@
+import { getUnixTime } from 'date-fns';
+import type { Address } from 'viem';
+import { useReadContracts } from 'wagmi';
+import { ERC1155_SALES_CONTRACT_ABI } from '../..';
+
+interface UseSaleSupplyDataProps {
+	tokenIds: string[];
+	salesContractAddress: Address;
+}
+
+export function useList1155SaleSupplies({
+	tokenIds,
+	salesContractAddress,
+}: UseSaleSupplyDataProps) {
+	const getReadContractsArgs = (tokenIds: string[]) =>
+		tokenIds.map((tokenId) => ({
+			address: salesContractAddress,
+			abi: ERC1155_SALES_CONTRACT_ABI,
+			functionName: 'tokenSaleDetails',
+			args: [tokenId],
+		}));
+
+	const {
+		data: supplyData,
+		isLoading: supplyDataLoading,
+		error: supplyDataError,
+	} = useReadContracts({
+		batchSize: 500_000, // Node gateway limit has a limit of 512kB, setting it to 500kB to be safe
+		contracts: getReadContractsArgs(tokenIds),
+	});
+
+	const extendedSupplyData = (supplyData || [])
+		.map((data, index) => ({
+			...data,
+			tokenId: tokenIds[index],
+		}))
+		.filter((data) => data.status === 'success')
+		.filter((data) => {
+			if (typeof data.result !== 'object') return false;
+			const now = BigInt(getUnixTime(new Date()));
+			return data.result.endTime > now && data.result.startTime < now;
+		});
+
+	const getSupply = (tokenId: string): number | undefined => {
+		const found = extendedSupplyData.find((data) => data.tokenId === tokenId);
+		if (!found || typeof found.result !== 'object' || found.result === null)
+			return undefined;
+		const supply = found.result.supplyCap;
+		if (supply === undefined) return undefined;
+		// https://github.com/0xsequence/contracts-library/blob/ead1baf34270c76260d01cfc130bb7cc9d57518e/src/tokens/ERC1155/utility/sale/IERC1155Sale.sol#L8
+		// 0 means infinite
+		if (supply === 0n) return Number.POSITIVE_INFINITY;
+		return Number(supply);
+	};
+
+	return {
+		extendedSupplyData,
+		getSupply,
+		supplyDataLoading,
+		supplyDataError,
+	};
+}

package/src/react/hooks/useListTokenMetadata.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import { useConfig } from './useConfig';
+
+import {
+	type FetchTokenMetadataArgs,
+	tokenMetadataOptions,
+} from '../queries/listTokenMetadata';
+
+export const useListTokenMetadata = (args: FetchTokenMetadataArgs) => {
+	const config = useConfig();
+	const { chainId, contractAddress, tokenIds, query } = args;
+
+	return useQuery({
+		...tokenMetadataOptions(
+			{ chainId, contractAddress, tokenIds, query },
+			config,
+		),
+	});
+};

package/src/react/queries/index.ts

@@ -5,3 +5,4 @@ export * from './listCollectibles';
 export * from './highestOffer';
 export * from './listBalances';
 export * from './lowestListing';
+export * from './listTokenMetadata';

package/src/react/queries/listTokenMetadata.ts

@@ -0,0 +1,38 @@
+import { queryOptions } from '@tanstack/react-query';
+import type { SdkConfig } from '../../types';
+import { getMetadataClient } from '../_internal';
+
+export interface FetchTokenMetadataArgs {
+	chainId: number;
+	contractAddress: string;
+	tokenIds: string[];
+	query?: {
+		enabled?: boolean;
+	};
+}
+
+const fetchTokenMetadata = async (
+	{ chainId, contractAddress, tokenIds }: FetchTokenMetadataArgs,
+	config: SdkConfig,
+) => {
+	const metadataClient = getMetadataClient(config);
+
+	const response = await metadataClient.getTokenMetadata({
+		chainID: chainId.toString(),
+		contractAddress: contractAddress,
+		tokenIDs: tokenIds,
+	});
+
+	return response.tokenMetadata;
+};
+
+export const tokenMetadataOptions = (
+	args: FetchTokenMetadataArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		...args.query,
+		queryKey: ['listTokenMetadata', args.chainId, args.contractAddress],
+		queryFn: () => fetchTokenMetadata(args, config),
+	});
+};

package/src/react/ui/components/collectible-card/CollectibleCard.tsx

@@ -12,7 +12,7 @@ import { useCurrency } from '../../../hooks';
 import { ActionButton } from '../_internals/action-button/ActionButton';
 import { CollectibleCardAction } from '../_internals/action-button/types';
 import { Footer } from './Footer';
-import { CollectibleAsset } from './collectible-asset/CollectibleAsset';
+import { Media } from './media/Media';
 
 function CollectibleSkeleton() {
 	return (
@@ -127,7 +127,7 @@ export function CollectibleCard({
 		>
 			<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]">
 				<article className="w-full rounded-xl">
-					<CollectibleAsset
+					<Media
 						name={collectibleMetadata?.name || ''}
 						assets={[
 							collectibleMetadata?.image,

package/src/react/ui/components/collectible-card/__tests__/{CollectibleAsset.test.tsx → Media.test.tsx}

@@ -2,10 +2,10 @@ import { render, screen, waitFor } from '@test/test-utils';
 import { describe, expect, it, vi } from 'vitest';
 import * as fetchContentTypeModule from '../../../../../utils/fetchContentType';
 import type { TokenMetadata } from '../../../../_internal';
-import { CollectibleAsset } from '../collectible-asset/CollectibleAsset';
-import * as contentTypeUtils from '../collectible-asset/utils';
+import { Media } from '../media/Media';
+import * as contentTypeUtils from '../media/utils';
 
-describe('CollectibleAsset', () => {
+describe('Media', () => {
 	it('renders image content correctly with proper loading states and fallback', async () => {
 		const originalImage = window.Image;
 
@@ -30,10 +30,7 @@ describe('CollectibleAsset', () => {
 
 		// Initial render should show the loading skeleton
 		const { rerender } = render(
-			<CollectibleAsset
-				name="Test Collectible"
-				assets={[mockMetadata.image]}
-			/>,
+			<Media name="Test Collectible" assets={[mockMetadata.image]} />,
 		);
 
 		// check if skeleton is rendered during loading
@@ -69,7 +66,7 @@ describe('CollectibleAsset', () => {
 		};
 
 		rerender(
-			<CollectibleAsset
+			<Media
 				name="Test Collectible"
 				assets={[mockMetadataWithBadImage.image]}
 			/>,
@@ -127,10 +124,7 @@ describe('CollectibleAsset', () => {
 		};
 
 		render(
-			<CollectibleAsset
-				name="Video Collectible"
-				assets={[mockVideoMetadata.video]}
-			/>,
+			<Media name="Video Collectible" assets={[mockVideoMetadata.video]} />,
 		);
 
 		await waitFor(() => {
@@ -192,7 +186,7 @@ describe('CollectibleAsset', () => {
 		};
 
 		render(
-			<CollectibleAsset
+			<Media
 				name="HTML Collectible"
 				assets={[mockHtmlMetadata.animation_url]}
 			/>,

package/src/react/ui/components/collectible-card/index.ts

@@ -1,2 +1,2 @@
 export * from './CollectibleCard';
-export * from './collectible-asset/CollectibleAsset';
+export * from './media/Media';

package/src/react/ui/components/collectible-card/media/Media.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '../../../../../utils';
+import { fetchContentType } from '../../../../../utils/fetchContentType';
+import ChessTileImage from '../../../images/chess-tile.png';
+import ModelViewer from '../../ModelViewer';
+import MediaSkeleton from './MediaSkeleton';
+import type { ContentTypeState, MediaProps } from './types';
+import { getContentType } from './utils';
+
+/**
+ * @description This component is used to display a collectible asset.
+ * It will display the first valid asset from the assets array.
+ * If no valid asset is found, it will display the placeholder image.
+ *
+ * @example
+ * <Media
+ *  name="Collectible"
+ *  assets={[undefined, "some-image-url", undefined]} // undefined assets will be ignored, "some-image-url" will be rendered
+ *  assetSrcPrefixUrl="https://example.com/"
+ *  className="w-full h-full"
+ * />
+ */
+export function Media({
+	name,
+	assets,
+	assetSrcPrefixUrl,
+	className,
+	supply,
+}: MediaProps) {
+	const [assetLoadFailed, setAssetLoadFailed] = useState(false);
+	const [assetLoading, setAssetLoading] = useState(true);
+	const [contentType, setContentType] = useState<ContentTypeState>({
+		type: null,
+		loading: true,
+		failed: false,
+	});
+
+	const videoRef = useRef<HTMLVideoElement>(null);
+	const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+	const placeholderImage = ChessTileImage;
+	const assetUrl = assets.find((asset): asset is string => !!asset);
+	const proxiedAssetUrl = assetUrl
+		? assetSrcPrefixUrl
+			? `${assetSrcPrefixUrl}${assetUrl}`
+			: assetUrl
+		: '';
+
+	const classNames = cn(
+		'relative aspect-square overflow-hidden bg-background-secondary',
+		supply !== undefined && supply === 0 && 'opacity-50',
+		className,
+	);
+
+	useEffect(() => {
+		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);
+	};
+
+	// Display placeholder if asset fails to load or doesn't exist
+	if ((contentType.failed && !assetLoadFailed) || !assetUrl) {
+		return (
+			<div className={cn('h-full w-full', classNames)}>
+				<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';
+					}}
+				/>
+			</div>
+		);
+	}
+
+	// Render based on content type
+	if (contentType.type === 'html' && !assetLoadFailed) {
+		return (
+			<div
+				className={cn(
+					'flex w-full items-center justify-center rounded-lg',
+					classNames,
+				)}
+			>
+				{(assetLoading || contentType.loading) && <MediaSkeleton />}
+
+				<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}
+				/>
+			</div>
+		);
+	}
+
+	if (contentType.type === '3d-model' && !assetLoadFailed) {
+		return (
+			<div className={cn('h-full w-full', classNames)}>
+				<ModelViewer
+					src={proxiedAssetUrl}
+					posterSrc={placeholderImage}
+					onLoad={handleAssetLoad}
+					onError={handleAssetError}
+				/>
+			</div>
+		);
+	}
+
+	if (contentType.type === 'video' && !assetLoadFailed) {
+		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 (
+			<div className={classNames}>
+				{(assetLoading || contentType.loading) && <MediaSkeleton />}
+
+				<video
+					ref={videoRef}
+					className={videoClassNames}
+					autoPlay
+					loop
+					controls
+					playsInline
+					muted
+					controlsList="nodownload noremoteplayback nofullscreen"
+					onError={handleAssetError}
+					onLoadedMetadata={handleAssetLoad}
+					data-testid="collectible-asset-video"
+				>
+					<source src={proxiedAssetUrl} />
+				</video>
+			</div>
+		);
+	}
+
+	// Default to image renderer
+	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 (
+		<div className={classNames}>
+			{(assetLoading || contentType.loading) && <MediaSkeleton />}
+
+			<img
+				src={imgSrc}
+				alt={name || 'Collectible'}
+				className={imgClassNames}
+				onError={(e) => {
+					if (contentType.type === 'image') {
+						setAssetLoadFailed(true);
+					}
+					// If this is the placeholder image that failed
+					if (e.currentTarget.src === placeholderImage) {
+						console.error('Failed to load placeholder image');
+						e.currentTarget.style.display = 'none';
+					}
+				}}
+				onLoad={handleAssetLoad}
+			/>
+		</div>
+	);
+}

package/src/react/ui/components/collectible-card/{collectible-asset/CollectibleAssetSkeleton.tsx → media/MediaSkeleton.tsx}

@@ -1,6 +1,6 @@
 import { Skeleton } from '@0xsequence/design-system';
 
-export default function CollectibleAssetSkeleton() {
+export default function MediaSkeleton() {
 	return (
 		<Skeleton
 			data-testid="collectible-asset-skeleton"

package/src/react/ui/components/collectible-card/media/types.ts

@@ -0,0 +1,17 @@
+type ContentType = 'image' | 'video' | 'html' | '3d-model' | null;
+
+type ContentTypeState = {
+	type: ContentType;
+	loading: boolean;
+	failed: boolean;
+};
+
+type MediaProps = {
+	name?: string;
+	assets: (string | undefined)[];
+	assetSrcPrefixUrl?: string;
+	className?: string;
+	supply?: number;
+};
+
+export type { ContentType, ContentTypeState, MediaProps };

package/src/react/ui/components/collectible-card/{collectible-asset → media}/utils.ts

@@ -23,9 +23,9 @@ export const is3dModel = (fileName: string | undefined) => {
 };
 
 export const getContentType = (
-	url: string,
+	url: string | undefined,
 ): Promise<'image' | 'video' | 'html' | '3d-model' | null> => {
-	return new Promise((resolve) => {
+	return new Promise((resolve, reject) => {
 		const type = isHtml(url)
 			? 'html'
 			: isVideo(url)
@@ -35,6 +35,11 @@ export const getContentType = (
 					: is3dModel(url)
 						? '3d-model'
 						: null;
-		resolve(type);
+
+		if (type) {
+			resolve(type);
+		} else {
+			reject(new Error('Unsupported file type'));
+		}
 	});
 };

package/src/react/ui/index.ts

@@ -8,4 +8,4 @@ export { useBuyModal } from './modals/BuyModal';
 
 // components
 export { CollectibleCard } from './components/collectible-card/CollectibleCard';
-export { CollectibleAsset } from './components/collectible-card/collectible-asset/CollectibleAsset';
+export { Media } from './components/collectible-card/media/Media';