@0xsequence/marketplace-sdk 1.2.1 → 2.0.1

package/src/react/ui/components/{_internals/action-button → marketplace-collectible-card/ActionButton}/components/NonOwnerActions.tsx

@@ -1,39 +1,40 @@
 'use client';
 
-import type { Address } from 'viem';
-import type { Order, OrderbookKind } from '../../../../../../types';
+import type { Address, Order } from '@0xsequence/api-client';
+import { CartIcon } from '@0xsequence/design-system';
 import { CollectibleCardAction } from '../../../../../../types';
-import SvgCartIcon from '../../../../icons/CartIcon';
 import { useBuyModal } from '../../../../modals/BuyModal';
 import { useMakeOfferModal } from '../../../../modals/MakeOfferModal';
 import { ActionButtonBody } from './ActionButtonBody';
 
 type NonOwnerActionsBaseProps = {
 	action: CollectibleCardAction;
-	tokenId: string;
+	tokenId: bigint;
 	collectionAddress: Address;
 	chainId: number;
-	quantityDecimals?: number;
-	quantityRemaining?: number;
+	quantityRemaining?: bigint;
 	unlimitedSupply?: boolean;
 	hideQuantitySelector?: boolean;
+	labelOverride?: {
+		offer?: string;
+		buy?: string;
+	};
+	className?: string;
 };
 
 type ShopNonOwnerActionsProps = NonOwnerActionsBaseProps & {
 	cardType: 'shop';
 	salesContractAddress: Address;
 	salePrice: {
-		amount: string;
+		amount: bigint;
 		currencyAddress: Address;
 	};
 	lowestListing?: never;
-	orderbookKind?: never;
 };
 
 type MarketNonOwnerActionsProps = NonOwnerActionsBaseProps & {
 	cardType: 'market';
 	lowestListing?: Order;
-	orderbookKind?: OrderbookKind;
 	salesContractAddress?: never;
 	salePrice?: never;
 };
@@ -48,47 +49,37 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 		tokenId,
 		collectionAddress,
 		chainId,
-		quantityDecimals,
-		quantityRemaining,
-		unlimitedSupply,
 		cardType,
 		hideQuantitySelector,
+		labelOverride,
+		className,
 	} = props;
 
 	const { show: showBuyModal } = useBuyModal();
 	const { show: showMakeOfferModal } = useMakeOfferModal();
 
 	if (cardType === 'shop') {
-		const { salesContractAddress, salePrice } = props;
+		const { salesContractAddress } = props;
 
 		return (
 			<ActionButtonBody
 				action={CollectibleCardAction.BUY}
 				tokenId={tokenId}
-				label="Buy now"
+				label={labelOverride?.buy ?? 'Buy now'}
 				onClick={() =>
 					showBuyModal({
 						chainId,
 						collectionAddress,
 						salesContractAddress,
-						items: [
-							{
-								tokenId,
-								quantity: '1',
-							},
-						],
-						cardType: 'shop',
-						salePrice: {
-							amount: salePrice.amount,
-							currencyAddress: salePrice.currencyAddress,
+						item: {
+							tokenId,
 						},
-						quantityDecimals: quantityDecimals ?? 0,
-						quantityRemaining: quantityRemaining ?? 0,
-						unlimitedSupply,
+						cardType: 'shop',
 						hideQuantitySelector,
 					})
 				}
-				icon={SvgCartIcon}
+				icon={<CartIcon />}
+				className={className}
 			/>
 		);
 	}
@@ -105,38 +96,38 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 			<ActionButtonBody
 				action={CollectibleCardAction.BUY}
 				tokenId={tokenId}
-				label="Buy now"
+				label={labelOverride?.buy ?? 'Buy now'}
 				onClick={() =>
 					showBuyModal({
 						collectionAddress,
 						chainId,
-						collectibleId: tokenId,
+						tokenId,
 						orderId: lowestListing.orderId,
 						marketplace: lowestListing.marketplace,
 						cardType: 'market',
 						hideQuantitySelector,
 					})
 				}
-				icon={SvgCartIcon}
+				icon={<CartIcon />}
+				className={className}
 			/>
 		);
 	}
 
 	if (action === CollectibleCardAction.OFFER) {
-		const { orderbookKind } = props;
 		return (
 			<ActionButtonBody
 				action={CollectibleCardAction.OFFER}
 				tokenId={tokenId}
-				label="Make an offer"
+				label={labelOverride?.offer ?? 'Make an offer'}
 				onClick={() =>
 					showMakeOfferModal({
 						collectionAddress,
 						chainId,
-						collectibleId: tokenId,
-						orderbookKind,
+						tokenId,
 					})
 				}
+				className={className}
 			/>
 		);
 	}

package/src/react/ui/components/{_internals/action-button → marketplace-collectible-card/ActionButton}/components/OwnerActions.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import type { Address } from 'viem';
+import type { Address } from '@0xsequence/api-client';
 import { CollectibleCardAction } from '../../../../../../types';
-import type { Order, OrderbookKind } from '../../../../../_internal';
+import type { Order } from '../../../../../_internal';
 import { useCreateListingModal } from '../../../../modals/CreateListingModal';
 import { useSellModal } from '../../../../modals/SellModal';
 import { useTransferModal } from '../../../../modals/TransferModal';
@@ -10,11 +10,16 @@ import { ActionButtonBody } from './ActionButtonBody';
 
 type OwnerActionsProps = {
 	action: CollectibleCardAction;
-	tokenId: string;
+	tokenId: bigint;
 	collectionAddress: Address;
 	chainId: number;
-	orderbookKind?: OrderbookKind;
 	highestOffer?: Order;
+	labelOverride?: {
+		listing?: string;
+		sell?: string;
+		transfer?: string;
+	};
+	className?: string;
 };
 
 export function OwnerActions({
@@ -22,8 +27,9 @@ export function OwnerActions({
 	tokenId,
 	collectionAddress,
 	chainId,
-	orderbookKind,
 	highestOffer,
+	labelOverride,
+	className,
 }: OwnerActionsProps) {
 	const { show: showCreateListingModal } = useCreateListingModal();
 	const { show: showSellModal } = useSellModal();
@@ -32,16 +38,16 @@ export function OwnerActions({
 	if (action === CollectibleCardAction.LIST) {
 		return (
 			<ActionButtonBody
-				label="Create listing"
+				label={labelOverride?.listing ?? 'Create listing'}
 				tokenId={tokenId}
 				onClick={() =>
 					showCreateListingModal({
-						collectionAddress: collectionAddress as Address,
+						collectionAddress,
 						chainId,
-						collectibleId: tokenId,
-						orderbookKind,
+						tokenId,
 					})
 				}
+				className={className}
 			/>
 		);
 	}
@@ -50,7 +56,7 @@ export function OwnerActions({
 		return (
 			<ActionButtonBody
 				tokenId={tokenId}
-				label="Sell"
+				label={labelOverride?.sell ?? 'Sell'}
 				onClick={() =>
 					showSellModal({
 						collectionAddress,
@@ -59,6 +65,7 @@ export function OwnerActions({
 						order: highestOffer,
 					})
 				}
+				className={className}
 			/>
 		);
 	}
@@ -66,15 +73,16 @@ export function OwnerActions({
 	if (action === CollectibleCardAction.TRANSFER) {
 		return (
 			<ActionButtonBody
-				label="Transfer"
+				label={labelOverride?.transfer ?? 'Transfer'}
 				tokenId={tokenId}
 				onClick={() =>
 					showTransferModal({
-						collectionAddress: collectionAddress as Address,
+						collectionAddress,
 						chainId,
-						collectibleId: tokenId,
+						tokenId,
 					})
 				}
+				className={className}
 			/>
 		);
 	}

package/src/react/ui/components/{_internals/action-button → marketplace-collectible-card/ActionButton}/hooks/useActionButtonLogic.ts

@@ -6,7 +6,7 @@ import { CollectibleCardAction } from '../../../../../../types';
 import { useActionButtonStore } from '../store';
 
 type UseActionButtonLogicProps = {
-	tokenId: string;
+	tokenId: bigint;
 	owned?: boolean;
 	action: CollectibleCardAction;
 	onCannotPerformAction?: (
@@ -36,7 +36,7 @@ export const useActionButtonLogic = ({
 			pendingAction &&
 			address &&
 			actionsThatOwnersCannotPerform.includes(action) &&
-			pendingAction?.collectibleId === tokenId
+			pendingAction?.tokenId === tokenId
 		) {
 			onCannotPerformAction?.(
 				pendingActionType as
@@ -62,7 +62,7 @@ export const useActionButtonLogic = ({
 			address &&
 			!owned &&
 			pendingAction &&
-			pendingAction?.collectibleId === tokenId
+			pendingAction?.tokenId === tokenId
 		) {
 			executePendingAction();
 			clearPendingAction();

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

@@ -0,0 +1 @@
+export * from './ActionButton';

package/src/react/ui/components/{_internals/action-button → marketplace-collectible-card/ActionButton}/store.ts

@@ -6,7 +6,7 @@ import type { CollectibleCardAction } from '../../../../../types';
 
 type PendingAction = {
 	type: CollectibleCardAction.BUY | CollectibleCardAction.OFFER;
-	collectibleId: string;
+	tokenId: bigint;
 	callback: () => void;
 	timestamp: number;
 };
@@ -25,7 +25,7 @@ export const actionButtonStore = createStore({
 			event: {
 				action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER;
 				onPendingActionExecuted: () => void;
-				tokenId: string;
+				tokenId: bigint;
 			},
 		) => ({
 			...context,
@@ -33,7 +33,7 @@ export const actionButtonStore = createStore({
 				type: event.action,
 				callback: event.onPendingActionExecuted,
 				timestamp: Date.now(),
-				collectibleId: event.tokenId,
+				tokenId: event.tokenId,
 			},
 		}),
 		clearPendingAction: (context) => ({
@@ -54,7 +54,7 @@ export const useActionButtonStore = () => {
 		setPendingAction: (
 			action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
 			onPendingActionExecuted: () => void,
-			tokenId: string,
+			tokenId: bigint,
 		) => {
 			actionButtonStore.send({
 				type: 'setPendingAction',

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

@@ -0,0 +1,37 @@
+'use client';
+
+import { ContractType } from '@0xsequence/api-client';
+import { Text } from '@0xsequence/design-system';
+import { forwardRef } from 'react';
+import { cn } from '../../../../../utils';
+
+export interface CardBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+	type: ContractType;
+	balance?: string;
+}
+
+export const CardBadge = forwardRef<HTMLDivElement, CardBadgeProps>(
+	({ type, balance, className, ...props }, ref) => {
+		const displayText =
+			type === ContractType.ERC1155
+				? balance
+					? `Owned: ${balance}`
+					: 'ERC-1155'
+				: 'ERC-721';
+
+		return (
+			<div ref={ref} {...props}>
+				<Text
+					className={cn(
+						'rounded-lg bg-background-secondary px-2 py-1 text-left font-medium text-text-80 text-xs',
+						className,
+					)}
+				>
+					{displayText}
+				</Text>
+			</div>
+		);
+	},
+);
+
+CardBadge.displayName = 'CardBadge';

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

@@ -0,0 +1,27 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../../../../utils';
+
+export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+	fullWidth?: boolean;
+}
+
+export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
+	({ children, className, ...props }, ref) => {
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					'relative flex w-full flex-col items-start gap-2 whitespace-nowrap p-4',
+					className || 'bg-background-primary',
+				)}
+				{...props}
+			>
+				{children}
+			</div>
+		);
+	},
+);
+
+CardContent.displayName = 'CardContent';

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

@@ -0,0 +1,38 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../../../../utils';
+
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+	show?: boolean;
+}
+
+/**
+ * CardFooter - Generic animated action container for card buttons
+ * Provides slide-up animation on card hover. Content is provided via children.
+ *
+ * @example
+ * <Card.Footer>
+ *   <ActionButton action="buy" {...props} />
+ * </Card.Footer>
+ */
+export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
+	({ children, show = true, className, ...props }, ref) => {
+		if (!show) return null;
+
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					'absolute -bottom-16 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]',
+					className ?? '',
+				)}
+				{...props}
+			>
+				{children}
+			</div>
+		);
+	},
+);
+
+CardFooter.displayName = 'CardFooter';

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