@0xsequence/marketplace-sdk 0.8.11 → 0.8.12

package/src/react/ui/components/_internals/action-button/components/NonOwnerActions.tsx

@@ -1,37 +1,98 @@
 'use client';
 
-import type { Hex } from 'viem';
-import { InvalidStepError } from '../../../../../../utils/_internal/error/transaction';
+import type { Address } from 'viem';
+import { CollectibleCardAction } from '../../../../../../types';
 import type { Order, OrderbookKind } from '../../../../../_internal';
 import SvgCartIcon from '../../../../icons/CartIcon';
 import { useBuyModal } from '../../../../modals/BuyModal';
 import { useMakeOfferModal } from '../../../../modals/MakeOfferModal';
-import { CollectibleCardAction } from '../types';
 import { ActionButtonBody } from './ActionButtonBody';
 
-type NonOwnerActionsProps = {
+type NonOwnerActionsBaseProps = {
 	action: CollectibleCardAction;
 	tokenId: string;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
-	orderbookKind?: OrderbookKind;
+	quantityDecimals?: number;
+	quantityRemaining?: number;
+};
+
+type ShopNonOwnerActionsProps = NonOwnerActionsBaseProps & {
+	marketplaceType: 'shop';
+	salesContractAddress: Address;
+	salePrice: {
+		amount: string;
+		currencyAddress: Address;
+	};
+	lowestListing?: never;
+	orderbookKind?: never;
+};
+
+type MarketNonOwnerActionsProps = NonOwnerActionsBaseProps & {
+	marketplaceType: 'market';
 	lowestListing?: Order;
+	orderbookKind?: OrderbookKind;
+	salesContractAddress?: never;
+	salePrice?: never;
 };
 
-export function NonOwnerActions({
-	action,
-	tokenId,
-	collectionAddress,
-	chainId,
-	orderbookKind,
-	lowestListing,
-}: NonOwnerActionsProps) {
+type NonOwnerActionsProps =
+	| ShopNonOwnerActionsProps
+	| MarketNonOwnerActionsProps;
+
+export function NonOwnerActions(props: NonOwnerActionsProps) {
+	const {
+		action,
+		tokenId,
+		collectionAddress,
+		chainId,
+		quantityDecimals,
+		quantityRemaining,
+		marketplaceType,
+	} = props;
+
 	const { show: showBuyModal } = useBuyModal();
 	const { show: showMakeOfferModal } = useMakeOfferModal();
 
+	if (marketplaceType === 'shop') {
+		const { salesContractAddress, salePrice } = props;
+
+		return (
+			<ActionButtonBody
+				action={CollectibleCardAction.BUY}
+				tokenId={tokenId}
+				label="Buy now"
+				onClick={() =>
+					showBuyModal({
+						chainId,
+						collectionAddress,
+						salesContractAddress,
+						items: [
+							{
+								tokenId,
+								quantity: '1',
+							},
+						],
+						marketplaceType: 'shop',
+						salePrice: {
+							amount: salePrice.amount,
+							currencyAddress: salePrice.currencyAddress,
+						},
+						quantityDecimals: quantityDecimals ?? 0,
+						quantityRemaining: quantityRemaining ?? 0,
+					})
+				}
+				icon={SvgCartIcon}
+			/>
+		);
+	}
+
 	if (action === CollectibleCardAction.BUY) {
+		const { lowestListing } = props;
 		if (!lowestListing) {
-			throw new InvalidStepError('BUY', 'lowestListing is required');
+			throw new Error(
+				'lowestListing is required for BUY action and MARKET card type',
+			);
 		}
 
 		return (
@@ -46,6 +107,7 @@ export function NonOwnerActions({
 						collectibleId: tokenId,
 						orderId: lowestListing.orderId,
 						marketplace: lowestListing.marketplace,
+						marketplaceType: 'market',
 					})
 				}
 				icon={SvgCartIcon}
@@ -54,6 +116,7 @@ export function NonOwnerActions({
 	}
 
 	if (action === CollectibleCardAction.OFFER) {
+		const { orderbookKind } = props;
 		return (
 			<ActionButtonBody
 				action={CollectibleCardAction.OFFER}

package/src/react/ui/components/_internals/action-button/components/OwnerActions.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import type { Hex } from 'viem';
+import { CollectibleCardAction } from '../../../../../../types';
 import type { Order, OrderbookKind } from '../../../../../_internal';
 import { useCreateListingModal } from '../../../../modals/CreateListingModal';
 import { useSellModal } from '../../../../modals/SellModal';
 import { useTransferModal } from '../../../../modals/TransferModal';
-import { CollectibleCardAction } from '../types';
 import { ActionButtonBody } from './ActionButtonBody';
 
 type OwnerActionsProps = {

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,
 } from '../store';
-import { CollectibleCardAction } from '../types';
 
 type UseActionButtonLogicProps = {
 	tokenId: string;

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: <explanation>
+		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,
+	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,
+};