@0xsequence/marketplace-sdk 0.8.11 → 0.8.12

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

@@ -1,170 +0,0 @@
-'use client';
-
-import { Skeleton } from '@0xsequence/design-system';
-import type { Hex } from 'viem';
-import type {
-	CollectibleOrder,
-	ContractType,
-	Order,
-	OrderbookKind,
-} from '../../../_internal';
-import { useCurrency } from '../../../hooks';
-import { ActionButton } from '../_internals/action-button/ActionButton';
-import { CollectibleCardAction } from '../_internals/action-button/types';
-import { Footer } from './Footer';
-import { Media } from './media/Media';
-
-function CollectibleSkeleton() {
-	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>
-	);
-}
-
-type CollectibleCardProps = {
-	collectibleId: string;
-	chainId: number;
-	collectionAddress: Hex;
-	orderbookKind?: OrderbookKind;
-	collectionType?: ContractType;
-	collectible: CollectibleOrder | undefined;
-	onCollectibleClick?: (tokenId: string) => void;
-	onOfferClick?: ({
-		order,
-		e,
-	}: {
-		order?: Order;
-		e: React.MouseEvent<HTMLButtonElement>;
-	}) => void;
-	assetSrcPrefixUrl?: string;
-	balance?: string;
-	balanceIsLoading: boolean;
-	cardLoading?: 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;
-};
-
-export function CollectibleCard({
-	collectibleId,
-	chainId,
-	collectionAddress,
-	orderbookKind,
-	collectionType,
-	collectible,
-	onCollectibleClick,
-	onOfferClick,
-	balance,
-	balanceIsLoading,
-	cardLoading,
-	onCannotPerformAction,
-	assetSrcPrefixUrl,
-}: CollectibleCardProps) {
-	const collectibleMetadata = collectible?.metadata;
-	const highestOffer = collectible?.offer;
-
-	const { data: lowestListingCurrency } = useCurrency({
-		chainId,
-		currencyAddress: collectible?.listing?.priceCurrencyAddress,
-		query: {
-			enabled: !!collectible?.listing?.priceCurrencyAddress,
-		},
-	});
-
-	if (cardLoading) {
-		return <CollectibleSkeleton />;
-	}
-
-	const action = (
-		balance
-			? (highestOffer && CollectibleCardAction.SELL) ||
-				(!collectible?.listing && CollectibleCardAction.LIST) ||
-				CollectibleCardAction.TRANSFER
-			: (collectible?.listing && CollectibleCardAction.BUY) ||
-				CollectibleCardAction.OFFER
-	) as CollectibleCardAction;
-
-	return (
-		<div
-			data-testid="collectible-card"
-			className="w-card-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={() => onCollectibleClick?.(collectibleId)}
-			onKeyDown={(e) => {
-				if (e.key === 'Enter' || e.key === ' ') {
-					onCollectibleClick?.(collectibleId);
-				}
-			}}
-		>
-			<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={collectibleMetadata?.name || ''}
-						assets={[
-							collectibleMetadata?.image,
-							collectibleMetadata?.video,
-							collectibleMetadata?.animation_url,
-						]}
-						assetSrcPrefixUrl={assetSrcPrefixUrl}
-					/>
-
-					<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}
-					/>
-
-					{(highestOffer || collectible) && !balanceIsLoading && (
-						<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={collectibleId}
-								orderbookKind={orderbookKind}
-								action={action}
-								highestOffer={highestOffer}
-								lowestListing={collectible?.listing}
-								owned={!!balance}
-								onCannotPerformAction={onCannotPerformAction}
-							/>
-						</div>
-					)}
-				</article>
-			</div>
-		</div>
-	);
-}

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

@@ -1,157 +0,0 @@
-'use client';
-
-import {
-	ChevronLeftIcon,
-	ChevronRightIcon,
-	IconButton,
-	Image,
-	Text,
-} from '@0xsequence/design-system';
-import { formatUnits } from 'viem';
-import { ContractType, type Currency, type Order } from '../../../_internal';
-import SvgBellIcon from '../../icons/BellIcon';
-
-const OVERFLOW_PRICE = 100000000;
-const UNDERFLOW_PRICE = 0.0001;
-
-const formatPrice = (amount: string, currency: Currency): React.ReactNode => {
-	const formattedPrice = formatUnits(BigInt(amount), currency.decimals);
-	const numericPrice = Number.parseFloat(formattedPrice);
-
-	if (numericPrice < UNDERFLOW_PRICE) {
-		return (
-			<div className="flex items-center">
-				<ChevronLeftIcon className="h-3 w-3 text-text-100" />
-				<Text>{`${UNDERFLOW_PRICE} ${currency.symbol}`}</Text>
-			</div>
-		);
-	}
-
-	if (numericPrice > OVERFLOW_PRICE) {
-		return (
-			<div className="flex items-center">
-				<ChevronRightIcon className="h-3 w-3 text-text-100" />
-				<Text>{`${OVERFLOW_PRICE.toLocaleString('en-US', {
-					maximumFractionDigits: 2,
-				})} ${currency.symbol}`}</Text>
-			</div>
-		);
-	}
-
-	const maxDecimals = numericPrice < 0.01 ? 6 : 4;
-
-	const formattedNumber = numericPrice.toLocaleString('en-US', {
-		minimumFractionDigits: 0,
-		maximumFractionDigits: maxDecimals,
-	});
-
-	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;
-};
-
-export const Footer = ({
-	name,
-	type,
-	decimals,
-	onOfferClick,
-	highestOffer,
-	lowestListingPriceAmount,
-	lowestListingCurrency,
-	balance,
-}: FooterProps) => {
-	const listed = !!lowestListingPriceAmount && !!lowestListingCurrency;
-
-	if (name.length > 15 && highestOffer) {
-		name = `${name.substring(0, 13)}...`;
-	}
-	if (name.length > 17 && !highestOffer) {
-		name = `${name.substring(0, 17)}...`;
-	}
-
-	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="text-left font-body font-bold text-sm text-text-100">
-					{name || 'Untitled'}
-				</Text>
-
-				{highestOffer && onOfferClick && (
-					<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="flex items-center gap-1">
-				{listed && lowestListingCurrency.imageUrl && (
-					<Image
-						className="h-3 w-3"
-						src={lowestListingCurrency.imageUrl}
-						onError={(e) => {
-							e.currentTarget.style.display = 'none';
-						}}
-					/>
-				)}
-
-				<Text
-					className={`text-left font-body font-bold text-sm ${
-						listed ? 'text-text-100' : 'text-text-50'
-					}`}
-				>
-					{listed &&
-						formatPrice(lowestListingPriceAmount, lowestListingCurrency)}
-					{!listed && 'Not listed yet'}
-				</Text>
-			</div>
-			<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>
-	);
-};

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

@@ -1,94 +0,0 @@
-import { TEST_COLLECTIBLE, TEST_CURRENCY } from '@test/const';
-import { fireEvent, render, screen } from '@test/test-utils';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import {
-	type CollectibleOrder,
-	ContractType,
-	OrderSide,
-	OrderbookKind,
-} from '../../../../_internal';
-import { mockTokenMetadata } from '../../../../_internal/api/__mocks__/indexer.msw';
-import { mockOrder } from '../../../../_internal/api/__mocks__/marketplace.msw';
-import * as hooks from '../../../../hooks';
-import { CollectibleCard } from '../CollectibleCard';
-
-const defaultProps = {
-	collectibleId: '1',
-	chainId: 1,
-	collectionAddress: TEST_COLLECTIBLE.collectionAddress,
-	collectible: {
-		order: mockOrder,
-		listing: { ...mockOrder, side: OrderSide.listing },
-		offer: { ...mockOrder, side: OrderSide.offer },
-		metadata: {
-			...mockTokenMetadata,
-			tokenId: mockTokenMetadata.tokenId as string,
-			assets: mockTokenMetadata.assets
-				? mockTokenMetadata.assets.map((asset) => ({
-						...asset,
-						tokenId: asset.tokenId || '',
-					}))
-				: undefined,
-		},
-	} as CollectibleOrder,
-	balance: '100',
-	balanceIsLoading: false,
-	cardLoading: false,
-	onCannotPerformAction: vi.fn(),
-	assetSrcPrefixUrl: 'https://example.com/',
-	orderbookKind: OrderbookKind.sequence_marketplace_v2,
-	collectionType: ContractType.ERC721,
-};
-
-describe('CollectibleCard', () => {
-	beforeEach(() => {
-		vi.clearAllMocks();
-		vi.restoreAllMocks();
-
-		const useCurrencySpy = vi.spyOn(hooks, 'useCurrency');
-		useCurrencySpy.mockReturnValue({
-			data: TEST_CURRENCY,
-		} as ReturnType<typeof hooks.useCurrency>);
-	});
-
-	it('Renders correctly with valid props and shows proper collectible details', () => {
-		render(<CollectibleCard {...defaultProps} />);
-
-		expect(screen.getByText('Mock NFT')).toBeInTheDocument();
-		expect(screen.getByText('1 TEST')).toBeInTheDocument();
-		// there is an offer
-		expect(screen.getByTitle('Notification Bell')).toBeInTheDocument();
-		expect(screen.getByRole('img', { name: 'Mock NFT' })).toHaveAttribute(
-			'src',
-			defaultProps.assetSrcPrefixUrl + defaultProps.collectible.metadata.image,
-		);
-	});
-
-	it('Handles loading state by showing skeleton component', () => {
-		render(<CollectibleCard {...defaultProps} cardLoading={true} />);
-		expect(screen.getByTestId('collectible-card-skeleton')).toBeInTheDocument();
-	});
-
-	it('Triggers appropriate callbacks when collectible or action buttons are clicked', () => {
-		const onCollectibleClick = vi.fn();
-		const onOfferClick = vi.fn();
-
-		render(
-			<CollectibleCard
-				{...defaultProps}
-				onCollectibleClick={onCollectibleClick}
-				onOfferClick={onOfferClick}
-			/>,
-		);
-
-		const notificationBell = screen.getByRole('button', {
-			name: 'Notification Bell',
-		});
-		fireEvent.click(notificationBell);
-		expect(onOfferClick).toHaveBeenCalled();
-
-		const collectibleCard = screen.getByTestId('collectible-card');
-		fireEvent.click(collectibleCard);
-		expect(onCollectibleClick).toHaveBeenCalled();
-	});
-});

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

@@ -1,136 +0,0 @@
-import { TEST_CURRENCY } from '@test/const';
-import { render, screen } from '@test/test-utils';
-import { describe, expect, it, vi } from 'vitest';
-import { ContractType } from '../../../../_internal';
-import { mockOrder } from '../../../../_internal/api/__mocks__/marketplace.msw';
-import { Footer } from '../Footer';
-
-const defaultProps = {
-	name: 'Test',
-	type: ContractType.ERC721,
-	decimals: 18,
-	onOfferClick: vi.fn(),
-	highestOffer: mockOrder,
-	lowestOffer: mockOrder,
-	lowestListingPriceAmount: '100',
-	lowestListingCurrency: TEST_CURRENCY,
-	balance: '100',
-};
-
-describe('Footer', () => {
-	it('Renders with basic props (name, type) correctly', () => {
-		render(<Footer {...defaultProps} />);
-
-		expect(screen.getByText('Test')).toBeInTheDocument();
-		expect(screen.getByText('0.0001 TEST')).toBeInTheDocument();
-
-		const notificationBell = screen.getByRole('button', {
-			name: 'Notification Bell',
-		});
-		expect(notificationBell).toBeInTheDocument();
-	});
-
-	it('Truncates long names appropriately based on presence of offers', () => {
-		const longName =
-			'This is a very long collectible name that needs truncation';
-
-		// Test truncation with offer present (truncates to 13 chars + "...")
-		render(
-			<Footer {...defaultProps} name={longName} highestOffer={mockOrder} />,
-		);
-		expect(screen.getByText('This is a ver...')).toBeInTheDocument();
-
-		// Test truncation without offer present (truncates to 17 chars + "...")
-		render(
-			<Footer {...defaultProps} name={longName} highestOffer={undefined} />,
-		);
-		expect(screen.getByText('This is a very lo...')).toBeInTheDocument();
-
-		// Test short name with offer (no truncation needed)
-		render(
-			<Footer {...defaultProps} name="Short Name" highestOffer={mockOrder} />,
-		);
-		expect(screen.getByText('Short Name')).toBeInTheDocument();
-	});
-
-	it('Formats prices correctly for different scenarios (normal, overflow, underflow)', () => {
-		// Test normal price formatting
-		render(
-			<Footer
-				{...defaultProps}
-				lowestListingPriceAmount="1000000000000000000" // 1 TOKEN in wei
-			/>,
-		);
-		expect(screen.getByText('1 TEST')).toBeInTheDocument();
-
-		// Test small number formatting (shows more decimals)
-		render(
-			<Footer
-				{...defaultProps}
-				lowestListingPriceAmount="5000000000000000" // 0.005 TOKEN in wei
-			/>,
-		);
-		expect(screen.getByText('0.005 TEST')).toBeInTheDocument();
-
-		// Test underflow price (< 0.0001)
-		render(
-			<Footer
-				{...defaultProps}
-				lowestListingPriceAmount="10000000000000" // 0.00001 TOKEN in wei
-			/>,
-		);
-		// Should display minimum price with chevron icon
-		expect(screen.getByText('0.0001 TEST')).toBeInTheDocument();
-
-		// Test overflow price (> 100,000,000)
-		render(
-			<Footer
-				{...defaultProps}
-				lowestListingPriceAmount="100000000000000000000000000" // 100M+ TOKEN in wei
-			/>,
-		);
-		// Should display maximum price with chevron icon
-		expect(screen.getByText('100,000,000 TEST')).toBeInTheDocument();
-	});
-
-	it("Displays 'Not listed yet' when no listing price is provided", () => {
-		// Create props without listing price information
-		const propsWithoutListing = {
-			...defaultProps,
-			lowestListingPriceAmount: undefined,
-			lowestListingCurrency: undefined,
-		};
-
-		render(<Footer {...propsWithoutListing} />);
-
-		// Verify "Not listed yet" text is displayed
-		expect(screen.getByText('Not listed yet')).toBeInTheDocument();
-	});
-
-	it('Shows proper token balance information for ERC721 vs ERC1155 tokens', () => {
-		// Test ERC721 token display
-		render(<Footer {...defaultProps} type={ContractType.ERC721} />);
-		expect(screen.getByText('ERC-721')).toBeInTheDocument();
-
-		// Test ERC1155 token display without balance
-		render(
-			<Footer
-				{...defaultProps}
-				type={ContractType.ERC1155}
-				balance={undefined}
-			/>,
-		);
-		expect(screen.getByText('ERC-1155')).toBeInTheDocument();
-
-		// Test ERC1155 token display with balance
-		render(
-			<Footer
-				{...defaultProps}
-				type={ContractType.ERC1155}
-				balance="1000000000000000000"
-				decimals={18}
-			/>,
-		);
-		expect(screen.getByText('Owned: 1')).toBeInTheDocument();
-	});
-});