@0xsequence/marketplace-sdk 0.8.10 → 0.8.12

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

@@ -0,0 +1,231 @@
+'use client';
+
+import {
+	ChevronLeftIcon,
+	ChevronRightIcon,
+	IconButton,
+	Image,
+	Text,
+	cn,
+} from '@0xsequence/design-system';
+import { formatUnits } from 'viem';
+import type { MarketplaceType } from '../../../../types';
+import { ContractType, type Currency, type Order } from '../../../_internal';
+import SvgBellIcon from '../../icons/BellIcon';
+import { formatPriceNumber, getSupplyStatusText } from './utils';
+
+const formatPrice = (amount: string, currency: Currency): React.ReactNode => {
+	const { formattedNumber, isUnderflow, isOverflow } = formatPriceNumber(
+		amount,
+		currency.decimals,
+	);
+
+	if (isUnderflow) {
+		return (
+			<div className="flex items-center">
+				<ChevronLeftIcon className="h-3 w-3 text-text-100" />
+				<Text>{`${formattedNumber} ${currency.symbol}`}</Text>
+			</div>
+		);
+	}
+
+	if (isOverflow) {
+		return (
+			<div className="flex items-center">
+				<ChevronRightIcon className="h-3 w-3 text-text-100" />
+				<Text>{`${formattedNumber} ${currency.symbol}`}</Text>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex items-center gap-1">
+			<Text>
+				{formattedNumber} {currency.symbol}
+			</Text>
+		</div>
+	);
+};
+
+type FooterProps = {
+	name: string;
+	type?: ContractType;
+	decimals?: number;
+	onOfferClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+	highestOffer?: Order;
+	lowestListingPriceAmount?: string;
+	lowestListingCurrency?: Currency;
+	balance?: string;
+	quantityInitial: string | undefined;
+	quantityRemaining: string | undefined;
+	marketplaceType: MarketplaceType;
+	salePriceAmount?: string;
+	salePriceCurrency?: Currency;
+};
+
+export const Footer = ({
+	name,
+	type,
+	decimals,
+	onOfferClick,
+	highestOffer,
+	lowestListingPriceAmount,
+	lowestListingCurrency,
+	balance,
+	quantityInitial,
+	quantityRemaining,
+	marketplaceType,
+	salePriceAmount,
+	salePriceCurrency,
+}: FooterProps) => {
+	const listed = !!lowestListingPriceAmount && !!lowestListingCurrency;
+	const isShop = marketplaceType === 'shop';
+	const isMarketplace = marketplaceType === 'market';
+
+	const displayName = (() => {
+		if (name.length > 15 && highestOffer && !isShop) {
+			return `${name.substring(0, 13)}...`;
+		}
+		if (name.length > 17 && !highestOffer && !isShop) {
+			return `${name.substring(0, 17)}...`;
+		}
+		return name;
+	})();
+
+	return (
+		<div className="relative flex flex-col items-start gap-2 whitespace-nowrap bg-background-primary p-4">
+			<div className="relative flex w-full items-center justify-between">
+				<Text
+					className={cn(
+						'overflow-hidden text-ellipsis text-left font-body font-bold text-sm text-text-100',
+						isShop &&
+							(quantityInitial === undefined ||
+								quantityRemaining === undefined) &&
+							'text-text-50',
+					)}
+				>
+					{displayName || 'Untitled'}
+				</Text>
+
+				{highestOffer && onOfferClick && !isShop && (
+					<IconButton
+						className="absolute top-0 right-0 h-[22px] w-[22px] hover:animate-bell-ring"
+						size="xs"
+						variant="primary"
+						onClick={(e) => {
+							onOfferClick?.(e);
+						}}
+						icon={(props) => <SvgBellIcon {...props} size="xs" />}
+					/>
+				)}
+			</div>
+
+			<div
+				className={cn(
+					'flex items-center gap-1',
+					isShop && !salePriceAmount && 'hidden',
+					isShop && type === ContractType.ERC721 && 'hidden',
+				)}
+			>
+				{((isMarketplace && listed && lowestListingCurrency?.imageUrl) ||
+					(isShop && salePriceCurrency && salePriceCurrency.imageUrl)) && (
+					<Image
+						alt={lowestListingCurrency?.symbol || salePriceCurrency?.symbol}
+						className="h-3 w-3"
+						src={lowestListingCurrency?.imageUrl || salePriceCurrency?.imageUrl}
+						onError={(e) => {
+							e.currentTarget.style.display = 'none';
+						}}
+					/>
+				)}
+
+				<Text
+					className={cn(
+						'text-left font-body font-bold text-sm',
+						listed && isMarketplace ? 'text-text-100' : 'text-text-50',
+						isShop &&
+							salePriceAmount &&
+							salePriceCurrency &&
+							type === ContractType.ERC1155 &&
+							'text-text-100',
+					)}
+				>
+					{listed &&
+						isMarketplace &&
+						formatPrice(lowestListingPriceAmount, lowestListingCurrency)}
+
+					{!listed && isMarketplace && 'Not listed yet'}
+
+					{isShop &&
+						salePriceAmount &&
+						salePriceCurrency &&
+						type === ContractType.ERC1155 &&
+						formatPrice(salePriceAmount, salePriceCurrency)}
+				</Text>
+			</div>
+
+			{isShop && (
+				<SaleDetailsPill
+					quantityInitial={quantityInitial}
+					quantityRemaining={quantityRemaining}
+					collectionType={type as ContractType}
+				/>
+			)}
+
+			{isShop && !salePriceAmount && <div className="h-5 w-full" />}
+
+			{isMarketplace && (
+				<TokenTypeBalancePill
+					balance={balance}
+					type={type as ContractType}
+					decimals={decimals}
+				/>
+			)}
+		</div>
+	);
+};
+
+const TokenTypeBalancePill = ({
+	balance,
+	type,
+	decimals,
+}: {
+	balance?: string;
+	type: ContractType;
+	decimals?: number;
+}) => {
+	const displayText =
+		type === ContractType.ERC1155
+			? balance
+				? `Owned: ${formatUnits(BigInt(balance), decimals ?? 0)}`
+				: 'ERC-1155'
+			: 'ERC-721';
+
+	return (
+		<Text className="rounded-lg bg-background-secondary px-2 py-1 text-left font-medium text-text-80 text-xs">
+			{displayText}
+		</Text>
+	);
+};
+
+const SaleDetailsPill = ({
+	quantityInitial,
+	quantityRemaining,
+	collectionType,
+}: {
+	quantityInitial: string | undefined;
+	quantityRemaining: string | undefined;
+	collectionType: ContractType;
+}) => {
+	const supplyText = getSupplyStatusText({
+		quantityInitial,
+		quantityRemaining,
+		collectionType,
+	});
+
+	return (
+		<Text className="rounded-lg bg-background-secondary px-2 py-1 text-left font-medium text-text-80 text-xs">
+			{supplyText}
+		</Text>
+	);
+};

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

@@ -0,0 +1,76 @@
+'use client';
+
+import type { Hex } from 'viem';
+import type {
+	CollectibleCardAction,
+	MarketplaceType,
+} from '../../../../../types';
+import type { Order, OrderbookKind } from '../../../../_internal';
+import { ActionButton } from '../../_internals/action-button/ActionButton';
+
+interface ActionButtonWrapperProps {
+	show: boolean;
+	chainId: number;
+	collectionAddress: Hex;
+	tokenId: string;
+	orderbookKind?: OrderbookKind;
+	action: CollectibleCardAction;
+	highestOffer?: Order;
+	lowestListing?: Order;
+	owned: boolean;
+	onCannotPerformAction?: (
+		action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
+	) => void;
+	marketplaceType: MarketplaceType;
+	salesContractAddress?: Hex;
+	prioritizeOwnerActions?: boolean;
+	salePrice?: {
+		amount: string;
+		currencyAddress: Hex;
+	};
+	quantityDecimals?: number;
+	quantityRemaining?: number;
+}
+
+export function ActionButtonWrapper({
+	show,
+	chainId,
+	collectionAddress,
+	tokenId,
+	orderbookKind,
+	action,
+	highestOffer,
+	lowestListing,
+	owned,
+	onCannotPerformAction,
+	marketplaceType,
+	salesContractAddress,
+	prioritizeOwnerActions,
+	salePrice,
+	quantityDecimals,
+	quantityRemaining,
+}: ActionButtonWrapperProps) {
+	if (!show) return null;
+
+	return (
+		<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]">
+			<ActionButton
+				chainId={chainId}
+				collectionAddress={collectionAddress}
+				tokenId={tokenId}
+				orderbookKind={orderbookKind}
+				action={action}
+				highestOffer={highestOffer}
+				lowestListing={lowestListing}
+				owned={owned}
+				onCannotPerformAction={onCannotPerformAction}
+				marketplaceType={marketplaceType}
+				salesContractAddress={salesContractAddress}
+				prioritizeOwnerActions={prioritizeOwnerActions}
+				salePrice={salePrice}
+				quantityDecimals={quantityDecimals}
+				quantityRemaining={quantityRemaining}
+			/>
+		</div>
+	);
+}

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

@@ -0,0 +1,55 @@
+'use client';
+
+import { Media } from '../../media/Media';
+import { MarketplaceCollectibleCardSkeleton } from '../CollectibleCardSkeleton';
+import type { MarketplaceCardBaseProps } from '../types';
+
+export interface BaseCardProps extends MarketplaceCardBaseProps {
+	isLoading: boolean;
+	name: string;
+	image?: string;
+	video?: string;
+	animationUrl?: string;
+	onClick?: () => void;
+	onKeyDown?: (e: React.KeyboardEvent) => void;
+	className?: string;
+	children: React.ReactNode;
+}
+
+export function BaseCard({
+	isLoading,
+	name,
+	image,
+	video,
+	animationUrl,
+	onClick,
+	onKeyDown,
+	className,
+	assetSrcPrefixUrl,
+	children,
+}: BaseCardProps) {
+	if (isLoading) {
+		return <MarketplaceCollectibleCardSkeleton />;
+	}
+
+	return (
+		<div
+			data-testid="collectible-card"
+			className="w-card-width min-w-card-min-width overflow-hidden rounded-xl border border-border-base bg-background-primary focus-visible:border-border-focus focus-visible:shadow-focus-ring focus-visible:outline-focus active:border-border-focus active:shadow-active-ring"
+			onClick={onClick}
+			onKeyDown={onKeyDown}
+		>
+			<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">
+					<Media
+						name={name || ''}
+						assets={[image, video, animationUrl]}
+						assetSrcPrefixUrl={assetSrcPrefixUrl}
+						className={className}
+					/>
+					{children}
+				</article>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './utils';
+export * from './CollectibleCard';

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

@@ -0,0 +1,95 @@
+import type { Address, Hex } from 'viem';
+import type { CollectibleCardAction, MarketplaceType } from '../../../../types';
+import type { ContractType, TokenMetadata } from '../../../_internal';
+import type { CollectibleOrder } from '../../../_internal';
+import type { Order } from '../../../_internal';
+import type { OrderbookKind } from '../../../_internal';
+
+// Base properties shared by all collectible card types
+type MarketplaceCardBaseProps = {
+	collectibleId: string;
+	chainId: number;
+	collectionAddress: Hex;
+	collectionType?: ContractType;
+	assetSrcPrefixUrl?: string;
+	cardLoading?: boolean;
+	marketplaceType?: MarketplaceType;
+};
+
+// Properties specific to Shop card
+type ShopCardSpecificProps = {
+	salesContractAddress: Hex;
+	tokenMetadata: TokenMetadata;
+	salePrice:
+		| {
+				amount: string;
+				currencyAddress: Address;
+		  }
+		| undefined;
+	saleStartsAt: string | undefined;
+	saleEndsAt: string | undefined;
+	quantityDecimals: number | undefined;
+	quantityInitial: string | undefined;
+	quantityRemaining: string | undefined;
+};
+
+// Properties specific to marketplace and inventory cards
+type MarketCardSpecificProps = {
+	orderbookKind?: OrderbookKind;
+	collectible: CollectibleOrder | undefined;
+	onCollectibleClick?: (tokenId: string) => void;
+	onOfferClick?: ({
+		order,
+		e,
+	}: {
+		order?: Order;
+		e: React.MouseEvent<HTMLButtonElement>;
+	}) => void;
+	balance?: string;
+	balanceIsLoading: boolean;
+	/**
+	 * Callback function that is called when the user attempts to perform an action
+	 * (such as buying or making an offer) that they are not permitted to do.
+	 *
+	 * This function is invoked in the following scenario:
+	 *
+	 * - When a disconnected user clicks on "Buy Now" and is prompted to connect
+	 *   their wallet. After connecting, if it is determined that the user is
+	 *   already the owner of the collectible, this callback is triggered to inform
+	 *   them that they cannot perform the action (e.g., buying their own collectible).
+	 *
+	 * @param action - The action that the user cannot perform, which can be either
+	 * CollectibleCardAction.BUY or CollectibleCardAction.OFFER.
+	 */
+	onCannotPerformAction?: (
+		action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
+	) => void;
+	prioritizeOwnerActions?: boolean;
+};
+
+// Complete CollectibleCardProps with all possible properties and card type
+type MarketplaceCollectibleCardProps = MarketplaceCardBaseProps &
+	Partial<MarketCardSpecificProps & ShopCardSpecificProps>;
+
+type ShopCollectibleCardProps = MarketplaceCardBaseProps &
+	ShopCardSpecificProps & {
+		marketplaceType: 'shop';
+	};
+type MarketCollectibleCardProps = MarketplaceCardBaseProps &
+	MarketCardSpecificProps & {
+		marketplaceType?: 'market';
+	};
+
+type CollectibleCardProps =
+	| ShopCollectibleCardProps
+	| MarketCollectibleCardProps;
+
+export type {
+	MarketplaceCardBaseProps,
+	ShopCardSpecificProps,
+	MarketCardSpecificProps,
+	MarketplaceCollectibleCardProps,
+	ShopCollectibleCardProps,
+	MarketCollectibleCardProps,
+	CollectibleCardProps,
+};

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>
+	);
+}