@0xsequence/marketplace-sdk 0.8.9 → 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/CollectibleCard.tsx

@@ -12,7 +12,7 @@ import { useCurrency } from '../../../hooks';
 import { ActionButton } from '../_internals/action-button/ActionButton';
 import { CollectibleCardAction } from '../_internals/action-button/types';
 import { Footer } from './Footer';
-import { CollectibleAsset } from './collectible-asset/CollectibleAsset';
+import { Media } from './media/Media';
 
 function CollectibleSkeleton() {
 	return (
@@ -127,7 +127,7 @@ export function CollectibleCard({
 		>
 			<div className="group relative z-10 flex h-full w-full cursor-pointer flex-col items-start overflow-hidden rounded-xl border-none bg-none p-0 focus:outline-none [&:focus]:rounded-[10px] [&:focus]:outline-[3px] [&:focus]:outline-black [&:focus]:outline-offset-[-3px]">
 				<article className="w-full rounded-xl">
-					<CollectibleAsset
+					<Media
 						name={collectibleMetadata?.name || ''}
 						assets={[
 							collectibleMetadata?.image,

package/src/react/ui/components/collectible-card/__tests__/{CollectibleAsset.test.tsx → Media.test.tsx}

@@ -2,10 +2,10 @@ 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 '../collectible-asset/CollectibleAsset';
-import * as contentTypeUtils from '../collectible-asset/utils';
+import { Media } from '../media/Media';
+import * as contentTypeUtils from '../media/utils';
 
-describe('CollectibleAsset', () => {
+describe('Media', () => {
 	it('renders image content correctly with proper loading states and fallback', async () => {
 		const originalImage = window.Image;
 
@@ -30,14 +30,11 @@ describe('CollectibleAsset', () => {
 
 		// Initial render should show the loading skeleton
 		const { rerender } = render(
-			<CollectibleAsset
-				name="Test Collectible"
-				assets={[mockMetadata.image]}
-			/>,
+			<Media name="Test Collectible" assets={[mockMetadata.image]} />,
 		);
 
 		// 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
@@ -69,7 +66,7 @@ describe('CollectibleAsset', () => {
 		};
 
 		rerender(
-			<CollectibleAsset
+			<Media
 				name="Test Collectible"
 				assets={[mockMetadataWithBadImage.image]}
 			/>,
@@ -127,10 +124,7 @@ describe('CollectibleAsset', () => {
 		};
 
 		render(
-			<CollectibleAsset
-				name="Video Collectible"
-				assets={[mockVideoMetadata.video]}
-			/>,
+			<Media name="Video Collectible" assets={[mockVideoMetadata.video]} />,
 		);
 
 		await waitFor(() => {
@@ -192,7 +186,7 @@ describe('CollectibleAsset', () => {
 		};
 
 		render(
-			<CollectibleAsset
+			<Media
 				name="HTML Collectible"
 				assets={[mockHtmlMetadata.animation_url]}
 			/>,
@@ -227,4 +221,44 @@ describe('CollectibleAsset', () => {
 		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/index.ts

@@ -1,2 +1,2 @@
 export * from './CollectibleCard';
-export * from './collectible-asset/CollectibleAsset';
+export * from './media/Media';