@0xsequence/marketplace-sdk 0.8.11 → 0.8.12

package/src/react/ui/components/marketplace-collectible-card/utils/formatPrice.ts

@@ -0,0 +1,45 @@
+import { formatUnits } from 'viem';
+
+export const OVERFLOW_PRICE = 100000000;
+export const UNDERFLOW_PRICE = 0.0001;
+
+export const formatPriceNumber = (
+	amount: string,
+	decimals: number,
+): {
+	formattedNumber: string;
+	isUnderflow: boolean;
+	isOverflow: boolean;
+} => {
+	const formattedPrice = formatUnits(BigInt(amount), decimals);
+	const numericPrice = Number.parseFloat(formattedPrice);
+
+	if (numericPrice < UNDERFLOW_PRICE) {
+		return {
+			formattedNumber: UNDERFLOW_PRICE.toString(),
+			isUnderflow: true,
+			isOverflow: false,
+		};
+	}
+
+	if (numericPrice > OVERFLOW_PRICE) {
+		return {
+			formattedNumber: OVERFLOW_PRICE.toLocaleString('en-US', {
+				maximumFractionDigits: 2,
+			}),
+			isUnderflow: false,
+			isOverflow: true,
+		};
+	}
+
+	const maxDecimals = numericPrice < 0.01 ? 6 : 4;
+
+	return {
+		formattedNumber: numericPrice.toLocaleString('en-US', {
+			minimumFractionDigits: 0,
+			maximumFractionDigits: maxDecimals,
+		}),
+		isUnderflow: false,
+		isOverflow: false,
+	};
+};

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

@@ -0,0 +1,2 @@
+export * from './formatPrice';
+export * from './supplyStatus';

package/src/react/ui/components/marketplace-collectible-card/utils/supplyStatus.ts

@@ -0,0 +1,39 @@
+import { ContractType } from '../../../../_internal';
+
+export const getSupplyStatusText = ({
+	quantityInitial,
+	quantityRemaining,
+	collectionType,
+}: {
+	quantityInitial: string | undefined;
+	quantityRemaining: string | undefined;
+	collectionType: ContractType;
+}): string => {
+	const hasUnlimitedSupplyCap =
+		quantityInitial === Number.POSITIVE_INFINITY.toString();
+
+	if (hasUnlimitedSupplyCap) {
+		return 'Unlimited Supply';
+	}
+
+	if (
+		collectionType === ContractType.ERC721 &&
+		quantityRemaining === undefined
+	) {
+		return 'Out of stock';
+	}
+
+	if (
+		collectionType === ContractType.ERC1155 &&
+		!hasUnlimitedSupplyCap &&
+		quantityRemaining === '0'
+	) {
+		return 'Out of stock';
+	}
+
+	if (quantityRemaining && Number(quantityRemaining) > 0) {
+		return `Supply: ${quantityRemaining}`;
+	}
+
+	return 'Out of stock';
+};

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

@@ -0,0 +1,124 @@
+'use client';
+
+import { CollectibleCardAction } from '../../../../../types';
+import { useCurrency } from '../../../../hooks';
+import { Footer } from '../Footer';
+import { ActionButtonWrapper } from '../components/ActionButtonWrapper';
+import { BaseCard } from '../components/BaseCard';
+import type { MarketCollectibleCardProps } from '../types';
+
+export function MarketCard({
+	collectibleId,
+	chainId,
+	collectionAddress,
+	collectionType,
+	assetSrcPrefixUrl,
+	cardLoading,
+	orderbookKind,
+	collectible,
+	onCollectibleClick,
+	onOfferClick,
+	balance,
+	balanceIsLoading = false,
+	onCannotPerformAction,
+	prioritizeOwnerActions,
+}: MarketCollectibleCardProps) {
+	const collectibleMetadata = collectible?.metadata;
+	const highestOffer = collectible?.offer;
+
+	const {
+		data: lowestListingCurrency,
+		isLoading: lowestListingCurrencyLoading,
+	} = useCurrency({
+		chainId,
+		currencyAddress: collectible?.listing?.priceCurrencyAddress,
+		query: {
+			enabled: !!collectible?.listing?.priceCurrencyAddress,
+		},
+	});
+
+	const isLoading = cardLoading || lowestListingCurrencyLoading;
+
+	if (!collectibleMetadata) {
+		console.error('Collectible metadata is undefined');
+		return null;
+	}
+
+	const showActionButton =
+		!balanceIsLoading && (!!highestOffer || !!collectible);
+
+	const action = (
+		balance
+			? (highestOffer && CollectibleCardAction.SELL) ||
+				(!collectible?.listing && CollectibleCardAction.LIST) ||
+				CollectibleCardAction.TRANSFER
+			: (collectible?.listing && CollectibleCardAction.BUY) ||
+				CollectibleCardAction.OFFER
+	) as CollectibleCardAction;
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === 'Enter' || e.key === ' ') {
+			onCollectibleClick?.(collectibleId);
+		}
+	};
+
+	return (
+		<BaseCard
+			collectibleId={collectibleId}
+			chainId={chainId}
+			collectionAddress={collectionAddress}
+			collectionType={collectionType}
+			assetSrcPrefixUrl={assetSrcPrefixUrl}
+			cardLoading={cardLoading}
+			marketplaceType="market"
+			isLoading={isLoading}
+			name={collectibleMetadata.name || ''}
+			image={collectibleMetadata.image}
+			video={collectibleMetadata.video}
+			animationUrl={collectibleMetadata.animation_url}
+			onClick={() => onCollectibleClick?.(collectibleId)}
+			onKeyDown={handleKeyDown}
+		>
+			<Footer
+				name={collectibleMetadata.name || ''}
+				type={collectionType}
+				onOfferClick={(e) => onOfferClick?.({ order: highestOffer, e })}
+				highestOffer={highestOffer}
+				lowestListingPriceAmount={collectible?.listing?.priceAmount}
+				lowestListingCurrency={lowestListingCurrency}
+				balance={balance}
+				decimals={collectibleMetadata.decimals}
+				quantityInitial={
+					highestOffer?.quantityInitial !== undefined
+						? highestOffer.quantityInitial
+						: collectible?.listing?.quantityInitial !== undefined
+							? collectible.listing.quantityInitial
+							: undefined
+				}
+				quantityRemaining={
+					highestOffer?.quantityRemaining !== undefined
+						? highestOffer.quantityRemaining
+						: collectible?.listing?.quantityRemaining !== undefined
+							? collectible.listing.quantityRemaining
+							: undefined
+				}
+				marketplaceType="market"
+			/>
+
+			<ActionButtonWrapper
+				show={showActionButton}
+				chainId={chainId}
+				collectionAddress={collectionAddress}
+				tokenId={collectibleId}
+				orderbookKind={orderbookKind}
+				action={action}
+				highestOffer={highestOffer}
+				lowestListing={collectible?.listing}
+				owned={!!balance}
+				onCannotPerformAction={onCannotPerformAction}
+				marketplaceType="market"
+				prioritizeOwnerActions={prioritizeOwnerActions}
+			/>
+		</BaseCard>
+	);
+}

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,11 +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,
@@ -41,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}`
@@ -51,7 +53,6 @@ export function Media({
 
 	const classNames = cn(
 		'relative aspect-square overflow-hidden bg-background-secondary',
-		supply !== undefined && supply === 0 && 'opacity-50',
 		className,
 	);
 
@@ -70,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 });
 				}
 			}
@@ -79,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 ((!isLoading && 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) => {
@@ -101,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
@@ -135,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}
 				/>
@@ -179,7 +205,7 @@ 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',
@@ -194,16 +220,7 @@ export function Media({
 				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}/types.ts

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+
 type ContentType = 'image' | 'video' | 'html' | '3d-model' | null;
 
 type ContentTypeState = {
@@ -11,8 +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';