@0xsequence/marketplace-sdk 1.0.0 → 1.1.0

package/src/react/hooks/data/inventory/useInventory.test.tsx

@@ -40,9 +40,9 @@ describe('useInventory', () => {
 			expect(result.current.isLoading).toBe(false);
 		});
 
-		// Verify the data is defined and has pages
+		// Verify the data is defined and has collectibles
 		expect(result.current.data).toBeDefined();
-		expect(result.current.data?.pages).toBeDefined();
+		expect(result.current.data?.collectibles).toBeDefined();
 		expect(result.current.error).toBeNull();
 	});
 
@@ -156,102 +156,7 @@ describe('useInventory', () => {
 		});
 
 		expect(result.current.data).toBeDefined();
-		expect(result.current.data?.pages[0].collectibles).toBeDefined();
+		expect(result.current.data?.collectibles).toBeDefined();
 		expect(result.current.isSuccess).toBe(true);
 	});
-
-	it('should support pagination with fetchNextPage', async () => {
-		// Simplified test for pagination
-		// Set up mock data for first and second pages
-		const page1Data = {
-			collectibles: [
-				{
-					...mockCollectibleOrder,
-					metadata: {
-						...mockCollectibleOrder.metadata,
-						tokenId: '1',
-						name: 'Token 1',
-					},
-				},
-			],
-			page: {
-				page: 1,
-				pageSize: 10,
-				more: true, // indicate there's a next page
-			},
-		};
-
-		// Mock API to return data for the first page
-		server.use(
-			http.post(
-				mockMarketplaceEndpoint('ListCollectibles'),
-				async ({ request }) => {
-					const body = (await request.json()) as { page?: number };
-					const pageNumber = body?.page || 1;
-
-					// Return first page data
-					if (pageNumber === 1) {
-						return HttpResponse.json(page1Data);
-					}
-
-					// For second page, return empty collectibles but with more=false
-					return HttpResponse.json({
-						collectibles: [],
-						page: {
-							page: 2,
-							pageSize: 10,
-							more: false,
-						},
-					});
-				},
-			),
-		);
-
-		// Use unique test args to avoid caching issues
-		const testArgs = {
-			...defaultArgs,
-			accountAddress: '0xabcdef1234567890abcdef1234567890abcdef12' as Address,
-			collectionAddress:
-				'0xabcdef1234567890abcdef1234567890abcdef12' as Address,
-		};
-
-		const { result } = renderHook(() => useInventory(testArgs));
-
-		// Wait for the first page to load
-		await waitFor(
-			() => {
-				expect(result.current.isLoading).toBe(false);
-				expect(result.current.data?.pages).toBeDefined();
-			},
-			{ timeout: 5000 },
-		);
-
-		// Verify first page data loaded correctly
-		expect(result.current.data?.pages[0].collectibles).toBeDefined();
-		expect(result.current.data?.pages[0].collectibles.length).toBeGreaterThan(
-			0,
-		);
-		// Check that at least one item has the expected tokenId
-		expect(
-			result.current.data?.pages[0].collectibles.some(
-				(c) => c.metadata.tokenId === '1',
-			),
-		).toBe(true);
-		expect(result.current.hasNextPage).toBe(true);
-
-		// Fetch the next page
-		await result.current.fetchNextPage();
-
-		// Wait for second page to load
-		await waitFor(
-			() => {
-				expect(result.current.data?.pages.length).toBe(2);
-			},
-			{ timeout: 5000 },
-		);
-
-		// For an empty second page we just verify it exists
-		expect(result.current.data?.pages[1]).toBeDefined();
-		expect(result.current.hasNextPage).toBe(false); // No more pages
-	});
 });

package/src/react/hooks/data/inventory/useInventory.tsx

@@ -1,4 +1,4 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { ContractType } from '../../../_internal';
 import {
 	inventoryOptions,
@@ -17,5 +17,5 @@ export function useInventory(args: UseInventoryArgs) {
 				c.itemsAddress === args.collectionAddress && c.chainId === args.chainId,
 		)?.contractType === ContractType.LAOS_ERC_721;
 
-	return useInfiniteQuery(inventoryOptions({ ...args, isLaos721 }, config));
+	return useQuery(inventoryOptions({ ...args, isLaos721 }, config));
 }

package/src/react/hooks/data/market/useListMarketCardData.tsx

@@ -102,7 +102,7 @@ export function useListMarketCardData({
 				collectionAddress,
 				collectionType,
 				cardLoading: collectiblesListIsLoading || balanceLoading,
-				marketplaceType: 'market',
+				cardType: 'market',
 				orderbookKind,
 				collectible,
 				onCollectibleClick,

package/src/react/hooks/data/orders/useListOffersForCollectible.tsx

@@ -1,55 +1,80 @@
-import { queryOptions, useQuery } from '@tanstack/react-query';
-import type { SdkConfig } from '../../../../types';
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import type { Optional } from '../../../_internal';
 import {
-	collectableKeys,
-	getMarketplaceClient,
-	type ListOffersForCollectibleArgs,
-} from '../../../_internal';
-import type { OrderFilter, Page } from '../../../_internal/api/marketplace.gen';
+	type FetchListOffersForCollectibleParams,
+	type ListOffersForCollectibleQueryOptions,
+	listOffersForCollectibleQueryOptions,
+} from '../../../queries/listOffersForCollectible';
 import { useConfig } from '../../config/useConfig';
 
-interface UseListOffersForCollectibleArgs {
-	chainId: number;
-	collectionAddress: string;
-	collectibleId: string;
-	filter?: OrderFilter;
-	page?: Page;
-}
-
-export type UseListOffersForCollectibleReturn = Awaited<
-	ReturnType<typeof fetchListOffersForCollectible>
+export type UseListOffersForCollectibleParams = Optional<
+	ListOffersForCollectibleQueryOptions,
+	'config'
 >;
 
-const fetchListOffersForCollectible = async (
-	config: SdkConfig,
-	args: UseListOffersForCollectibleArgs,
-) => {
-	const arg = {
-		chainId: String(args.chainId),
-		contractAddress: args.collectionAddress,
-		tokenId: args.collectibleId,
-		filter: args.filter,
-		page: args.page,
-	} satisfies ListOffersForCollectibleArgs;
-
-	const marketplaceClient = getMarketplaceClient(config);
-	return marketplaceClient.listCollectibleOffers(arg);
-};
+/**
+ * Hook to fetch offers for a specific collectible
+ *
+ * Fetches offers for a specific collectible 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.collectibleId - The specific collectible ID to fetch offers for
+ * @param params.filter - Optional filtering parameters
+ * @param params.page - Optional pagination parameters
+ * @param params.query - Optional React Query configuration
+ *
+ * @returns Query result containing offers data
+ *
+ * @example
+ * Basic usage:
+ * ```typescript
+ * const { data, isLoading } = useListOffersForCollectible({
+ *   chainId: 137,
+ *   collectionAddress: '0x...',
+ *   collectibleId: '1'
+ * })
+ * ```
+ *
+ * @example
+ * With filtering:
+ * ```typescript
+ * const { data } = useListOffersForCollectible({
+ *   chainId: 1,
+ *   collectionAddress: '0x...',
+ *   collectibleId: '1',
+ *   filter: {
+ *     marketplace: [MarketplaceKind.sequence_marketplace_v2]
+ *   }
+ * })
+ * ```
+ */
+export function useListOffersForCollectible(
+	params: UseListOffersForCollectibleParams,
+) {
+	const defaultConfig = useConfig();
+
+	const { config = defaultConfig, ...rest } = params;
 
-export const listOffersForCollectibleOptions = (
-	args: UseListOffersForCollectibleArgs,
-	config: SdkConfig,
-) => {
-	return queryOptions({
-		queryKey: [...collectableKeys.offers, args, config],
-		queryFn: () => fetchListOffersForCollectible(config, args),
+	const queryOptions = listOffersForCollectibleQueryOptions({
+		config,
+		...rest,
 	});
-};
 
-export const useListOffersForCollectible = (
-	args: UseListOffersForCollectibleArgs,
-) => {
-	const config = useConfig();
+	return useQuery({
+		...queryOptions,
+	});
+}
 
-	return useQuery(listOffersForCollectibleOptions(args, config));
+export { listOffersForCollectibleQueryOptions };
+
+export type {
+	FetchListOffersForCollectibleParams,
+	ListOffersForCollectibleQueryOptions,
 };
+
+// Legacy export for backward compatibility during migration
+export type UseListOffersForCollectibleArgs = UseListOffersForCollectibleParams;

package/src/react/hooks/data/primary-sales/useList1155ShopCardData.tsx

@@ -1,14 +1,19 @@
 import type { Address } from 'viem';
 import { useReadContract } from 'wagmi';
-import { ContractType, type TokenMetadata } from '../../../_internal';
+import {
+	ContractType,
+	type PrimarySaleItem,
+	type TokenMetadata,
+} from '../../../_internal';
 import type { ShopCollectibleCardProps } from '../../../ui/components/marketplace-collectible-card/types';
 import { useSalesContractABI } from '../../contracts/useSalesContractABI';
-import { useFilterState } from '../../ui/useFilterState';
 import { useCollection } from '../collections/useCollection';
-import { useListPrimarySaleItems } from '../primary-sales/useListPrimarySaleItems';
 
 interface UseList1155ShopCardDataProps {
-	tokenIds: string[];
+	primarySaleItemsWithMetadata: Array<{
+		metadata: TokenMetadata;
+		primarySaleItem: PrimarySaleItem;
+	}>;
 	chainId: number;
 	contractAddress: Address;
 	salesContractAddress: Address;
@@ -16,13 +21,12 @@ interface UseList1155ShopCardDataProps {
 }
 
 export function useList1155ShopCardData({
-	tokenIds,
+	primarySaleItemsWithMetadata,
 	chainId,
 	contractAddress,
 	salesContractAddress,
 	enabled = true,
 }: UseList1155ShopCardDataProps) {
-	const { showListedOnly } = useFilterState();
 	const { abi, isLoading: versionLoading } = useSalesContractABI({
 		contractAddress: salesContractAddress,
 		contractType: ContractType.ERC1155,
@@ -30,21 +34,12 @@ export function useList1155ShopCardData({
 		enabled,
 	});
 
-	const {
-		data: primarySaleItems,
-		isLoading: primarySaleItemsLoading,
-		error: primarySaleItemsError,
-	} = useListPrimarySaleItems({
-		chainId,
-		primarySaleContractAddress: salesContractAddress,
-		filter: {
-			includeEmpty: !showListedOnly,
-		},
-	});
-
 	const { data: collection, isLoading: collectionLoading } = useCollection({
 		chainId,
 		collectionAddress: contractAddress,
+		query: {
+			enabled,
+		},
 	});
 
 	const { data: paymentToken, isLoading: paymentTokenLoading } =
@@ -58,21 +53,10 @@ export function useList1155ShopCardData({
 			},
 		});
 
-	const isLoading =
-		primarySaleItemsLoading || collectionLoading || paymentTokenLoading;
-
-	// Flatten all collectibles from all pages
-	const allPrimarySaleItems =
-		primarySaleItems?.pages.flatMap((page) => page.primarySaleItems) ?? [];
-
-	const collectibleCards = tokenIds.map((tokenId) => {
-		const matchingPrimarySaleItem = allPrimarySaleItems.find(
-			(item) => item.primarySaleItem.tokenId?.toString() === tokenId,
-		);
+	const isLoading = versionLoading || collectionLoading || paymentTokenLoading;
 
-		const saleData = matchingPrimarySaleItem?.primarySaleItem;
-		const tokenMetadata =
-			matchingPrimarySaleItem?.metadata || ({} as TokenMetadata);
+	const collectibleCards = primarySaleItemsWithMetadata.map((item) => {
+		const { metadata, primarySaleItem: saleData } = item;
 
 		const salePrice = {
 			amount: saleData?.priceAmount?.toString() || '',
@@ -85,11 +69,11 @@ export function useList1155ShopCardData({
 		const unlimitedSupply = saleData?.unlimitedSupply;
 
 		return {
-			collectibleId: tokenId,
+			collectibleId: metadata.tokenId,
 			chainId,
 			collectionAddress: contractAddress,
 			collectionType: ContractType.ERC1155,
-			tokenMetadata: tokenMetadata,
+			tokenMetadata: metadata,
 			cardLoading: isLoading,
 			salesContractAddress: salesContractAddress,
 			salePrice,
@@ -99,14 +83,14 @@ export function useList1155ShopCardData({
 			unlimitedSupply,
 			saleStartsAt: saleData?.startDate?.toString(),
 			saleEndsAt: saleData?.endDate?.toString(),
-			marketplaceType: 'shop',
+			cardType: 'shop',
 		} satisfies ShopCollectibleCardProps;
 	});
 
 	return {
 		collectibleCards,
-		tokenMetadataError: primarySaleItemsError,
+		tokenMetadataError: null,
 		tokenSaleDetailsError: null,
-		isLoading,
+		isLoading: enabled && isLoading,
 	};
 }

package/src/react/hooks/data/primary-sales/useList721ShopCardData.tsx

@@ -37,12 +37,19 @@ export function useList721ShopCardData({
 	});
 	const config = useConfig();
 
+	const tokenSuppliesEnabled = Boolean(
+		chainId && contractAddress && config && (enabled ?? true),
+	);
+	// TODO: Find a way to remove this and use enabled in tokenSuppliesQueryOptions
 	const tokenSuppliesQuery = useInfiniteQuery({
 		...tokenSuppliesQueryOptions({
 			chainId,
 			collectionAddress: contractAddress,
 			includeMetadata: true,
 			config,
+			query: {
+				enabled: tokenSuppliesEnabled,
+			},
 		}),
 	});
 
@@ -56,6 +63,8 @@ export function useList721ShopCardData({
 
 	useEffect(() => {
 		async function fetchAllPages() {
+			if (!tokenSuppliesEnabled) return;
+
 			if (!hasNextSuppliesPage && tokenSuppliesData) {
 				setAllTokenSuppliesFetched(true);
 				return;
@@ -72,6 +81,7 @@ export function useList721ShopCardData({
 		isFetchingNextSuppliesPage,
 		tokenSuppliesLoading,
 		fetchNextTokenSuppliesPage,
+		tokenSuppliesEnabled,
 	]);
 
 	const allTokenSupplies = tokenSuppliesData?.pages.flatMap(
@@ -137,7 +147,7 @@ export function useList721ShopCardData({
 				quantityDecimals: 0,
 				saleStartsAt,
 				saleEndsAt,
-				marketplaceType: 'shop',
+				cardType: 'shop',
 			} satisfies ShopCollectibleCardProps;
 		},
 	);
@@ -160,7 +170,7 @@ export function useList721ShopCardData({
 			quantityDecimals: 0,
 			saleStartsAt: undefined,
 			saleEndsAt: undefined,
-			marketplaceType: 'shop',
+			cardType: 'shop',
 		} satisfies ShopCollectibleCardProps;
 	});
 
@@ -177,7 +187,8 @@ export function useList721ShopCardData({
 		saleDetailsError,
 		saleDetails,
 		isLoading:
-			saleDetailsLoading || tokenSuppliesLoading || !allTokenSuppliesFetched,
+			enabled &&
+			(saleDetailsLoading || tokenSuppliesLoading || !allTokenSuppliesFetched),
 		tokenSuppliesData,
 	};
 }

package/src/react/hooks/data/tokens/useSearchTokenMetadata.tsx

@@ -104,7 +104,10 @@ export function useSearchTokenMetadata(params: UseSearchTokenMetadataParams) {
 		collectionAddress: params.collectionAddress,
 		includeMetadata: true,
 		query: {
-			enabled: onlyMinted && (params.query?.enabled ?? true),
+			enabled:
+				onlyMinted &&
+				!!params.collectionAddress &&
+				(params.query?.enabled ?? true),
 		},
 	});
 

package/src/react/hooks/transactions/useCancelOrder.test.tsx

@@ -1,12 +1,11 @@
 import { renderHook, server, waitFor } from '@test';
 import { HttpResponse, http } from 'msw';
+import type { Address } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-
 import * as types from '../../../types';
 import { StepType } from '../../../types';
 import { WalletKind } from '../../_internal/api';
 import { mockMarketplaceEndpoint } from '../../_internal/api/__mocks__/marketplace.msw';
-
 import { useConnectorMetadata } from '../config/useConnectorMetadata';
 import { useCancelOrder } from './useCancelOrder';
 import { useProcessStep } from './useProcessStep';
@@ -24,7 +23,7 @@ vi.mock('../../utils/waitForTransactionReceipt', () => ({
 
 describe('useCancelOrder', () => {
 	const defaultProps = {
-		collectionAddress: '0x1234567890123456789012345678901234567890',
+		collectionAddress: '0x1234567890123456789012345678901234567890' as Address,
 		chainId: 1,
 	};
 
@@ -99,7 +98,11 @@ describe('useCancelOrder', () => {
 	});
 
 	it('should update state during cancellation process', async () => {
-		const { result } = renderHook(() => useCancelOrder(defaultProps));
+		const { result } = renderHook(() =>
+			useCancelOrder({
+				...defaultProps,
+			}),
+		);
 
 		// Mock a delayed response
 		server.use(

package/src/react/hooks/transactions/useCancelOrder.tsx

@@ -1,12 +1,13 @@
 'use client';
 import { useWaasFeeOptions } from '@0xsequence/connect';
 import { useEffect, useState } from 'react';
+import type { Address } from 'viem';
 import type * as types from '../../_internal';
 import { useAutoSelectFeeOption } from '../utils/useAutoSelectFeeOption';
 import { useCancelTransactionSteps } from './useCancelTransactionSteps';
 
 interface UseCancelOrderArgs {
-	collectionAddress: string;
+	collectionAddress: Address;
 	chainId: number;
 	onSuccess?: ({ hash, orderId }: { hash?: string; orderId?: string }) => void;
 	onError?: (error: Error) => void;

package/src/react/hooks/transactions/useCancelTransactionSteps.tsx

@@ -1,4 +1,4 @@
-import type { Hex } from 'viem';
+import type { Address, Hex } from 'viem';
 import { useAccount } from 'wagmi';
 import { NoWalletConnectedError } from '../../../utils/_internal/error/transaction';
 import {
@@ -19,7 +19,7 @@ import { useGenerateCancelTransaction } from './useGenerateCancelTransaction';
 import { useProcessStep } from './useProcessStep';
 
 interface UseCancelTransactionStepsArgs {
-	collectionAddress: string;
+	collectionAddress: Address;
 	chainId: number;
 	callbacks?: ModalCallbacks;
 	setSteps: React.Dispatch<React.SetStateAction<TransactionStep>>;

package/src/react/hooks/transactions/useProcessStep.test.tsx

@@ -7,7 +7,7 @@ import { useProcessStep } from './useProcessStep';
 vi.mock('wagmi', async (importOriginal) => {
 	const actual = await importOriginal();
 	return {
-		// @ts-ignore - ignore spread type error
+		// @ts-expect-error - ignore spread type error
 		...actual,
 		useSendTransaction: vi.fn(),
 		useSignMessage: vi.fn(),
@@ -18,7 +18,7 @@ vi.mock('wagmi', async (importOriginal) => {
 vi.mock('../../_internal/api', async (importOriginal) => {
 	const actual = await importOriginal();
 	return {
-		// @ts-ignore - ignore spread type error
+		// @ts-expect-error - ignore spread type error
 		...actual,
 		getMarketplaceClient: vi.fn(() => ({
 			execute: vi.fn(),

package/src/react/hooks/utils/__tests__/useEnsureCorrectChain.test.tsx

@@ -0,0 +1,75 @@
+import { renderHook, wagmiConfig, waitFor } from '@test';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { switchChainErrorModalStore } from '../../../ui/modals/_internal/components/switchChainErrorModal/store';
+import { useEnsureCorrectChain } from '../useEnsureCorrectChain';
+
+const currentChain = wagmiConfig.chains[0]; // mainnet
+const chainToSwitchTo = wagmiConfig.chains[1]; // polygon
+
+describe('useEnsureCorrectChain', () => {
+	beforeEach(() => {
+		switchChainErrorModalStore.send({ type: 'close' });
+	});
+
+	test('returns current chain id', async () => {
+		const { result } = renderHook(() => useEnsureCorrectChain());
+		// Wait for the account to be connected and chainId to be available
+		await waitFor(() => {
+			expect(result.current.currentChainId).toBeDefined();
+		});
+		expect(result.current.currentChainId).toBe(currentChain.id);
+	});
+
+	test('does nothing if already on correct chain', () => {
+		const { result } = renderHook(() => useEnsureCorrectChain());
+		const onSuccess = vi.fn();
+
+		result.current.ensureCorrectChain(currentChain.id, { onSuccess });
+
+		expect(onSuccess).toHaveBeenCalled();
+	});
+
+	test('attempts to switch chain and shows error modal when switch fails', async () => {
+		const { result } = renderHook(() => useEnsureCorrectChain());
+
+		result.current.ensureCorrectChain(chainToSwitchTo.id);
+
+		await waitFor(() => {
+			expect(
+				switchChainErrorModalStore.getSnapshot().context.chainIdToSwitchTo,
+			).toBe(chainToSwitchTo.id);
+		});
+	});
+
+	test('async version handles chain switch error correctly', async () => {
+		const { result } = renderHook(() => useEnsureCorrectChain());
+
+		await result.current.ensureCorrectChainAsync(chainToSwitchTo.id);
+
+		expect(
+			switchChainErrorModalStore.getSnapshot().context.chainIdToSwitchTo,
+		).toBe(chainToSwitchTo.id);
+	});
+
+	test('closes error modal when successfully switched to target chain', async () => {
+		const { result } = renderHook(() => useEnsureCorrectChain());
+
+		await waitFor(() => {
+			expect(result.current.currentChainId).toBeDefined();
+		});
+
+		// Now open the modal for the same chain the user is already on
+		// This should trigger the effect to close it immediately
+		switchChainErrorModalStore.send({
+			type: 'open',
+			chainIdToSwitchTo: result.current.currentChainId!,
+		});
+
+		// The effect should close the modal since we're already on the target chain
+		await waitFor(() => {
+			expect(
+				switchChainErrorModalStore.getSnapshot().context.chainIdToSwitchTo,
+			).toBeUndefined();
+		});
+	});
+});

package/src/react/hooks/utils/index.ts

@@ -6,4 +6,3 @@ export * from './useConvertPriceToUSD';
 export * from './useEnsureCorrectChain';
 export * from './useGetReceiptFromHash';
 export * from './useRoyalty';
-export * from './useSwitchChainWithModal';