@0xsequence/marketplace-sdk 0.9.0 → 0.10.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/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

@@ -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,
 		});
 	});
 

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/ERC1155QuantityModal.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { Text, TokenImage } from '@0xsequence/design-system';
-import { use$, useObservable } from '@legendapp/state/react';
+import { useState } from 'react';
 import type { Address } from 'viem';
+import { maxUint256 } from 'viem';
 import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../../consts';
 import type { MarketplaceType } from '../../../../../types';
 import { formatPriceWithFee } from '../../../../../utils/price';
@@ -12,11 +13,14 @@ import { ActionModal } from '../../_internal/components/actionModal';
 import QuantityInput from '../../_internal/components/quantityInput';
 import { buyModalStore, useIsOpen } from '../store';
 
+const INFINITY_STRING = maxUint256.toString();
+
 type ERC1155QuantityModalProps = {
 	order?: Order;
 	marketplaceType: MarketplaceType;
 	quantityDecimals: number;
 	quantityRemaining: string;
+	unlimitedSupply?: boolean;
 	salePrice?: {
 		amount: string;
 		currencyAddress: Address;
@@ -28,16 +32,17 @@ export const ERC1155QuantityModal = ({
 	order,
 	quantityDecimals,
 	quantityRemaining,
+	unlimitedSupply,
 	salePrice,
 	chainId,
 	marketplaceType,
 }: ERC1155QuantityModalProps) => {
 	const isOpen = useIsOpen();
 
-	const localQuantity$ = useObservable('1');
-	const localQuantity = use$(localQuantity$);
-	const invalidQuantity$ = useObservable(false);
-	const invalidQuantity = use$(invalidQuantity$);
+	const [localQuantity, setLocalQuantity] = useState('1');
+	const [invalidQuantity, setInvalidQuantity] = useState(false);
+
+	const maxQuantity = unlimitedSupply ? INFINITY_STRING : quantityRemaining;
 
 	return (
 		<ActionModal
@@ -61,10 +66,12 @@ export const ERC1155QuantityModal = ({
 		>
 			<div className="flex w-full flex-col gap-4">
 				<QuantityInput
-					$quantity={localQuantity$}
-					$invalidQuantity={invalidQuantity$}
+					quantity={localQuantity}
+					invalidQuantity={invalidQuantity}
+					onQuantityChange={setLocalQuantity}
+					onInvalidQuantityChange={setInvalidQuantity}
 					decimals={quantityDecimals}
-					maxQuantity={quantityRemaining}
+					maxQuantity={maxQuantity}
 				/>
 
 				<TotalPrice

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

@@ -37,6 +37,8 @@ export const ERC1155ShopModal = ({
 		isShop && modalProps.quantityRemaining
 			? modalProps.quantityRemaining.toString()
 			: '0';
+	const unlimitedSupply =
+		isShop && modalProps.unlimitedSupply ? modalProps.unlimitedSupply : false;
 
 	if (!quantity) {
 		return (
@@ -49,6 +51,7 @@ export const ERC1155ShopModal = ({
 				marketplaceType="shop"
 				quantityDecimals={quantityDecimals}
 				quantityRemaining={quantityRemaining}
+				unlimitedSupply={unlimitedSupply}
 				chainId={chainId}
 			/>
 		);

package/src/react/ui/modals/BuyModal/hooks/__tests__/useERC1155Checkout.test.tsx

@@ -32,6 +32,7 @@ vi.mock('../../store', () => ({
 	useQuantity: vi.fn(() => 2),
 	useOnSuccess: vi.fn(() => vi.fn()),
 	useOnError: vi.fn(() => vi.fn()),
+	useBuyAnalyticsId: vi.fn(() => '123'),
 	buyModalStore: {
 		send: vi.fn(),
 	},
@@ -87,36 +88,38 @@ describe('useERC1155Checkout', () => {
 		expect(
 			mockUseERC1155SaleContractCheckout.mock.calls,
 		).toMatchInlineSnapshot(`
-      [
         [
-          {
-            "chain": 1,
-            "checkoutOptions": {
-              "crypto": "all",
-              "nftCheckout": [],
-              "onRamp": [],
-              "swap": [],
-            },
-            "collectionAddress": "0x123",
-            "contractAddress": "0x456",
-            "customProviderCallback": undefined,
-            "items": [
-              {
-                "quantity": "2",
-                "tokenId": "1",
+          [
+            {
+              "chain": 1,
+              "chainId": "1",
+              "checkoutOptions": {
+                "crypto": "all",
+                "nftCheckout": [],
+                "onRamp": [],
+                "swap": [],
+              },
+              "collectionAddress": "0x123",
+              "contractAddress": "0x456",
+              "customProviderCallback": undefined,
+              "items": [
+                {
+                  "quantity": "2",
+                  "tokenId": "1",
+                },
+              ],
+              "onClose": [Function],
+              "onError": [Function],
+              "onSuccess": [Function],
+              "supplementaryAnalyticsInfo": {
+                "marketplaceType": "shop",
+                "saleAnalyticsId": "123",
               },
-            ],
-            "onClose": [Function],
-            "onError": [Function],
-            "onSuccess": [Function],
-            "supplementaryAnalyticsInfo": {
-              "type": "mint_shop",
+              "wallet": "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266",
             },
-            "wallet": "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266",
-          },
-        ],
-      ]
-    `);
+          ],
+        ]
+      `);
 
 		expect(result.current.isEnabled).toBe(true);
 	});

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

@@ -1,5 +1,5 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import {
 	getMarketplaceClient,
 	type MarketplaceKind,
@@ -10,7 +10,7 @@ import { useMarketPlatformFee } from './useMarketPlatformFee';
 
 export type CheckoutOptionsParams = {
 	chainId: number;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	orderId: string;
 	marketplace: MarketplaceKind;
 };

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

@@ -6,7 +6,13 @@ import type {
 	CheckoutOptionsItem,
 } from '../../../../_internal';
 import { getQueryClient } from '../../../../_internal';
-import { buyModalStore, useOnError, useOnSuccess, useQuantity } from '../store';
+import {
+	buyModalStore,
+	useBuyAnalyticsId,
+	useOnError,
+	useOnSuccess,
+	useQuantity,
+} from '../store';
 
 interface UseERC1155CheckoutParams {
 	chainId: number;
@@ -35,9 +41,11 @@ export const useERC1155Checkout = ({
 	const quantity = useQuantity();
 	const onSuccess = useOnSuccess();
 	const onError = useOnError();
+	const saleAnalyticsId = useBuyAnalyticsId();
 
 	const checkout = useERC1155SaleContractCheckout({
 		chain: chainId,
+		chainId: chainId.toString(),
 		contractAddress: salesContractAddress,
 		collectionAddress,
 		items: [
@@ -62,7 +70,8 @@ export const useERC1155Checkout = ({
 		},
 		customProviderCallback,
 		supplementaryAnalyticsInfo: {
-			type: 'mint_shop',
+			marketplaceType: 'shop',
+			saleAnalyticsId,
 		},
 	});
 

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

@@ -112,7 +112,7 @@ export const getERC721SalePaymentParams = async ({
 			},
 			skipNativeBalanceCheck,
 			supplementaryAnalyticsInfo: {
-				type: 'mint_shop',
+				marketplaceType: 'shop',
 			},
 			nativeTokenAddress,
 			...(customCreditCardProviderCallback && {

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

@@ -20,6 +20,7 @@ import type { ModalCallbacks } from '../../_internal/types';
 import {
 	buyModalStore,
 	isMarketProps,
+	useBuyAnalyticsId,
 	useBuyModalProps,
 	useOnError,
 	useOnSuccess,
@@ -43,6 +44,7 @@ interface GetBuyCollectableParams {
 	customCreditCardProviderCallback: ((buyStep: Step) => void) | undefined;
 	skipNativeBalanceCheck: boolean | undefined;
 	nativeTokenAddress: string | undefined;
+	buyAnalyticsId: string;
 }
 
 export const getBuyCollectableParams = async ({
@@ -62,6 +64,7 @@ export const getBuyCollectableParams = async ({
 	fee,
 	skipNativeBalanceCheck,
 	nativeTokenAddress,
+	buyAnalyticsId,
 }: GetBuyCollectableParams) => {
 	const marketplaceClient = getMarketplaceClient(config);
 	const { steps } = await marketplaceClient.generateBuyTransaction({
@@ -137,6 +140,8 @@ export const getBuyCollectableParams = async ({
 		supplementaryAnalyticsInfo: {
 			requestId: orderId,
 			marketplaceKind: marketplace,
+			buyAnalyticsId,
+			marketplaceType: 'market',
 		},
 		onError: callbacks?.onError,
 		onClose: () => {
@@ -209,6 +214,7 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 	);
 	const onSuccess = useOnSuccess();
 	const onError = useOnError();
+	const buyAnalyticsId = useBuyAnalyticsId();
 
 	const queryEnabled =
 		!!wallet &&
@@ -243,6 +249,7 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 						customCreditCardProviderCallback,
 						skipNativeBalanceCheck,
 						nativeTokenAddress,
+						buyAnalyticsId,
 					})
 			: skipToken,
 	});

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

@@ -1,10 +1,18 @@
+import { useAnalytics } from '../../../_internal/databeat';
 import type { ModalCallbacks } from '../_internal/types';
 import { type BuyModalProps, buyModalStore } from './store';
 
 export const useBuyModal = (callbacks?: ModalCallbacks) => {
+	const analyticsFn = useAnalytics();
+
 	return {
 		show: (args: BuyModalProps) =>
-			buyModalStore.send({ type: 'open', props: args, ...callbacks }),
+			buyModalStore.send({
+				type: 'open',
+				props: args,
+				...callbacks,
+				analyticsFn,
+			}),
 		close: () => buyModalStore.send({ type: 'close' }),
 	};
 };