@0xsequence/marketplace-sdk 0.8.11 → 0.9.0

package/src/react/ui/components/_internals/action-button/hooks/useActionButtonLogic.ts

@@ -1,13 +1,13 @@
 'use client';
 
 import { useEffect } from 'react';
+import { CollectibleCardAction } from '../../../../../../types';
 import { useWallet } from '../../../../../_internal/wallet/useWallet';
 import {
-	actionButtonStore,
 	clearPendingAction,
-	executePendingActionIfExists,
+	executePendingAction,
+	usePendingAction,
 } from '../store';
-import { CollectibleCardAction } from '../types';
 
 type UseActionButtonLogicProps = {
 	tokenId: string;
@@ -30,17 +30,17 @@ export const useActionButtonLogic = ({
 		CollectibleCardAction.BUY,
 		CollectibleCardAction.OFFER,
 	];
-	const pendingActionType = actionButtonStore.pendingAction.type.get();
+	const pendingAction = usePendingAction();
+	const pendingActionType = pendingAction?.type;
 
 	// Handle owner restrictions
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (
 			owned &&
-			actionButtonStore.pendingAction.get() &&
+			pendingAction &&
 			address &&
 			actionsThatOwnersCannotPerform.includes(action) &&
-			actionButtonStore.pendingAction.get()?.collectibleId === tokenId
+			pendingAction?.collectibleId === tokenId
 		) {
 			onCannotPerformAction?.(
 				pendingActionType as
@@ -51,7 +51,7 @@ export const useActionButtonLogic = ({
 		}
 	}, [
 		owned,
-		actionButtonStore.pendingAction.get(),
+		pendingAction,
 		address,
 		action,
 		tokenId,
@@ -64,16 +64,13 @@ export const useActionButtonLogic = ({
 		if (
 			address &&
 			!owned &&
-			actionButtonStore.pendingAction.get() &&
-			actionButtonStore.pendingAction.get()?.collectibleId === tokenId
+			pendingAction &&
+			pendingAction?.collectibleId === tokenId
 		) {
-			// TODO: Remove this timeout once pointer-events: none issue is fixed on Radix UI side
-			setTimeout(() => {
-				executePendingActionIfExists();
-				clearPendingAction();
-			}, 1000);
+			executePendingAction(pendingAction);
+			clearPendingAction();
 		}
-	}, [address, owned, tokenId]);
+	}, [address, owned, tokenId, pendingAction]);
 
 	const shouldShowAction = !address
 		? [CollectibleCardAction.BUY, CollectibleCardAction.OFFER].includes(action)

package/src/react/ui/components/_internals/action-button/store.ts

@@ -1,5 +1,6 @@
-import { observable } from '@legendapp/state';
-import type { CollectibleCardAction } from './types';
+import { createStore } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
+import type { CollectibleCardAction } from '../../../../../types';
 
 type PendingAction = {
 	type: CollectibleCardAction.BUY | CollectibleCardAction.OFFER;
@@ -8,32 +9,59 @@ type PendingAction = {
 	timestamp: number;
 };
 
-export const actionButtonStore = observable({
-	pendingAction: null as PendingAction | null,
+export const actionButtonStore = createStore({
+	context: {
+		pendingAction: null as PendingAction | null,
+	},
+	on: {
+		setPendingAction: (
+			context,
+			event: {
+				action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER;
+				onPendingActionExecuted: () => void;
+				tokenId: string;
+			},
+		) => ({
+			...context,
+			pendingAction: {
+				type: event.action,
+				callback: event.onPendingActionExecuted,
+				timestamp: Date.now(),
+				collectibleId: event.tokenId,
+			},
+		}),
+		clearPendingAction: (context) => ({
+			...context,
+			pendingAction: null,
+		}),
+	},
 });
 
 export const setPendingAction = (
-	type: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
-	callback: () => void,
-	collectibleId: string,
+	action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
+	onPendingActionExecuted: () => void,
+	tokenId: string,
 ) => {
-	actionButtonStore.pendingAction.set({
-		type,
-		callback,
-		timestamp: Date.now(),
-		collectibleId,
+	actionButtonStore.send({
+		type: 'setPendingAction',
+		action,
+		onPendingActionExecuted,
+		tokenId,
 	});
 };
 
+// Selector hooks
+export const usePendingAction = () =>
+	useSelector(actionButtonStore, (state) => state.context.pendingAction);
+
 export const clearPendingAction = () => {
-	actionButtonStore.pendingAction.set(null);
+	actionButtonStore.send({ type: 'clearPendingAction' });
 };
 
-export const executePendingActionIfExists = () => {
-	const timestamp = actionButtonStore.pendingAction.get()?.timestamp;
-	const callback = actionButtonStore.pendingAction.get()?.callback as
-		| (() => void)
-		| undefined;
+export const executePendingAction = (pendingAction: PendingAction | null) => {
+	if (!pendingAction) return;
+
+	const { timestamp, callback } = pendingAction;
 
 	if (timestamp && callback) {
 		// Only execute if the pending action is less than 5 minutes old

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

@@ -0,0 +1,17 @@
+'use client';
+
+import type { CollectibleCardProps } from './types';
+import { MarketCard } from './variants/MarketCard';
+
+import { ShopCard } from './variants/ShopCard';
+
+export function CollectibleCard(props: CollectibleCardProps) {
+	switch (props.marketplaceType) {
+		case 'shop':
+			return <ShopCard {...props} />;
+		// biome-ignore lint/complexity/noUselessSwitchCase: explicit case makes code clearer and future-proof
+		case 'market':
+		default:
+			return <MarketCard {...props} />;
+	}
+}

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

@@ -0,0 +1,24 @@
+import { Skeleton } from '@0xsequence/design-system';
+
+export function MarketplaceCollectibleCardSkeleton() {
+	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="animate-shimmer" />
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,231 @@
+'use client';
+
+import {
+	ChevronLeftIcon,
+	ChevronRightIcon,
+	cn,
+	IconButton,
+	Image,
+	Text,
+} 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,58 @@
+'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 (
+		// biome-ignore lint/a11y/noStaticElementInteractions: div used as interactive card with proper role and keyboard support
+		<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}
+			role={onClick ? 'button' : undefined}
+			tabIndex={onClick ? 0 : undefined}
+		>
+			<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 './CollectibleCard';
+export * from './types';
+export * from './utils';

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

@@ -0,0 +1,98 @@
+import type { Address, Hex } from 'viem';
+import type { CollectibleCardAction, MarketplaceType } from '../../../../types';
+import type {
+	CollectibleOrder,
+	ContractType,
+	Order,
+	OrderbookKind,
+	TokenMetadata,
+} 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,
+};