@0xsequence/marketplace-sdk 0.8.3 → 0.8.5

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);
 	});
 });

package/src/react/ui/modals/_internal/components/floorPriceText/__tests__/FloorPriceText.test.tsx

@@ -0,0 +1,199 @@
+import { render } from '@test';
+import type { Hex } from 'viem';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Currency } from '../../../../../../_internal/api/marketplace.gen';
+import * as hooks from '../../../../../../hooks';
+import FloorPriceText from '../index';
+
+describe('FloorPriceText', () => {
+	const mockCurrency: Currency = {
+		contractAddress: '0x0000000000000000000000000000000000000000' as Hex,
+		symbol: 'ETH',
+		decimals: 18,
+		name: 'Ethereum',
+		chainId: 1,
+		status: 'VERIFIED' as Currency['status'],
+		imageUrl: '',
+		exchangeRate: 0,
+		defaultChainCurrency: false,
+		nativeCurrency: true,
+		createdAt: '',
+		updatedAt: '',
+	};
+
+	const mockProps = {
+		chainId: 1,
+		collectionAddress: '0x1234567890123456789012345678901234567890' as Hex,
+		tokenId: '1',
+		price: {
+			amountRaw: '1000000000000000000',
+			currency: mockCurrency,
+		},
+		onBuyNow: vi.fn(),
+	};
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+		vi.restoreAllMocks();
+	});
+
+	it('should render null when loading', () => {
+		const useLowestListingSpy = vi.spyOn(hooks, 'useLowestListing');
+		const useComparePricesSpy = vi.spyOn(hooks, 'useComparePrices');
+
+		const lowestListingMock = {
+			data: undefined,
+			isLoading: true,
+			status: 'pending',
+			fetchStatus: 'fetching',
+		} as unknown as ReturnType<typeof hooks.useLowestListing>;
+
+		const comparePricesMock = {
+			data: undefined,
+			isLoading: true,
+			status: 'pending',
+			fetchStatus: 'fetching',
+		} as unknown as ReturnType<typeof hooks.useComparePrices>;
+
+		useLowestListingSpy.mockReturnValue(lowestListingMock);
+		useComparePricesSpy.mockReturnValue(comparePricesMock);
+
+		const { container } = render(<FloorPriceText {...mockProps} />);
+		expect(container.firstChild).toBeNull();
+	});
+
+	it('should render null when floorPriceRaw is undefined even when not loading', () => {
+		const useLowestListingSpy = vi.spyOn(hooks, 'useLowestListing');
+		const useComparePricesSpy = vi.spyOn(hooks, 'useComparePrices');
+
+		const lowestListingMock = {
+			data: undefined,
+			isLoading: false,
+			status: 'success',
+			fetchStatus: 'idle',
+		} as ReturnType<typeof hooks.useLowestListing>;
+
+		const comparePricesMock = {
+			data: undefined,
+			isLoading: false,
+			status: 'success',
+			fetchStatus: 'idle',
+		} as unknown as ReturnType<typeof hooks.useComparePrices>;
+
+		useLowestListingSpy.mockReturnValue(lowestListingMock);
+		useComparePricesSpy.mockReturnValue(comparePricesMock);
+
+		const { container } = render(<FloorPriceText {...mockProps} />);
+		expect(container.firstChild).toBeNull();
+	});
+
+	it('should display "Same as floor price" and Buy Now button when price is same as floor price', () => {
+		const useLowestListingSpy = vi.spyOn(hooks, 'useLowestListing');
+		const useComparePricesSpy = vi.spyOn(hooks, 'useComparePrices');
+
+		const lowestListingMock = {
+			data: {
+				priceAmount: '1000000000000000000',
+				priceAmountFormatted: '1',
+				priceCurrencyAddress:
+					'0x0000000000000000000000000000000000000000' as Hex,
+			},
+			isLoading: false,
+			status: 'success',
+			fetchStatus: 'idle',
+		} as ReturnType<typeof hooks.useLowestListing>;
+
+		const comparePricesMock = {
+			data: {
+				status: 'same',
+				percentageDifferenceFormatted: '0',
+			},
+			isLoading: false,
+			status: 'success',
+			fetchStatus: 'idle',
+		} as ReturnType<typeof hooks.useComparePrices>;
+
+		useLowestListingSpy.mockReturnValue(lowestListingMock);
+		useComparePricesSpy.mockReturnValue(comparePricesMock);
+
+		const { getByText } = render(<FloorPriceText {...mockProps} />);
+
+		expect(getByText('Same as floor price')).toBeInTheDocument();
+		expect(getByText('Buy for 1 ETH')).toBeInTheDocument();
+		expect(mockProps.onBuyNow).not.toHaveBeenCalled();
+	});
+
+	it('should display percentage below floor price and not show Buy Now button when price is below floor price', () => {
+		const useLowestListingSpy = vi.spyOn(hooks, 'useLowestListing');
+		const useComparePricesSpy = vi.spyOn(hooks, 'useComparePrices');
+
+		const lowestListingMock = {
+			data: {
+				priceAmount: '1200000000000000000', // Floor price is higher
+				priceAmountFormatted: '1.2',
+				priceCurrencyAddress:
+					'0x0000000000000000000000000000000000000000' as Hex,
+			},
+			isLoading: false,
+			status: 'success',
+			fetchStatus: 'idle',
+		} as ReturnType<typeof hooks.useLowestListing>;
+
+		const comparePricesMock = {
+			data: {
+				status: 'below',
+				percentageDifferenceFormatted: '20',
+			},
+			isLoading: false,
+			status: 'success',
+			fetchStatus: 'idle',
+		} as ReturnType<typeof hooks.useComparePrices>;
+
+		useLowestListingSpy.mockReturnValue(lowestListingMock);
+		useComparePricesSpy.mockReturnValue(comparePricesMock);
+
+		const { getByText, queryByText } = render(
+			<FloorPriceText {...mockProps} />,
+		);
+
+		expect(getByText('20% below floor price')).toBeInTheDocument();
+		expect(queryByText('Buy for 1.2 ETH')).not.toBeInTheDocument();
+		expect(mockProps.onBuyNow).not.toHaveBeenCalled();
+	});
+
+	it('should display percentage above floor price and show Buy Now button when price is above floor price', () => {
+		const useLowestListingSpy = vi.spyOn(hooks, 'useLowestListing');
+		const useComparePricesSpy = vi.spyOn(hooks, 'useComparePrices');
+
+		const lowestListingMock = {
+			data: {
+				priceAmount: '800000000000000000', // Floor price is lower
+				priceAmountFormatted: '0.8',
+				priceCurrencyAddress:
+					'0x0000000000000000000000000000000000000000' as Hex,
+			},
+			isLoading: false,
+			status: 'success',
+			fetchStatus: 'idle',
+		} as ReturnType<typeof hooks.useLowestListing>;
+
+		const comparePricesMock = {
+			data: {
+				status: 'above',
+				percentageDifferenceFormatted: '25',
+			},
+			isLoading: false,
+			status: 'success',
+			fetchStatus: 'idle',
+		} as ReturnType<typeof hooks.useComparePrices>;
+
+		useLowestListingSpy.mockReturnValue(lowestListingMock);
+		useComparePricesSpy.mockReturnValue(comparePricesMock);
+
+		const { getByText } = render(<FloorPriceText {...mockProps} />);
+
+		expect(getByText('25% above floor price')).toBeInTheDocument();
+		expect(getByText('Buy for 0.8 ETH')).toBeInTheDocument();
+		expect(mockProps.onBuyNow).not.toHaveBeenCalled();
+	});
+});

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

@@ -0,0 +1,55 @@
+import { observable } from '@legendapp/state';
+import { TEST_CURRENCY } from '@test/const';
+import { fireEvent, render, screen } from '@test/test-utils';
+import { zeroAddress } from 'viem';
+import { describe, expect, it, vi } from 'vitest';
+import PriceInput from '..';
+
+const defaultProps = {
+	chainId: 1,
+	collectionAddress: zeroAddress,
+	$price: observable({
+		amountRaw: '0',
+		currency: TEST_CURRENCY,
+	}),
+};
+
+describe('PriceInput', () => {
+	it('should render with initial value of 0', () => {
+		render(<PriceInput {...defaultProps} />);
+		const input = screen.getByRole('textbox', { name: 'Enter price' });
+		expect(input).toHaveValue('0');
+	});
+
+	it('should update the price when the input changes', () => {
+		render(<PriceInput {...defaultProps} />);
+		const input = screen.getByRole('textbox', { name: 'Enter price' });
+		fireEvent.change(input, { target: { value: '100' } });
+		expect(input).toHaveValue('100');
+	});
+
+	it('should call onPriceChange when the input changes', () => {
+		const onPriceChange = vi.fn();
+		render(<PriceInput {...defaultProps} onPriceChange={onPriceChange} />);
+		const input = screen.getByRole('textbox', { name: 'Enter price' });
+		fireEvent.change(input, { target: { value: '100' } });
+		expect(onPriceChange).toHaveBeenCalledTimes(1);
+	});
+
+	it('should not call onPriceChange when the input is 0', () => {
+		const onPriceChange = vi.fn();
+		render(<PriceInput {...defaultProps} onPriceChange={onPriceChange} />);
+		const input = screen.getByRole('textbox', { name: 'Enter price' });
+		fireEvent.change(input, { target: { value: '0' } });
+		expect(onPriceChange).toHaveBeenCalledTimes(0);
+	});
+
+	it('should handle disabled prop', () => {
+		render(<PriceInput {...defaultProps} disabled />);
+
+		const priceInputWrapper = screen
+			.getByRole('textbox', { name: 'Enter price' })
+			.closest('.price-input');
+		expect(priceInputWrapper).toHaveClass('pointer-events-none opacity-50');
+	});
+});

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

@@ -105,7 +105,7 @@ export default function PriceInput({
 	return (
 		<div
 			className={cn(
-				'relative flex w-full flex-col',
+				'price-input relative flex w-full flex-col',
 				disabled && 'pointer-events-none opacity-50',
 			)}
 		>

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();
+	});
+});