@0xsequence/marketplace-sdk 0.8.10 → 0.8.12

package/src/react/ui/components/marketplace-collectible-card/variants/ShopCard.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { CollectibleCardAction } from '../../../../../types';
+import { ContractType } from '../../../../_internal';
+import { useCurrency } from '../../../../hooks';
+import { Footer } from '../Footer';
+import { ActionButtonWrapper } from '../components/ActionButtonWrapper';
+import { BaseCard } from '../components/BaseCard';
+import type { ShopCollectibleCardProps } from '../types';
+
+export function ShopCard({
+	collectibleId,
+	chainId,
+	collectionAddress,
+	collectionType,
+	assetSrcPrefixUrl,
+	cardLoading,
+	marketplaceType,
+	salesContractAddress,
+	tokenMetadata,
+	salePrice,
+	quantityDecimals,
+	quantityInitial,
+	quantityRemaining,
+}: ShopCollectibleCardProps) {
+	const { data: saleCurrency, isLoading: saleCurrencyLoading } = useCurrency({
+		chainId,
+		currencyAddress: salePrice?.currencyAddress,
+		query: {
+			enabled:
+				!!salePrice?.currencyAddress &&
+				!!salesContractAddress &&
+				collectionType === ContractType.ERC1155,
+		},
+	});
+
+	const isLoading = cardLoading || saleCurrencyLoading;
+
+	if (!tokenMetadata || !salePrice) {
+		console.error('Token metadata or sale price is undefined', {
+			tokenMetadata,
+			salePrice,
+		});
+		return null;
+	}
+
+	const showActionButton =
+		salesContractAddress &&
+		collectionType === ContractType.ERC1155 &&
+		quantityRemaining !== undefined;
+
+	const action = CollectibleCardAction.BUY;
+
+	const mediaClassName =
+		collectionType === ContractType.ERC721 && !quantityRemaining
+			? 'opacity-50'
+			: 'opacity-100';
+
+	return (
+		<BaseCard
+			collectibleId={collectibleId}
+			chainId={chainId}
+			collectionAddress={collectionAddress}
+			collectionType={collectionType}
+			assetSrcPrefixUrl={assetSrcPrefixUrl}
+			cardLoading={cardLoading}
+			marketplaceType={marketplaceType}
+			isLoading={isLoading}
+			name={tokenMetadata.name || ''}
+			image={tokenMetadata.image}
+			video={tokenMetadata.video}
+			animationUrl={tokenMetadata.animation_url}
+			className={mediaClassName}
+		>
+			<Footer
+				name={tokenMetadata.name || ''}
+				type={collectionType}
+				decimals={tokenMetadata.decimals}
+				quantityInitial={quantityInitial}
+				quantityRemaining={quantityRemaining}
+				marketplaceType={marketplaceType}
+				salePriceAmount={salePrice?.amount}
+				salePriceCurrency={saleCurrency}
+			/>
+
+			<ActionButtonWrapper
+				show={showActionButton}
+				chainId={chainId}
+				collectionAddress={collectionAddress}
+				tokenId={collectibleId}
+				action={action}
+				owned={false}
+				marketplaceType={marketplaceType}
+				salesContractAddress={salesContractAddress}
+				salePrice={salePrice}
+				quantityDecimals={quantityDecimals}
+				quantityRemaining={
+					quantityRemaining !== undefined
+						? Number(quantityRemaining)
+						: undefined
+				}
+			/>
+		</BaseCard>
+	);
+}

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

@@ -1,10 +1,10 @@
 '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 ChessTileImage from '../../../../react/ui/images/chess-tile.png';
+import { cn } from '../../../../utils';
+import { fetchContentType } from '../../../../utils/fetchContentType';
+import ModelViewer from '../ModelViewer';
 import MediaSkeleton from './MediaSkeleton';
 import type { ContentTypeState, MediaProps } from './types';
 import { getContentType } from './utils';
@@ -12,7 +12,7 @@ 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.
+ * If no valid asset is found, it will display the fallback content or the default placeholder image.
  *
  * @example
  * <Media
@@ -20,6 +20,7 @@ import { getContentType } from './utils';
  *  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"
+ *  fallbackContent={<YourCustomFallbackComponent />} // Optional custom fallback content
  * />
  */
 export function Media({
@@ -27,10 +28,12 @@ export function Media({
 	assets,
 	assetSrcPrefixUrl,
 	className,
-	supply,
+	isLoading,
+	fallbackContent,
 }: MediaProps) {
 	const [assetLoadFailed, setAssetLoadFailed] = useState(false);
 	const [assetLoading, setAssetLoading] = useState(true);
+	const [currentAssetIndex, setCurrentAssetIndex] = useState(0);
 	const [contentType, setContentType] = useState<ContentTypeState>({
 		type: null,
 		loading: true,
@@ -40,8 +43,8 @@ export function Media({
 	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 validAssets = assets.filter((asset): asset is string => !!asset);
+	const assetUrl = validAssets[currentAssetIndex];
 	const proxiedAssetUrl = assetUrl
 		? assetSrcPrefixUrl
 			? `${assetSrcPrefixUrl}${assetUrl}`
@@ -50,7 +53,6 @@ export function Media({
 
 	const classNames = cn(
 		'relative aspect-square overflow-hidden bg-background-secondary',
-		supply !== undefined && supply === 0 && 'opacity-50',
 		className,
 	);
 
@@ -69,6 +71,7 @@ export function Media({
 					const type = await fetchContentType(proxiedAssetUrl);
 					setContentType({ type, loading: false, failed: false });
 				} catch {
+					handleAssetError();
 					setContentType({ type: null, loading: false, failed: true });
 				}
 			}
@@ -78,19 +81,38 @@ export function Media({
 	}, [proxiedAssetUrl, assetUrl]);
 
 	const handleAssetError = () => {
-		setAssetLoadFailed(true);
+		const nextIndex = currentAssetIndex + 1;
+		if (nextIndex < assets.length) {
+			setCurrentAssetIndex(nextIndex);
+			setAssetLoading(true);
+			setAssetLoadFailed(false);
+		} else {
+			setAssetLoadFailed(true);
+		}
 	};
 
 	const handleAssetLoad = () => {
 		setAssetLoading(false);
 	};
 
-	// Display placeholder if asset fails to load or doesn't exist
-	if ((contentType.failed && !assetLoadFailed) || !assetUrl) {
+	const renderFallback = () => {
+		if (fallbackContent) {
+			return (
+				<div
+					className={cn(
+						'flex h-full w-full items-center justify-center',
+						classNames,
+					)}
+				>
+					{fallbackContent}
+				</div>
+			);
+		}
+
 		return (
 			<div className={cn('h-full w-full', classNames)}>
 				<img
-					src={placeholderImage}
+					src={ChessTileImage}
 					alt={name || 'Collectible'}
 					className="h-full w-full object-cover"
 					onError={(e) => {
@@ -100,6 +122,11 @@ export function Media({
 				/>
 			</div>
 		);
+	};
+
+	// Display fallback if asset fails to load or doesn't exist
+	if (assetLoadFailed || (!isLoading && contentType.failed) || !assetUrl) {
+		return renderFallback();
 	}
 
 	// Render based on content type
@@ -111,7 +138,9 @@ export function Media({
 					classNames,
 				)}
 			>
-				{(assetLoading || contentType.loading) && <MediaSkeleton />}
+				{(assetLoading || contentType.loading || isLoading) && (
+					<MediaSkeleton />
+				)}
 
 				<iframe
 					title={name || 'Collectible'}
@@ -132,7 +161,7 @@ export function Media({
 			<div className={cn('h-full w-full', classNames)}>
 				<ModelViewer
 					src={proxiedAssetUrl}
-					posterSrc={placeholderImage}
+					posterSrc={ChessTileImage}
 					onLoad={handleAssetLoad}
 					onError={handleAssetError}
 				/>
@@ -143,7 +172,7 @@ export function Media({
 	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',
+			assetLoading || isLoading ? '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',
@@ -151,7 +180,9 @@ export function Media({
 
 		return (
 			<div className={classNames}>
-				{(assetLoading || contentType.loading) && <MediaSkeleton />}
+				{(assetLoading || contentType.loading || isLoading) && (
+					<MediaSkeleton />
+				)}
 
 				<video
 					ref={videoRef}
@@ -174,31 +205,22 @@ export function Media({
 
 	// Default to image renderer
 	const imgSrc =
-		assetLoadFailed || contentType.failed ? placeholderImage : proxiedAssetUrl;
+		assetLoadFailed || contentType.failed ? ChessTileImage : 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',
+		assetLoading || contentType.loading || isLoading ? 'invisible' : 'visible',
 	);
 
 	return (
 		<div className={classNames}>
-			{(assetLoading || contentType.loading) && <MediaSkeleton />}
+			{(assetLoading || contentType.loading || isLoading) && <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';
-					}
-				}}
+				onError={handleAssetError}
 				onLoad={handleAssetLoad}
 			/>
 		</div>

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

@@ -3,7 +3,7 @@ import { Skeleton } from '@0xsequence/design-system';
 export default function MediaSkeleton() {
 	return (
 		<Skeleton
-			data-testid="collectible-asset-skeleton"
+			data-testid="media"
 			size="lg"
 			className="absolute inset-0 h-full w-full animate-shimmer"
 			style={{

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

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+
 type ContentType = 'image' | 'video' | 'html' | '3d-model' | null;
 
 type ContentTypeState = {
@@ -11,7 +13,8 @@ type MediaProps = {
 	assets: (string | undefined)[];
 	assetSrcPrefixUrl?: string;
 	className?: string;
-	supply?: number;
+	isLoading?: boolean;
+	fallbackContent?: ReactNode;
 };
 
 export type { ContentType, ContentTypeState, MediaProps };

package/src/react/ui/index.ts

@@ -7,5 +7,8 @@ export { useSellModal } from './modals/SellModal';
 export { useBuyModal } from './modals/BuyModal';
 
 // components
-export { CollectibleCard } from './components/collectible-card/CollectibleCard';
-export { Media } from './components/collectible-card/media/Media';
+export { Media } from './components/media/Media';
+export { CollectibleCard } from './components/marketplace-collectible-card/CollectibleCard';
+
+// types
+export * from './components/marketplace-collectible-card/types';