@0xsequence/marketplace-sdk 1.2.0 → 2.0.0

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

@@ -0,0 +1,69 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../../../../utils';
+import { Media } from '../../media/Media';
+
+export interface CollectibleMetadata {
+	name?: string;
+	image?: string;
+	video?: string;
+	animation_url?: string;
+	decimals?: number;
+}
+
+export interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+	name?: string;
+	image?: string;
+	video?: string;
+	animationUrl?: string;
+
+	metadata?: CollectibleMetadata;
+
+	assetSrcPrefixUrl?: string;
+	fallbackContent?: React.ReactNode;
+}
+
+export const CardMedia = forwardRef<HTMLDivElement, CardMediaProps>(
+	(
+		{
+			name,
+			image,
+			video,
+			animationUrl,
+			metadata,
+			assetSrcPrefixUrl,
+			className,
+			fallbackContent,
+			...props
+		},
+		ref,
+	) => {
+		const finalName = name ?? metadata?.name ?? '';
+		const finalImage = image ?? metadata?.image;
+		const finalVideo = video ?? metadata?.video;
+		const finalAnimationUrl = animationUrl ?? metadata?.animation_url;
+
+		return (
+			<div
+				className="w-full overflow-hidden"
+				style={{
+					aspectRatio: '1',
+				}}
+				ref={ref}
+				{...props}
+			>
+				<Media
+					name={finalName}
+					assets={[finalImage, finalVideo, finalAnimationUrl]}
+					assetSrcPrefixUrl={assetSrcPrefixUrl}
+					mediaClassname={cn('object-contain', className)}
+					fallbackContent={fallbackContent}
+					containerClassName="w-full h-full"
+				/>
+			</div>
+		);
+	},
+);
+
+CardMedia.displayName = 'CardMedia';

package/src/react/ui/components/marketplace-collectible-card/Card/card-price.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { cn, Text } from '@0xsequence/design-system';
+import { forwardRef } from 'react';
+import type { Currency } from '../../../../_internal';
+import type { CardType } from '../../../../ssr';
+import { PriceDisplay as BasePriceDisplay } from '../_internals/PriceDisplay';
+
+export interface CardPriceProps extends React.HTMLAttributes<HTMLDivElement> {
+	amount?: bigint;
+	currency?: Currency;
+	showCurrencyIcon?: boolean;
+	type: CardType;
+}
+
+export const CardPrice = forwardRef<HTMLDivElement, CardPriceProps>(
+	(
+		{ amount, currency, showCurrencyIcon = true, type, className, ...props },
+		ref,
+	) => {
+		if (type === 'market' && (!amount || !currency)) {
+			return (
+				<div ref={ref} {...props}>
+					<Text className="text-left font-body font-bold text-sm text-text-50">
+						Not listed yet
+					</Text>
+				</div>
+			);
+		}
+
+		return (
+			<div ref={ref} {...props}>
+				<BasePriceDisplay
+					amount={amount}
+					currency={currency}
+					showCurrencyIcon={showCurrencyIcon}
+					className={cn('text-text-100', className)}
+				/>
+			</div>
+		);
+	},
+);
+
+CardPrice.displayName = 'CardPrice';

package/src/react/ui/components/marketplace-collectible-card/Card/card-sale-details.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import type { ContractType } from '@0xsequence/api-client';
+import { Text } from '@0xsequence/design-system';
+import { cn } from '../../../../../utils';
+import { getSupplyStatusText } from '../utils';
+
+export interface CardSaleDetailsProps {
+	quantityRemaining?: bigint;
+	type: ContractType;
+	unlimitedSupply?: boolean;
+	className?: string;
+}
+
+export function CardSaleDetails({
+	quantityRemaining,
+	type,
+	unlimitedSupply,
+	className,
+}: CardSaleDetailsProps) {
+	const supplyText = getSupplyStatusText({
+		quantityRemaining,
+		collectionType: type,
+		unlimitedSupply,
+	});
+
+	return (
+		<Text
+			className={cn(
+				'rounded-lg bg-background-secondary px-2 py-1 text-left font-medium text-text-80 text-xs',
+				className,
+			)}
+		>
+			{supplyText}
+		</Text>
+	);
+}

package/src/react/ui/components/marketplace-collectible-card/Card/card-skeleton.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { ContractType } from '@0xsequence/api-client';
+import { Skeleton } from '@0xsequence/design-system';
+
+export interface CardSkeletonProps {
+	type?: ContractType;
+	isShop?: boolean;
+}
+
+export function CardSkeleton({
+	type = ContractType.ERC721,
+	isShop = false,
+}: CardSkeletonProps) {
+	return (
+		<div
+			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"
+		>
+			<div className="relative aspect-square overflow-hidden bg-background-secondary">
+				<Skeleton
+					size="lg"
+					className="absolute inset-0 h-full w-full animate-shimmer"
+					style={{
+						borderRadius: 0,
+					}}
+				/>
+			</div>
+			<div className="mt-2 flex flex-col gap-2 px-4 pb-4">
+				<Skeleton size="lg" className="animate-shimmer" />
+				<Skeleton size="sm" className="h-5 w-16 animate-shimmer" />
+
+				{isShop && type === ContractType.ERC1155 && (
+					<Skeleton size="lg" className="h-6 w-20 animate-shimmer" />
+				)}
+			</div>
+		</div>
+	);
+}

package/src/react/ui/components/marketplace-collectible-card/Card/card-title.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { cn, IconButton } from '@0xsequence/design-system';
+import { forwardRef } from 'react';
+import type { Order } from '../../../../_internal';
+import { useCollectibleCardOfferState } from '../../../../hooks/ui/useCollectibleCardOfferState';
+import SvgBellIcon from '../../../icons/BellIcon';
+import { OFFER_BELL_RESERVED_CHARS } from '../constants';
+
+export interface CardTitleProps
+	extends React.HTMLAttributes<HTMLHeadingElement> {
+	as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+	highestOffer?: Order;
+	onOfferClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+	balance?: string;
+	maxLength?: number;
+}
+
+interface OfferBellProps {
+	canAcceptOffer: boolean;
+	onOfferClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+function OfferBell({ canAcceptOffer, onOfferClick }: OfferBellProps) {
+	return (
+		<IconButton
+			className={`absolute top-0 right-0 z-10 h-[22px] w-[22px] ${!canAcceptOffer ? 'opacity-50 hover:animate-none hover:opacity-50' : 'hover:animate-bell-ring'}`}
+			size="xs"
+			variant="primary"
+			onClick={(e) => {
+				if (!canAcceptOffer) {
+					return;
+				}
+
+				e.stopPropagation();
+				e.preventDefault();
+				onOfferClick?.(e);
+			}}
+			onMouseEnter={(e) => {
+				if (canAcceptOffer) {
+					e.stopPropagation();
+				}
+			}}
+			icon={(props) => <SvgBellIcon {...props} size="xs" />}
+		/>
+	);
+}
+
+export const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(
+	(
+		{
+			children,
+			className,
+			as: Comp = 'h3',
+			highestOffer,
+			onOfferClick,
+			balance,
+			maxLength,
+			...props
+		},
+		ref,
+	) => {
+		const collectibleCardOfferState = useCollectibleCardOfferState(
+			highestOffer,
+			balance,
+		);
+		const name =
+			typeof children === 'string'
+				? children
+				: typeof children === 'number'
+					? String(children)
+					: '';
+
+		const truncateAt = maxLength
+			? collectibleCardOfferState
+				? maxLength - OFFER_BELL_RESERVED_CHARS
+				: maxLength
+			: Number.POSITIVE_INFINITY;
+
+		const displayName =
+			name.length > truncateAt ? `${name.substring(0, truncateAt)}...` : name;
+
+		const showOfferBell = collectibleCardOfferState && onOfferClick;
+
+		return (
+			<div className="relative flex w-full items-center justify-between">
+				<Comp
+					ref={ref}
+					className={cn(
+						'overflow-hidden text-ellipsis text-left font-body font-bold text-sm text-text-100',
+						className,
+					)}
+					{...props}
+				>
+					{displayName || 'Untitled'}
+				</Comp>
+
+				{showOfferBell && (
+					<OfferBell
+						canAcceptOffer={collectibleCardOfferState.canAcceptOffer}
+						onOfferClick={onOfferClick}
+					/>
+				)}
+			</div>
+		);
+	},
+);
+
+CardTitle.displayName = 'CardTitle';

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

@@ -0,0 +1,51 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../../../../utils';
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+	interactive?: boolean;
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+	({ children, onClick, onKeyDown, className = '', ...props }, ref) => {
+		const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+			if (onClick && (e.key === 'Enter' || e.key === ' ')) {
+				e.preventDefault();
+				onClick(e as unknown as React.MouseEvent<HTMLDivElement>);
+			}
+			onKeyDown?.(e);
+		};
+
+		const isInteractive = !!onClick;
+
+		return (
+			<div
+				ref={ref}
+				data-testid="collectible-card"
+				className={cn(
+					'group relative z-10 flex flex-col items-start overflow-hidden rounded-xl',
+					'w-card-width min-w-card-min-width border border-border-base',
+					isInteractive && [
+						'cursor-pointer',
+						'focus-visible:border-border-focus focus-visible:shadow-focus-ring focus-visible:outline-focus',
+						'active:border-border-focus active:shadow-active-ring',
+					],
+					className,
+				)}
+				{...(isInteractive && {
+					onClick,
+					onKeyDown: handleKeyDown,
+					role: 'button',
+					tabIndex: 0,
+				})}
+				{...(!isInteractive && onKeyDown && { onKeyDown })}
+				{...props}
+			>
+				{children}
+			</div>
+		);
+	},
+);
+
+Card.displayName = 'Card';

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

@@ -0,0 +1,30 @@
+import { Card as CardRoot } from './card';
+import { CardBadge } from './card-badge';
+import { CardContent } from './card-content';
+import { CardFooter } from './card-footer';
+import { CardMedia } from './card-media';
+import { CardPrice } from './card-price';
+import { CardSaleDetails } from './card-sale-details';
+import { CardSkeleton } from './card-skeleton';
+import { CardTitle } from './card-title';
+
+export const Card = Object.assign(CardRoot, {
+	Media: CardMedia,
+	Content: CardContent,
+	Title: CardTitle,
+	Price: CardPrice,
+	Badge: CardBadge,
+	Footer: CardFooter,
+	SaleDetails: CardSaleDetails,
+	Skeleton: CardSkeleton,
+});
+
+export type { CardProps } from './card';
+export type { CardBadgeProps } from './card-badge';
+export type { CardContentProps } from './card-content';
+export type { CardFooterProps } from './card-footer';
+export type { CardMediaProps } from './card-media';
+export type { CardPriceProps } from './card-price';
+export type { CardSaleDetailsProps } from './card-sale-details';
+export type { CardSkeletonProps } from './card-skeleton';
+export type { CardTitleProps } from './card-title';

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

@@ -1,5 +1,5 @@
+import { ContractType } from '@0xsequence/api-client';
 import { Skeleton } from '@0xsequence/design-system';
-import { ContractType } from '../../../_internal';
 
 export function MarketplaceCollectibleCardSkeleton({
 	contractType,

package/src/react/ui/components/marketplace-collectible-card/_internals/PriceDisplay.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import {
+	ChevronLeftIcon,
+	ChevronRightIcon,
+	cn,
+	Image,
+	Text,
+} from '@0xsequence/design-system';
+import type { Currency } from '../../../../_internal';
+import { formatPriceData } from '../utils';
+
+interface PriceDisplayProps {
+	amount: bigint | undefined;
+	currency: Currency | undefined;
+	showCurrencyIcon?: boolean;
+	className?: string;
+}
+
+/**
+ * Formats price into React components for display.
+ * Uses formatPriceData for data transformation.
+ */
+export const formatPrice = (
+	amount: bigint,
+	currency: Currency,
+	className?: string,
+): React.ReactNode => {
+	const price = formatPriceData(amount, currency);
+
+	if (price.type === 'free') {
+		return <Text className="font-bold text-sm text-text-100">Free</Text>;
+	}
+
+	const Icon =
+		price.type === 'underflow'
+			? ChevronLeftIcon
+			: price.type === 'overflow'
+				? ChevronRightIcon
+				: null;
+
+	if (Icon) {
+		return (
+			<div className="flex items-center">
+				<Icon className="h-3 w-3 text-text-100" />
+				<Text
+					className={cn('font-bold text-sm', className || 'text-text-100')}
+				>{`${price.displayText} ${price.symbol}`}</Text>
+			</div>
+		);
+	}
+
+	return (
+		<Text className={cn('font-bold text-sm', className || 'text-text-100')}>
+			{price.displayText} {price.symbol}
+		</Text>
+	);
+};
+
+export const PriceDisplay = ({
+	amount,
+	currency,
+	showCurrencyIcon = true,
+	className,
+}: PriceDisplayProps) => {
+	const isFree = amount === 0n;
+	return (
+		<div className="flex items-center gap-1">
+			{showCurrencyIcon && currency?.imageUrl && (
+				<Image
+					alt={currency.symbol}
+					className="h-3 w-3"
+					src={currency.imageUrl}
+					onError={(e) => {
+						e.currentTarget.style.display = 'none';
+					}}
+				/>
+			)}
+
+			{isFree ? (
+				<Text className="font-bold text-sm text-text-100">Free</Text>
+			) : amount !== undefined && currency !== undefined ? (
+				formatPrice(amount, currency, className)
+			) : null}
+		</div>
+	);
+};

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

@@ -0,0 +1,20 @@
+/**
+ * Constants used across card components
+ */
+
+/**
+ * Default maximum length for card titles
+ */
+export const CARD_TITLE_MAX_LENGTH_DEFAULT = 17;
+
+/**
+ * Maximum length for card titles when an offer bell is displayed
+ * Reduced to reserve space for the offer notification icon
+ */
+export const CARD_TITLE_MAX_LENGTH_WITH_OFFER = 15;
+
+/**
+ * Number of characters reserved for the offer bell icon in the title
+ * Used internally by Card.Title for truncation calculations
+ */
+export const OFFER_BELL_RESERVED_CHARS = 2;

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

@@ -1,3 +1,9 @@
+export { ActionButton } from './ActionButton';
+export * from './Card';
 export * from './CollectibleCard';
+export * from './constants';
 export * from './types';
 export * from './utils';
+export { MarketCard } from './variants/MarketCard';
+export { NonTradableInventoryCard } from './variants/NonTradableInventoryCard';
+export { ShopCard } from './variants/ShopCard';

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

@@ -1,49 +1,61 @@
-import type { TokenMetadata as MetadataTokenMetadataType } from '@0xsequence/metadata';
-import type { Address } from 'viem';
-import type { CardType, CollectibleCardAction } from '../../../../types';
 import type {
+	Address,
 	CollectibleOrder,
 	ContractType,
-	TokenMetadata as MarketplaceTokenMetadataType,
+	MarketplaceTokenMetadata,
 	Order,
-	OrderbookKind,
-} from '../../../_internal';
+} from '@0xsequence/api-client';
+import type { CardType, CollectibleCardAction } from '../../../../types';
+
+export type CardClassNames = {
+	cardRoot?: string;
+	cardMedia?: string;
+	cardContent?: string;
+	cardTitle?: string;
+	cardPrice?: string;
+	cardBadge?: string;
+	cardFooter?: string;
+	cardActionButton?: string;
+	cardSaleDetails?: string;
+	cardSkeleton?: string;
+};
 
 // Base properties shared by all collectible card types
 type MarketplaceCardBaseProps = {
-	collectibleId: string;
+	tokenId: bigint;
 	chainId: number;
 	collectionAddress: Address;
 	collectionType?: ContractType;
 	assetSrcPrefixUrl?: string;
 	cardLoading: boolean;
 	cardType?: CardType;
+	classNames?: CardClassNames;
 	hideQuantitySelector?: boolean;
 };
 
-// Properties specific to Shop card
 type ShopCardSpecificProps = {
 	salesContractAddress: Address;
-	tokenMetadata: MarketplaceTokenMetadataType | MetadataTokenMetadataType;
+	tokenMetadata: Pick<
+		MarketplaceTokenMetadata,
+		'name' | 'image' | 'video' | 'animation_url'
+	>;
 	salePrice:
 		| {
-				amount: string;
+				amount: bigint;
 				currencyAddress: Address;
 		  }
 		| undefined;
 	saleStartsAt: string | undefined;
 	saleEndsAt: string | undefined;
-	quantityDecimals: number | undefined;
-	quantityInitial: string | undefined;
-	quantityRemaining: string | undefined;
+	quantityInitial: bigint | undefined;
+	quantityRemaining: bigint | undefined;
 	unlimitedSupply?: boolean; // it's useful for 1155 tokens
 };
 
 // Properties specific to marketplace and inventory cards
 type MarketCardSpecificProps = {
-	orderbookKind?: OrderbookKind;
 	collectible: CollectibleOrder | undefined;
-	onCollectibleClick?: (tokenId: string) => void;
+	onCollectibleClick?: (tokenId: bigint) => void;
 	onOfferClick?: ({
 		order,
 		e,
@@ -76,7 +88,10 @@ type MarketCardSpecificProps = {
 type NonTradableInventoryCardSpecificProps = {
 	balance: string;
 	balanceIsLoading: boolean;
-	collectibleMetadata: MarketplaceTokenMetadataType | MetadataTokenMetadataType;
+	collectibleMetadata: Pick<
+		MarketplaceTokenMetadata,
+		'name' | 'image' | 'video' | 'animation_url'
+	>;
 };
 
 // Complete CollectibleCardProps with all possible properties and card type

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

@@ -0,0 +1,63 @@
+import { CollectibleCardAction } from '../../../../../types';
+
+/**
+ * Parameters for determining the appropriate card action
+ */
+export type DetermineCardActionParams = {
+	/** Whether the user owns the collectible (balance > 0) */
+	hasBalance: boolean;
+	/** Whether there's a highest offer on the collectible */
+	hasOffer: boolean;
+	/** Whether the collectible is listed for sale */
+	hasListing: boolean;
+};
+
+/**
+ * Determines the appropriate action for a card based on ownership and market state.
+ *
+ * Priority rules:
+ * - **Owner actions** (when hasBalance is true):
+ *   1. SELL - if there's an offer (highest priority for owners)
+ *   2. LIST - if not currently listed
+ *   3. TRANSFER - default owner action
+ *
+ * - **Non-owner actions** (when hasBalance is false):
+ *   1. BUY - if the item is listed for sale
+ *   2. OFFER - default non-owner action
+ *
+ * @param params - Object containing ownership and market state flags
+ * @returns The appropriate CollectibleCardAction for the given state
+ *
+ * @example
+ * ```tsx
+ * // Owner with offer
+ * const action = determineCardAction({
+ *   hasBalance: true,
+ *   hasOffer: true,
+ *   hasListing: false
+ * }); // Returns CollectibleCardAction.SELL
+ *
+ * // Non-owner with listing
+ * const action = determineCardAction({
+ *   hasBalance: false,
+ *   hasOffer: false,
+ *   hasListing: true
+ * }); // Returns CollectibleCardAction.BUY
+ * ```
+ */
+export function determineCardAction(
+	params: DetermineCardActionParams,
+): CollectibleCardAction {
+	const { hasBalance, hasOffer, hasListing } = params;
+
+	if (hasBalance) {
+		// Owner actions (in priority order)
+		if (hasOffer) return CollectibleCardAction.SELL;
+		if (!hasListing) return CollectibleCardAction.LIST;
+		return CollectibleCardAction.TRANSFER;
+	}
+
+	// Non-owner actions
+	if (hasListing) return CollectibleCardAction.BUY;
+	return CollectibleCardAction.OFFER;
+}