@0xsequence/marketplace-sdk 0.0.0-20250513233135

package/src/react/queries/inventory.ts

@@ -0,0 +1,303 @@
+import type {
+	ContractInfo,
+	Page as IndexerPage,
+	TokenBalance,
+} from '@0xsequence/indexer';
+import { infiniteQueryOptions } from '@tanstack/react-query';
+import type { Address } from 'viem';
+import { OrderSide, type Page, type SdkConfig } from '../../types';
+import {
+	type CollectibleOrder,
+	type ContractType,
+	getIndexerClient,
+} from '../_internal';
+import { fetchCollectibles } from './listCollectibles';
+
+export interface UseInventoryArgs {
+	accountAddress: Address;
+	collectionAddress: Address;
+	chainId: number;
+	isLaos721?: boolean;
+	query?: {
+		enabled?: boolean;
+	};
+}
+
+// Maintain collection state across calls
+interface InventoryState {
+	seenTokenIds: Set<string>;
+	marketplaceFinished: boolean;
+	// Track if we've already fetched all indexer tokens
+	indexerTokensFetched: boolean;
+	// Store the token balances from the indexer
+	indexerTokenBalances: Map<string, CollectibleWithBalance>;
+}
+
+// Store state per collection
+const stateByCollection = new Map<string, InventoryState>();
+
+const getCollectionKey = (args: UseInventoryArgs) =>
+	`${args.chainId}-${args.collectionAddress}-${args.accountAddress}`;
+
+interface GetInventoryArgs extends Omit<UseInventoryArgs, 'query'> {
+	isLaos721: boolean;
+}
+
+interface CollectibleWithBalance extends CollectibleOrder {
+	balance: string;
+	contractInfo?: ContractInfo;
+	contractType: ContractType.ERC1155 | ContractType.ERC721;
+}
+
+export interface CollectiblesResponse {
+	collectibles: CollectibleWithBalance[];
+	page: Page;
+}
+
+function getOrInitState(collectionKey: string): InventoryState {
+	if (!stateByCollection.has(collectionKey)) {
+		stateByCollection.set(collectionKey, {
+			seenTokenIds: new Set<string>(),
+			marketplaceFinished: false,
+			indexerTokensFetched: false,
+			indexerTokenBalances: new Map(),
+		});
+	}
+
+	// biome-ignore lint/style/noNonNullAssertion: guaranteed to exist, by the above init
+	return stateByCollection.get(collectionKey)!;
+}
+
+function collectibleFromTokenBalance(
+	token: TokenBalance,
+): CollectibleWithBalance {
+	return {
+		metadata: {
+			tokenId: token.tokenID ?? '',
+			attributes: token.tokenMetadata?.attributes ?? [],
+			image: token.tokenMetadata?.image,
+			name: token.tokenMetadata?.name ?? '',
+			description: token.tokenMetadata?.description,
+			video: token.tokenMetadata?.video,
+			audio: token.tokenMetadata?.audio,
+		},
+		contractInfo: token.contractInfo,
+		contractType: token.contractType as
+			| ContractType.ERC1155
+			| ContractType.ERC721,
+		balance: token.balance,
+	};
+}
+
+async function fetchAllIndexerTokens(
+	chainId: number,
+	accountAddress: Address,
+	collectionAddress: Address,
+	config: SdkConfig,
+	state: InventoryState,
+): Promise<void> {
+	const indexerClient = getIndexerClient(chainId, config);
+
+	let page: IndexerPage = {
+		pageSize: 50,
+	};
+
+	while (true) {
+		const { balances, page: nextPage } = await indexerClient.getTokenBalances({
+			accountAddress,
+			contractAddress: collectionAddress,
+			includeMetadata: true,
+			page: page,
+		});
+
+		for (const balance of balances) {
+			if (balance.tokenID) {
+				state.indexerTokenBalances.set(
+					balance.tokenID,
+					collectibleFromTokenBalance(balance),
+				);
+			}
+		}
+
+		if (!nextPage.more) {
+			break;
+		}
+		page = nextPage;
+	}
+
+	state.indexerTokensFetched = true;
+}
+
+// Process indexer tokens that we haven't seen yet
+function processRemainingIndexerTokens(
+	state: InventoryState,
+	page: Page,
+): CollectiblesResponse {
+	const allTokens = Array.from(state.indexerTokenBalances.values());
+
+	// Filter out tokens that we've already seen
+	const newTokens = allTokens.filter(
+		(token) => !state.seenTokenIds.has(token.metadata.tokenId),
+	);
+
+	// Calculate pagination
+	const startIndex = (page.page - 1) * page.pageSize;
+	const endIndex = startIndex + page.pageSize;
+	const paginatedTokens = newTokens.slice(startIndex, endIndex);
+
+	// Add new token IDs to the set
+	for (const token of paginatedTokens) {
+		state.seenTokenIds.add(token.metadata.tokenId);
+	}
+
+	return {
+		collectibles: paginatedTokens,
+		page: {
+			page: page.page,
+			pageSize: page.pageSize,
+			more: endIndex < newTokens.length,
+		},
+	};
+}
+
+function processMarketplaceCollectibles(
+	collectibles: CollectibleOrder[],
+	state: InventoryState,
+	page: Page,
+): {
+	enrichedCollectibles: CollectibleWithBalance[];
+	missingTokens: CollectibleWithBalance[];
+} {
+	// Add new token IDs to the set
+	for (const c of collectibles) {
+		state.seenTokenIds.add(c.metadata.tokenId);
+	}
+
+	// Enrich marketplace collectibles with balance data from indexer
+	const enrichedCollectibles = collectibles.map((c: CollectibleOrder) => {
+		const tokenId = c.metadata.tokenId;
+		const indexerData = state.indexerTokenBalances.get(tokenId);
+
+		return {
+			...c,
+			balance: indexerData?.balance,
+			contractInfo: indexerData?.contractInfo,
+			contractType: indexerData?.contractType,
+		} as CollectibleWithBalance;
+	});
+
+	// Check for missing tokens in the marketplace data
+	const marketplaceTokenIds = new Set(
+		enrichedCollectibles.map((c) => c.metadata.tokenId),
+	);
+
+	const missingTokens = Array.from(state.indexerTokenBalances.entries())
+		.filter(([tokenId]) => !marketplaceTokenIds.has(tokenId))
+		.map(([_, balance]) => balance)
+		.slice(0, page.pageSize);
+
+	return { enrichedCollectibles, missingTokens };
+}
+
+export async function fetchInventory(
+	args: GetInventoryArgs,
+	config: SdkConfig,
+	page: Page,
+): Promise<CollectiblesResponse> {
+	const { accountAddress, collectionAddress, chainId, isLaos721 } = args;
+	const collectionKey = getCollectionKey(args);
+	const state = getOrInitState(collectionKey);
+
+	// On first run, fetch all pages from the indexer
+	if (!state.indexerTokensFetched) {
+		await fetchAllIndexerTokens(
+			chainId,
+			accountAddress,
+			collectionAddress,
+			config,
+			state,
+		);
+	}
+
+	// If marketplace API has no more results, use the indexer data
+	if (state.marketplaceFinished) {
+		return processRemainingIndexerTokens(state, page);
+	}
+
+	// Fetch collectibles from marketplace API
+	const collectibles = await fetchCollectibles(
+		{
+			chainId,
+			collectionAddress,
+			filter: {
+				inAccounts: [accountAddress],
+				includeEmpty: true,
+			},
+			side: OrderSide.listing,
+			isLaos721,
+		},
+		config,
+		page,
+	);
+
+	// Process the collectibles and find missing tokens
+	const { enrichedCollectibles, missingTokens } =
+		processMarketplaceCollectibles(collectibles.collectibles, state, page);
+
+	// If there are no more results from the marketplace API
+	if (!collectibles.page?.more) {
+		// Mark marketplace as finished and start using indexer data on next call
+		state.marketplaceFinished = true;
+		return {
+			collectibles: [...enrichedCollectibles, ...missingTokens],
+			page: {
+				page: collectibles.page?.page ?? page.page,
+				pageSize: collectibles.page?.pageSize ?? page.pageSize,
+				more: missingTokens.length > 0,
+			},
+		};
+	}
+
+	return {
+		collectibles: enrichedCollectibles,
+		page: {
+			page: collectibles.page?.page ?? page.page,
+			pageSize: collectibles.page?.pageSize ?? page.pageSize,
+			more: Boolean(collectibles.page?.more),
+		},
+	};
+}
+
+export function inventoryOptions(args: UseInventoryArgs, config: SdkConfig) {
+	const collectionKey = getCollectionKey(args);
+	const enabledQuery = args.query?.enabled ?? true;
+	const enabled =
+		enabledQuery && !!args.accountAddress && !!args.collectionAddress;
+
+	return infiniteQueryOptions({
+		queryKey: [
+			'inventory',
+			args.accountAddress,
+			args.collectionAddress,
+			args.chainId,
+		],
+		queryFn: ({ pageParam }) =>
+			fetchInventory(
+				{
+					...args,
+					isLaos721: args.isLaos721 ?? false,
+				},
+				config,
+				pageParam,
+			),
+		initialPageParam: { page: 1, pageSize: 30 } as Page,
+		getNextPageParam: (lastPage) =>
+			lastPage.page?.more ? lastPage.page : undefined,
+		enabled,
+		meta: {
+			onInvalidate: () => {
+				stateByCollection.delete(collectionKey);
+			},
+		},
+	});
+}

package/src/react/queries/listBalances.ts

@@ -0,0 +1,91 @@
+import type { GetTokenBalancesReturn, Page } from '@0xsequence/indexer';
+import { infiniteQueryOptions } from '@tanstack/react-query';
+import type { Hex } from 'viem';
+import type { SdkConfig } from '../../types';
+import { balanceQueries, getIndexerClient } from '../_internal';
+
+export type UseListBalancesArgs = {
+	chainId: number;
+	accountAddress?: Hex;
+	contractAddress?: Hex;
+	tokenId?: string;
+	includeMetadata?: boolean;
+	metadataOptions?: {
+		verifiedOnly?: boolean;
+		unverifiedOnly?: boolean;
+		includeContracts?: Hex[];
+	};
+	includeCollectionTokens?: boolean;
+	page?: Page;
+	isLaos721?: boolean;
+	//TODO: More options
+	query?: {
+		enabled?: boolean;
+	};
+};
+
+export async function fetchBalances(
+	args: UseListBalancesArgs,
+	config: SdkConfig,
+	page: Page,
+): Promise<GetTokenBalancesReturn> {
+	if (args.isLaos721) {
+		const response = await fetch(
+			'https://extensions.api.laosnetwork.io/token/GetTokenBalances',
+			{
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+				body: JSON.stringify({
+					chainId: args.chainId.toString(),
+					accountAddress: args.accountAddress,
+					contractAddress: args.contractAddress,
+					includeMetadata: args.includeMetadata ?? true,
+					page: {
+						sort: [
+							{
+								column: 'CREATED_AT',
+								order: 'DESC',
+							},
+						],
+					},
+				}),
+			},
+		);
+
+		if (!response.ok) {
+			throw new Error(`Laos API request failed with status ${response.status}`);
+		}
+
+		// TODO: This is pretty unsafe, we should validate the response
+		return response.json() as Promise<GetTokenBalancesReturn>;
+	}
+
+	const indexerClient = getIndexerClient(args.chainId, config);
+	return indexerClient.getTokenBalances({
+		...args,
+		tokenID: args.tokenId,
+		page: page,
+	});
+}
+
+/**
+ * Creates a tanstack infinite query options object for the balances query
+ *
+ * @param args - The query arguments
+ * @param config - SDK configuration
+ * @returns Query options configuration
+ */
+export function listBalancesOptions(
+	args: UseListBalancesArgs,
+	config: SdkConfig,
+) {
+	return infiniteQueryOptions({
+		...args.query,
+		queryKey: [...balanceQueries.lists, args, config],
+		queryFn: ({ pageParam }) => fetchBalances(args, config, pageParam),
+		initialPageParam: { page: 1, pageSize: 30 } as Page,
+		getNextPageParam: (lastPage) => lastPage.page.after,
+	});
+}

package/src/react/queries/listCollectibles.ts

@@ -0,0 +1,105 @@
+import { infiniteQueryOptions } from '@tanstack/react-query';
+import type { Address, Hex } from 'viem';
+import type { Page, SdkConfig } from '../../types';
+import type {
+	CollectibleOrder,
+	CollectiblesFilter,
+	ListCollectiblesArgs,
+	ListCollectiblesReturn,
+} from '../_internal';
+import { OrderSide, collectableKeys, getMarketplaceClient } from '../_internal';
+import { type UseListBalancesArgs, fetchBalances } from './listBalances';
+export type UseListCollectiblesArgs = {
+	collectionAddress: Hex;
+	chainId: number;
+	side: OrderSide;
+	filter?: CollectiblesFilter;
+	isLaos721?: boolean;
+	query?: {
+		enabled?: boolean;
+	};
+};
+
+/**
+ * Fetches a list of collectibles with pagination support
+ *
+ * @param args - Arguments for the API call
+ * @param config - SDK configuration
+ * @param page - Page parameters for pagination
+ * @returns The collectibles data
+ */
+export async function fetchCollectibles(
+	args: UseListCollectiblesArgs,
+	config: SdkConfig,
+	page: Page,
+): Promise<ListCollectiblesReturn> {
+	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	const parsedArgs = {
+		...args,
+		contractAddress: args.collectionAddress,
+		page: page,
+		side: args.side,
+	} satisfies ListCollectiblesArgs;
+
+	if (args.isLaos721 && args.side === OrderSide.listing) {
+		try {
+			const fetchBalancesArgs = {
+				chainId: args.chainId,
+				accountAddress: args.filter?.inAccounts?.[0] as Address,
+				contractAddress: args.collectionAddress,
+				page: page,
+				includeMetadata: true,
+				isLaos721: true,
+			} satisfies UseListBalancesArgs;
+
+			const balances = await fetchBalances(fetchBalancesArgs, config, page);
+			const collectibles: CollectibleOrder[] = balances.balances.map(
+				(balance) => {
+					if (!balance.tokenMetadata)
+						throw new Error('Token metadata not found');
+					return {
+						metadata: {
+							tokenId: balance.tokenID ?? '',
+							attributes: balance.tokenMetadata.attributes,
+							image: balance.tokenMetadata.image,
+							name: balance.tokenMetadata.name,
+							description: balance.tokenMetadata.description,
+							video: balance.tokenMetadata.video,
+							audio: balance.tokenMetadata.audio,
+						},
+					};
+				},
+			);
+			return {
+				collectibles: collectibles,
+				//@ts-expect-error
+				page: balances.page,
+			};
+		} catch (error) {
+			// If the request fails, ignore the error and return the collectibles from our indexer
+			console.error(error);
+		}
+	}
+	return await marketplaceClient.listCollectibles(parsedArgs);
+}
+
+/**
+ * Creates a tanstack infinite query options object for the collectibles query
+ *
+ * @param args - The query arguments
+ * @param config - SDK configuration
+ * @returns Query options configuration
+ */
+export function listCollectiblesOptions(
+	args: UseListCollectiblesArgs,
+	config: SdkConfig,
+) {
+	return infiniteQueryOptions({
+		...args.query,
+		queryKey: [...collectableKeys.lists, args, config],
+		queryFn: ({ pageParam }) => fetchCollectibles(args, config, pageParam),
+		initialPageParam: { page: 1, pageSize: 30 } as Page,
+		getNextPageParam: (lastPage) =>
+			lastPage.page?.more ? lastPage.page : undefined,
+	});
+}

package/src/react/queries/listTokenMetadata.ts

@@ -0,0 +1,38 @@
+import { queryOptions } from '@tanstack/react-query';
+import type { SdkConfig } from '../../types';
+import { getMetadataClient } from '../_internal';
+
+export interface FetchTokenMetadataArgs {
+	chainId: number;
+	contractAddress: string;
+	tokenIds: string[];
+	query?: {
+		enabled?: boolean;
+	};
+}
+
+const fetchTokenMetadata = async (
+	{ chainId, contractAddress, tokenIds }: FetchTokenMetadataArgs,
+	config: SdkConfig,
+) => {
+	const metadataClient = getMetadataClient(config);
+
+	const response = await metadataClient.getTokenMetadata({
+		chainID: chainId.toString(),
+		contractAddress: contractAddress,
+		tokenIDs: tokenIds,
+	});
+
+	return response.tokenMetadata;
+};
+
+export const tokenMetadataOptions = (
+	args: FetchTokenMetadataArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		...args.query,
+		queryKey: ['listTokenMetadata', args.chainId, args.contractAddress],
+		queryFn: () => fetchTokenMetadata(args, config),
+	});
+};

package/src/react/queries/lowestListing.ts

@@ -0,0 +1,52 @@
+import { queryOptions } from '@tanstack/react-query';
+import type { Address } from 'viem';
+import type { SdkConfig } from '../../types';
+import {
+	type GetCollectibleLowestListingArgs,
+	type GetCollectibleLowestListingReturn,
+	collectableKeys,
+	getMarketplaceClient,
+} from '../_internal';
+
+export interface UseLowestListingArgs
+	extends Omit<GetCollectibleLowestListingArgs, 'contractAddress'> {
+	collectionAddress: Address;
+	chainId: number;
+	query?: {
+		enabled?: boolean;
+	};
+}
+
+export async function fetchLowestListing(
+	args: UseLowestListingArgs,
+	config: SdkConfig,
+): Promise<GetCollectibleLowestListingReturn['order'] | null> {
+	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+
+	const data = await marketplaceClient.getCollectibleLowestListing({
+		contractAddress: args.collectionAddress,
+		...args,
+	});
+
+	// let order: Order | undefined;
+	// if (data.order) {
+	// 	order = {
+	// 		...data.order,
+	// 		priceAmount: BigInt(data.order.priceAmount),
+	// 		priceAmountNet: BigInt(data.order.priceAmountNet),
+	// 	};
+	// }
+
+	return data.order || null;
+}
+
+export function lowestListingOptions(
+	args: UseLowestListingArgs,
+	config: SdkConfig,
+) {
+	return queryOptions({
+		enabled: args.query?.enabled ?? true,
+		queryKey: [...collectableKeys.lowestListings, args],
+		queryFn: () => fetchLowestListing(args, config),
+	});
+}

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,
+			}),
+	});
+};