@0xsequence/marketplace-sdk 0.8.5 → 0.8.6

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

@@ -1,10 +1,8 @@
-import { useChain } from '@0xsequence/connect';
 import { renderHook, server, waitFor } from '@test';
 import { http, HttpResponse } from 'msw';
 import { zeroAddress } from 'viem';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { useAccount } from 'wagmi';
-import { mainnet } from 'wagmi/chains';
+import { useDisconnect } from 'wagmi';
 import type { FeeOption } from '../../../types/waas-types';
 import {
 	mockIndexerEndpoint,
@@ -13,22 +11,7 @@ import {
 } from '../../_internal/api/__mocks__/indexer.msw';
 import { useAutoSelectFeeOption } from '../useAutoSelectFeeOption';
 
-// Mock wagmi hooks
-vi.mock('wagmi', async () => {
-	const actual = await vi.importActual('wagmi');
-	return {
-		...actual,
-		useAccount: vi.fn(),
-	};
-});
-
-// Mock @0xsequence/connect
-vi.mock('@0xsequence/connect', () => ({
-	useChain: vi.fn(),
-}));
-
 describe('useAutoSelectFeeOption', () => {
-	const mockUserAddress = '0x1234567890123456789012345678901234567890';
 	const mockChainId = 1;
 
 	const mockFeeOptions: FeeOption[] = [
@@ -73,32 +56,6 @@ describe('useAutoSelectFeeOption', () => {
 	};
 
 	beforeEach(() => {
-		// Mock useAccount hook with complete wagmi account type
-		vi.mocked(useAccount).mockReturnValue({
-			address: mockUserAddress as `0x${string}`,
-			addresses: [mockUserAddress as `0x${string}`],
-			chain: mainnet,
-			chainId: mockChainId,
-			connector: undefined,
-			isConnected: true,
-			isConnecting: false,
-			isDisconnected: false,
-			isReconnecting: true,
-			status: 'reconnecting',
-		});
-
-		// Mock useChain hook with required chain properties
-		vi.mocked(useChain).mockReturnValue({
-			...mainnet,
-			id: mockChainId,
-			name: 'Ethereum',
-			nativeCurrency: {
-				name: 'Ether',
-				symbol: 'ETH',
-				decimals: 18,
-			},
-		});
-
 		// Set up default handler for successful balance check
 		server.use(
 			mockIndexerHandler('GetTokenBalancesDetails', {
@@ -180,37 +137,6 @@ describe('useAutoSelectFeeOption', () => {
 		});
 	});
 
-	it('should return UserNotConnected error when wallet is not connected', async () => {
-		// Mock useAccount to return no address (user not connected)
-		vi.mocked(useAccount).mockReturnValue({
-			address: undefined,
-			addresses: [],
-			chain: mainnet,
-			chainId: mockChainId,
-			connector: undefined,
-			isConnected: false,
-			isConnecting: false,
-			isDisconnected: false,
-			isReconnecting: true,
-			status: 'reconnecting',
-		});
-
-		const { result } = renderHook(() => useAutoSelectFeeOption(defaultArgs));
-
-		// Wait for the hook to complete
-		await waitFor(async () => {
-			const response = await result.current;
-			expect(response.error).toBe('User not connected');
-		});
-
-		// Verify final state
-		const finalResponse = await result.current;
-		expect(finalResponse).toEqual({
-			selectedOption: null,
-			error: 'User not connected',
-		});
-	});
-
 	it('should select second fee option when user has insufficient balance for first but sufficient for second', async () => {
 		// Override handler for mixed balance scenario
 		server.use(
@@ -307,4 +233,24 @@ describe('useAutoSelectFeeOption', () => {
 			error: 'Failed to check balances',
 		});
 	});
+
+	it('should return UserNotConnected error when wallet is not connected', async () => {
+		const { result: disconnect } = renderHook(() => useDisconnect());
+		await disconnect.current.disconnectAsync();
+
+		const { result } = renderHook(() => useAutoSelectFeeOption(defaultArgs));
+
+		// Wait for the hook to complete
+		await waitFor(async () => {
+			const response = await result.current;
+			expect(response.error).toBe('User not connected');
+		});
+
+		// Verify final state
+		const finalResponse = await result.current;
+		expect(finalResponse).toEqual({
+			selectedOption: null,
+			error: 'User not connected',
+		});
+	});
 });

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

@@ -63,38 +63,17 @@ describe('useCurrencyBalance', () => {
 		`);
 	});
 
-	it.skip('should return skipToken when required parameters are missing', () => {
+	it('should return skipToken when required parameters are missing', () => {
 		const { result } = renderHook(() =>
+			// @ts-expect-error - missing params
 			useCurrencyBalance({
 				chainId: undefined,
-				userAddress: undefined,
-				currencyAddress: undefined,
 			}),
 		);
 
 		expect(result.current.data).toBeUndefined();
 		expect(result.current.isLoading).toBe(false);
-		// expect(commonPublicClientMocks.getBalance).not.toHaveBeenCalled();
-		// expect(commonPublicClientMocks.readContract).not.toHaveBeenCalled();
-	});
-
-	it.skip('should handle errors from public client', async () => {
-		// Mock error response
-		// const mockError = new Error('Failed to fetch balance');
-		// const mockPublicClient = createMockPublicClient({
-		// 	getBalance: vi.fn().mockRejectedValue(mockError),
-		// });
-
-		// Override the mock for this test
-		// vi.mocked(getPublicRpcClient).mockReturnValue(mockPublicClient);
-
-		const { result } = renderHook(() => useCurrencyBalance(defaultArgs));
-
-		await waitFor(() => {
-			expect(result.current.isError).toBe(true);
-		});
-
-		expect(result.current.error).toBeDefined();
-		expect(result.current.data).toBeUndefined();
+		expect(result.current.isSuccess).toBe(false);
+		expect(result.current.isError).toBe(false);
 	});
 });

package/src/react/hooks/index.ts

@@ -10,6 +10,7 @@ export * from './useConvertPriceToUSD';
 export * from './useCurrencies';
 export * from './useCurrency';
 export * from './useFilters';
+export * from './useFilterState';
 export * from './useFloorOrder';
 export * from './useHighestOffer';
 export * from './useInventory';

package/src/react/hooks/useFilterState.tsx

@@ -0,0 +1,181 @@
+import { useMemo } from 'react';
+
+import {
+	createSerializer,
+	parseAsBoolean,
+	parseAsJson,
+	parseAsString,
+	useQueryState,
+} from 'nuqs';
+import { type PropertyFilter, PropertyType } from '../_internal';
+
+interface StringFilterValues {
+	type: PropertyType.STRING;
+	values: string[];
+}
+
+interface IntFilterValues {
+	type: PropertyType.INT;
+	min: number;
+	max: number;
+}
+
+type FilterValues = StringFilterValues | IntFilterValues;
+
+const validateFilters = (value: unknown): PropertyFilter[] => {
+	if (!Array.isArray(value)) return [];
+	return value.filter(
+		(f): f is PropertyFilter =>
+			typeof f === 'object' &&
+			typeof f.name === 'string' &&
+			Object.values(PropertyType).includes(f.type),
+	);
+};
+
+const filtersParser = parseAsJson(validateFilters).withDefault([]);
+const searchParser = parseAsString.withDefault('');
+const listedOnlyParser = parseAsBoolean.withDefault(false);
+
+const serialize = createSerializer(
+	{
+		filters: filtersParser,
+		search: searchParser,
+		listedOnly: listedOnlyParser,
+	},
+	{
+		urlKeys: {
+			filters: 'f',
+			search: 'q',
+			listedOnly: 'l',
+		},
+	},
+);
+
+export function useFilterState() {
+	const [filterOptions, setFilterOptions] = useQueryState(
+		'filters',
+		filtersParser,
+	);
+	const [searchText, setSearchText] = useQueryState('search', searchParser);
+	const [showListedOnly, setShowListedOnly] = useQueryState(
+		'listedOnly',
+		listedOnlyParser,
+	);
+
+	const helpers = useMemo(
+		() => ({
+			getFilter: (name: string): PropertyFilter | undefined => {
+				return filterOptions?.find((f) => f.name === name);
+			},
+
+			getFilterValues: (name: string): FilterValues | undefined => {
+				const filter = filterOptions?.find((f) => f.name === name);
+				if (!filter) return undefined;
+
+				if (filter.type === PropertyType.INT) {
+					return {
+						type: PropertyType.INT,
+						min: filter.min ?? 0,
+						max: filter.max ?? 0,
+					};
+				}
+
+				return {
+					type: PropertyType.STRING,
+					values: (filter.values as string[]) ?? [],
+				};
+			},
+
+			isFilterActive: (name: string): boolean => {
+				return !!filterOptions?.find((f) => f.name === name);
+			},
+
+			isStringValueSelected: (name: string, value: string): boolean => {
+				const filter = filterOptions?.find((f) => f.name === name);
+				if (!filter || filter.type !== PropertyType.STRING) return false;
+				return (filter.values as string[])?.includes(value) ?? false;
+			},
+
+			isIntFilterActive: (name: string): boolean => {
+				const filter = filterOptions?.find((f) => f.name === name);
+				return !!filter && filter.type === PropertyType.INT;
+			},
+
+			getIntFilterRange: (name: string): [number, number] | undefined => {
+				const filter = filterOptions?.find((f) => f.name === name);
+				if (!filter || filter.type !== PropertyType.INT) return undefined;
+				return [filter.min ?? 0, filter.max ?? 0];
+			},
+
+			deleteFilter: (name: string) => {
+				const otherFilters =
+					filterOptions?.filter((f) => !(f.name === name)) ?? [];
+				setFilterOptions(otherFilters);
+			},
+
+			toggleStringFilterValue: (name: string, value: string) => {
+				const otherFilters =
+					filterOptions?.filter((f) => !(f.name === name)) ?? [];
+				const filter = filterOptions?.find((f) => f.name === name);
+				const existingValues =
+					filter?.type === PropertyType.STRING
+						? ((filter.values as string[]) ?? [])
+						: [];
+
+				if (existingValues.includes(value)) {
+					const newValues = existingValues.filter((v) => v !== value);
+					if (newValues.length === 0) {
+						setFilterOptions(otherFilters);
+						return;
+					}
+					setFilterOptions([
+						...otherFilters,
+						{ name, type: PropertyType.STRING, values: newValues },
+					]);
+				} else {
+					setFilterOptions([
+						...otherFilters,
+						{
+							name,
+							type: PropertyType.STRING,
+							values: [...existingValues, value],
+						},
+					]);
+				}
+			},
+
+			setIntFilterValue: (name: string, min: number, max: number) => {
+				if (min === max && min === 0) {
+					const otherFilters =
+						filterOptions?.filter((f) => !(f.name === name)) ?? [];
+					setFilterOptions(otherFilters);
+					return;
+				}
+				const otherFilters =
+					filterOptions?.filter((f) => !(f.name === name)) ?? [];
+				setFilterOptions([
+					...otherFilters,
+					{ name, type: PropertyType.INT, min, max },
+				]);
+			},
+
+			clearAllFilters: () => {
+				void setShowListedOnly(false);
+				void setFilterOptions([]);
+				void setSearchText('');
+			},
+		}),
+		[filterOptions, setFilterOptions, setShowListedOnly, setSearchText],
+	);
+
+	return {
+		filterOptions,
+		searchText,
+		showListedOnly,
+		setFilterOptions,
+		setSearchText,
+		setShowListedOnly,
+		...helpers,
+		serialize,
+	};
+}

package/src/react/hooks/useFilters.tsx

@@ -18,6 +18,7 @@ const UseFiltersSchema = z.object({
 	collectionAddress: AddressSchema,
 	showAllFilters: z.boolean().default(false).optional(),
 	query: QueryArgSchema,
+	excludePropertyValues: z.boolean().default(false).optional(),
 });
 
 export type UseFiltersArgs = z.infer<typeof UseFiltersSchema>;
@@ -33,6 +34,7 @@ export const fetchFilters = async (args: UseFiltersArgs, config: SdkConfig) => {
 			chainID: parsedArgs.chainId.toString(),
 			contractAddress: parsedArgs.collectionAddress,
 			excludeProperties: [], // TODO: We can leverage this for some of the exclusion logic
+			excludePropertyValues: parsedArgs.excludePropertyValues,
 		})
 		.then((resp) => resp.filters);
 
@@ -117,3 +119,25 @@ export const useFilters = (args: UseFiltersArgs) => {
 	const config = useConfig();
 	return useQuery(filtersOptions(args, config));
 };
+
+export const useFiltersProgressive = (args: UseFiltersArgs) => {
+	const config = useConfig();
+
+	const namesQuery = useQuery(
+		filtersOptions({ ...args, excludePropertyValues: true }, config),
+	);
+
+	const fullQuery = useQuery({
+		...filtersOptions(args, config),
+		placeholderData: namesQuery.data,
+	});
+
+	const isLoadingNames = namesQuery.isLoading;
+	const isFetchingValues = fullQuery.isPlaceholderData && fullQuery.isFetching;
+
+	return {
+		...fullQuery,
+		isFetchingValues,
+		isLoadingNames,
+	};
+};

package/src/react/ui/modals/_internal/components/switchChainModal/__tests__/SwitchChainModal.test.tsx

@@ -6,19 +6,32 @@ import {
 	wagmiConfig,
 	waitFor,
 } from '@test';
-import { describe, expect, test, vi } from 'vitest';
-import { type Config, useChainId } from 'wagmi';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { useChainId } from 'wagmi';
 import SwitchChainModal, { useSwitchChainModal } from '../index';
 import { switchChainModal$ } from '../store';
 
 const chainToSwitchTo = wagmiConfig.chains[1];
 
 describe('SwitchChainModal', () => {
+	beforeEach(() => {
+		switchChainModal$.state.isSwitching.set(false);
+		switchChainModal$.state.chainIdToSwitchTo.set(undefined);
+		switchChainModal$.state.onError.set(undefined);
+		switchChainModal$.state.onSuccess.set(undefined);
+		switchChainModal$.state.onClose.set(undefined);
+	});
+
 	test('opens switch chain modal with correct chain', async () => {
+		const { result } = renderHook(() => useSwitchChainModal());
+
+		result.current.show({ chainIdToSwitchTo: chainToSwitchTo.id });
 		render(<SwitchChainModal />);
 
-		const { show } = useSwitchChainModal();
-		show({ chainIdToSwitchTo: chainToSwitchTo.id });
+		await waitFor(() => {
+			const titleElement = screen.getByText('Wrong network');
+			expect(titleElement).toBeInTheDocument();
+		});
 
 		const titleElement = await screen.findByText('Wrong network');
 		expect(titleElement).toBeInTheDocument();
@@ -35,13 +48,12 @@ describe('SwitchChainModal', () => {
 	});
 
 	test('closes switch chain modal using close callback', async () => {
-		render(<SwitchChainModal />);
-
-		const { show, close } = useSwitchChainModal();
+		const { result } = renderHook(() => useSwitchChainModal());
 
-		show({ chainIdToSwitchTo: chainToSwitchTo.id });
+		result.current.show({ chainIdToSwitchTo: chainToSwitchTo.id });
+		render(<SwitchChainModal />);
 
-		close();
+		result.current.close();
 
 		const titleElement = screen.queryByText('Wrong network');
 		await waitFor(() => {
@@ -68,66 +80,34 @@ describe('SwitchChainModal', () => {
 		});
 	});
 
-	test.skip('shows spinner while switching chain', async () => {
-		render(<SwitchChainModal />);
-		const { show } = useSwitchChainModal();
-
-		show({ chainIdToSwitchTo: chainToSwitchTo.id });
-
-		const switchButton = await screen.findByRole('button', {
-			name: /switch network/i,
-		});
-		expect(switchButton).toBeInTheDocument();
-
-		fireEvent.click(switchButton);
+	test('shows spinner while switching chain', async () => {
+		switchChainModal$.state.isSwitching.set(true);
+		switchChainModal$.state.chainIdToSwitchTo.set(chainToSwitchTo.id);
 
-		await waitFor(() => {
-			const spinner = screen.findByTestId('switch-chain-spinner');
-			expect(spinner).toBeInTheDocument();
-		});
+		render(<SwitchChainModal />);
 
-		const spinner = document.querySelector('.spinner');
+		const spinner = screen.getByTestId('switch-chain-spinner');
 		expect(spinner).toBeInTheDocument();
-
-		await waitFor(() => {
-			expect(switchChainModal$.state.isSwitching.get()).toBe(false);
-			expect(document.querySelector('.spinner')).not.toBeInTheDocument();
-		});
 	});
 
-	test.skip('calls onError callback when switching chain fails', async () => {
-		const onError = vi.fn();
-
-		const mockConnector = {
-			...wagmiConfig.connectors[0],
-			features: {
-				// @ts-expect-error
-				...wagmiConfig.connectors[0].features,
-				switchChainError: true,
-			},
-		};
-		const wagmiConfigWithSwitchChainError = {
-			...wagmiConfig,
-			connectors: [mockConnector],
-		} as Config;
-
-		render(<SwitchChainModal />, {
-			wagmiConfig: wagmiConfigWithSwitchChainError,
-		});
+	test('shows error message when chain switch fails', async () => {
+		const mockOnError = vi.fn();
+		const { result } = renderHook(() => useSwitchChainModal());
 
-		const { show } = useSwitchChainModal();
-		show({ chainIdToSwitchTo: chainToSwitchTo.id, onError });
+		result.current.show({
+			// @ts-expect-error - invalid chain id to trigger error
+			chainIdToSwitchTo: 'invalid-chain-id',
+			onError: mockOnError,
+		});
+		render(<SwitchChainModal />);
 
-		const switchButton = await screen.findByRole('button', {
+		const button = await screen.findByRole('button', {
 			name: /switch network/i,
 		});
-		fireEvent.click(switchButton);
+		fireEvent.click(button);
 
 		await waitFor(() => {
-			// const chainId = renderHook(() => useChainId()).result.current
-			// expect(chainId).not.toBe(chainToSwitchTo.id)
-			expect(onError).toHaveBeenCalled();
-			expect(switchChainModal$.isOpen.get()).toBe(true);
+			expect(mockOnError).toHaveBeenCalledOnce();
 		});
 	});
 });

package/src/react/ui/modals/_internal/components/switchChainModal/index.tsx

@@ -101,7 +101,9 @@ const SwitchChainModal = observer(() => {
 					size="sm"
 					label={
 						isSwitching$.get() ? (
-							<Spinner className="spinner" />
+							<div data-testid="switch-chain-spinner">
+								<Spinner className="spinner" />
+							</div>
 						) : (
 							'Switch Network'
 						)