@0xsequence/marketplace-sdk 0.8.6 → 0.8.8

package/src/react/hooks/__tests__/useListCollections.test.tsx

@@ -1,51 +1,20 @@
-import { ResourceStatus } from '@0xsequence/metadata';
 import { renderHook, server, waitFor } from '@test';
 import { http, HttpResponse } from 'msw';
 import { describe, expect, it } from 'vitest';
 import { MarketplaceType, OrderbookKind } from '../../../types';
-import { mockContractInfo } from '../../_internal/api/__mocks__/metadata.msw';
 import {
-	createConfigHandler,
+	createLookupMarketplaceConfigHandler,
 	mockConfig,
-} from '../options/__mocks__/marketplaceConfig.msw';
+} from '../../_internal/api/__mocks__/builder.msw';
+import {
+	mockEthCollection,
+	mockPolCollection,
+} from '../../_internal/api/__mocks__/metadata.msw';
 import { useListCollections } from '../useListCollections';
 
 describe('useListCollections', () => {
-	const defaultArgs = {
-		query: {
-			enabled: true,
-		},
-	};
-
 	it('should fetch collections successfully', async () => {
-		// Mock marketplace config with collection
-		server.use(
-			createConfigHandler({
-				...mockConfig,
-				collections: [
-					{
-						chainId: 1,
-						address:
-							'0x1234567890123456789012345678901234567890' as `0x${string}`,
-						feePercentage: 2.5,
-						marketplaceType: MarketplaceType.ORDERBOOK,
-						currencyOptions: [],
-						exchanges: [],
-						bannerUrl: '',
-						destinationMarketplace: OrderbookKind.sequence_marketplace_v2,
-					},
-				],
-			}),
-			http.post('*/rpc/Metadata/GetContractInfoBatch', () => {
-				return HttpResponse.json({
-					contractInfoMap: {
-						'0x1234567890123456789012345678901234567890': mockContractInfo,
-					},
-				});
-			}),
-		);
-
-		const { result } = renderHook(() => useListCollections(defaultArgs));
+		const { result } = renderHook(() => useListCollections());
 
 		// Wait for data to be loaded
 		await waitFor(() => {
@@ -53,20 +22,20 @@ describe('useListCollections', () => {
 		});
 
 		// Verify the data matches our mock
-		expect(result.current.data).toEqual([mockContractInfo]);
+		expect(result.current.data).toEqual([mockEthCollection, mockPolCollection]);
 		expect(result.current.error).toBeNull();
 	});
 
 	it('should handle empty collections', async () => {
 		// Mock marketplace config with empty collections
 		server.use(
-			createConfigHandler({
+			createLookupMarketplaceConfigHandler({
 				...mockConfig,
 				collections: [],
 			}),
 		);
 
-		const { result } = renderHook(() => useListCollections(defaultArgs));
+		const { result } = renderHook(() => useListCollections());
 
 		await waitFor(() => {
 			expect(result.current.data).toBeDefined();
@@ -79,7 +48,7 @@ describe('useListCollections', () => {
 	it('should handle error states', async () => {
 		// Mock marketplace config with collection
 		server.use(
-			createConfigHandler({
+			createLookupMarketplaceConfigHandler({
 				...mockConfig,
 				collections: [
 					{
@@ -103,7 +72,7 @@ describe('useListCollections', () => {
 			}),
 		);
 
-		const { result } = renderHook(() => useListCollections(defaultArgs));
+		const { result } = renderHook(() => useListCollections());
 
 		await waitFor(() => {
 			expect(result.current.isError).toBe(true);
@@ -118,7 +87,7 @@ describe('useListCollections', () => {
 
 		// Mock marketplace config with collection
 		server.use(
-			createConfigHandler({
+			createLookupMarketplaceConfigHandler({
 				...mockConfig,
 				collections: [
 					{
@@ -138,7 +107,7 @@ describe('useListCollections', () => {
 				requestMade = true;
 				return HttpResponse.json({
 					contractInfoMap: {
-						'0x1234567890123456789012345678901234567890': mockContractInfo,
+						'0x1234567890123456789012345678901234567890': mockEthCollection,
 					},
 				});
 			}),
@@ -160,128 +129,14 @@ describe('useListCollections', () => {
 	});
 
 	it('should handle multiple collections from different chains', async () => {
-		const mockContractInfo2 = {
-			...mockContractInfo,
-			address: '0x1234567890123456789012345678901234567890' as `0x${string}`,
-			chainId: 137, // Different chain (Polygon)
-		};
-
-		// Mock marketplace config with multiple collections
-		server.use(
-			createConfigHandler({
-				...mockConfig,
-				collections: [
-					{
-						chainId: 1,
-						address:
-							'0x1234567890123456789012345678901234567890' as `0x${string}`,
-						feePercentage: 2.5,
-						marketplaceType: MarketplaceType.ORDERBOOK,
-						currencyOptions: [],
-						exchanges: [],
-						bannerUrl: '',
-						destinationMarketplace: OrderbookKind.sequence_marketplace_v2,
-					},
-					{
-						chainId: 137,
-						address: mockContractInfo2.address,
-						feePercentage: 2.5,
-						marketplaceType: MarketplaceType.ORDERBOOK,
-						currencyOptions: [],
-						exchanges: [],
-						bannerUrl: '',
-						destinationMarketplace: OrderbookKind.sequence_marketplace_v2,
-					},
-				],
-			}),
-			http.post('*/rpc/Metadata/GetContractInfoBatch', async ({ request }) => {
-				const body = (await request.json()) as { chainID: string };
-				if (body.chainID === '1') {
-					return HttpResponse.json({
-						contractInfoMap: {
-							'0x1234567890123456789012345678901234567890': mockContractInfo,
-						},
-					});
-				}
-				return HttpResponse.json({
-					contractInfoMap: {
-						[mockContractInfo2.address]: mockContractInfo2,
-					},
-				});
-			}),
-		);
-
-		const { result } = renderHook(() => useListCollections(defaultArgs));
+		// TODO: This test should be more robust, make sure we validate that the marketplace config has multiple chains
+		// then the to equal should just check that we are fetching the data from those
+		const { result } = renderHook(() => useListCollections());
 
 		await waitFor(() => {
 			expect(result.current.data).toBeDefined();
 		});
 
-		expect(result.current.data).toHaveLength(2);
-		expect(result.current.data).toEqual(
-			expect.arrayContaining([mockContractInfo, mockContractInfo2]),
-		);
-	});
-
-	it('should handle collections with different resource statuses', async () => {
-		const mockUnavailableContract = {
-			...mockContractInfo,
-			address: '0x9876543210987654321098765432109876543210' as `0x${string}`,
-			status: ResourceStatus.NOT_AVAILABLE,
-		};
-
-		// Mock marketplace config with multiple collections
-		server.use(
-			createConfigHandler({
-				...mockConfig,
-				collections: [
-					{
-						chainId: 1,
-						address:
-							'0x1234567890123456789012345678901234567890' as `0x${string}`,
-						feePercentage: 2.5,
-						marketplaceType: MarketplaceType.ORDERBOOK,
-						currencyOptions: [],
-						exchanges: [],
-						bannerUrl: '',
-						destinationMarketplace: OrderbookKind.sequence_marketplace_v2,
-					},
-					{
-						chainId: 1,
-						address: mockUnavailableContract.address,
-						feePercentage: 2.5,
-						marketplaceType: MarketplaceType.ORDERBOOK,
-						currencyOptions: [],
-						exchanges: [],
-						bannerUrl: '',
-						destinationMarketplace: OrderbookKind.sequence_marketplace_v2,
-					},
-				],
-			}),
-		);
-
-		// Mock metadata response for both contracts
-		server.use(
-			http.post('*/rpc/Metadata/GetContractInfoBatch', () => {
-				return HttpResponse.json({
-					contractInfoMap: {
-						'0x1234567890123456789012345678901234567890': mockContractInfo,
-						'0x9876543210987654321098765432109876543210':
-							mockUnavailableContract,
-					},
-				});
-			}),
-		);
-
-		const { result } = renderHook(() => useListCollections(defaultArgs));
-
-		await waitFor(() => {
-			expect(result.current.data).toBeDefined();
-		});
-
-		expect(result.current.data).toHaveLength(2);
-		expect(result.current.data).toEqual(
-			expect.arrayContaining([mockContractInfo, mockUnavailableContract]),
-		);
+		expect(result.current.data).toEqual([mockEthCollection, mockPolCollection]);
 	});
 });

package/src/react/hooks/__tests__/useMarketplaceConfig.test.tsx

@@ -1,12 +1,12 @@
 import { renderHook, server, waitFor } from '@test';
 import { describe, expect, it } from 'vitest';
+import { createLookupMarketplaceConfigErrorHandler } from '../../_internal/api/__mocks__/builder.msw';
+
 import {
-	createConfigHandler,
-	createErrorHandler,
 	createStylesErrorHandler,
 	mockConfig,
 	mockStyles,
-} from '../options/__mocks__/marketplaceConfig.msw';
+} from '../../_internal/api/__mocks__/builder.msw';
 import { useMarketplaceConfig } from '../useMarketplaceConfig';
 
 describe('useMarketplaceConfig', () => {
@@ -24,17 +24,13 @@ describe('useMarketplaceConfig', () => {
 
 		// Verify the data matches our mock
 		expect(result.current.data).toBeDefined();
-		expect(result.current.data).toEqual({
-			...mockConfig,
-			cssString: mockStyles.replaceAll(/['"]/g, ''),
-			manifestUrl: expect.stringContaining('/manifest.json'),
-		});
+		expect(result.current.data).toMatchSnapshot();
 		expect(result.current.error).toBeNull();
 	});
 
 	it('should handle config fetch error', async () => {
 		// Override the handler for this test to return an error
-		server.use(createErrorHandler());
+		server.use(createLookupMarketplaceConfigErrorHandler());
 
 		const { result } = renderHook(() => useMarketplaceConfig());
 
@@ -48,7 +44,7 @@ describe('useMarketplaceConfig', () => {
 
 	it('should handle styles fetch error', async () => {
 		// Override the handler for this test to return an error
-		server.use(createStylesErrorHandler(), createConfigHandler());
+		server.use(createStylesErrorHandler());
 
 		const { result } = renderHook(() => useMarketplaceConfig());
 
@@ -63,7 +59,10 @@ describe('useMarketplaceConfig', () => {
 
 	it('should handle both config and styles fetch errors', async () => {
 		// Override both handlers to return errors
-		server.use(createErrorHandler(), createStylesErrorHandler());
+		server.use(
+			createLookupMarketplaceConfigErrorHandler(),
+			createStylesErrorHandler(),
+		);
 
 		const { result } = renderHook(() => useMarketplaceConfig());
 

package/src/react/hooks/options/index.ts

@@ -1,2 +1,2 @@
 export { fetchCollection, collectionOptions } from './collectionOptions';
-export * from './marketplaceConfigOptions';
+export * from '../../queries/marketplaceConfig';

package/src/react/hooks/useAutoSelectFeeOption.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { type Address, zeroAddress } from 'viem';
 
 import { useChain } from '@0xsequence/connect';

package/src/react/hooks/useMarketplaceConfig.tsx

@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
-import { marketplaceConfigOptions } from './options/marketplaceConfigOptions';
+import { marketplaceConfigOptions } from '../queries/marketplaceConfig';
 import { useConfig } from './useConfig';
 
-export * from './options/marketplaceConfigOptions';
+export * from '../queries/marketplaceConfig';
 
 export const useMarketplaceConfig = () => {
 	const config = useConfig();

package/src/react/queries/marketplaceConfig.ts

@@ -0,0 +1,101 @@
+import { queryOptions } from '@tanstack/react-query';
+import type { Env, SdkConfig } from '../../types';
+import { builderMarketplaceApi, builderRpcApi, configKeys } from '../_internal';
+import { BuilderAPI } from '../_internal/api/builder-api';
+import type { MarketplaceSettings } from '../_internal/api/builder.gen';
+
+export type MarketplaceConfig = MarketplaceSettings & {
+	cssString: string;
+	manifestUrl: string;
+};
+
+const fetchBuilderConfig = async ({
+	projectId,
+	projectAccessKey,
+	env,
+	prefetchedMarketplaceSettings,
+}: {
+	projectId: string;
+	projectAccessKey: string;
+	env: Env;
+	prefetchedMarketplaceSettings?: MarketplaceSettings;
+}) => {
+	if (prefetchedMarketplaceSettings) {
+		return prefetchedMarketplaceSettings;
+	}
+	const baseUrl = builderRpcApi(env);
+	const builderApi = new BuilderAPI(baseUrl, projectAccessKey);
+	const response = await builderApi.lookupMarketplaceConfig({
+		projectId: Number(projectId),
+	});
+	return response.settings;
+};
+
+const fetchStyles = async (projectId: string, env: Env) => {
+	const response = await fetch(
+		`${builderMarketplaceApi(projectId, env)}/styles.css`,
+	);
+	const styles = await response.text();
+	// React sanitizes this string, so we need to remove all quotes, they are not needed anyway
+	return styles.replaceAll(/['"]/g, '');
+};
+
+const fetchMarketplaceConfig = async ({
+	env,
+	projectId,
+	projectAccessKey,
+	prefetchedMarketplaceSettings,
+}: {
+	env: Env;
+	projectId: string;
+	projectAccessKey: string;
+	prefetchedMarketplaceSettings?: MarketplaceSettings;
+}): Promise<MarketplaceConfig> => {
+	const [marketplaceConfig, cssString] = await Promise.all([
+		fetchBuilderConfig({
+			projectId,
+			projectAccessKey,
+			env,
+			prefetchedMarketplaceSettings,
+		}),
+		fetchStyles(projectId, env),
+	]);
+
+	return {
+		...marketplaceConfig,
+		cssString,
+		manifestUrl: `${builderMarketplaceApi(projectId, env)}/manifest.json`,
+	};
+};
+
+export const marketplaceConfigOptions = (
+	config: Pick<SdkConfig, 'projectId' | 'projectAccessKey'> | SdkConfig,
+) => {
+	let env: Env = 'production';
+	if ('_internal' in config && config._internal !== undefined) {
+		env = config._internal.builderEnv ?? env;
+	}
+
+	let prefetchedMarketplaceSettings: MarketplaceSettings | undefined;
+	if (
+		'_internal' in config &&
+		config._internal?.prefetchedMarketplaceSettings
+	) {
+		prefetchedMarketplaceSettings =
+			config._internal.prefetchedMarketplaceSettings;
+	}
+
+	const projectId = config.projectId;
+	const projectAccessKey = config.projectAccessKey;
+
+	return queryOptions({
+		queryKey: [...configKeys.marketplace, env, projectId],
+		queryFn: () =>
+			fetchMarketplaceConfig({
+				env,
+				projectId,
+				projectAccessKey,
+				prefetchedMarketplaceSettings,
+			}),
+	});
+};

package/src/react/ssr/__tests__/__snapshots__/create-ssr-client.test.ts.snap

@@ -71,6 +71,7 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
   "landingPageLayout": "default",
   "logoUrl": "https://example.com/logo.png",
   "manifestUrl": "https://api.sequence.build/marketplace/test-project/manifest.json",
+  "projectId": 1,
   "publisherId": "test-publisher",
   "shortDescription": "A test marketplace",
   "socials": {

package/src/react/ssr/create-ssr-client.ts

@@ -2,7 +2,7 @@ import type { QueryClient } from '@tanstack/react-query';
 import { type State, cookieToInitialState } from 'wagmi';
 import type { SdkConfig } from '../../types/sdk-config';
 import { createWagmiConfig } from '../_internal/wagmi/create-config';
-import { marketplaceConfigOptions } from '../hooks/options/marketplaceConfigOptions';
+import { marketplaceConfigOptions } from '../queries/marketplaceConfig';
 
 type InitSSRClientArgs = {
 	cookie: string;

package/src/react/ui/components/collectible-card/CollectibleCard.tsx

@@ -11,8 +11,8 @@ import type {
 import { useCurrency } from '../../../hooks';
 import { ActionButton } from '../_internals/action-button/ActionButton';
 import { CollectibleCardAction } from '../_internals/action-button/types';
-import { CollectibleAsset } from './CollectibleAsset';
 import { Footer } from './Footer';
+import { CollectibleAsset } from './collectible-asset/CollectibleAsset';
 
 function CollectibleSkeleton() {
 	return (
@@ -145,7 +145,7 @@ export function CollectibleCard({
 					/>
 
 					{(highestOffer || collectible) && !balanceIsLoading && (
-						<div className="-bottom-action-offset absolute flex w-full items-center justify-center bg-overlay-light p-2 backdrop-blur transition-transform duration-200 ease-in-out group-hover:translate-y-[-44px]">
+						<div className="-bottom-16 absolute flex w-full origin-bottom items-center justify-center bg-overlay-light p-2 backdrop-blur transition-transform duration-200 ease-in-out group-hover:translate-y-[-64px]">
 							<ActionButton
 								chainId={chainId}
 								collectionAddress={collectionAddress}

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

@@ -1,7 +1,9 @@
-import { render, screen } from '@test/test-utils';
+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 { CollectibleAsset } from '../CollectibleAsset';
+import { CollectibleAsset } from '../collectible-asset/CollectibleAsset';
+import * as contentTypeUtils from '../collectible-asset/utils';
 
 describe('CollectibleAsset', () => {
 	it('renders image content correctly with proper loading states and fallback', async () => {
@@ -86,7 +88,16 @@ describe('CollectibleAsset', () => {
 		window.Image = originalImage;
 	});
 
-	it('handles video content with appropriate controls and loading states', () => {
+	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;
@@ -122,34 +133,39 @@ describe('CollectibleAsset', () => {
 			/>,
 		);
 
-		// Check that video element is present with correct attributes
-		const videoElement = document.querySelector('video');
+		await waitFor(() => {
+			expect(screen.getByTestId('collectible-asset-video')).toBeInTheDocument();
+		});
+
+		const videoElement = screen.getByTestId(
+			'collectible-asset-video',
+		) as HTMLVideoElement;
+
 		expect(videoElement).not.toBeNull();
 
-		if (videoElement) {
-			// 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 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);
+		// 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');
+		// 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');
-			expect(videoElement.className).not.toContain('invisible');
-		}
+		// 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,
@@ -157,7 +173,16 @@ describe('CollectibleAsset', () => {
 		});
 	});
 
-	it('handles HTML content in iframes with proper sandboxing', () => {
+	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',
@@ -173,28 +198,33 @@ describe('CollectibleAsset', () => {
 			/>,
 		);
 
+		await waitFor(() => {
+			expect(document.querySelector('iframe')).toBeInTheDocument();
+		});
+
 		// Check that iframe element is present with correct attributes
-		const iframeElement = document.querySelector('iframe');
-		expect(iframeElement).not.toBeNull();
+		const iframeElement = document.querySelector('iframe') as HTMLIFrameElement;
+		expect(iframeElement).toBeInTheDocument();
 
-		if (iframeElement) {
-			// iframe source should be set correctly
-			expect(iframeElement.getAttribute('src')).toBe(
-				'https://example.com/interactive.html',
-			);
+		// 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 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 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');
+		// 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');
-		}
+		// Verify border styling
+		expect(iframeElement.style.border).toBe('0px');
+
+		getContentTypeSpy.mockRestore();
+		fetchContentTypeSpy.mockRestore();
 	});
 });