@0xsequence/marketplace-sdk 0.8.12 → 0.10.0

package/src/react/queries/listTokenMetadata.ts

@@ -1,20 +1,26 @@
 import { queryOptions } from '@tanstack/react-query';
 import type { SdkConfig } from '../../types';
-import { getMetadataClient } from '../_internal';
+import {
+	getMetadataClient,
+	tokenKeys,
+	type ValuesOptional,
+} from '../_internal';
+import type { StandardQueryOptions } from '../types/query';
 
-export interface FetchTokenMetadataArgs {
+export interface FetchListTokenMetadataParams {
 	chainId: number;
 	contractAddress: string;
 	tokenIds: string[];
-	query?: {
-		enabled?: boolean;
-	};
+	config: SdkConfig;
 }
 
-const fetchTokenMetadata = async (
-	{ chainId, contractAddress, tokenIds }: FetchTokenMetadataArgs,
-	config: SdkConfig,
-) => {
+/**
+ * Fetches token metadata from the metadata API
+ */
+export async function fetchListTokenMetadata(
+	params: FetchListTokenMetadataParams,
+) {
+	const { chainId, contractAddress, tokenIds, config } = params;
 	const metadataClient = getMetadataClient(config);
 
 	const response = await metadataClient.getTokenMetadata({
@@ -24,20 +30,38 @@ const fetchTokenMetadata = async (
 	});
 
 	return response.tokenMetadata;
-};
+}
+
+export type ListTokenMetadataQueryOptions =
+	ValuesOptional<FetchListTokenMetadataParams> & {
+		query?: StandardQueryOptions;
+	};
+
+export function listTokenMetadataQueryOptions(
+	params: ListTokenMetadataQueryOptions,
+) {
+	const enabled = Boolean(
+		params.chainId &&
+			params.contractAddress &&
+			params.tokenIds?.length &&
+			params.config &&
+			(params.query?.enabled ?? true),
+	);
 
-export const tokenMetadataOptions = (
-	args: FetchTokenMetadataArgs,
-	config: SdkConfig,
-) => {
 	return queryOptions({
-		...args.query,
-		queryKey: [
-			'listTokenMetadata',
-			args.chainId,
-			args.contractAddress,
-			args.tokenIds,
-		],
-		queryFn: () => fetchTokenMetadata(args, config),
+		queryKey: [...tokenKeys.metadata, params],
+		queryFn: () =>
+			fetchListTokenMetadata({
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				chainId: params.chainId!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				contractAddress: params.contractAddress!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				tokenIds: params.tokenIds!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				config: params.config!,
+			}),
+		...params.query,
+		enabled,
 	});
-};
+}

package/src/react/queries/lowestListing.ts

@@ -1,54 +1,69 @@
 import { queryOptions } from '@tanstack/react-query';
-import type { Address } from 'viem';
 import type { SdkConfig } from '../../types';
 import {
+	collectableKeys,
 	type GetCollectibleLowestListingArgs,
 	type GetCollectibleLowestListingReturn,
-	collectableKeys,
 	getMarketplaceClient,
+	type ValuesOptional,
 } from '../_internal';
+import type { StandardQueryOptions } from '../types/query';
 
-export interface UseLowestListingArgs
+export interface FetchLowestListingParams
 	extends Omit<GetCollectibleLowestListingArgs, 'contractAddress' | 'chainId'> {
-	collectionAddress: Address;
+	collectionAddress: string;
 	chainId: number;
-	query?: {
-		enabled?: boolean;
-	};
+	config: SdkConfig;
 }
 
+/**
+ * Fetches the lowest listing for a collectible from the marketplace API
+ */
 export async function fetchLowestListing(
-	args: UseLowestListingArgs,
-	config: SdkConfig,
+	params: FetchLowestListingParams,
 ): Promise<GetCollectibleLowestListingReturn['order'] | null> {
+	const { collectionAddress, chainId, config, ...additionalApiParams } = params;
+
 	const marketplaceClient = getMarketplaceClient(config);
 
-	const { chainId, collectionAddress, tokenId } = args;
-	const data = await marketplaceClient.getCollectibleLowestListing({
-		chainId: String(chainId),
+	const apiArgs: GetCollectibleLowestListingArgs = {
 		contractAddress: collectionAddress,
-		tokenId,
-	});
-
-	// let order: Order | undefined;
-	// if (data.order) {
-	// 	order = {
-	// 		...data.order,
-	// 		priceAmount: BigInt(data.order.priceAmount),
-	// 		priceAmountNet: BigInt(data.order.priceAmountNet),
-	// 	};
-	// }
+		chainId: String(chainId),
+		...additionalApiParams,
+	};
 
-	return data.order || null;
+	const result = await marketplaceClient.getCollectibleLowestListing(apiArgs);
+	return result.order || null;
 }
 
-export function lowestListingOptions(
-	args: UseLowestListingArgs,
-	config: SdkConfig,
-) {
+export type LowestListingQueryOptions =
+	ValuesOptional<FetchLowestListingParams> & {
+		query?: StandardQueryOptions;
+	};
+
+export function lowestListingQueryOptions(params: LowestListingQueryOptions) {
+	const enabled = Boolean(
+		params.collectionAddress &&
+			params.chainId &&
+			params.tokenId &&
+			params.config &&
+			(params.query?.enabled ?? true),
+	);
+
 	return queryOptions({
-		enabled: args.query?.enabled ?? true,
-		queryKey: [...collectableKeys.lowestListings, args],
-		queryFn: () => fetchLowestListing(args, config),
+		queryKey: [...collectableKeys.lowestListings, params],
+		queryFn: () =>
+			fetchLowestListing({
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				chainId: params.chainId!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				collectionAddress: params.collectionAddress!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				tokenId: params.tokenId!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				config: params.config!,
+			}),
+		...params.query,
+		enabled,
 	});
 }

package/src/react/queries/marketCurrencies.ts

@@ -6,30 +6,31 @@ import {
 	currencyKeys,
 	getMarketplaceClient,
 	getQueryClient,
+	type ValuesOptional,
 } from '../_internal';
+import type { StandardQueryOptions } from '../types/query';
 import { marketplaceConfigOptions } from './marketplaceConfig';
 
-type QueryArg = {
-	enabled?: boolean;
-};
-
-export interface UseMarketCurrenciesArgs {
+export interface FetchMarketCurrenciesParams {
 	chainId: number;
 	includeNativeCurrency?: boolean;
 	collectionAddress?: Address;
-	query?: QueryArg;
+	config: SdkConfig;
 }
 
-const fetchMarketCurrencies = async (
-	args: UseMarketCurrenciesArgs,
-	config: SdkConfig,
-) => {
-	const includeNativeCurrency = args.includeNativeCurrency ?? true;
+/**
+ * Fetches supported currencies for a marketplace
+ */
+export async function fetchMarketCurrencies(
+	params: FetchMarketCurrenciesParams,
+) {
+	const { chainId, includeNativeCurrency, collectionAddress, config } = params;
+	const includeNativeCurrencyOption = includeNativeCurrency ?? true;
 	const marketplaceClient = getMarketplaceClient(config);
 
 	let currencies = await marketplaceClient
 		.listCurrencies({
-			chainId: String(args.chainId),
+			chainId: String(chainId),
 		})
 		.then((resp) =>
 			resp.currencies.map((currency) => ({
@@ -38,7 +39,7 @@ const fetchMarketCurrencies = async (
 			})),
 		);
 
-	if (args.collectionAddress) {
+	if (collectionAddress) {
 		const queryClient = getQueryClient();
 		const marketplaceConfig = await queryClient.fetchQuery(
 			marketplaceConfigOptions(config),
@@ -46,7 +47,7 @@ const fetchMarketCurrencies = async (
 
 		const currenciesOptions = marketplaceConfig.market.collections.find(
 			(collection) =>
-				compareAddress(collection.itemsAddress, args.collectionAddress),
+				compareAddress(collection.itemsAddress, collectionAddress),
 		)?.currencyOptions;
 
 		// Filter currencies based on collection currency options
@@ -57,25 +58,37 @@ const fetchMarketCurrencies = async (
 		}
 	}
 
-	if (!includeNativeCurrency) {
+	if (!includeNativeCurrencyOption) {
 		currencies = currencies.filter((currency) => !currency.nativeCurrency);
 	}
 
 	return currencies;
-};
+}
+
+export type MarketCurrenciesQueryOptions =
+	ValuesOptional<FetchMarketCurrenciesParams> & {
+		query?: StandardQueryOptions;
+	};
+
+export function marketCurrenciesQueryOptions(
+	params: MarketCurrenciesQueryOptions,
+) {
+	const enabled = Boolean(
+		params.chainId && params.config && (params.query?.enabled ?? true),
+	);
 
-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),
+		queryKey: [...currencyKeys.lists, params],
+		queryFn: () =>
+			fetchMarketCurrencies({
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				chainId: params.chainId!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				config: params.config!,
+				includeNativeCurrency: params.includeNativeCurrency,
+				collectionAddress: params.collectionAddress,
+			}),
+		...params.query,
+		enabled,
 	});
-};
+}

package/src/react/queries/marketplaceConfig.ts

@@ -15,7 +15,7 @@ export const fetchMarketplaceConfig = async ({
 	prefetchedMarketplaceSettings,
 }: {
 	config: SdkConfig;
-	prefetchedMarketplaceSettings?: LookupMarketplaceReturn; //TODO: Is this the right approach?
+	prefetchedMarketplaceSettings?: LookupMarketplaceReturn;
 }): Promise<MarketplaceConfig> => {
 	let builderMarketplaceConfig = prefetchedMarketplaceSettings;
 
@@ -38,7 +38,7 @@ export const fetchMarketplaceConfig = async ({
 		} satisfies MarketCollection;
 	});
 
-	const shopCollections = builderMarketplaceConfig.shopCollections.map(
+	const shopCollections = (builderMarketplaceConfig.shopCollections ?? []).map(
 		(collection) => {
 			return {
 				...collection,
@@ -72,14 +72,14 @@ export const fetchMarketplaceConfig = async ({
 			market: {
 				...marketplaceConfig.market,
 				...overrides.market,
-				//@ts-expect-error - TODO: Fix this partial type
+				//@ts-expect-error - TODO: Fix this partial type. We need to align new-marketplace-types with builder.gen.ts
 				collections:
 					overrides.market?.collections ?? marketplaceConfig.market.collections,
 			},
 			shop: {
 				...marketplaceConfig.shop,
 				...overrides.shop,
-				//@ts-expect-error - TODO: Fix this partial type
+				//@ts-expect-error - TODO: Fix this partial type. We need to align new-marketplace-types with builder.gen.ts
 				collections:
 					overrides.shop?.collections ?? marketplaceConfig.shop.collections,
 			},

package/src/react/queries/primarySaleItems.ts

@@ -0,0 +1,85 @@
+import { infiniteQueryOptions } from '@tanstack/react-query';
+import type { Address } from 'viem';
+import type { SdkConfig } from '../../types';
+import {
+	getMarketplaceClient,
+	type ListPrimarySaleItemsArgs,
+	type ListPrimarySaleItemsReturn,
+	type Page,
+	type PrimarySaleItemsFilter,
+	type ValuesOptional,
+} from '../_internal';
+import type { StandardQueryOptions } from '../types/query';
+
+export interface FetchPrimarySaleItemsParams {
+	chainId: number;
+	primarySaleContractAddress: Address;
+	filter?: PrimarySaleItemsFilter;
+	page?: Page;
+	config: SdkConfig;
+}
+
+/**
+ * Fetches primary sale items from the marketplace API
+ */
+export async function fetchPrimarySaleItems(
+	params: FetchPrimarySaleItemsParams,
+): Promise<ListPrimarySaleItemsReturn> {
+	const { chainId, primarySaleContractAddress, filter, page, config } = params;
+
+	const marketplaceClient = getMarketplaceClient(config);
+
+	return marketplaceClient.listPrimarySaleItems({
+		chainId: String(chainId),
+		primarySaleContractAddress,
+		filter,
+		page,
+	});
+}
+
+export type ListPrimarySaleItemsQueryOptions =
+	ValuesOptional<FetchPrimarySaleItemsParams> & {
+		query?: StandardQueryOptions;
+	};
+
+export const listPrimarySaleItemsQueryOptions = (
+	params: ListPrimarySaleItemsQueryOptions,
+) => {
+	const enabled = Boolean(
+		params.primarySaleContractAddress &&
+			params.chainId &&
+			params.config &&
+			(params.query?.enabled ?? true),
+	);
+
+	type PageParam = { page: number; pageSize: number };
+	const initialPage: PageParam = { page: 1, pageSize: 30 };
+
+	return infiniteQueryOptions({
+		queryKey: ['listPrimarySaleItems', params],
+		queryFn: async ({ pageParam }) => {
+			return fetchPrimarySaleItems({
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				chainId: params.chainId!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				primarySaleContractAddress: params.primarySaleContractAddress!,
+				filter: params.filter,
+				page: pageParam,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				config: params.config!,
+			});
+		},
+		initialPageParam: initialPage,
+		getNextPageParam: (lastPage) =>
+			lastPage.page?.more
+				? {
+						page: (lastPage.page?.page || 1) + 1,
+						pageSize: lastPage.page?.pageSize || 30,
+					}
+				: undefined,
+		...params.query,
+		enabled,
+	});
+};
+
+export type { ListPrimarySaleItemsArgs, ListPrimarySaleItemsReturn };

package/src/react/queries/primarySaleItemsCount.ts

@@ -0,0 +1,64 @@
+import { queryOptions } from '@tanstack/react-query';
+import type { Address } from 'viem';
+import type { SdkConfig } from '../../types';
+import {
+	type GetCountOfPrimarySaleItemsReturn,
+	getMarketplaceClient,
+	type PrimarySaleItemsFilter,
+} from '../_internal';
+import type { StandardQueryOptions } from '../types/query';
+
+export interface FetchPrimarySaleItemsCountParams {
+	chainId: number;
+	primarySaleContractAddress: Address;
+	filter?: PrimarySaleItemsFilter;
+	config: SdkConfig;
+}
+
+/**
+ * Fetches the count of primary sale items from the marketplace API
+ */
+export async function fetchPrimarySaleItemsCount(
+	params: FetchPrimarySaleItemsCountParams,
+): Promise<GetCountOfPrimarySaleItemsReturn> {
+	const { chainId, primarySaleContractAddress, filter, config } = params;
+
+	const marketplaceClient = getMarketplaceClient(config);
+	return marketplaceClient.getCountOfPrimarySaleItems({
+		chainId: String(chainId),
+		primarySaleContractAddress,
+		filter,
+	});
+}
+
+export type PrimarySaleItemsCountQueryOptions =
+	Partial<FetchPrimarySaleItemsCountParams> & {
+		query?: StandardQueryOptions;
+	};
+
+export const primarySaleItemsCountQueryOptions = (
+	args: PrimarySaleItemsCountQueryOptions,
+) => {
+	const enabled = Boolean(
+		args.primarySaleContractAddress &&
+			args.chainId &&
+			args.config &&
+			(args.query?.enabled ?? true),
+	);
+
+	return queryOptions({
+		queryKey: ['primarySaleItemsCount', args],
+		queryFn: () =>
+			fetchPrimarySaleItemsCount({
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				chainId: args.chainId!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				primarySaleContractAddress: args.primarySaleContractAddress!,
+				filter: args.filter,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				config: args.config!,
+			}),
+		...args.query,
+		enabled,
+	});
+};

package/src/react/queries/tokenSupplies.ts

@@ -0,0 +1,93 @@
+import type { GetTokenSuppliesArgs } from '@0xsequence/indexer';
+import { queryOptions } from '@tanstack/react-query';
+import type { SdkConfig } from '../../types';
+import {
+	getIndexerClient,
+	LaosAPI,
+	tokenKeys,
+	type ValuesOptional,
+} from '../_internal';
+import type { StandardQueryOptions } from '../types/query';
+
+export interface FetchTokenSuppliesParams
+	extends Omit<GetTokenSuppliesArgs, 'contractAddress'> {
+	chainId: number;
+	collectionAddress: string;
+	config: SdkConfig;
+	isLaos721?: boolean;
+}
+
+/**
+ * Fetches token supplies with support for both indexer and LAOS APIs
+ * Uses the more efficient single-contract APIs from both services
+ */
+export async function fetchTokenSupplies(params: FetchTokenSuppliesParams) {
+	const { chainId, collectionAddress, config, isLaos721, ...rest } = params;
+
+	if (isLaos721) {
+		const laosApi = new LaosAPI();
+
+		// Convert indexer Page format to LAOS PaginationOptions format
+		const laosPage = rest.page
+			? {
+					sort:
+						rest.page.sort?.map((sortBy) => ({
+							column: sortBy.column,
+							order: sortBy.order,
+						})) || [],
+				}
+			: undefined;
+
+		const result = await laosApi.getTokenSupplies({
+			chainId: chainId.toString(),
+			contractAddress: collectionAddress,
+			includeMetadata: rest.includeMetadata,
+			page: laosPage,
+		});
+
+		return result;
+	}
+
+	const indexerClient = getIndexerClient(chainId, config);
+
+	const apiArgs: GetTokenSuppliesArgs = {
+		contractAddress: collectionAddress,
+		...rest,
+	};
+
+	const result = await indexerClient.getTokenSupplies(apiArgs);
+	return result;
+}
+
+export type TokenSuppliesQueryOptions =
+	ValuesOptional<FetchTokenSuppliesParams> & {
+		query?: StandardQueryOptions;
+	};
+
+export function tokenSuppliesQueryOptions(params: TokenSuppliesQueryOptions) {
+	const enabled = Boolean(
+		params.chainId &&
+			params.collectionAddress &&
+			params.config &&
+			(params.query?.enabled ?? true),
+	);
+
+	return queryOptions({
+		queryKey: [...tokenKeys.supplies, params],
+		queryFn: () =>
+			fetchTokenSupplies({
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				chainId: params.chainId!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				collectionAddress: params.collectionAddress!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				config: params.config!,
+				isLaos721: params.isLaos721,
+				includeMetadata: params.includeMetadata,
+				metadataOptions: params.metadataOptions,
+				page: params.page,
+			}),
+		...params.query,
+		enabled,
+	});
+}

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

@@ -72,7 +72,7 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
     ],
     "enabled": true,
     "ogImage": "https://example.com/og-image.png",
-    "title": "Mock Market Page",
+    "private": false,
   },
   "projectId": NaN,
   "settings": {
@@ -112,6 +112,11 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
         "projectId": 1,
         "saleAddress": "0x0000000000000000000000000000000000000000",
         "saleBannerUrl": "https://example.com/shop-sale-banner.png",
+        "tokenIds": [
+          "1",
+          "2",
+          "3",
+        ],
         "updatedAt": "2025-03-16T13:04:16.098Z",
       },
       {
@@ -125,12 +130,17 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
         "projectId": 1,
         "saleAddress": "0x1234567890123456789012345678901234567890",
         "saleBannerUrl": "https://example.com/polygon-shop-sale-banner.png",
+        "tokenIds": [
+          "4",
+          "5",
+          "6",
+        ],
         "updatedAt": "2025-03-16T13:04:16.098Z",
       },
     ],
     "enabled": true,
     "ogImage": "https://example.com/shop-og-image.png",
-    "title": "Mock Shop Page",
+    "private": false,
   },
 }
 `;

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

@@ -1,4 +1,4 @@
-import { type State, cookieToInitialState } from 'wagmi';
+import { cookieToInitialState, type State } from 'wagmi';
 import type { SdkConfig } from '../../types/sdk-config';
 import { getQueryClient } from '../_internal/api/get-query-client';
 import { createWagmiConfig } from '../_internal/wagmi/create-config';

package/src/react/types/query.ts

@@ -0,0 +1,34 @@
+/**
+ * Standard query options that can be used across all marketplace SDK hooks
+ *
+ * Based on TanStack Query v5 UseQueryOptions, but simplified, the type from TanStack is hard to modify
+ */
+export interface StandardQueryOptions<TError = Error> {
+	/** Whether the query should be enabled/disabled */
+	enabled?: boolean;
+	/** Time in milliseconds that  data is considered fresh */
+	staleTime?: number;
+	gcTime?: number;
+	// biome-ignore lint/suspicious/noExplicitAny: TanStack Query requires any type for query parameter
+	refetchInterval?: number | false | ((query: any) => number | false);
+	refetchOnWindowFocus?: boolean;
+	refetchOnMount?: boolean;
+	refetchOnReconnect?: boolean;
+	retry?: boolean | number | ((failureCount: number, error: TError) => boolean);
+	retryDelay?: number | ((retryAttempt: number, error: TError) => number);
+	// select is not supported for now
+	// select?: <TSelected = TData>(data: TData) => TSelected;
+	suspense?: boolean;
+	/** Placeholder data is not supported for now */
+	// placeholderData?: TData | (() => TData);
+}
+
+/**
+ * Standard infinite query options that can be used across all marketplace SDK hooks
+ * that support infinite pagination
+ */
+export interface StandardInfiniteQueryOptions<TError = Error>
+	extends StandardQueryOptions<TError> {
+	/** Maximum number of pages to fetch */
+	maxPages?: number;
+}

package/src/react/ui/components/ModelViewer.tsx

@@ -1,5 +1,5 @@
 import { Skeleton } from '@0xsequence/design-system';
-import { Suspense, lazy } from 'react';
+import { lazy, Suspense } from 'react';
 
 const ModelViewerComponent = lazy(() =>
 	import('@google/model-viewer').then(() => ({