@0xsequence/marketplace-sdk 0.8.3 → 0.8.5

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

@@ -1,166 +1,103 @@
-import { cleanup, fireEvent, render, screen } from '@test';
+import { cleanup, render, renderHook, screen, waitFor } from '@test';
+import { TEST_COLLECTIBLE } from '@test/const';
+import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { useCollection, useCurrency } from '../../../../hooks';
+import { useSellModal } from '..';
+import { StepType, WalletKind } from '../../../../_internal';
+import { createMockStep } from '../../../../_internal/api/__mocks__/marketplace.msw';
+import { mockOrder } from '../../../../_internal/api/__mocks__/marketplace.msw';
+import * as walletModule from '../../../../_internal/wallet/useWallet';
 import { SellModal } from '../Modal';
-import { type OpenSellModalArgs, sellModal$ } from '../store';
+import * as useGetTokenApprovalDataModule from '../hooks/useGetTokenApproval';
 
-import { MarketplaceKind, type Order } from '../../../../_internal';
-
-import { server } from '@test';
-import { http, HttpResponse } from 'msw';
-import { mockMarketplaceEndpoint } from '../../../../_internal/api/__mocks__/marketplace.msw';
-import { useSell } from '../hooks/useSell';
-
-// Test data
-const mockOrder = {
-	orderId: '1',
-	priceAmount: '1000000000000000000',
-	priceCurrencyAddress: '0x0',
-	quantityRemaining: '1',
-	createdAt: new Date().toISOString(),
-	marketplace: MarketplaceKind.sequence_marketplace_v2,
-} as Order;
-
-const mockModalProps = {
-	collectionAddress: '0x123',
-	chainId: 1,
-	tokenId: '1',
+const defaultArgs = {
+	collectionAddress: TEST_COLLECTIBLE.collectionAddress,
+	chainId: TEST_COLLECTIBLE.chainId,
+	tokenId: TEST_COLLECTIBLE.collectibleId,
 	order: mockOrder,
-} satisfies OpenSellModalArgs;
-
-// TODO: remove when there is mocks for more endpoints
-vi.mock(import('../../../../hooks'), async (importOriginal) => {
-	const mod = await importOriginal();
-	return {
-		...mod,
-		useCollection: vi.fn().mockImplementation(mod.useCollection),
-		useCurrency: vi.fn().mockImplementation(mod.useCurrency),
-	};
-});
-
-vi.mock('@0xsequence/kit', () => ({
-	useWaasFeeOptions: vi.fn().mockReturnValue([]),
-}));
-
-beforeEach(() => {
-	cleanup();
-	vi.clearAllMocks();
-	vi.mock('../hooks/useSell', () => ({
-		useSell: vi.fn().mockReturnValue({
-			isLoading: false,
-			executeApproval: vi.fn(),
-			sell: vi.fn(),
-		}),
-	}));
-});
+};
 
-describe.skip('SellModal', () => {
-	it('should not render when modal is closed', () => {
-		render(<SellModal />);
-		expect(screen.queryByText('You have an offer')).toBeNull();
-	});
+describe('MakeOfferModal', () => {
+	const mockWallet = createMockWallet();
 
-	it.skip('should render error state', async () => {
-		// Override MSW to return error
-		server.use(
-			http.post(mockMarketplaceEndpoint('GetCollectible'), () => {
-				return HttpResponse.error();
-			}),
-		);
-		sellModal$.open(mockModalProps);
-		render(<SellModal />);
-		const errorModal = await screen.findByTestId('error-modal');
-		expect(errorModal).toBeVisible();
+	beforeEach(() => {
+		cleanup();
+		// Reset all mocks
+		vi.clearAllMocks();
+		vi.resetAllMocks();
+		vi.restoreAllMocks();
 	});
 
-	it.skip('should render main modal when data is loaded', async () => {
-		vi.mocked(useCollection).mockReturnValue({
-			// @ts-expect-error - TODO: mock this better
-			data: {},
+	it('should show main button if there is no approval step', async () => {
+		// Mock sequence wallet
+		const sequenceWallet = {
+			...mockWallet,
+			walletKind: WalletKind.sequence,
+		};
+		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+			wallet: sequenceWallet,
 			isLoading: false,
 			isError: false,
 		});
-
-		vi.mocked(useCurrency).mockReturnValue({
-			// @ts-expect-error - TODO: mock this better
-			data: {},
+		vi.spyOn(
+			useGetTokenApprovalDataModule,
+			'useGetTokenApprovalData',
+		).mockReturnValue({
+			data: {
+				step: null,
+			},
 			isLoading: false,
-			isError: false,
+			isSuccess: true,
 		});
 
-		sellModal$.open(mockModalProps);
+		// Render the modal
+		const { result } = renderHook(() => useSellModal());
+		result.current.show(defaultArgs);
+
 		render(<SellModal />);
-		const text = await screen.findByText('Offer received');
-		expect(text).toBeInTheDocument();
+
+		// Wait for the component to update
+		await waitFor(() => {
+			// The Approve TOKEN button should not exist
+			expect(screen.queryByText('Approve TOKEN')).toBeNull();
+
+			// The Accept button should exist
+			expect(screen.getByRole('button', { name: 'Accept' })).toBeDefined();
+		});
 	});
-});
 
-describe.skip('Modal Actions', () => {
-	it('should handle approval step correctly', async () => {
-		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-		vi.mocked(useCollection as any).mockReturnValue({
-			data: {
-				name: 'Test Collection',
-				decimals: 0,
-			},
+	it('(non-sequence wallets) should show approve token button if there is an approval step, disable main button', async () => {
+		const nonSequenceWallet = {
+			...mockWallet,
+			walletKind: 'unknown' as WalletKind,
+		};
+		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+			wallet: nonSequenceWallet,
 			isLoading: false,
 			isError: false,
 		});
-
-		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-		vi.mocked(useCurrency as any).mockReturnValue({
+		vi.spyOn(
+			useGetTokenApprovalDataModule,
+			'useGetTokenApprovalData',
+		).mockReturnValue({
 			data: {
-				name: 'Test Currency',
-				imageUrl: 'test-url',
+				step: createMockStep(StepType.tokenApproval),
 			},
 			isLoading: false,
-			isError: false,
+			isSuccess: true,
 		});
 
-		const mockExecuteApproval = vi.fn();
+		// Render the modal
+		const { result } = renderHook(() => useSellModal());
+		result.current.show(defaultArgs);
 
-		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-		(useSell as any).mockReturnValue({
-			isLoading: false,
-			executeApproval: mockExecuteApproval,
-			sell: vi.fn(),
-		});
-
-		sellModal$.open({
-			...mockModalProps,
-			order: {
-				...mockOrder,
-				quantityRemaining: '1',
-			},
-		});
-		sellModal$.steps.approval.exist.set(true);
-		sellModal$.steps.approval.isExecuting.set(false);
-		sellModal$.steps.transaction.isExecuting.set(false);
 		render(<SellModal />);
 
-		const approveButton = await screen.findByText('Approve TOKEN');
-		expect(approveButton).not.toBeDisabled();
-		fireEvent.click(approveButton);
-		expect(mockExecuteApproval).toHaveBeenCalled();
-	});
-});
+		await waitFor(() => {
+			expect(screen.getByText('Approve TOKEN')).toBeDefined();
 
-it.skip('should handle sell action correctly', async () => {
-	const mockSell = vi.fn();
-	// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-	(useSell as any).mockReturnValue({
-		isLoading: false,
-		executeApproval: vi.fn(),
-		sell: mockSell,
+			expect(screen.getByRole('button', { name: 'Accept' })).toBeDefined();
+			expect(screen.getByRole('button', { name: 'Accept' })).toBeDisabled();
+		});
 	});
-
-	sellModal$.open(mockModalProps);
-	sellModal$.steps.approval.exist.set(false);
-	sellModal$.steps.approval.isExecuting.set(false);
-	sellModal$.steps.transaction.isExecuting.set(false);
-	render(<SellModal />);
-
-	const acceptButton = screen.getByText('Accept');
-	fireEvent.click(acceptButton);
-	expect(mockSell).toHaveBeenCalled();
 });

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

@@ -0,0 +1,286 @@
+import { fireEvent, render, screen, waitFor } from '@test';
+import { type Address, custom, zeroAddress } from 'viem';
+import { mainnet, polygon } from 'viem/chains';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { WalletKind } from '../../../../../_internal';
+import * as walletModule from '../../../../../_internal/wallet/useWallet';
+import { ActionModal } from './ActionModal';
+
+const mockShowSwitchChainModal = vi.fn();
+vi.mock('../switchChainModal', () => ({
+	useSwitchChainModal: () => ({
+		show: mockShowSwitchChainModal,
+		close: vi.fn(),
+		isSwitching$: { get: () => false },
+	}),
+}));
+
+describe('ActionModal', () => {
+	const mockOnClose = vi.fn();
+	const mockOnClick = vi.fn();
+
+	const defaultProps = {
+		isOpen: true,
+		onClose: mockOnClose,
+		title: 'Test Modal',
+		children: <div>Modal Content</div>,
+		ctas: [
+			{
+				label: 'Test Button',
+				onClick: mockOnClick,
+				testid: 'test-button',
+			},
+		],
+		chainId: polygon.id,
+	};
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	describe('Loading states', () => {
+		it('should show a loading spinner when modalLoading prop is true', async () => {
+			render(<ActionModal {...defaultProps} modalLoading={true} />);
+
+			expect(screen.getByTestId('spinner')).toBeInTheDocument();
+		});
+
+		it('should show a loading spinner when isLoading from useWallet is true', async () => {
+			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+				wallet: null,
+				isLoading: true,
+				isError: false,
+			});
+
+			render(<ActionModal {...defaultProps} />);
+
+			expect(screen.getByTestId('spinner')).toBeInTheDocument();
+		});
+
+		it('should show error message when useWallet returns an error', () => {
+			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+				wallet: null,
+				isLoading: false,
+				isError: true,
+			});
+
+			render(<ActionModal {...defaultProps} />);
+
+			expect(screen.getByTestId('error-loading-text')).toBeInTheDocument();
+			expect(screen.getByText('Error loading modal')).toBeInTheDocument();
+			expect(screen.queryByText('Modal Content')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('test-button')).not.toBeInTheDocument();
+		});
+
+		it('should show modal content if loading states is false and no error', async () => {
+			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+				wallet: null,
+				isLoading: false,
+				isError: false,
+			});
+
+			render(<ActionModal {...defaultProps} modalLoading={false} />);
+
+			expect(screen.getByText('Modal Content')).toBeInTheDocument();
+			expect(screen.getByTestId('test-button')).toBeInTheDocument();
+		});
+	});
+
+	describe('Chain switching', () => {
+		it('should automatically switch chain for Sequence WaaS wallets', async () => {
+			const switchChainMock = vi.fn();
+
+			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+				wallet: {
+					address: () => Promise.resolve(zeroAddress as Address),
+					getChainId: vi.fn().mockResolvedValue(mainnet.id),
+					switchChain: switchChainMock,
+					transport: custom({ request: vi.fn() }),
+					walletKind: WalletKind.sequence,
+					isWaaS: true,
+					handleConfirmTransactionStep: vi.fn(),
+					handleSendTransactionStep: vi.fn(),
+					handleSignMessageStep: vi.fn(),
+					hasTokenApproval: vi.fn(),
+				},
+				isLoading: false,
+				isError: false,
+			});
+
+			render(<ActionModal {...defaultProps} />);
+
+			expect(switchChainMock).toHaveBeenCalledWith(polygon.id);
+		});
+
+		it('should show switch chain modal when CTA is clicked with chain mismatch', async () => {
+			mockShowSwitchChainModal.mockClear();
+
+			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+				wallet: {
+					address: () => Promise.resolve(zeroAddress as Address),
+					getChainId: vi.fn().mockResolvedValue(mainnet.id), // different from defaultProps.chainId
+					switchChain: vi.fn(),
+					transport: custom({ request: vi.fn() }),
+					walletKind: WalletKind.sequence,
+					isWaaS: false,
+					handleConfirmTransactionStep: vi.fn(),
+					handleSendTransactionStep: vi.fn(),
+					handleSignMessageStep: vi.fn(),
+					hasTokenApproval: vi.fn(),
+				},
+				isLoading: false,
+				isError: false,
+			});
+
+			render(<ActionModal {...defaultProps} />);
+
+			const button = screen.getByTestId('test-button');
+			fireEvent.click(button);
+
+			await waitFor(() => {
+				expect(mockShowSwitchChainModal).toHaveBeenCalledWith({
+					chainIdToSwitchTo: polygon.id,
+					onSuccess: expect.any(Function),
+				});
+			});
+		});
+
+		it('should directly execute callback when chain already matches', async () => {
+			mockOnClick.mockClear();
+
+			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+				wallet: {
+					address: () => Promise.resolve(zeroAddress as Address),
+					getChainId: vi.fn().mockResolvedValue(polygon.id), // Same as defaultProps.chainId
+					switchChain: vi.fn(),
+					transport: custom({ request: vi.fn() }),
+					walletKind: WalletKind.sequence,
+					isWaaS: false,
+					handleConfirmTransactionStep: vi.fn(),
+					handleSendTransactionStep: vi.fn(),
+					handleSignMessageStep: vi.fn(),
+					hasTokenApproval: vi.fn(),
+				},
+				isLoading: false,
+				isError: false,
+			});
+
+			render(<ActionModal {...defaultProps} />);
+
+			const button = screen.getByTestId('test-button');
+			fireEvent.click(button);
+
+			await waitFor(() => {
+				expect(mockOnClick).toHaveBeenCalled();
+			});
+		});
+	});
+
+	describe('CTA buttons', () => {
+		it('should call onClick when CTA button is clicked', async () => {
+			const onClick = vi.fn();
+			render(
+				<ActionModal
+					{...defaultProps}
+					ctas={[{ label: 'Click Me', onClick, testid: 'cta-button' }]}
+				/>,
+			);
+
+			const button = screen.getByTestId('cta-button');
+			fireEvent.click(button);
+
+			await waitFor(() => {
+				expect(onClick).toHaveBeenCalled();
+			});
+		});
+
+		it('should disable the button when disabled prop is true', () => {
+			render(
+				<ActionModal
+					{...defaultProps}
+					ctas={[
+						{
+							label: 'Disabled Button',
+							onClick: mockOnClick,
+							disabled: true,
+							testid: 'disabled-button',
+						},
+					]}
+				/>,
+			);
+
+			const button = screen.getByTestId('disabled-button');
+			expect(button).toBeDisabled();
+
+			fireEvent.click(button);
+			expect(mockOnClick).not.toHaveBeenCalled();
+		});
+
+		it('should show spinner when pending prop is true', () => {
+			render(
+				<ActionModal
+					{...defaultProps}
+					ctas={[
+						{
+							label: 'Loading Button',
+							onClick: mockOnClick,
+							pending: true,
+							testid: 'pending-button',
+						},
+					]}
+				/>,
+			);
+
+			expect(screen.getByTestId('pending-button')).toBeInTheDocument();
+			expect(screen.getByTestId('pending-button-spinner')).toBeInTheDocument(); // wrapper of spinner has data-testid of {testid}-spinner
+		});
+
+		it('should not render hidden buttons', () => {
+			render(
+				<ActionModal
+					{...defaultProps}
+					ctas={[
+						{
+							label: 'Visible Button',
+							onClick: vi.fn(),
+							testid: 'visible-button',
+						},
+						{
+							label: 'Hidden Button',
+							onClick: vi.fn(),
+							hidden: true,
+							testid: 'hidden-button',
+						},
+					]}
+				/>,
+			);
+
+			expect(screen.getByTestId('visible-button')).toBeInTheDocument();
+			expect(screen.queryByTestId('hidden-button')).not.toBeInTheDocument();
+		});
+
+		it('should render multiple CTA buttons', () => {
+			render(
+				<ActionModal
+					{...defaultProps}
+					ctas={[
+						{
+							label: 'Primary CTA',
+							onClick: vi.fn(),
+							testid: 'primary-cta',
+						},
+						{
+							label: 'Secondary CTA',
+							onClick: vi.fn(),
+							variant: 'secondary',
+							testid: 'secondary-cta',
+						},
+					]}
+				/>,
+			);
+
+			expect(screen.getByTestId('primary-cta')).toBeInTheDocument();
+			expect(screen.getByTestId('secondary-cta')).toBeInTheDocument();
+		});
+	});
+});

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

@@ -52,7 +52,7 @@ export const ActionModal = observer(
 			const chainMismatch = walletChainId !== Number(chainId);
 			if (chainMismatch) {
 				showSwitchChainModal({
-					chainIdToSwitchTo: Number(chainId),
+					chainIdToSwitchTo: chainId,
 					onSuccess,
 				});
 			} else {
@@ -84,13 +84,21 @@ export const ActionModal = observer(
 					{modalLoading || isLoading || isError ? (
 						<div
 							className={`flex ${spinnerContainerClassname} w-full items-center justify-center`}
+							data-testid="error-loading-wrapper"
 						>
 							{isError && (
-								<Text className="text-center font-body text-error100 text-small">
+								<Text
+									data-testid="error-loading-text"
+									className="text-center font-body text-error100 text-small"
+								>
 									Error loading modal
 								</Text>
 							)}
-							{isLoading && <Spinner size="lg" />}
+							{(isLoading || modalLoading) && (
+								<div data-testid="spinner">
+									<Spinner size="lg" />
+								</div>
+							)}
 						</div>
 					) : (
 						children
@@ -118,7 +126,11 @@ export const ActionModal = observer(
 											data-testid={cta.testid}
 											label={
 												<div className="flex items-center justify-center gap-2">
-													{cta.pending && <Spinner size="sm" />}
+													{cta.pending && (
+														<div data-testid={`${cta.testid}-spinner`}>
+															<Spinner size="sm" />
+														</div>
+													)}
 
 													{cta.label}
 												</div>