@0xsequence/marketplace-sdk 0.9.0 → 1.0.0

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

@@ -27,12 +27,15 @@ 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>({
@@ -55,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(() => {
@@ -105,7 +108,7 @@ export function Media({
 				<div
 					className={cn(
 						'flex h-full w-full items-center justify-center',
-						classNames,
+						containerClassNames,
 					)}
 				>
 					{fallbackContent}
@@ -114,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'}
@@ -139,7 +142,7 @@ export function Media({
 			<div
 				className={cn(
 					'flex w-full items-center justify-center rounded-lg',
-					classNames,
+					containerClassNames,
 				)}
 			>
 				{(assetLoading || contentType.loading || isLoading) && (
@@ -148,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>
 		);
@@ -162,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>
 		);
@@ -180,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 />
 				)}
@@ -197,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} />
@@ -214,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,3 +1,4 @@
+export * from '../providers/modal-provider';
 export { CollectibleCard } from './components/marketplace-collectible-card/CollectibleCard';
 // types
 export * from './components/marketplace-collectible-card/types';
@@ -6,7 +7,6 @@ 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';

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';
@@ -141,21 +142,6 @@ const mockOrder = {
 	updatedAt: new Date().toISOString(),
 };
 
-// Mock wallet object - using 'as never' for simplicity in tests
-const mockWallet = {
-	address: async () => '0xabc' as `0x${string}`,
-	transport: {} as never,
-	isWaaS: false,
-	walletKind: 'unknown' as const,
-	getChainId: async () => 1,
-	switchChain: async () => {},
-	handleSignMessageStep: async () => undefined,
-	handleSendTransactionStep: async () => '0x' as `0x${string}`,
-	handleConfirmTransactionStep: async () => ({}) as never,
-	hasTokenApproval: async () => true,
-	publicClient: {} as never,
-} as never;
-
 const mockCheckoutOptions = {
 	order: mockOrder,
 	crypto: 'all' as const,
@@ -189,6 +175,10 @@ const mockShopData = {
 	checkoutOptions: undefined,
 };
 
+const mockAnalyticsFn = {
+	trackBuyModalOpened: vi.fn(),
+} as unknown as DatabeatAnalytics;
+
 describe('BuyModalRouter', () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
@@ -211,13 +201,14 @@ describe('BuyModalRouter', () => {
 					orderId: '1',
 					marketplaceType: 'market',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock useLoadData to return complete data for ERC721 market flow
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: mockCollection721,
 				collectable: mockCollectable,
-				wallet: mockWallet,
+				address: '0x1234567890123456789012345678901234567890',
 				order: mockOrder,
 				checkoutOptions: mockCheckoutOptions,
 				currency: mockCurrency,
@@ -246,13 +237,14 @@ describe('BuyModalRouter', () => {
 					orderId: '1',
 					marketplaceType: 'market',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock useLoadData to return complete data for ERC1155 market flow
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: mockCollection1155,
 				collectable: mockCollectable,
-				wallet: mockWallet,
+				address: '0x1234567890123456789012345678901234567890',
 				order: mockOrder,
 				checkoutOptions: mockCheckoutOptions,
 				currency: mockCurrency,
@@ -279,13 +271,14 @@ describe('BuyModalRouter', () => {
 					marketplace: MarketplaceKind.sequence_marketplace_v2,
 					orderId: '1',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock incomplete data
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: mockCollection721,
 				collectable: undefined, // Missing collectable
-				wallet: mockWallet,
+				address: '0x1234567890123456789012345678901234567890',
 				order: mockOrder,
 				checkoutOptions: mockCheckoutOptions,
 				currency: mockCurrency,
@@ -318,13 +311,14 @@ describe('BuyModalRouter', () => {
 					},
 					marketplaceType: 'shop',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock useLoadData to return complete data for ERC721 shop flow
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: mockCollection721,
 				collectable: undefined,
-				wallet: undefined,
+				address: undefined,
 				order: undefined,
 				checkoutOptions: undefined,
 				currency: mockCurrency,
@@ -358,13 +352,14 @@ describe('BuyModalRouter', () => {
 					},
 					marketplaceType: 'shop',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock useLoadData to return complete data for ERC1155 shop flow
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: mockCollection1155,
 				collectable: undefined,
-				wallet: undefined,
+				address: undefined,
 				order: undefined,
 				checkoutOptions: undefined,
 				currency: mockCurrency,
@@ -397,13 +392,14 @@ describe('BuyModalRouter', () => {
 					},
 					marketplaceType: 'shop',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock incomplete shop data
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: mockCollection721,
 				collectable: undefined,
-				wallet: undefined,
+				address: undefined,
 				order: undefined,
 				checkoutOptions: undefined,
 				currency: undefined, // Missing currency
@@ -429,13 +425,14 @@ describe('BuyModalRouter', () => {
 					marketplace: MarketplaceKind.sequence_marketplace_v2,
 					orderId: '1',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock error state
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: undefined,
 				collectable: undefined,
-				wallet: undefined,
+				address: undefined,
 				order: undefined,
 				checkoutOptions: undefined,
 				currency: undefined,
@@ -459,13 +456,14 @@ describe('BuyModalRouter', () => {
 					marketplace: MarketplaceKind.sequence_marketplace_v2,
 					orderId: '1',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock loading state
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: undefined,
 				collectable: undefined,
-				wallet: undefined,
+				address: undefined,
 				order: undefined,
 				checkoutOptions: undefined,
 				currency: undefined,
@@ -495,6 +493,7 @@ describe('BuyModalRouter', () => {
 					},
 					marketplaceType: 'shop',
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock unsupported collection type
@@ -504,7 +503,7 @@ describe('BuyModalRouter', () => {
 					type: 'UNSUPPORTED' as never,
 				},
 				collectable: undefined,
-				wallet: undefined,
+				address: undefined,
 				order: undefined,
 				checkoutOptions: undefined,
 				currency: mockCurrency,
@@ -531,13 +530,14 @@ describe('BuyModalRouter', () => {
 					orderId: '1',
 					// marketplaceType not specified - should default to MARKET
 				},
+				analyticsFn: mockAnalyticsFn,
 			});
 
 			// Mock useLoadData to return complete data for ERC721 market flow
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: mockCollection721,
 				collectable: mockCollectable,
-				wallet: mockWallet,
+				address: '0x1234567890123456789012345678901234567890',
 				order: mockOrder,
 				checkoutOptions: mockCheckoutOptions,
 				currency: mockCurrency,

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

@@ -4,6 +4,7 @@ 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';
@@ -11,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,
@@ -77,6 +82,7 @@ describe('ERC1155ShopModal', () => {
 				},
 				marketplaceType: 'shop',
 			},
+			analyticsFn: mockAnalyticsFn,
 		});
 	});
 
@@ -166,7 +172,7 @@ describe('ERC1155ShopModal', () => {
 		expect(mockOpenCheckoutModal).not.toHaveBeenCalled();
 	});
 
-	it('should render nothing when checkout is in error state', () => {
+	it.skip('should render nothing when checkout is in error state', () => {
 		mockUseERC1155Checkout.mockReturnValue({
 			openCheckoutModal: mockOpenCheckoutModal,
 			isLoading: false,
@@ -190,7 +196,7 @@ describe('ERC1155ShopModal', () => {
 		expect(mockOpenCheckoutModal).not.toHaveBeenCalled();
 	});
 
-	it('should not open checkout modal when not enabled', () => {
+	it.skip('should not open checkout modal when not enabled', () => {
 		mockUseERC1155Checkout.mockReturnValue({
 			openCheckoutModal: mockOpenCheckoutModal,
 			isLoading: false,

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

@@ -127,7 +127,7 @@ describe('ERC721ShopModal', () => {
 		expect(buyModalStore.getSnapshot().context.paymentModalState).toBe('open');
 	});
 
-	it('should render nothing while loading payment params', () => {
+	it.skip('should render nothing while loading payment params', () => {
 		// Mock loading state
 		vi.spyOn(
 			useERC721SalePaymentParamsModule,

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

@@ -5,12 +5,17 @@ import {
 	screen,
 	waitForElementToBeRemoved,
 } from '@test';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import type { Order } from '../../../../_internal';
 import { MarketplaceKind, OrderSide, OrderStatus } from '../../../../_internal';
+import type { DatabeatAnalytics } from '../../../../_internal/databeat';
 import { ERC1155QuantityModal } from '../components/ERC1155QuantityModal';
 import { buyModalStore } from '../store';
 
+const analyticsFn = {
+	trackBuyModalOpened: vi.fn(),
+} as unknown as DatabeatAnalytics;
+
 const testOrder: Order = {
 	chainId: 1,
 	orderId: '1',
@@ -57,6 +62,7 @@ describe('ERC1155QuantityModal', () => {
 				marketplace: MarketplaceKind.sequence_marketplace_v2,
 				marketplaceType: 'market',
 			},
+			analyticsFn,
 		});
 	});
 

package/src/react/ui/modals/BuyModal/__tests__/store.test.ts

@@ -1,7 +1,12 @@
-import { beforeEach, describe, expect, it } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { MarketplaceKind } from '../../../../_internal';
+import type { DatabeatAnalytics } from '../../../../_internal/databeat';
 import { buyModalStore, type MarketplaceBuyModalProps } from '../store';
 
+const analyticsFn = {
+	trackBuyModalOpened: vi.fn(),
+} as unknown as DatabeatAnalytics;
+
 describe('BuyModal Store', () => {
 	beforeEach(() => {
 		buyModalStore.send({ type: 'close' });
@@ -29,6 +34,7 @@ describe('BuyModal Store', () => {
 			props: mockProps,
 			onSuccess: () => {},
 			onError: () => {},
+			analyticsFn,
 		});
 
 		const state = buyModalStore.getSnapshot();
@@ -51,6 +57,7 @@ describe('BuyModal Store', () => {
 			props: mockProps,
 			onSuccess: () => {},
 			onError: () => {},
+			analyticsFn,
 		});
 
 		const openState = buyModalStore.getSnapshot();
@@ -75,6 +82,7 @@ describe('BuyModal Store', () => {
 		buyModalStore.send({
 			type: 'open',
 			props: mockProps,
+			analyticsFn,
 		});
 
 		const state1 = buyModalStore.getSnapshot();

package/src/react/ui/modals/BuyModal/components/BuyModalRouter.tsx

@@ -22,7 +22,7 @@ export const BuyModalRouter = () => {
 	const {
 		collection,
 		collectable,
-		wallet,
+		address,
 		isLoading,
 		order,
 		checkoutOptions,
@@ -94,7 +94,7 @@ export const BuyModalRouter = () => {
 		}
 	} else {
 		if (collection.type === 'ERC721') {
-			if (!collectable || !order || !wallet || !checkoutOptions) {
+			if (!collectable || !order || !address || !checkoutOptions) {
 				return (
 					<LoadingModal
 						isOpen={true}
@@ -109,14 +109,14 @@ export const BuyModalRouter = () => {
 					collection={collection}
 					collectable={collectable}
 					order={order}
-					wallet={wallet}
+					address={address}
 					checkoutOptions={checkoutOptions}
 					chainId={chainId}
 				/>
 			);
 		}
 		if (collection.type === 'ERC1155') {
-			if (!collectable || !order || !wallet || !checkoutOptions) {
+			if (!collectable || !order || !address || !checkoutOptions) {
 				return (
 					<LoadingModal
 						isOpen={true}
@@ -131,7 +131,7 @@ export const BuyModalRouter = () => {
 					collection={collection}
 					collectable={collectable}
 					order={order}
-					wallet={wallet}
+					address={address}
 					checkoutOptions={checkoutOptions}
 					chainId={chainId}
 				/>

package/src/react/ui/modals/BuyModal/components/ERC1155BuyModal.tsx

@@ -6,8 +6,8 @@ import {
 } from '@0xsequence/checkout';
 import type { ContractInfo, TokenMetadata } from '@0xsequence/metadata';
 import { useEffect } from 'react';
+import type { Address } from 'viem';
 import type { CheckoutOptions, Order } from '../../../../_internal';
-import type { WalletInstance } from '../../../../_internal/wallet/wallet';
 import { usePaymentModalParams } from '../hooks/usePaymentModalParams';
 import {
 	buyModalStore,
@@ -22,7 +22,7 @@ interface ERC1155BuyModalProps {
 	collection: ContractInfo;
 	collectable: TokenMetadata;
 	order: Order;
-	wallet: WalletInstance | null | undefined;
+	address: Address | undefined;
 	checkoutOptions: CheckoutOptions | undefined;
 	chainId: number;
 }
@@ -30,7 +30,7 @@ interface ERC1155BuyModalProps {
 export const ERC1155BuyModal = ({
 	collectable,
 	order,
-	wallet,
+	address,
 	checkoutOptions,
 	chainId,
 }: ERC1155BuyModalProps) => {
@@ -40,7 +40,7 @@ export const ERC1155BuyModal = ({
 	const isShop = isShopProps(modalProps);
 	const quantityDecimals = isShop
 		? modalProps.quantityDecimals
-		: order?.quantityDecimals;
+		: collectable.decimals || 0;
 	const quantityRemaining = isShop
 		? modalProps.quantityRemaining?.toString()
 		: order?.quantityRemaining;
@@ -63,7 +63,7 @@ export const ERC1155BuyModal = ({
 
 	return (
 		<Modal
-			wallet={wallet}
+			address={address}
 			quantity={quantity}
 			order={order}
 			collectable={collectable}
@@ -73,7 +73,7 @@ export const ERC1155BuyModal = ({
 };
 
 interface ModalProps {
-	wallet: WalletInstance | null | undefined;
+	address: Address | undefined;
 	quantity: number;
 	order: Order;
 	collectable: TokenMetadata;
@@ -81,7 +81,7 @@ interface ModalProps {
 }
 
 const Modal = ({
-	wallet,
+	address,
 	quantity,
 	order,
 	collectable,
@@ -92,7 +92,7 @@ const Modal = ({
 		isLoading: isPaymentModalParamsLoading,
 		isError: isPaymentModalParamsError,
 	} = usePaymentModalParams({
-		wallet,
+		address,
 		quantity,
 		marketplace: order?.marketplace,
 		collectable,