@0xsequence/marketplace-sdk 0.8.12 → 0.9.0

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

@@ -0,0 +1,301 @@
+import { renderHook, server, waitFor } from '@test';
+import { HttpResponse, http } from 'msw';
+import { zeroAddress } from 'viem';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useDisconnect } from 'wagmi';
+import {
+	CollectibleCardAction,
+	ContractType,
+	OrderbookKind,
+} from '../../../types';
+import {
+	mockIndexerEndpoint,
+	mockTokenBalance,
+} from '../../_internal/api/__mocks__/indexer.msw';
+import {
+	mockCollectibleOrder,
+	mockMarketplaceEndpoint,
+} from '../../_internal/api/__mocks__/marketplace.msw';
+import { PropertyType } from '../../_internal/api/marketplace.gen';
+import { useListMarketCardData } from '../useListMarketCardData';
+
+describe('useListMarketCardData', () => {
+	const defaultProps = {
+		collectionAddress: zeroAddress,
+		chainId: 1,
+		orderbookKind: OrderbookKind.sequence_marketplace_v2,
+		collectionType: ContractType.ERC721,
+	};
+
+	beforeEach(() => {
+		// Set up default handlers for successful API responses
+		server.use(
+			http.post(mockMarketplaceEndpoint('ListCollectibles'), () => {
+				return HttpResponse.json({
+					page: { page: 1, pageSize: 10, more: false },
+					collectibles: [mockCollectibleOrder],
+				});
+			}),
+			http.post(mockIndexerEndpoint('GetTokenBalancesDetails'), () => {
+				return HttpResponse.json({
+					page: { page: 1, pageSize: 10, more: false },
+					balances: [
+						{
+							...mockTokenBalance,
+							balance: '1',
+							contractAddress: zeroAddress,
+						},
+					],
+					nativeBalances: [],
+				});
+			}),
+		);
+	});
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should fetch collectibles and balances when wallet is connected', async () => {
+		const { result } = renderHook(() => useListMarketCardData(defaultProps));
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.collectibleCards).toHaveLength(1);
+		expect(result.current.error).toBeNull();
+	});
+
+	it('should handle disconnected wallet state', async () => {
+		const { result: disconnect } = renderHook(() => useDisconnect());
+		await disconnect.current.disconnectAsync();
+
+		const { result } = renderHook(() => useListMarketCardData(defaultProps));
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.collectibleCards).toHaveLength(1);
+		// Should still work without wallet, just won't show balance
+		expect(result.current.error).toBeNull();
+	});
+
+	it('should handle API errors gracefully', async () => {
+		server.use(
+			http.post(mockMarketplaceEndpoint('ListCollectibles'), () => {
+				return new HttpResponse(null, {
+					status: 500,
+					statusText: 'Internal Server Error',
+				});
+			}),
+		);
+
+		const { result } = renderHook(() => useListMarketCardData(defaultProps));
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.error).toBeTruthy();
+		expect(result.current.collectibleCards).toHaveLength(0);
+	});
+
+	it('should handle search text filtering', async () => {
+		const { result } = renderHook(() =>
+			useListMarketCardData({
+				...defaultProps,
+				searchText: 'test search',
+			}),
+		);
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.collectibleCards).toHaveLength(1);
+	});
+
+	it('should handle property filtering', async () => {
+		const { result } = renderHook(() =>
+			useListMarketCardData({
+				...defaultProps,
+				filterOptions: [
+					{
+						name: 'Background',
+						type: PropertyType.STRING,
+						values: ['Blue'],
+					},
+				],
+			}),
+		);
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.collectibleCards).toHaveLength(1);
+	});
+
+	it('should handle listed-only filtering', async () => {
+		const { result } = renderHook(() =>
+			useListMarketCardData({
+				...defaultProps,
+				showListedOnly: true,
+			}),
+		);
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.collectibleCards).toHaveLength(1);
+	});
+
+	it('should handle collectible click callback', async () => {
+		const onCollectibleClick = vi.fn();
+
+		const { result } = renderHook(() =>
+			useListMarketCardData({
+				...defaultProps,
+				onCollectibleClick,
+			}),
+		);
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		// Simulate clicking the collectible
+		result.current.collectibleCards[0].onCollectibleClick?.('1');
+		expect(onCollectibleClick).toHaveBeenCalledWith('1');
+	});
+
+	it('should handle cannot perform action callback', async () => {
+		const onCannotPerformAction = vi.fn();
+
+		const { result } = renderHook(() =>
+			useListMarketCardData({
+				...defaultProps,
+				onCannotPerformAction,
+			}),
+		);
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		// Simulate action that cannot be performed
+		result.current.collectibleCards[0].onCannotPerformAction?.(
+			CollectibleCardAction.BUY,
+		);
+		expect(onCannotPerformAction).toHaveBeenCalledWith(
+			CollectibleCardAction.BUY,
+		);
+	});
+
+	it('should prioritize owner actions when specified', async () => {
+		const { result } = renderHook(() =>
+			useListMarketCardData({
+				...defaultProps,
+				prioritizeOwnerActions: true,
+			}),
+		);
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.collectibleCards[0].prioritizeOwnerActions).toBe(
+			true,
+		);
+	});
+
+	it('should use custom asset source prefix URL when provided', async () => {
+		const assetSrcPrefixUrl = 'https://custom-cdn.example.com/';
+
+		const { result } = renderHook(() =>
+			useListMarketCardData({
+				...defaultProps,
+				assetSrcPrefixUrl,
+			}),
+		);
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.collectibleCards[0].assetSrcPrefixUrl).toBe(
+			assetSrcPrefixUrl,
+		);
+	});
+
+	it('should handle pagination correctly', async () => {
+		// Mock first page
+		server.use(
+			http.post(mockMarketplaceEndpoint('ListCollectibles'), () => {
+				return HttpResponse.json({
+					page: { page: 1, pageSize: 10, more: true },
+					collectibles: [mockCollectibleOrder],
+				});
+			}),
+		);
+
+		const { result } = renderHook(() => useListMarketCardData(defaultProps));
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.hasNextPage).toBe(true);
+		expect(result.current.isFetchingNextPage).toBe(false);
+
+		// Mock second page
+		server.use(
+			http.post(mockMarketplaceEndpoint('ListCollectibles'), () => {
+				return HttpResponse.json({
+					page: { page: 2, pageSize: 10, more: false },
+					collectibles: [
+						{
+							...mockCollectibleOrder,
+							metadata: { ...mockCollectibleOrder.metadata, tokenId: '2' },
+						},
+					],
+				});
+			}),
+		);
+
+		// Fetch next page
+		await result.current.fetchNextPage();
+
+		await waitFor(() => {
+			expect(result.current.isFetchingNextPage).toBe(false);
+		});
+
+		expect(result.current.allCollectibles).toHaveLength(2);
+		expect(result.current.hasNextPage).toBe(false);
+	});
+
+	it('should handle combined filters (search text and properties)', async () => {
+		const { result } = renderHook(() =>
+			useListMarketCardData({
+				...defaultProps,
+				searchText: 'test search',
+				filterOptions: [
+					{
+						name: 'Background',
+						type: PropertyType.STRING,
+						values: ['Blue'],
+					},
+				],
+			}),
+		);
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.collectibleCards).toHaveLength(1);
+	});
+});

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

@@ -1,5 +1,5 @@
 import { renderHook, server, waitFor } from '@test';
-import { http, HttpResponse } from 'msw';
+import { HttpResponse, http } from 'msw';
 import { zeroAddress } from 'viem';
 import { describe, expect, it } from 'vitest';
 import {

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

@@ -0,0 +1,111 @@
+import { renderHook, server, waitFor } from '@test';
+import { HttpResponse, http } from 'msw';
+import { describe, expect, it } from 'vitest';
+import { useListTokenMetadata } from '../useListTokenMetadata';
+
+describe('useListTokenMetadata', () => {
+	const defaultParams = {
+		chainId: 1,
+		contractAddress: '0x1234567890123456789012345678901234567890',
+		tokenIds: ['1', '2', '3'],
+	};
+
+	const mockTokenMetadata = [
+		{
+			tokenId: '1',
+			contractAddress: '0x1234567890123456789012345678901234567890',
+			name: 'Token 1',
+			description: 'First token',
+			image: 'https://example.com/1.png',
+		},
+		{
+			tokenId: '2',
+			contractAddress: '0x1234567890123456789012345678901234567890',
+			name: 'Token 2',
+			description: 'Second token',
+			image: 'https://example.com/2.png',
+		},
+		{
+			tokenId: '3',
+			contractAddress: '0x1234567890123456789012345678901234567890',
+			name: 'Token 3',
+			description: 'Third token',
+			image: 'https://example.com/3.png',
+		},
+	];
+
+	it('should fetch token metadata successfully', async () => {
+		// Mock the metadata API response
+		server.use(
+			http.post('*/rpc/Metadata/GetTokenMetadata', () => {
+				return HttpResponse.json({
+					tokenMetadata: mockTokenMetadata,
+				});
+			}),
+		);
+
+		const { result } = renderHook(() => useListTokenMetadata(defaultParams));
+
+		// 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 matches our mock
+		expect(result.current.data).toEqual(mockTokenMetadata);
+		expect(result.current.error).toBeNull();
+	});
+
+	it('should handle empty token IDs', async () => {
+		const emptyParams = {
+			...defaultParams,
+			tokenIds: [],
+		};
+
+		const { result } = renderHook(() => useListTokenMetadata(emptyParams));
+
+		// Should not trigger request with empty token IDs
+		expect(result.current.isLoading).toBe(false);
+		expect(result.current.data).toBeUndefined();
+		expect(result.current.error).toBeNull();
+	});
+
+	it('should handle disabled queries', async () => {
+		const disabledParams = {
+			...defaultParams,
+			query: {
+				enabled: false,
+			},
+		};
+
+		const { result } = renderHook(() => useListTokenMetadata(disabledParams));
+
+		// For disabled queries, we expect no loading state and no data
+		expect(result.current.isLoading).toBe(false);
+		expect(result.current.data).toBeUndefined();
+		expect(result.current.error).toBeNull();
+	});
+
+	it('should handle API errors', async () => {
+		// Mock API error
+		server.use(
+			http.post('*/rpc/Metadata/GetTokenMetadata', () => {
+				return new HttpResponse(null, { status: 500 });
+			}),
+		);
+
+		const { result } = renderHook(() => useListTokenMetadata(defaultParams));
+
+		// Wait for error state
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.data).toBeUndefined();
+		expect(result.current.error).toBeTruthy();
+	});
+});

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

@@ -1,5 +1,5 @@
 import { renderHook, server, waitFor } from '@test';
-import { http, HttpResponse } from 'msw';
+import { HttpResponse, http } from 'msw';
 import { zeroAddress } from 'viem';
 import { describe, expect, it } from 'vitest';
 import {

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

@@ -1,6 +1,6 @@
 import { renderHook, server, waitFor } from '@test';
 import { USDC_ADDRESS } from '@test/const';
-import { http, HttpResponse } from 'msw';
+import { HttpResponse, http } from 'msw';
 import type { Address } from 'viem';
 import { describe, expect, it } from 'vitest';
 import { mockConfig } from '../../_internal/api/__mocks__/builder.msw';

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

@@ -25,27 +25,4 @@ describe('useRoyaltyPercentage', () => {
 			}
 		`);
 	});
-
-	it('should handle invalid args', async () => {
-		const invalidArgs = {
-			collectionAddress: 'invalid-collection-address' as `0x${string}`,
-			chainId: 'invalid-chain-id',
-			collectibleId: '1',
-		};
-
-		// @ts-expect-error - This will fail Zod validation
-		const { result } = renderHook(() => useRoyalty(invalidArgs));
-
-		expect(result.current.isLoading).toBe(true);
-
-		await waitFor(
-			() => {
-				expect(result.current.isLoading).toBe(false);
-			},
-			{ timeout: 1000000 },
-		);
-
-		expect(result.current.data).toBeNull();
-		expect(result.current.error).toBeDefined();
-	});
 });

package/src/react/hooks/index.ts

@@ -1,47 +1,50 @@
 export * from './useAutoSelectFeeOption';
 export * from './useBalanceOfCollectible';
-export * from './useCountOfCollectables';
+export * from './useCancelOrder';
+export * from './useCheckoutOptionsSalesContract';
+export * from './useCheckoutOptionsSalesContract';
 export * from './useCollectible';
 export * from './useCollection';
 export * from './useCollectionBalanceDetails';
+export * from './useCollectionDetails';
+export * from './useCollectionDetailsPolling';
 export * from './useComparePrices';
 export * from './useConfig';
 export * from './useConvertPriceToUSD';
-export * from './useMarketCurrencies';
+export * from './useCountListingsForCollectible';
+export * from './useCountOfCollectables';
+export * from './useCountOffersForCollectible';
+export * from './useCountOfPrimarySaleItems';
 export * from './useCurrency';
-export * from './useFilters';
+export * from './useERC721SaleMintedTokens';
 export * from './useFilterState';
+export * from './useFilters';
 export * from './useFloorOrder';
+export * from './useGenerateCancelTransaction';
+export * from './useGenerateListingTransaction';
+export * from './useGenerateOfferTransaction';
+export * from './useGenerateSellTransaction';
+export * from './useGetTokenRanges';
+export * from './useGetTokenSuppliesMap';
 export * from './useHighestOffer';
 export * from './useInventory';
+export * from './useList721ShopCardData';
+export * from './useList1155ShopCardData';
 export * from './useListBalances';
 export * from './useListCollectibleActivities';
 export * from './useListCollectibles';
 export * from './useListCollectiblesPaginated';
 export * from './useListCollectionActivities';
-export * from './useListOffersForCollectible';
-export * from './useCountOffersForCollectible';
+export * from './useListCollections';
 export * from './useListListingsForCollectible';
-export * from './useCountListingsForCollectible';
+export * from './useListMarketCardData';
+export * from './useListOffersForCollectible';
+export * from './useListPrimarySaleItems';
+export * from './useListShopCardData';
+export * from './useListTokenMetadata';
 export * from './useLowestListing';
+export * from './useMarketCurrencies';
 export * from './useMarketplaceConfig';
 export * from './useRoyalty';
-export * from './useGenerateListingTransaction';
-export * from './useGenerateOfferTransaction';
-export * from './useGenerateSellTransaction';
-export * from './useGenerateCancelTransaction';
+export * from './useShopCollectibleSaleData';
 export * from './useTransferTokens';
-export * from './useCheckoutOptions';
-export * from './useCheckoutOptionsSalesContract';
-export * from './useListCollections';
-export * from './useCancelOrder';
-export * from './useCollectionDetails';
-export * from './useCollectionDetailsPolling';
-export * from './useListTokenMetadata';
-export * from './useList1155ShopCardData';
-export * from './useList721ShopCardData';
-export * from './useListMarketCardData';
-export * from './useGetTokenSuppliesMap';
-export * from './useListPrimarySaleItems';
-export * from './useERC721SaleMintedTokens';
-export * from './useCheckoutOptionsSalesContract';

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

@@ -1,2 +1 @@
-export { fetchCollection, collectionOptions } from './collectionOptions';
 export * from '../../queries/marketplaceConfig';

package/src/react/hooks/useAutoSelectFeeOption.tsx

@@ -1,8 +1,8 @@
 'use client';
-import { type Address, zeroAddress } from 'viem';
 
 import { useChain } from '@0xsequence/connect';
 import { useCallback, useEffect } from 'react';
+import { type Address, zeroAddress } from 'viem';
 import { useAccount } from 'wagmi';
 import type { FeeOption } from '../../types/waas-types';
 import { useCollectionBalanceDetails } from './useCollectionBalanceDetails';

package/src/react/hooks/useBalanceOfCollectible.tsx

@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 import { ContractType } from '../_internal';
 import {
-	type UseBalanceOfCollectibleArgs,
 	balanceOfCollectibleOptions,
+	type UseBalanceOfCollectibleArgs,
 } from '../queries/balanceOfCollectible';
 import { useConfig } from './useConfig';
 import { useMarketplaceConfig } from './useMarketplaceConfig';

package/src/react/hooks/useCancelTransactionSteps.tsx

@@ -5,11 +5,11 @@ import {
 } from '../../utils/_internal/error/transaction';
 import {
 	ExecuteType,
+	getMarketplaceClient,
+	getQueryClient,
 	type MarketplaceKind,
 	type Step,
 	StepType,
-	getMarketplaceClient,
-	getQueryClient,
 } from '../_internal';
 import type {
 	SignatureStep,

package/src/react/hooks/useCheckoutOptionsSalesContract.tsx

@@ -42,7 +42,7 @@ export const checkoutOptionsSalesContractOptions = (
 						fetchCheckoutOptionsSalesContract(
 							{
 								chainId: String(args.chainId),
-								// biome-ignore lint/style/noNonNullAssertion: <explanation>
+								// biome-ignore lint/style/noNonNullAssertion: wallet is guaranteed to exist when not skipToken
 								wallet: args.wallet!,
 								contractAddress: args.contractAddress,
 								collectionAddress: args.collectionAddress,