@0xsequence/marketplace-sdk 0.0.0-20250513233135

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

@@ -0,0 +1,251 @@
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitForElementToBeRemoved,
+} from '@test';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import type { Order } from '../../../../_internal';
+import { MarketplaceKind, OrderSide, OrderStatus } from '../../../../_internal';
+import { ERC1155QuantityModal } from '../ERC1155QuantityModal';
+import { buyModalStore } from '../store';
+
+const testOrder: Order = {
+	chainId: 1,
+	orderId: '1',
+	collectionContractAddress: '0x123',
+	createdAt: '2023-01-01T00:00:00Z',
+	createdBy: '0x123',
+	feeBps: 250,
+	feeBreakdown: [],
+	marketplace: MarketplaceKind.sequence_marketplace_v2,
+	priceAmount: '1000000000000000000',
+	priceAmountFormatted: '1',
+	priceAmountNet: '975000000000000000',
+	side: OrderSide.listing,
+	status: OrderStatus.active,
+	originName: '',
+	priceAmountNetFormatted: '',
+	priceCurrencyAddress: '',
+	priceDecimals: 0,
+	priceUSD: 0,
+	priceUSDFormatted: '',
+	quantityInitial: '10',
+	quantityInitialFormatted: '10',
+	quantityRemaining: '10',
+	quantityRemainingFormatted: '10',
+	quantityAvailable: '10',
+	quantityAvailableFormatted: '10',
+	quantityDecimals: 0,
+	validFrom: '',
+	validUntil: '',
+	blockNumber: 0,
+	updatedAt: '',
+};
+
+describe('ERC1155QuantityModal', () => {
+	beforeEach(() => {
+		// Initialize the store before each test
+		buyModalStore.send({
+			type: 'open',
+			props: {
+				chainId: 1,
+				orderId: '1',
+				collectionAddress: '0x123' as `0x${string}`,
+				collectibleId: '1',
+				marketplace: MarketplaceKind.sequence_marketplace_v2,
+				marketplaceType: 'market',
+				quantityDecimals: 0,
+				quantityRemaining: '10',
+			},
+		});
+	});
+
+	afterEach(() => {
+		// Reset the store after each test
+		buyModalStore.send({ type: 'close' });
+	});
+
+	it('should render quantity modal with order details', async () => {
+		render(
+			<ERC1155QuantityModal
+				order={testOrder}
+				marketplaceType={'market'}
+				chainId={1}
+				quantityDecimals={0}
+				quantityRemaining="10"
+			/>,
+		);
+
+		// Check if the modal renders with the correct title
+		expect(screen.getByText('Select Quantity')).toBeInTheDocument();
+
+		// Wait for spinner to disappear if it exists
+		try {
+			await waitForElementToBeRemoved(() => screen.queryByTestId('spinner'));
+		} catch (error) {
+			// If no spinner or already gone, continue
+		}
+
+		// Check if the Buy now button exists
+		const buyButton = await screen.findByRole('button', { name: /buy now/i });
+		expect(buyButton).toBeInTheDocument();
+
+		// Capture the initial store state
+		const initialState = buyModalStore.getSnapshot();
+		expect(initialState.context.quantity).toBeUndefined();
+
+		// Check for Total Price section
+		await act(async () => {
+			expect(await screen.findByText('Total Price')).toBeInTheDocument();
+		});
+
+		// Click the Buy now button with default quantity "1"
+		await act(async () => {
+			fireEvent.click(buyButton);
+		});
+
+		// Ensure the store context was updated with the correct quantity
+		const updatedState = buyModalStore.getSnapshot();
+		expect(updatedState.context.quantity).toBe(1);
+	});
+
+	it('should update quantity when user changes the input value', async () => {
+		render(
+			<ERC1155QuantityModal
+				order={testOrder}
+				marketplaceType={'market'}
+				chainId={1}
+				quantityDecimals={0}
+				quantityRemaining="10"
+			/>,
+		);
+
+		// Wait for spinner to disappear if it exists
+		try {
+			await waitForElementToBeRemoved(() => screen.queryByTestId('spinner'));
+		} catch (error) {
+			// If no spinner or already gone, continue
+		}
+
+		// Find the quantity input using role and name
+		const quantityInput = await screen.findByRole('textbox', {
+			name: /enter quantity/i,
+		});
+
+		// Capture initial store state
+		const initialState = buyModalStore.getSnapshot();
+		expect(initialState.context.quantity).toBeUndefined();
+
+		// Change quantity to 5
+		await act(async () => {
+			fireEvent.change(quantityInput, { target: { value: '5' } });
+		});
+
+		// Click Buy now button
+		const buyButton = await screen.findByRole('button', { name: /buy now/i });
+		await act(async () => {
+			fireEvent.click(buyButton);
+		});
+
+		// Check that the store is updated with quantity = 5
+		const updatedState = buyModalStore.getSnapshot();
+		expect(updatedState.context.quantity).toBe(5);
+	});
+
+	it('should validate input quantity against available quantity', async () => {
+		render(
+			<ERC1155QuantityModal
+				order={testOrder}
+				marketplaceType={'market'}
+				chainId={1}
+				quantityDecimals={0}
+				quantityRemaining="10"
+			/>,
+		);
+
+		// Wait for spinner to disappear if it exists
+		try {
+			await waitForElementToBeRemoved(() => screen.queryByTestId('spinner'));
+		} catch (error) {
+			// If no spinner or already gone, continue
+		}
+
+		// Find the quantity input using role and name
+		const quantityInput = await screen.findByRole('textbox', {
+			name: /enter quantity/i,
+		});
+
+		const invalidQuantity = '';
+		await act(async () => {
+			fireEvent.change(quantityInput, { target: { value: invalidQuantity } });
+		});
+
+		const buyButton = await screen.findByRole('button', { name: /buy now/i });
+		// The button should be disabled due to invalid quantity
+		expect(buyButton).toBeDisabled();
+
+		// Set valid quantity
+		await act(async () => {
+			fireEvent.change(quantityInput, { target: { value: '10' } });
+		});
+
+		// Button should be enabled
+		expect(buyButton).not.toBeDisabled();
+
+		// Click the button and check store update
+		await act(async () => {
+			fireEvent.click(buyButton);
+		});
+
+		const updatedState = buyModalStore.getSnapshot();
+		expect(updatedState.context.quantity).toBe(10);
+	});
+
+	it('should display total price based on selected quantity', async () => {
+		render(
+			<ERC1155QuantityModal
+				order={testOrder}
+				marketplaceType={'market'}
+				chainId={1}
+				quantityDecimals={0}
+				quantityRemaining="10"
+			/>,
+		);
+
+		// Wait for spinner to disappear if it exists
+		try {
+			await waitForElementToBeRemoved(() => screen.queryByTestId('spinner'));
+		} catch (error) {
+			// If no spinner or already gone, continue
+		}
+
+		// Check that Total Price section is displayed (using findByText for async)
+		await act(async () => {
+			expect(await screen.findByText('Total Price')).toBeInTheDocument();
+		});
+
+		// Initially, when no currency data is loaded, it should show loading
+		await act(async () => {
+			expect(await screen.findByText('Loading...')).toBeInTheDocument();
+		});
+	});
+
+	it('should throw error when required props are missing', () => {
+		// Create a wrapper to catch the error
+		const renderWithMissingProps = () => {
+			render(
+				<ERC1155QuantityModal
+					order={testOrder}
+					marketplaceType={'market'}
+					chainId={1}
+					// Missing quantityDecimals and quantityRemaining
+				/>,
+			);
+		};
+
+		// Expect the render to throw an error
+		expect(renderWithMissingProps).toThrow('quantityDecimals is required');
+	});
+});

package/src/react/ui/modals/BuyModal/__tests__/store.test.ts

@@ -0,0 +1,105 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { MarketplaceKind } from '../../../../_internal';
+import { type MarketplaceBuyModalProps, buyModalStore } from '../store';
+
+describe('BuyModal Store', () => {
+	beforeEach(() => {
+		buyModalStore.send({ type: 'close' });
+	});
+
+	it('should initialize with correct default state', () => {
+		const state = buyModalStore.getSnapshot();
+		expect(state.context.isOpen).toBe(false);
+		expect(state.context.props).toBeDefined();
+		expect(state.context.quantity).toBeUndefined();
+	});
+
+	it('should handle open action correctly', () => {
+		const mockProps: MarketplaceBuyModalProps = {
+			orderId: '1',
+			chainId: 1,
+			collectionAddress: '0x123' as `0x${string}`,
+			collectibleId: '1',
+			marketplace: MarketplaceKind.sequence_marketplace_v2,
+			marketplaceType: 'market',
+			quantityDecimals: 0,
+			quantityRemaining: '10',
+		};
+
+		buyModalStore.send({
+			type: 'open',
+			props: mockProps,
+			onSuccess: () => {},
+			onError: () => {},
+		});
+
+		const state = buyModalStore.getSnapshot();
+		expect(state.context.isOpen).toBe(true);
+		expect(state.context.props).toEqual(mockProps);
+	});
+
+	it('should handle close action correctly', () => {
+		const mockProps: MarketplaceBuyModalProps = {
+			orderId: '1',
+			chainId: 1,
+			collectionAddress: '0x123' as `0x${string}`,
+			collectibleId: '1',
+			marketplace: MarketplaceKind.sequence_marketplace_v2,
+			marketplaceType: 'market',
+			quantityDecimals: 0,
+			quantityRemaining: '10',
+		};
+
+		buyModalStore.send({
+			type: 'open',
+			props: mockProps,
+			onSuccess: () => {},
+			onError: () => {},
+		});
+
+		const openState = buyModalStore.getSnapshot();
+		expect(openState.context.isOpen).toBe(true);
+
+		buyModalStore.send({ type: 'close' });
+
+		const closedState = buyModalStore.getSnapshot();
+		expect(closedState.context.isOpen).toBe(false);
+	});
+
+	it('should update loading states correctly', () => {
+		const mockProps: MarketplaceBuyModalProps = {
+			orderId: '1',
+			chainId: 1,
+			collectionAddress: '0x123' as `0x${string}`,
+			collectibleId: '1',
+			marketplace: MarketplaceKind.sequence_marketplace_v2,
+			marketplaceType: 'market',
+			quantityDecimals: 0,
+			quantityRemaining: '10',
+		};
+
+		buyModalStore.send({
+			type: 'open',
+			props: mockProps,
+			onSuccess: () => {},
+			onError: () => {},
+		});
+
+		const state1 = buyModalStore.getSnapshot();
+		expect(state1.context.quantity).toBeUndefined();
+
+		buyModalStore.send({
+			type: 'setQuantity',
+			quantity: 5,
+		});
+
+		const state2 = buyModalStore.getSnapshot();
+		expect(state2.context.quantity).toBe(5);
+
+		// Test resetting by closing
+		buyModalStore.send({ type: 'close' });
+
+		const state3 = buyModalStore.getSnapshot();
+		expect(state3.context.quantity).toBeUndefined();
+	});
+});

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

@@ -0,0 +1,127 @@
+import { renderHook, server, waitFor } from '@test';
+import { http, HttpResponse } from 'msw';
+import { zeroAddress } from 'viem';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { createMockWallet } from '../../../../../../../test/mocks/wallet';
+import { MarketplaceKind } from '../../../../../_internal';
+import { mockMarketplaceEndpoint } from '../../../../../_internal/api/__mocks__/marketplace.msw';
+import { TransactionCrypto } from '../../../../../_internal/api/marketplace.gen';
+import { useWallet } from '../../../../../_internal/wallet/useWallet';
+import { useCheckoutOptions } from '../useCheckoutOptions';
+import { useFees } from '../useFees';
+
+// Mock dependencies
+vi.mock('../../../../../_internal/wallet/useWallet');
+vi.mock('../useFees');
+
+// Create mock wallet instance
+const mockWallet = createMockWallet({
+	address: vi.fn().mockResolvedValue(zeroAddress),
+});
+
+describe('useCheckoutOptions', () => {
+	const defaultInput = {
+		chainId: 1,
+		collectionAddress: zeroAddress,
+		orderId: '123',
+		marketplace: MarketplaceKind.sequence_marketplace_v2,
+	};
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+
+		// 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,
+		});
+	});
+
+	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(defaultInput));
+
+		await waitFor(() => {
+			expect(result.current.isSuccess).toBe(true);
+		});
+
+		expect(capturedRequest?.additionalFee).toBe(Number(mockFeeAmount));
+	});
+
+	it('should handle API errors gracefully', async () => {
+		server.use(
+			http.post(mockMarketplaceEndpoint('CheckoutOptionsMarketplace'), () => {
+				return HttpResponse.error();
+			}),
+		);
+
+		const { result } = renderHook(() => useCheckoutOptions(defaultInput));
+
+		await waitFor(() => {
+			expect(result.current.isError).toBe(true);
+		});
+
+		expect(result.current.data).toBeUndefined();
+	});
+
+	it('should handle wallet address resolution failure', async () => {
+		const mockWalletWithFailure = createMockWallet({
+			address: vi.fn().mockRejectedValue(new Error('Failed to get address')),
+		});
+
+		vi.mocked(useWallet).mockReturnValue({
+			wallet: mockWalletWithFailure,
+			isLoading: false,
+			isError: false,
+		});
+
+		const { result } = renderHook(() => useCheckoutOptions(defaultInput));
+
+		await waitFor(() => {
+			expect(result.current.isError).toBe(true);
+		});
+
+		expect(result.current.error).toBeDefined();
+	});
+});

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

@@ -0,0 +1,136 @@
+import { renderHook } from '@test';
+import { avalanche, optimism } from 'viem/chains';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useMarketplaceConfig } from '../../../../../hooks';
+import { useFees } from '../useFees';
+
+// Mock dependencies
+vi.mock('../../../../../hooks', () => ({
+	useMarketplaceConfig: vi.fn(),
+}));
+
+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: [
+					{
+						address: '0x456',
+						chainId: 1,
+						feePercentage: '5.0',
+					},
+				],
+			},
+		});
+
+		const { result } = renderHook(() => useFees(defaultProps));
+
+		// 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: [
+					{
+						address: collectionAddress,
+						chainId: chainId.toString(),
+						feePercentage: collectionFee,
+					},
+				],
+			},
+		});
+
+		const { result } = renderHook(() =>
+			useFees({ chainId, collectionAddress }),
+		);
+
+		// 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 }),
+		);
+
+		expect(avalancheResult.current.receiver).toBe(
+			avalancheAndOptimismPlatformFeeRecipient,
+		);
+
+		// Test Optimism chain
+		const { result: optimismResult } = renderHook(() =>
+			useFees({ ...defaultProps, chainId: optimism.id }),
+		);
+
+		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: [
+					{
+						address: collectionAddress.toLowerCase(),
+						chainId: chainId.toString(),
+						feePercentage: collectionFee,
+					},
+				],
+			},
+		});
+
+		const { result } = renderHook(() =>
+			useFees({
+				chainId,
+				collectionAddress: collectionAddress.toUpperCase(),
+			}),
+		);
+
+		// 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/useCheckoutOptions.ts

@@ -0,0 +1,87 @@
+import { skipToken, useQuery } from '@tanstack/react-query';
+import type { Hex } from 'viem';
+import {
+	type MarketplaceKind,
+	getMarketplaceClient,
+} from '../../../../_internal';
+import { useWallet } from '../../../../_internal/wallet/useWallet';
+import { useConfig } from '../../../../hooks';
+import { useFees } from './useFees';
+
+export type CheckoutOptionsParams = {
+	chainId: number;
+	collectionAddress: Hex;
+	orderId: string;
+	marketplace: MarketplaceKind;
+};
+
+export const useCheckoutOptions = (
+	input: CheckoutOptionsParams | typeof skipToken,
+) => {
+	const config = useConfig();
+	const { wallet } = useWallet();
+
+	// If input is skipToken, we don't want to calculate fees
+	const fees = useFees(
+		input !== skipToken
+			? {
+					chainId: input.chainId,
+					collectionAddress: input.collectionAddress,
+				}
+			: skipToken,
+	);
+
+	return useQuery({
+		queryKey:
+			input !== skipToken
+				? [
+						'checkoutOptions',
+						input.chainId,
+						input.collectionAddress,
+						input.orderId,
+						input.marketplace,
+					]
+				: ['checkoutOptions', 'skip'],
+		queryFn:
+			wallet && input !== skipToken
+				? async () => {
+						const marketplaceClient = getMarketplaceClient(
+							input.chainId,
+							config,
+						);
+						const response = await marketplaceClient.checkoutOptionsMarketplace(
+							{
+								wallet: await wallet.address(),
+								orders: [
+									{
+										contractAddress: input.collectionAddress,
+										orderId: input.orderId,
+										marketplace: input.marketplace,
+									},
+								],
+								additionalFee: Number(fees.amount),
+							},
+						);
+
+						// Get order data
+						const orderResponse = await marketplaceClient.getOrders({
+							input: [
+								{
+									contractAddress: input.collectionAddress,
+									orderId: input.orderId,
+									marketplace: input.marketplace,
+								},
+							],
+						});
+
+						const order = orderResponse.orders[0];
+
+						return {
+							...response.options,
+							order,
+						};
+					}
+				: skipToken,
+		enabled: !!wallet && input !== skipToken,
+	});
+};