@0xsequence/marketplace-sdk 0.4.6 → 0.4.8

package/src/react/_internal/wagmi/__tests__/create-config.test.ts

@@ -0,0 +1,196 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createWagmiConfig } from '../create-config';
+import { getWaasConnectors } from '../embedded';
+import type { MarketplaceConfig, SdkConfig } from '../../../../types';
+import { WalletOptions } from '../../../../types';
+import { polygon } from 'viem/chains';
+import { MissingConfigError } from '../../../../utils/_internal/error/transaction';
+import { cookieStorage, type Config } from 'wagmi';
+
+describe('createWagmiConfig', () => {
+	let baseMarketplaceConfig: MarketplaceConfig;
+	let baseSdkConfig: SdkConfig;
+
+	beforeEach(() => {
+		baseMarketplaceConfig = {
+			projectId: 1,
+			publisherId: 'test-publisher',
+			title: 'Test Marketplace',
+			shortDescription: 'Test Description',
+			faviconUrl: 'https://test.com/favicon.ico',
+			landingBannerUrl: 'https://test.com/banner.jpg',
+			titleTemplate: '%s | Test',
+			walletOptions: [WalletOptions.Sequence],
+			collections: [
+				{
+					collectionAddress: '0x1234567890123456789012345678901234567890',
+					chainId: polygon.id,
+					marketplaceFeePercentage: 2.5,
+					marketplaceType: 'orderbook',
+				},
+			],
+			landingPageLayout: 'default',
+			cssString: '',
+			manifestUrl: 'https://test.com/manifest.json',
+		};
+
+		baseSdkConfig = {
+			projectAccessKey: 'test-access-key',
+			projectId: '1',
+		};
+	});
+
+	describe('successful cases', () => {
+		it('should create config with empty collections', () => {
+			const configWithEmptyCollections = createWagmiConfig(
+				{
+					...baseMarketplaceConfig,
+					collections: [],
+				},
+				baseSdkConfig,
+			);
+			expect(configWithEmptyCollections.chains).toBeDefined();
+			expect(Array.isArray(configWithEmptyCollections.chains)).toBe(true);
+			expect(configWithEmptyCollections.chains).toHaveLength(1);
+			// Default chain is polygon if no collections are specified
+			expect(configWithEmptyCollections.chains[0].id).toBe(polygon.id);
+		});
+
+		it('should create config with universal wallet setup', () => {
+			const marketplaceConfig: MarketplaceConfig = {
+				...baseMarketplaceConfig,
+				walletOptionsNew: {
+					connectors: ['walletconnect', 'coinbase'],
+					includeEIP6963Wallets: true,
+					walletType: 'universal',
+				},
+			};
+
+			const sdkConfig: SdkConfig = {
+				...baseSdkConfig,
+				wallet: {
+					walletConnectProjectId: 'test-wc-project-id',
+				},
+			};
+
+			const config = createWagmiConfig(marketplaceConfig, sdkConfig);
+			expect(config.connectors).toBeDefined();
+			expect(config.chains).toHaveLength(1);
+		});
+
+		it('should create config with embedded wallet setup', () => {
+			const marketplaceConfig: MarketplaceConfig = {
+				...baseMarketplaceConfig,
+				walletOptionsNew: {
+					connectors: ['walletconnect'],
+					includeEIP6963Wallets: false,
+					walletType: 'embedded',
+				},
+			};
+
+			const sdkConfig: SdkConfig = {
+				...baseSdkConfig,
+				wallet: {
+					embedded: {
+						waasConfigKey:
+							'eyJwcm9qZWN0SWQiOjEzNjM5LCJycGNTZXJ2ZXIiOiJodHRwczovL3dhYXMuc2VxdWVuY2UuYXBwIn0',
+						googleClientId: 'test-google-id',
+						appleClientId: 'test-apple-id',
+						appleRedirectURI: 'https://test.com/redirect',
+					},
+				},
+			};
+
+			const config = createWagmiConfig(marketplaceConfig, sdkConfig);
+			expect(config.connectors).toBeDefined();
+			expect(config.chains).toHaveLength(1);
+		});
+
+		it('should respect EIP6963 wallet inclusion setting', () => {
+			const marketplaceConfig: MarketplaceConfig = {
+				...baseMarketplaceConfig,
+				walletOptionsNew: {
+					connectors: ['walletconnect'],
+					includeEIP6963Wallets: false,
+					walletType: 'universal',
+				},
+			};
+
+			const config = createWagmiConfig(marketplaceConfig, baseSdkConfig);
+			expect(config.connectors).toBeDefined();
+			expect(config.chains).toHaveLength(1);
+		});
+
+		it('should create SSR compatible config when ssr flag is true', async () => {
+			const config = createWagmiConfig(
+				baseMarketplaceConfig,
+				baseSdkConfig,
+				true,
+			) as Config;
+
+			expect(config.storage).toBeInstanceOf(cookieStorage.constructor);
+
+			const testKey = 'wagmi.test';
+			const testValue = { data: 'test-value' };
+
+			config.storage?.setItem(testKey, JSON.stringify(testValue));
+
+			const storedValue = await config.storage?.getItem(testKey);
+			expect(storedValue).toBeDefined();
+			expect(JSON.parse(storedValue as string)).toEqual(testValue);
+		});
+	});
+
+	describe('failure cases', () => {
+		it('should throw error when trying to use embedded wallet without waasConfigKey', () => {
+			const marketplaceConfig: MarketplaceConfig = {
+				...baseMarketplaceConfig,
+				walletOptionsNew: {
+					connectors: ['walletconnect'],
+					includeEIP6963Wallets: false,
+					walletType: 'embedded',
+				},
+			};
+
+			const sdkConfig: SdkConfig = {
+				...baseSdkConfig,
+				wallet: {
+					embedded: {
+						waasConfigKey: '',
+						googleClientId: 'test-google-id',
+						appleClientId: 'test-apple-id',
+						appleRedirectURI: 'https://test.com/redirect',
+					},
+				},
+			};
+
+			expect(() =>
+				getWaasConnectors(marketplaceConfig, {
+					...sdkConfig,
+					wallet: {
+						...sdkConfig.wallet,
+						embedded: {
+							...sdkConfig.wallet?.embedded,
+							waasConfigKey: '', // Empty waasConfigKey should trigger the error
+						},
+					},
+				}),
+			).toThrow(MissingConfigError);
+		});
+
+		it('should still create config when walletConnectProjectId is missing', () => {
+			const marketplaceConfig: MarketplaceConfig = {
+				...baseMarketplaceConfig,
+				walletOptionsNew: {
+					connectors: ['walletconnect'],
+					includeEIP6963Wallets: true,
+					walletType: 'universal',
+				},
+			};
+
+			const config = createWagmiConfig(marketplaceConfig, baseSdkConfig);
+			expect(config.connectors).toBeDefined();
+			expect(config.chains).toHaveLength(1);
+		});
+	});
+});

package/src/react/_internal/wagmi/create-config.ts

@@ -1,6 +1,7 @@
 import { getDefaultChains } from '@0xsequence/kit';
 import { allNetworks, findNetworkConfig } from '@0xsequence/network';
 import type { Chain, Transport } from 'viem';
+import { polygon } from 'viem/chains';
 import { http, cookieStorage, createConfig, createStorage } from 'wagmi';
 import type { MarketplaceConfig, SdkConfig } from '../../../types';
 import { getWaasConnectors } from './embedded';
@@ -45,7 +46,14 @@ function getChainConfigs(marketConfig: MarketplaceConfig): [Chain, ...Chain[]] {
 	const supportedChainIds = new Set(
 		marketConfig.collections.map((c) => c.chainId),
 	);
-	return getDefaultChains([...supportedChainIds]);
+
+	// Marketplace config does not specify any chains, use polygon as default
+	if (supportedChainIds.size === 0) {
+		supportedChainIds.add(polygon.id); // Mainnet chain ID
+	}
+	const chains = getDefaultChains([...supportedChainIds]);
+
+	return chains;
 }
 
 function getTransportConfigs(

package/src/react/hooks/index.ts

@@ -10,7 +10,9 @@ export * from './useFilters';
 export * from './useFloorOrder';
 export * from './useHighestOffer';
 export * from './useListBalances';
+export * from './useListCollectibleActivities';
 export * from './useListCollectibles';
+export * from './useListCollectionActivities';
 export * from './useListOffersForCollectible';
 export * from './useCountOffersForCollectible';
 export * from './useListListingsForCollectible';

package/src/react/hooks/options/__mocks__/marketplaceConfig.msw.ts

@@ -0,0 +1,77 @@
+import { http, HttpResponse } from 'msw';
+import { WalletOptions, type MarketplaceConfig } from '../../../../types';
+
+// Mock data
+export const mockConfig: MarketplaceConfig = {
+	projectId: 123,
+	publisherId: 'test-publisher',
+	title: 'Test Marketplace',
+	shortDescription: 'A test marketplace',
+	faviconUrl: 'https://example.com/favicon.png',
+	landingBannerUrl: 'https://example.com/banner.png',
+	logoUrl: 'https://example.com/logo.png',
+	titleTemplate: '%s | Test Marketplace',
+	walletOptions: [WalletOptions.Sequence],
+	collections: [],
+	landingPageLayout: 'default',
+	cssString: '',
+	manifestUrl: '',
+};
+
+export const mockStyles = `
+  .marketplace-theme {
+    --primary-color: #000000;
+  }
+`;
+
+// Debug configuration
+export let isDebugEnabled = false;
+export const enableDebug = () => {
+	isDebugEnabled = true;
+};
+export const disableDebug = () => {
+	isDebugEnabled = false;
+};
+
+// Debug logger function
+const debugLog = (endpoint: string, request: Request, response: Response) => {
+	if (isDebugEnabled) {
+		console.log(`[MSW Debug] ${endpoint}:`, {
+			request,
+			response,
+		});
+	}
+};
+
+// MSW handlers
+export const createConfigHandler = (config = mockConfig) =>
+	http.get('*/marketplace/*/config.json', ({ request }) => {
+		const response = HttpResponse.json(config);
+		debugLog('config.json', request, response);
+		return response;
+	});
+
+export const createStylesHandler = (styles = mockStyles) =>
+	http.get('*/marketplace/*/styles.css', ({ request }) => {
+		const response = new HttpResponse(styles, {
+			headers: { 'Content-Type': 'text/css' },
+		});
+		debugLog('styles.css', request, response);
+		return response;
+	});
+
+export const createErrorHandler = () =>
+	http.get('*/marketplace/*/config.json', () => {
+		return HttpResponse.json(
+			{ code: 3000, msg: 'Project not found' },
+			{ status: 404 },
+		);
+	});
+
+export const createStylesErrorHandler = () =>
+	http.get('*/marketplace/*/styles.css', () => {
+		return new HttpResponse('', { status: 500 });
+	});
+
+// Default handlers
+export const handlers = [createConfigHandler(), createStylesHandler()];

package/src/react/hooks/options/__tests__/marketplaceConfigOptions.test.tsx

@@ -0,0 +1,144 @@
+import { describe, it, expect, beforeAll, afterAll, afterEach } from 'vitest';
+import { setupServer } from 'msw/node';
+import { marketplaceConfigOptions } from '../marketplaceConfigOptions';
+import { renderHook, waitFor } from '../../../_internal/test-utils';
+import type { QueryFunctionContext } from '@tanstack/react-query';
+import {
+	handlers,
+	createErrorHandler,
+	createStylesErrorHandler,
+	mockConfig,
+	mockStyles,
+} from '../__mocks__/marketplaceConfig.msw';
+
+type MarketplaceConfigQueryKey = ['configs', 'marketplace', string, string];
+type MarketplaceConfigContext = QueryFunctionContext<MarketplaceConfigQueryKey>;
+
+// Create MSW server with default handlers
+const server = setupServer(...handlers);
+
+// Setup test environment
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+describe('marketplaceConfigOptions', () => {
+	it('should fetch marketplace config and styles successfully', async () => {
+		const { result } = renderHook(() =>
+			marketplaceConfigOptions({
+				projectId: 'test-project',
+			}),
+		);
+
+		await waitFor(() => {
+			expect(result.current.queryKey).toEqual([
+				'configs',
+				'marketplace',
+				'production',
+				'test-project',
+			]);
+			expect(result.current.queryFn).toBeDefined();
+		});
+
+		const data = await result.current.queryFn?.({
+			queryKey: ['configs', 'marketplace', 'production', 'test-project'],
+		} as MarketplaceConfigContext);
+		expect(data).toEqual({
+			...mockConfig,
+			cssString: mockStyles.replaceAll(/['"]/g, ''),
+			manifestUrl: expect.stringContaining('/manifest.json'),
+		});
+	});
+
+	it('should use custom environment and dev access key when provided', async () => {
+		const { result } = renderHook(() =>
+			marketplaceConfigOptions({
+				projectId: 'test-project',
+				_internal: {
+					builderEnv: 'development',
+					devAccessKey: 'test-dev-access-key',
+				},
+			}),
+		);
+
+		await waitFor(() => {
+			expect(result.current.queryKey).toEqual([
+				'configs',
+				'marketplace',
+				'development',
+				'test-project',
+			]);
+			expect(result.current.queryFn).toBeDefined();
+		});
+
+		const data = await result.current.queryFn?.({
+			queryKey: ['configs', 'marketplace', 'development', 'test-project'],
+		} as MarketplaceConfigContext);
+		expect(data).toEqual({
+			...mockConfig,
+			cssString: mockStyles.replaceAll(/['"]/g, ''),
+			manifestUrl: expect.stringContaining('/manifest.json'),
+		});
+	});
+
+	it('should handle error responses', async () => {
+		// Override handler to return an error
+		server.use(createErrorHandler());
+
+		const { result } = renderHook(() =>
+			marketplaceConfigOptions({
+				projectId: 'non-existent-project',
+			}),
+		);
+
+		await waitFor(() => {
+			expect(result.current.queryKey).toEqual([
+				'configs',
+				'marketplace',
+				'production',
+				'non-existent-project',
+			]);
+			expect(result.current.queryFn).toBeDefined();
+		});
+
+		await expect(
+			result.current.queryFn?.({
+				queryKey: [
+					'configs',
+					'marketplace',
+					'production',
+					'non-existent-project',
+				],
+			} as MarketplaceConfigContext),
+		).rejects.toThrow('Project not found');
+	});
+
+	it('should handle network errors when fetching styles', async () => {
+		server.use(createStylesErrorHandler());
+
+		const { result } = renderHook(() =>
+			marketplaceConfigOptions({
+				projectId: 'test-project',
+			}),
+		);
+
+		await waitFor(() => {
+			expect(result.current.queryKey).toEqual([
+				'configs',
+				'marketplace',
+				'production',
+				'test-project',
+			]);
+			expect(result.current.queryFn).toBeDefined();
+		});
+
+		const data = await result.current.queryFn?.({
+			queryKey: ['configs', 'marketplace', 'production', 'test-project'],
+		} as MarketplaceConfigContext);
+		expect(data).toEqual({
+			...mockConfig,
+			cssString: '',
+			manifestUrl: expect.stringContaining('/manifest.json'),
+		});
+	});
+});

package/src/react/hooks/useCancelOrder.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useCancelTransactionSteps } from './useCancelTransactionSteps';
-import { MarketplaceKind } from '../../types';
+import type { MarketplaceKind } from '../../types';
 
 interface UseCancelOrderArgs {
 	collectionAddress: string;

package/src/react/hooks/useCancelTransactionSteps.tsx

@@ -2,17 +2,17 @@ import {
 	ExecuteType,
 	getMarketplaceClient,
 	getQueryClient,
-	MarketplaceKind,
-	Step,
+	type MarketplaceKind,
+	type Step,
 	StepType,
 } from '../_internal';
 import { useWallet } from '../_internal/wallet/useWallet';
-import { ModalCallbacks } from '../ui/modals/_internal/types';
+import type { ModalCallbacks } from '../ui/modals/_internal/types';
 import { useConfig } from './useConfig';
 import { useGenerateCancelTransaction } from './useGenerateCancelTransaction';
-import { TransactionStep } from './useCancelOrder';
-import { SignatureStep } from '../_internal/utils';
-import { Hex } from 'viem';
+import type { TransactionStep } from './useCancelOrder';
+import type { SignatureStep } from '../_internal/utils';
+import type { Hex } from 'viem';
 import { useSwitchChainModal } from '../ui/modals/_internal/components/switchChainModal';
 import {
 	ChainSwitchUserRejectedError,

package/src/react/hooks/useCurrencies.tsx

@@ -52,11 +52,8 @@ const selectCurrencies = (data: Currency[], args: UseCurrenciesArgs) => {
 			option.toLowerCase(),
 		);
 
-		filteredData = filteredData.filter(
-			(currency) =>
-				lowerCaseCurrencyOptions.includes(
-					currency.contractAddress.toLowerCase(),
-				)
+		filteredData = filteredData.filter((currency) =>
+			lowerCaseCurrencyOptions.includes(currency.contractAddress.toLowerCase()),
 		);
 	}
 	return filteredData;

package/src/react/hooks/useCurrency.tsx

@@ -44,10 +44,19 @@ const fetchCurrency = async (
 			.then((resp) => resp.currencies);
 	}
 
-	return currencies?.find(
+	if (!currencies?.length) {
+		throw new Error('No currencies returned');
+	}
+	const currency = currencies.find(
 		(currency) =>
 			currency.contractAddress.toLowerCase() === currencyAddress.toLowerCase(),
 	);
+
+	if (!currency) {
+		throw new Error('Currency not found');
+	}
+
+	return currency;
 };
 
 export const currencyOptions = (args: UseCurrencyArgs, config: SdkConfig) => {

package/src/react/hooks/useCurrencyBalance.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { skipToken, useQuery } from '@tanstack/react-query';
 import { type Address, erc20Abi, formatUnits, zeroAddress } from 'viem';
 import { getPublicRpcClient } from '../../utils';
 
@@ -7,46 +7,48 @@ export function useCurrencyBalance({
 	chainId,
 	userAddress,
 }: {
-	currencyAddress: Address;
-	chainId: number;
-	userAddress: Address;
+	currencyAddress: Address | undefined;
+	chainId: number | undefined;
+	userAddress: Address | undefined;
 }) {
-	const publicClient = getPublicRpcClient(chainId);
-
 	return useQuery({
 		queryKey: ['balance', currencyAddress, chainId, userAddress],
-		queryFn: async () => {
-			if (!userAddress) return null;
+		queryFn:
+			!!userAddress && !!chainId && !!currencyAddress
+				? async () => {
+						if (!userAddress) return null;
+
+						const publicClient = getPublicRpcClient(chainId);
 
-			if (currencyAddress === zeroAddress) {
-				const balance = await publicClient.getBalance({
-					address: userAddress,
-				});
-				return {
-					value: balance,
-					formatted: formatUnits(balance, 18),
-				};
-			}
+						if (currencyAddress === zeroAddress) {
+							const balance = await publicClient.getBalance({
+								address: userAddress,
+							});
+							return {
+								value: balance,
+								formatted: formatUnits(balance, 18),
+							};
+						}
 
-			const [balance, decimals] = await Promise.all([
-				publicClient.readContract({
-					address: currencyAddress,
-					abi: erc20Abi,
-					functionName: 'balanceOf',
-					args: [userAddress],
-				}),
-				publicClient.readContract({
-					address: currencyAddress,
-					abi: erc20Abi,
-					functionName: 'decimals',
-				}),
-			]);
+						const [balance, decimals] = await Promise.all([
+							publicClient.readContract({
+								address: currencyAddress,
+								abi: erc20Abi,
+								functionName: 'balanceOf',
+								args: [userAddress],
+							}),
+							publicClient.readContract({
+								address: currencyAddress,
+								abi: erc20Abi,
+								functionName: 'decimals',
+							}),
+						]);
 
-			return {
-				value: balance,
-				formatted: formatUnits(balance, decimals),
-			};
-		},
-		enabled: !!userAddress && !!chainId && !!currencyAddress,
+						return {
+							value: balance,
+							formatted: formatUnits(balance, decimals),
+						};
+					}
+				: skipToken,
 	});
 }

package/src/react/hooks/useGetReceiptFromHash.tsx

@@ -1,4 +1,4 @@
-import { Hex } from 'viem';
+import type { Hex } from 'viem';
 import { usePublicClient } from 'wagmi';
 import { useCallback } from 'react';
 

package/src/react/hooks/useListCollectibleActivities.tsx

@@ -0,0 +1,57 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { z } from 'zod';
+import type { SdkConfig } from '../../types';
+import { collectableKeys, getMarketplaceClient } from '../_internal';
+import { useConfig } from './useConfig';
+import type {
+	getListCollectibleActivitiesArgsSchema,
+	getListCollectibleActivitiesReturnSchema,
+} from '../_internal/api/zod-schema';
+
+export type UseListCollectibleActivitiesArgs = z.infer<
+	typeof getListCollectibleActivitiesArgsSchema
+>;
+
+export type UseListCollectibleActivitiesReturn = z.infer<
+	typeof getListCollectibleActivitiesReturnSchema
+>;
+
+const fetchCollectibleActivities = async (
+	args: UseListCollectibleActivitiesArgs,
+	config: SdkConfig,
+) => {
+	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	return marketplaceClient
+		.listCollectibleActivities({
+			contractAddress: args.collectionAddress,
+			tokenId: args.tokenId,
+			page: args.query?.enabled
+				? {
+						page: args.query.page ?? 1,
+						pageSize: args.query.pageSize ?? 10,
+						sort: args.query.sort,
+					}
+				: undefined,
+		})
+		.then((data) => ({
+			activities: data.activities,
+			page: data.page,
+		}));
+};
+
+export const listCollectibleActivitiesOptions = (
+	args: UseListCollectibleActivitiesArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		queryKey: [...collectableKeys.collectibleActivities, args, config],
+		queryFn: () => fetchCollectibleActivities(args, config),
+	});
+};
+
+export const useListCollectibleActivities = (
+	args: UseListCollectibleActivitiesArgs,
+) => {
+	const config = useConfig();
+	return useQuery(listCollectibleActivitiesOptions(args, config));
+};