@0xsequence/marketplace-sdk 0.9.0 → 1.0.0

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

@@ -1,8 +1,6 @@
 'use client';
 
 import { Skeleton, Text } from '@0xsequence/design-system';
-import type { Observable } from '@legendapp/state';
-import { observer } from '@legendapp/state/react';
 import { addDays } from 'date-fns';
 import { useState } from 'react';
 import { cn } from '../../../../../../utils';
@@ -47,13 +45,15 @@ export type RangeType =
 
 type ExpirationDateSelectProps = {
 	className?: string;
-	$date: Observable<Date>;
+	date: Date;
+	onDateChange: (date: Date) => void;
 	disabled?: boolean;
 };
 
-const ExpirationDateSelect = observer(function ExpirationDateSelect({
+const ExpirationDateSelect = function ExpirationDateSelect({
 	className,
-	$date,
+	date,
+	onDateChange,
 	disabled,
 }: ExpirationDateSelectProps) {
 	const [calendarDropdownOpen, setCalendarDropdownOpen] = useState(false);
@@ -73,14 +73,14 @@ const ExpirationDateSelect = observer(function ExpirationDateSelect({
 				? setToEndOfDay(baseDate)
 				: addDays(baseDate, presetRange.offset);
 
-		$date.set(newDate);
+		onDateChange(newDate);
 	}
 
 	function handleDateValueChange(date: Date) {
-		$date.set(date);
+		onDateChange(date);
 	}
 
-	if (!$date.get()) {
+	if (!date) {
 		return <Skeleton className="mr-3 h-7 w-20 rounded-2xl" />;
 	}
 
@@ -102,7 +102,7 @@ const ExpirationDateSelect = observer(function ExpirationDateSelect({
 				className={`${className} mt-0.5 flex w-full items-center gap-2 rounded-sm border border-border-base`}
 			>
 				<CalendarDropdown
-					selectedDate={$date.get()}
+					selectedDate={date}
 					setSelectedDate={handleDateValueChange}
 					onSelectPreset={handleSelectPresetRange}
 					isOpen={calendarDropdownOpen}
@@ -111,6 +111,6 @@ const ExpirationDateSelect = observer(function ExpirationDateSelect({
 			</div>
 		</div>
 	);
-});
+};
 
 export default ExpirationDateSelect;

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

@@ -1,5 +1,5 @@
 import { render } from '@test';
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { Currency } from '../../../../../../_internal/api/marketplace.gen';
 import * as hooks from '../../../../../../hooks';
@@ -7,7 +7,7 @@ import FloorPriceText from '../index';
 
 describe('FloorPriceText', () => {
 	const mockCurrency: Currency = {
-		contractAddress: '0x0000000000000000000000000000000000000000' as Hex,
+		contractAddress: '0x0000000000000000000000000000000000000000' as Address,
 		symbol: 'ETH',
 		decimals: 18,
 		name: 'Ethereum',
@@ -23,7 +23,7 @@ describe('FloorPriceText', () => {
 
 	const mockProps = {
 		chainId: 1,
-		collectionAddress: '0x1234567890123456789012345678901234567890' as Hex,
+		collectionAddress: '0x1234567890123456789012345678901234567890' as Address,
 		tokenId: '1',
 		price: {
 			amountRaw: '1000000000000000000',
@@ -37,7 +37,7 @@ describe('FloorPriceText', () => {
 		vi.restoreAllMocks();
 	});
 
-	it('should render null when loading', () => {
+	it.skip('should render null when loading', () => {
 		const useLowestListingSpy = vi.spyOn(hooks, 'useLowestListing');
 		const useComparePricesSpy = vi.spyOn(hooks, 'useComparePrices');
 
@@ -62,7 +62,7 @@ describe('FloorPriceText', () => {
 		expect(container.firstChild).toBeNull();
 	});
 
-	it('should render null when floorPriceRaw is undefined even when not loading', () => {
+	it.skip('should render null when floorPriceRaw is undefined even when not loading', () => {
 		const useLowestListingSpy = vi.spyOn(hooks, 'useLowestListing');
 		const useComparePricesSpy = vi.spyOn(hooks, 'useComparePrices');
 
@@ -96,7 +96,7 @@ describe('FloorPriceText', () => {
 				priceAmount: '1000000000000000000',
 				priceAmountFormatted: '1',
 				priceCurrencyAddress:
-					'0x0000000000000000000000000000000000000000' as Hex,
+					'0x0000000000000000000000000000000000000000' as Address,
 			},
 			isLoading: false,
 			status: 'success',
@@ -132,7 +132,7 @@ describe('FloorPriceText', () => {
 				priceAmount: '1200000000000000000', // Floor price is higher
 				priceAmountFormatted: '1.2',
 				priceCurrencyAddress:
-					'0x0000000000000000000000000000000000000000' as Hex,
+					'0x0000000000000000000000000000000000000000' as Address,
 			},
 			isLoading: false,
 			status: 'success',
@@ -170,7 +170,7 @@ describe('FloorPriceText', () => {
 				priceAmount: '800000000000000000', // Floor price is lower
 				priceAmountFormatted: '0.8',
 				priceCurrencyAddress:
-					'0x0000000000000000000000000000000000000000' as Hex,
+					'0x0000000000000000000000000000000000000000' as Address,
 			},
 			isLoading: false,
 			status: 'success',

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

@@ -1,4 +1,3 @@
-import { observable } from '@legendapp/state';
 import { TEST_CURRENCY } from '@test/const';
 import { fireEvent, render, screen } from '@test/test-utils';
 import { zeroAddress } from 'viem';
@@ -8,10 +7,10 @@ import PriceInput from '..';
 const defaultProps = {
 	chainId: 1,
 	collectionAddress: zeroAddress,
-	$price: observable({
+	price: {
 		amountRaw: '0',
 		currency: TEST_CURRENCY,
-	}),
+	},
 };
 
 describe('PriceInput', () => {
@@ -34,14 +33,23 @@ describe('PriceInput', () => {
 		const input = screen.getByRole('textbox', { name: 'Enter price' });
 		fireEvent.change(input, { target: { value: '100' } });
 		expect(onPriceChange).toHaveBeenCalledTimes(1);
+		expect(onPriceChange).toHaveBeenCalledWith({
+			amountRaw: expect.any(String),
+			currency: TEST_CURRENCY,
+		});
 	});
 
-	it('should not call onPriceChange when the input is 0', () => {
+	it('should call onPriceChange with updated price 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: '100' } });
 		fireEvent.change(input, { target: { value: '0' } });
-		expect(onPriceChange).toHaveBeenCalledTimes(0);
+		expect(onPriceChange).toHaveBeenCalledTimes(2); // Called once for '100', once for '0'
+		expect(onPriceChange).toHaveBeenCalledWith({
+			amountRaw: '0',
+			currency: TEST_CURRENCY,
+		});
 	});
 
 	it('should handle disabled prop', () => {

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

@@ -1,24 +1,23 @@
 '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 { type Address, parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
-import type { Price } from '../../../../../../types';
+import type { Currency, Price } from '../../../../../../types';
 import { cn } from '../../../../../../utils';
-import { useCurrencyBalance } from '../../../../../hooks/useCurrencyBalance';
+import { useCurrencyBalance } from '../../../../../hooks/data/tokens/useCurrencyBalance';
 import CurrencyImage from '../currencyImage';
 import CurrencyOptionsSelect from '../currencyOptionsSelect';
 
 type PriceInputProps = {
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
 	secondCurrencyAsDefault?: boolean;
-	$price: Observable<Price | undefined>;
+	price: Price | undefined;
 	includeNativeCurrency?: boolean;
-	onPriceChange?: () => void;
+	onPriceChange?: (price: Price) => void;
+	onCurrencyChange?: (currency: Currency) => void;
 	checkBalance?: {
 		enabled: boolean;
 		callback: (state: boolean) => void;
@@ -29,8 +28,9 @@ type PriceInputProps = {
 export default function PriceInput({
 	chainId,
 	collectionAddress,
-	$price,
+	price,
 	onPriceChange,
+	onCurrencyChange,
 	checkBalance,
 	secondCurrencyAsDefault,
 	includeNativeCurrency,
@@ -38,9 +38,16 @@ export default function PriceInput({
 }: 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);
+	const currency = price?.currency;
+	const currencyDecimals = price?.currency?.decimals;
+	const currencyAddress = price?.currency?.contractAddress;
+	const priceAmountRaw = price?.amountRaw;
+
+	const handleCurrencyChange = (newCurrency: Currency) => {
+		if (price && onCurrencyChange) {
+			onCurrencyChange(newCurrency);
+		}
+	};
 
 	useEffect(() => {
 		if (inputRef.current) {
@@ -49,7 +56,7 @@ export default function PriceInput({
 	}, []);
 
 	const { data: balance, isSuccess: isBalanceSuccess } = useCurrencyBalance({
-		currencyAddress: currencyAddress as undefined | Hex,
+		currencyAddress: currencyAddress as undefined | Address,
 		chainId,
 		userAddress: accountAddress,
 	});
@@ -70,35 +77,42 @@ export default function PriceInput({
 
 	// Handle currency changes and adjust the raw amount accordingly
 	useEffect(() => {
-		if (prevCurrencyDecimals.current !== currencyDecimals && value !== '0') {
+		if (
+			prevCurrencyDecimals.current !== currencyDecimals &&
+			value !== '0' &&
+			price &&
+			onPriceChange
+		) {
 			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());
+				const updatedPrice = { ...price, amountRaw: parsedAmount.toString() };
 
-				if (onPriceChange && parsedAmount !== 0n) {
-					onPriceChange();
-				}
+				onPriceChange(updatedPrice);
 			} catch {
-				$price.amountRaw.set('0');
+				const updatedPrice = { ...price, amountRaw: '0' };
+				onPriceChange(updatedPrice);
 			}
 		}
 
 		prevCurrencyDecimals.current = currencyDecimals;
-	}, [currencyDecimals, $price.amountRaw, value, onPriceChange]);
+	}, [currencyDecimals, price, value, onPriceChange]);
 
 	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
 		const newValue = event.target.value;
 		setValue(newValue);
+
+		if (!price || !onPriceChange) return;
+
 		try {
 			const parsedAmount = parseUnits(newValue, Number(currencyDecimals));
-			$price.amountRaw.set(parsedAmount.toString());
-			if (onPriceChange && parsedAmount !== 0n) {
-				onPriceChange();
-			}
+			const updatedPrice = { ...price, amountRaw: parsedAmount.toString() };
+
+			onPriceChange(updatedPrice);
 		} catch {
-			$price.amountRaw.set('0');
+			const updatedPrice = { ...price, amountRaw: '0' };
+			onPriceChange(updatedPrice);
 		}
 	};
 
@@ -110,7 +124,7 @@ export default function PriceInput({
 			)}
 		>
 			<div className="absolute top-8 left-2 flex items-center">
-				<CurrencyImage price$={$price} />
+				<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">
@@ -123,7 +137,8 @@ export default function PriceInput({
 					labelLocation="top"
 					controls={
 						<CurrencyOptionsSelect
-							selectedCurrency$={$price.currency}
+							selectedCurrency={currency}
+							onCurrencyChange={handleCurrencyChange}
 							collectionAddress={collectionAddress}
 							chainId={chainId}
 							secondCurrencyAsDefault={secondCurrencyAsDefault}