@0xsequence/marketplace-sdk 0.0.0-20250513233135

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/floorPriceText/index.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { Button, Text } from '@0xsequence/design-system';
+import type { Hex } from 'viem';
+import type { Price } from '../../../../../../types';
+import { useComparePrices, useLowestListing } from '../../../../../hooks';
+
+export default function FloorPriceText({
+	chainId,
+	collectionAddress,
+	tokenId,
+	price,
+	onBuyNow,
+}: {
+	chainId: number;
+	collectionAddress: Hex;
+	tokenId: string;
+	price: Price;
+	onBuyNow?: () => void;
+}) {
+	const { data: listing, isLoading: listingLoading } = useLowestListing({
+		tokenId: tokenId,
+		chainId,
+		collectionAddress,
+		filter: {
+			currencies: [price.currency.contractAddress],
+		},
+	});
+
+	const floorPriceRaw = listing?.priceAmount;
+	const floorPriceFormatted = listing?.priceAmountFormatted;
+
+	const { data: priceComparison, isLoading: comparisonLoading } =
+		useComparePrices({
+			chainId,
+			priceAmountRaw: price.amountRaw || '0',
+			priceCurrencyAddress: price.currency.contractAddress,
+			compareToPriceAmountRaw: floorPriceRaw || '0',
+			compareToPriceCurrencyAddress:
+				listing?.priceCurrencyAddress || price.currency.contractAddress,
+			query: {
+				enabled: !!floorPriceRaw && !listingLoading && price.amountRaw !== '0',
+			},
+		});
+
+	if (
+		!floorPriceRaw ||
+		listingLoading ||
+		price.amountRaw === '0' ||
+		comparisonLoading
+	) {
+		return null;
+	}
+
+	let floorPriceDifferenceText = 'Same as floor price';
+	let showBuyNowButton = false;
+
+	if (priceComparison) {
+		if (priceComparison.status === 'same') {
+			floorPriceDifferenceText = 'Same as floor price';
+			showBuyNowButton = true;
+		} else if (priceComparison.status === 'below') {
+			floorPriceDifferenceText = `${priceComparison.percentageDifferenceFormatted}% below floor price`;
+		} else {
+			floorPriceDifferenceText = `${priceComparison.percentageDifferenceFormatted}% above floor price`;
+			showBuyNowButton = true;
+		}
+	}
+
+	return (
+		<div className="flex w-full items-center justify-between gap-2">
+			<Text className="text-left font-body font-medium text-muted text-xs">
+				{floorPriceDifferenceText}
+			</Text>
+
+			{showBuyNowButton && onBuyNow && (
+				<Button
+					size="xs"
+					variant="text"
+					className="text-indigo-400 text-xs"
+					onClick={onBuyNow}
+				>
+					Buy for {floorPriceFormatted} {price.currency.symbol}
+				</Button>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,148 @@
+'use client';
+
+import { NumericInput, Text } from '@0xsequence/design-system';
+import type { Observable } from '@legendapp/state';
+import { use$ } from '@legendapp/state/react';
+import { useEffect, useRef, useState } from 'react';
+import { type Hex, parseUnits } from 'viem';
+import { useAccount } from 'wagmi';
+import type { Price } from '../../../../../../types';
+import { cn } from '../../../../../../utils';
+import { useCurrencyBalance } from '../../../../../hooks/useCurrencyBalance';
+import CurrencyImage from '../currencyImage';
+import CurrencyOptionsSelect from '../currencyOptionsSelect';
+
+type PriceInputProps = {
+	collectionAddress: Hex;
+	chainId: number;
+	secondCurrencyAsDefault?: boolean;
+	$price: Observable<Price | undefined>;
+	includeNativeCurrency?: boolean;
+	onPriceChange?: () => void;
+	checkBalance?: {
+		enabled: boolean;
+		callback: (state: boolean) => void;
+	};
+	disabled?: boolean;
+};
+
+export default function PriceInput({
+	chainId,
+	collectionAddress,
+	$price,
+	onPriceChange,
+	checkBalance,
+	secondCurrencyAsDefault,
+	includeNativeCurrency,
+	disabled,
+}: PriceInputProps) {
+	const { address: accountAddress } = useAccount();
+	const inputRef = useRef<HTMLInputElement>(null);
+	const currencyDecimals = use$($price.currency.decimals);
+	const currencyAddress = use$($price.currency.contractAddress);
+	const priceAmountRaw = use$($price.amountRaw);
+
+	useEffect(() => {
+		if (inputRef.current) {
+			inputRef.current.focus();
+		}
+	}, []);
+
+	const { data: balance, isSuccess: isBalanceSuccess } = useCurrencyBalance({
+		currencyAddress: currencyAddress as undefined | Hex,
+		chainId,
+		userAddress: accountAddress,
+	});
+
+	const balanceError =
+		!!checkBalance?.enabled &&
+		!!isBalanceSuccess &&
+		!!priceAmountRaw &&
+		!!currencyDecimals &&
+		BigInt(priceAmountRaw) > BigInt(balance?.value || 0n);
+
+	if (checkBalance?.enabled) {
+		checkBalance.callback(balanceError);
+	}
+
+	const [value, setValue] = useState('0');
+	const prevCurrencyDecimals = useRef(currencyDecimals);
+
+	// Handle currency changes and adjust the raw amount accordingly
+	useEffect(() => {
+		if (prevCurrencyDecimals.current !== currencyDecimals && value !== '0') {
+			try {
+				// If the user has entered a value and the currency decimals have changed,
+				// we need to adjust the raw amount to maintain the same displayed value
+				const parsedAmount = parseUnits(value, Number(currencyDecimals));
+				$price.amountRaw.set(parsedAmount.toString());
+
+				if (onPriceChange && parsedAmount !== 0n) {
+					onPriceChange();
+				}
+			} catch {
+				$price.amountRaw.set('0');
+			}
+		}
+
+		prevCurrencyDecimals.current = currencyDecimals;
+	}, [currencyDecimals, $price.amountRaw, value, onPriceChange]);
+
+	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 (
+		<div
+			className={cn(
+				'price-input relative flex w-full flex-col',
+				disabled && 'pointer-events-none opacity-50',
+			)}
+		>
+			<div className="absolute top-8 left-2 flex items-center">
+				<CurrencyImage price$={$price} />
+			</div>
+
+			<div className="[&>label>div>div>.rounded-xl]:h-9 [&>label>div>div>.rounded-xl]:rounded-sm [&>label>div>div>.rounded-xl]:px-2 [&>label]:gap-1">
+				<NumericInput
+					ref={inputRef}
+					className="ml-5 w-full text-xs"
+					name="price-input"
+					decimals={currencyDecimals}
+					label="Enter price"
+					labelLocation="top"
+					controls={
+						<CurrencyOptionsSelect
+							selectedCurrency$={$price.currency}
+							collectionAddress={collectionAddress}
+							chainId={chainId}
+							secondCurrencyAsDefault={secondCurrencyAsDefault}
+							includeNativeCurrency={includeNativeCurrency}
+						/>
+					}
+					value={value}
+					onChange={handleChange}
+				/>
+			</div>
+
+			{balanceError && (
+				<Text
+					className="-bottom-5 absolute font-body font-medium text-xs"
+					color="negative"
+				>
+					Insufficient balance
+				</Text>
+			)}
+		</div>
+	);
+}

package/src/react/ui/modals/_internal/components/priceInput/types.ts

@@ -0,0 +1,4 @@
+export type SelectedCurrency = {
+	symbol: string;
+	decimals: number;
+};