@0xsequence/marketplace-sdk 0.4.7 → 0.4.9

package/src/react/ui/modals/BuyModal/hooks/__tests__/useCheckoutOptions.test.tsx

@@ -0,0 +1,267 @@
+import { renderHook } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useCheckoutOptions } from '../useCheckoutOptions';
+import { useWallet } from '../../../../../_internal/wallet/useWallet';
+import { useConfig } from '../../../../../hooks';
+import { useFees } from '../useFees';
+import {
+	MarketplaceKind,
+	getMarketplaceClient,
+} from '../../../../../_internal';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+
+// Mock dependencies
+vi.mock('../../../../../_internal/wallet/useWallet', () => ({
+	useWallet: vi.fn(),
+}));
+
+vi.mock('../../../../../hooks', () => ({
+	useConfig: vi.fn(),
+}));
+
+vi.mock('../useFees', () => ({
+	useFees: vi.fn(),
+}));
+
+vi.mock('../../../../../_internal', async () => {
+	const actual = (await vi.importActual('../../../../../_internal')) as Record<
+		string,
+		unknown
+	>;
+	return {
+		...actual,
+		getMarketplaceClient: vi.fn(),
+	};
+});
+
+const createWrapper = () => {
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				retry: false,
+			},
+		},
+	});
+	return ({ children }: { children: ReactNode }) => (
+		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+	);
+};
+
+describe('useCheckoutOptions', () => {
+	const defaultProps = {
+		chainId: 1,
+		collectionAddress: '0x123' as `0x${string}`,
+		orderId: '1',
+		marketplace: MarketplaceKind.sequence_marketplace_v2,
+	};
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+
+		// Setup default mock implementations
+		(useConfig as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			projectAccessKey: 'test-key',
+			projectId: 'test-id',
+		});
+
+		(useFees as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			amount: '250',
+			receiver: '0x123',
+		});
+	});
+
+	it('should return undefined when wallet is not available', () => {
+		// Mock useWallet to return no wallet
+		(useWallet as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			wallet: undefined,
+		});
+
+		const { result } = renderHook(() => useCheckoutOptions(defaultProps), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.data).toBeUndefined();
+	});
+
+	it('should fetch checkout options when wallet is available', async () => {
+		// Mock useWallet to return a valid wallet
+		(useWallet as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			wallet: {
+				address: async () => '0x123',
+			},
+		});
+
+		// Mock the marketplace client
+		const checkoutOptionsMarketplaceMock = vi.fn().mockResolvedValue({
+			options: {
+				swap: [],
+				nftCheckout: [],
+				onRamp: [],
+				crypto: ['ETH', 'USDC'],
+			},
+		});
+
+		const marketplaceClientMock = {
+			checkoutOptionsMarketplace: checkoutOptionsMarketplaceMock,
+		};
+
+		(
+			getMarketplaceClient as unknown as ReturnType<typeof vi.fn>
+		).mockReturnValue(marketplaceClientMock);
+
+		const { result } = renderHook(() => useCheckoutOptions(defaultProps), {
+			wrapper: createWrapper(),
+		});
+
+		// Wait for the query to complete
+		await vi.waitFor(() => {
+			expect(result.current.isSuccess).toBe(true);
+		});
+
+		// Verify the marketplace client was called with correct parameters
+		expect(checkoutOptionsMarketplaceMock).toHaveBeenCalledWith({
+			wallet: '0x123',
+			orders: [
+				{
+					contractAddress: defaultProps.collectionAddress,
+					orderId: defaultProps.orderId,
+					marketplace: defaultProps.marketplace,
+				},
+			],
+			additionalFee: 250,
+		});
+
+		// Verify the returned data
+		expect(result.current.data).toEqual({
+			swap: [],
+			nftCheckout: [],
+			onRamp: [],
+			crypto: ['ETH', 'USDC'],
+		});
+	});
+
+	it('should call marketplaceClient.checkoutOptionsMarketplace with correct params', async () => {
+		// Mock useWallet to return a valid wallet
+		(useWallet as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			wallet: {
+				address: async () => '0x456',
+			},
+		});
+
+		// Mock the marketplace client
+		const checkoutOptionsMarketplaceMock = vi.fn().mockResolvedValue({
+			options: {
+				swap: ['uniswap'],
+				nftCheckout: ['moonpay'],
+				onRamp: ['ramp'],
+				crypto: ['ETH'],
+			},
+		});
+
+		const marketplaceClientMock = {
+			checkoutOptionsMarketplace: checkoutOptionsMarketplaceMock,
+		};
+
+		(
+			getMarketplaceClient as unknown as ReturnType<typeof vi.fn>
+		).mockReturnValue(marketplaceClientMock);
+
+		const customProps = {
+			chainId: 137,
+			collectionAddress: '0x789' as `0x${string}`,
+			orderId: '42',
+			marketplace: MarketplaceKind.sequence_marketplace_v2,
+		};
+
+		// Mock fees with different values to ensure they're passed correctly
+		(useFees as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			amount: '500',
+			receiver: '0xabc',
+		});
+
+		renderHook(() => useCheckoutOptions(customProps), {
+			wrapper: createWrapper(),
+		});
+
+		// Wait for the query to be called
+		await vi.waitFor(() => {
+			expect(checkoutOptionsMarketplaceMock).toHaveBeenCalledTimes(1);
+		});
+
+		// Verify exact parameters passed to the marketplace client
+		expect(checkoutOptionsMarketplaceMock).toHaveBeenCalledWith({
+			wallet: '0x456',
+			orders: [
+				{
+					contractAddress: customProps.collectionAddress,
+					orderId: customProps.orderId,
+					marketplace: customProps.marketplace,
+				},
+			],
+			additionalFee: 500, // Using the mocked fee amount
+		});
+
+		// Verify the marketplace client was initialized with correct chain ID
+		expect(getMarketplaceClient).toHaveBeenCalledWith(
+			customProps.chainId,
+			expect.objectContaining({
+				projectAccessKey: 'test-key',
+				projectId: 'test-id',
+			}),
+		);
+	});
+
+	it('should handle API errors', async () => {
+		// Mock useWallet to return a valid wallet
+		(useWallet as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			wallet: {
+				address: async () => '0x123',
+			},
+		});
+
+		// Mock the marketplace client to throw an error
+		const errorMessage = 'Failed to fetch checkout options';
+		const checkoutOptionsMarketplaceMock = vi
+			.fn()
+			.mockRejectedValue(new Error(errorMessage));
+
+		const marketplaceClientMock = {
+			checkoutOptionsMarketplace: checkoutOptionsMarketplaceMock,
+		};
+
+		(
+			getMarketplaceClient as unknown as ReturnType<typeof vi.fn>
+		).mockReturnValue(marketplaceClientMock);
+
+		const { result } = renderHook(() => useCheckoutOptions(defaultProps), {
+			wrapper: createWrapper(),
+		});
+
+		// Wait for the query to fail
+		await vi.waitFor(() => {
+			expect(result.current.isError).toBe(true);
+		});
+
+		// Verify error state
+		expect(result.current.error).toBeDefined();
+		expect(result.current.error).toBeInstanceOf(Error);
+		expect((result.current.error as Error).message).toBe(errorMessage);
+
+		// Verify data is undefined when there's an error
+		expect(result.current.data).toBeUndefined();
+
+		// Verify the API was called with correct parameters despite the error
+		expect(checkoutOptionsMarketplaceMock).toHaveBeenCalledWith({
+			wallet: '0x123',
+			orders: [
+				{
+					contractAddress: defaultProps.collectionAddress,
+					orderId: defaultProps.orderId,
+					marketplace: defaultProps.marketplace,
+				},
+			],
+			additionalFee: 250,
+		});
+	});
+});

package/src/react/ui/modals/BuyModal/hooks/__tests__/useFees.test.tsx

@@ -0,0 +1,166 @@
+import { renderHook } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useFees } from '../useFees';
+import { useMarketplaceConfig } from '../../../../../hooks';
+import { avalanche, optimism } from 'viem/chains';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+
+// Mock dependencies
+vi.mock('../../../../../hooks', () => ({
+	useMarketplaceConfig: vi.fn(),
+}));
+
+const createWrapper = () => {
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				retry: false,
+			},
+		},
+	});
+	return ({ children }: { children: ReactNode }) => (
+		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+	);
+};
+
+describe('useFees', () => {
+	const defaultProps = {
+		chainId: 1,
+		collectionAddress: '0x123',
+	};
+
+	const defaultPlatformFeeRecipient =
+		'0x858dB1cbF6D09D447C96A11603189b49B2D1C219';
+	const avalancheAndOptimismPlatformFeeRecipient =
+		'0x400cdab4676c17aec07e8ec748a5fc3b674bca41';
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should return default fee when collection not found', () => {
+		// Mock marketplace config with no matching collection
+		(
+			useMarketplaceConfig as unknown as ReturnType<typeof vi.fn>
+		).mockReturnValue({
+			data: {
+				collections: [
+					{
+						collectionAddress: '0x456',
+						chainId: '1',
+						marketplaceFeePercentage: '5.0',
+					},
+				],
+			},
+		});
+
+		const { result } = renderHook(() => useFees(defaultProps), {
+			wrapper: createWrapper(),
+		});
+
+		// Default fee should be 2.5%, which is 250 in BPS (basis points)
+		expect(result.current).toEqual({
+			amount: '250',
+			receiver: defaultPlatformFeeRecipient,
+		});
+	});
+
+	it('should return collection-specific fee when found in config', () => {
+		const collectionFee = '5.0';
+		const collectionAddress = '0x789';
+		const chainId = 1;
+
+		// Mock marketplace config with a matching collection
+		(
+			useMarketplaceConfig as unknown as ReturnType<typeof vi.fn>
+		).mockReturnValue({
+			data: {
+				collections: [
+					{
+						collectionAddress,
+						chainId: chainId.toString(),
+						marketplaceFeePercentage: collectionFee,
+					},
+				],
+			},
+		});
+
+		const { result } = renderHook(
+			() => useFees({ chainId, collectionAddress }),
+			{
+				wrapper: createWrapper(),
+			},
+		);
+
+		// 5.0% fee should be 500 in BPS (basis points)
+		expect(result.current).toEqual({
+			amount: '500',
+			receiver: defaultPlatformFeeRecipient,
+		});
+	});
+
+	it('should use Avalanche/Optimism fee recipient for those chains', () => {
+		// Test Avalanche chain
+		const { result: avalancheResult } = renderHook(
+			() => useFees({ ...defaultProps, chainId: avalanche.id }),
+			{
+				wrapper: createWrapper(),
+			},
+		);
+
+		expect(avalancheResult.current.receiver).toBe(
+			avalancheAndOptimismPlatformFeeRecipient,
+		);
+
+		// Test Optimism chain
+		const { result: optimismResult } = renderHook(
+			() => useFees({ ...defaultProps, chainId: optimism.id }),
+			{
+				wrapper: createWrapper(),
+			},
+		);
+
+		expect(optimismResult.current.receiver).toBe(
+			avalancheAndOptimismPlatformFeeRecipient,
+		);
+	});
+
+	it('should handle case-insensitive collection address matching', () => {
+		const collectionFee = '3.5';
+		const collectionAddress = '0xABC123';
+		const chainId = 1;
+
+		// Mock marketplace config with a collection in different case
+		(
+			useMarketplaceConfig as unknown as ReturnType<typeof vi.fn>
+		).mockReturnValue({
+			data: {
+				collections: [
+					{
+						collectionAddress: collectionAddress.toLowerCase(),
+						chainId: chainId.toString(),
+						marketplaceFeePercentage: collectionFee,
+					},
+				],
+			},
+		});
+
+		const { result } = renderHook(
+			() =>
+				useFees({
+					chainId,
+					collectionAddress: collectionAddress.toUpperCase(),
+				}),
+			{
+				wrapper: createWrapper(),
+			},
+		);
+
+		// 3.5% fee should be 350 in BPS (basis points)
+		expect(result.current).toEqual({
+			amount: '350',
+			receiver: defaultPlatformFeeRecipient,
+		});
+	});
+});

package/src/react/ui/modals/BuyModal/hooks/__tests__/useLoadData.test.tsx

@@ -0,0 +1,209 @@
+import { renderHook } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useLoadData } from '../useLoadData';
+import { useCollection, useCollectible } from '../../../../../hooks';
+import { useCheckoutOptions } from '../useCheckoutOptions';
+import { MarketplaceKind } from '../../../../../_internal';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+
+// Mock dependencies
+vi.mock('../../../../../hooks', () => ({
+	useCollection: vi.fn(),
+	useCollectible: vi.fn(),
+}));
+
+vi.mock('../useCheckoutOptions', () => ({
+	useCheckoutOptions: vi.fn(),
+}));
+
+const createWrapper = () => {
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				retry: false,
+			},
+		},
+	});
+	return ({ children }: { children: ReactNode }) => (
+		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+	);
+};
+
+describe('useLoadData', () => {
+	const defaultProps = {
+		chainId: 1,
+		collectionAddress: '0x123' as `0x${string}`,
+		collectibleId: '1',
+		orderId: '1',
+		marketplace: MarketplaceKind.sequence_marketplace_v2,
+	};
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should return loading state when any data is loading', () => {
+		// Mock one hook to be loading
+		(useCollection as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			data: null,
+			isLoading: true,
+			isError: false,
+		});
+
+		(useCollectible as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			data: null,
+			isLoading: false,
+			isError: false,
+		});
+
+		(useCheckoutOptions as unknown as ReturnType<typeof vi.fn>).mockReturnValue(
+			{
+				data: null,
+				isLoading: false,
+				isError: false,
+			},
+		);
+
+		const { result } = renderHook(() => useLoadData(defaultProps), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.isLoading).toBe(true);
+		expect(result.current.isError).toBe(false);
+		expect(result.current.collection).toBeNull();
+		expect(result.current.collectable).toBeNull();
+		expect(result.current.checkoutOptions).toBeNull();
+	});
+
+	it('should return error state when any request fails', () => {
+		// Mock one hook to have an error
+		(useCollection as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			data: null,
+			isLoading: false,
+			isError: true,
+		});
+
+		(useCollectible as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			data: null,
+			isLoading: false,
+			isError: false,
+		});
+
+		(useCheckoutOptions as unknown as ReturnType<typeof vi.fn>).mockReturnValue(
+			{
+				data: null,
+				isLoading: false,
+				isError: false,
+			},
+		);
+
+		const { result } = renderHook(() => useLoadData(defaultProps), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.isError).toBe(true);
+		expect(result.current.isLoading).toBe(false);
+	});
+
+	it('should return all data when successfully loaded', () => {
+		const mockCollection = { type: 'ERC721', name: 'Test Collection' };
+		const mockCollectable = { tokenId: '1', name: 'Test NFT' };
+		const mockCheckoutOptions = {
+			swap: [],
+			nftCheckout: [],
+			onRamp: [],
+			crypto: ['ETH'],
+		};
+
+		(useCollection as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			data: mockCollection,
+			isLoading: false,
+			isError: false,
+		});
+
+		(useCollectible as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			data: mockCollectable,
+			isLoading: false,
+			isError: false,
+		});
+
+		(useCheckoutOptions as unknown as ReturnType<typeof vi.fn>).mockReturnValue(
+			{
+				data: mockCheckoutOptions,
+				isLoading: false,
+				isError: false,
+			},
+		);
+
+		const { result } = renderHook(() => useLoadData(defaultProps), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.isLoading).toBe(false);
+		expect(result.current.isError).toBe(false);
+		expect(result.current.collection).toBe(mockCollection);
+		expect(result.current.collectable).toBe(mockCollectable);
+		expect(result.current.checkoutOptions).toBe(mockCheckoutOptions);
+	});
+
+	it('should handle partial data loading states', () => {
+		// Mock different loading states for each hook
+		(useCollection as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			data: { type: 'ERC721', name: 'Test Collection' },
+			isLoading: false,
+			isError: false,
+		});
+
+		(useCollectible as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			data: null,
+			isLoading: true,
+			isError: false,
+		});
+
+		(useCheckoutOptions as unknown as ReturnType<typeof vi.fn>).mockReturnValue(
+			{
+				data: {
+					swap: [],
+					nftCheckout: [],
+					onRamp: [],
+					crypto: ['ETH'],
+				},
+				isLoading: false,
+				isError: false,
+			},
+		);
+
+		const { result } = renderHook(() => useLoadData(defaultProps), {
+			wrapper: createWrapper(),
+		});
+
+		// Should be loading if any data is loading
+		expect(result.current.isLoading).toBe(true);
+		expect(result.current.isError).toBe(false);
+
+		// Should have partial data available
+		expect(result.current.collection).toBeDefined();
+		expect(result.current.collectable).toBeNull();
+		expect(result.current.checkoutOptions).toBeDefined();
+
+		// Verify hook calls
+		expect(useCollection).toHaveBeenCalledWith({
+			chainId: defaultProps.chainId,
+			collectionAddress: defaultProps.collectionAddress,
+		});
+
+		expect(useCollectible).toHaveBeenCalledWith({
+			chainId: String(defaultProps.chainId),
+			collectionAddress: defaultProps.collectionAddress,
+			collectibleId: defaultProps.collectibleId,
+		});
+
+		expect(useCheckoutOptions).toHaveBeenCalledWith({
+			chainId: defaultProps.chainId,
+			collectionAddress: defaultProps.collectionAddress,
+			orderId: defaultProps.orderId,
+			marketplace: defaultProps.marketplace,
+		});
+	});
+});

package/src/react/ui/modals/BuyModal/hooks/useCheckoutOptions.ts

@@ -6,7 +6,7 @@ import {
 import { useConfig } from '../../../../hooks';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 import { useFees } from './useFees';
-import { useQuery } from '@tanstack/react-query';
+import { skipToken, useQuery } from '@tanstack/react-query';
 
 export const useCheckoutOptions = (input: {
 	chainId: number;
@@ -29,22 +29,24 @@ export const useCheckoutOptions = (input: {
 			input.orderId,
 			input.marketplace,
 		],
-		queryFn: async () => {
-			const marketplaceClient = getMarketplaceClient(input.chainId, config);
-			return marketplaceClient
-				.checkoutOptionsMarketplace({
-					wallet: await wallet!.address(),
-					orders: [
-						{
-							contractAddress: input.collectionAddress,
-							orderId: input.orderId,
-							marketplace: input.marketplace,
-						},
-					],
-					additionalFee: Number(fees.amount),
-				})
-				.then((res) => res.options);
-		},
+		queryFn: wallet
+			? async () => {
+					const marketplaceClient = getMarketplaceClient(input.chainId, config);
+					return marketplaceClient
+						.checkoutOptionsMarketplace({
+							wallet: await wallet.address(),
+							orders: [
+								{
+									contractAddress: input.collectionAddress,
+									orderId: input.orderId,
+									marketplace: input.marketplace,
+								},
+							],
+							additionalFee: Number(fees.amount),
+						})
+						.then((res) => res.options);
+				}
+			: skipToken,
 		enabled: !!wallet,
 	});
 };