@0xsequence/marketplace-sdk 1.0.0 → 1.1.0

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/index.tsx

@@ -33,6 +33,8 @@ export function MarketplaceProvider({
 		throw new InvalidProjectAccessKeyError(config.projectAccessKey);
 	}
 
+	const isWindowDefined = typeof window !== 'undefined';
+
 	const analytics = useMemo(() => {
 		const server = 'https://nodes.sequence.app';
 		const auth: Auth = {};
@@ -42,11 +44,11 @@ export function MarketplaceProvider({
 			defaultEnabled: true,
 			initProps: () => {
 				return {
-					origin: typeof window !== 'undefined' ? window.location.origin : '',
+					origin: isWindowDefined ? window.location.origin : '',
 				};
 			},
 		});
-	}, [config.projectAccessKey, window]);
+	}, [config.projectAccessKey, isWindowDefined]);
 
 	if (openConnectModal) {
 		const context: MarketplaceSdkContextType = {
@@ -56,13 +58,11 @@ export function MarketplaceProvider({
 		};
 
 		return (
-			<MarketplaceQueryClientProvider>
-				<MarketplaceSdkContext.Provider value={context}>
-					<ThemeProvider>
-						<div id={PROVIDER_ID}>{children}</div>
-					</ThemeProvider>
-				</MarketplaceSdkContext.Provider>
-			</MarketplaceQueryClientProvider>
+			<MarketplaceSdkContext.Provider value={context}>
+				<ThemeProvider>
+					<div id={PROVIDER_ID}>{children}</div>
+				</ThemeProvider>
+			</MarketplaceSdkContext.Provider>
 		);
 	}
 
@@ -101,10 +101,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

@@ -2,7 +2,7 @@ import { SequenceCheckoutProvider } from '@0xsequence/checkout';
 import { observer } from '@legendapp/state/react';
 import type { ReactNode } from 'react';
 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';
@@ -34,7 +34,7 @@ export const ModalProvider = observer(({ children }: ModalProviderProps) => {
 					<BuyModal />
 					<SuccessfulPurchaseModal />
 					{/* Helper modals */}
-					<SwitchChainModal />
+					<SwitchChainErrorModal />
 					<TransactionStatusModal />
 				</ShadowRoot>
 			</SequenceCheckoutProvider>

package/src/react/queries/__tests__/balanceOfCollectible.laos.test.ts

@@ -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();
 	});

package/src/react/queries/__tests__/inventory.laos.test.ts

@@ -5,7 +5,7 @@ import { ContractType } from '../../_internal';
 import { mockIndexerEndpoint } from '../../_internal/api/__mocks__/indexer.msw';
 import { laosHandlers } from '../../_internal/api/__mocks__/laos.msw';
 import { mockMarketplaceEndpoint } from '../../_internal/api/__mocks__/marketplace.msw';
-import { clearInventoryState, fetchInventory } from '../inventory';
+import { fetchInventory } from '../inventory';
 
 describe('fetchInventory with LAOS', () => {
 	const mockConfig = {
@@ -27,7 +27,6 @@ describe('fetchInventory with LAOS', () => {
 
 	afterEach(() => {
 		server.resetHandlers();
-		clearInventoryState();
 	});
 
 	it('should fetch LAOS inventory using LAOS API', async () => {
@@ -270,7 +269,11 @@ describe('fetchInventory with LAOS', () => {
 
 		expect(result).toBeDefined();
 		expect(result.collectibles).toEqual([]);
-		expect(result.page.more).toBe(false);
+		// Page structure has changed, no more 'more' property
+		expect(result.page).toEqual({
+			page: 1,
+			pageSize: 10,
+		});
 	});
 
 	it('should include LAOS metadata in inventory items', async () => {

package/src/react/queries/__tests__/tokenBalances.laos.test.ts

@@ -0,0 +1,123 @@
+import { server } from '@test';
+import { afterEach, describe, expect, it } from 'vitest';
+import {
+	laosHandlers,
+	mockTokenBalancesResponse,
+} from '../../_internal/api/__mocks__/laos.msw';
+import { fetchTokenBalances } from '../tokenBalances';
+
+describe('fetchTokenBalances with LAOS', () => {
+	const mockConfig = {
+		projectAccessKey: 'test-key',
+		projectId: '1',
+		chainId: 11155111,
+		apiUrl: 'https://marketplace-api.sequence.app',
+		isDev: false,
+	};
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('should use LAOS API when isLaos721=true', async () => {
+		server.use(...laosHandlers);
+
+		const result = await fetchTokenBalances(
+			{
+				collectionAddress: '0x1234567890123456789012345678901234567890',
+				userAddress: '0xuser1234567890123456789012345678901234567890',
+				chainId: 11155111,
+				isLaos721: true,
+			},
+			mockConfig,
+		);
+
+		// Should return array of balances from LAOS API response
+		expect(result).toEqual(mockTokenBalancesResponse.balances);
+		expect(result[0]?.balance).toBe('5');
+		expect(result[0]?.contractInfo?.type).toBe('LAOS-ERC-721');
+		expect(result[0]?.tokenMetadata?.name).toBe('Test Token 1');
+	});
+
+	it('should handle LAOS API errors', async () => {
+		server.use(...laosHandlers);
+
+		await expect(
+			fetchTokenBalances(
+				{
+					collectionAddress: '0x1234567890123456789012345678901234567890',
+					userAddress: '0x0000000000000000000000000000000000000001', // Special address for 500 error
+					chainId: 11155111,
+					isLaos721: true,
+				},
+				mockConfig,
+			),
+		).rejects.toThrow('Failed to get token balances: Internal Server Error');
+	});
+
+	it('should return empty array when LAOS API returns empty balances', async () => {
+		server.use(...laosHandlers);
+
+		const result = await fetchTokenBalances(
+			{
+				collectionAddress: '0x1234567890123456789012345678901234567890',
+				userAddress: '0x0000000000000000000000000000000000000003', // Special address for empty response
+				chainId: 11155111,
+				isLaos721: true,
+			},
+			mockConfig,
+		);
+
+		expect(result).toEqual([]);
+	});
+
+	it('should include metadata in LAOS response', async () => {
+		server.use(...laosHandlers);
+
+		const result = await fetchTokenBalances(
+			{
+				collectionAddress: '0x1234567890123456789012345678901234567890',
+				userAddress: '0xuser1234567890123456789012345678901234567890',
+				chainId: 11155111,
+				isLaos721: true,
+			},
+			mockConfig,
+		);
+
+		expect(result[0]?.tokenMetadata).toBeDefined();
+		expect(result[0]?.tokenMetadata?.name).toBe('Test Token 1');
+		expect(result[0]?.tokenMetadata?.description).toBe(
+			'A test token for LAOS testing',
+		);
+		expect(result[0]?.tokenMetadata?.image).toBe(
+			'https://example.com/token1.png',
+		);
+		expect(result[0]?.tokenMetadata?.attributes).toEqual([
+			{
+				trait_type: 'Rarity',
+				value: 'Common',
+			},
+		]);
+	});
+
+	it('should handle different pagination orders', async () => {
+		server.use(...laosHandlers);
+
+		const result = await fetchTokenBalances(
+			{
+				collectionAddress: '0x1234567890123456789012345678901234567890',
+				userAddress: '0xuser1234567890123456789012345678901234567890',
+				chainId: 11155111,
+				isLaos721: true,
+			},
+			mockConfig,
+		);
+
+		// Should return array of balances regardless of sort order
+		expect(result).toBeDefined();
+		expect(Array.isArray(result)).toBe(true);
+		expect(result.every((balance) => typeof balance.balance === 'string')).toBe(
+			true,
+		);
+	});
+});

package/src/react/queries/balanceOfCollectible.ts

@@ -10,6 +10,7 @@ export type UseBalanceOfCollectibleArgs = {
 	userAddress: Address | undefined;
 	chainId: number;
 	isLaos721?: boolean;
+	includeMetadata?: boolean;
 	query?: UseQueryParameters;
 };
 
@@ -44,7 +45,7 @@ export async function fetchBalanceOfCollectible(
 			accountAddress: args.userAddress,
 			contractAddress: args.collectionAddress,
 			tokenID: args.collectableId,
-			includeMetadata: false,
+			includeMetadata: args.includeMetadata ?? false,
 			metadataOptions: {
 				verifiedOnly: true,
 				includeContracts: [args.collectionAddress],

package/src/react/queries/filters.ts

@@ -53,30 +53,26 @@ export async function fetchFilters(
 		compareAddress(c.itemsAddress, collectionAddress),
 	)?.filterSettings;
 
-	if (
-		!collectionFilters?.exclusions ||
-		collectionFilters.exclusions.length === 0 ||
-		!collectionFilters.filterOrder ||
-		collectionFilters.filterOrder.length === 0
-	)
-		return filters;
-
-	const { filterOrder, exclusions } = collectionFilters;
-
-	const sortedFilters = filters.toSorted((a, b) => {
-		const aIndex =
-			filterOrder.indexOf(a.name) > -1
-				? filterOrder.indexOf(a.name)
-				: filterOrder.length;
-		const bIndex =
-			filterOrder.indexOf(b.name) > -1
-				? filterOrder.indexOf(b.name)
-				: filterOrder.length;
-		return aIndex - bIndex;
-	});
-
-	const filteredResults = sortedFilters.reduce<PropertyFilter[]>(
-		(acc, filter) => {
+	const filterOrder = collectionFilters?.filterOrder;
+	const exclusions = collectionFilters?.exclusions;
+	let sortedFilters = filters;
+
+	if (filterOrder) {
+		sortedFilters = filters.toSorted((a, b) => {
+			const aIndex =
+				filterOrder.indexOf(a.name) > -1
+					? filterOrder.indexOf(a.name)
+					: filterOrder.length;
+			const bIndex =
+				filterOrder.indexOf(b.name) > -1
+					? filterOrder.indexOf(b.name)
+					: filterOrder.length;
+			return aIndex - bIndex;
+		});
+	}
+
+	if (exclusions) {
+		sortedFilters = sortedFilters.reduce<PropertyFilter[]>((acc, filter) => {
 			const exclusionRule = exclusions.find((rule) => rule.key === filter.name);
 
 			if (!exclusionRule) {
@@ -100,11 +96,10 @@ export async function fetchFilters(
 			}
 
 			return acc;
-		},
-		[],
-	);
+		}, []);
+	}
 
-	return filteredResults;
+	return sortedFilters;
 }
 
 export type FiltersQueryOptions = ValuesOptional<FetchFiltersParams> & {

package/src/react/queries/index.ts

@@ -24,6 +24,7 @@ export * from './listCollectiblesPaginated';
 export * from './listCollectionActivities';
 export * from './listCollections';
 export * from './listListingsForCollectible';
+export * from './listOffersForCollectible';
 export * from './listTokenMetadata';
 export * from './lowestListing';
 export * from './marketCurrencies';