@0xsequence/marketplace-sdk 0.8.11 → 0.9.0

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

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

@@ -1,264 +0,0 @@
-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('media');
-		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();
-	});
-
-	it('shows loading state when isLoading prop is true', async () => {
-		const mockMetadata: Partial<TokenMetadata> = {
-			tokenId: '1',
-			name: 'Test Collectible',
-			image: 'https://example.com/test-image.png',
-			attributes: [],
-		};
-
-		// Render with isLoading=true
-		const { rerender } = render(
-			<Media
-				name="Test Collectible"
-				assets={[mockMetadata.image]}
-				isLoading={true}
-			/>,
-		);
-
-		// Check if skeleton is rendered during loading
-		expect(screen.getByTestId('media')).toBeInTheDocument();
-
-		// Image should be invisible while loading
-		const imgElement = document.querySelector('img');
-		expect(imgElement?.className).toContain('invisible');
-
-		// Re-render with isLoading=false
-		rerender(
-			<Media
-				name="Test Collectible"
-				assets={[mockMetadata.image]}
-				isLoading={false}
-			/>,
-		);
-
-		// After loading completes, trigger load event
-		imgElement?.dispatchEvent(new Event('load'));
-
-		// Image should become visible
-		expect(imgElement?.className).toContain('visible');
-	});
-});

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

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

package/src/react/ui/modals/BuyModal/ERC1155QuantityModal.tsx

@@ -1,130 +0,0 @@
-'use client';
-
-import { use$, useObservable } from '@legendapp/state/react';
-
-import { Text, TokenImage } from '@0xsequence/design-system';
-import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../consts';
-import { compareAddress } from '../../../../utils/address';
-import { formatPriceWithFee } from '../../../../utils/price';
-import type { Order } from '../../../_internal';
-import { useCurrency, useMarketplaceConfig } from '../../../hooks';
-import { ActionModal } from '../_internal/components/actionModal';
-import QuantityInput from '../_internal/components/quantityInput';
-import { buyModalStore, useBuyModalProps, useIsOpen } from './store';
-
-export const ERC1155QuantityModal = ({ order }: { order: Order }) => {
-	const { chainId } = useBuyModalProps();
-	const isOpen = useIsOpen();
-
-	const localQuantity$ = useObservable('1');
-	const localQuantity = use$(localQuantity$);
-	const invalidQuantity$ = useObservable(false);
-	const invalidQuantity = use$(invalidQuantity$);
-
-	return (
-		<ActionModal
-			isOpen={isOpen}
-			chainId={chainId}
-			onClose={() => buyModalStore.send({ type: 'close' })}
-			title="Select Quantity"
-			disableAnimation={true}
-			ctas={[
-				{
-					label: 'Buy now',
-					onClick: () => {
-						buyModalStore.send({
-							type: 'setQuantity',
-							quantity: Number(localQuantity),
-						});
-					},
-					disabled: invalidQuantity,
-				},
-			]}
-		>
-			<div className="flex w-full flex-col gap-4">
-				<QuantityInput
-					$quantity={localQuantity$}
-					$invalidQuantity={invalidQuantity$}
-					decimals={order.quantityDecimals}
-					maxQuantity={order.quantityRemaining}
-				/>
-
-				<TotalPrice order={order} quantityStr={localQuantity} />
-			</div>
-		</ActionModal>
-	);
-};
-
-const TotalPrice = ({
-	order,
-	quantityStr,
-}: {
-	order: Order;
-	quantityStr: string;
-}) => {
-	const { data: marketplaceConfig } = useMarketplaceConfig();
-	const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
-		chainId: order.chainId,
-		currencyAddress: order.priceCurrencyAddress,
-	});
-
-	let error: null | string = null;
-	let formattedPrice = '0';
-
-	if (currency) {
-		try {
-			const marketplaceFeePercentage =
-				marketplaceConfig?.market.collections.find((collection) =>
-					compareAddress(
-						collection.itemsAddress,
-						order.collectionContractAddress,
-					),
-				)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
-			const quantity = BigInt(quantityStr);
-			const totalPriceRaw = BigInt(order.priceAmount) * quantity;
-
-			formattedPrice = formatPriceWithFee(
-				totalPriceRaw,
-				currency.decimals,
-				marketplaceFeePercentage,
-			);
-		} catch (e) {
-			console.error('Error formatting price', e);
-			error = 'Unable to calculate total price';
-		}
-	}
-
-	return error ? (
-		<Text className="font-body font-medium text-xs" color="text50">
-			{error}
-		</Text>
-	) : (
-		<div className="flex justify-between">
-			<Text className="font-body font-medium text-xs" color="text50">
-				Total Price
-			</Text>
-
-			<div className="flex items-center gap-0.5">
-				{isCurrencyLoading || !currency ? (
-					<div className="flex items-center gap-2">
-						<Text className="font-body text-text-50 text-xs">Loading...</Text>
-					</div>
-				) : (
-					<>
-						{currency.imageUrl && (
-							<TokenImage src={currency.imageUrl} size="xs" />
-						)}
-
-						<Text className="font-body font-bold text-text-100 text-xs">
-							{formattedPrice}
-						</Text>
-
-						<Text className="font-body font-bold text-text-80 text-xs">
-							{currency?.symbol}
-						</Text>
-					</>
-				)}
-			</div>
-		</div>
-	);
-};

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

@@ -1,124 +0,0 @@
-'use client';
-
-import {
-	type SelectPaymentSettings,
-	useSelectPaymentModal,
-} from '@0xsequence/checkout';
-import { useEffect, useRef } from 'react';
-import { ContractType } from '../../../_internal';
-import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
-import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
-import { ERC1155QuantityModal } from './ERC1155QuantityModal';
-import { useLoadData } from './hooks/useLoadData';
-import { usePaymentModalParams } from './hooks/usePaymentModalParams';
-import {
-	buyModalStore,
-	useBuyModalProps,
-	useIsOpen,
-	useOnError,
-	useQuantity,
-} from './store';
-
-export const BuyModal = () => {
-	const isOpen = useIsOpen();
-
-	if (!isOpen) {
-		return null;
-	}
-
-	return <BuyModalContent />;
-};
-
-const BuyModalContent = () => {
-	const { chainId } = useBuyModalProps();
-
-	const onError = useOnError();
-
-	const quantity = useQuantity();
-
-	const {
-		collection,
-		collectable,
-		wallet,
-		isLoading,
-		isError,
-		order,
-		checkoutOptions,
-	} = useLoadData();
-
-	const {
-		data: paymentModalParams,
-		isLoading: isPaymentModalParamsLoading,
-		isError: isPaymentModalParamsError,
-	} = usePaymentModalParams({
-		wallet,
-		quantity,
-		marketplace: order?.marketplace,
-		collectable: collectable,
-		checkoutOptions: checkoutOptions,
-		priceCurrencyAddress: order?.priceCurrencyAddress,
-	});
-
-	// biome-ignore lint/correctness/useExhaustiveDependencies: we want to set this on collection change
-	useEffect(() => {
-		if (collection?.type === ContractType.ERC721 && !quantity) {
-			buyModalStore.send({ type: 'setQuantity', quantity: 1 });
-		}
-	}, [collection]);
-
-	if (isError || isPaymentModalParamsError) {
-		onError(new Error('Error loading data'));
-		return (
-			<ErrorModal
-				isOpen={true}
-				chainId={chainId}
-				onClose={() => buyModalStore.send({ type: 'close' })}
-				title="Error"
-			/>
-		);
-	}
-
-	if (
-		isLoading ||
-		isPaymentModalParamsLoading ||
-		!collection ||
-		!collectable ||
-		!order
-	) {
-		return (
-			<LoadingModal
-				isOpen={true}
-				chainId={chainId}
-				onClose={() => buyModalStore.send({ type: 'close' })}
-				title="Loading Sequence Pay"
-			/>
-		);
-	}
-
-	if (collection.type === ContractType.ERC1155 && !quantity) {
-		return <ERC1155QuantityModal order={order} />;
-	}
-
-	if (paymentModalParams) {
-		return <PaymentModalOpener paymentModalParams={paymentModalParams} />;
-	}
-};
-
-const PaymentModalOpener = ({
-	paymentModalParams,
-}: {
-	paymentModalParams: SelectPaymentSettings;
-}) => {
-	const { openSelectPaymentModal } = useSelectPaymentModal();
-	const hasOpenedRef = useRef(false);
-
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-	useEffect(() => {
-		if (!hasOpenedRef.current) {
-			hasOpenedRef.current = true;
-			openSelectPaymentModal(paymentModalParams);
-		}
-	}, []);
-
-	return null;
-};