@0xsequence/marketplace-sdk 0.4.8 → 0.4.9

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

@@ -0,0 +1,243 @@
+import '@testing-library/jest-dom/vitest';
+import {
+	render,
+	screen,
+	waitFor,
+	within,
+	fireEvent,
+	act,
+	cleanup,
+} from '../../../../../_internal/test-utils';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ERC1155QuantityModal } from '../Modal1155';
+import { buyModal$ } from '../../store';
+import { MarketplaceKind } from '../../../../../_internal';
+import type { Order, TokenMetadata } from '../../../../../_internal';
+
+describe('ERC1155QuantityModal', () => {
+	const mockOrder = {
+		orderId: '1',
+		priceAmount: '1000000000000000000', // 1 ETH in wei
+		priceCurrencyAddress: '0x0',
+		quantityRemaining: '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 mockBuy = vi.fn();
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+
+		// Reset the modal state
+		buyModal$.close();
+		buyModal$.state.checkoutModalLoaded.set(false);
+		buyModal$.state.checkoutModalIsLoading.set(false);
+		buyModal$.state.invalidQuantity.set(false);
+		buyModal$.state.quantity.set('1');
+	});
+
+	afterEach(() => {
+		buyModal$.close();
+		cleanup();
+		vi.clearAllMocks();
+	});
+
+	it('should render quantity input correctly', async () => {
+		// Open the modal with initial state
+		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"
+			/>,
+		);
+
+		// Verify modal title
+		expect(screen.getByText('Select Quantity')).toBeInTheDocument();
+
+		// Verify quantity input is present with initial value
+		const quantityInput = screen.getByRole('textbox', {
+			name: /enter quantity/i,
+		});
+		expect(quantityInput).toBeInTheDocument();
+		expect(quantityInput).toHaveValue('1');
+
+		// 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();
+
+		// 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);
+	});
+
+	it('should update total price when quantity changes', async () => {
+		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 quantityInput = screen.getByRole('textbox', {
+			name: /enter quantity/i,
+		});
+
+		// Change quantity to 2
+		await act(async () => {
+			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');
+
+		await waitFor(() => {
+			expect(within(priceContainer).getByText('2')).toBeInTheDocument();
+		});
+	});
+
+	it('should disable buy button when quantity is invalid', async () => {
+		buyModal$.open({
+			order: mockOrder,
+			callbacks: {},
+			chainId: '1',
+			collectionAddress: '0x123',
+			tokenId: '1',
+		});
+
+		// Set invalid quantity and loading state
+		buyModal$.state.invalidQuantity.set(true);
+		buyModal$.state.checkoutModalIsLoading.set(true);
+
+		render(
+			<ERC1155QuantityModal
+				buy={mockBuy}
+				collectable={mockCollectable}
+				order={mockOrder}
+				chainId="1"
+				collectionAddress="0x123"
+				collectibleId="1"
+			/>,
+		);
+
+		const buyButton = screen.getByRole('button', { name: /buy now/i });
+
+		// Wait for the button to be disabled
+		await waitFor(() => {
+			expect(buyButton).toBeDisabled();
+		});
+
+		// Click should not trigger buy function
+		fireEvent.click(buyButton);
+		expect(mockBuy).not.toHaveBeenCalled();
+	});
+
+	it('should calculate total price correctly', async () => {
+		// Open the modal with initial state
+		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"
+			/>,
+		);
+
+		// Wait for modal content to be fully loaded
+		await waitFor(() => {
+			expect(screen.getByText('Select Quantity')).toBeInTheDocument();
+			expect(
+				screen.getByRole('textbox', { name: /enter quantity/i }),
+			).toBeInTheDocument();
+			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');
+
+		await waitFor(() => {
+			expect(within(priceContainer).getByText('1')).toBeInTheDocument();
+			expect(within(priceContainer).getByText('ETH')).toBeInTheDocument();
+		});
+
+		// Change quantity to 3
+		const quantityInput = screen.getByRole('textbox', {
+			name: /enter quantity/i,
+		});
+		await act(async () => {
+			fireEvent.change(quantityInput, { target: { value: '3' } });
+		});
+
+		// Verify total price updates to 3 ETH
+		await waitFor(() => {
+			expect(within(priceContainer).getByText('3')).toBeInTheDocument();
+		});
+
+		// Verify modal is in a valid state
+		expect(buyModal$.state.checkoutModalIsLoading.get()).toBe(false);
+		expect(buyModal$.state.invalidQuantity.get()).toBe(false);
+	});
+});

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

@@ -3,6 +3,14 @@ import type { ShowBuyModalArgs } from '.';
 import type { Order } from '../../../_internal';
 import type { ModalCallbacks } from '../_internal/types';
 
+const buyState = {
+	order: undefined as unknown as Order,
+	quantity: '1',
+	invalidQuantity: false,
+	checkoutModalIsLoading: false,
+	checkoutModalLoaded: false,
+} as const;
+
 export interface BuyModalState {
 	isOpen: boolean;
 	open: (
@@ -15,7 +23,6 @@ export interface BuyModalState {
 	state: {
 		order: Order;
 		quantity: string;
-		modalId: number;
 		invalidQuantity: boolean;
 		checkoutModalIsLoading: boolean;
 		checkoutModalLoaded: boolean;
@@ -38,7 +45,6 @@ export const initialState: BuyModalState = {
 		buyModal$.state.set({
 			quantity: args.order.quantityAvailableFormatted,
 			order: args.order,
-			modalId: buyModal$.state.modalId.get() + 1,
 			invalidQuantity: false,
 			checkoutModalIsLoading: false,
 			checkoutModalLoaded: false,
@@ -48,15 +54,10 @@ export const initialState: BuyModalState = {
 	},
 	close: () => {
 		buyModal$.isOpen.set(false);
+		buyModal$.callbacks.set(undefined);
+		buyModal$.state.set(buyState);
 	},
-	state: {
-		order: undefined as unknown as Order,
-		quantity: '1',
-		modalId: 0,
-		invalidQuantity: false,
-		checkoutModalIsLoading: false,
-		checkoutModalLoaded: false,
-	},
+	state: buyState,
 	setCheckoutModalIsLoading: (isLoading: boolean) => {
 		buyModal$.state.checkoutModalIsLoading.set(isLoading);
 	},

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

@@ -7,6 +7,8 @@ import {
 	useBalanceOfCollectible,
 	useCollectible,
 	useCollection,
+	useCurrencies,
+	useCurrencyOptions,
 } from '../../../hooks';
 import {
 	ActionModal,
@@ -49,7 +51,16 @@ const Modal = observer(() => {
 		collectionAddress,
 		collectibleId,
 	});
-
+	const currencyOptions = useCurrencyOptions({ collectionAddress });
+	const {
+		data: currencies,
+		isLoading: currenciesLoading,
+		isError: currenciesIsError,
+	} = useCurrencies({
+		chainId,
+		currencyOptions,
+		includeNativeCurrency: true,
+	});
 	const {
 		data: collection,
 		isLoading: collectionIsLoading,
@@ -91,7 +102,7 @@ const Modal = observer(() => {
 			steps$: steps$,
 		});
 
-	if (collectableIsLoading || collectionIsLoading) {
+	if (collectableIsLoading || collectionIsLoading || currenciesLoading) {
 		return (
 			<LoadingModal
 				isOpen={createListingModal$.isOpen.get()}
@@ -102,13 +113,25 @@ const Modal = observer(() => {
 		);
 	}
 
-	if (collectableIsError || collectionIsError) {
+	if (collectableIsError || collectionIsError || currenciesIsError) {
+		return (
+			<ErrorModal
+				isOpen={createListingModal$.isOpen.get()}
+				chainId={Number(chainId)}
+				onClose={createListingModal$.close}
+				title="List item for sale"
+			/>
+		);
+	}
+
+	if (!currencies || currencies.length === 0) {
 		return (
 			<ErrorModal
 				isOpen={createListingModal$.isOpen.get()}
 				chainId={Number(chainId)}
 				onClose={createListingModal$.close}
 				title="List item for sale"
+				message="No currencies are configured for the marketplace, contact the marketplace owners"
 			/>
 		);
 	}

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/_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}