@0xsequence/marketplace-sdk 0.8.12 → 0.10.0

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 { ERC721_SALE_ABI } from '../../utils';
+import { ContractType, OrderSide, type TokenMetadata } from '../_internal';
+import type { ShopCollectibleCardProps } from '../ui';
+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,82 @@ 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
+			.find((item) =>
+				item.primarySaleItems.find(
+					(primarySaleItem) =>
+						primarySaleItem.primarySaleItem.tokenId?.toString() === tokenId,
+				),
+			)
+			?.primarySaleItems.find(
+				(primarySaleItem) =>
+					primarySaleItem.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,
 			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 +156,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';
 

package/src/react/hooks/useListCollectibleActivities.tsx

@@ -1,59 +1,98 @@
-import { queryOptions, useQuery } from '@tanstack/react-query';
-import type { z } from 'zod';
-import type { SdkConfig } from '../../types';
-import { collectableKeys, getMarketplaceClient } from '../_internal';
-import type {
-	getListCollectibleActivitiesArgsSchema,
-	getListCollectibleActivitiesReturnSchema,
-} from '../_internal/api/zod-schema';
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import type { Optional } from '../_internal';
+import {
+	type FetchListCollectibleActivitiesParams,
+	type fetchListCollectibleActivities,
+	type ListCollectibleActivitiesQueryOptions,
+	listCollectibleActivitiesQueryOptions,
+} from '../queries/listCollectibleActivities';
 import { useConfig } from './useConfig';
 
-export type UseListCollectibleActivitiesArgs = z.infer<
-	typeof getListCollectibleActivitiesArgsSchema
+export type UseListCollectibleActivitiesParams = Optional<
+	ListCollectibleActivitiesQueryOptions,
+	'config'
 >;
 
-export type UseListCollectibleActivitiesReturn = z.infer<
-	typeof getListCollectibleActivitiesReturnSchema
->;
+/**
+ * Hook to fetch a list of activities for a specific collectible
+ *
+ * Fetches activities (transfers, sales, offers, etc.) for a specific token
+ * from the marketplace with support for pagination and sorting.
+ *
+ * @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 specific token ID to fetch activities for
+ * @param params.page - Page number to fetch (default: 1)
+ * @param params.pageSize - Number of activities per page (default: 10)
+ * @param params.sort - Sort order for activities
+ * @param params.query - Optional React Query configuration
+ *
+ * @returns Query result containing activities data
+ *
+ * @example
+ * Basic usage:
+ * ```typescript
+ * const { data, isLoading } = useListCollectibleActivities({
+ *   chainId: 137,
+ *   collectionAddress: '0x...',
+ *   tokenId: '123'
+ * })
+ * ```
+ *
+ * @example
+ * With pagination:
+ * ```typescript
+ * const { data } = useListCollectibleActivities({
+ *   chainId: 1,
+ *   collectionAddress: '0x...',
+ *   tokenId: '456',
+ *   page: 2,
+ *   pageSize: 20
+ * })
+ * ```
+ *
+ * @example
+ * With sorting:
+ * ```typescript
+ * const { data } = useListCollectibleActivities({
+ *   chainId: 137,
+ *   collectionAddress: '0x...',
+ *   tokenId: '789',
+ *   sort: 'timestamp_desc',
+ *   pageSize: 50
+ * })
+ * ```
+ */
+export function useListCollectibleActivities(
+	params: UseListCollectibleActivitiesParams,
+) {
+	const defaultConfig = useConfig();
 
-const fetchCollectibleActivities = async (
-	args: UseListCollectibleActivitiesArgs,
-	config: SdkConfig,
-) => {
-	const marketplaceClient = getMarketplaceClient(config);
-	return marketplaceClient
-		.listCollectibleActivities({
-			chainId: String(args.chainId),
-			contractAddress: args.collectionAddress,
-			tokenId: args.tokenId,
-			page: args.query?.enabled
-				? {
-						page: args.query.page ?? 1,
-						pageSize: args.query.pageSize ?? 10,
-						sort: args.query.sort,
-					}
-				: undefined,
-		})
-		.then((data) => ({
-			activities: data.activities,
-			page: data.page,
-		}));
-};
+	const { config = defaultConfig, ...rest } = params;
 
-export const listCollectibleActivitiesOptions = (
-	args: UseListCollectibleActivitiesArgs,
-	config: SdkConfig,
-) => {
-	return queryOptions({
-		queryKey: [...collectableKeys.collectibleActivities, args, config],
-		queryFn: () => fetchCollectibleActivities(args, config),
-		enabled: args.query?.enabled ?? true,
+	const queryOptions = listCollectibleActivitiesQueryOptions({
+		config,
+		...rest,
 	});
-};
 
-export const useListCollectibleActivities = (
-	args: UseListCollectibleActivitiesArgs,
-) => {
-	const config = useConfig();
-	return useQuery(listCollectibleActivitiesOptions(args, config));
+	return useQuery({
+		...queryOptions,
+	});
+}
+
+export { listCollectibleActivitiesQueryOptions };
+
+export type {
+	FetchListCollectibleActivitiesParams,
+	ListCollectibleActivitiesQueryOptions,
 };
+
+// Legacy exports for backward compatibility during migration
+export type UseListCollectibleActivitiesArgs =
+	UseListCollectibleActivitiesParams;
+export type UseListCollectibleActivitiesReturn = Awaited<
+	ReturnType<typeof fetchListCollectibleActivities>
+>;

package/src/react/hooks/useListCollectibles.tsx

@@ -1,28 +1,93 @@
+'use client';
+
 import { useInfiniteQuery } from '@tanstack/react-query';
-import { listCollectiblesOptions } from '../queries/listCollectibles';
-import type { UseListCollectiblesArgs } from '../queries/listCollectibles';
+import type { Optional } from '../_internal';
+import {
+	type FetchListCollectiblesParams,
+	type ListCollectiblesQueryOptions,
+	listCollectiblesQueryOptions,
+} from '../queries/listCollectibles';
 import { useConfig } from './useConfig';
 
+export type UseListCollectiblesParams = Optional<
+	ListCollectiblesQueryOptions,
+	'config'
+>;
+
 /**
- * Hook to fetch a list of collectibles with pagination support
+ * Hook to fetch a list of collectibles with infinite pagination support
+ *
+ * Fetches collectibles from the marketplace with support for filtering, pagination,
+ * and special handling for shop marketplace types and LAOS721 contracts.
  *
- * @param args - The arguments for fetching the collectibles
- * @returns Infinite query result containing the collectibles data including orders
+ * @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.side - Order side (listing or bid)
+ * @param params.filter - Optional filtering parameters
+ * @param params.isLaos721 - Whether the collection is a LAOS721 contract
+ * @param params.marketplaceType - Type of marketplace (shop, etc.)
+ * @param params.query - Optional React Query configuration
+ *
+ * @returns Infinite query result containing collectibles data with pagination
  *
  * @example
- * ```tsx
- * const { data, isLoading, error, fetchNextPage } = useListCollectibles({
+ * Basic usage:
+ * ```typescript
+ * const { data, isLoading, fetchNextPage, hasNextPage } = useListCollectibles({
+ *   chainId: 137,
+ *   collectionAddress: '0x...',
+ *   side: OrderSide.listing
+ * })
+ * ```
+ *
+ * @example
+ * With filtering:
+ * ```typescript
+ * const { data, fetchNextPage } = useListCollectibles({
  *   chainId: 1,
- *   collectionAddress: '0x123...',
- *   includeMetadata: true,
- *   query: {
- *     enabled: true,
- *     refetchInterval: 10000,
+ *   collectionAddress: '0x...',
+ *   side: OrderSide.listing,
+ *   filter: {
+ *     searchText: 'dragon',
+ *     includeEmpty: false,
+ *     marketplaces: [MarketplaceKind.sequence_marketplace_v2]
  *   }
- * });
+ * })
+ * ```
+ *
+ * @example
+ * For LAOS721 collections:
+ * ```typescript
+ * const { data } = useListCollectibles({
+ *   chainId: 137,
+ *   collectionAddress: '0x...',
+ *   side: OrderSide.listing,
+ *   isLaos721: true,
+ *   filter: {
+ *     inAccounts: ['0x...']
+ *   }
+ * })
  * ```
  */
-export function useListCollectibles(args: UseListCollectiblesArgs) {
-	const config = useConfig();
-	return useInfiniteQuery(listCollectiblesOptions({ ...args }, config));
+export function useListCollectibles(params: UseListCollectiblesParams) {
+	const defaultConfig = useConfig();
+
+	const { config = defaultConfig, ...rest } = params;
+
+	const queryOptions = listCollectiblesQueryOptions({
+		config,
+		...rest,
+	});
+
+	return useInfiniteQuery({
+		...queryOptions,
+	});
 }
+
+export { listCollectiblesQueryOptions };
+
+export type { FetchListCollectiblesParams, ListCollectiblesQueryOptions };
+
+// Legacy export for backward compatibility during migration
+export type UseListCollectiblesArgs = UseListCollectiblesParams;

package/src/react/hooks/useListCollectiblesPaginated.tsx

@@ -1,77 +1,107 @@
-import { queryOptions, useQuery } from '@tanstack/react-query';
-import { z } from 'zod';
-import type { Page, SdkConfig } from '../../types';
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import type { Optional } from '../_internal';
 import {
-	AddressSchema,
-	type ListCollectiblesArgs,
-	collectableKeys,
-	getMarketplaceClient,
-} from '../_internal';
-import { listCollectiblesArgsSchema } from '../_internal/api/zod-schema';
+	type FetchListCollectiblesPaginatedParams,
+	type fetchListCollectiblesPaginated,
+	type ListCollectiblesPaginatedQueryOptions,
+	listCollectiblesPaginatedQueryOptions,
+} from '../queries/listCollectiblesPaginated';
 import { useConfig } from './useConfig';
 
-const UseListCollectiblesPaginatedArgsSchema = listCollectiblesArgsSchema
-	.omit({
-		contractAddress: true,
-	})
-	.extend({
-		collectionAddress: AddressSchema,
-		chainId: z.number(),
-		query: z
-			.object({
-				enabled: z.boolean().optional(),
-				page: z.number().optional().default(1),
-				pageSize: z.number().optional().default(30),
-			})
-			.optional()
-			.default({}),
-	});
-
-export type UseListCollectiblesPaginatedArgs = z.infer<
-	typeof UseListCollectiblesPaginatedArgsSchema
+export type UseListCollectiblesPaginatedParams = Optional<
+	ListCollectiblesPaginatedQueryOptions,
+	'config'
 >;
 
-export type UseListCollectiblesPaginatedReturn = Awaited<
-	ReturnType<typeof fetchCollectiblesPaginated>
->;
-
-const fetchCollectiblesPaginated = async (
-	args: UseListCollectiblesPaginatedArgs,
-	marketplaceClient: Awaited<ReturnType<typeof getMarketplaceClient>>,
-) => {
-	const parsedArgs = UseListCollectiblesPaginatedArgsSchema.parse(args);
-	const page: Page = {
-		page: parsedArgs.query?.page ?? 1,
-		pageSize: parsedArgs.query?.pageSize ?? 30,
-	};
+/**
+ * Hook to fetch a list of collectibles with pagination support
+ *
+ * Fetches collectibles from the marketplace with support for filtering and pagination.
+ * Unlike the infinite query version, this hook fetches a specific page of results.
+ *
+ * @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.side - Order side (listing or bid)
+ * @param params.filter - Optional filtering parameters
+ * @param params.page - Page number to fetch (default: 1)
+ * @param params.pageSize - Number of items per page (default: 30)
+ * @param params.query - Optional React Query configuration
+ *
+ * @returns Query result containing collectibles data for the specific page
+ *
+ * @example
+ * Basic usage:
+ * ```typescript
+ * const { data, isLoading } = useListCollectiblesPaginated({
+ *   chainId: 137,
+ *   collectionAddress: '0x...',
+ *   side: OrderSide.listing,
+ *   page: 1,
+ *   pageSize: 20
+ * })
+ * ```
+ *
+ * @example
+ * With filtering:
+ * ```typescript
+ * const { data } = useListCollectiblesPaginated({
+ *   chainId: 1,
+ *   collectionAddress: '0x...',
+ *   side: OrderSide.listing,
+ *   page: 2,
+ *   pageSize: 50,
+ *   filter: {
+ *     searchText: 'rare',
+ *     includeEmpty: false
+ *   }
+ * })
+ * ```
+ *
+ * @example
+ * Controlled pagination:
+ * ```typescript
+ * const [currentPage, setCurrentPage] = useState(1);
+ * const { data, isLoading } = useListCollectiblesPaginated({
+ *   chainId: 137,
+ *   collectionAddress: '0x...',
+ *   side: OrderSide.listing,
+ *   page: currentPage,
+ *   pageSize: 25
+ * });
+ *
+ * const hasMorePages = data?.page?.more;
+ * ```
+ */
+export function useListCollectiblesPaginated(
+	params: UseListCollectiblesPaginatedParams,
+) {
+	const defaultConfig = useConfig();
 
-	const { chainId, collectionAddress, ...restArgs } = parsedArgs;
-	const arg: ListCollectiblesArgs = {
-		chainId: String(chainId),
-		contractAddress: collectionAddress,
-		page,
-		side: restArgs.side,
-		filter: restArgs.filter,
-	};
+	const { config = defaultConfig, ...rest } = params;
 
-	return marketplaceClient.listCollectibles(arg);
-};
+	const queryOptions = listCollectiblesPaginatedQueryOptions({
+		config,
+		...rest,
+	});
 
-export const listCollectiblesPaginatedOptions = (
-	args: UseListCollectiblesPaginatedArgs,
-	config: SdkConfig,
-) => {
-	const marketplaceClient = getMarketplaceClient(config);
-	return queryOptions({
-		queryKey: [...collectableKeys.lists, 'paginated', args],
-		queryFn: () => fetchCollectiblesPaginated(args, marketplaceClient),
-		enabled: args.query?.enabled ?? true,
+	return useQuery({
+		...queryOptions,
 	});
-};
+}
+
+export { listCollectiblesPaginatedQueryOptions };
 
-export const useListCollectiblesPaginated = (
-	args: UseListCollectiblesPaginatedArgs,
-) => {
-	const config = useConfig();
-	return useQuery(listCollectiblesPaginatedOptions(args, config));
+export type {
+	FetchListCollectiblesPaginatedParams,
+	ListCollectiblesPaginatedQueryOptions,
 };
+
+// Legacy exports for backward compatibility during migration
+export type UseListCollectiblesPaginatedArgs =
+	UseListCollectiblesPaginatedParams;
+export type UseListCollectiblesPaginatedReturn = Awaited<
+	ReturnType<typeof fetchListCollectiblesPaginated>
+>;