@0xsequence/marketplace-sdk 0.8.2 → 0.8.4

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>

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

@@ -1,151 +1,54 @@
 import { observable } from '@legendapp/state';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { render } from '@test';
-import { screen, waitFor } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { TEST_CURRENCIES, TEST_CURRENCY } from '@test/const';
+import { screen } from '@testing-library/react';
+import { zeroAddress } from 'viem';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import CurrencyOptionsSelect from '..';
 import type { Currency } from '../../../../../../_internal';
-import { mockCurrencies } from '../../../../../../_internal/api/__mocks__/marketplace.msw';
-import { useCurrencies } from '../../../../../../hooks';
-
-describe.skip('CurrencyOptionsSelect', () => {
-	const createDefaultProps = () => ({
-		collectionAddress: '0xCollection' as `0x${string}`,
-		chainId: 1,
-		selectedCurrency$: observable<Currency | null | undefined>(null),
-		secondCurrencyAsDefault: false,
-		includeNativeCurrency: false,
+import * as hooks from '../../../../../../hooks';
+
+const defaultProps = {
+	collectionAddress: zeroAddress,
+	chainId: 1,
+	selectedCurrency$: observable<Currency | null | undefined>(TEST_CURRENCY),
+	secondCurrencyAsDefault: false,
+	includeNativeCurrency: false,
+};
+
+describe('CurrencyOptionsSelect', () => {
+	beforeEach(() => {
+		vi.restoreAllMocks();
 	});
 
 	it('should render loading skeleton when currencies are loading', () => {
-		const props = createDefaultProps();
-		render(<CurrencyOptionsSelect {...props} />);
-		expect(screen.getByTestId('skeleton')).toBeInTheDocument();
-	});
-
-	it('should set first currency as default when currencies load', async () => {
-		vi.mocked(useCurrencies).mockReturnValue({
-			data: mockCurrencies,
-			isLoading: false,
-		} as UseQueryResult<Currency[], Error>);
-
-		const props = createDefaultProps();
-		render(<CurrencyOptionsSelect {...props} />);
-
-		await waitFor(() => {
-			const selectedCurrency = props.selectedCurrency$.get();
-			expect(selectedCurrency).toBeDefined();
-			expect(selectedCurrency?.contractAddress).toBe(
-				mockCurrencies[0].contractAddress,
-			);
-			expect(selectedCurrency?.symbol).toBe(mockCurrencies[0].symbol);
-		});
-
-		expect(screen.getByText(mockCurrencies[0].symbol)).toBeInTheDocument();
-	});
-
-	it('should set second currency as default when secondCurrencyAsDefault is true', async () => {
-		vi.mocked(useCurrencies).mockReturnValue({
-			data: mockCurrencies,
-			isLoading: false,
-		} as UseQueryResult<Currency[], Error>);
-
-		const props = createDefaultProps();
-		render(<CurrencyOptionsSelect {...props} secondCurrencyAsDefault={true} />);
-
-		await waitFor(() => {
-			const selectedCurrency = props.selectedCurrency$.get();
-			expect(selectedCurrency).toBeDefined();
-			expect(selectedCurrency?.contractAddress).toBe(
-				mockCurrencies[1].contractAddress,
-			);
-			expect(selectedCurrency?.symbol).toBe(mockCurrencies[1].symbol);
-		});
-
-		expect(screen.getByText(mockCurrencies[1].symbol)).toBeInTheDocument();
-	});
-
-	it('should update selected currency when changed programmatically', async () => {
-		vi.mocked(useCurrencies).mockReturnValue({
-			data: mockCurrencies,
-			isLoading: false,
+		const useCurrenciesSpy = vi.spyOn(hooks, 'useCurrencies');
+		useCurrenciesSpy.mockReturnValue({
+			isLoading: true,
+			data: undefined,
+			error: null,
 		} as UseQueryResult<Currency[], Error>);
 
-		const props = createDefaultProps();
-		render(<CurrencyOptionsSelect {...props} />);
-
-		// Wait for initial currency to be set
-		await waitFor(() => {
-			expect(props.selectedCurrency$.get()).toBeDefined();
-		});
-
-		// Programmatically change the selected currency
-		props.selectedCurrency$.set(mockCurrencies[1]);
+		render(<CurrencyOptionsSelect {...defaultProps} />);
 
-		// Verify the new selection is reflected in the observable
-		expect(props.selectedCurrency$.get()?.contractAddress).toBe(
-			mockCurrencies[1].contractAddress,
-		);
-		expect(props.selectedCurrency$.get()?.symbol).toBe(
-			mockCurrencies[1].symbol,
-		);
+		const skeleton = document.querySelector('.h-7.w-20.rounded-2xl');
+		expect(skeleton).toBeInTheDocument();
+		expect(skeleton).toHaveClass('animate-skeleton');
 	});
 
-	it('should maintain selected currency when currencies reload', async () => {
-		const useCurrenciesMock = vi.mocked(useCurrencies);
-
-		// Initial load with currencies
-		useCurrenciesMock.mockReturnValue({
-			data: mockCurrencies,
+	it('should set first currency as default when currencies load', async () => {
+		const useCurrenciesSpy = vi.spyOn(hooks, 'useCurrencies');
+		useCurrenciesSpy.mockReturnValue({
 			isLoading: false,
-		} as UseQueryResult<Currency[], Error>);
-
-		const props = createDefaultProps();
-		render(<CurrencyOptionsSelect {...props} />);
-
-		// Wait for initial currency to be set
-		await waitFor(() => {
-			expect(props.selectedCurrency$.get()).toBeDefined();
-		});
-
-		// Programmatically set the second currency
-		props.selectedCurrency$.set(mockCurrencies[1]);
-
-		// Verify second currency is selected
-		expect(props.selectedCurrency$.get()?.contractAddress).toBe(
-			mockCurrencies[1].contractAddress,
-		);
-
-		// Simulate reload by setting loading state
-		useCurrenciesMock.mockReturnValue({
-			data: undefined,
-			isLoading: true,
+			data: TEST_CURRENCIES,
 			error: null,
-		} as unknown as UseQueryResult<Currency[], Error>);
-
-		// Verify the selected currency remains the same during loading
-		expect(props.selectedCurrency$.get()?.contractAddress).toBe(
-			mockCurrencies[1].contractAddress,
-		);
-		expect(props.selectedCurrency$.get()?.symbol).toBe(
-			mockCurrencies[1].symbol,
-		);
+		} as UseQueryResult<Currency[], Error>);
 
-		// Simulate reload completion
-		useCurrenciesMock.mockReturnValue({
-			data: mockCurrencies,
-			isLoading: false,
-			error: null,
-		} as unknown as UseQueryResult<Currency[], Error>);
+		render(<CurrencyOptionsSelect {...defaultProps} />);
 
-		// Verify the same currency is still selected after reload
-		await waitFor(() => {
-			expect(props.selectedCurrency$.get()?.contractAddress).toBe(
-				mockCurrencies[1].contractAddress,
-			);
-			expect(props.selectedCurrency$.get()?.symbol).toBe(
-				mockCurrencies[1].symbol,
-			);
-		});
+		const trigger = screen.getByTestId('currency-select-trigger');
+		expect(trigger).toBeInTheDocument();
+		expect(trigger).toHaveTextContent(TEST_CURRENCY.symbol);
 	});
 });