@0xsequence/marketplace-sdk 0.8.12 → 0.10.0

package/src/react/ui/components/media/Media.tsx

@@ -27,13 +27,17 @@ export function Media({
 	name,
 	assets,
 	assetSrcPrefixUrl,
-	className,
+	className = '',
+	containerClassName = '',
+	mediaClassname = '',
 	isLoading,
 	fallbackContent,
+	shouldListenForLoad = true,
 }: MediaProps) {
 	const [assetLoadFailed, setAssetLoadFailed] = useState(false);
-	const [assetLoading, setAssetLoading] = useState(true);
+	const [assetLoading, setAssetLoading] = useState(shouldListenForLoad);
 	const [currentAssetIndex, setCurrentAssetIndex] = useState(0);
+	const [isSafari, setIsSafari] = useState(false);
 	const [contentType, setContentType] = useState<ContentTypeState>({
 		type: null,
 		loading: true,
@@ -41,7 +45,10 @@ export function Media({
 	});
 
 	const videoRef = useRef<HTMLVideoElement>(null);
-	const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+	useEffect(() => {
+		setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));
+	}, []);
 
 	const validAssets = assets.filter((asset): asset is string => !!asset);
 	const assetUrl = validAssets[currentAssetIndex];
@@ -51,9 +58,9 @@ export function Media({
 			: assetUrl
 		: '';
 
-	const classNames = cn(
+	const containerClassNames = cn(
 		'relative aspect-square overflow-hidden bg-background-secondary',
-		className,
+		containerClassName || className,
 	);
 
 	useEffect(() => {
@@ -101,7 +108,7 @@ export function Media({
 				<div
 					className={cn(
 						'flex h-full w-full items-center justify-center',
-						classNames,
+						containerClassNames,
 					)}
 				>
 					{fallbackContent}
@@ -110,7 +117,7 @@ export function Media({
 		}
 
 		return (
-			<div className={cn('h-full w-full', classNames)}>
+			<div className={cn('h-full w-full', containerClassNames)}>
 				<img
 					src={ChessTileImage}
 					alt={name || 'Collectible'}
@@ -135,7 +142,7 @@ export function Media({
 			<div
 				className={cn(
 					'flex w-full items-center justify-center rounded-lg',
-					classNames,
+					containerClassNames,
 				)}
 			>
 				{(assetLoading || contentType.loading || isLoading) && (
@@ -144,13 +151,13 @@ export function Media({
 
 				<iframe
 					title={name || 'Collectible'}
-					className="aspect-square w-full"
+					className={cn('aspect-square w-full', mediaClassname)}
 					src={proxiedAssetUrl}
 					allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
 					sandbox="allow-scripts"
 					style={{ border: '0px' }}
-					onError={handleAssetError}
-					onLoad={handleAssetLoad}
+					onError={shouldListenForLoad ? handleAssetError : undefined}
+					onLoad={shouldListenForLoad ? handleAssetLoad : undefined}
 				/>
 			</div>
 		);
@@ -158,12 +165,12 @@ export function Media({
 
 	if (contentType.type === '3d-model' && !assetLoadFailed) {
 		return (
-			<div className={cn('h-full w-full', classNames)}>
+			<div className={cn('h-full w-full', containerClassNames)}>
 				<ModelViewer
 					src={proxiedAssetUrl}
 					posterSrc={ChessTileImage}
-					onLoad={handleAssetLoad}
-					onError={handleAssetError}
+					onLoad={shouldListenForLoad ? handleAssetLoad : undefined}
+					onError={shouldListenForLoad ? handleAssetError : undefined}
 				/>
 			</div>
 		);
@@ -176,10 +183,11 @@ export function Media({
 			// we can't hide the video controls in safari, when user hovers over the video they show up.
 			// `pointer-events-none` is the only way to hide them on hover
 			isSafari && 'pointer-events-none',
+			mediaClassname,
 		);
 
 		return (
-			<div className={classNames}>
+			<div className={containerClassNames}>
 				{(assetLoading || contentType.loading || isLoading) && (
 					<MediaSkeleton />
 				)}
@@ -193,8 +201,8 @@ export function Media({
 					playsInline
 					muted
 					controlsList="nodownload noremoteplayback nofullscreen"
-					onError={handleAssetError}
-					onLoadedMetadata={handleAssetLoad}
+					onError={shouldListenForLoad ? handleAssetError : undefined}
+					onLoadedMetadata={shouldListenForLoad ? handleAssetLoad : undefined}
 					data-testid="collectible-asset-video"
 				>
 					<source src={proxiedAssetUrl} />
@@ -210,18 +218,19 @@ export function Media({
 	const imgClassNames = cn(
 		'absolute inset-0 h-full w-full object-cover transition-transform duration-200 ease-in-out group-hover:scale-hover',
 		assetLoading || contentType.loading || isLoading ? 'invisible' : 'visible',
+		mediaClassname,
 	);
 
 	return (
-		<div className={classNames}>
+		<div className={containerClassNames}>
 			{(assetLoading || contentType.loading || isLoading) && <MediaSkeleton />}
 
 			<img
 				src={imgSrc}
 				alt={name || 'Collectible'}
 				className={imgClassNames}
-				onError={handleAssetError}
-				onLoad={handleAssetLoad}
+				onError={shouldListenForLoad ? handleAssetError : undefined}
+				onLoad={shouldListenForLoad ? handleAssetLoad : undefined}
 			/>
 		</div>
 	);

package/src/react/ui/components/media/types.ts

@@ -12,9 +12,15 @@ type MediaProps = {
 	name?: string;
 	assets: (string | undefined)[];
 	assetSrcPrefixUrl?: string;
+	/**
+	 * @deprecated Use containerClassName instead
+	 */
 	className?: string;
+	containerClassName?: string;
+	mediaClassname?: string;
 	isLoading?: boolean;
 	fallbackContent?: ReactNode;
+	shouldListenForLoad?: boolean;
 };
 
 export type { ContentType, ContentTypeState, MediaProps };

package/src/react/ui/index.ts

@@ -1,14 +1,12 @@
-export * from './modals/modal-provider';
+export { CollectibleCard } from './components/marketplace-collectible-card/CollectibleCard';
+// types
+export * from './components/marketplace-collectible-card/types';
+// components
+export { Media } from './components/media/Media';
+export { useBuyModal } from './modals/BuyModal';
 export { useCreateListingModal } from './modals/CreateListingModal';
 export { useMakeOfferModal } from './modals/MakeOfferModal';
+export * from './modals/modal-provider';
+export { useSellModal } from './modals/SellModal';
 export { useSuccessfulPurchaseModal } from './modals/SuccessfulPurchaseModal';
 export { useTransferModal } from './modals/TransferModal';
-export { useSellModal } from './modals/SellModal';
-export { useBuyModal } from './modals/BuyModal';
-
-// components
-export { Media } from './components/media/Media';
-export { CollectibleCard } from './components/marketplace-collectible-card/CollectibleCard';
-
-// types
-export * from './components/marketplace-collectible-card/types';

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

@@ -7,6 +7,7 @@ import {
 	OrderSide,
 	OrderStatus,
 } from '../../../../_internal';
+import type { DatabeatAnalytics } from '../../../../_internal/databeat';
 import { BuyModalRouter } from '../components/BuyModalRouter';
 import * as useLoadDataModule from '../hooks/useLoadData';
 import { buyModalStore } from '../store';
@@ -189,6 +190,10 @@ const mockShopData = {
 	checkoutOptions: undefined,
 };
 
+const mockAnalyticsFn = {
+	trackBuyModalOpened: vi.fn(),
+} as unknown as DatabeatAnalytics;
+
 describe('BuyModalRouter', () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
@@ -211,6 +216,7 @@ describe('BuyModalRouter', () => {
 					orderId: '1',
 					marketplaceType: 'market',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock useLoadData to return complete data for ERC721 market flow
@@ -246,6 +252,7 @@ describe('BuyModalRouter', () => {
 					orderId: '1',
 					marketplaceType: 'market',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock useLoadData to return complete data for ERC1155 market flow
@@ -279,6 +286,7 @@ describe('BuyModalRouter', () => {
 					marketplace: MarketplaceKind.sequence_marketplace_v2,
 					orderId: '1',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock incomplete data
@@ -318,6 +326,7 @@ describe('BuyModalRouter', () => {
 					},
 					marketplaceType: 'shop',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock useLoadData to return complete data for ERC721 shop flow
@@ -358,6 +367,7 @@ describe('BuyModalRouter', () => {
 					},
 					marketplaceType: 'shop',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock useLoadData to return complete data for ERC1155 shop flow
@@ -397,6 +407,7 @@ describe('BuyModalRouter', () => {
 					},
 					marketplaceType: 'shop',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock incomplete shop data
@@ -429,6 +440,7 @@ describe('BuyModalRouter', () => {
 					marketplace: MarketplaceKind.sequence_marketplace_v2,
 					orderId: '1',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock error state
@@ -459,6 +471,7 @@ describe('BuyModalRouter', () => {
 					marketplace: MarketplaceKind.sequence_marketplace_v2,
 					orderId: '1',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock loading state
@@ -495,6 +508,7 @@ describe('BuyModalRouter', () => {
 					},
 					marketplaceType: 'shop',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock unsupported collection type
@@ -531,6 +545,7 @@ describe('BuyModalRouter', () => {
 					orderId: '1',
 					// marketplaceType not specified - should default to MARKET
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock useLoadData to return complete data for ERC721 market flow

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

@@ -1,8 +1,10 @@
 import { ResourceStatus } from '@0xsequence/metadata';
 import { render, screen, waitFor } from '@test';
 import type { Address } from 'viem';
+import type { Mock, MockInstance } from 'vitest';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { TransactionCrypto } from '../../../../_internal';
+import type { DatabeatAnalytics } from '../../../../_internal/databeat';
 import { ERC1155ShopModal } from '../components/ERC1155ShopModal';
 import * as useERC1155CheckoutModule from '../hooks/useERC1155Checkout';
 import { buyModalStore } from '../store';
@@ -10,6 +12,10 @@ import { buyModalStore } from '../store';
 // Mock the checkout hook
 vi.mock('../hooks/useERC1155Checkout');
 
+const mockAnalyticsFn = {
+	trackBuyModalOpened: vi.fn(),
+} as unknown as DatabeatAnalytics;
+
 const mockCollection = {
 	address: '0x123' as Address,
 	chainId: 1,
@@ -45,9 +51,8 @@ const mockShopData = {
 };
 
 describe('ERC1155ShopModal', () => {
-	let mockOpenCheckoutModal: ReturnType<typeof vi.fn>;
-	// biome-ignore lint/suspicious/noExplicitAny: Required for mock typing in tests
-	let mockUseERC1155Checkout: any;
+	let mockOpenCheckoutModal: Mock;
+	let mockUseERC1155Checkout: MockInstance;
 
 	beforeEach(() => {
 		vi.clearAllMocks();
@@ -60,15 +65,61 @@ describe('ERC1155ShopModal', () => {
 			useERC1155CheckoutModule,
 			'useERC1155Checkout',
 		);
+
+		// Initialize BuyModal props
+		buyModalStore.send({
+			type: 'open',
+			props: {
+				chainId: 1,
+				collectionAddress: mockCollection.address,
+				salesContractAddress: mockShopData.salesContractAddress as Address,
+				items: mockShopData.items,
+				quantityDecimals: 0,
+				quantityRemaining: 10,
+				salePrice: {
+					amount: mockShopData.salePrice.amount,
+					currencyAddress: mockShopData.salePrice.currencyAddress as Address,
+				},
+				marketplaceType: 'shop',
+			},
+			analyticsFn: mockAnalyticsFn,
+		});
 	});
 
 	afterEach(() => {
 		vi.restoreAllMocks();
 	});
 
-	// TODO: Fix skipped tests
-	it.skip('should open checkout modal when data is loaded and enabled', async () => {
-		// Mock successful checkout hook
+	it('should show quantity modal initially', async () => {
+		mockUseERC1155Checkout.mockReturnValue({
+			openCheckoutModal: mockOpenCheckoutModal,
+			isLoading: false,
+			isError: false,
+			isEnabled: true,
+			checkoutParams: {} as never,
+		});
+
+		render(
+			<ERC1155ShopModal
+				collection={mockCollection}
+				shopData={mockShopData}
+				chainId={1}
+			/>,
+		);
+
+		expect(screen.getByText('Select Quantity')).toBeInTheDocument();
+
+		// Wait for loading state to finish
+		await waitFor(() => {
+			expect(
+				screen.getByRole('button', { name: 'Buy now' }),
+			).toBeInTheDocument();
+		});
+
+		expect(mockOpenCheckoutModal).not.toHaveBeenCalled();
+	});
+
+	it('should open checkout modal after quantity is selected', async () => {
 		mockUseERC1155Checkout.mockReturnValue({
 			openCheckoutModal: mockOpenCheckoutModal,
 			isLoading: false,
@@ -85,6 +136,9 @@ describe('ERC1155ShopModal', () => {
 			/>,
 		);
 
+		// Set quantity in store
+		buyModalStore.send({ type: 'setQuantity', quantity: 2 });
+
 		// Wait for checkout modal to be opened
 		await waitFor(() => {
 			expect(mockOpenCheckoutModal).toHaveBeenCalled();
@@ -94,8 +148,7 @@ describe('ERC1155ShopModal', () => {
 		expect(buyModalStore.getSnapshot().context.checkoutModalState).toBe('open');
 	});
 
-	it.skip('should show loading modal when checkout is loading', () => {
-		// Mock loading state
+	it('should show loading modal when checkout is loading', async () => {
 		mockUseERC1155Checkout.mockReturnValue({
 			openCheckoutModal: mockOpenCheckoutModal,
 			isLoading: true,
@@ -104,6 +157,9 @@ describe('ERC1155ShopModal', () => {
 			checkoutParams: {} as never,
 		});
 
+		// Set quantity in store before rendering
+		buyModalStore.send({ type: 'setQuantity', quantity: 2 });
+
 		render(
 			<ERC1155ShopModal
 				collection={mockCollection}
@@ -116,8 +172,7 @@ describe('ERC1155ShopModal', () => {
 		expect(mockOpenCheckoutModal).not.toHaveBeenCalled();
 	});
 
-	it.skip('should render nothing when checkout is in error state', () => {
-		// Mock error state
+	it('should render nothing when checkout is in error state', () => {
 		mockUseERC1155Checkout.mockReturnValue({
 			openCheckoutModal: mockOpenCheckoutModal,
 			isLoading: false,
@@ -126,6 +181,9 @@ describe('ERC1155ShopModal', () => {
 			checkoutParams: {} as never,
 		});
 
+		// Set quantity in store before rendering
+		buyModalStore.send({ type: 'setQuantity', quantity: 2 });
+
 		const { container } = render(
 			<ERC1155ShopModal
 				collection={mockCollection}
@@ -138,8 +196,7 @@ describe('ERC1155ShopModal', () => {
 		expect(mockOpenCheckoutModal).not.toHaveBeenCalled();
 	});
 
-	it.skip('should not open checkout modal when not enabled', () => {
-		// Mock disabled state
+	it('should not open checkout modal when not enabled', () => {
 		mockUseERC1155Checkout.mockReturnValue({
 			openCheckoutModal: mockOpenCheckoutModal,
 			isLoading: false,
@@ -148,6 +205,9 @@ describe('ERC1155ShopModal', () => {
 			checkoutParams: {} as never,
 		});
 
+		// Set quantity in store before rendering
+		buyModalStore.send({ type: 'setQuantity', quantity: 2 });
+
 		const { container } = render(
 			<ERC1155ShopModal
 				collection={mockCollection}
@@ -160,7 +220,7 @@ describe('ERC1155ShopModal', () => {
 		expect(mockOpenCheckoutModal).not.toHaveBeenCalled();
 	});
 
-	it.skip('should pass correct props to useERC1155Checkout hook', () => {
+	it('should pass correct props to useERC1155Checkout hook', () => {
 		mockUseERC1155Checkout.mockReturnValue({
 			openCheckoutModal: mockOpenCheckoutModal,
 			isLoading: false,
@@ -169,6 +229,9 @@ describe('ERC1155ShopModal', () => {
 			checkoutParams: {} as never,
 		});
 
+		// Set quantity in store before rendering
+		buyModalStore.send({ type: 'setQuantity', quantity: 2 });
+
 		render(
 			<ERC1155ShopModal
 				collection={mockCollection}
@@ -181,17 +244,17 @@ describe('ERC1155ShopModal', () => {
 			chainId: 1,
 			salesContractAddress: '0x456',
 			collectionAddress: '0x123',
-			items: [
-				{ tokenId: '1', quantity: '2' },
-				{ tokenId: '2', quantity: '1' },
-			],
+			items: mockShopData.items.map((item) => ({
+				...item,
+				quantity: '2', // This comes from the store's quantity
+			})),
 			checkoutOptions: mockShopData.checkoutOptions,
 			customProviderCallback: undefined,
 			enabled: true,
 		});
 	});
 
-	it.skip('should handle missing tokenId and quantity gracefully', () => {
+	it('should handle missing tokenId and quantity gracefully', () => {
 		const shopDataWithMissingProps = {
 			...mockShopData,
 			items: [
@@ -208,6 +271,9 @@ describe('ERC1155ShopModal', () => {
 			checkoutParams: {} as never,
 		});
 
+		// Set quantity in store before rendering
+		buyModalStore.send({ type: 'setQuantity', quantity: 2 });
+
 		render(
 			<ERC1155ShopModal
 				collection={mockCollection}
@@ -216,82 +282,21 @@ describe('ERC1155ShopModal', () => {
 			/>,
 		);
 
-		// Check that defaults were applied
 		expect(mockUseERC1155Checkout).toHaveBeenCalledWith({
 			chainId: 1,
 			salesContractAddress: '0x456',
 			collectionAddress: '0x123',
-			items: [
-				{ tokenId: '0', quantity: '1' },
-				{ tokenId: '2', quantity: '1' },
-			],
+			items: shopDataWithMissingProps.items.map((item) => ({
+				tokenId: item.tokenId ?? '0',
+				quantity: '2', // This comes from the store's quantity
+			})),
 			checkoutOptions: mockShopData.checkoutOptions,
 			customProviderCallback: undefined,
 			enabled: true,
 		});
 	});
 
-	it.skip('should disable checkout when sales contract address is missing', () => {
-		const shopDataWithoutContract = {
-			...mockShopData,
-			salesContractAddress: '',
-		};
-
-		mockUseERC1155Checkout.mockReturnValue({
-			openCheckoutModal: mockOpenCheckoutModal,
-			isLoading: false,
-			isError: false,
-			isEnabled: false,
-			checkoutParams: {} as never,
-		});
-
-		render(
-			<ERC1155ShopModal
-				collection={mockCollection}
-				shopData={shopDataWithoutContract}
-				chainId={1}
-			/>,
-		);
-
-		expect(mockUseERC1155Checkout).toHaveBeenCalledWith(
-			expect.objectContaining({
-				salesContractAddress: '',
-				enabled: false,
-			}),
-		);
-	});
-
-	it.skip('should pass empty items array to useERC1155Checkout when items array is empty', () => {
-		const shopDataWithoutItems = {
-			...mockShopData,
-			items: [],
-		};
-
-		mockUseERC1155Checkout.mockReturnValue({
-			openCheckoutModal: mockOpenCheckoutModal,
-			isLoading: false,
-			isError: false,
-			isEnabled: false,
-			checkoutParams: {} as never,
-		});
-
-		render(
-			<ERC1155ShopModal
-				collection={mockCollection}
-				shopData={shopDataWithoutItems}
-				chainId={1}
-			/>,
-		);
-
-		expect(mockUseERC1155Checkout).toHaveBeenCalledWith(
-			expect.objectContaining({
-				items: [],
-				enabled: true, // Component still passes true, but useERC1155Checkout can decide based on empty items
-			}),
-		);
-	});
-
-	it.skip('should only open checkout modal once when state is idle', async () => {
+	it('should only open checkout modal once when state is idle', async () => {
 		mockUseERC1155Checkout.mockReturnValue({
 			openCheckoutModal: mockOpenCheckoutModal,
 			isLoading: false,
@@ -300,6 +305,9 @@ describe('ERC1155ShopModal', () => {
 			checkoutParams: {} as never,
 		});
 
+		// Set quantity in store before rendering
+		buyModalStore.send({ type: 'setQuantity', quantity: 2 });
+
 		const { rerender } = render(
 			<ERC1155ShopModal
 				collection={mockCollection}
@@ -328,7 +336,7 @@ describe('ERC1155ShopModal', () => {
 		});
 	});
 
-	it.skip('should handle checkout options being undefined', () => {
+	it('should handle checkout options being undefined', () => {
 		const shopDataWithoutCheckoutOptions = {
 			...mockShopData,
 			checkoutOptions: undefined,
@@ -342,6 +350,9 @@ describe('ERC1155ShopModal', () => {
 			checkoutParams: {} as never,
 		});
 
+		// Set quantity in store before rendering
+		buyModalStore.send({ type: 'setQuantity', quantity: 2 });
+
 		render(
 			<ERC1155ShopModal
 				collection={mockCollection}
@@ -357,7 +368,7 @@ describe('ERC1155ShopModal', () => {
 		);
 	});
 
-	it.skip('should show loading modal with correct chain ID', () => {
+	it('should show loading modal with correct chain ID', () => {
 		mockUseERC1155Checkout.mockReturnValue({
 			openCheckoutModal: mockOpenCheckoutModal,
 			isLoading: true,
@@ -366,6 +377,9 @@ describe('ERC1155ShopModal', () => {
 			checkoutParams: {} as never,
 		});
 
+		// Set quantity in store before rendering
+		buyModalStore.send({ type: 'setQuantity', quantity: 2 });
+
 		render(
 			<ERC1155ShopModal
 				collection={mockCollection}
@@ -374,7 +388,6 @@ describe('ERC1155ShopModal', () => {
 			/>,
 		);
 
-		// Check that LoadingModal received the correct chainId prop
 		expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
 		expect(mockUseERC1155Checkout).toHaveBeenCalledWith(
 			expect.objectContaining({