@0xsequence/marketplace-sdk 0.0.0-20250513233135

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

@@ -0,0 +1,212 @@
+import { observable } from '@legendapp/state';
+import { fireEvent, render, screen } from '@test';
+import { describe, expect, it } from 'vitest';
+import QuantityInput from '..';
+
+describe('QuantityInput', () => {
+	const defaultProps = {
+		$quantity: observable<string>('1'),
+		$invalidQuantity: observable<boolean>(false),
+		decimals: 1,
+		maxQuantity: '10',
+	};
+
+	it('should render quantity input', () => {
+		render(<QuantityInput {...defaultProps} />);
+		expect(
+			screen.getByRole('textbox', { name: /Enter quantity/i }),
+		).toBeInTheDocument();
+	});
+
+	it('should display current quantity value', () => {
+		const quantity$ = observable<string>('5');
+		render(<QuantityInput {...defaultProps} $quantity={quantity$} />);
+
+		const input = screen.getByRole('textbox', { name: /Enter quantity/i });
+		expect(input).toHaveValue('5');
+	});
+
+	it('should handle quantity changes', () => {
+		const quantity$ = observable<string>('1');
+		render(<QuantityInput {...defaultProps} $quantity={quantity$} />);
+
+		const input = screen.getByRole('textbox', { name: /Enter quantity/i });
+		fireEvent.change(input, { target: { value: '5' } });
+
+		expect(quantity$.get()).toBe('5');
+	});
+
+	it('should not allow values greater than maxQuantity', () => {
+		const quantity$ = observable<string>('1');
+		const invalidQuantity$ = observable<boolean>(false);
+
+		render(
+			<QuantityInput
+				{...defaultProps}
+				$quantity={quantity$}
+				$invalidQuantity={invalidQuantity$}
+			/>,
+		);
+
+		const input = screen.getByRole('textbox', { name: /Enter quantity/i });
+		fireEvent.change(input, { target: { value: '15' } });
+
+		expect(quantity$.get()).toBe('10'); // Now capped at max instead of invalid
+		expect(invalidQuantity$.get()).toBe(false);
+	});
+
+	it('should handle decimal values correctly based on decimal prop', () => {
+		const quantity$ = observable<string>('1');
+		const invalidQuantity$ = observable<boolean>(false);
+
+		render(
+			<QuantityInput
+				{...defaultProps}
+				$quantity={quantity$}
+				$invalidQuantity={invalidQuantity$}
+				decimals={2}
+			/>,
+		);
+
+		const input = screen.getByRole('textbox', { name: /Enter quantity/i });
+		fireEvent.change(input, { target: { value: '1.234' } });
+
+		expect(quantity$.get()).toBe('1.23'); // Should truncate to 2 decimals
+	});
+
+	it('should validate and mark invalid quantities', () => {
+		const quantity$ = observable<string>('1');
+		const invalidQuantity$ = observable<boolean>(false);
+
+		render(
+			<QuantityInput
+				{...defaultProps}
+				$quantity={quantity$}
+				$invalidQuantity={invalidQuantity$}
+			/>,
+		);
+
+		const input = screen.getByRole('textbox', { name: /Enter quantity/i });
+
+		// Test less than min value (should set invalidQuantity to true)
+		fireEvent.change(input, { target: { value: '0' } });
+		expect(invalidQuantity$.get()).toBe(true);
+
+		// Test empty value (should set invalidQuantity to true)
+		fireEvent.change(input, { target: { value: '' } });
+		expect(invalidQuantity$.get()).toBe(true);
+
+		// Reset to valid value
+		fireEvent.change(input, { target: { value: '1' } });
+		expect(invalidQuantity$.get()).toBe(false);
+	});
+
+	it('should increment quantity when increment button is clicked', () => {
+		const quantity$ = observable<string>('5');
+
+		render(<QuantityInput {...defaultProps} $quantity={quantity$} />);
+
+		const incrementButton = screen.getAllByRole('button')[1]; // The second button is the increment button
+		fireEvent.click(incrementButton);
+
+		expect(quantity$.get()).toBe('6');
+	});
+
+	it('should decrement quantity when decrement button is clicked', () => {
+		const quantity$ = observable<string>('5');
+
+		render(<QuantityInput {...defaultProps} $quantity={quantity$} />);
+
+		const decrementButton = screen.getAllByRole('button')[0]; // The first button is the decrement button
+		fireEvent.click(decrementButton);
+
+		expect(quantity$.get()).toBe('4');
+	});
+
+	it('should disable decrement button when quantity is minimum value', () => {
+		const quantity$ = observable<string>('0.1');
+
+		render(<QuantityInput {...defaultProps} $quantity={quantity$} />);
+
+		const decrementButton = screen.getAllByRole('button')[0]; // The first button is the decrement button
+		expect(decrementButton).toBeDisabled();
+	});
+
+	it('should disable increment button when quantity is maximum value', () => {
+		const quantity$ = observable<string>('10');
+
+		render(<QuantityInput {...defaultProps} $quantity={quantity$} />);
+
+		const incrementButton = screen.getAllByRole('button')[1]; // The second button is the increment button
+		expect(incrementButton).toBeDisabled();
+	});
+
+	it('should properly handle non-zero decimals for minimum values', () => {
+		const quantity$ = observable<string>('1');
+
+		render(
+			<QuantityInput {...defaultProps} $quantity={quantity$} decimals={1} />,
+		);
+
+		// Set to 1 first
+		const input = screen.getByRole('textbox', { name: /Enter quantity/i });
+		fireEvent.change(input, { target: { value: '1' } });
+
+		// Click decrement button, should go to minimum value
+		const decrementButton = screen.getAllByRole('button')[0]; // The first button is the decrement button
+		fireEvent.click(decrementButton);
+
+		// For decimals=1, the min value should be 0.1
+		expect(quantity$.get()).toBe('0.1');
+
+		// Clicking again shouldn't reduce below minimum
+		fireEvent.click(decrementButton);
+		expect(quantity$.get()).toBe('0.1');
+	});
+
+	it('should cap quantity to maxQuantity when incrementing past the maximum', () => {
+		const quantity$ = observable<string>('9');
+		const maxQuantity = '10';
+
+		render(
+			<QuantityInput
+				{...defaultProps}
+				$quantity={quantity$}
+				maxQuantity={maxQuantity}
+			/>,
+		);
+
+		// Click increment button when quantity is 9
+		const incrementButton = screen.getAllByRole('button')[1]; // The second button is the increment button
+		fireEvent.click(incrementButton);
+
+		// Value should be 10
+		expect(quantity$.get()).toBe('10');
+
+		// Click increment again - should still be capped at 10
+		fireEvent.click(incrementButton);
+		expect(quantity$.get()).toBe('10');
+	});
+
+	it('should set quantity to maxQuantity when direct input exceeds max', () => {
+		const quantity$ = observable<string>('5');
+		const invalidQuantity$ = observable<boolean>(false);
+		const maxQuantity = '10';
+
+		render(
+			<QuantityInput
+				{...defaultProps}
+				$quantity={quantity$}
+				$invalidQuantity={invalidQuantity$}
+				maxQuantity={maxQuantity}
+			/>,
+		);
+
+		const input = screen.getByRole('textbox', { name: /Enter quantity/i });
+		fireEvent.change(input, { target: { value: '15' } });
+
+		// Value should be capped at max
+		expect(quantity$.get()).toBe('10');
+		expect(invalidQuantity$.get()).toBe(false);
+	});
+});

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

@@ -0,0 +1,166 @@
+'use client';
+
+import {
+	AddIcon,
+	IconButton,
+	NumericInput,
+	SubtractIcon,
+} from '@0xsequence/design-system';
+import type { Observable } from '@legendapp/state';
+import { observer } from '@legendapp/state/react';
+import * as dn from 'dnum';
+import { useState } from 'react';
+import { cn } from '../../../../../../utils';
+
+type QuantityInputProps = {
+	$quantity: Observable<string>;
+	$invalidQuantity: Observable<boolean>;
+	decimals: number;
+	maxQuantity: string;
+	className?: string;
+	disabled?: boolean;
+};
+
+export default observer(function QuantityInput({
+	$quantity,
+	$invalidQuantity,
+	decimals,
+	maxQuantity,
+	className,
+	disabled,
+}: QuantityInputProps) {
+	const dnMaxQuantity = dn.from(maxQuantity, decimals);
+	const dnOne = dn.from('1', decimals);
+	const min = decimals > 0 ? Number(`0.${'1'.padStart(decimals, '0')}`) : 0;
+	const dnMin = dn.from(min, decimals);
+
+	const [dnQuantity, setDnQuantity] = useState(
+		dn.from($quantity.get(), decimals),
+	);
+
+	const [localQuantity, setLocalQuantity] = useState($quantity.get());
+
+	const setQuantity = ({
+		value,
+		isValid,
+	}: {
+		value: string;
+		isValid: boolean;
+	}) => {
+		setLocalQuantity(value);
+		if (isValid) {
+			$quantity.set(value);
+			setDnQuantity(dn.from(value, decimals));
+			$invalidQuantity.set(false);
+		} else {
+			$invalidQuantity.set(true);
+		}
+	};
+
+	function handleChangeQuantity(value: string) {
+		if (!value || Number.isNaN(Number(value)) || value.endsWith('.')) {
+			setQuantity({
+				value: value,
+				isValid: false,
+			});
+			return;
+		}
+		const dnValue = dn.from(value, decimals);
+		const isBiggerThanMax = dn.greaterThan(dnValue, dnMaxQuantity);
+		const isLessThanMin = dn.lessThan(dnValue, dnMin);
+
+		if (isLessThanMin) {
+			setQuantity({
+				value: value, // Trying to enter fraction starting with 0
+				isValid: false,
+			});
+			return;
+		}
+
+		if (isBiggerThanMax) {
+			setQuantity({
+				value: maxQuantity,
+				isValid: true, // Is vaid is true because we override the value
+			});
+			return;
+		}
+
+		setQuantity({
+			value: dn.toString(dnValue, decimals),
+			isValid: true,
+		});
+	}
+
+	function handleIncrement() {
+		const newValue = dn.add(dnQuantity, dnOne);
+		if (dn.greaterThanOrEqual(newValue, dnMaxQuantity)) {
+			setQuantity({
+				value: maxQuantity,
+				isValid: true,
+			});
+		} else {
+			setQuantity({
+				value: dn.toString(newValue, decimals),
+				isValid: true,
+			});
+		}
+	}
+
+	function handleDecrement() {
+		const newValue = dn.subtract(dnQuantity, dnOne);
+		if (dn.lessThanOrEqual(newValue, dnMin)) {
+			setQuantity({
+				value: String(min),
+				isValid: true,
+			});
+		} else {
+			setQuantity({
+				value: dn.toString(newValue, decimals),
+				isValid: true,
+			});
+		}
+	}
+
+	return (
+		<div
+			className={cn(
+				'flex w-full flex-col [&>label>div>div>div:has(:disabled):hover]:opacity-100 [&>label>div>div>div:has(:disabled)]:opacity-100 [&>label>div>div>div>input]:text-xs [&>label>div>div>div]:h-9 [&>label>div>div>div]:rounded [&>label>div>div>div]:pr-0 [&>label>div>div>div]:pl-3 [&>label>div>div>div]:text-xs [&>label]:gap-[2px]',
+				className,
+				disabled && 'pointer-events-none opacity-50',
+			)}
+		>
+			<NumericInput
+				className="w-full pl-1"
+				name={'quantity'}
+				decimals={decimals || 0}
+				label={'Enter quantity'}
+				labelLocation="top"
+				controls={
+					<div className="mr-2 flex items-center gap-1">
+						<IconButton
+							disabled={dn.lessThanOrEqual(dnQuantity, dnMin)}
+							onClick={handleDecrement}
+							size="xs"
+							icon={SubtractIcon}
+						/>
+
+						<IconButton
+							disabled={dn.greaterThanOrEqual(dnQuantity, dnMaxQuantity)}
+							onClick={handleIncrement}
+							size="xs"
+							icon={AddIcon}
+						/>
+					</div>
+				}
+				value={localQuantity}
+				onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+					handleChangeQuantity(e.target.value)
+				}
+				width={'full'}
+			/>
+			{$invalidQuantity.get() && (
+				<div className="text-negative text-sm">Invalid quantity</div>
+			)}
+		</div>
+	);
+});

package/src/react/ui/modals/_internal/components/selectWaasFeeOptions/__tests__/ActionButtons.test.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { fireEvent, render, screen } from '@test';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import ActionButtons from '../_components/ActionButtons';
+
+describe('ActionButtons', () => {
+	const mockOnCancel = vi.fn();
+	const mockOnConfirm = vi.fn();
+
+	const defaultProps = {
+		onCancel: mockOnCancel,
+		onConfirm: mockOnConfirm,
+		disabled: false,
+		loading: false,
+		confirmed: false,
+	};
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should render both buttons', () => {
+		render(<ActionButtons {...defaultProps} />);
+
+		expect(screen.getByText('Cancel')).toBeInTheDocument();
+		expect(screen.getByText('Continue with')).toBeInTheDocument();
+	});
+
+	it('should call onCancel when cancel button is clicked', () => {
+		render(<ActionButtons {...defaultProps} />);
+
+		const cancelButton = screen.getByText('Cancel');
+		fireEvent.click(cancelButton);
+
+		expect(mockOnCancel).toHaveBeenCalledTimes(1);
+	});
+
+	it('should call onConfirm when confirm button is clicked', () => {
+		render(<ActionButtons {...defaultProps} />);
+
+		const confirmButton = screen.getByText('Continue with');
+		fireEvent.click(confirmButton);
+
+		expect(mockOnConfirm).toHaveBeenCalledTimes(1);
+	});
+
+	it('should disable confirm button when disabled prop is true', () => {
+		render(<ActionButtons {...defaultProps} disabled={true} />);
+
+		const confirmButton = screen.getByText('Continue with').closest('button');
+		expect(confirmButton).toBeDisabled();
+
+		if (confirmButton) {
+			fireEvent.click(confirmButton);
+		}
+		expect(mockOnConfirm).not.toHaveBeenCalled();
+	});
+
+	it('should display token symbol when provided', () => {
+		render(<ActionButtons {...defaultProps} tokenSymbol="ETH" />);
+
+		expect(screen.getByText('Continue with ETH')).toBeInTheDocument();
+	});
+
+	it('should show skeleton loading when tokenSymbol is not provided', () => {
+		render(<ActionButtons {...defaultProps} />);
+
+		expect(screen.getByText('Continue with')).toBeInTheDocument();
+		expect(document.querySelector('.animate-shimmer')).toBeInTheDocument();
+	});
+});

package/src/react/ui/modals/_internal/components/selectWaasFeeOptions/__tests__/BalanceIndicator.test.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { render, screen } from '@test';
+import { describe, expect, it } from 'vitest';
+import BalanceIndicator from '../_components/BalanceIndicator';
+
+describe('BalanceIndicator', () => {
+	it('should render warning icon and negative text when insufficient balance', () => {
+		render(
+			<BalanceIndicator
+				insufficientBalance={true}
+				currencyBalance={{ formatted: '0.5' }}
+				selectedFeeOption={{ token: { symbol: 'ETH' } }}
+			/>,
+		);
+
+		expect(document.querySelector('.text-negative')).toBeInTheDocument();
+		expect(screen.getByText('You have 0.5 ETH')).toBeInTheDocument();
+		expect(screen.getByText('You have 0.5 ETH').className).toContain(
+			'text-negative',
+		);
+	});
+
+	it('should render checkmark icon and normal text when balance is sufficient', () => {
+		render(
+			<BalanceIndicator
+				insufficientBalance={false}
+				currencyBalance={{ formatted: '1.5' }}
+				selectedFeeOption={{ token: { symbol: 'ETH' } }}
+			/>,
+		);
+
+		expect(document.querySelector('.text-positive')).toBeInTheDocument();
+		expect(screen.getByText('You have 1.5 ETH')).toBeInTheDocument();
+		expect(screen.getByText('You have 1.5 ETH').className).not.toContain(
+			'text-negative',
+		);
+	});
+
+	it('should handle undefined currencyBalance gracefully', () => {
+		render(
+			<BalanceIndicator
+				insufficientBalance={false}
+				selectedFeeOption={{ token: { symbol: 'ETH' } }}
+			/>,
+		);
+
+		expect(screen.getByText('You have 0 ETH')).toBeInTheDocument();
+	});
+});

package/src/react/ui/modals/_internal/components/selectWaasFeeOptions/__tests__/SelectWaasFeeOptions.test.tsx

@@ -0,0 +1,193 @@
+import { TokenType } from '@0xsequence/api';
+import * as useNetworkModule from '@0xsequence/connect';
+import * as useWaasFeeOptionsModule from '@0xsequence/connect';
+import { NetworkType } from '@0xsequence/network';
+import { observable } from '@legendapp/state';
+import { render, screen } from '@test';
+import { TEST_CURRENCY } from '@test/const';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import SelectWaasFeeOptions from '..';
+import type {
+	FeeOption,
+	FeeOptionExtended,
+	WaasFeeOptionConfirmation,
+} from '../../../../../../../types/waas-types';
+import { selectWaasFeeOptions$ } from '../store';
+import * as useWaasFeeOptionManagerModule from '../useWaasFeeOptionManager';
+
+const mockFeeOption: FeeOptionExtended = {
+	gasLimit: 21000,
+	to: '0x123',
+	value: '1000000000000000',
+	token: {
+		chainId: 1,
+		contractAddress: TEST_CURRENCY.contractAddress,
+		decimals: TEST_CURRENCY.decimals,
+		logoURL: TEST_CURRENCY.imageUrl,
+		name: TEST_CURRENCY.name,
+		symbol: TEST_CURRENCY.symbol,
+		tokenID: null,
+		type: TokenType.ERC20,
+	},
+	balance: '1000000000000000',
+	balanceFormatted: '1',
+	hasEnoughBalanceForFee: true,
+};
+
+const mockPendingFeeOptionConfirmation: WaasFeeOptionConfirmation = {
+	id: 'fee-confirmation-id',
+	options: [mockFeeOption],
+	chainId: 1,
+};
+
+// Mock currency balance with formatted value
+const mockCurrencyBalance = {
+	value: 2000000000000000n,
+	formatted: '0.002',
+};
+
+describe('SelectWaasFeeOptions', () => {
+	const mockOnCancel = vi.fn();
+	const mockHandleConfirmFeeOption = vi.fn();
+
+	beforeEach(() => {
+		vi.resetAllMocks();
+		vi.resetModules();
+
+		selectWaasFeeOptions$.isVisible.set(true);
+		selectWaasFeeOptions$.selectedFeeOption.set(undefined);
+		selectWaasFeeOptions$.pendingFeeOptionConfirmation.set(undefined);
+	});
+
+	it('should not render when isVisible is false', () => {
+		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
+			selectedFeeOption$: observable<FeeOptionExtended | undefined>(
+				mockFeeOption,
+			),
+			selectedFeeOption: mockFeeOption,
+			// @ts-expect-error - types are not compatible
+			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation,
+			currencyBalance: mockCurrencyBalance,
+			currencyBalanceLoading: false,
+			insufficientBalance: false,
+			feeOptionsConfirmed: false,
+			handleConfirmFeeOption: mockHandleConfirmFeeOption,
+		});
+
+		// Set isVisible to false
+		selectWaasFeeOptions$.isVisible.set(false);
+
+		const { container } = render(
+			<SelectWaasFeeOptions chainId={1} onCancel={mockOnCancel} />,
+		);
+
+		expect(container.firstChild).toBeNull();
+	});
+
+	it('should not render on testnet', () => {
+		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
+			selectedFeeOption$: observable<FeeOption | undefined>(mockFeeOption),
+			selectedFeeOption: mockFeeOption,
+			// @ts-expect-error - types are not compatible
+			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation,
+			currencyBalance: mockCurrencyBalance,
+			currencyBalanceLoading: false,
+			insufficientBalance: false,
+			feeOptionsConfirmed: false,
+			handleConfirmFeeOption: mockHandleConfirmFeeOption,
+		});
+
+		vi.spyOn(useNetworkModule, 'getNetwork').mockReturnValue({
+			type: NetworkType.TESTNET,
+			chainId: 1,
+			name: 'Testnet',
+			nativeToken: TEST_CURRENCY,
+		});
+		vi.spyOn(useWaasFeeOptionsModule, 'useWaasFeeOptions').mockReturnValue([
+			// @ts-expect-error - types are not compatible
+			mockPendingFeeOptionConfirmation,
+			vi.fn(),
+		]);
+
+		const { container } = render(
+			<SelectWaasFeeOptions chainId={1} onCancel={mockOnCancel} />,
+		);
+
+		expect(container.firstChild).toBeNull();
+	});
+
+	it('should render loading skeleton when fee options are loading', () => {
+		// Mock the hook with loading state
+		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
+			selectedFeeOption$: observable<FeeOption | undefined>(undefined),
+			selectedFeeOption: mockFeeOption,
+			pendingFeeOptionConfirmation: undefined,
+			currencyBalance: undefined,
+			currencyBalanceLoading: true,
+			insufficientBalance: false,
+			feeOptionsConfirmed: false,
+			handleConfirmFeeOption: mockHandleConfirmFeeOption,
+		});
+		vi.spyOn(useWaasFeeOptionsModule, 'useWaasFeeOptions').mockReturnValue([
+			// @ts-expect-error - types are not compatible
+			mockPendingFeeOptionConfirmation,
+			vi.fn(),
+		]);
+		vi.spyOn(useNetworkModule, 'getNetwork').mockReturnValue({
+			type: NetworkType.MAINNET,
+			chainId: 1,
+			name: 'Mainnet',
+			nativeToken: TEST_CURRENCY,
+		});
+
+		render(<SelectWaasFeeOptions chainId={1} onCancel={mockOnCancel} />);
+
+		expect(screen.getByText('Select a fee option')).toBeInTheDocument();
+
+		// Should render skeleton
+		const skeleton = document.querySelector('.h-\\[52px\\]');
+		expect(skeleton).toBeInTheDocument();
+		expect(skeleton).toHaveClass('animate-shimmer');
+	});
+
+	it('should render fee options when loaded', () => {
+		selectWaasFeeOptions$.pendingFeeOptionConfirmation.set(
+			mockPendingFeeOptionConfirmation,
+		);
+		selectWaasFeeOptions$.selectedFeeOption.set(mockFeeOption);
+
+		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
+			selectedFeeOption$: selectWaasFeeOptions$.selectedFeeOption,
+			selectedFeeOption: mockFeeOption,
+			// @ts-expect-error - types are not compatible
+			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation,
+			currencyBalance: mockCurrencyBalance,
+			currencyBalanceLoading: false,
+			insufficientBalance: false,
+			feeOptionsConfirmed: false,
+			handleConfirmFeeOption: mockHandleConfirmFeeOption,
+		});
+		vi.spyOn(useWaasFeeOptionsModule, 'useWaasFeeOptions').mockReturnValue([
+			// @ts-expect-error - types are not compatible
+			mockPendingFeeOptionConfirmation,
+			vi.fn(),
+		]);
+		vi.spyOn(useNetworkModule, 'getNetwork').mockReturnValue({
+			type: NetworkType.MAINNET,
+			chainId: 1,
+			name: 'Mainnet',
+			nativeToken: TEST_CURRENCY,
+		});
+
+		render(
+			<SelectWaasFeeOptions
+				chainId={1}
+				onCancel={mockOnCancel}
+				titleOnConfirm="Confirm fee option"
+			/>,
+		);
+
+		expect(screen.getByText('Select a fee option')).toBeInTheDocument();
+		expect(screen.queryByText('Confirm fee option')).not.toBeInTheDocument();
+	});
+});