@0xsequence/marketplace-sdk 0.8.10 → 0.8.12

package/src/react/queries/listCollections.ts

@@ -0,0 +1,124 @@
+import type { ContractInfo } from '@0xsequence/metadata';
+import { queryOptions, skipToken } from '@tanstack/react-query';
+import type { MarketplaceType, SdkConfig } from '../../types';
+import type {
+	MarketCollection,
+	MarketplaceConfig,
+	ShopCollection,
+} from '../../types/new-marketplace-types';
+import { compareAddress } from '../../utils';
+import { collectionKeys, getMetadataClient } from '../_internal';
+
+const allCollections = (marketplaceConfig: MarketplaceConfig) => {
+	return [
+		...marketplaceConfig.market.collections,
+		...marketplaceConfig.shop.collections,
+	];
+};
+
+const fetchListCollections = async ({
+	marketplaceType,
+	marketplaceConfig,
+	config,
+}: {
+	marketplaceType?: MarketplaceType;
+	marketplaceConfig: MarketplaceConfig;
+	config: SdkConfig;
+}) => {
+	const metadataClient = getMetadataClient(config);
+
+	let collections = allCollections(marketplaceConfig);
+
+	if (!collections?.length) {
+		return [];
+	}
+
+	if (marketplaceType) {
+		collections = collections.filter(
+			(collection) => collection.marketplaceType === marketplaceType,
+		);
+	}
+
+	// Group collections by chainId
+	const collectionsByChain = collections.reduce<Record<string, string[]>>(
+		(acc, curr) => {
+			const { chainId, itemsAddress } = curr;
+			if (!acc[chainId]) {
+				acc[chainId] = [];
+			}
+			acc[chainId].push(itemsAddress);
+			return acc;
+		},
+		{},
+	);
+
+	// Fetch collections for each chain
+	const promises = Object.entries(collectionsByChain).map(
+		([chainId, addresses]) =>
+			metadataClient
+				.getContractInfoBatch({
+					chainID: chainId,
+					contractAddresses: addresses,
+				})
+				.then((resp) => Object.values(resp.contractInfoMap)),
+	);
+
+	const settled = await Promise.allSettled(promises);
+
+	// If all promises failed, throw the first error
+	if (settled.every((result) => result.status === 'rejected')) {
+		const firstError = settled[0] as PromiseRejectedResult;
+		throw firstError.reason;
+	}
+
+	const results = settled
+		.filter(
+			(r): r is PromiseFulfilledResult<ContractInfo[]> =>
+				r.status === 'fulfilled',
+		)
+		.flatMap((r) => r.value);
+
+	const collectionsWithMetadata = collections
+		.map((collection) => {
+			const metadata = results.find((result) =>
+				compareAddress(result.address, collection.itemsAddress),
+			);
+			return { collection, metadata };
+		})
+		.filter(
+			(
+				item,
+			): item is {
+				collection: MarketCollection | ShopCollection;
+				metadata: ContractInfo;
+			} => item.metadata !== undefined,
+		)
+		.map(({ collection, metadata }) => ({
+			...collection,
+			...metadata,
+		}));
+
+	return collectionsWithMetadata;
+};
+
+export const listCollectionsOptions = ({
+	marketplaceType,
+	marketplaceConfig,
+	config,
+}: {
+	marketplaceType?: MarketplaceType;
+	marketplaceConfig: MarketplaceConfig | undefined;
+	config: SdkConfig;
+}) => {
+	return queryOptions({
+		queryKey: [...collectionKeys.list, marketplaceType],
+		queryFn: marketplaceConfig
+			? () =>
+					fetchListCollections({
+						marketplaceType,
+						marketplaceConfig,
+						config,
+					})
+			: skipToken,
+	});
+};

package/src/react/queries/listTokenMetadata.ts

@@ -32,7 +32,12 @@ export const tokenMetadataOptions = (
 ) => {
 	return queryOptions({
 		...args.query,
-		queryKey: ['listTokenMetadata', args.chainId, args.contractAddress],
+		queryKey: [
+			'listTokenMetadata',
+			args.chainId,
+			args.contractAddress,
+			args.tokenIds,
+		],
 		queryFn: () => fetchTokenMetadata(args, config),
 	});
 };

package/src/react/queries/lowestListing.ts

@@ -9,7 +9,7 @@ import {
 } from '../_internal';
 
 export interface UseLowestListingArgs
-	extends Omit<GetCollectibleLowestListingArgs, 'contractAddress'> {
+	extends Omit<GetCollectibleLowestListingArgs, 'contractAddress' | 'chainId'> {
 	collectionAddress: Address;
 	chainId: number;
 	query?: {
@@ -21,11 +21,13 @@ export async function fetchLowestListing(
 	args: UseLowestListingArgs,
 	config: SdkConfig,
 ): Promise<GetCollectibleLowestListingReturn['order'] | null> {
-	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
 
+	const { chainId, collectionAddress, tokenId } = args;
 	const data = await marketplaceClient.getCollectibleLowestListing({
-		contractAddress: args.collectionAddress,
-		...args,
+		chainId: String(chainId),
+		contractAddress: collectionAddress,
+		tokenId,
 	});
 
 	// let order: Order | undefined;

package/src/react/queries/marketCurrencies.ts

@@ -0,0 +1,81 @@
+import { queryOptions } from '@tanstack/react-query';
+import { type Address, zeroAddress } from 'viem';
+import type { SdkConfig } from '../../types';
+import { compareAddress } from '../../utils';
+import {
+	currencyKeys,
+	getMarketplaceClient,
+	getQueryClient,
+} from '../_internal';
+import { marketplaceConfigOptions } from './marketplaceConfig';
+
+type QueryArg = {
+	enabled?: boolean;
+};
+
+export interface UseMarketCurrenciesArgs {
+	chainId: number;
+	includeNativeCurrency?: boolean;
+	collectionAddress?: Address;
+	query?: QueryArg;
+}
+
+const fetchMarketCurrencies = async (
+	args: UseMarketCurrenciesArgs,
+	config: SdkConfig,
+) => {
+	const includeNativeCurrency = args.includeNativeCurrency ?? true;
+	const marketplaceClient = getMarketplaceClient(config);
+
+	let currencies = await marketplaceClient
+		.listCurrencies({
+			chainId: String(args.chainId),
+		})
+		.then((resp) =>
+			resp.currencies.map((currency) => ({
+				...currency,
+				contractAddress: currency.contractAddress || zeroAddress,
+			})),
+		);
+
+	if (args.collectionAddress) {
+		const queryClient = getQueryClient();
+		const marketplaceConfig = await queryClient.fetchQuery(
+			marketplaceConfigOptions(config),
+		);
+
+		const currenciesOptions = marketplaceConfig.market.collections.find(
+			(collection) =>
+				compareAddress(collection.itemsAddress, args.collectionAddress),
+		)?.currencyOptions;
+
+		// Filter currencies based on collection currency options
+		if (currenciesOptions) {
+			currencies = currencies.filter((currency) =>
+				currenciesOptions.includes(currency.contractAddress),
+			);
+		}
+	}
+
+	if (!includeNativeCurrency) {
+		currencies = currencies.filter((currency) => !currency.nativeCurrency);
+	}
+
+	return currencies;
+};
+
+export const currenciesOptions = (
+	args: UseMarketCurrenciesArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		...args.query,
+		queryKey: [
+			...currencyKeys.lists,
+			args.chainId,
+			args.includeNativeCurrency ?? true,
+			args.collectionAddress,
+		],
+		queryFn: () => fetchMarketCurrencies(args, config),
+	});
+};

package/src/react/queries/marketplaceConfig.ts

@@ -1,100 +1,103 @@
 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';
+import type { ContractType, SdkConfig } from '../../types';
+import type {
+	MarketCollection,
+	MarketPage,
+	MarketplaceConfig,
+	ShopCollection,
+	ShopPage,
+} from '../../types/new-marketplace-types';
+import { configKeys, getBuilderClient } from '../_internal';
+import type { LookupMarketplaceReturn } from '../_internal/api/builder.gen';
 
-export type MarketplaceConfig = MarketplaceSettings & {
-	cssString: string;
-	manifestUrl: string;
-};
-
-const fetchBuilderConfig = async ({
-	projectId,
-	projectAccessKey,
-	env,
+export const fetchMarketplaceConfig = async ({
+	config,
 	prefetchedMarketplaceSettings,
 }: {
-	projectId: string;
-	projectAccessKey: string;
-	env: Env;
-	prefetchedMarketplaceSettings?: MarketplaceSettings;
-}) => {
-	if (prefetchedMarketplaceSettings) {
-		return prefetchedMarketplaceSettings;
+	config: SdkConfig;
+	prefetchedMarketplaceSettings?: LookupMarketplaceReturn; //TODO: Is this the right approach?
+}): Promise<MarketplaceConfig> => {
+	let builderMarketplaceConfig = prefetchedMarketplaceSettings;
+
+	if (!builderMarketplaceConfig) {
+		const builderApi = getBuilderClient(config);
+		const response = await builderApi.lookupMarketplace({
+			projectId: Number(config.projectId),
+		});
+
+		builderMarketplaceConfig = response;
 	}
-	const baseUrl = builderRpcApi(env);
-	const builderApi = new BuilderAPI(baseUrl, projectAccessKey);
-	const response = await builderApi.lookupMarketplaceConfig({
-		projectId: Number(projectId),
+
+	const marketCollections = (
+		builderMarketplaceConfig.marketCollections ?? []
+	).map((collection) => {
+		return {
+			...collection,
+			contractType: collection.contractType as ContractType,
+			marketplaceType: 'market',
+		} satisfies MarketCollection;
 	});
-	return response.settings;
-};
 
-const fetchStyles = async (projectId: string, env: Env) => {
-	const response = await fetch(
-		`${builderMarketplaceApi(projectId, env)}/styles.css`,
+	const shopCollections = builderMarketplaceConfig.shopCollections.map(
+		(collection) => {
+			return {
+				...collection,
+				marketplaceType: 'shop',
+			} satisfies ShopCollection;
+		},
 	);
-	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),
-	]);
+	const market = {
+		...builderMarketplaceConfig.marketplace.market,
+		collections: marketCollections,
+	} satisfies MarketPage;
 
-	return {
-		...marketplaceConfig,
-		cssString,
-		manifestUrl: `${builderMarketplaceApi(projectId, env)}/manifest.json`,
-	};
-};
+	const shop = {
+		...builderMarketplaceConfig.marketplace.shop,
+		collections: shopCollections ?? [],
+	} satisfies ShopPage;
 
-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 marketplaceConfig = {
+		projectId: Number(config.projectId),
+		settings: builderMarketplaceConfig.marketplace.settings,
+		market,
+		shop,
+	} satisfies MarketplaceConfig;
 
-	let prefetchedMarketplaceSettings: MarketplaceSettings | undefined;
-	if (
-		'_internal' in config &&
-		config._internal?.prefetchedMarketplaceSettings
-	) {
-		prefetchedMarketplaceSettings =
-			config._internal.prefetchedMarketplaceSettings;
+	if (config._internal?.overrides?.marketplaceConfig) {
+		const overrides = config._internal.overrides.marketplaceConfig;
+		marketplaceConfig = {
+			...marketplaceConfig,
+			...overrides,
+			market: {
+				...marketplaceConfig.market,
+				...overrides.market,
+				//@ts-expect-error - TODO: Fix this partial type
+				collections:
+					overrides.market?.collections ?? marketplaceConfig.market.collections,
+			},
+			shop: {
+				...marketplaceConfig.shop,
+				...overrides.shop,
+				//@ts-expect-error - TODO: Fix this partial type
+				collections:
+					overrides.shop?.collections ?? marketplaceConfig.shop.collections,
+			},
+		};
 	}
 
-	const projectId = config.projectId;
-	const projectAccessKey = config.projectAccessKey;
+	return marketplaceConfig;
+};
+
+export const marketplaceConfigOptions = (config: SdkConfig) => {
+	const prefetchedMarketplaceSettings =
+		config._internal?.prefetchedMarketplaceSettings;
 
 	return queryOptions({
-		queryKey: [...configKeys.marketplace, env, projectId],
+		queryKey: [...configKeys.marketplace],
 		queryFn: () =>
 			fetchMarketplaceConfig({
-				env,
-				projectId,
-				projectAccessKey,
+				config,
 				prefetchedMarketplaceSettings,
 			}),
 	});

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

@@ -2,95 +2,135 @@
 
 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",
+        "createdAt": "2025-03-16T13:04:16.098Z",
+        "currencyOptions": [
+          "0x0000000000000000000000000000000000000000",
+          "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
         ],
+        "destinationMarketplace": "sequence_marketplace_v2",
+        "feePercentage": 3.5,
+        "filterSettings": {
+          "exclusions": [
+            {
+              "condition": "SPECIFIC_VALUE",
+              "key": "Type",
+              "value": "Sample",
+            },
+          ],
+          "filterOrder": [
+            "Type",
+            "Rarity",
+          ],
+        },
+        "id": 1,
+        "itemsAddress": "0x0000000000000000000000000000000000000000",
+        "marketplaceType": "market",
+        "projectId": 1,
+        "updatedAt": "2025-03-16T13:04:16.098Z",
       },
-      "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",
+        "createdAt": "2025-03-16T13:04:16.098Z",
+        "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",
+          ],
+        },
+        "id": 2,
+        "itemsAddress": "0x1234567890123456789012345678901234567890",
+        "marketplaceType": "market",
+        "projectId": 1,
+        "updatedAt": "2025-03-16T13:04:16.098Z",
       },
-      "marketplaceType": "ORDERBOOK",
+    ],
+    "enabled": true,
+    "ogImage": "https://example.com/og-image.png",
+    "title": "Mock Market Page",
+  },
+  "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",
+    },
+    "style": {},
+    "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",
+  "shop": {
+    "bannerUrl": "https://example.com/shop-banner.png",
+    "collections": [
+      {
+        "bannerUrl": "https://example.com/shop-banner.png",
+        "chainId": 1,
+        "createdAt": "2025-03-16T13:04:16.098Z",
+        "id": 1,
+        "itemsAddress": "0x0000000000000000000000000000000000000000",
+        "marketplaceType": "shop",
+        "name": "Mock Shop Collection",
+        "projectId": 1,
+        "saleAddress": "0x0000000000000000000000000000000000000000",
+        "saleBannerUrl": "https://example.com/shop-sale-banner.png",
+        "updatedAt": "2025-03-16T13:04:16.098Z",
+      },
+      {
+        "bannerUrl": "https://example.com/polygon-shop-banner.png",
+        "chainId": 137,
+        "createdAt": "2025-03-16T13:04:16.098Z",
+        "id": 2,
+        "itemsAddress": "0x1234567890123456789012345678901234567890",
+        "marketplaceType": "shop",
+        "name": "Polygon Shop Collection",
+        "projectId": 1,
+        "saleAddress": "0x1234567890123456789012345678901234567890",
+        "saleBannerUrl": "https://example.com/polygon-shop-sale-banner.png",
+        "updatedAt": "2025-03-16T13:04:16.098Z",
+      },
     ],
-    "includeEIP6963Wallets": true,
-    "oidcIssuers": {},
-    "walletType": "UNIVERSAL",
+    "enabled": true,
+    "ogImage": "https://example.com/shop-og-image.png",
+    "title": "Mock Shop Page",
   },
 }
 `;

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

@@ -1,9 +1,7 @@
-import { QueryClient } from '@tanstack/react-query';
 import { describe, expect, it } from 'vitest';
 import type { SdkConfig } from '../../../types';
 import { createSSRClient } from '../create-ssr-client';
 
-const queryClient = new QueryClient();
 const wagmiCookie =
 	'wagmi.store={"state":{"connections":{"__type":"Map","value":[]},"chainId":1,"current":null},"version":2}; ';
 
@@ -15,7 +13,6 @@ const config = {
 const client = createSSRClient({
 	cookie: wagmiCookie,
 	config,
-	queryClient,
 });
 
 describe('createSSRClient', () => {