@0xsequence/marketplace-sdk 0.8.4 → 0.8.5

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

@@ -0,0 +1,200 @@
+import { render, screen } from '@test/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import type { TokenMetadata } from '../../../../_internal';
+import { CollectibleAsset } from '../CollectibleAsset';
+
+describe('CollectibleAsset', () => {
+	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(
+			<CollectibleAsset
+				name="Test Collectible"
+				collectibleMetadata={mockMetadata as TokenMetadata}
+			/>,
+		);
+
+		// 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(
+			<CollectibleAsset
+				name="Test Collectible"
+				collectibleMetadata={mockMetadataWithBadImage as TokenMetadata}
+			/>,
+		);
+
+		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', () => {
+		// 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(
+			<CollectibleAsset
+				name="Video Collectible"
+				collectibleMetadata={mockVideoMetadata as TokenMetadata}
+			/>,
+		);
+
+		// Check that video element is present with correct attributes
+		const videoElement = document.querySelector('video');
+		expect(videoElement).not.toBeNull();
+
+		if (videoElement) {
+			// 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');
+			expect(videoElement.className).not.toContain('invisible');
+		}
+
+		// Clean up mocks
+		HTMLVideoElement.prototype.addEventListener = originalAddEventListener;
+		Object.defineProperty(navigator, 'userAgent', {
+			value: originalUserAgent,
+			configurable: true,
+		});
+	});
+
+	it('handles HTML content in iframes with proper sandboxing', () => {
+		// Mock HTML content metadata
+		const mockHtmlMetadata: Partial<TokenMetadata> = {
+			tokenId: '1',
+			name: 'HTML Collectible',
+			animation_url: 'https://example.com/interactive.html',
+			attributes: [],
+		};
+
+		render(
+			<CollectibleAsset
+				name="HTML Collectible"
+				collectibleMetadata={mockHtmlMetadata as TokenMetadata}
+			/>,
+		);
+
+		// Check that iframe element is present with correct attributes
+		const iframeElement = document.querySelector('iframe');
+		expect(iframeElement).not.toBeNull();
+
+		if (iframeElement) {
+			// 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');
+		}
+	});
+});

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

@@ -1,125 +1,94 @@
-import { describe } from 'vitest';
+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';
 
-describe.skip('CollectibleCard', () => {
-	// // Create a mock order that follows the Order interface
-	// const mockOrder: Order = {
-	// 	orderId: '1',
-	// 	marketplace: MarketplaceKind.sequence_marketplace_v2,
-	// 	side: OrderSide.listing,
-	// 	status: OrderStatus.active,
-	// 	chainId: 1,
-	// 	originName: 'test marketplace',
-	// 	collectionContractAddress: '0x1234567890123456789012345678901234567890',
-	// 	tokenId: '123',
-	// 	createdBy: '0x0000000000000000000000000000000000000000',
-	// 	priceAmount: '1000000',
-	// 	priceAmountFormatted: '1',
-	// 	priceAmountNet: '1000000',
-	// 	priceAmountNetFormatted: '1',
-	// 	priceCurrencyAddress: USDC_ADDRESS,
-	// 	priceDecimals: 6,
-	// 	priceUSD: 1,
-	// 	priceUSDFormatted: '1',
-	// 	quantityInitial: '1',
-	// 	quantityInitialFormatted: '1',
-	// 	quantityRemaining: '1',
-	// 	quantityRemainingFormatted: '1',
-	// 	quantityAvailable: '1',
-	// 	quantityAvailableFormatted: '1',
-	// 	quantityDecimals: 0,
-	// 	feeBps: 250,
-	// 	feeBreakdown: [],
-	// 	validFrom: new Date().toISOString(),
-	// 	validUntil: new Date(Date.now() + 86400000).toISOString(),
-	// 	blockNumber: 1,
-	// 	createdAt: new Date().toISOString(),
-	// 	updatedAt: new Date().toISOString(),
-	// };
-	// const defaultProps = {
-	// 	collectibleId: '123',
-	// 	chainId: 1,
-	// 	collectionAddress:
-	// 		'0x1234567890123456789012345678901234567890' as `0x${string}`,
-	// 	lowestListing: {
-	// 		metadata: {
-	// 			tokenId: '123',
-	// 			name: 'Test Collectible',
-	// 			description: 'Test Description',
-	// 			image: 'https://example.com/image.png',
-	// 			external_url: 'https://example.com',
-	// 			decimals: 0,
-	// 			attributes: [],
-	// 		} as TokenMetadata,
-	// 		order: mockOrder,
-	// 	},
-	// 	orderbookKind: OrderbookKind.sequence_marketplace_v2,
-	// 	collectionType: ContractType.ERC721,
-	// };
-	// it('should render loading state when cardLoading is true', () => {
-	// 	render(<CollectibleCard {...defaultProps} cardLoading={true} />);
-	// 	expect(screen.getByTestId('loading-skeleton')).toBeInTheDocument();
-	// });
-	// it('should render collectible with image and metadata', async () => {
-	// 	render(<CollectibleCard {...defaultProps} />);
-	// 	// Check if name is displayed
-	// 	expect(screen.getByText('Test Collectible')).toBeInTheDocument();
-	// 	// Check price
-	// 	expect(screen.getByText(/1 USDC/)).toBeInTheDocument();
-	// 	// Check if token type is displayed
-	// 	expect(screen.getByText('ERC-721')).toBeInTheDocument();
-	// });
-	// it('should call onCollectibleClick when clicked', () => {
-	// 	const onCollectibleClick = vi.fn();
-	// 	render(
-	// 		<CollectibleCard
-	// 			{...defaultProps}
-	// 			onCollectibleClick={onCollectibleClick}
-	// 		/>,
-	// 	);
-	// 	// Click on the collectible
-	// 	const collectibleElement = screen
-	// 		.getByText('Test Collectible')
-	// 		.closest('article');
-	// 	if (collectibleElement) {
-	// 		fireEvent.click(collectibleElement);
-	// 	}
-	// 	expect(onCollectibleClick).toHaveBeenCalledWith(defaultProps.collectibleId);
-	// });
-	// it('should open external url in new tab when external link is clicked', () => {
-	// 	render(<CollectibleCard {...defaultProps} />);
-	// 	const externalLink = screen.getByRole('link');
-	// 	expect(externalLink).toHaveAttribute('href', 'https://example.com');
-	// 	expect(externalLink).toHaveAttribute('target', '_blank');
-	// 	expect(externalLink).toHaveAttribute('rel', 'noopener noreferrer');
-	// });
-	// it('should use fallback image when image load fails', async () => {
-	// 	render(<CollectibleCard {...defaultProps} />);
-	// 	const image = screen.getByAltText('Test Collectible');
-	// 	// Trigger error
-	// 	fireEvent.error(image);
-	// 	// Check if image source is changed to fallback
-	// 	expect(image).toHaveAttribute('src', expect.stringContaining('chess-tile'));
-	// });
-	// it('should show balance for ERC-1155 tokens', () => {
-	// 	const erc1155Props = {
-	// 		...defaultProps,
-	// 		collectionType: ContractType.ERC1155,
-	// 		balance: '5',
-	// 	};
-	// 	render(<CollectibleCard {...erc1155Props} />);
-	// 	expect(screen.getByText('Owned: 5')).toBeInTheDocument();
-	// });
-	// it('should call onCannotPerformAction when action cannot be performed', async () => {
-	// 	const onCannotPerformAction = vi.fn();
-	// 	render(
-	// 		<CollectibleCard
-	// 			{...defaultProps}
-	// 			onCannotPerformAction={onCannotPerformAction}
-	// 			balance="1" // Make it owned to test owner actions
-	// 		/>,
-	// 	);
-	// 	// We can't directly test this without mocking the useActionButtonLogic hook
-	// 	// Just testing the prop passes through
-	// 	expect(onCannotPerformAction).not.toHaveBeenCalled();
-	// });
+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

@@ -0,0 +1,136 @@
+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();
+	});
+});

package/src/react/ui/modals/BuyModal/__tests__/Modal.test.tsx

@@ -1,4 +1,4 @@
-import { WebSdkWrapper, cleanup, render, screen } from '@test';
+import { cleanup, render, screen } from '@test';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
 import { server } from '@test';
@@ -46,9 +46,7 @@ describe('BuyModal', () => {
 		//   },
 		// });
 		// render(
-		// <WebSdkWrapper>
 		//   <BuyModal />
-		// </WebSdkWrapper>
 		// );
 		// // Should show error modal
 		// await waitFor(() => {
@@ -98,11 +96,7 @@ describe('BuyModal', () => {
 			},
 		});
 
-		render(
-			<WebSdkWrapper>
-				<BuyModal />
-			</WebSdkWrapper>,
-		);
+		render(<BuyModal />);
 
 		// Should show loading modal
 		expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();