@0xsequence/marketplace-sdk 0.4.7 → 0.4.9

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

@@ -13,6 +13,8 @@ import {
 	useCollectible,
 	useCollection,
 	useBalanceOfCollectible,
+	useCurrencies,
+	useCurrencyOptions,
 } from '../../../../hooks';
 import { useCreateListing } from '../hooks/useCreateListing';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
@@ -27,6 +29,11 @@ vi.mock('../../../../hooks', () => ({
 		isLoading: false,
 		isError: false,
 	}),
+	useCurrencyOptions: vi.fn().mockReturnValue({
+		data: ['0x123'],
+		isLoading: false,
+		isError: false,
+	}),
 	useMarketplaceConfig: vi.fn().mockReturnValue({
 		data: {
 			collections: [
@@ -107,39 +114,29 @@ describe('CreateListingModal', () => {
 		expect(screen.queryByText('List item for sale')).toBeNull();
 	});
 
-	it('should render loading state', () => {
+	it('should render main form when data is loaded', () => {
+		// Mock successful states for all required hooks
 		(useCollectible as any).mockReturnValue({
-			isLoading: true,
+			data: { decimals: 18, name: 'Test NFT' },
+			isLoading: false,
+			isError: false,
 		});
-
-		createListingModal$.open({
-			collectionAddress: '0x123',
-			chainId: '1',
-			collectibleId: '1',
+		(useCollection as any).mockReturnValue({
+			data: { type: 'ERC721', name: 'Test Collection' },
+			isLoading: false,
+			isError: false,
 		});
-
-		render(<CreateListingModal />);
-		const loadingModal = screen.getByTestId('loading-modal');
-		expect(loadingModal).toBeVisible();
-	});
-
-	it('should render error state', () => {
-		(useCollectible as any).mockReturnValue({
-			isError: true,
+		(useCurrencyOptions as any).mockReturnValue({
+			data: ['0x123'],
+			isLoading: false,
+			isError: false,
 		});
-
-		createListingModal$.open({
-			collectionAddress: '0x123',
-			chainId: '1',
-			collectibleId: '1',
+		(useCurrencies as any).mockReturnValue({
+			data: [{ address: '0x123', symbol: 'TEST', decimals: 18 }],
+			isLoading: false,
+			isError: false,
 		});
 
-		render(<CreateListingModal />);
-		const errorModal = screen.getByTestId('error-modal');
-		expect(errorModal).toBeVisible();
-	});
-
-	it('should render main form when data is loaded', () => {
 		createListingModal$.open({
 			collectionAddress: '0x123',
 			chainId: '1',
@@ -148,6 +145,9 @@ describe('CreateListingModal', () => {
 
 		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();
 	});
 
@@ -183,6 +183,28 @@ 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',
@@ -194,8 +216,8 @@ describe('CreateListingModal', () => {
 		// Initial price should be 0
 		expect(createListingModal$.listingPrice.amountRaw.get()).toBe('0');
 
-		// Find and interact with price input
-		const priceInput = screen.getByRole('textbox', { name: 'Enter price' });
+		// Find and interact with price input using id
+		const priceInput = screen.getByRole('textbox', { name: /enter price/i });
 		expect(priceInput).toBeInTheDocument();
 
 		fireEvent.change(priceInput, { target: { value: '1.5' } });
@@ -205,4 +227,94 @@ describe('CreateListingModal', () => {
 			expect(createListingModal$.listingPrice.amountRaw.get()).not.toBe('0');
 		});
 	});
+
+	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({
+			data: [],
+			isLoading: false,
+			isError: false,
+		});
+
+		createListingModal$.open({
+			collectionAddress: '0x123',
+			chainId: '1',
+			collectibleId: '1',
+		});
+
+		render(<CreateListingModal />);
+
+		expect(
+			screen.getByText(
+				'No currencies are configured for the marketplace, contact the marketplace owners',
+			),
+		).toBeInTheDocument();
+	});
 });

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

@@ -0,0 +1,145 @@
+import '@testing-library/jest-dom/vitest';
+import { render, screen, cleanup } from '../../../../_internal/test-utils';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import SuccessfulPurchaseModal, { useSuccessfulPurchaseModal } from '..';
+import { successfulPurchaseModal$ } from '../_store';
+import type { ModalCallbacks } from '../../_internal/types';
+
+describe('SuccessfulPurchaseModal', () => {
+	beforeEach(() => {
+		cleanup();
+		vi.clearAllMocks();
+	});
+
+	it('should not render when modal is closed', () => {
+		render(<SuccessfulPurchaseModal />);
+		expect(screen.queryByText('Successful purchase!')).toBeNull();
+	});
+
+	it('should render with purchase details when opened', () => {
+		const mockPurchaseData = {
+			collectibles: [
+				{
+					tokenId: '1',
+					name: 'Test NFT',
+					image: 'https://test.com/image.png',
+					attributes: [],
+				},
+			],
+			totalPrice: '1.5 ETH',
+			explorerUrl: 'https://etherscan.io/tx/123',
+			explorerName: 'Etherscan',
+		};
+
+		successfulPurchaseModal$.open(mockPurchaseData);
+		render(<SuccessfulPurchaseModal />);
+
+		expect(screen.getByText('Successful purchase!')).toBeInTheDocument();
+		expect(screen.getByText('1.5 ETH')).toBeInTheDocument();
+		expect(screen.getByText('1')).toBeInTheDocument(); // Number of items
+		expect(screen.getByText('View on Etherscan')).toBeInTheDocument();
+	});
+
+	it('should render CTA button when ctaOptions are provided', () => {
+		const mockPurchaseData = {
+			collectibles: [
+				{
+					tokenId: '1',
+					name: 'Test NFT',
+					image: 'https://test.com/image.png',
+					attributes: [],
+				},
+			],
+			totalPrice: '1.5 ETH',
+			explorerUrl: 'https://etherscan.io/tx/123',
+			explorerName: 'Etherscan',
+			ctaOptions: {
+				ctaLabel: 'View Collection',
+				ctaOnClick: vi.fn(),
+			},
+		};
+
+		successfulPurchaseModal$.open(mockPurchaseData);
+		render(<SuccessfulPurchaseModal />);
+
+		expect(screen.getByText('View Collection')).toBeInTheDocument();
+	});
+
+	it('should handle multiple collectibles correctly', () => {
+		const mockPurchaseData = {
+			collectibles: Array(5)
+				.fill(null)
+				.map((_, index) => ({
+					tokenId: String(index + 1),
+					name: `Test NFT ${index + 1}`,
+					image: `https://test.com/image${index + 1}.png`,
+					attributes: [],
+				})),
+			totalPrice: '5.0 ETH',
+			explorerUrl: 'https://etherscan.io/tx/123',
+			explorerName: 'Etherscan',
+		};
+
+		successfulPurchaseModal$.open(mockPurchaseData);
+		render(<SuccessfulPurchaseModal />);
+
+		expect(screen.getByText('5 TOTAL')).toBeInTheDocument();
+	});
+
+	it('should close modal when close button is clicked', () => {
+		const mockPurchaseData = {
+			collectibles: [
+				{
+					tokenId: '1',
+					name: 'Test NFT',
+					image: 'https://test.com/image.png',
+					attributes: [],
+				},
+			],
+			totalPrice: '1.5 ETH',
+			explorerUrl: 'https://etherscan.io/tx/123',
+			explorerName: 'Etherscan',
+		};
+
+		successfulPurchaseModal$.open(mockPurchaseData);
+		render(<SuccessfulPurchaseModal />);
+
+		const closeButton = screen.getByLabelText('Close modal');
+		closeButton.click();
+
+		expect(successfulPurchaseModal$.isOpen.get()).toBe(false);
+	});
+
+	describe('useSuccessfulPurchaseModal', () => {
+		it('should provide show and close functions', () => {
+			const modal = useSuccessfulPurchaseModal();
+
+			expect(modal.show).toBeDefined();
+			expect(modal.close).toBeDefined();
+		});
+
+		it('should pass callbacks to modal state', () => {
+			const callbacks = {
+				onSuccess: vi.fn(),
+			} satisfies ModalCallbacks;
+
+			const modal = useSuccessfulPurchaseModal(callbacks);
+			const mockPurchaseData = {
+				collectibles: [
+					{
+						tokenId: '1',
+						name: 'Test NFT',
+						image: 'https://test.com/image.png',
+						attributes: [],
+					},
+				],
+				totalPrice: '1.5 ETH',
+				explorerUrl: 'https://etherscan.io/tx/123',
+				explorerName: 'Etherscan',
+			};
+
+			modal.show(mockPurchaseData);
+			expect(successfulPurchaseModal$.callbacks.get()).toBe(callbacks);
+		});
+	});
+});

package/src/react/ui/modals/_internal/components/actionModal/ActionModal.tsx

@@ -12,7 +12,14 @@ import {
 	Text,
 } from '@0xsequence/design-system';
 import { observer } from '@legendapp/state/react';
-import { Close, Content, Overlay, Portal, Root } from '@radix-ui/react-dialog';
+import {
+	Close,
+	Content,
+	Overlay,
+	Portal,
+	Root,
+	Title,
+} from '@radix-ui/react-dialog';
 import { getProviderEl } from '../../../../../_internal';
 import {
 	closeButton,
@@ -77,16 +84,18 @@ export const ActionModal = observer(
 							gap="4"
 							position={'relative'}
 						>
-							<Text
-								fontSize="medium"
-								fontWeight="bold"
-								textAlign="center"
-								width="full"
-								color="text100"
-								fontFamily="body"
-							>
-								{title}
-							</Text>
+							<Title asChild>
+								<Text
+									fontSize="medium"
+									fontWeight="bold"
+									textAlign="center"
+									width="full"
+									color="text100"
+									fontFamily="body"
+								>
+									{title}
+								</Text>
+							</Title>
 
 							{children}
 

package/src/react/ui/modals/_internal/components/currencyOptionsSelect/__tests__/index.test.tsx

@@ -1,54 +1,12 @@
 import '@testing-library/jest-dom/vitest';
-import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import { screen, cleanup, fireEvent } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { observable } from '@legendapp/state';
 import CurrencyOptionsSelect from '..';
 import type { Currency } from '../../../../../../_internal';
 import { useCurrencies } from '../../../../../../hooks';
-
-// Mock currencies for testing
-const MOCK_USDC: Currency = {
-	symbol: 'USDC',
-	contractAddress: '0x1234',
-	chainId: 1,
-	name: 'USD Coin',
-	decimals: 6,
-	imageUrl: 'https://example.com/usdc.png',
-	exchangeRate: 1,
-	defaultChainCurrency: false,
-	nativeCurrency: false,
-	createdAt: new Date().toISOString(),
-	updatedAt: new Date().toISOString(),
-};
-
-const MOCK_WETH: Currency = {
-	symbol: 'WETH',
-	contractAddress: '0x5678',
-	chainId: 1,
-	name: 'Wrapped Ether',
-	decimals: 18,
-	imageUrl: 'https://example.com/weth.png',
-	exchangeRate: 1,
-	defaultChainCurrency: false,
-	nativeCurrency: false,
-	createdAt: new Date().toISOString(),
-	updatedAt: new Date().toISOString(),
-};
-
-// Mock the required hooks
-vi.mock('../../../../../../hooks/useCurrencyOptions', () => ({
-	useCurrencyOptions: vi.fn(() => ({
-		USDC: MOCK_USDC.contractAddress,
-		WETH: MOCK_WETH.contractAddress,
-	})),
-}));
-
-vi.mock('../../../../../../hooks', () => ({
-	useCurrencies: vi.fn(() => ({
-		data: [MOCK_USDC, MOCK_WETH],
-		isLoading: false,
-	})),
-}));
+import { mockCurrencies } from '../../../../../../_internal/api/__mocks__/marketplace.msw';
+import { render } from '../../../../../../_internal/test-utils';
 
 // Mock the Skeleton component
 vi.mock('@0xsequence/design-system', async (importOriginal) => {
@@ -73,12 +31,6 @@ describe('CurrencyOptionsSelect', () => {
 		cleanup();
 		// Reset all mocks
 		vi.clearAllMocks();
-
-		// Setup default mock values
-		vi.mocked(useCurrencies as any).mockReturnValue({
-			data: [MOCK_USDC, MOCK_WETH],
-			isLoading: false,
-		});
 	});
 
 	it('should render loading skeleton when currencies are loading', () => {
@@ -100,7 +52,7 @@ describe('CurrencyOptionsSelect', () => {
 			/>,
 		);
 
-		expect(selectedCurrency$.get()).toEqual(MOCK_USDC);
+		expect(selectedCurrency$.get()).toEqual(mockCurrencies[0]);
 	});
 
 	it('should set second currency as default when secondCurrencyAsDefault is true', () => {
@@ -113,11 +65,14 @@ describe('CurrencyOptionsSelect', () => {
 			/>,
 		);
 
-		expect(selectedCurrency$.get()).toEqual(MOCK_WETH);
+		expect(selectedCurrency$.get()).toEqual(mockCurrencies[1]);
 	});
 
 	it('should update selected currency when user selects a different option', () => {
-		const selectedCurrency$ = observable(MOCK_USDC);
+		const firstCurrency = mockCurrencies[0];
+		const secondCurrency = mockCurrencies[1];
+
+		const selectedCurrency$ = observable(firstCurrency);
 
 		const { getByRole, getByText } = render(
 			<CurrencyOptionsSelect
@@ -131,14 +86,14 @@ describe('CurrencyOptionsSelect', () => {
 		fireEvent.click(selectButton);
 
 		// Find and click the WETH option in the dropdown
-		const wethOption = getByText('WETH');
+		const wethOption = getByText(secondCurrency.symbol);
 		fireEvent.click(wethOption);
 
-		expect(selectedCurrency$.get()).toEqual(MOCK_WETH);
+		expect(selectedCurrency$.get()).toEqual(secondCurrency);
 	});
 
 	it('should maintain selected currency when currencies reload', () => {
-		const selectedCurrency$ = observable(MOCK_WETH);
+		const selectedCurrency$ = observable(mockCurrencies[0]);
 
 		const { rerender } = render(
 			<CurrencyOptionsSelect
@@ -154,6 +109,6 @@ describe('CurrencyOptionsSelect', () => {
 			/>,
 		);
 
-		expect(selectedCurrency$.get()).toEqual(MOCK_WETH);
+		expect(selectedCurrency$.get()).toEqual(mockCurrencies[0]);
 	});
 });

package/src/react/ui/modals/_internal/components/priceInput/__tests__/index.test.tsx

@@ -10,6 +10,7 @@ import {
 	cleanup,
 	fireEvent,
 } from '../../../../../../_internal/test-utils';
+import { CurrencyStatus } from '../../../../../../_internal';
 
 vi.mock('../hooks/usePriceInput', () => ({
 	usePriceInput: vi.fn(({ onPriceChange }) => ({
@@ -43,6 +44,7 @@ const MOCK_CURRENCY: Currency = {
 	name: 'USD Coin',
 	decimals: 6,
 	imageUrl: 'https://example.com/usdc.png',
+	status: CurrencyStatus.active,
 	exchangeRate: 1,
 	defaultChainCurrency: false,
 	nativeCurrency: false,

package/src/react/ui/modals/_internal/components/transactionStatusModal/__tests__/TransactionStatusModal.test.tsx

@@ -10,7 +10,6 @@ import { transactionStatusModal$ } from '../store';
 import type { ShowTransactionStatusModalArgs } from '../index';
 import { TransactionType } from '../../../../../../_internal/types';
 import { beforeEach, describe, expect, it, vi, afterEach } from 'vitest';
-import { WaitForTransactionReceiptTimeoutError } from 'viem';
 
 const mockTransactionArgs: ShowTransactionStatusModalArgs = {
 	hash: '0x123' as `0x${string}`,
@@ -20,14 +19,12 @@ const mockTransactionArgs: ShowTransactionStatusModalArgs = {
 	type: TransactionType.BUY,
 };
 
-const mockPublicClient = {
-	waitForTransactionReceipt: vi.fn(),
-};
-
-vi.mock('../../../../../../../utils/get-public-rpc-client', () => ({
-	getPublicRpcClient: vi.fn().mockImplementation(() => mockPublicClient),
+vi.mock('../hooks/useTransactionStatus', () => ({
+	default: vi.fn(),
 }));
 
+import useTransactionStatus from '../hooks/useTransactionStatus';
+
 describe('TransactionStatusModal', () => {
 	afterEach(() => {
 		cleanup();
@@ -36,6 +33,7 @@ describe('TransactionStatusModal', () => {
 	beforeEach(() => {
 		transactionStatusModal$.close();
 		vi.clearAllMocks();
+		(useTransactionStatus as any).mockReturnValue('PENDING');
 	});
 
 	it('should not render when closed', () => {
@@ -46,6 +44,7 @@ describe('TransactionStatusModal', () => {
 	});
 
 	it('should show processing state when transaction is processing', async () => {
+		(useTransactionStatus as any).mockReturnValue('PENDING');
 		transactionStatusModal$.open(mockTransactionArgs);
 		render(<TransactionStatusModal />);
 
@@ -61,9 +60,7 @@ describe('TransactionStatusModal', () => {
 	});
 
 	it('should show success state when transaction is successful', async () => {
-		mockPublicClient.waitForTransactionReceipt.mockResolvedValue({
-			status: 'success',
-		});
+		(useTransactionStatus as any).mockReturnValue('SUCCESS');
 		transactionStatusModal$.open(mockTransactionArgs);
 		render(<TransactionStatusModal />);
 
@@ -79,9 +76,7 @@ describe('TransactionStatusModal', () => {
 	});
 
 	it('should show failed state when transaction fails', async () => {
-		mockPublicClient.waitForTransactionReceipt.mockRejectedValue(
-			new Error('Transaction failed'),
-		);
+		(useTransactionStatus as any).mockReturnValue('FAILED');
 		transactionStatusModal$.open(mockTransactionArgs);
 		render(<TransactionStatusModal />);
 
@@ -95,9 +90,7 @@ describe('TransactionStatusModal', () => {
 	});
 
 	it('should show timeout state when transaction times out', async () => {
-		mockPublicClient.waitForTransactionReceipt.mockRejectedValue(
-			new WaitForTransactionReceiptTimeoutError({ hash: '0x123' }),
-		);
+		(useTransactionStatus as any).mockReturnValue('TIMEOUT');
 		transactionStatusModal$.open(mockTransactionArgs);
 		render(<TransactionStatusModal />);
 
@@ -112,8 +105,11 @@ describe('TransactionStatusModal', () => {
 
 	it('should call onSuccess callback when transaction succeeds', async () => {
 		const onSuccess = vi.fn();
-		mockPublicClient.waitForTransactionReceipt.mockResolvedValue({
-			status: 'success',
+		(useTransactionStatus as any).mockImplementation(() => {
+			onSuccess({
+				hash: mockTransactionArgs.hash,
+			});
+			return 'SUCCESS';
 		});
 
 		transactionStatusModal$.open({
@@ -132,7 +128,10 @@ describe('TransactionStatusModal', () => {
 	it('should call onError callback when transaction fails', async () => {
 		const onError = vi.fn();
 		const error = new Error('Transaction failed');
-		mockPublicClient.waitForTransactionReceipt.mockRejectedValue(error);
+		(useTransactionStatus as any).mockImplementation(() => {
+			onError(error);
+			return 'FAILED';
+		});
 
 		transactionStatusModal$.open({
 			...mockTransactionArgs,

package/src/react/ui/modals/_internal/components/transactionStatusModal/__tests__/utils.test.ts

@@ -7,6 +7,7 @@ import {
 	getTransactionStatusModalSpinnerTitle,
 } from '../util/getTitle';
 import type { TransactionStatus } from '../store';
+import { CurrencyStatus } from '../../../../../../_internal';
 
 describe('Transaction Status Modal Utils', () => {
 	describe('getFormattedType', () => {
@@ -111,6 +112,7 @@ describe('Transaction Status Modal Utils', () => {
 							nativeCurrency: true,
 							createdAt: '2024-01-21T00:00:00Z',
 							updatedAt: '2024-01-21T00:00:00Z',
+							status: CurrencyStatus.active,
 						},
 					},
 				}),