@0xsequence/marketplace-sdk 0.4.5 → 0.4.7

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,5 +1,6 @@
 import { useState } from 'react';
 import { useCancelTransactionSteps } from './useCancelTransactionSteps';
+import type { MarketplaceKind } from '../../types';
 
 interface UseCancelOrderArgs {
 	collectionAddress: string;
@@ -25,17 +26,35 @@ export const useCancelOrder = ({
 		isExecuting: false,
 		execute: () => Promise.resolve(),
 	});
+	const [cancellingOrderId, setCancellingOrderId] = useState<string | null>(
+		null,
+	);
 
-	const { cancelOrder } = useCancelTransactionSteps({
+	const { cancelOrder: cancelOrderBase } = useCancelTransactionSteps({
 		collectionAddress,
 		chainId,
-		onSuccess,
-		onError,
+		onSuccess: (result) => {
+			setCancellingOrderId(null);
+			onSuccess?.(result);
+		},
+		onError: (error) => {
+			setCancellingOrderId(null);
+			onError?.(error);
+		},
 		setSteps,
 	});
 
+	const cancelOrder = async (params: {
+		orderId: string;
+		marketplace: MarketplaceKind;
+	}) => {
+		setCancellingOrderId(params.orderId);
+		return cancelOrderBase(params);
+	};
+
 	return {
 		cancelOrder,
 		isExecuting: steps.isExecuting,
+		cancellingOrderId,
 	};
 };

package/src/react/hooks/useCancelTransactionSteps.tsx

@@ -2,18 +2,17 @@ import {
 	ExecuteType,
 	getMarketplaceClient,
 	getQueryClient,
-	MarketplaceKind,
-	Step,
+	type MarketplaceKind,
+	type Step,
 	StepType,
 } from '../_internal';
-import { useWallet } from '../_internal/transaction-machine/useWallet';
-import { ModalCallbacks } from '../ui/modals/_internal/types';
+import { useWallet } from '../_internal/wallet/useWallet';
+import type { ModalCallbacks } from '../ui/modals/_internal/types';
 import { useConfig } from './useConfig';
 import { useGenerateCancelTransaction } from './useGenerateCancelTransaction';
-import { TransactionStep } from './useCancelOrder';
-import { SignatureStep } from '../_internal/transaction-machine/utils';
-import { useGetReceiptFromHash } from './useGetReceiptFromHash';
-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,
@@ -42,7 +41,6 @@ export const useCancelTransactionSteps = ({
 	const walletIsInitialized = wallet && !isLoading && !isError;
 	const sdkConfig = useConfig();
 	const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
-	const { waitForReceipt } = useGetReceiptFromHash();
 	const { generateCancelTransactionAsync } = useGenerateCancelTransaction({
 		chainId,
 	});
@@ -147,7 +145,7 @@ export const useCancelTransactionSteps = ({
 				hash = await executeTransaction({ transactionStep });
 
 				if (hash) {
-					await waitForReceipt(hash);
+					await wallet.handleConfirmTransactionStep(hash, Number(chainId));
 
 					if (onSuccess && typeof onSuccess === 'function') {
 						onSuccess({ hash });

package/src/react/hooks/useCurrencies.tsx

@@ -1,8 +1,7 @@
 import { queryOptions, useQuery } from '@tanstack/react-query';
-import { toHex, zeroAddress } from 'viem';
+import { zeroAddress } from 'viem';
 import { z } from 'zod';
 import type { SdkConfig } from '../../types';
-import { InvalidCurrencyOptionsError } from '../../utils/_internal/error/transaction';
 import {
 	AddressSchema,
 	type ChainId,
@@ -41,27 +40,23 @@ const fetchCurrencies = async (chainId: ChainId, config: SdkConfig) => {
 
 const selectCurrencies = (data: Currency[], args: UseCurrenciesArgs) => {
 	const argsParsed = UseCurrenciesArgsSchema.parse(args);
-	// if collectionAddress is passed, filter currencies based on collection currency options
+
+	let filteredData = data;
+
+	if (!argsParsed.includeNativeCurrency) {
+		filteredData = filteredData.filter((currency) => !currency.nativeCurrency);
+	}
+
 	if (argsParsed.currencyOptions) {
-		if (!argsParsed.currencyOptions) {
-			throw new InvalidCurrencyOptionsError(argsParsed.currencyOptions);
-		}
+		const lowerCaseCurrencyOptions = argsParsed.currencyOptions.map((option) =>
+			option.toLowerCase(),
+		);
 
-		return data.filter(
-			(currency) =>
-				argsParsed.currencyOptions?.includes(toHex(currency.contractAddress)) ||
-				// biome-ignore lint/suspicious/noDoubleEquals: <explanation>
-				currency.nativeCurrency == argsParsed.includeNativeCurrency ||
-				currency.defaultChainCurrency,
+		filteredData = filteredData.filter((currency) =>
+			lowerCaseCurrencyOptions.includes(currency.contractAddress.toLowerCase()),
 		);
 	}
-	// if includeNativeCurrency is true, return all currencies
-	if (argsParsed.includeNativeCurrency) {
-		return data;
-	}
-
-	// if includeNativeCurrency is false or undefined, filter out native currencies
-	return data.filter((currency) => !currency.nativeCurrency);
+	return filteredData;
 };
 
 export const currenciesOptions = (

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));
+};

package/src/react/hooks/useListCollectionActivities.tsx

@@ -0,0 +1,57 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { z } from 'zod';
+import type { SdkConfig } from '../../types';
+import { getMarketplaceClient } from '../_internal';
+import { collectionKeys } from '../_internal/api';
+import { useConfig } from './useConfig';
+import type {
+	getListCollectionActivitiesArgsSchema,
+	getListCollectionActivitiesReturnSchema,
+} from '../_internal/api/zod-schema';
+
+export type UseListCollectionActivitiesArgs = z.infer<
+	typeof getListCollectionActivitiesArgsSchema
+>;
+
+export type UseListCollectionActivitiesReturn = z.infer<
+	typeof getListCollectionActivitiesReturnSchema
+>;
+
+const fetchListCollectionActivities = async (
+	args: UseListCollectionActivitiesArgs,
+	config: SdkConfig,
+) => {
+	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	return marketplaceClient
+		.listCollectionActivities({
+			contractAddress: args.collectionAddress,
+			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 listCollectionActivitiesOptions = (
+	args: UseListCollectionActivitiesArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		queryKey: [...collectionKeys.collectionActivities, args, config],
+		queryFn: () => fetchListCollectionActivities(args, config),
+	});
+};
+
+export const useListCollectionActivities = (
+	args: UseListCollectionActivitiesArgs,
+) => {
+	const config = useConfig();
+	return useQuery(listCollectionActivitiesOptions(args, config));
+};

package/src/react/ssr/create-ssr-client.ts

@@ -2,7 +2,7 @@ import { type State, cookieToInitialState } from 'wagmi';
 import type { SdkConfig } from '../../types/sdk-config';
 import { createWagmiConfig } from '../_internal/wagmi/create-config';
 import { marketplaceConfigOptions } from '../hooks/options/marketplaceConfigOptions';
-import { QueryClient } from '@tanstack/react-query';
+import type { QueryClient } from '@tanstack/react-query';
 
 type InitSSRClientArgs = {
 	cookie: string;

package/src/react/ui/components/_internals/action-button/ActionButton.tsx

@@ -17,7 +17,7 @@ type ActionButtonProps = {
 	chainId: string;
 	collectionAddress: Hex;
 	tokenId: string;
-	orderbookKind: OrderbookKind;
+	orderbookKind?: OrderbookKind;
 	isTransfer?: boolean;
 	action: CollectibleCardAction;
 	isOwned: boolean;