@0xsequence/marketplace-sdk 0.8.10 → 0.8.12

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

@@ -1,224 +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('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/collectible-card/index.ts

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

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

@@ -1,124 +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?.collections.find((collection) =>
-					compareAddress(collection.address, 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;
-};

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

@@ -1,104 +0,0 @@
-import { cleanup, render, screen } from '@test';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-
-import { server } from '@test';
-import type { Address } from 'viem';
-import { mockOrder } from '../../../../_internal/api/__mocks__/marketplace.msw';
-import { BuyModal } from '../Modal';
-import { buyModalStore } from '../store';
-
-describe('BuyModal', () => {
-	beforeEach(() => {
-		buyModalStore.send({ type: 'close' });
-	});
-
-	afterEach(() => {
-		cleanup();
-		// Reset server handlers
-		server.resetHandlers();
-	});
-
-	// Currently this is the only test we can run without the provider
-	it('should not render when isOpen is false', () => {
-		render(<BuyModal />);
-
-		expect(screen.queryByText('Loading Sequence Pay')).not.toBeInTheDocument();
-		expect(screen.queryByText('Checkout')).not.toBeInTheDocument();
-		expect(screen.queryByText('Select Quantity')).not.toBeInTheDocument();
-	});
-
-	it.skip('should render error modal when there is an error', async () => {
-		// server.use(
-		//   http.post(mockMetadataEndpoint("GetContractInfo"), () => {
-		//     return new HttpResponse(null, {
-		//       status: 404,
-		//     })
-		//   }),
-		// );
-		// buyModalStore.send({
-		//   type: 'open',
-		//   props: {
-		//     orderId: mockOrder.orderId,
-		//     chainId: mockOrder.chainId,
-		//     collectionAddress: mockOrder.collectionContractAddress as Address,
-		//     collectibleId: "1",
-		//     marketplace: mockOrder.marketplace,
-		//   },
-		// });
-		// render(
-		//   <BuyModal />
-		// );
-		// // Should show error modal
-		// await waitFor(() => {
-		//   expect(screen.getByText("Error")).toBeInTheDocument();
-		// }, { timeout: 1000 });
-	});
-
-	it.skip('should render ERC1155QuantityModal when contract type is ERC1155', async () => {
-		// // Create an ERC1155 mock collection
-		// const erc1155Collection = {
-		//   ...mockCollection,
-		//   contractType: ContractType.ERC1155,
-		// };
-		// const erc1155Order = {
-		//   ...testOrder,
-		//   quantityRemaining: "10",
-		//   quantityRemainingFormatted: "10",
-		// };
-		// buyModalStore.send({
-		//   type: 'open',
-		//   props: {
-		//     orderId: erc1155Order.orderId,
-		//     chainId: erc1155Order.chainId,
-		//     collectionAddress: erc1155Order.collectionContractAddress,
-		//     collectibleId: erc1155Order.tokenId,
-		//     marketplace: erc1155Order.marketplace,
-		//   },
-		// });
-		// render(<BuyModal />);
-		// // First should show loading
-		// expect(screen.getByText("Loading Sequence Pay")).toBeInTheDocument();
-		// // Then should show quantity modal for ERC1155
-		// await waitFor(() => {
-		//   expect(screen.getByText("Select Quantity")).toBeInTheDocument();
-		// }, { timeout: 5000 });
-	});
-
-	it('should show loading modal', async () => {
-		buyModalStore.send({
-			type: 'open',
-			props: {
-				orderId: mockOrder.orderId,
-				chainId: mockOrder.chainId,
-				collectionAddress: mockOrder.collectionContractAddress as Address,
-				collectibleId: '1',
-				marketplace: mockOrder.marketplace,
-			},
-		});
-
-		render(<BuyModal />);
-
-		// Should show loading modal
-		expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
-	});
-});

package/src/react/ui/modals/BuyModal/hooks/useFees.ts

@@ -1,38 +0,0 @@
-import { avalanche, optimism } from 'viem/chains';
-import type { AdditionalFee } from '../../../../_internal';
-import { useMarketplaceConfig } from '../../../../hooks';
-
-export const useFees = ({
-	chainId,
-	collectionAddress,
-}: {
-	chainId: number;
-	collectionAddress: string;
-}) => {
-	const defaultFee = 2.5;
-	const defaultPlatformFeeRecipient =
-		'0x858dB1cbF6D09D447C96A11603189b49B2D1C219';
-	const avalancheAndOptimismPlatformFeeRecipient =
-		'0x400cdab4676c17aec07e8ec748a5fc3b674bca41';
-	const { data: marketplaceConfig } = useMarketplaceConfig();
-
-	const collection = marketplaceConfig?.collections.find(
-		(collection) =>
-			collection.address.toLowerCase() === collectionAddress.toLowerCase() &&
-			chainId === Number(collection.chainId),
-	);
-
-	const avalancheOrOptimism =
-		chainId === avalanche.id || chainId === optimism.id;
-	const receiver = avalancheOrOptimism
-		? avalancheAndOptimismPlatformFeeRecipient
-		: defaultPlatformFeeRecipient;
-
-	const percentageToBPS = (percentage: string | number) =>
-		(Number(percentage) * 10000) / 100;
-
-	return {
-		amount: percentageToBPS(collection?.feePercentage || defaultFee).toString(),
-		receiver,
-	} satisfies AdditionalFee;
-};

package/src/react/ui/modals/SuccessfulPurchaseModal/_store.ts

@@ -1,72 +0,0 @@
-import type { IconProps } from '@0xsequence/design-system';
-import { observable } from '@legendapp/state';
-import type { ComponentType } from 'react';
-import type { TokenMetadata } from '../../../_internal';
-import type { ModalCallbacks } from '../_internal/types';
-
-export interface SuccessfulPurchaseModalState {
-	isOpen: boolean;
-	open: (
-		args: SuccessfulPurchaseModalState['state'] & {
-			callbacks?: ModalCallbacks;
-			defaultCallbacks?: ModalCallbacks;
-		},
-	) => void;
-	close: () => void;
-	state: {
-		collectibles: TokenMetadata[];
-		totalPrice: string;
-		explorerName: string;
-		explorerUrl: string;
-		ctaOptions?: {
-			ctaLabel: string;
-			ctaOnClick: () => void;
-			ctaIcon?: ComponentType<IconProps>;
-		};
-	};
-	callbacks?: ModalCallbacks;
-}
-
-const initialState: SuccessfulPurchaseModalState = {
-	isOpen: false,
-	open: ({
-		collectibles,
-		totalPrice,
-		explorerName,
-		explorerUrl,
-		ctaOptions,
-		callbacks,
-		defaultCallbacks,
-	}: SuccessfulPurchaseModalState['state'] & {
-		callbacks?: ModalCallbacks;
-		defaultCallbacks?: ModalCallbacks;
-	}) => {
-		successfulPurchaseModal$.state.set({
-			...successfulPurchaseModal$.state.get(),
-			collectibles,
-			totalPrice,
-			explorerName,
-			explorerUrl: explorerUrl,
-			ctaOptions,
-		});
-		successfulPurchaseModal$.callbacks.set(callbacks || defaultCallbacks);
-		successfulPurchaseModal$.isOpen.set(true);
-	},
-	close: () => {
-		successfulPurchaseModal$.isOpen.set(false);
-		successfulPurchaseModal$.callbacks.set(undefined);
-		successfulPurchaseModal$.state.set({
-			...initialState.state,
-		});
-	},
-	state: {
-		collectibles: [],
-		totalPrice: '0',
-		explorerName: '',
-		explorerUrl: '',
-		ctaOptions: undefined,
-	},
-	callbacks: undefined,
-};
-
-export const successfulPurchaseModal$ = observable(initialState);