@0xsequence/marketplace-sdk 0.8.10 → 0.8.11

package/src/react/queries/marketplaceConfig.ts

@@ -1,82 +1,109 @@
 import { queryOptions } from '@tanstack/react-query';
-import type { Env, SdkConfig } from '../../types';
-import { builderMarketplaceApi, builderRpcApi, configKeys } from '../_internal';
+import type { ContractType, Env, SdkConfig, ShopConfig } from '../../types';
+import {
+	type MarketCollection,
+	type MarketPage,
+	type MarketplaceConfig,
+	MarketplaceType,
+	type NewMarketplaceSettings,
+	type ShopCollection,
+	type ShopPage,
+} from '../../types/new-marketplace-types';
+import { builderRpcApi, configKeys } from '../_internal';
 import { BuilderAPI } from '../_internal/api/builder-api';
-import type { MarketplaceSettings } from '../_internal/api/builder.gen';
+import type { LookupMarketplaceReturn } from '../_internal/api/builder.gen';
 
-export type MarketplaceConfig = MarketplaceSettings & {
-	cssString: string;
-	manifestUrl: string;
-};
-
-const fetchBuilderConfig = async ({
+export const fetchMarketplaceConfig = async ({
 	projectId,
 	projectAccessKey,
 	env,
 	prefetchedMarketplaceSettings,
+	tmpShopConfig,
 }: {
 	projectId: string;
 	projectAccessKey: string;
 	env: Env;
-	prefetchedMarketplaceSettings?: MarketplaceSettings;
-}) => {
-	if (prefetchedMarketplaceSettings) {
-		return prefetchedMarketplaceSettings;
+	tmpShopConfig?: ShopConfig;
+	prefetchedMarketplaceSettings?: LookupMarketplaceReturn; //TODO: Is this the right approach?
+}): Promise<MarketplaceConfig> => {
+	let builderMarketplaceConfig = prefetchedMarketplaceSettings;
+	if (!builderMarketplaceConfig) {
+		const baseUrl = builderRpcApi(env);
+		const builderApi = new BuilderAPI(baseUrl, projectAccessKey);
+		const response = await builderApi.lookupMarketplace({
+			projectId: Number(projectId),
+		});
+
+		builderMarketplaceConfig = response;
 	}
-	const baseUrl = builderRpcApi(env);
-	const builderApi = new BuilderAPI(baseUrl, projectAccessKey);
-	const response = await builderApi.lookupMarketplaceConfig({
-		projectId: Number(projectId),
+	const settings = {
+		publisherId: builderMarketplaceConfig.marketplace.settings.publisherId,
+		title: builderMarketplaceConfig.marketplace.settings.title,
+		socials: builderMarketplaceConfig.marketplace.settings.socials,
+		faviconUrl: builderMarketplaceConfig.marketplace.settings.faviconUrl,
+		walletOptions: builderMarketplaceConfig.marketplace.settings.walletOptions,
+		logoUrl: builderMarketplaceConfig.marketplace.settings.logoUrl,
+		fontUrl: builderMarketplaceConfig.marketplace.settings.fontUrl,
+		accessKey: builderMarketplaceConfig.marketplace.settings.accessKey,
+	} satisfies NewMarketplaceSettings;
+
+	const marketCollections = (
+		builderMarketplaceConfig.marketCollections ?? []
+	).map((collection) => {
+		return {
+			chainId: collection.chainId,
+			bannerUrl: collection.bannerUrl,
+			contractType: collection.contractType as ContractType,
+			marketplaceType: MarketplaceType.MARKET,
+			itemsAddress: collection.itemsAddress,
+			feePercentage: collection.feePercentage,
+			currencyOptions: collection.currencyOptions,
+			filterSettings: collection.filterSettings,
+			destinationMarketplace: collection.destinationMarketplace,
+		} satisfies MarketCollection;
 	});
-	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 shopCollections = tmpShopConfig?.collections.map((collection) => {
+		return {
+			chainId: collection.chainId,
+			bannerUrl: collection.bannerUrl,
+			contractType: collection.contractType,
+			marketplaceType: MarketplaceType.SHOP,
+			itemsAddress: collection.address,
+			filterSettings: undefined,
+			saleAddress: collection.primarySalesContractAddress,
+		} satisfies ShopCollection;
+	});
 
-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),
-	]);
+	const market = {
+		enabled: true,
+		bannerUrl: builderMarketplaceConfig.marketplace.market.bannerUrl,
+		ogImage: builderMarketplaceConfig.marketplace.market.ogImage,
+		collections: marketCollections,
+	} satisfies MarketPage;
+
+	const shop = {
+		enabled: tmpShopConfig !== undefined,
+		bannerUrl: tmpShopConfig?.bannerUrl ?? '',
+		ogImage: tmpShopConfig?.ogImage,
+		collections: shopCollections ?? [],
+	} satisfies ShopPage;
 
 	return {
-		...marketplaceConfig,
-		cssString,
-		manifestUrl: `${builderMarketplaceApi(projectId, env)}/manifest.json`,
-	};
+		projectId: Number(projectId),
+		settings,
+		market,
+		shop,
+	} satisfies MarketplaceConfig;
 };
 
-export const marketplaceConfigOptions = (
-	config: Pick<SdkConfig, 'projectId' | 'projectAccessKey'> | SdkConfig,
-) => {
+export const marketplaceConfigOptions = (config: SdkConfig) => {
 	let env: Env = 'production';
 	if ('_internal' in config && config._internal !== undefined) {
 		env = config._internal.builderEnv ?? env;
 	}
 
-	let prefetchedMarketplaceSettings: MarketplaceSettings | undefined;
+	let prefetchedMarketplaceSettings: LookupMarketplaceReturn | undefined;
 	if (
 		'_internal' in config &&
 		config._internal?.prefetchedMarketplaceSettings
@@ -96,6 +123,7 @@ export const marketplaceConfigOptions = (
 				projectId,
 				projectAccessKey,
 				prefetchedMarketplaceSettings,
+				tmpShopConfig: config.tmpShopConfig,
 			}),
 	});
 };

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

@@ -2,95 +2,97 @@
 
 exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
 {
-  "bannerUrl": "",
-  "collections": [
-    {
-      "address": "0x0000000000000000000000000000000000000000",
-      "bannerUrl": "",
-      "chainId": 1,
-      "currencyOptions": [
-        "0x0000000000000000000000000000000000000000",
-        "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
-      ],
-      "destinationMarketplace": "sequence_marketplace_v2",
-      "exchanges": [],
-      "feePercentage": 3.5,
-      "filterSettings": {
-        "exclusions": [
-          {
-            "condition": "SPECIFIC_VALUE",
-            "key": "Type",
-            "value": "Sample",
-          },
-        ],
-        "filterOrder": [
-          "Type",
-          "Rarity",
+  "market": {
+    "bannerUrl": "https://example.com/market-banner.png",
+    "collections": [
+      {
+        "bannerUrl": "https://example.com/market-banner.png",
+        "chainId": 1,
+        "contractType": "ERC721",
+        "currencyOptions": [
+          "0x0000000000000000000000000000000000000000",
+          "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
         ],
+        "destinationMarketplace": "sequence_marketplace_v2",
+        "feePercentage": 3.5,
+        "filterSettings": {
+          "exclusions": [
+            {
+              "condition": "SPECIFIC_VALUE",
+              "key": "Type",
+              "value": "Sample",
+            },
+          ],
+          "filterOrder": [
+            "Type",
+            "Rarity",
+          ],
+        },
+        "itemsAddress": "0x0000000000000000000000000000000000000000",
+        "marketplaceType": "MARKET",
       },
-      "marketplaceType": "ORDERBOOK",
-    },
-    {
-      "address": "0x1234567890123456789012345678901234567890",
-      "bannerUrl": "https://example.com/collection-banner.png",
-      "chainId": 137,
-      "currencyOptions": [
-        "0x0000000000000000000000000000000000000000",
-      ],
-      "destinationMarketplace": "opensea",
-      "exchanges": [],
-      "feePercentage": 2.5,
-      "filterSettings": {
-        "exclusions": [
-          {
-            "condition": "ENTIRE_KEY",
-            "key": "Category",
-          },
-          {
-            "condition": "SPECIFIC_VALUE",
-            "key": "Level",
-            "value": "Legendary",
-          },
-        ],
-        "filterOrder": [
-          "Category",
-          "Level",
-          "Element",
+      {
+        "bannerUrl": "https://example.com/collection-banner.png",
+        "chainId": 137,
+        "contractType": "ERC1155",
+        "currencyOptions": [
+          "0x0000000000000000000000000000000000000000",
         ],
+        "destinationMarketplace": "opensea",
+        "feePercentage": 2.5,
+        "filterSettings": {
+          "exclusions": [
+            {
+              "condition": "ENTIRE_KEY",
+              "key": "Category",
+            },
+            {
+              "condition": "SPECIFIC_VALUE",
+              "key": "Level",
+              "value": "Legendary",
+            },
+          ],
+          "filterOrder": [
+            "Category",
+            "Level",
+            "Element",
+          ],
+        },
+        "itemsAddress": "0x1234567890123456789012345678901234567890",
+        "marketplaceType": "MARKET",
       },
-      "marketplaceType": "ORDERBOOK",
+    ],
+    "enabled": true,
+    "ogImage": "https://example.com/og-image.png",
+  },
+  "projectId": NaN,
+  "settings": {
+    "accessKey": "mock-access-key",
+    "faviconUrl": "https://example.com/favicon.ico",
+    "fontUrl": "https://example.com/font.woff2",
+    "logoUrl": "https://example.com/logo.png",
+    "publisherId": "publisher-1",
+    "socials": {
+      "discord": "https://discord.gg/mock",
+      "instagram": "https://instagram.com/mock",
+      "tiktok": "https://tiktok.com/@mock",
+      "twitter": "https://twitter.com/mock",
+      "website": "https://mock.com",
+      "youtube": "https://youtube.com/mock",
+    },
+    "title": "Mock Marketplace",
+    "walletOptions": {
+      "connectors": [],
+      "includeEIP6963Wallets": true,
+      "oidcIssuers": {},
+      "walletType": "UNIVERSAL",
     },
-  ],
-  "cssString": "
-  .marketplace-theme {
-    --primary-color: #000000;
-  }
-",
-  "faviconUrl": "https://example.com/favicon.png",
-  "landingBannerUrl": "https://example.com/banner.png",
-  "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": {
-    "discord": "https://discord.com/test",
-    "instagram": "https://instagram.com/test",
-    "tiktok": "",
-    "twitter": "https://twitter.com/test",
-    "website": "",
-    "youtube": "",
   },
-  "title": "Test Marketplace",
-  "walletOptions": {
-    "connectors": [
-      "coinbase",
-      "walletconnect",
-    ],
-    "includeEIP6963Wallets": true,
-    "oidcIssuers": {},
-    "walletType": "UNIVERSAL",
+  "shop": {
+    "bannerUrl": "",
+    "collections": [],
+    "enabled": false,
+    "ogImage": undefined,
   },
 }
 `;

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

@@ -34,7 +34,7 @@ describe('Media', () => {
 		);
 
 		// check if skeleton is rendered during loading
-		const skeleton = screen.getByTestId('collectible-asset-skeleton');
+		const skeleton = screen.getByTestId('media');
 		expect(skeleton).toBeInTheDocument();
 
 		// trigger the image load event to simulate successful loading
@@ -221,4 +221,44 @@ describe('Media', () => {
 		getContentTypeSpy.mockRestore();
 		fetchContentTypeSpy.mockRestore();
 	});
+
+	it('shows loading state when isLoading prop is true', async () => {
+		const mockMetadata: Partial<TokenMetadata> = {
+			tokenId: '1',
+			name: 'Test Collectible',
+			image: 'https://example.com/test-image.png',
+			attributes: [],
+		};
+
+		// Render with isLoading=true
+		const { rerender } = render(
+			<Media
+				name="Test Collectible"
+				assets={[mockMetadata.image]}
+				isLoading={true}
+			/>,
+		);
+
+		// Check if skeleton is rendered during loading
+		expect(screen.getByTestId('media')).toBeInTheDocument();
+
+		// Image should be invisible while loading
+		const imgElement = document.querySelector('img');
+		expect(imgElement?.className).toContain('invisible');
+
+		// Re-render with isLoading=false
+		rerender(
+			<Media
+				name="Test Collectible"
+				assets={[mockMetadata.image]}
+				isLoading={false}
+			/>,
+		);
+
+		// After loading completes, trigger load event
+		imgElement?.dispatchEvent(new Event('load'));
+
+		// Image should become visible
+		expect(imgElement?.className).toContain('visible');
+	});
 });

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

@@ -28,6 +28,7 @@ export function Media({
 	assetSrcPrefixUrl,
 	className,
 	supply,
+	isLoading,
 }: MediaProps) {
 	const [assetLoadFailed, setAssetLoadFailed] = useState(false);
 	const [assetLoading, setAssetLoading] = useState(true);
@@ -86,7 +87,7 @@ export function Media({
 	};
 
 	// Display placeholder if asset fails to load or doesn't exist
-	if ((contentType.failed && !assetLoadFailed) || !assetUrl) {
+	if ((!isLoading && contentType.failed && !assetLoadFailed) || !assetUrl) {
 		return (
 			<div className={cn('h-full w-full', classNames)}>
 				<img
@@ -111,7 +112,9 @@ export function Media({
 					classNames,
 				)}
 			>
-				{(assetLoading || contentType.loading) && <MediaSkeleton />}
+				{(assetLoading || contentType.loading || isLoading) && (
+					<MediaSkeleton />
+				)}
 
 				<iframe
 					title={name || 'Collectible'}
@@ -143,7 +146,7 @@ export function Media({
 	if (contentType.type === 'video' && !assetLoadFailed) {
 		const videoClassNames = cn(
 			'absolute inset-0 h-full w-full object-cover transition-transform duration-200 ease-in-out group-hover:scale-hover',
-			assetLoading ? 'invisible' : 'visible',
+			assetLoading || isLoading ? 'invisible' : 'visible',
 			// 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',
@@ -151,7 +154,9 @@ export function Media({
 
 		return (
 			<div className={classNames}>
-				{(assetLoading || contentType.loading) && <MediaSkeleton />}
+				{(assetLoading || contentType.loading || isLoading) && (
+					<MediaSkeleton />
+				)}
 
 				<video
 					ref={videoRef}
@@ -178,12 +183,12 @@ 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 ? 'invisible' : 'visible',
+		assetLoading || contentType.loading || isLoading ? 'invisible' : 'visible',
 	);
 
 	return (
 		<div className={classNames}>
-			{(assetLoading || contentType.loading) && <MediaSkeleton />}
+			{(assetLoading || contentType.loading || isLoading) && <MediaSkeleton />}
 
 			<img
 				src={imgSrc}

package/src/react/ui/components/collectible-card/media/MediaSkeleton.tsx

@@ -3,7 +3,7 @@ import { Skeleton } from '@0xsequence/design-system';
 export default function MediaSkeleton() {
 	return (
 		<Skeleton
-			data-testid="collectible-asset-skeleton"
+			data-testid="media"
 			size="lg"
 			className="absolute inset-0 h-full w-full animate-shimmer"
 			style={{

package/src/react/ui/components/collectible-card/media/types.ts

@@ -12,6 +12,7 @@ type MediaProps = {
 	assetSrcPrefixUrl?: string;
 	className?: string;
 	supply?: number;
+	isLoading?: boolean;
 };
 
 export type { ContentType, ContentTypeState, MediaProps };

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

@@ -58,7 +58,10 @@ export const ERC1155QuantityModal = ({ order }: { order: Order }) => {
 const TotalPrice = ({
 	order,
 	quantityStr,
-}: { order: Order; quantityStr: string }) => {
+}: {
+	order: Order;
+	quantityStr: string;
+}) => {
 	const { data: marketplaceConfig } = useMarketplaceConfig();
 	const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
 		chainId: order.chainId,
@@ -71,8 +74,11 @@ const TotalPrice = ({
 	if (currency) {
 		try {
 			const marketplaceFeePercentage =
-				marketplaceConfig?.collections.find((collection) =>
-					compareAddress(collection.address, order.collectionContractAddress),
+				marketplaceConfig?.market.collections.find((collection) =>
+					compareAddress(
+						collection.itemsAddress,
+						order.collectionContractAddress,
+					),
 				)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
 			const quantity = BigInt(quantityStr);
 			const totalPriceRaw = BigInt(order.priceAmount) * quantity;

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

@@ -1,6 +1,7 @@
 import { renderHook } from '@test';
 import { avalanche, optimism } from 'viem/chains';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { MarketplaceType } from '../../../../../../types/new-marketplace-types';
 import { useMarketplaceConfig } from '../../../../../hooks';
 import { useFees } from '../useFees';
 
@@ -30,13 +31,16 @@ describe('useFees', () => {
 			useMarketplaceConfig as unknown as ReturnType<typeof vi.fn>
 		).mockReturnValue({
 			data: {
-				collections: [
-					{
-						address: '0x456',
-						chainId: 1,
-						feePercentage: '5.0',
-					},
-				],
+				market: {
+					collections: [
+						{
+							itemsAddress: '0x456',
+							chainId: 1,
+							feePercentage: '5.0',
+							marketplaceType: MarketplaceType.MARKET,
+						},
+					],
+				},
 			},
 		});
 
@@ -59,13 +63,16 @@ describe('useFees', () => {
 			useMarketplaceConfig as unknown as ReturnType<typeof vi.fn>
 		).mockReturnValue({
 			data: {
-				collections: [
-					{
-						address: collectionAddress,
-						chainId: chainId.toString(),
-						feePercentage: collectionFee,
-					},
-				],
+				market: {
+					collections: [
+						{
+							itemsAddress: collectionAddress,
+							chainId: chainId.toString(),
+							feePercentage: collectionFee,
+							marketplaceType: MarketplaceType.MARKET,
+						},
+					],
+				},
 			},
 		});
 
@@ -110,13 +117,16 @@ describe('useFees', () => {
 			useMarketplaceConfig as unknown as ReturnType<typeof vi.fn>
 		).mockReturnValue({
 			data: {
-				collections: [
-					{
-						address: collectionAddress.toLowerCase(),
-						chainId: chainId.toString(),
-						feePercentage: collectionFee,
-					},
-				],
+				market: {
+					collections: [
+						{
+							itemsAddress: collectionAddress.toLowerCase(),
+							chainId: chainId.toString(),
+							feePercentage: collectionFee,
+							marketplaceType: MarketplaceType.MARKET,
+						},
+					],
+				},
 			},
 		});
 

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

@@ -16,9 +16,10 @@ export const useFees = ({
 		'0x400cdab4676c17aec07e8ec748a5fc3b674bca41';
 	const { data: marketplaceConfig } = useMarketplaceConfig();
 
-	const collection = marketplaceConfig?.collections.find(
+	const collection = marketplaceConfig?.market.collections.find(
 		(collection) =>
-			collection.address.toLowerCase() === collectionAddress.toLowerCase() &&
+			collection.itemsAddress.toLowerCase() ===
+				collectionAddress.toLowerCase() &&
 			chainId === Number(collection.chainId),
 	);
 

package/src/react/ui/modals/CreateListingModal/Modal.tsx

@@ -11,7 +11,7 @@ import {
 	useBalanceOfCollectible,
 	useCollectible,
 	useCollection,
-	useCurrencies,
+	useMarketCurrencies,
 } from '../../../hooks';
 import {
 	ActionModal,
@@ -52,9 +52,7 @@ const Modal = observer(() => {
 		shouldHideActionButton: shouldHideListButton,
 		waasFeeOptionsShown,
 		getActionLabel,
-		isTestnet,
 	} = useSelectWaasFeeOptions({
-		chainId,
 		isProcessing: listingIsBeingProcessed,
 		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
 		selectedFeeOption:
@@ -74,7 +72,7 @@ const Modal = observer(() => {
 		data: currencies,
 		isLoading: currenciesLoading,
 		isError: currenciesIsError,
-	} = useCurrencies({
+	} = useMarketCurrencies({
 		chainId,
 		collectionAddress,
 		includeNativeCurrency: true,
@@ -154,7 +152,7 @@ const Modal = observer(() => {
 			}
 
 			await createListing({
-				isTransactionExecuting: wallet?.isWaaS ? !isTestnet : false,
+				isTransactionExecuting: !!wallet?.isWaaS,
 			});
 		} catch (error) {
 			console.error('Create listing failed:', error);

package/src/react/ui/modals/CreateListingModal/hooks/useCreateListing.tsx

@@ -2,6 +2,8 @@
 
 import type { Observable } from '@legendapp/state';
 import { useEffect } from 'react';
+import type { MarketCollection } from '../../../../../types/new-marketplace-types';
+import { compareAddress } from '../../../../../utils';
 import {
 	type ContractType,
 	type CreateReq,
@@ -40,9 +42,9 @@ export const useCreateListing = ({
 	const { data: marketplaceConfig, isLoading: marketplaceIsLoading } =
 		useMarketplaceConfig();
 
-	const collectionConfig = marketplaceConfig?.collections.find(
-		(c) => c.address === collectionAddress,
-	);
+	const collectionConfig = marketplaceConfig?.market.collections.find((c) =>
+		compareAddress(c.itemsAddress, collectionAddress),
+	) as MarketCollection;
 
 	orderbookKind =
 		orderbookKind ??