@0xsequence/marketplace-sdk 0.4.5 → 0.4.7

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

@@ -0,0 +1,124 @@
+import '@testing-library/jest-dom/vitest';
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { observable } from '@legendapp/state';
+import PriceInput from '..';
+import type { Currency, Price } from '../../../../../../../types';
+import {
+	render,
+	screen,
+	cleanup,
+	fireEvent,
+} from '../../../../../../_internal/test-utils';
+
+vi.mock('../hooks/usePriceInput', () => ({
+	usePriceInput: vi.fn(({ onPriceChange }) => ({
+		value: '0',
+		handlePriceChange: (value: string) => {
+			try {
+				if (value === '0' || !value || isNaN(Number(value))) {
+					return;
+				}
+				onPriceChange?.(value);
+			} catch {
+				return;
+			}
+		},
+	})),
+}));
+
+// Mock useCurrencyBalance hook
+vi.mock('../../../../../hooks/useCurrencyBalance', () => ({
+	useCurrencyBalance: vi.fn(() => ({
+		data: { value: 100n },
+		isSuccess: true,
+	})),
+}));
+
+// Mock currency data
+const MOCK_CURRENCY: Currency = {
+	symbol: 'USDC',
+	contractAddress: '0x1234' as `0x${string}`,
+	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(),
+};
+
+// Mock price data
+const createMockPrice = (amount = '0'): Price => ({
+	amountRaw: amount,
+	currency: MOCK_CURRENCY,
+});
+
+describe('PriceInput', () => {
+	const defaultProps = {
+		collectionAddress: '0xCollection' as `0x${string}`,
+		chainId: '1',
+		$price: observable<Price | undefined>(createMockPrice()),
+		includeNativeCurrency: false,
+		secondCurrencyAsDefault: false,
+	};
+
+	beforeEach(() => {
+		cleanup();
+		vi.clearAllMocks();
+	});
+	afterEach(() => {
+		cleanup();
+	});
+
+	it('should render price input', () => {
+		render(<PriceInput {...defaultProps} />);
+		expect(screen.getByRole('textbox', { name: /price/i })).toBeInTheDocument();
+	});
+
+	it('should handle price changes', () => {
+		const onPriceChange = vi.fn();
+		const { getByRole } = render(
+			<PriceInput {...defaultProps} onPriceChange={onPriceChange} />,
+		);
+
+		const input = getByRole('textbox', { name: /price/i });
+		fireEvent.change(input, { target: { value: '100' } });
+
+		expect(onPriceChange).toHaveBeenCalled();
+	});
+
+	it('should trigger callback when balance is insufficient', () => {
+		const checkBalance = {
+			enabled: true,
+			callback: vi.fn(),
+		};
+		const price$ = observable<Price | undefined>(createMockPrice());
+		render(
+			<PriceInput
+				{...defaultProps}
+				$price={price$}
+				checkBalance={checkBalance}
+			/>,
+		);
+
+		expect(screen.queryByText('Insufficient balance')).not.toBeInTheDocument();
+
+		const input = screen.getByRole('textbox', { name: /price/i });
+		fireEvent.change(input, { target: { value: '2000' } });
+
+		expect(checkBalance.callback).toHaveBeenCalledWith(false);
+	});
+
+	it('should not call onPriceChange when amount is zero', () => {
+		const onPriceChange = vi.fn();
+		render(<PriceInput {...defaultProps} onPriceChange={onPriceChange} />);
+
+		const input = screen.getByRole('textbox', { name: /price/i });
+		fireEvent.change(input, { target: { value: '0' } });
+
+		expect(onPriceChange).not.toHaveBeenCalled();
+	});
+});

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

@@ -1,21 +1,21 @@
 import { Box, NumericInput, Text } from '@0xsequence/design-system';
 import type { Observable } from '@legendapp/state';
-import { observer } from '@legendapp/state/react';
-import { useCallback, useMemo } from 'react';
-import { type Hex } from 'viem';
+import { type Hex, parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
 import type { Price } from '../../../../../../types';
 import CurrencyImage from '../currencyImage';
 import CurrencyOptionsSelect from '../currencyOptionsSelect';
 import { priceInputCurrencyImage, priceInputWrapper } from './styles.css';
-import { usePriceInput } from './hooks/usePriceInput';
-import { useBalanceCheck } from './hooks/useBalanceCheck';
+import { use$ } from '@legendapp/state/react';
+import { useCurrencyBalance } from '../../../../../hooks/useCurrencyBalance';
+import { useState } from 'react';
 
 type PriceInputProps = {
 	collectionAddress: Hex;
 	chainId: string;
 	secondCurrencyAsDefault?: boolean;
 	$price: Observable<Price | undefined>;
+	includeNativeCurrency?: boolean;
 	onPriceChange?: () => void;
 	checkBalance?: {
 		enabled: boolean;
@@ -23,56 +23,52 @@ type PriceInputProps = {
 	};
 };
 
-const PriceInput = observer(function PriceInput({
+export default function PriceInput({
 	chainId,
 	collectionAddress,
 	$price,
 	onPriceChange,
 	checkBalance,
 	secondCurrencyAsDefault,
+	includeNativeCurrency,
 }: PriceInputProps) {
 	const { address: accountAddress } = useAccount();
-	const currencyDecimals = $price.currency.decimals.get() || 18;
-	const currencyAddress = $price.currency.contractAddress.get() as Hex;
+	const currencyDecimals = use$($price.currency.decimals);
+	const currencyAddress = use$($price.currency.contractAddress);
+	const priceAmountRaw = use$($price.amountRaw);
 
-	const { value, handlePriceChange } = usePriceInput({
-		price$: $price,
-		currencyDecimals,
-		onPriceChange,
-	});
-
-	const { balanceError } = useBalanceCheck({
-		checkBalance,
-		price$: $price,
-		currencyAddress,
+	const { data: balance, isSuccess: isBalanceSuccess } = useCurrencyBalance({
+		currencyAddress: currencyAddress as undefined | Hex,
 		chainId: Number(chainId),
-		userAddress: accountAddress as Hex,
-		currencyDecimals,
+		userAddress: accountAddress,
 	});
 
-	const renderBalanceError = useMemo(() => {
-		if (!balanceError) return null;
+	const balanceError =
+		!!checkBalance?.enabled &&
+		!!isBalanceSuccess &&
+		!!priceAmountRaw &&
+		!!currencyDecimals &&
+		BigInt(priceAmountRaw) > BigInt(balance?.value || 0n);
 
-		return (
-			<Text
-				color="negative"
-				fontSize="xsmall"
-				fontFamily="body"
-				fontWeight="semibold"
-				position="absolute"
-				style={{ bottom: '-13px' }}
-			>
-				{balanceError}
-			</Text>
-		);
-	}, [balanceError]);
+	if (checkBalance?.enabled) {
+		checkBalance.callback(balanceError);
+	}
 
-	const handleChange = useCallback(
-		(event: React.ChangeEvent<HTMLInputElement>) => {
-			handlePriceChange(event.target.value);
-		},
-		[handlePriceChange],
-	);
+	const [value, setValue] = useState('0');
+
+	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const newValue = event.target.value;
+		setValue(newValue);
+		try {
+			const parsedAmount = parseUnits(newValue, Number(currencyDecimals));
+			$price.amountRaw.set(parsedAmount.toString());
+			if (onPriceChange && parsedAmount !== 0n) {
+				onPriceChange();
+			}
+		} catch {
+			$price.amountRaw.set('0');
+		}
+	};
 
 	return (
 		<Box className={priceInputWrapper} position="relative">
@@ -97,6 +93,7 @@ const PriceInput = observer(function PriceInput({
 						collectionAddress={collectionAddress}
 						chainId={chainId}
 						secondCurrencyAsDefault={secondCurrencyAsDefault}
+						includeNativeCurrency={includeNativeCurrency}
 					/>
 				}
 				value={value}
@@ -104,9 +101,18 @@ const PriceInput = observer(function PriceInput({
 				width="full"
 			/>
 
-			{renderBalanceError}
+			{balanceError && (
+				<Text
+					color="negative"
+					fontSize="xsmall"
+					fontFamily="body"
+					fontWeight="semibold"
+					position="absolute"
+					style={{ bottom: '-13px' }}
+				>
+					Insufficient balance
+				</Text>
+			)}
 		</Box>
 	);
-});
-
-export default PriceInput;
+}

package/src/react/ui/modals/_internal/components/switchChainModal/__tests__/SwitchChainModal.test.tsx

@@ -0,0 +1,221 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import {
+	cleanup,
+	render,
+	screen,
+	fireEvent,
+	waitFor,
+} from '../../../../../../_internal/test-utils';
+import * as matchers from '@testing-library/jest-dom/matchers';
+import SwitchChainModal, { useSwitchChainModal } from '../index';
+import { switchChainModal$, initialState } from '../store';
+import type { SwitchChainError } from 'viem';
+
+expect.extend(matchers);
+
+const mockSwitchChainAsync = vi
+	.fn()
+	.mockImplementation(() => Promise.resolve({}));
+
+vi.mock('wagmi', async () => {
+	const actual = await vi.importActual<typeof import('wagmi')>('wagmi');
+	return {
+		...(actual ?? {}),
+		useSwitchChain: () => ({
+			switchChainAsync: mockSwitchChainAsync,
+		}),
+	};
+});
+
+vi.mock('../../../../../_internal', () => ({
+	getProviderEl: () => document.body,
+}));
+
+describe('SwitchChainModal', () => {
+	beforeEach(() => {
+		cleanup();
+		vi.clearAllMocks();
+		vi.resetAllMocks();
+
+		switchChainModal$.set({
+			...initialState,
+			open: initialState.open.bind(switchChainModal$),
+			close: initialState.close.bind(switchChainModal$),
+		});
+	});
+
+	afterEach(() => {
+		cleanup();
+		vi.clearAllMocks();
+		switchChainModal$.set({
+			...initialState,
+			open: initialState.open.bind(switchChainModal$),
+			close: initialState.close.bind(switchChainModal$),
+		});
+	});
+
+	test('opens switch chain modal with correct chain', async () => {
+		render(<SwitchChainModal />);
+
+		const { show } = useSwitchChainModal();
+		show({ chainIdToSwitchTo: '1' });
+
+		expect(switchChainModal$.isOpen.get()).toBe(true);
+		expect(switchChainModal$.state.chainIdToSwitchTo.get()).toBe('1');
+
+		const titleElement = await screen.findByText('Wrong network');
+		expect(titleElement).toBeInTheDocument();
+
+		const messageElement = await screen.findByText(
+			/You need to switch to mainnet network before completing the transaction/,
+		);
+		expect(messageElement).toBeInTheDocument();
+
+		const buttonElement = await screen.findByRole('button', {
+			name: /switch network/i,
+		});
+		expect(buttonElement).toBeInTheDocument();
+	});
+
+	test('closes switch chain modal using close button', async () => {
+		render(<SwitchChainModal />);
+
+		const { show } = useSwitchChainModal();
+		show({ chainIdToSwitchTo: '1' });
+
+		expect(switchChainModal$.isOpen.get()).toBe(true);
+		expect(switchChainModal$.state.chainIdToSwitchTo.get()).toBe('1');
+
+		const closeButton = await screen.findByTestId(
+			'switch-chain-modal-close-button',
+		);
+		expect(closeButton).toBeInTheDocument();
+
+		fireEvent.click(closeButton);
+
+		await waitFor(() => {
+			expect(switchChainModal$.isOpen.get()).toBe(undefined);
+			expect(switchChainModal$.state.chainIdToSwitchTo.get()).toBe(undefined);
+		});
+
+		const titleElement = screen.queryByText('Wrong network');
+		expect(titleElement).not.toBeInTheDocument();
+	});
+
+	test('closes switch chain modal using close callback', async () => {
+		render(<SwitchChainModal />);
+
+		const { show, close } = useSwitchChainModal();
+		show({ chainIdToSwitchTo: '1' });
+
+		expect(switchChainModal$.isOpen.get()).toBe(true);
+		expect(switchChainModal$.state.chainIdToSwitchTo.get()).toBe('1');
+
+		close();
+
+		await waitFor(() => {
+			expect(switchChainModal$.isOpen.get()).toBe(undefined);
+			expect(switchChainModal$.state.chainIdToSwitchTo.get()).toBe(undefined);
+		});
+
+		const titleElement = screen.queryByText('Wrong network');
+		expect(titleElement).not.toBeInTheDocument();
+	});
+
+	test('clicking Switch Network button triggers chain switch', async () => {
+		render(<SwitchChainModal />);
+		const { show } = useSwitchChainModal();
+
+		show({ chainIdToSwitchTo: '1', onError: () => {} });
+
+		const switchButton = await screen.findByRole('button', {
+			name: /switch network/i,
+		});
+		expect(switchButton).toBeInTheDocument();
+
+		fireEvent.click(switchButton);
+
+		expect(mockSwitchChainAsync).toHaveBeenCalledWith({ chainId: 1 });
+
+		await waitFor(() => {
+			expect(switchChainModal$.isOpen.get()).toBe(undefined);
+			expect(switchChainModal$.state.isSwitching.get()).toBe(false);
+		});
+	});
+
+	test('shows spinner while switching chain', async () => {
+		mockSwitchChainAsync.mockImplementationOnce(
+			() => new Promise((resolve) => setTimeout(resolve, 100)),
+		);
+
+		render(<SwitchChainModal />);
+		const { show } = useSwitchChainModal();
+
+		show({ chainIdToSwitchTo: '1' });
+
+		const switchButton = await screen.findByRole('button', {
+			name: /switch network/i,
+		});
+		expect(switchButton).toBeInTheDocument();
+
+		fireEvent.click(switchButton);
+
+		await waitFor(() => {
+			expect(switchChainModal$.state.isSwitching.get()).toBe(true);
+		});
+
+		const spinner = await screen.findByTestId('switch-chain-spinner');
+		expect(spinner).toBeInTheDocument();
+
+		await waitFor(() => {
+			expect(switchChainModal$.state.isSwitching.get()).toBe(false);
+			expect(
+				screen.queryByTestId('switch-chain-spinner'),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	test('keeps modal open if chainIdToSwitchTo is empty', async () => {
+		render(<SwitchChainModal />);
+		const { show } = useSwitchChainModal();
+
+		show({
+			chainIdToSwitchTo: '',
+		});
+
+		const switchButton = await screen.findByRole('button', {
+			name: /switch network/i,
+		});
+		expect(switchButton).toBeInTheDocument();
+
+		fireEvent.click(switchButton);
+
+		await waitFor(() => {
+			expect(switchChainModal$.isOpen.get()).toBe(true);
+			expect(switchChainModal$.state.isSwitching.get()).toBe(false);
+		});
+	});
+
+	test('calls onError callback when switching chain fails', async () => {
+		const mockError = new Error(
+			'Failed to switch chain',
+		) as unknown as SwitchChainError;
+		mockSwitchChainAsync.mockRejectedValueOnce(mockError);
+		const onError = vi.fn();
+
+		render(<SwitchChainModal />);
+
+		const { show } = useSwitchChainModal();
+		show({ chainIdToSwitchTo: '1', onError });
+
+		const switchButton = await screen.findByRole('button', {
+			name: /switch network/i,
+		});
+		fireEvent.click(switchButton);
+
+		await waitFor(() => {
+			expect(onError).toHaveBeenCalledWith(mockError);
+			expect(switchChainModal$.isOpen.get()).toBe(true);
+		});
+	});
+});

package/src/react/ui/modals/_internal/components/switchChainModal/index.tsx

@@ -7,7 +7,6 @@ import {
 } from '@0xsequence/design-system';
 import { observer } from '@legendapp/state/react';
 import { Close, Content, Overlay, Portal, Root } from '@radix-ui/react-dialog';
-import type { SwitchChainErrorType } from 'viem';
 import { useSwitchChain } from 'wagmi';
 import { getPresentableChainName } from '../../../../../../utils/network';
 import { getProviderEl, type ChainId } from '../../../../../_internal';
@@ -19,11 +18,12 @@ import {
 	switchChainCta,
 	switchChainModalContent,
 } from './styles.css';
+import type { SwitchChainError } from 'viem';
 
 export type ShowSwitchChainModalArgs = {
 	chainIdToSwitchTo: ChainId;
 	onSuccess?: () => void;
-	onError?: (error: SwitchChainErrorType) => void;
+	onError?: (error: SwitchChainError) => void;
 	onClose?: () => void;
 };
 
@@ -50,11 +50,22 @@ const SwitchChainModal = observer(() => {
 			if (!chainIdToSwitchTo) return;
 			await switchChainAsync({ chainId: Number(chainIdToSwitchTo) });
 
-			switchChainModal$.state.onSuccess?.();
+			if (
+				switchChainModal$.state.onSuccess &&
+				typeof switchChainModal$.state.onSuccess === 'function'
+			) {
+				switchChainModal$.state.onSuccess();
+			}
 
 			switchChainModal$.delete();
 		} catch (error) {
-			switchChainModal$.state.onError?.(error as SwitchChainErrorType);
+			if (
+				error instanceof Error &&
+				switchChainModal$.state.onError.get() &&
+				typeof switchChainModal$.state.onError.get() === 'function'
+			) {
+				switchChainModal$.state.onError.get()?.(error as SwitchChainError);
+			}
 		} finally {
 			isSwitching$.set(false);
 		}
@@ -77,8 +88,15 @@ const SwitchChainModal = observer(() => {
 
 					<Button
 						name="switch-chain"
+						id="switch-chain-button"
 						size="sm"
-						label={isSwitching$.get() ? <Spinner /> : 'Switch Network'}
+						label={
+							isSwitching$.get() ? (
+								<Spinner data-testid="switch-chain-spinner" />
+							) : (
+								'Switch Network'
+							)
+						}
 						variant="primary"
 						pending={isSwitching$.get()}
 						shape="square"
@@ -92,6 +110,7 @@ const SwitchChainModal = observer(() => {
 					/>
 
 					<Close
+						data-testid="switch-chain-modal-close-button"
 						onClick={() => {
 							if (
 								switchChainModal$.state.onClose &&

package/src/react/ui/modals/_internal/components/switchChainModal/store.ts

@@ -1,7 +1,7 @@
 import { observable } from '@legendapp/state';
-import type { SwitchChainErrorType } from 'viem';
 import type { ShowSwitchChainModalArgs } from '.';
 import type { ChainId } from '../../../../../_internal';
+import type { SwitchChainError } from 'viem';
 
 export interface SwitchChainModalState {
 	isOpen: boolean;
@@ -11,7 +11,7 @@ export interface SwitchChainModalState {
 		chainIdToSwitchTo: ChainId | undefined;
 		isSwitching: boolean;
 		onSuccess: (() => void) | undefined;
-		onError: undefined | ((error: SwitchChainErrorType) => void);
+		onError: undefined | ((error: SwitchChainError) => void);
 		onClose: (() => void) | undefined;
 	};
 }

package/src/react/ui/modals/_internal/components/transactionPreview/index.tsx

@@ -70,7 +70,12 @@ const TransactionPreview = observer(
 		}
 
 		return (
-			<Box padding="3" background="backgroundSecondary" borderRadius="md">
+			<Box
+				padding="3"
+				background="backgroundSecondary"
+				borderRadius="md"
+				data-testid="transaction-preview"
+			>
 				<Box display="flex" alignItems="center">
 					<Text
 						color="text50"
@@ -78,6 +83,7 @@ const TransactionPreview = observer(
 						fontWeight="medium"
 						marginRight="1"
 						fontFamily="body"
+						data-testid="transaction-preview-title"
 					>
 						{title}
 					</Text>
@@ -96,6 +102,7 @@ const TransactionPreview = observer(
 						borderRadius="xs"
 						marginRight="3"
 						style={{ objectFit: 'cover' }}
+						data-testid="transaction-preview-image"
 					/>
 
 					<Box
@@ -109,11 +116,17 @@ const TransactionPreview = observer(
 							fontSize="small"
 							fontWeight="medium"
 							fontFamily="body"
+							data-testid="transaction-preview-collectible-name"
 						>
 							{collectibleName}
 						</Text>
 
-						<Text color="text100" fontSize="small" fontFamily="body">
+						<Text
+							color="text100"
+							fontSize="small"
+							fontFamily="body"
+							data-testid="transaction-preview-collection-name"
+						>
 							{collectionName}
 						</Text>
 					</Box>
@@ -125,6 +138,7 @@ const TransactionPreview = observer(
 							alignItems="center"
 							justifyContent="flex-end"
 							gap="1"
+							data-testid="transaction-preview-price"
 						>
 							<Image src={currencyImageUrl} width="3" height="3" />
 

package/src/react/ui/modals/_internal/components/transactionPreview/useTransactionPreviewTitle.tsx

@@ -1,4 +1,4 @@
-import type { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
+import type { TransactionType } from '../../../../../_internal/types';
 import type { ConfirmationStatus } from '../transactionStatusModal/store';
 import { TRANSACTION_TITLES } from './consts';