@0xsequence/marketplace-sdk 0.5.1 → 0.5.3

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

@@ -1,267 +1,209 @@
-import { renderHook } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { useCheckoutOptions } from '../useCheckoutOptions';
 import { useWallet } from '../../../../../_internal/wallet/useWallet';
-import { useConfig } from '../../../../../hooks';
 import { useFees } from '../useFees';
+import { MarketplaceKind } from '../../../../../_internal';
 import {
-	MarketplaceKind,
-	getMarketplaceClient,
-} from '../../../../../_internal';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import type { ReactNode } from 'react';
+	renderHook,
+	waitFor,
+	type RenderHookOptions,
+} from '../../../../../_internal/test-utils';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../../../_internal/test/setup';
+import { createMockWallet } from '../../../../../_internal/test/mocks/wallet';
+import { mockMarketplaceEndpoint } from '../../../../../_internal/api/__mocks__/marketplace.msw';
+import { zeroAddress } from 'viem';
+import { TransactionCrypto } from '../../../../../_internal/api/marketplace.gen';
 
 // 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(),
-	};
-});
+vi.mock('../../../../../_internal/wallet/useWallet');
+vi.mock('../useFees');
 
-const createWrapper = () => {
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: {
-				retry: false,
-			},
-		},
-	});
-	return ({ children }: { children: ReactNode }) => (
-		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-	);
-};
+// Create mock wallet instance
+const mockWallet = createMockWallet({
+	address: vi.fn().mockResolvedValue(zeroAddress),
+});
 
 describe('useCheckoutOptions', () => {
-	const defaultProps = {
+	const defaultInput = {
 		chainId: 1,
-		collectionAddress: '0x123' as `0x${string}`,
-		orderId: '1',
+		collectionAddress: zeroAddress,
+		orderId: '123',
 		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',
-		});
+		// Set up default wallet mock
+		vi.mocked(useWallet).mockReturnValue({
+			wallet: mockWallet,
+			isLoading: false,
+			isError: false,
+		});
+
+		// Set up default fees mock
+		vi.mocked(useFees).mockReturnValue({
+			amount: '100000000000000000',
+			receiver: zeroAddress,
+		});
+
+		// Set up default API response
+		server.use(
+			http.post(mockMarketplaceEndpoint('CheckoutOptionsMarketplace'), () => {
+				return HttpResponse.json({
+					options: {
+						crypto: TransactionCrypto.all,
+						swap: [],
+						nftCheckout: [],
+						onRamp: [],
+					},
+				});
+			}),
+		);
+	});
 
-		(useFees as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
-			amount: '250',
-			receiver: '0x123',
-		});
+	afterEach(() => {
+		server.resetHandlers();
 	});
 
-	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,
-		});
+	it('should fetch checkout options successfully', async () => {
+		const { result } = renderHook(() => useCheckoutOptions(defaultInput));
 
-		const { result } = renderHook(() => useCheckoutOptions(defaultProps), {
-			wrapper: createWrapper(),
+		await waitFor(() => {
+			expect(result.current.isSuccess).toBe(true);
 		});
 
-		expect(result.current.data).toBeUndefined();
+		expect(result.current.data).toEqual({
+			crypto: TransactionCrypto.all,
+			swap: [],
+			nftCheckout: [],
+			onRamp: [],
+		});
 	});
 
-	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',
-			},
+	it('should not fetch when wallet is not available', () => {
+		vi.mocked(useWallet).mockReturnValue({
+			wallet: null,
+			isLoading: false,
+			isError: false,
 		});
 
-		// Mock the marketplace client
-		const checkoutOptionsMarketplaceMock = vi.fn().mockResolvedValue({
-			options: {
-				swap: [],
-				nftCheckout: [],
-				onRamp: [],
-				crypto: ['ETH', 'USDC'],
-			},
-		});
+		const { result } = renderHook(() => useCheckoutOptions(defaultInput));
 
-		const marketplaceClientMock = {
-			checkoutOptionsMarketplace: checkoutOptionsMarketplaceMock,
-		};
+		expect(result.current.data).toBeUndefined();
+		expect(result.current.isLoading).toBe(false);
+	});
 
-		(
-			getMarketplaceClient as unknown as ReturnType<typeof vi.fn>
-		).mockReturnValue(marketplaceClientMock);
+	it('should include fees in the API request', async () => {
+		const mockFeeAmount = '200000000000000000';
+		vi.mocked(useFees).mockReturnValue({
+			amount: mockFeeAmount,
+			receiver: zeroAddress,
+		});
+
+		let capturedRequest:
+			| {
+					wallet: string;
+					orders: Array<{
+						contractAddress: string;
+						orderId: string;
+						marketplace: MarketplaceKind;
+					}>;
+					additionalFee: number;
+			  }
+			| undefined;
+
+		server.use(
+			http.post(
+				mockMarketplaceEndpoint('CheckoutOptionsMarketplace'),
+				async ({ request }) => {
+					capturedRequest = (await request.json()) as typeof capturedRequest;
+					return HttpResponse.json({
+						options: {
+							crypto: TransactionCrypto.all,
+							swap: [],
+							nftCheckout: [],
+							onRamp: [],
+						},
+					});
+				},
+			),
+		);
 
-		const { result } = renderHook(() => useCheckoutOptions(defaultProps), {
-			wrapper: createWrapper(),
-		});
+		const { result } = renderHook(() => useCheckoutOptions(defaultInput));
 
-		// Wait for the query to complete
-		await vi.waitFor(() => {
+		await 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'],
-		});
+		expect(capturedRequest?.additionalFee).toBe(Number(mockFeeAmount));
 	});
 
-	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',
-			},
-		});
+	it('should handle API errors gracefully', async () => {
+		server.use(
+			http.post(mockMarketplaceEndpoint('CheckoutOptionsMarketplace'), () => {
+				return HttpResponse.error();
+			}),
+		);
 
-		// Mock the marketplace client
-		const checkoutOptionsMarketplaceMock = vi.fn().mockResolvedValue({
-			options: {
-				swap: ['uniswap'],
-				nftCheckout: ['moonpay'],
-				onRamp: ['ramp'],
-				crypto: ['ETH'],
-			},
-		});
+		const { result } = renderHook(() => useCheckoutOptions(defaultInput));
 
-		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',
+		await waitFor(() => {
+			expect(result.current.isError).toBe(true);
 		});
 
-		renderHook(() => useCheckoutOptions(customProps), {
-			wrapper: createWrapper(),
+		expect(result.current.data).toBeUndefined();
+	});
+
+	it('should refetch when input parameters change', async () => {
+		const { result, rerender } = renderHook<
+			typeof defaultInput,
+			ReturnType<typeof useCheckoutOptions>
+		>((props) => useCheckoutOptions(props), {
+			initialProps: defaultInput,
+		} as RenderHookOptions<typeof defaultInput>);
+
+		await waitFor(() => {
+			expect(result.current.isSuccess).toBe(true);
 		});
 
-		// Wait for the query to be called
-		await vi.waitFor(() => {
-			expect(checkoutOptionsMarketplaceMock).toHaveBeenCalledTimes(1);
+		// Change input
+		rerender({
+			...defaultInput,
+			orderId: '456',
 		});
 
-		// 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
+		await waitFor(() => {
+			expect(result.current.isSuccess).toBe(true);
 		});
 
-		// Verify the marketplace client was initialized with correct chain ID
-		expect(getMarketplaceClient).toHaveBeenCalledWith(
-			customProps.chainId,
-			expect.objectContaining({
-				projectAccessKey: 'test-key',
-				projectId: 'test-id',
-			}),
-		);
+		// Verify that the query was refetched
+		expect(result.current.data).toEqual({
+			crypto: TransactionCrypto.all,
+			swap: [],
+			nftCheckout: [],
+			onRamp: [],
+		});
 	});
 
-	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',
-			},
+	it('should handle wallet address resolution failure', async () => {
+		const mockWalletWithFailure = createMockWallet({
+			address: vi.fn().mockRejectedValue(new Error('Failed to get address')),
 		});
 
-		// 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(),
+		vi.mocked(useWallet).mockReturnValue({
+			wallet: mockWalletWithFailure,
+			isLoading: false,
+			isError: false,
 		});
 
-		// Wait for the query to fail
-		await vi.waitFor(() => {
+		const { result } = renderHook(() => useCheckoutOptions(defaultInput));
+
+		await 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

@@ -1,29 +1,14 @@
-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';
+import { renderHook } from '../../../../../_internal/test-utils';
 
 // 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,
@@ -47,17 +32,15 @@ describe('useFees', () => {
 			data: {
 				collections: [
 					{
-						collectionAddress: '0x456',
+						address: '0x456',
 						chainId: '1',
-						marketplaceFeePercentage: '5.0',
+						feePercentage: '5.0',
 					},
 				],
 			},
 		});
 
-		const { result } = renderHook(() => useFees(defaultProps), {
-			wrapper: createWrapper(),
-		});
+		const { result } = renderHook(() => useFees(defaultProps));
 
 		// Default fee should be 2.5%, which is 250 in BPS (basis points)
 		expect(result.current).toEqual({
@@ -78,19 +61,16 @@ describe('useFees', () => {
 			data: {
 				collections: [
 					{
-						collectionAddress,
+						address: collectionAddress,
 						chainId: chainId.toString(),
-						marketplaceFeePercentage: collectionFee,
+						feePercentage: collectionFee,
 					},
 				],
 			},
 		});
 
-		const { result } = renderHook(
-			() => useFees({ chainId, collectionAddress }),
-			{
-				wrapper: createWrapper(),
-			},
+		const { result } = renderHook(() =>
+			useFees({ chainId, collectionAddress }),
 		);
 
 		// 5.0% fee should be 500 in BPS (basis points)
@@ -102,11 +82,8 @@ describe('useFees', () => {
 
 	it('should use Avalanche/Optimism fee recipient for those chains', () => {
 		// Test Avalanche chain
-		const { result: avalancheResult } = renderHook(
-			() => useFees({ ...defaultProps, chainId: avalanche.id }),
-			{
-				wrapper: createWrapper(),
-			},
+		const { result: avalancheResult } = renderHook(() =>
+			useFees({ ...defaultProps, chainId: avalanche.id }),
 		);
 
 		expect(avalancheResult.current.receiver).toBe(
@@ -114,11 +91,8 @@ describe('useFees', () => {
 		);
 
 		// Test Optimism chain
-		const { result: optimismResult } = renderHook(
-			() => useFees({ ...defaultProps, chainId: optimism.id }),
-			{
-				wrapper: createWrapper(),
-			},
+		const { result: optimismResult } = renderHook(() =>
+			useFees({ ...defaultProps, chainId: optimism.id }),
 		);
 
 		expect(optimismResult.current.receiver).toBe(
@@ -138,23 +112,19 @@ describe('useFees', () => {
 			data: {
 				collections: [
 					{
-						collectionAddress: collectionAddress.toLowerCase(),
+						address: collectionAddress.toLowerCase(),
 						chainId: chainId.toString(),
-						marketplaceFeePercentage: collectionFee,
+						feePercentage: collectionFee,
 					},
 				],
 			},
 		});
 
-		const { result } = renderHook(
-			() =>
-				useFees({
-					chainId,
-					collectionAddress: collectionAddress.toUpperCase(),
-				}),
-			{
-				wrapper: createWrapper(),
-			},
+		const { result } = renderHook(() =>
+			useFees({
+				chainId,
+				collectionAddress: collectionAddress.toUpperCase(),
+			}),
 		);
 
 		// 3.5% fee should be 350 in BPS (basis points)

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

@@ -5,7 +5,10 @@ import { useMarketplaceConfig } from '../../../../hooks';
 export const useFees = ({
 	chainId,
 	collectionAddress,
-}: { chainId: number; collectionAddress: string }) => {
+}: {
+	chainId: number;
+	collectionAddress: string;
+}) => {
 	const defaultFee = 2.5;
 	const defaultPlatformFeeRecipient =
 		'0x858dB1cbF6D09D447C96A11603189b49B2D1C219';
@@ -15,8 +18,7 @@ export const useFees = ({
 
 	const collection = marketplaceConfig?.collections.find(
 		(collection) =>
-			collection.collectionAddress.toLowerCase() ===
-				collectionAddress.toLowerCase() &&
+			collection.address.toLowerCase() === collectionAddress.toLowerCase() &&
 			chainId === Number(collection.chainId),
 	);
 
@@ -30,9 +32,7 @@ export const useFees = ({
 		(Number(percentage) * 10000) / 100;
 
 	return {
-		amount: percentageToBPS(
-			collection?.marketplaceFeePercentage || defaultFee,
-		).toString(),
+		amount: percentageToBPS(collection?.feePercentage || defaultFee).toString(),
 		receiver,
 	} satisfies AdditionalFee;
 };

package/src/react/ui/modals/BuyModal/modals/Modal1155.tsx

@@ -3,8 +3,8 @@ import { observer } from '@legendapp/state/react';
 import type { Hex } from 'viem';
 import { formatUnits, parseUnits } from 'viem';
 import { useCurrency } from '../../../../hooks';
-import QuantityInput from '../../_internal/components/quantityInput';
 import { ActionModal } from '../../_internal/components/actionModal';
+import QuantityInput from '../../_internal/components/quantityInput';
 import { buyModal$ } from '../store';
 import type { CheckoutModalProps } from './CheckoutModal';
 
@@ -28,7 +28,8 @@ export const ERC1155QuantityModal = observer(
 		if (
 			buyModal$.state.checkoutModalLoaded.get() &&
 			buyModal$.isOpen.get() &&
-			buyModal$.state.checkoutModalIsLoading.get()
+			buyModal$.state.checkoutModalIsLoading.get() &&
+			buyModal$.state.purchaseProcessing.get()
 		) {
 			return null;
 		}
@@ -44,6 +45,7 @@ export const ERC1155QuantityModal = observer(
 						label: 'Buy now',
 						onClick: () => {
 							buyModal$.state.checkoutModalIsLoading.set(true);
+							buyModal$.state.purchaseProcessing.set(true);
 
 							buy({
 								quantity: parseUnits(