@0xsequence/marketplace-sdk 0.8.3 → 0.8.5

package/src/react/hooks/__tests__/useInventory.test.tsx

@@ -0,0 +1,294 @@
+import { renderHook, server, waitFor } from '@test';
+import { http, HttpResponse } from 'msw';
+import { zeroAddress } from 'viem';
+import { beforeEach, describe, expect, it } from 'vitest';
+import {
+	mockIndexerEndpoint,
+	mockTokenBalance,
+} from '../../_internal/api/__mocks__/indexer.msw';
+import {
+	mockCollectibleOrder,
+	mockMarketplaceEndpoint,
+} from '../../_internal/api/__mocks__/marketplace.msw';
+import type { UseInventoryArgs } from '../../queries/inventory';
+import { mockConfig } from '../options/__mocks__/marketplaceConfig.msw';
+import { useInventory } from '../useInventory';
+
+// Make sure mockCollectibleOrder has a tokenId of "1" for tests
+mockCollectibleOrder.metadata.tokenId = '1';
+
+describe('useInventory', () => {
+	const defaultArgs: UseInventoryArgs = {
+		accountAddress:
+			'0x1234567890123456789012345678901234567890' as `0x${string}`,
+		chainId: 1,
+		collectionAddress: zeroAddress,
+	};
+
+	beforeEach(() => {
+		// Reset MSW handlers before each test to ensure a clean state
+		server.resetHandlers();
+	});
+
+	it('should fetch inventory data successfully', async () => {
+		const { result } = renderHook(() => useInventory(defaultArgs));
+
+		// Initially loading
+		expect(result.current.isLoading).toBe(true);
+		expect(result.current.data).toBeUndefined();
+
+		// Wait for data to be loaded
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		// Verify the data is defined and has pages
+		expect(result.current.data).toBeDefined();
+		expect(result.current.data?.pages).toBeDefined();
+		expect(result.current.error).toBeNull();
+	});
+
+	it('should handle error gracefully', async () => {
+		// Mock both API endpoints to return errors
+		server.use(
+			http.post(mockMarketplaceEndpoint('ListCollectibles'), () => {
+				return new HttpResponse(null, { status: 500 });
+			}),
+			http.post(mockIndexerEndpoint('GetTokenBalances'), () => {
+				return new HttpResponse(null, { status: 500 });
+			}),
+		);
+
+		const { result } = renderHook(() =>
+			useInventory({
+				...defaultArgs,
+				// Add a unique key to avoid caching
+				collectionAddress:
+					'0xdeadbeef0000000000000000000000000000dead' as `0x${string}`,
+			}),
+		);
+
+		// Wait for the query to finish loading and show error
+		await waitFor(
+			() => {
+				expect(result.current.isLoading).toBe(false);
+			},
+			{ timeout: 3000 },
+		);
+
+		// Verify error state
+		expect(result.current.status).toBe('error');
+		expect(result.current.isError).toBe(true);
+		expect(result.current.error).not.toBeNull();
+	});
+
+	it('should refetch when args change', async () => {
+		const { result, rerender } = renderHook(() => useInventory(defaultArgs));
+
+		// Wait for initial data
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		// Change args and rerender with a new hook
+		const newArgs = {
+			...defaultArgs,
+			collectionAddress:
+				'0x1234567890123456789012345678901234567890' as `0x${string}`,
+		};
+
+		rerender(() => useInventory(newArgs));
+
+		// Wait for new data
+		await waitFor(() => {
+			expect(result.current.data).toBeDefined();
+		});
+
+		// Verify that the query was refetched with new args
+		expect(result.current.data).toBeDefined();
+		expect(result.current.isSuccess).toBe(true);
+	});
+
+	it('should handle disabled queries', async () => {
+		const disabledArgs: UseInventoryArgs = {
+			...defaultArgs,
+			query: {
+				enabled: false,
+			},
+		};
+
+		const { result } = renderHook(() => useInventory(disabledArgs));
+
+		// Should not be loading or have data
+		expect(result.current.isLoading).toBe(false);
+		expect(result.current.data).toBeUndefined();
+		expect(result.current.isFetched).toBe(false);
+	});
+
+	it('should use isLaos721 flag from marketplaceConfig', async () => {
+		// Setup config with LAOS collection
+		const laosCollectionAddress = '0x1234567890123456789012345678901234567890';
+		server.use(
+			http.get('*/marketplace/*/settings.json', () => {
+				const configWithLaos = {
+					...mockConfig,
+					collections: [
+						{
+							...mockConfig.collections[0],
+							address: laosCollectionAddress,
+							isLAOSERC721: true,
+						},
+					],
+				};
+				return HttpResponse.json(configWithLaos);
+			}),
+		);
+
+		const laosArgs: UseInventoryArgs = {
+			...defaultArgs,
+			collectionAddress: laosCollectionAddress as `0x${string}`,
+		};
+
+		const { result } = renderHook(() => useInventory(laosArgs));
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.data).toBeDefined();
+		expect(result.current.isSuccess).toBe(true);
+	});
+
+	it('should fetch data from indexer when marketplace API has no more results', async () => {
+		// Mock marketplace API with empty results
+		server.use(
+			http.post(mockMarketplaceEndpoint('ListCollectibles'), () => {
+				return HttpResponse.json({
+					collectibles: [],
+					page: {
+						page: 1,
+						pageSize: 50,
+						more: false,
+					},
+				});
+			}),
+			// Mock indexer with data
+			http.post(mockIndexerEndpoint('GetTokenBalances'), () => {
+				return HttpResponse.json({
+					balances: [mockTokenBalance],
+					page: {
+						page: 1,
+						pageSize: 50,
+						more: false,
+					},
+				});
+			}),
+		);
+
+		const { result } = renderHook(() => useInventory(defaultArgs));
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.data).toBeDefined();
+		expect(result.current.data?.pages[0].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 `0x${string}`,
+			collectionAddress:
+				'0xabcdef1234567890abcdef1234567890abcdef12' as `0x${string}`,
+		};
+
+		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/index.ts

@@ -12,6 +12,7 @@ export * from './useCurrency';
 export * from './useFilters';
 export * from './useFloorOrder';
 export * from './useHighestOffer';
+export * from './useInventory';
 export * from './useListBalances';
 export * from './useListCollectibleActivities';
 export * from './useListCollectibles';

package/src/react/hooks/useAutoSelectFeeOption.tsx

@@ -1,7 +1,7 @@
 import { type Address, zeroAddress } from 'viem';
 
 import { useChain } from '@0xsequence/connect';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useAccount } from 'wagmi';
 import type { FeeOption } from '../../types/waas-types';
 import { useCollectionBalanceDetails } from './useCollectionBalanceDetails';
@@ -19,6 +19,7 @@ type UseAutoSelectFeeOptionArgs = {
 		options: FeeOption[] | undefined;
 		chainId: number;
 	};
+	enabled?: boolean;
 };
 
 /**
@@ -87,6 +88,7 @@ type UseAutoSelectFeeOptionArgs = {
  */
 export function useAutoSelectFeeOption({
 	pendingFeeOptionConfirmation,
+	enabled,
 }: UseAutoSelectFeeOptionArgs) {
 	const { address: userAddress } = useAccount();
 
@@ -110,7 +112,8 @@ export function useAutoSelectFeeOption({
 			omitNativeBalances: false,
 		},
 		query: {
-			enabled: !!pendingFeeOptionConfirmation.options && !!userAddress,
+			enabled:
+				!!pendingFeeOptionConfirmation.options && !!userAddress && enabled,
 		},
 	});
 	const chain = useChain(pendingFeeOptionConfirmation.chainId);
@@ -131,7 +134,11 @@ export function useAutoSelectFeeOption({
 		})),
 	];
 
-	console.debug('currency balances', combinedBalances);
+	useEffect(() => {
+		if (combinedBalances) {
+			console.debug('currency balances', combinedBalances);
+		}
+	}, [combinedBalances]);
 
 	const autoSelectedOption = useCallback(async () => {
 		if (!userAddress) {

package/src/react/hooks/useCancelOrder.tsx

@@ -54,6 +54,7 @@ export const useCancelOrder = ({
 					options: undefined,
 					chainId,
 				},
+		enabled: !!pendingFeeOptionConfirmation,
 	});
 
 	useEffect(() => {

package/src/react/hooks/useCancelTransactionSteps.tsx

@@ -20,6 +20,10 @@ import type { ModalCallbacks } from '../ui/modals/_internal/types';
 import type { TransactionStep } from './useCancelOrder';
 import { useConfig } from './useConfig';
 import { useGenerateCancelTransaction } from './useGenerateCancelTransaction';
+import {
+	invalidateQueriesOnCancel,
+	updateQueriesOnCancel,
+} from './util/optimisticCancelUpdates';
 
 interface UseCancelTransactionStepsArgs {
 	collectionAddress: string;
@@ -156,9 +160,12 @@ export const useCancelTransactionSteps = ({
 
 					if (onSuccess && typeof onSuccess === 'function') {
 						onSuccess({ hash });
-					}
 
-					queryClient.invalidateQueries();
+						updateQueriesOnCancel({
+							orderId,
+							queryClient,
+						});
+					}
 
 					setSteps((prev) => ({
 						...prev,
@@ -172,9 +179,12 @@ export const useCancelTransactionSteps = ({
 
 				if (onSuccess && typeof onSuccess === 'function') {
 					onSuccess({ orderId: reservoirOrderId });
-				}
 
-				queryClient.invalidateQueries();
+					updateQueriesOnCancel({
+						orderId: reservoirOrderId,
+						queryClient,
+					});
+				}
 
 				setSteps((prev) => ({
 					...prev,
@@ -182,6 +192,10 @@ export const useCancelTransactionSteps = ({
 				}));
 			}
 		} catch (error) {
+			invalidateQueriesOnCancel({
+				queryClient,
+			});
+
 			setSteps((prev) => ({
 				...prev,
 				isExecuting: false,

package/src/react/hooks/useGenerateOfferTransaction.tsx

@@ -5,8 +5,10 @@ import {
 	type CreateReq,
 	type GenerateOfferTransactionArgs,
 	type Step,
+	type WalletKind,
 	getMarketplaceClient,
 } from '../_internal';
+import { useWallet } from '../_internal/wallet/useWallet';
 import { useConfig } from './useConfig';
 
 export type UseGenerateOfferTransactionArgs = {
@@ -29,10 +31,12 @@ export const generateOfferTransaction = async (
 	params: GenerateOfferTransactionProps,
 	config: SdkConfig,
 	chainId: number,
+	walletKind?: WalletKind,
 ) => {
 	const args = {
 		...params,
 		offer: { ...params.offer, expiry: dateToUnixTime(params.offer.expiry) },
+		walletType: walletKind,
 	} satisfies GenerateOfferTransactionArgs;
 	const marketplaceClient = getMarketplaceClient(chainId, config);
 	return (await marketplaceClient.generateOfferTransaction(args)).steps;
@@ -42,11 +46,17 @@ export const useGenerateOfferTransaction = (
 	params: UseGenerateOfferTransactionArgs,
 ) => {
 	const config = useConfig();
+	const { wallet } = useWallet();
 
 	const { mutate, mutateAsync, ...result } = useMutation({
 		onSuccess: params.onSuccess,
 		mutationFn: (args: GenerateOfferTransactionProps) =>
-			generateOfferTransaction(args, config, params.chainId),
+			generateOfferTransaction(
+				args,
+				config,
+				params.chainId,
+				wallet?.walletKind,
+			),
 	});
 
 	return {

package/src/react/hooks/useInventory.tsx

@@ -0,0 +1,15 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { type UseInventoryArgs, inventoryOptions } from '../queries/inventory';
+import { useConfig } from './useConfig';
+import { useMarketplaceConfig } from './useMarketplaceConfig';
+
+export function useInventory(args: UseInventoryArgs) {
+	const config = useConfig();
+	const marketplaceConfig = useMarketplaceConfig();
+	const isLaos721 =
+		marketplaceConfig.data?.collections.find(
+			(c) => c.address === args.collectionAddress,
+		)?.isLAOSERC721 ?? false;
+
+	return useInfiniteQuery(inventoryOptions({ ...args, isLaos721 }, config));
+}

package/src/react/hooks/util/optimisticCancelUpdates.ts

@@ -0,0 +1,115 @@
+import type { QueryClient } from '@tanstack/react-query';
+import {
+	type GetCountOfListingsForCollectibleReturn,
+	type GetCountOfOffersForCollectibleReturn,
+	type ListListingsForCollectibleReturn,
+	type ListOffersForCollectibleReturn,
+	collectableKeys,
+} from '../../_internal';
+
+const SECOND = 1000;
+
+interface OptimisticCancelUpdatesParams {
+	orderId: string;
+	queryClient: QueryClient;
+}
+
+export const updateQueriesOnCancel = ({
+	orderId,
+	queryClient,
+}: OptimisticCancelUpdatesParams) => {
+	queryClient.setQueriesData(
+		{ queryKey: collectableKeys.offersCount, exact: false },
+		(oldData: GetCountOfOffersForCollectibleReturn | undefined) => {
+			if (!oldData) return { count: 0 };
+			return { count: Math.max(0, oldData.count - 1) };
+		},
+	);
+
+	console.log('query client ', queryClient, 'orderId', orderId);
+
+	// remove the offer with matching orderId
+	queryClient.setQueriesData(
+		{ queryKey: collectableKeys.offers, exact: false },
+		(oldData: ListOffersForCollectibleReturn | undefined) => {
+			if (!oldData || !oldData.offers) return oldData;
+			return {
+				...oldData,
+				offers: oldData.offers.filter((offer) => offer.orderId !== orderId),
+			};
+		},
+	);
+
+	// 2 seconds is enough time for new data to be fetched
+	setTimeout(() => {
+		queryClient.invalidateQueries({
+			queryKey: collectableKeys.highestOffers,
+			exact: false,
+		});
+	}, 2 * SECOND);
+
+	queryClient.setQueriesData(
+		{ queryKey: collectableKeys.listingsCount, exact: false },
+		(oldData: GetCountOfListingsForCollectibleReturn | undefined) => {
+			if (!oldData) return { count: 0 };
+			return { count: Math.max(0, oldData.count - 1) };
+		},
+	);
+
+	queryClient.setQueriesData(
+		{ queryKey: collectableKeys.listings, exact: false },
+		(oldData: ListListingsForCollectibleReturn | undefined) => {
+			if (!oldData || !oldData.listings) return oldData;
+			return {
+				...oldData,
+				listings: oldData.listings.filter(
+					(listing) => listing.orderId !== orderId,
+				),
+			};
+		},
+	);
+
+	// 2 seconds is enough time for new data to be fetched
+	setTimeout(() => {
+		queryClient.invalidateQueries({
+			queryKey: collectableKeys.lowestListings,
+			exact: false,
+		});
+	}, 2 * SECOND);
+};
+
+export const invalidateQueriesOnCancel = ({
+	queryClient,
+}: {
+	queryClient: QueryClient;
+}) => {
+	queryClient.invalidateQueries({
+		queryKey: collectableKeys.offers,
+		exact: false,
+	});
+
+	queryClient.invalidateQueries({
+		queryKey: collectableKeys.offersCount,
+		exact: false,
+	});
+
+	queryClient.invalidateQueries({
+		queryKey: collectableKeys.listings,
+		exact: false,
+	});
+
+	queryClient.invalidateQueries({
+		queryKey: collectableKeys.listingsCount,
+		exact: false,
+	});
+
+	queryClient.invalidateQueries({
+		queryKey: collectableKeys.highestOffers,
+		exact: false,
+	});
+
+	queryClient.invalidateQueries({
+		queryKey: collectableKeys.lowestListings,
+		exact: false,
+	});
+};

package/src/react/queries/index.ts

@@ -1,5 +1,6 @@
 export * from './balanceOfCollectible';
 export * from './getTokenSupplies';
+export * from './inventory';
 export * from './listCollectibles';
 export * from './highestOffer';
 export * from './listBalances';