@0xsequence/marketplace-sdk 1.0.0 → 1.1.1

package/src/react/hooks/ui/useFilterState.tsx

@@ -6,7 +6,11 @@ import {
 	useQueryState,
 } from 'nuqs';
 import { useMemo } from 'react';
-import { type PropertyFilter, PropertyType } from '../../_internal';
+import {
+	type PriceFilter,
+	type PropertyFilter,
+	PropertyType,
+} from '../../_internal';
 
 interface StringFilterValues {
 	type: PropertyType.STRING;
@@ -31,21 +35,38 @@ const validateFilters = (value: unknown): PropertyFilter[] => {
 	);
 };
 
+const validatePriceFilters = (value: unknown): PriceFilter[] => {
+	if (!Array.isArray(value)) return [];
+	return value.filter(
+		(f): f is PriceFilter =>
+			typeof f === 'object' &&
+			typeof f.contractAddress === 'string' &&
+			(f.min === undefined || typeof f.min === 'string') &&
+			(f.max === undefined || typeof f.max === 'string'),
+	);
+};
+
 const filtersParser = parseAsJson(validateFilters).withDefault([]);
 const searchParser = parseAsString.withDefault('');
 const listedOnlyParser = parseAsBoolean.withDefault(false);
+const priceFilterParser = parseAsBoolean.withDefault(false);
+const priceFiltersParser = parseAsJson(validatePriceFilters).withDefault([]);
 
 const serialize = createSerializer(
 	{
 		filters: filtersParser,
 		search: searchParser,
 		listedOnly: listedOnlyParser,
+		priceFilter: priceFilterParser,
+		priceFilters: priceFiltersParser,
 	},
 	{
 		urlKeys: {
 			filters: 'f',
 			search: 'q',
 			listedOnly: 'l',
+			priceFilter: 'p',
+			priceFilters: 'pf',
 		},
 	},
 );
@@ -60,6 +81,14 @@ export function useFilterState() {
 		'listedOnly',
 		listedOnlyParser,
 	);
+	const [showPriceFilter, setShowPriceFilter] = useQueryState(
+		'priceFilter',
+		priceFilterParser,
+	);
+	const [priceFilters, setPriceFilters] = useQueryState(
+		'priceFilters',
+		priceFiltersParser,
+	);
 
 	const helpers = useMemo(
 		() => ({
@@ -158,22 +187,63 @@ export function useFilterState() {
 				]);
 			},
 
+			setPriceFilter: (contractAddress: string, min?: string, max?: string) => {
+				const otherPriceFilters =
+					priceFilters?.filter((f) => f.contractAddress !== contractAddress) ??
+					[];
+
+				if (!min && !max) {
+					setPriceFilters(otherPriceFilters);
+					return;
+				}
+
+				const newPriceFilter: PriceFilter = {
+					contractAddress,
+					...(min && { min }),
+					...(max && { max }),
+				};
+
+				setPriceFilters([...otherPriceFilters, newPriceFilter]);
+			},
+
+			getPriceFilter: (contractAddress: string): PriceFilter | undefined => {
+				return priceFilters?.find((f) => f.contractAddress === contractAddress);
+			},
+
+			clearPriceFilters: () => {
+				setPriceFilters([]);
+			},
+
 			clearAllFilters: () => {
 				void setShowListedOnly(false);
+				void setShowPriceFilter(false);
 				void setFilterOptions([]);
 				void setSearchText('');
+				void setPriceFilters([]);
 			},
 		}),
-		[filterOptions, setFilterOptions, setShowListedOnly, setSearchText],
+		[
+			filterOptions,
+			setFilterOptions,
+			setShowListedOnly,
+			setSearchText,
+			setShowPriceFilter,
+			priceFilters,
+			setPriceFilters,
+		],
 	);
 
 	return {
 		filterOptions,
 		searchText,
 		showListedOnly,
+		showPriceFilter,
+		priceFilters,
 		setFilterOptions,
 		setSearchText,
 		setShowListedOnly,
+		setShowPriceFilter,
+		setPriceFilters,
 		...helpers,
 		serialize,
 	};

package/src/react/hooks/ui/useFilters.tsx

@@ -7,7 +7,7 @@ import {
 	type FetchFiltersParams,
 	type FiltersQueryOptions,
 	filtersQueryOptions,
-} from '../../queries/filters';
+} from '../../queries/market/filters';
 import { useConfig } from '../config/useConfig';
 
 export type UseFiltersParams = Optional<FiltersQueryOptions, 'config'>;

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';

package/src/react/hooks/utils/useCheckoutOptions.tsx

@@ -8,7 +8,7 @@ import {
 	type CheckoutOptionsQueryOptions,
 	checkoutOptionsQueryOptions,
 	type FetchCheckoutOptionsParams,
-} from '../../queries/checkoutOptions';
+} from '../../queries/market/checkoutOptions';
 import { useConfig } from '../config/useConfig';
 
 export type UseCheckoutOptionsParams = Optional<
@@ -93,6 +93,6 @@ export type UseCheckoutOptionsArgs = {
 
 export type UseCheckoutOptionsReturn = Awaited<
 	ReturnType<
-		typeof import('../../queries/checkoutOptions').fetchCheckoutOptions
+		typeof import('../../queries/market/checkoutOptions').fetchCheckoutOptions
 	>
 >;

package/src/react/hooks/utils/useCheckoutOptionsSalesContract.tsx

@@ -9,7 +9,7 @@ import {
 	checkoutOptionsSalesContractQueryOptions,
 	type FetchCheckoutOptionsSalesContractParams,
 	type fetchCheckoutOptionsSalesContract,
-} from '../../queries/checkoutOptionsSalesContract';
+} from '../../queries/market/checkoutOptionsSalesContract';
 import { useConfig } from '../config/useConfig';
 
 export type UseCheckoutOptionsSalesContractParams = Optional<

package/src/react/hooks/utils/useComparePrices.tsx

@@ -7,7 +7,7 @@ import {
 	type ComparePricesQueryOptions,
 	comparePricesQueryOptions,
 	type FetchComparePricesParams,
-} from '../../queries/comparePrices';
+} from '../../queries/utils/comparePrices';
 import { useConfig } from '../config/useConfig';
 
 export type UseComparePricesParams = Optional<

package/src/react/hooks/utils/useConvertPriceToUSD.tsx

@@ -8,7 +8,7 @@ import {
 	type ConvertPriceToUSDReturn,
 	convertPriceToUSDQueryOptions,
 	type FetchConvertPriceToUSDParams,
-} from '../../queries/convertPriceToUSD';
+} from '../../queries/utils/convertPriceToUSD';
 import { useConfig } from '../config/useConfig';
 
 export type UseConvertPriceToUSDParams = Optional<

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

@@ -1,34 +1,40 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useAccount, useSwitchChain } from 'wagmi';
-import { ChainSwitchUserRejectedError } from '../../../utils/_internal/error/transaction';
-import { useSwitchChainModal } from '../../ui/modals/_internal/components/switchChainModal';
+import { useSwitchChainErrorModal } from '../../ui/modals/_internal/components/switchChainErrorModal';
+import { useChainIdToSwitchTo } from '../../ui/modals/_internal/components/switchChainErrorModal/store';
 import { useConnectorMetadata } from '../config/useConnectorMetadata';
 
 export const useEnsureCorrectChain = () => {
 	const { chainId: currentChainId } = useAccount();
 	const { switchChain, switchChainAsync } = useSwitchChain();
-	const { show: showSwitchChainModal } = useSwitchChainModal();
+	const { show: showSwitchChainErrorModal, close: closeSwitchChainErrorModal } =
+		useSwitchChainErrorModal();
+	const chainIdToSwitchTo = useChainIdToSwitchTo();
 	const { isWaaS } = useConnectorMetadata();
 
+	// Close the switch chain error modal when user successfully switches to the target chain
+	useEffect(() => {
+		if (
+			currentChainId &&
+			chainIdToSwitchTo &&
+			currentChainId === chainIdToSwitchTo
+		) {
+			closeSwitchChainErrorModal();
+		}
+	}, [currentChainId, chainIdToSwitchTo, closeSwitchChainErrorModal]);
+
 	const ensureCorrectChainAsync = useCallback(
 		async (targetChainId: number) => {
 			if (currentChainId === targetChainId) {
 				return Promise.resolve();
 			}
-			if (isWaaS) {
-				return switchChainAsync({ chainId: targetChainId });
-			}
-
-			return new Promise((resolve, reject) => {
-				showSwitchChainModal({
+			return switchChainAsync({ chainId: targetChainId }).catch(() => {
+				showSwitchChainErrorModal({
 					chainIdToSwitchTo: targetChainId,
-					onSuccess: () => resolve(targetChainId),
-					onError: (error) => reject(error),
-					onClose: () => reject(new ChainSwitchUserRejectedError()),
 				});
 			});
 		},
-		[currentChainId, isWaaS, switchChainAsync, showSwitchChainModal],
+		[currentChainId, isWaaS, switchChainAsync, showSwitchChainErrorModal],
 	);
 
 	const ensureCorrectChain = useCallback(
@@ -36,8 +42,6 @@ export const useEnsureCorrectChain = () => {
 			targetChainId: number,
 			callbacks?: {
 				onSuccess?: () => void;
-				onError?: (error: Error) => void;
-				onClose?: () => void;
 			},
 		) => {
 			if (currentChainId === targetChainId) {
@@ -45,25 +49,18 @@ export const useEnsureCorrectChain = () => {
 				return;
 			}
 
-			if (isWaaS) {
-				switchChain(
-					{ chainId: targetChainId },
-					{
-						onSuccess: callbacks?.onSuccess,
-						onError: callbacks?.onError,
-					},
-				);
-				return;
-			}
-
-			showSwitchChainModal({
-				chainIdToSwitchTo: targetChainId,
-				onSuccess: callbacks?.onSuccess,
-				onError: callbacks?.onError,
-				onClose: callbacks?.onClose,
-			});
+			switchChain(
+				{ chainId: targetChainId },
+				{
+					onSuccess: callbacks?.onSuccess,
+					onError: () =>
+						showSwitchChainErrorModal({
+							chainIdToSwitchTo: targetChainId,
+						}),
+				},
+			);
 		},
-		[currentChainId, isWaaS, switchChain, showSwitchChainModal],
+		[currentChainId, isWaaS, switchChain, showSwitchChainErrorModal],
 	);
 
 	return {

package/src/react/providers/analytics-provider.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import type { Auth } from '@databeat/tracker';
+import { useEffect, useMemo } from 'react';
+import { useAccount } from 'wagmi';
+import type { SdkConfig } from '../../types';
+import { DatabeatAnalytics } from '../_internal/databeat';
+
+interface AnalyticsProviderProps {
+	config: SdkConfig;
+	children: (analytics: DatabeatAnalytics) => React.ReactNode;
+}
+
+export function AnalyticsProvider({
+	config,
+	children,
+}: AnalyticsProviderProps) {
+	const { address, isConnected } = useAccount();
+	const isWindowDefined = typeof window !== 'undefined';
+
+	const analytics = useMemo(() => {
+		const server = 'https://nodes.sequence.app';
+		const auth: Auth = {};
+		auth.headers = { 'X-Access-Key': config.projectAccessKey };
+
+		return new DatabeatAnalytics(server, auth, {
+			defaultEnabled: true,
+			initProps: () => {
+				return {
+					origin: isWindowDefined ? window.location.origin : '',
+				};
+			},
+		});
+	}, [config.projectAccessKey, isWindowDefined]);
+
+	useEffect(() => {
+		if (!isConnected || !address) {
+			analytics?.reset();
+			return;
+		}
+		analytics?.identify(address.toLowerCase());
+	}, [analytics, address, isConnected]);
+
+	return <>{children(analytics)}</>;
+}

package/src/react/providers/index.tsx

@@ -1,17 +1,17 @@
 'use client';
 
 import { useOpenConnectModal } from '@0xsequence/connect';
-import type { Auth } from '@databeat/tracker';
 import { QueryClientProvider } from '@tanstack/react-query';
-import { createContext, useMemo } from 'react';
+import { createContext } from 'react';
 import type {
 	MarketplaceSdkContext as MarketplaceSdkContextType,
 	SdkConfig,
 } from '../../types';
 import { InvalidProjectAccessKeyError } from '../../utils/_internal/error/config';
 import { getQueryClient } from '../_internal/api/get-query-client';
-import { DatabeatAnalytics } from '../_internal/databeat';
+import type { DatabeatAnalytics } from '../_internal/databeat';
 import { PROVIDER_ID } from '../_internal/get-provider';
+import { AnalyticsProvider } from './analytics-provider';
 import { ThemeProvider } from './theme-provider';
 
 export const MarketplaceSdkContext = createContext(
@@ -33,46 +33,35 @@ export function MarketplaceProvider({
 		throw new InvalidProjectAccessKeyError(config.projectAccessKey);
 	}
 
-	const analytics = useMemo(() => {
-		const server = 'https://nodes.sequence.app';
-		const auth: Auth = {};
-		auth.headers = { 'X-Access-Key': config.projectAccessKey };
-
-		return new DatabeatAnalytics(server, auth, {
-			defaultEnabled: true,
-			initProps: () => {
-				return {
-					origin: typeof window !== 'undefined' ? window.location.origin : '',
-				};
-			},
-		});
-	}, [config.projectAccessKey, window]);
+	return (
+		<AnalyticsProvider config={config}>
+			{(analytics) => {
+				if (openConnectModal) {
+					const context: MarketplaceSdkContextType = {
+						...config,
+						openConnectModal,
+						analytics,
+					};
 
-	if (openConnectModal) {
-		const context: MarketplaceSdkContextType = {
-			...config,
-			openConnectModal,
-			analytics,
-		};
+					return (
+						<MarketplaceSdkContext.Provider value={context}>
+							<ThemeProvider>
+								<div id={PROVIDER_ID}>{children}</div>
+							</ThemeProvider>
+						</MarketplaceSdkContext.Provider>
+					);
+				}
 
-		return (
-			<MarketplaceQueryClientProvider>
-				<MarketplaceSdkContext.Provider value={context}>
-					<ThemeProvider>
-						<div id={PROVIDER_ID}>{children}</div>
-					</ThemeProvider>
-				</MarketplaceSdkContext.Provider>
-			</MarketplaceQueryClientProvider>
-		);
-	}
-
-	return (
-		<MarketplaceProviderWithSequenceConnect
-			config={config}
-			analytics={analytics}
-		>
-			<ThemeProvider>{children}</ThemeProvider>
-		</MarketplaceProviderWithSequenceConnect>
+				return (
+					<MarketplaceProviderWithSequenceConnect
+						config={config}
+						analytics={analytics}
+					>
+						<ThemeProvider>{children}</ThemeProvider>
+					</MarketplaceProviderWithSequenceConnect>
+				);
+			}}
+		</AnalyticsProvider>
 	);
 }
 
@@ -101,10 +90,8 @@ function MarketplaceProviderWithSequenceConnect({
 	};
 
 	return (
-		<MarketplaceQueryClientProvider>
-			<MarketplaceSdkContext.Provider value={context}>
-				<div id={PROVIDER_ID}>{children}</div>
-			</MarketplaceSdkContext.Provider>
-		</MarketplaceQueryClientProvider>
+		<MarketplaceSdkContext.Provider value={context}>
+			<div id={PROVIDER_ID}>{children}</div>
+		</MarketplaceSdkContext.Provider>
 	);
 }

package/src/react/providers/modal-provider.tsx

@@ -1,8 +1,9 @@
 import { SequenceCheckoutProvider } from '@0xsequence/checkout';
 import { observer } from '@legendapp/state/react';
 import type { ReactNode } from 'react';
+import { marketplaceApiURL } from '../_internal';
 import { useConfig } from '../hooks';
-import SwitchChainModal from '../ui/modals/_internal/components/switchChainModal';
+import SwitchChainErrorModal from '../ui/modals/_internal/components/switchChainErrorModal';
 import TransactionStatusModal from '../ui/modals/_internal/components/transactionStatusModal';
 import { BuyModal } from '../ui/modals/BuyModal/components/Modal';
 import { CreateListingModal } from '../ui/modals/CreateListingModal/Modal';
@@ -17,12 +18,22 @@ interface ModalProviderProps {
 }
 
 export const ModalProvider = observer(({ children }: ModalProviderProps) => {
-	const { shadowDom, experimentalShadowDomCssOverride } = useConfig();
+	const sdkConfig = useConfig();
+	const { shadowDom, experimentalShadowDomCssOverride } = sdkConfig;
+
+	const overrides = sdkConfig._internal?.overrides?.api?.marketplace;
+	const marketplaceApiUrl = overrides?.url || marketplaceApiURL(overrides?.env || 'production');
 
 	return (
 		<>
 			{children}
-			<SequenceCheckoutProvider>
+			<SequenceCheckoutProvider
+				config={{
+					env: {
+						marketplaceApiUrl,
+					},
+				}}
+			>
 				<ShadowRoot
 					enabled={shadowDom ?? true}
 					customCSS={experimentalShadowDomCssOverride}
@@ -34,7 +45,7 @@ export const ModalProvider = observer(({ children }: ModalProviderProps) => {
 					<BuyModal />
 					<SuccessfulPurchaseModal />
 					{/* Helper modals */}
-					<SwitchChainModal />
+					<SwitchChainErrorModal />
 					<TransactionStatusModal />
 				</ShadowRoot>
 			</SequenceCheckoutProvider>

package/src/react/queries/{__tests__ → collectibles/__tests__}/balanceOfCollectible.laos.test.ts

@@ -3,7 +3,7 @@ import { afterEach, describe, expect, it } from 'vitest';
 import {
 	laosHandlers,
 	mockTokenBalancesResponse,
-} from '../../_internal/api/__mocks__/laos.msw';
+} from '../../../_internal/api/__mocks__/laos.msw';
 import { fetchBalanceOfCollectible } from '../balanceOfCollectible';
 
 describe('fetchBalanceOfCollectible with LAOS', () => {
@@ -33,7 +33,7 @@ describe('fetchBalanceOfCollectible with LAOS', () => {
 			mockConfig,
 		);
 
-		// Should return first balance from LAOS API response
+		// Should return array of balances from LAOS API response
 		expect(result).toEqual(mockTokenBalancesResponse.balances[0]);
 		expect(result?.balance).toBe('5');
 		expect(result?.contractInfo?.type).toBe('LAOS-ERC-721');
@@ -71,7 +71,7 @@ describe('fetchBalanceOfCollectible with LAOS', () => {
 			mockConfig,
 		);
 
-		expect(result).toBeNull();
+		expect(result).toEqual(null);
 	});
 
 	it('should include metadata in LAOS response', async () => {
@@ -116,7 +116,7 @@ describe('fetchBalanceOfCollectible with LAOS', () => {
 			mockConfig,
 		);
 
-		// Should return first balance regardless of sort order
+		// Should return array of balances regardless of sort order
 		expect(result).toBeDefined();
 		expect(result?.balance).toBeDefined();
 	});