@0xsequence/marketplace-sdk 0.5.1 → 0.5.3

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

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom/vitest';
 import {
 	render,
 	screen,
@@ -8,34 +7,96 @@ import {
 	act,
 	cleanup,
 } from '../../../../../_internal/test-utils';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import {
+	describe,
+	it,
+	expect,
+	vi,
+	beforeEach,
+	afterEach,
+	type Mock,
+} from 'vitest';
 import { ERC1155QuantityModal } from '../Modal1155';
 import { buyModal$ } from '../../store';
-import { MarketplaceKind } from '../../../../../_internal';
 import type { Order, TokenMetadata } from '../../../../../_internal';
+import { createMockWallet } from '../../../../../_internal/test/mocks/wallet';
+import {
+	mockCurrencies,
+	mockOrder as baseMockOrder,
+	mockTokenMetadata,
+} from '../../../../../_internal/api/__mocks__/marketplace.msw';
+
+// Mock hooks
+vi.mock('../../../../../hooks', () => ({
+	useCurrency: () => ({
+		data: mockCurrencies[0],
+		isLoading: false,
+	}),
+	useConfig: () => ({
+		chainId: 1,
+		isTestnet: false,
+	}),
+}));
+
+const mockWallet = createMockWallet();
+
+const getChainIdMock = mockWallet.getChainId as Mock<
+	typeof mockWallet.getChainId
+>;
+const switchChainMock = mockWallet.switchChain as Mock<
+	typeof mockWallet.switchChain
+>;
+
+vi.mock('../../../../../_internal/wallet/useWallet', () => ({
+	useWallet: () => ({
+		wallet: mockWallet,
+	}),
+}));
+
+// Mock switch chain modal hook
+vi.mock('../../_internal/components/switchChainModal', () => ({
+	useSwitchChainModal: () => ({
+		show: vi.fn(),
+	}),
+}));
+
+// Mock getProviderEl and MarketplaceKind
+vi.mock('../../../../../_internal', () => {
+	const actual = vi.importActual('../../../../../_internal');
+	return {
+		...actual,
+		getProviderEl: () => document.body,
+		MarketplaceKind: {
+			unknown: 'unknown',
+			sequence_marketplace_v1: 'sequence_marketplace_v1',
+			sequence_marketplace_v2: 'sequence_marketplace_v2',
+			blur: 'blur',
+			zerox: 'zerox',
+			opensea: 'opensea',
+			looks_rare: 'looks_rare',
+			x2y2: 'x2y2',
+			alienswap: 'alienswap',
+			payment_processor: 'payment_processor',
+			mintify: 'mintify',
+		},
+	};
+});
 
 describe('ERC1155QuantityModal', () => {
-	const mockOrder = {
-		orderId: '1',
+	// Customize the mock order for ERC1155 testing with specific price for predictable calculations
+	const mockOrder: Order = {
+		...baseMockOrder,
 		priceAmount: '1000000000000000000', // 1 ETH in wei
-		priceCurrencyAddress: '0x0',
+		priceAmountFormatted: '1',
 		quantityRemaining: '10',
+		quantityRemainingFormatted: '10',
+		quantityAvailable: '10',
+		quantityAvailableFormatted: '10',
 		quantityDecimals: 0,
-		chainId: 1,
-		marketplace: MarketplaceKind.sequence_marketplace_v2,
-		createdAt: new Date().toISOString(),
-		quantityAvailableFormatted: '1',
-	} as Order;
-
-	const mockCollectable: TokenMetadata = {
-		decimals: 0,
-		tokenId: '1',
-		name: 'Test Token',
-		description: 'Test Description',
-		image: 'https://example.com/image.png',
-		attributes: [],
 	};
 
+	const mockCollectable: TokenMetadata = mockTokenMetadata;
+
 	const mockBuy = vi.fn();
 
 	beforeEach(() => {
@@ -46,7 +107,11 @@ describe('ERC1155QuantityModal', () => {
 		buyModal$.state.checkoutModalLoaded.set(false);
 		buyModal$.state.checkoutModalIsLoading.set(false);
 		buyModal$.state.invalidQuantity.set(false);
-		buyModal$.state.quantity.set('1');
+		buyModal$.state.quantity.set('10'); // Match the initial quantity with the mock order
+
+		// Reset mock wallet calls
+		getChainIdMock.mockClear();
+		switchChainMock.mockClear();
 	});
 
 	afterEach(() => {
@@ -84,28 +149,29 @@ describe('ERC1155QuantityModal', () => {
 			name: /enter quantity/i,
 		});
 		expect(quantityInput).toBeInTheDocument();
-		expect(quantityInput).toHaveValue('1');
+		expect(quantityInput).toHaveValue('10'); // Match the initial quantity
+
+		// Wait for price to be displayed
+		await waitFor(() => {
+			const priceLabels = screen.getAllByText('Total Price');
+			const priceContainer = priceLabels[0].parentElement;
+			if (!priceContainer) throw new Error('Price container not found');
 
-		// Verify total price calculation (1 ETH)
-		const priceLabels = screen.getAllByText('Total Price');
-		const priceContainer = priceLabels[0].parentElement;
-		if (!priceContainer) throw new Error('Price container not found');
-		expect(within(priceContainer).getByText('1')).toBeInTheDocument();
-		expect(within(priceContainer).getByText('ETH')).toBeInTheDocument();
+			// Check for the price without decimal
+			const priceElement = within(priceContainer).getByText('10');
+			expect(priceElement).toBeInTheDocument();
+			expect(within(priceContainer).getByText('ETH')).toBeInTheDocument();
+		});
 
 		// Verify buy button
 		const buyButton = screen.getByRole('button', { name: /buy now/i });
 		expect(buyButton).toBeInTheDocument();
 		expect(buyButton).not.toBeDisabled();
 
-		// Verify token image
-		const tokenImage = screen.getByRole('img', { name: '' });
-		expect(tokenImage).toBeInTheDocument();
-		expect(tokenImage).toHaveAttribute('src', 'https://example.com/eth.png');
-
-		// Ensure loading state is false and button is enabled before clicking
-		buyModal$.state.checkoutModalIsLoading.set(false);
-		buyModal$.state.invalidQuantity.set(false);
+		// Verify currency image (not NFT image)
+		const currencyImage = screen.getByRole('img', { name: '' });
+		expect(currencyImage).toBeInTheDocument();
+		expect(currencyImage).toHaveAttribute('src', mockCurrencies[0].imageUrl);
 	});
 
 	it('should update total price when quantity changes', async () => {
@@ -137,13 +203,15 @@ describe('ERC1155QuantityModal', () => {
 			fireEvent.change(quantityInput, { target: { value: '2' } });
 		});
 
-		// Verify total price updates to 2 ETH
-		const priceLabels = screen.getAllByText('Total Price');
-		const priceContainer = priceLabels[0].parentElement;
-		if (!priceContainer) throw new Error('Price container not found');
-
+		// Wait for updated price to be displayed
 		await waitFor(() => {
-			expect(within(priceContainer).getByText('2')).toBeInTheDocument();
+			const priceLabels = screen.getAllByText('Total Price');
+			const priceContainer = priceLabels[0].parentElement;
+			if (!priceContainer) throw new Error('Price container not found');
+
+			// Check for the price without decimal
+			const priceElement = within(priceContainer).getByText('2');
+			expect(priceElement).toBeInTheDocument();
 		});
 	});
 
@@ -213,13 +281,15 @@ describe('ERC1155QuantityModal', () => {
 			expect(screen.getAllByText('Total Price')[0]).toBeInTheDocument();
 		});
 
-		// Verify initial total price (1 ETH)
-		const priceLabels = screen.getAllByText('Total Price');
-		const priceContainer = priceLabels[0].parentElement;
-		if (!priceContainer) throw new Error('Price container not found');
-
+		// Wait for initial price
 		await waitFor(() => {
-			expect(within(priceContainer).getByText('1')).toBeInTheDocument();
+			const priceLabels = screen.getAllByText('Total Price');
+			const priceContainer = priceLabels[0].parentElement;
+			if (!priceContainer) throw new Error('Price container not found');
+
+			// Check for the price without decimal
+			const priceElement = within(priceContainer).getByText('10');
+			expect(priceElement).toBeInTheDocument();
 			expect(within(priceContainer).getByText('ETH')).toBeInTheDocument();
 		});
 
@@ -231,13 +301,52 @@ describe('ERC1155QuantityModal', () => {
 			fireEvent.change(quantityInput, { target: { value: '3' } });
 		});
 
-		// Verify total price updates to 3 ETH
+		// Wait for updated price
 		await waitFor(() => {
-			expect(within(priceContainer).getByText('3')).toBeInTheDocument();
+			const priceLabels = screen.getAllByText('Total Price');
+			const priceContainer = priceLabels[0].parentElement;
+			if (!priceContainer) throw new Error('Price container not found');
+
+			// Check for the price without decimal
+			const priceElement = within(priceContainer).getByText('3');
+			expect(priceElement).toBeInTheDocument();
 		});
+	});
+
+	it('should handle chain mismatch correctly', async () => {
+		// Mock wallet to return a different chain ID
+		getChainIdMock.mockResolvedValueOnce(2); // Different from order.chainId (1)
 
-		// Verify modal is in a valid state
-		expect(buyModal$.state.checkoutModalIsLoading.get()).toBe(false);
-		expect(buyModal$.state.invalidQuantity.get()).toBe(false);
+		buyModal$.open({
+			order: mockOrder,
+			callbacks: {},
+			chainId: '1',
+			collectionAddress: '0x123',
+			tokenId: '1',
+		});
+
+		render(
+			<ERC1155QuantityModal
+				buy={mockBuy}
+				collectable={mockCollectable}
+				order={mockOrder}
+				chainId="1"
+				collectionAddress="0x123"
+				collectibleId="1"
+			/>,
+		);
+
+		const buyButton = screen.getByRole('button', { name: /buy now/i });
+
+		// Click buy button
+		fireEvent.click(buyButton);
+
+		// Verify chain switch was attempted
+		await waitFor(() => {
+			expect(getChainIdMock).toHaveBeenCalled();
+		});
+
+		// Verify buy function was not called
+		expect(mockBuy).not.toHaveBeenCalled();
 	});
 });

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

@@ -9,6 +9,7 @@ const buyState = {
 	invalidQuantity: false,
 	checkoutModalIsLoading: false,
 	checkoutModalLoaded: false,
+	purchaseProcessing: false,
 } as const;
 
 export interface BuyModalState {
@@ -26,9 +27,11 @@ export interface BuyModalState {
 		invalidQuantity: boolean;
 		checkoutModalIsLoading: boolean;
 		checkoutModalLoaded: boolean;
+		purchaseProcessing: boolean;
 	};
 	setCheckoutModalIsLoading: (isLoading: boolean) => void;
 	setCheckoutModalLoaded: (isLoaded: boolean) => void;
+	setPurchaseProcessing: (isProcessing: boolean) => void;
 	callbacks?: ModalCallbacks;
 }
 
@@ -48,6 +51,7 @@ export const initialState: BuyModalState = {
 			invalidQuantity: false,
 			checkoutModalIsLoading: false,
 			checkoutModalLoaded: false,
+			purchaseProcessing: false,
 		});
 		buyModal$.callbacks.set(callbacks || defaultCallbacks);
 		buyModal$.isOpen.set(true);
@@ -64,6 +68,9 @@ export const initialState: BuyModalState = {
 	setCheckoutModalLoaded: (isLoaded: boolean) => {
 		buyModal$.state.checkoutModalLoaded.set(isLoaded);
 	},
+	setPurchaseProcessing: (isProcessing: boolean) => {
+		buyModal$.state.purchaseProcessing.set(isProcessing);
+	},
 	callbacks: undefined,
 };
 

package/src/react/ui/modals/CreateListingModal/Modal.tsx

@@ -8,7 +8,6 @@ import {
 	useCollectible,
 	useCollection,
 	useCurrencies,
-	useCurrencyOptions,
 } from '../../../hooks';
 import {
 	ActionModal,
@@ -51,14 +50,13 @@ const Modal = observer(() => {
 		collectionAddress,
 		collectibleId,
 	});
-	const currencyOptions = useCurrencyOptions({ collectionAddress });
 	const {
 		data: currencies,
 		isLoading: currenciesLoading,
 		isError: currenciesIsError,
 	} = useCurrencies({
 		chainId,
-		currencyOptions,
+		collectionAddress,
 		includeNativeCurrency: true,
 	});
 	const {

package/src/react/ui/modals/CreateListingModal/__tests__/Modal.test.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom/vitest';
 import {
 	render,
 	screen,
@@ -9,104 +8,40 @@ import {
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { CreateListingModal } from '../Modal';
 import { createListingModal$ } from '../store';
-import {
-	useCollectible,
-	useCollection,
-	useBalanceOfCollectible,
-	useCurrencies,
-	useCurrencyOptions,
-} from '../../../../hooks';
-import { useCreateListing } from '../hooks/useCreateListing';
-import { useWallet } from '../../../../_internal/wallet/useWallet';
-
-// Mock the hooks
-vi.mock('../../../../hooks', () => ({
-	useCollectible: vi.fn(),
-	useCollection: vi.fn(),
-	useBalanceOfCollectible: vi.fn(),
-	useCurrencies: vi.fn().mockReturnValue({
-		data: [],
-		isLoading: false,
-		isError: false,
-	}),
-	useCurrencyOptions: vi.fn().mockReturnValue({
-		data: ['0x123'],
-		isLoading: false,
-		isError: false,
-	}),
-	useMarketplaceConfig: vi.fn().mockReturnValue({
-		data: {
-			collections: [
-				{
-					collectionAddress: '0x123',
-					marketplaceFeePercentage: 2.5,
-				},
-			],
-		},
-		isLoading: false,
-		isError: false,
-	}),
-	useRoyaltyPercentage: vi.fn().mockReturnValue({
-		data: 0n,
-		isLoading: false,
-		isError: false,
-	}),
-	useLowestListing: vi.fn().mockReturnValue({
-		data: null,
-		isLoading: false,
-		isError: false,
-	}),
-}));
-
-vi.mock('../../../../_internal/wallet/useWallet', () => ({
-	useWallet: vi.fn(),
-}));
-
-vi.mock('../hooks/useCreateListing', () => ({
-	useCreateListing: vi.fn(),
-}));
+import * as hooks from '../../../../hooks';
+import { zeroAddress } from 'viem';
+import { useWaasFeeOptions } from '@0xsequence/kit';
+
+vi.mock(import('../../../../hooks'), async (importOriginal) => {
+	const actual = await importOriginal();
+	return {
+		...actual,
+		useCollectible: vi.fn(actual.useCollectible),
+		useCollection: vi.fn(actual.useCollection),
+		useCurrencies: vi.fn(actual.useCurrencies),
+		useMarketplaceConfig: vi.fn(actual.useMarketplaceConfig),
+		useLowestListing: vi.fn(actual.useLowestListing),
+	};
+});
 
 vi.mock('@0xsequence/kit', () => ({
-	useWaasFeeOptions: vi.fn().mockReturnValue([false, vi.fn()]),
+	useWaasFeeOptions: vi.fn(),
 }));
 
+const defaultArgs = {
+	collectionAddress: zeroAddress,
+	chainId: '1',
+	collectibleId: '1',
+};
+
 describe('CreateListingModal', () => {
 	beforeEach(() => {
 		cleanup();
 		// Reset all mocks
 		vi.clearAllMocks();
-
-		// Setup default mock values
-		(useWallet as any).mockReturnValue({
-			wallet: {
-				address: () => Promise.resolve('0x123'),
-			},
-			isLoading: false,
-			isError: false,
-		});
-
-		(useCollectible as any).mockReturnValue({
-			data: { decimals: 18, name: 'Test NFT' },
-			isLoading: false,
-			isError: false,
-		});
-
-		(useCollection as any).mockReturnValue({
-			data: { type: 'ERC721', name: 'Test Collection' },
-			isLoading: false,
-			isError: false,
-		});
-
-		(useBalanceOfCollectible as any).mockReturnValue({
-			data: { balance: '1' },
-		});
-
-		(useCreateListing as any).mockReturnValue({
-			isLoading: false,
-			executeApproval: vi.fn(),
-			createListing: vi.fn(),
-			tokenApprovalIsLoading: false,
-		});
+		vi.resetAllMocks();
+		// @ts-expect-error - Mock this differently
+		vi.mocked(useWaasFeeOptions).mockReturnValue([]);
 	});
 
 	it('should not render when modal is closed', () => {
@@ -114,50 +49,42 @@ describe('CreateListingModal', () => {
 		expect(screen.queryByText('List item for sale')).toBeNull();
 	});
 
-	it('should render main form when data is loaded', () => {
-		// Mock successful states for all required hooks
-		(useCollectible as any).mockReturnValue({
-			data: { decimals: 18, name: 'Test NFT' },
-			isLoading: false,
-			isError: false,
-		});
-		(useCollection as any).mockReturnValue({
-			data: { type: 'ERC721', name: 'Test Collection' },
-			isLoading: false,
-			isError: false,
-		});
-		(useCurrencyOptions as any).mockReturnValue({
-			data: ['0x123'],
-			isLoading: false,
-			isError: false,
-		});
-		(useCurrencies as any).mockReturnValue({
-			data: [{ address: '0x123', symbol: 'TEST', decimals: 18 }],
+	it('should show loading modal when data is being fetched', () => {
+		createListingModal$.open(defaultArgs);
+
+		render(<CreateListingModal />);
+
+		expect(screen.getByTestId('loading-modal')).toBeInTheDocument();
+	});
+
+	it('should show error modal when there is an error fetching data', async () => {
+		// @ts-expect-error - TODO: Add a common mock object with the correct shape
+		vi.mocked(hooks.useCollection).mockReturnValue({
+			data: undefined,
 			isLoading: false,
-			isError: false,
+			isError: true,
 		});
 
-		createListingModal$.open({
-			collectionAddress: '0x123',
-			chainId: '1',
-			collectibleId: '1',
-		});
+		createListingModal$.open(defaultArgs);
+
+		render(<CreateListingModal />);
+
+		expect(
+			await screen.findByText('Error loading item details'),
+		).toBeInTheDocument();
+	});
 
+	it('should render main form when data is loaded', async () => {
+		createListingModal$.open(defaultArgs);
 		render(<CreateListingModal />);
 
-		// Check for the modal title using a more specific selector
-		expect(screen.getByRole('dialog')).toBeInTheDocument();
 		// Check for the collection name in the token preview
-		expect(screen.getByText('Test Collection')).toBeInTheDocument();
+		expect(await screen.findByText('Mock Collection')).toBeInTheDocument();
 	});
 
 	it('should reset store values when modal is closed and reopened', () => {
 		// Open modal first time
-		createListingModal$.open({
-			collectionAddress: '0x123',
-			chainId: '1',
-			collectibleId: '1',
-		});
+		createListingModal$.open(defaultArgs);
 
 		// Set some values in the store
 		createListingModal$.listingPrice.amountRaw.set('1000000000000000000');
@@ -183,33 +110,7 @@ describe('CreateListingModal', () => {
 	});
 
 	it('should update state based on price input', async () => {
-		// Mock successful states for all required hooks
-		(useCollectible as any).mockReturnValue({
-			data: { decimals: 18, name: 'Test NFT' },
-			isLoading: false,
-			isError: false,
-		});
-		(useCollection as any).mockReturnValue({
-			data: { type: 'ERC721', name: 'Test Collection' },
-			isLoading: false,
-			isError: false,
-		});
-		(useCurrencyOptions as any).mockReturnValue({
-			data: ['0x123'],
-			isLoading: false,
-			isError: false,
-		});
-		(useCurrencies as any).mockReturnValue({
-			data: [{ address: '0x123', symbol: 'TEST', decimals: 18 }],
-			isLoading: false,
-			isError: false,
-		});
-
-		createListingModal$.open({
-			collectionAddress: '0x123',
-			chainId: '1',
-			collectibleId: '1',
-		});
+		createListingModal$.open(defaultArgs);
 
 		render(<CreateListingModal />);
 
@@ -217,7 +118,9 @@ describe('CreateListingModal', () => {
 		expect(createListingModal$.listingPrice.amountRaw.get()).toBe('0');
 
 		// Find and interact with price input using id
-		const priceInput = screen.getByRole('textbox', { name: /enter price/i });
+		const priceInput = await screen.findByRole('textbox', {
+			name: /enter price/i,
+		});
 		expect(priceInput).toBeInTheDocument();
 
 		fireEvent.change(priceInput, { target: { value: '1.5' } });
@@ -228,91 +131,20 @@ describe('CreateListingModal', () => {
 		});
 	});
 
-	it('should show loading modal when data is being fetched', () => {
-		// Mock loading states for all required hooks
-		(useCollectible as any).mockReturnValue({
-			isLoading: true,
-			isError: false,
-		});
-		(useCollection as any).mockReturnValue({
-			isLoading: true,
-			isError: false,
-		});
-		(useCurrencyOptions as any).mockReturnValue({
-			isLoading: true,
-			isError: false,
-		});
-
-		createListingModal$.open({
-			collectionAddress: '0x123',
-			chainId: '1',
-			collectibleId: '1',
-		});
-
-		render(<CreateListingModal />);
-
-		expect(screen.getByTestId('loading-modal')).toBeInTheDocument();
-	});
-
-	it('should show error modal when there is an error fetching data', () => {
-		// Mock error states for required hooks
-		(useCollectible as any).mockReturnValue({
-			isLoading: false,
-			isError: true,
-		});
-		(useCollection as any).mockReturnValue({
-			isLoading: false,
-			isError: false,
-		});
-		(useCurrencyOptions as any).mockReturnValue({
-			isLoading: false,
-			isError: false,
-		});
-
-		createListingModal$.open({
-			collectionAddress: '0x123',
-			chainId: '1',
-			collectibleId: '1',
-		});
-
-		render(<CreateListingModal />);
-
-		expect(screen.getByText('Error loading item details')).toBeInTheDocument();
-	});
-
-	it('should show no ERC20 configured modal when currencies array is empty', () => {
-		// Reset all hooks to success state
-		(useCollectible as any).mockReturnValue({
-			data: { decimals: 18, name: 'Test NFT' },
-			isLoading: false,
-			isError: false,
-		});
-		(useCollection as any).mockReturnValue({
-			data: { type: 'ERC721', name: 'Test Collection' },
-			isLoading: false,
-			isError: false,
-		});
-		(useCurrencyOptions as any).mockReturnValue({
-			data: [],
-			isLoading: false,
-			isError: false,
-		});
-		(useCurrencies as any).mockReturnValue({
+	it('should show no currencies configured modal when currencies array is empty', async () => {
+		// @ts-expect-error - Improve this mock
+		vi.mocked(hooks.useCurrencies).mockReturnValue({
 			data: [],
 			isLoading: false,
 			isError: false,
 		});
 
-		createListingModal$.open({
-			collectionAddress: '0x123',
-			chainId: '1',
-			collectibleId: '1',
-		});
+		createListingModal$.open(defaultArgs);
 
 		render(<CreateListingModal />);
 
 		expect(
-			screen.getByText(
+			await screen.findByText(
 				'No currencies are configured for the marketplace, contact the marketplace owners',
 			),
 		).toBeInTheDocument();