@0xsequence/marketplace-sdk 0.0.0-20250513233135

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

@@ -0,0 +1,231 @@
+import { TEST_CURRENCY } from '@test/const';
+import { render, screen } from '@test/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import { ContractType, CurrencyStatus } 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',
+	quantityInitial: 10,
+	quantityRemaining: '10',
+	marketplaceType: 'market' as const,
+};
+
+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} marketplaceType={'market'} />);
+
+		// 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();
+	});
+
+	it('renders correctly with name and listed price', () => {
+		render(
+			<Footer
+				name="Test NFT"
+				lowestListingPriceAmount="1000000000000000000"
+				lowestListingCurrency={{
+					chainId: 1,
+					contractAddress: '0x0',
+					symbol: 'TEST',
+					decimals: 18,
+					name: 'Test Token',
+					imageUrl: 'https://example.com/test.png',
+					exchangeRate: 1,
+					defaultChainCurrency: false,
+					nativeCurrency: false,
+					createdAt: '',
+					updatedAt: '',
+					status: CurrencyStatus.active,
+				}}
+				marketplaceType={'market'}
+				quantityInitial={10}
+				quantityRemaining={'10'}
+			/>,
+		);
+
+		expect(screen.getByText('Test NFT')).toBeInTheDocument();
+		expect(screen.getByText('1 TEST')).toBeInTheDocument();
+	});
+
+	it('shows ERC-721 pill for marketplace card type', () => {
+		render(
+			<Footer
+				name="Test NFT"
+				type={ContractType.ERC721}
+				marketplaceType={'market'}
+				quantityInitial={10}
+				quantityRemaining={'10'}
+			/>,
+		);
+
+		expect(screen.getByText('ERC-721')).toBeInTheDocument();
+	});
+
+	it('shows "Owned: X" for ERC-1155 with balance', () => {
+		render(
+			<Footer
+				name="Test NFT"
+				type={ContractType.ERC1155}
+				balance="5"
+				decimals={0}
+				marketplaceType={'market'}
+				quantityInitial={10}
+				quantityRemaining={'10'}
+			/>,
+		);
+
+		expect(screen.getByText('Owned: 5')).toBeInTheDocument();
+	});
+
+	it('shows "Unlimited" for shop card type with active sale and zero quantity remaining', () => {
+		render(
+			<Footer
+				name="Test NFT"
+				marketplaceType={'shop'}
+				quantityInitial={10}
+				quantityRemaining={'0'}
+				saleStartsAt={(Math.floor(Date.now() / 1000) - 3600).toString()} // 1 hour ago
+				saleEndsAt={(Math.floor(Date.now() / 1000) + 3600).toString()} // 1 hour in future
+			/>,
+		);
+
+		expect(screen.getByText('Unlimited')).toBeInTheDocument();
+	});
+
+	it('shows "Not available" for shop card type without sale dates', () => {
+		render(
+			<Footer
+				name="Test NFT"
+				marketplaceType={'shop'}
+				quantityInitial={10}
+				quantityRemaining={'10'}
+			/>,
+		);
+
+		// Name should have faded text color
+		const nameElement = screen.getByText('Test NFT');
+		expect(nameElement).toHaveClass('text-text-50');
+
+		// Should show "Not available" in the sale details pill
+		expect(screen.getByText('Not available')).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,161 @@
+import { TEST_COLLECTIBLE, TEST_CURRENCY } from '@test/const';
+import { fireEvent, render, screen } from '@test/test-utils';
+import type { Address } from 'viem';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { CollectibleCard } from '..';
+import type { MarketplaceType } from '../../../../../types';
+import {
+	type CollectibleOrder,
+	ContractType,
+	OrderSide,
+	OrderbookKind,
+	type TokenMetadata,
+} from '../../../../_internal';
+import { mockTokenMetadata } from '../../../../_internal/api/__mocks__/indexer.msw';
+import { mockOrder } from '../../../../_internal/api/__mocks__/marketplace.msw';
+import * as hooks from '../../../../hooks';
+import { MarketplaceCollectibleCard } from '../MarketplaceCollectibleCard';
+
+// Create a properly typed version of the mock token metadata
+const typedTokenMetadata: TokenMetadata = {
+	...mockTokenMetadata,
+	tokenId: mockTokenMetadata.tokenId as string,
+	assets: mockTokenMetadata.assets
+		? mockTokenMetadata.assets.map((asset) => ({
+				...asset,
+				tokenId: asset.tokenId || '',
+			}))
+		: undefined,
+};
+
+const mockCollectibleOrder: CollectibleOrder = {
+	order: mockOrder,
+	listing: { ...mockOrder, side: OrderSide.listing },
+	offer: { ...mockOrder, side: OrderSide.offer },
+	metadata: typedTokenMetadata,
+};
+
+// Base props shared by all tests
+const baseProps = {
+	collectibleId: '1',
+	chainId: 1,
+	collectionAddress: TEST_COLLECTIBLE.collectionAddress,
+	assetSrcPrefixUrl: 'https://example.com/',
+	cardLoading: false,
+};
+
+// Market-specific props
+const marketProps = {
+	...baseProps,
+	marketplaceType: 'market' as MarketplaceType,
+	collectible: mockCollectibleOrder,
+	balance: '100',
+	balanceIsLoading: false,
+	onCannotPerformAction: vi.fn(),
+	orderbookKind: OrderbookKind.sequence_marketplace_v2,
+	collectionType: ContractType.ERC721,
+};
+
+// Shop-specific props with explicitly typed MarketplaceType.SHOP
+const shopProps = {
+	...baseProps,
+	marketplaceType: 'shop' as const,
+	tokenMetadata: typedTokenMetadata,
+	salesContractAddress: '0x123' as Address,
+	salePrice: {
+		amount: '100',
+		currencyAddress: TEST_CURRENCY.contractAddress as Address,
+	},
+	quantityDecimals: 0,
+	quantityInitial: 10,
+	quantityRemaining: '10',
+	saleStartsAt: '2021-01-01',
+	saleEndsAt: '2021-01-02',
+	collectionType: ContractType.ERC1155,
+};
+
+describe('MarketplaceCollectibleCard', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		vi.restoreAllMocks();
+
+		const useCurrencySpy = vi.spyOn(hooks, 'useCurrency');
+		useCurrencySpy.mockReturnValue({
+			data: TEST_CURRENCY,
+		} as ReturnType<typeof hooks.useCurrency>);
+	});
+
+	describe('Common functionality', () => {
+		it('Handles loading state by showing skeleton component', () => {
+			render(
+				<MarketplaceCollectibleCard {...marketProps} cardLoading={true} />,
+			);
+			expect(
+				screen.getByTestId('collectible-card-skeleton'),
+			).toBeInTheDocument();
+		});
+	});
+
+	describe('MARKET type', () => {
+		it('Renders correctly with market props and shows proper collectible details', () => {
+			render(<MarketplaceCollectibleCard {...marketProps} />);
+
+			expect(screen.getByText('Mock NFT')).toBeInTheDocument();
+			expect(screen.getByText('1 TEST')).toBeInTheDocument();
+			// Verify there is an offer
+			expect(screen.getByTitle('Notification Bell')).toBeInTheDocument();
+			expect(screen.getByRole('img', { name: 'Mock NFT' })).toHaveAttribute(
+				'src',
+				marketProps.assetSrcPrefixUrl + marketProps.collectible.metadata.image,
+			);
+		});
+
+		it('Triggers appropriate callbacks when collectible or action buttons are clicked', () => {
+			const onCollectibleClick = vi.fn();
+			const onOfferClick = vi.fn();
+
+			render(
+				<MarketplaceCollectibleCard
+					{...marketProps}
+					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();
+		});
+	});
+
+	describe('SHOP type', () => {
+		it('Renders shop card with correct details', () => {
+			const typedShopProps = { ...shopProps };
+			render(<CollectibleCard {...typedShopProps} />);
+
+			// Verify name and price display correctly for shop type
+			expect(screen.getByText('Mock NFT')).toBeInTheDocument();
+			expect(screen.getByText('0.0001 TEST')).toBeInTheDocument();
+			expect(screen.getByRole('img', { name: 'Mock NFT' })).toBeInTheDocument();
+		});
+
+		it('Handles shop card with no sale dates available', () => {
+			const noSaleDatesProps = {
+				...shopProps,
+				saleStartsAt: undefined,
+				saleEndsAt: undefined,
+			};
+			render(<CollectibleCard {...noSaleDatesProps} />);
+
+			// When sale is not available, the image should be dimmed
+			const media = screen.getByRole('img', { name: 'Mock NFT' });
+			expect(media.parentElement).toHaveClass('opacity-50');
+		});
+	});
+});

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

@@ -0,0 +1,224 @@
+import { render, screen, waitFor } from '@test/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import * as fetchContentTypeModule from '../../../../../utils/fetchContentType';
+import type { TokenMetadata } from '../../../../_internal';
+import { Media } from '../../media/Media';
+import * as contentTypeUtils from '../../media/utils';
+
+describe('Media', () => {
+	it('renders image content correctly with proper loading states and fallback', async () => {
+		const originalImage = window.Image;
+
+		// We need to use a proper constructor function to match the Image interface
+		const MockImage = function (this: HTMLImageElement) {
+			this.src = '';
+			this.alt = '';
+			this.className = '';
+			this.onload = null;
+			this.onerror = null;
+			return this;
+		} as unknown as typeof Image;
+
+		window.Image = MockImage;
+
+		const mockMetadata: Partial<TokenMetadata> = {
+			tokenId: '1',
+			name: 'Test Collectible',
+			image: 'https://example.com/test-image.png',
+			attributes: [],
+		};
+
+		// Initial render should show the loading skeleton
+		const { rerender } = render(
+			<Media name="Test Collectible" assets={[mockMetadata.image]} />,
+		);
+
+		// check if skeleton is rendered during loading
+		const skeleton = screen.getByTestId('collectible-asset-skeleton');
+		expect(skeleton).toBeInTheDocument();
+
+		// trigger the image load event to simulate successful loading
+		const imgElement = document.querySelector('img');
+		expect(imgElement).not.toBeNull();
+
+		if (imgElement) {
+			expect(imgElement.getAttribute('src')).toBe(
+				'https://example.com/test-image.png',
+			);
+			expect(imgElement.getAttribute('alt')).toBe('Test Collectible');
+
+			// initial state should be invisible due to loading
+			expect(imgElement.className).toContain('invisible');
+
+			// successful image load
+			imgElement.dispatchEvent(new Event('load'));
+
+			// after loading, the image should be visible
+			expect(imgElement.className).toContain('visible');
+		}
+
+		// failing image that should use fallback
+		const mockMetadataWithBadImage: Partial<TokenMetadata> = {
+			tokenId: '1',
+			name: 'Test Collectible',
+			image: 'https://example.com/bad-image.png',
+			attributes: [],
+		};
+
+		rerender(
+			<Media
+				name="Test Collectible"
+				assets={[mockMetadataWithBadImage.image]}
+			/>,
+		);
+
+		const updatedImgElement = document.querySelector('img');
+		if (updatedImgElement) {
+			// simulate image load error
+			updatedImgElement.dispatchEvent(new Event('error'));
+
+			// after error, the src should be changed to the placeholder
+			expect(updatedImgElement.className).toContain('visible');
+		}
+
+		// restore the original Image implementation
+		window.Image = originalImage;
+	});
+
+	it('handles video content with appropriate controls and loading states', async () => {
+		const getContentTypeSpy = vi.spyOn(contentTypeUtils, 'getContentType');
+		getContentTypeSpy.mockResolvedValue('video');
+
+		const fetchContentTypeSpy = vi.spyOn(
+			fetchContentTypeModule,
+			'fetchContentType',
+		);
+		fetchContentTypeSpy.mockResolvedValue('video');
+
+		// Create a mock for the HTMLVideoElement addEventListener
+		const originalAddEventListener =
+			HTMLVideoElement.prototype.addEventListener;
+		HTMLVideoElement.prototype.addEventListener = vi.fn(
+			(event: string, handler: EventListenerOrEventListenerObject) => {
+				// Immediately call the loadedmetadata handler to simulate video loaded
+				if (event === 'loadedmetadata' && typeof handler === 'function') {
+					handler(new Event('loadedmetadata'));
+				}
+			},
+		);
+
+		// Mock browser detection for Safari
+		const originalUserAgent = navigator.userAgent;
+		Object.defineProperty(navigator, 'userAgent', {
+			value:
+				'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Safari/605.1.15',
+			configurable: true,
+		});
+
+		// Mock video metadata
+		const mockVideoMetadata: Partial<TokenMetadata> = {
+			tokenId: '1',
+			name: 'Video Collectible',
+			video: 'https://example.com/video.mp4',
+			attributes: [],
+		};
+
+		render(
+			<Media name="Video Collectible" assets={[mockVideoMetadata.video]} />,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('collectible-asset-video')).toBeInTheDocument();
+		});
+
+		const videoElement = screen.getByTestId(
+			'collectible-asset-video',
+		) as HTMLVideoElement;
+
+		expect(videoElement).not.toBeNull();
+
+		// Video source should be set correctly
+		const sourceElement = videoElement.querySelector('source');
+		expect(sourceElement).not.toBeNull();
+		expect(sourceElement?.getAttribute('src')).toBe(
+			'https://example.com/video.mp4',
+		);
+
+		// Video should have correct attributes for NFT display
+		expect(videoElement.autoplay).toBe(true);
+		expect(videoElement.loop).toBe(true);
+		expect(videoElement.controls).toBe(true);
+		expect(videoElement.playsInline).toBe(true);
+		expect(videoElement.muted).toBe(true);
+
+		// In Safari, pointer-events-none should be applied
+		expect(videoElement.className).toContain('pointer-events-none');
+
+		// After metadata loaded, video should be visible
+		expect(videoElement.className).toContain('visible');
+
+		// Clean up mocks
+		getContentTypeSpy.mockRestore();
+		fetchContentTypeSpy.mockRestore();
+		HTMLVideoElement.prototype.addEventListener = originalAddEventListener;
+		Object.defineProperty(navigator, 'userAgent', {
+			value: originalUserAgent,
+			configurable: true,
+		});
+	});
+
+	it('handles HTML content in iframes with proper sandboxing', async () => {
+		const getContentTypeSpy = vi.spyOn(contentTypeUtils, 'getContentType');
+		getContentTypeSpy.mockResolvedValue('html');
+
+		const fetchContentTypeSpy = vi.spyOn(
+			fetchContentTypeModule,
+			'fetchContentType',
+		);
+		fetchContentTypeSpy.mockResolvedValue('html');
+
+		// Mock HTML content metadata
+		const mockHtmlMetadata: Partial<TokenMetadata> = {
+			tokenId: '1',
+			name: 'HTML Collectible',
+			animation_url: 'https://example.com/interactive.html',
+			attributes: [],
+		};
+
+		render(
+			<Media
+				name="HTML Collectible"
+				assets={[mockHtmlMetadata.animation_url]}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(document.querySelector('iframe')).toBeInTheDocument();
+		});
+
+		// Check that iframe element is present with correct attributes
+		const iframeElement = document.querySelector('iframe') as HTMLIFrameElement;
+		expect(iframeElement).toBeInTheDocument();
+
+		// iframe source should be set correctly
+		expect(iframeElement.getAttribute('src')).toBe(
+			'https://example.com/interactive.html',
+		);
+
+		// iframe should have appropriate attributes for security
+		expect(iframeElement.getAttribute('sandbox')).toBe('allow-scripts');
+
+		// iframe should have title for accessibility
+		expect(iframeElement.getAttribute('title')).toBe('HTML Collectible');
+
+		// iframe should have proper styling
+		expect(iframeElement.className).toContain('aspect-square');
+		expect(iframeElement.className).toContain('w-full');
+
+		// Verify border styling
+		expect(iframeElement.style.border).toBe('0px');
+
+		getContentTypeSpy.mockRestore();
+		fetchContentTypeSpy.mockRestore();
+	});
+});

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

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