@0xsequence/marketplace-sdk 0.8.12 → 0.10.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',
@@ -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/floorPriceText/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Button, Text } from '@0xsequence/design-system';
-import type { Hex } from 'viem';
+import type { Address, Hex } from 'viem';
 import type { Price } from '../../../../../../types';
 import { useComparePrices, useLowestListing } from '../../../../../hooks';
 
@@ -34,10 +34,10 @@ export default function FloorPriceText({
 		useComparePrices({
 			chainId,
 			priceAmountRaw: price.amountRaw || '0',
-			priceCurrencyAddress: price.currency.contractAddress,
+			priceCurrencyAddress: price.currency.contractAddress as Address,
 			compareToPriceAmountRaw: floorPriceRaw || '0',
-			compareToPriceCurrencyAddress:
-				listing?.priceCurrencyAddress || price.currency.contractAddress,
+			compareToPriceCurrencyAddress: (listing?.priceCurrencyAddress ||
+				price.currency.contractAddress) as Address,
 			query: {
 				enabled: !!floorPriceRaw && !listingLoading && price.amountRaw !== '0',
 			},

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

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

@@ -1,12 +1,13 @@
-import { observable } from '@legendapp/state';
 import { fireEvent, render, screen } from '@test';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import QuantityInput from '..';
 
 describe('QuantityInput', () => {
 	const defaultProps = {
-		$quantity: observable<string>('1'),
-		$invalidQuantity: observable<boolean>(false),
+		quantity: '1',
+		invalidQuantity: false,
+		onQuantityChange: vi.fn(),
+		onInvalidQuantityChange: vi.fn(),
 		decimals: 1,
 		maxQuantity: '10',
 	};
@@ -19,51 +20,52 @@ describe('QuantityInput', () => {
 	});
 
 	it('should display current quantity value', () => {
-		const quantity$ = observable<string>('5');
-		render(<QuantityInput {...defaultProps} $quantity={quantity$} />);
+		render(<QuantityInput {...defaultProps} quantity="5" />);
 
 		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 onQuantityChange = vi.fn();
+		render(
+			<QuantityInput {...defaultProps} onQuantityChange={onQuantityChange} />,
+		);
 
 		const input = screen.getByRole('textbox', { name: /Enter quantity/i });
 		fireEvent.change(input, { target: { value: '5' } });
 
-		expect(quantity$.get()).toBe('5');
+		expect(onQuantityChange).toHaveBeenCalledWith('5');
 	});
 
 	it('should not allow values greater than maxQuantity', () => {
-		const quantity$ = observable<string>('1');
-		const invalidQuantity$ = observable<boolean>(false);
+		const onQuantityChange = vi.fn();
+		const onInvalidQuantityChange = vi.fn();
 
 		render(
 			<QuantityInput
 				{...defaultProps}
-				$quantity={quantity$}
-				$invalidQuantity={invalidQuantity$}
+				onQuantityChange={onQuantityChange}
+				onInvalidQuantityChange={onInvalidQuantityChange}
 			/>,
 		);
 
 		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);
+		expect(onQuantityChange).toHaveBeenCalledWith('10'); // Capped at max
+		expect(onInvalidQuantityChange).toHaveBeenCalledWith(false);
 	});
 
 	it('should handle decimal values correctly based on decimal prop', () => {
-		const quantity$ = observable<string>('1');
-		const invalidQuantity$ = observable<boolean>(false);
+		const onQuantityChange = vi.fn();
+		const onInvalidQuantityChange = vi.fn();
 
 		render(
 			<QuantityInput
 				{...defaultProps}
-				$quantity={quantity$}
-				$invalidQuantity={invalidQuantity$}
+				onQuantityChange={onQuantityChange}
+				onInvalidQuantityChange={onInvalidQuantityChange}
 				decimals={2}
 			/>,
 		);
@@ -71,18 +73,18 @@ describe('QuantityInput', () => {
 		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
+		expect(onQuantityChange).toHaveBeenCalledWith('1.23'); // Should truncate to 2 decimals
 	});
 
 	it('should validate and mark invalid quantities', () => {
-		const quantity$ = observable<string>('1');
-		const invalidQuantity$ = observable<boolean>(false);
+		const onQuantityChange = vi.fn();
+		const onInvalidQuantityChange = vi.fn();
 
 		render(
 			<QuantityInput
 				{...defaultProps}
-				$quantity={quantity$}
-				$invalidQuantity={invalidQuantity$}
+				onQuantityChange={onQuantityChange}
+				onInvalidQuantityChange={onInvalidQuantityChange}
 			/>,
 		);
 
@@ -90,62 +92,75 @@ describe('QuantityInput', () => {
 
 		// Test less than min value (should set invalidQuantity to true)
 		fireEvent.change(input, { target: { value: '0' } });
-		expect(invalidQuantity$.get()).toBe(true);
+		expect(onInvalidQuantityChange).toHaveBeenCalledWith(true);
 
 		// Test empty value (should set invalidQuantity to true)
 		fireEvent.change(input, { target: { value: '' } });
-		expect(invalidQuantity$.get()).toBe(true);
+		expect(onInvalidQuantityChange).toHaveBeenCalledWith(true);
 
 		// Reset to valid value
 		fireEvent.change(input, { target: { value: '1' } });
-		expect(invalidQuantity$.get()).toBe(false);
+		expect(onInvalidQuantityChange).toHaveBeenCalledWith(false);
 	});
 
 	it('should increment quantity when increment button is clicked', () => {
-		const quantity$ = observable<string>('5');
+		const onQuantityChange = vi.fn();
 
-		render(<QuantityInput {...defaultProps} $quantity={quantity$} />);
+		render(
+			<QuantityInput
+				{...defaultProps}
+				quantity="5"
+				onQuantityChange={onQuantityChange}
+			/>,
+		);
 
 		const incrementButton = screen.getAllByRole('button')[1]; // The second button is the increment button
 		fireEvent.click(incrementButton);
 
-		expect(quantity$.get()).toBe('6');
+		expect(onQuantityChange).toHaveBeenCalledWith('6');
 	});
 
 	it('should decrement quantity when decrement button is clicked', () => {
-		const quantity$ = observable<string>('5');
+		const onQuantityChange = vi.fn();
 
-		render(<QuantityInput {...defaultProps} $quantity={quantity$} />);
+		render(
+			<QuantityInput
+				{...defaultProps}
+				quantity="5"
+				onQuantityChange={onQuantityChange}
+			/>,
+		);
 
 		const decrementButton = screen.getAllByRole('button')[0]; // The first button is the decrement button
 		fireEvent.click(decrementButton);
 
-		expect(quantity$.get()).toBe('4');
+		expect(onQuantityChange).toHaveBeenCalledWith('4');
 	});
 
 	it('should disable decrement button when quantity is minimum value', () => {
-		const quantity$ = observable<string>('0.1');
-
-		render(<QuantityInput {...defaultProps} $quantity={quantity$} />);
+		render(<QuantityInput {...defaultProps} quantity="0.1" />);
 
 		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$} />);
+		render(<QuantityInput {...defaultProps} quantity="10" />);
 
 		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');
+		const onQuantityChange = vi.fn();
 
 		render(
-			<QuantityInput {...defaultProps} $quantity={quantity$} decimals={1} />,
+			<QuantityInput
+				{...defaultProps}
+				quantity="1"
+				onQuantityChange={onQuantityChange}
+				decimals={1}
+			/>,
 		);
 
 		// Set to 1 first
@@ -157,21 +172,18 @@ describe('QuantityInput', () => {
 		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');
+		expect(onQuantityChange).toHaveBeenCalledWith('0.1');
 	});
 
 	it('should cap quantity to maxQuantity when incrementing past the maximum', () => {
-		const quantity$ = observable<string>('9');
+		const onQuantityChange = vi.fn();
 		const maxQuantity = '10';
 
 		render(
 			<QuantityInput
 				{...defaultProps}
-				$quantity={quantity$}
+				quantity="9"
+				onQuantityChange={onQuantityChange}
 				maxQuantity={maxQuantity}
 			/>,
 		);
@@ -181,23 +193,20 @@ describe('QuantityInput', () => {
 		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');
+		expect(onQuantityChange).toHaveBeenCalledWith('10');
 	});
 
 	it('should set quantity to maxQuantity when direct input exceeds max', () => {
-		const quantity$ = observable<string>('5');
-		const invalidQuantity$ = observable<boolean>(false);
+		const onQuantityChange = vi.fn();
+		const onInvalidQuantityChange = vi.fn();
 		const maxQuantity = '10';
 
 		render(
 			<QuantityInput
 				{...defaultProps}
-				$quantity={quantity$}
-				$invalidQuantity={invalidQuantity$}
+				quantity="5"
+				onQuantityChange={onQuantityChange}
+				onInvalidQuantityChange={onInvalidQuantityChange}
 				maxQuantity={maxQuantity}
 			/>,
 		);
@@ -206,7 +215,7 @@ describe('QuantityInput', () => {
 		fireEvent.change(input, { target: { value: '15' } });
 
 		// Value should be capped at max
-		expect(quantity$.get()).toBe('10');
-		expect(invalidQuantity$.get()).toBe(false);
+		expect(onQuantityChange).toHaveBeenCalledWith('10');
+		expect(onInvalidQuantityChange).toHaveBeenCalledWith(false);
 	});
 });

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

@@ -6,24 +6,26 @@ import {
 	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 { useEffect, useState } from 'react';
 import { cn } from '../../../../../../utils';
 
 type QuantityInputProps = {
-	$quantity: Observable<string>;
-	$invalidQuantity: Observable<boolean>;
+	quantity: string;
+	invalidQuantity: boolean;
+	onQuantityChange: (quantity: string) => void;
+	onInvalidQuantityChange: (invalid: boolean) => void;
 	decimals: number;
 	maxQuantity: string;
 	className?: string;
 	disabled?: boolean;
 };
 
-export default observer(function QuantityInput({
-	$quantity,
-	$invalidQuantity,
+export default function QuantityInput({
+	quantity,
+	invalidQuantity,
+	onQuantityChange,
+	onInvalidQuantityChange,
 	decimals,
 	maxQuantity,
 	className,
@@ -34,11 +36,15 @@ export default observer(function QuantityInput({
 	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 [dnQuantity, setDnQuantity] = useState(dn.from(quantity, decimals));
+
+	const [localQuantity, setLocalQuantity] = useState(quantity);
 
-	const [localQuantity, setLocalQuantity] = useState($quantity.get());
+	// Sync internal state with external prop changes
+	useEffect(() => {
+		setLocalQuantity(quantity);
+		setDnQuantity(dn.from(quantity, decimals));
+	}, [quantity, decimals]);
 
 	const setQuantity = ({
 		value,
@@ -49,11 +55,11 @@ export default observer(function QuantityInput({
 	}) => {
 		setLocalQuantity(value);
 		if (isValid) {
-			$quantity.set(value);
+			onQuantityChange(value);
 			setDnQuantity(dn.from(value, decimals));
-			$invalidQuantity.set(false);
+			onInvalidQuantityChange(false);
 		} else {
-			$invalidQuantity.set(true);
+			onInvalidQuantityChange(true);
 		}
 	};
 
@@ -158,9 +164,9 @@ export default observer(function QuantityInput({
 				}
 				width={'full'}
 			/>
-			{$invalidQuantity.get() && (
+			{invalidQuantity && (
 				<div className="text-negative text-sm">Invalid quantity</div>
 			)}
 		</div>
 	);
-});
+}