@0xsequence/marketplace-sdk 0.8.12 → 0.9.0

package/src/react/hooks/{useGetTokenSuppliesMap.ts → useGetTokenRanges.tsx}

@@ -1,33 +1,31 @@
 import { useQuery } from '@tanstack/react-query';
-
+import type { Address } from 'viem';
 import { useConfig } from '..';
 import { getIndexerClient } from '../_internal';
 
-export const useGetTokenSuppliesMap = ({
-	chainId,
-	tokenIds,
-	collectionAddress,
-	query,
-}: {
+interface UseGetTokenRangesProps {
 	chainId: number;
-	tokenIds: string[];
-	collectionAddress: string;
+	collectionAddress: Address;
 	query?: {
 		enabled?: boolean;
 	};
-}) => {
+}
+
+export function useGetTokenRanges({
+	chainId,
+	collectionAddress,
+	query = {},
+}: UseGetTokenRangesProps) {
 	const config = useConfig();
 	const indexerClient = getIndexerClient(chainId, config);
+
 	return useQuery({
-		queryKey: ['indexer-tokenSupplies', tokenIds, collectionAddress, chainId],
+		queryKey: ['indexer-tokenRanges', chainId, collectionAddress],
 		queryFn: () => {
-			return indexerClient.getTokenSuppliesMap({
-				tokenMap: {
-					[collectionAddress]: tokenIds,
-				},
-				includeMetadata: false,
+			return indexerClient.getTokenIDRanges({
+				contractAddress: collectionAddress,
 			});
 		},
 		enabled: query?.enabled,
 	});
-};
+}

package/src/react/hooks/useGetTokenSuppliesMap.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import type { Optional } from '../_internal';
+import {
+	type FetchGetTokenSuppliesMapParams,
+	type GetTokenSuppliesMapQueryOptions,
+	getTokenSuppliesMapQueryOptions,
+} from '../queries/getTokenSuppliesMap';
+import { useConfig } from './useConfig';
+
+export type UseGetTokenSuppliesMapParams = Optional<
+	GetTokenSuppliesMapQueryOptions,
+	'config'
+>;
+
+/**
+ * Hook to fetch token supplies mapping from the indexer
+ *
+ * Retrieves supply information for multiple tokens within a collection using the indexer API.
+ * This is useful for getting supply data for batches of tokens efficiently.
+ *
+ * @param params - Configuration parameters
+ * @param params.chainId - The chain ID (must be number, e.g., 1 for Ethereum, 137 for Polygon)
+ * @param params.collectionAddress - The collection contract address
+ * @param params.tokenIds - Array of token IDs to fetch supplies for
+ * @param params.config - Optional SDK configuration (defaults from context)
+ * @param params.query - Optional React Query configuration
+ *
+ * @returns Query result containing token supplies mapping
+ *
+ * @example
+ * Basic usage:
+ * ```typescript
+ * const { data: suppliesMap, isLoading } = useGetTokenSuppliesMap({
+ *   chainId: 137,
+ *   collectionAddress: '0x...',
+ *   tokenIds: ['1', '2', '3']
+ * })
+ * ```
+ *
+ * @example
+ * With query options:
+ * ```typescript
+ * const { data: suppliesMap } = useGetTokenSuppliesMap({
+ *   chainId: 1,
+ *   collectionAddress: '0x...',
+ *   tokenIds: selectedTokenIds,
+ *   query: {
+ *     enabled: selectedTokenIds.length > 0,
+ *     staleTime: 30 * 1000 // 30 seconds
+ *   }
+ * })
+ * ```
+ */
+export function useGetTokenSuppliesMap(params: UseGetTokenSuppliesMapParams) {
+	const defaultConfig = useConfig();
+
+	const { config = defaultConfig, ...rest } = params;
+
+	const queryOptions = getTokenSuppliesMapQueryOptions({
+		config,
+		...rest,
+	});
+
+	return useQuery({
+		...queryOptions,
+	});
+}
+
+export { getTokenSuppliesMapQueryOptions };
+
+export type { FetchGetTokenSuppliesMapParams, GetTokenSuppliesMapQueryOptions };

package/src/react/hooks/useHighestOffer.tsx

@@ -1,8 +1,72 @@
+'use client';
+
 import { useQuery } from '@tanstack/react-query';
-import { type UseHighestOfferArgs, highestOfferOptions } from '../queries';
+import type { Optional } from '../_internal';
+import {
+	type FetchHighestOfferParams,
+	type HighestOfferQueryOptions,
+	highestOfferQueryOptions,
+} from '../queries/highestOffer';
 import { useConfig } from './useConfig';
 
-export function useHighestOffer(args: UseHighestOfferArgs) {
-	const config = useConfig();
-	return useQuery(highestOfferOptions(args, config));
+export type UseHighestOfferParams = Optional<
+	HighestOfferQueryOptions,
+	'config'
+>;
+
+/**
+ * Hook to fetch the highest offer for a collectible
+ *
+ * Retrieves the highest offer currently available for a specific token
+ * in a collection from the marketplace.
+ *
+ * @param params - Configuration parameters
+ * @param params.chainId - The chain ID (must be number, e.g., 1 for Ethereum, 137 for Polygon)
+ * @param params.collectionAddress - The collection contract address
+ * @param params.tokenId - The token ID within the collection
+ * @param params.query - Optional React Query configuration
+ *
+ * @returns Query result containing the highest offer data or null if no offers exist
+ *
+ * @example
+ * Basic usage:
+ * ```typescript
+ * const { data, isLoading } = useHighestOffer({
+ *   chainId: 137,
+ *   collectionAddress: '0x...',
+ *   tokenId: '1'
+ * })
+ * ```
+ *
+ * @example
+ * With custom query options:
+ * ```typescript
+ * const { data, isLoading } = useHighestOffer({
+ *   chainId: 1,
+ *   collectionAddress: '0x...',
+ *   tokenId: '42',
+ *   query: {
+ *     refetchInterval: 15000,
+ *     enabled: hasTokenId
+ *   }
+ * })
+ * ```
+ */
+export function useHighestOffer(params: UseHighestOfferParams) {
+	const defaultConfig = useConfig();
+
+	const { config = defaultConfig, ...rest } = params;
+
+	const queryOptions = highestOfferQueryOptions({
+		config,
+		...rest,
+	});
+
+	return useQuery({
+		...queryOptions,
+	});
 }
+
+export { highestOfferQueryOptions };
+
+export type { FetchHighestOfferParams, HighestOfferQueryOptions };

package/src/react/hooks/useInventory.tsx

@@ -1,6 +1,6 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { ContractType } from '../_internal';
-import { type UseInventoryArgs, inventoryOptions } from '../queries/inventory';
+import { inventoryOptions, type UseInventoryArgs } from '../queries/inventory';
 import { useConfig } from './useConfig';
 import { useMarketplaceConfig } from './useMarketplaceConfig';
 

package/src/react/hooks/useList1155ShopCardData.tsx

@@ -1,14 +1,11 @@
 import type { Address } from 'viem';
 import { useReadContract } from 'wagmi';
-import {
-	ContractType,
-	ERC1155_SALES_CONTRACT_ABI,
-	type TokenMetadata,
-} from '../../../../sdk/src';
-import type { ShopCollectibleCardProps } from '../ui/components/marketplace-collectible-card';
-import { useCollectionDetails } from './useCollectionDetails';
-import { useListTokenMetadata } from './useListTokenMetadata';
-import { useTokenSaleDetailsBatch } from './useTokenSaleDetailsBatch';
+import { ERC1155_SALES_CONTRACT_ABI } from '../../utils';
+import { ContractType, type TokenMetadata } from '../_internal';
+import type { ShopCollectibleCardProps } from '../ui/components/marketplace-collectible-card/types';
+import { useCollection } from './useCollection';
+import { useFilterState } from './useFilterState';
+import { useListPrimarySaleItems } from './useListPrimarySaleItems';
 
 interface UseList1155ShopCardDataProps {
 	tokenIds: string[];
@@ -25,106 +22,82 @@ export function useList1155ShopCardData({
 	salesContractAddress,
 	enabled = true,
 }: UseList1155ShopCardDataProps) {
+	const { showListedOnly } = useFilterState();
 	const {
-		data: tokenMetadata,
-		isLoading: tokenMetadataLoading,
-		error: tokenMetadataError,
-	} = useListTokenMetadata({
+		data: primarySaleItems,
+		isLoading: primarySaleItemsLoading,
+		error: primarySaleItemsError,
+	} = useListPrimarySaleItems({
 		chainId,
-		contractAddress,
-		tokenIds,
-		query: {
-			enabled,
+		primarySaleContractAddress: salesContractAddress,
+		filter: {
+			includeEmpty: !showListedOnly,
 		},
 	});
 
-	const {
-		data: collectionDetails,
-		error: collectionDetailsError,
-		isLoading: collectionDetailsLoading,
-	} = useCollectionDetails({
+	const { data: collection, isLoading: collectionLoading } = useCollection({
 		chainId,
 		collectionAddress: contractAddress,
-		query: {
-			enabled,
-		},
 	});
 
-	const {
-		extendedSupplyData,
-		getInitialSupply,
-		getRemainingSupply,
-		loading: tokenSaleDetailsLoading,
-		error: tokenSaleDetailsError,
-	} = useTokenSaleDetailsBatch({
-		collectionAddress: contractAddress,
-		tokenIds,
-		salesContractAddress,
-		chainId,
-		query: {
-			enabled,
-		},
-	});
-
-	const { data: paymentToken } = useReadContract({
-		chainId,
-		address: salesContractAddress,
-		abi: ERC1155_SALES_CONTRACT_ABI,
-		functionName: 'paymentToken',
-		query: {
-			enabled,
-		},
-	});
+	const { data: paymentToken, isLoading: paymentTokenLoading } =
+		useReadContract({
+			chainId,
+			address: salesContractAddress,
+			abi: ERC1155_SALES_CONTRACT_ABI,
+			functionName: 'paymentToken',
+			query: {
+				enabled,
+			},
+		});
 
 	const isLoading =
-		tokenSaleDetailsLoading || tokenMetadataLoading || collectionDetailsLoading;
+		primarySaleItemsLoading || collectionLoading || paymentTokenLoading;
 
-	const collectibleCards = tokenIds.map((tokenId) => {
-		const token = tokenMetadata?.find((token) => token.tokenId === tokenId);
+	// Flatten all collectibles from all pages
+	const allPrimarySaleItems =
+		primarySaleItems?.pages.flatMap((page) => page.primarySaleItems) ?? [];
 
-		const saleData = extendedSupplyData?.find(
-			(data) => data.tokenId === tokenId,
+	const collectibleCards = tokenIds.map((tokenId) => {
+		const matchingPrimarySaleItem = allPrimarySaleItems.find(
+			(item) => item.primarySaleItem.tokenId?.toString() === tokenId,
 		);
 
-		const cost =
-			saleData && typeof saleData.result === 'object'
-				? saleData.result.cost?.toString() || ''
-				: '';
-		const saleStartsAt =
-			saleData && typeof saleData.result === 'object'
-				? saleData.result.startTime?.toString()
-				: undefined;
-		const saleEndsAt =
-			saleData && typeof saleData.result === 'object'
-				? saleData.result.endTime?.toString()
-				: undefined;
+		const saleData = matchingPrimarySaleItem?.primarySaleItem;
+		const tokenMetadata =
+			matchingPrimarySaleItem?.metadata || ({} as TokenMetadata);
+
+		const salePrice = {
+			amount: saleData?.priceAmount?.toString() || '',
+			currencyAddress: (saleData?.currencyAddress ||
+				paymentToken ||
+				'0x') as Address,
+		};
+
+		const supply = saleData?.supply?.toString();
 
 		return {
 			collectibleId: tokenId,
 			chainId,
-			collectionAddress: contractAddress as Address,
+			collectionAddress: contractAddress,
 			collectionType: ContractType.ERC1155,
-			tokenMetadata: token as TokenMetadata,
+			tokenMetadata: tokenMetadata,
 			cardLoading: isLoading,
-			salesContractAddress: salesContractAddress as Address,
-			salePrice: {
-				amount: cost,
-				currencyAddress: paymentToken ?? ('0x' as Address),
-			},
-			quantityInitial: getInitialSupply(tokenId)?.toString() ?? undefined,
-			quantityDecimals: collectionDetails?.tokenQuantityDecimals,
-			quantityRemaining: getRemainingSupply(tokenId)?.toString(),
-			saleStartsAt,
-			saleEndsAt,
+			salesContractAddress: salesContractAddress,
+			salePrice,
+			quantityInitial: supply,
+			quantityDecimals: collection?.decimals || 0,
+			quantityRemaining: supply,
+			saleStartsAt: saleData?.startDate?.toString(),
+			saleEndsAt: saleData?.endDate?.toString(),
 			marketplaceType: 'shop',
 		} satisfies ShopCollectibleCardProps;
 	});
 
 	return {
 		collectibleCards,
-		tokenMetadataError,
-		tokenSaleDetailsError,
-		collectionDetailsError,
+		tokenMetadataError: primarySaleItemsError,
+		tokenSaleDetailsError: null,
 		isLoading,
 	};
 }

package/src/react/hooks/useList721ShopCardData.tsx

@@ -1,14 +1,11 @@
 import type { Address } from 'viem';
 import { useReadContract } from 'wagmi';
-import {
-	ContractType,
-	ERC721_SALE_ABI,
-	type TokenMetadata,
-} from '../../../../sdk/src';
-import type { ShopCollectibleCardProps } from '../ui/components/marketplace-collectible-card';
-import { useCollectionDetails } from './useCollectionDetails';
-import { useGetTokenSuppliesMap } from './useGetTokenSuppliesMap';
-import { useListTokenMetadata } from './useListTokenMetadata';
+import { ContractType, OrderSide, type TokenMetadata } from '../../types';
+import { ERC721_SALE_ABI } from '../../utils';
+import type { ShopCollectibleCardProps } from '../ui/components/marketplace-collectible-card/types';
+import { useFilterState } from './useFilterState';
+import { useListCollectibles } from './useListCollectibles';
+import { useListPrimarySaleItems } from './useListPrimarySaleItems';
 
 interface UseList721ShopCardDataProps {
 	tokenIds: string[];
@@ -25,38 +22,37 @@ export function useList721ShopCardData({
 	salesContractAddress,
 	enabled = true,
 }: UseList721ShopCardDataProps) {
-	const {
-		data: tokenMetadata,
-		isLoading: tokenMetadataLoading,
-		error: tokenMetadataError,
-	} = useListTokenMetadata({
-		chainId,
-		contractAddress,
-		tokenIds,
-		query: {
-			enabled,
-		},
-	});
+	const { showListedOnly } = useFilterState();
 
 	const {
-		data: collectionDetails,
-		error: collectionDetailsError,
-		isLoading: collectionDetailsLoading,
-	} = useCollectionDetails({
+		data: primarySaleItems,
+		isLoading: primarySaleItemsLoading,
+		error: primarySaleItemsError,
+	} = useListPrimarySaleItems({
 		chainId,
-		collectionAddress: contractAddress,
-		query: {
-			enabled,
+		primarySaleContractAddress: salesContractAddress,
+		filter: {
+			includeEmpty: !showListedOnly,
 		},
 	});
 
-	const { data: tokenSupplies, isLoading: tokenSuppliesLoading } =
-		useGetTokenSuppliesMap({
+	// Check if we have minted tokens by looking at the first available token ID
+	const firstAvailableTokenId =
+		primarySaleItems?.pages[0]?.primarySaleItems[0]?.primarySaleItem.tokenId?.toString();
+	const hasMintedTokens: boolean =
+		Boolean(firstAvailableTokenId) && Number(firstAvailableTokenId) > 0;
+
+	// Fetch metadata for minted tokens
+	const { data: mintedTokensMetadata, isLoading: mintedTokensMetadataLoading } =
+		useListCollectibles({
 			chainId,
-			tokenIds,
 			collectionAddress: contractAddress,
+			side: OrderSide.listing,
+			filter: {
+				includeEmpty: true,
+			},
 			query: {
-				enabled,
+				enabled: enabled && hasMintedTokens,
 			},
 		});
 
@@ -77,43 +73,77 @@ export function useList721ShopCardData({
 
 	const isLoading =
 		saleDetailsLoading ||
-		tokenMetadataLoading ||
-		collectionDetailsLoading ||
-		tokenSuppliesLoading;
-
-	const tokenSupplyMap = new Map(
-		tokenIds.map((tokenId) => {
-			const supplies = tokenSupplies?.supplies[contractAddress];
-			const supply = supplies?.find((s) => s.tokenID === tokenId);
-			// If supply exists and is greater than 0, token exists and is owned
-			return [tokenId, supply ? BigInt(supply.supply) > 0n : false];
-		}),
-	);
+		primarySaleItemsLoading ||
+		mintedTokensMetadataLoading;
+
+	// Create a map of token metadata from minted tokens
+	const mintedTokensMetadataMap = new Map<string, TokenMetadata>();
+	for (const page of mintedTokensMetadata?.pages ?? []) {
+		for (const collectible of page.collectibles) {
+			mintedTokensMetadataMap.set(
+				collectible.metadata.tokenId,
+				collectible.metadata,
+			);
+		}
+	}
 
 	const collectibleCards = tokenIds.map((tokenId) => {
-		const token = tokenMetadata?.find((token) => token.tokenId === tokenId);
-		const hasOwner = tokenSupplyMap.get(tokenId) ?? false;
+		const minted =
+			hasMintedTokens && Number(tokenId) < Number(firstAvailableTokenId);
+
+		const matchingPrimarySaleItem = primarySaleItems?.pages
+			.flatMap((page) => page.primarySaleItems)
+			.find(
+				(item: { primarySaleItem: { tokenId: { toString: () => string } } }) =>
+					item.primarySaleItem.tokenId?.toString() === tokenId,
+			);
+
+		const saleData = matchingPrimarySaleItem?.primarySaleItem;
+		let tokenMetadata = matchingPrimarySaleItem?.metadata;
+
+		// If token is minted, prefer metadata from mintedTokensMetadata
+		if (minted && mintedTokensMetadataMap.has(tokenId)) {
+			tokenMetadata = mintedTokensMetadataMap.get(tokenId);
+		}
+		// Fallback to empty metadata if none found
+		tokenMetadata = tokenMetadata || ({} as TokenMetadata);
+
+		const salePrice = saleData
+			? {
+					amount: saleData.priceAmount?.toString() || '',
+					currencyAddress: saleData.currencyAddress as Address,
+				}
+			: {
+					amount: saleDetails?.cost?.toString() || '',
+					currencyAddress: saleDetails?.paymentToken ?? ('0x' as Address),
+				};
+
+		const quantityInitial =
+			saleData?.supply?.toString() ??
+			(saleDetails?.supplyCap ? saleDetails.supplyCap.toString() : undefined);
+
+		const quantityRemaining = minted ? undefined : '1';
+
+		const saleStartsAt =
+			saleData?.startDate?.toString() ?? saleDetails?.startTime?.toString();
+
+		const saleEndsAt =
+			saleData?.endDate?.toString() ?? saleDetails?.endTime?.toString();
 
 		return {
 			collectibleId: tokenId,
 			chainId,
-			collectionAddress: contractAddress as Address,
+			collectionAddress: contractAddress,
 			collectionType: ContractType.ERC721,
-			tokenMetadata: token as TokenMetadata,
+			tokenMetadata: tokenMetadata,
 			cardLoading: isLoading,
-			salesContractAddress: salesContractAddress as Address,
-			salePrice: {
-				amount: saleDetails?.cost?.toString() || '',
-				currencyAddress: saleDetails?.paymentToken ?? ('0x' as Address),
-			},
-			quantityInitial: saleDetails?.supplyCap
-				? saleDetails.supplyCap.toString()
-				: undefined,
-			quantityDecimals: collectionDetails?.tokenQuantityDecimals,
-			// Set quantityRemaining based on supply status
-			quantityRemaining: hasOwner ? undefined : '1',
-			saleStartsAt: saleDetails?.startTime?.toString(),
-			saleEndsAt: saleDetails?.endTime?.toString(),
+			salesContractAddress: salesContractAddress,
+			salePrice,
+			quantityInitial,
+			quantityRemaining,
+			quantityDecimals: 0,
+			saleStartsAt,
+			saleEndsAt,
 			marketplaceType: 'shop',
 		} satisfies ShopCollectibleCardProps;
 	});
@@ -121,10 +151,10 @@ export function useList721ShopCardData({
 	return {
 		salePrice: collectibleCards[0]?.salePrice,
 		collectibleCards,
-		tokenMetadataError,
 		saleDetailsError,
-		collectionDetailsError,
+		primarySaleItemsError,
 		saleDetails,
+		primarySaleItems,
 		isLoading,
 	};
 }

package/src/react/hooks/useListBalances.tsx

@@ -1,7 +1,7 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { ContractType } from '../_internal';
-import { listBalancesOptions } from '../queries/listBalances';
 import type { UseListBalancesArgs } from '../queries/listBalances';
+import { listBalancesOptions } from '../queries/listBalances';
 import { useConfig } from './useConfig';
 import { useMarketplaceConfig } from './useMarketplaceConfig';