@0xsequence/marketplace-sdk 0.8.11 → 0.9.0

package/src/react/ui/modals/_internal/components/actionModal/store.ts

@@ -1,4 +1,5 @@
-import { type Observable, observable } from '@legendapp/state';
+import { createStore } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
 import type { Address } from 'viem';
 
 export interface ActionModalState {
@@ -7,18 +8,50 @@ export interface ActionModalState {
 	collectionAddress: Address | null;
 }
 
-export function createActionModalStore() {
-	return observable<ActionModalState>({
-		isOpen: false,
-		chainId: null,
-		collectionAddress: null,
-	});
-}
+const initialContext: ActionModalState = {
+	isOpen: false,
+	chainId: null,
+	collectionAddress: null,
+};
+
+export const actionModalStore = createStore({
+	context: initialContext,
+	on: {
+		open: (
+			context,
+			event: { chainId: number; collectionAddress: Address },
+		) => ({
+			...context,
+			isOpen: true,
+			chainId: event.chainId,
+			collectionAddress: event.collectionAddress,
+		}),
+		close: (context) => ({
+			...context,
+			isOpen: false,
+			chainId: null,
+			collectionAddress: null,
+		}),
+	},
+});
+
+// Selector hooks
+export const useActionModalState = () =>
+	useSelector(actionModalStore, (state) => state.context);
+
+export const useIsActionModalOpen = () =>
+	useSelector(actionModalStore, (state) => state.context.isOpen);
+
+export const useActionModalChainId = () =>
+	useSelector(actionModalStore, (state) => state.context.chainId);
+
+export const useActionModalCollectionAddress = () =>
+	useSelector(actionModalStore, (state) => state.context.collectionAddress);
 
-export function openModal(store: Observable<ActionModalState>) {
-	store.isOpen.set(true);
+export function openModal(chainId: number, collectionAddress: Address) {
+	actionModalStore.send({ type: 'open', chainId, collectionAddress });
 }
 
-export function closeModal(store: Observable<ActionModalState>) {
-	store.isOpen.set(false);
+export function closeModal() {
+	actionModalStore.send({ type: 'close' });
 }

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

@@ -5,9 +5,9 @@ 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 * as hooks from '../../../../../../hooks';
+import CurrencyOptionsSelect from '..';
 
 const defaultProps = {
 	collectionAddress: zeroAddress,

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

@@ -36,7 +36,6 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 		});
 
 	// set default currency
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (
 			currencies &&

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/quantityInput/QuantityInputBase.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import {
+	AddIcon,
+	IconButton,
+	NumericInput,
+	SubtractIcon,
+} from '@0xsequence/design-system';
+import * as dn from 'dnum';
+import { useState } from 'react';
+import { cn } from '../../../../../../utils';
+
+type QuantityInputBaseProps = {
+	value: string;
+	onChange: (value: string) => void;
+	isInvalid: boolean;
+	onInvalidChange: (isInvalid: boolean) => void;
+	decimals: number;
+	maxQuantity: string;
+	className?: string;
+	disabled?: boolean;
+};
+
+export function QuantityInputBase({
+	value,
+	onChange,
+	isInvalid,
+	onInvalidChange,
+	decimals,
+	maxQuantity,
+	className,
+	disabled,
+}: QuantityInputBaseProps) {
+	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(value, decimals));
+
+	const [localQuantity, setLocalQuantity] = useState(value);
+
+	const setQuantity = ({
+		value,
+		isValid,
+	}: {
+		value: string;
+		isValid: boolean;
+	}) => {
+		setLocalQuantity(value);
+		if (isValid) {
+			onChange(value);
+			setDnQuantity(dn.from(value, decimals));
+			onInvalidChange(false);
+		} else {
+			onInvalidChange(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'}
+			/>
+			{isInvalid && (
+				<div className="text-negative text-sm">Invalid quantity</div>
+			)}
+		</div>
+	);
+}

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

@@ -1,16 +1,8 @@
 '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';
+import { QuantityInputBase } from './QuantityInputBase';
 
 type QuantityInputProps = {
 	$quantity: Observable<string>;
@@ -21,6 +13,7 @@ type QuantityInputProps = {
 	disabled?: boolean;
 };
 
+// Using observer to ensure re-render on observable changes
 export default observer(function QuantityInput({
 	$quantity,
 	$invalidQuantity,
@@ -29,138 +22,16 @@ export default observer(function QuantityInput({
 	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>
+		<QuantityInputBase
+			value={$quantity.get()}
+			onChange={(value) => $quantity.set(value)}
+			isInvalid={$invalidQuantity.get()}
+			onInvalidChange={(isInvalid) => $invalidQuantity.set(isInvalid)}
+			decimals={decimals}
+			maxQuantity={maxQuantity}
+			className={className}
+			disabled={disabled}
+		/>
 	);
 });

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

@@ -6,12 +6,12 @@ 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 '..';
 import { selectWaasFeeOptions$ } from '../store';
 import * as useWaasFeeOptionManagerModule from '../useWaasFeeOptionManager';
 

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

@@ -1,5 +1,4 @@
-import { Text, WarningIcon } from '@0xsequence/design-system';
-import { CheckmarkIcon } from '@0xsequence/design-system';
+import { CheckmarkIcon, Text, WarningIcon } from '@0xsequence/design-system';
 
 const BalanceIndicator = ({
 	insufficientBalance,

package/src/react/ui/modals/_internal/components/selectWaasFeeOptions/useWaasFeeOptionManager.tsx

@@ -22,7 +22,6 @@ const useWaasFeeOptionManager = (chainId: number) => {
 			userAddress: userAddress as Address,
 		});
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: it causes a loop
 	useEffect(() => {
 		if (!selectedFeeOption && pendingFeeOptionConfirmation) {
 			if (pendingFeeOptionConfirmation.options.length > 0) {

package/src/react/ui/modals/_internal/components/switchChainModal/__tests__/SwitchChainModal.test.tsx

@@ -9,17 +9,14 @@ import {
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 import { useChainId } from 'wagmi';
 import SwitchChainModal, { useSwitchChainModal } from '../index';
-import { switchChainModal$ } from '../store';
+import { switchChainModalStore } from '../store';
 
 const chainToSwitchTo = wagmiConfig.chains[1];
 
 describe('SwitchChainModal', () => {
 	beforeEach(() => {
-		switchChainModal$.state.isSwitching.set(false);
-		switchChainModal$.state.chainIdToSwitchTo.set(undefined);
-		switchChainModal$.state.onError.set(undefined);
-		switchChainModal$.state.onSuccess.set(undefined);
-		switchChainModal$.state.onClose.set(undefined);
+		// Reset store to initial state
+		switchChainModalStore.send({ type: 'close' });
 	});
 
 	test('opens switch chain modal with correct chain', async () => {
@@ -81,8 +78,15 @@ describe('SwitchChainModal', () => {
 	});
 
 	test('shows spinner while switching chain', async () => {
-		switchChainModal$.state.isSwitching.set(true);
-		switchChainModal$.state.chainIdToSwitchTo.set(chainToSwitchTo.id);
+		// Open modal and set isSwitching to true
+		switchChainModalStore.send({
+			type: 'open',
+			chainIdToSwitchTo: chainToSwitchTo.id,
+		});
+		switchChainModalStore.send({
+			type: 'setSwitching',
+			isSwitching: true,
+		});
 
 		render(<SwitchChainModal />);
 

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

@@ -1,13 +1,20 @@
 'use client';
 
 import { Button, Modal, Spinner, Text } from '@0xsequence/design-system';
-import { observer } from '@legendapp/state/react';
 import type { SwitchChainError } from 'viem';
 import { useSwitchChain } from 'wagmi';
 import { getPresentableChainName } from '../../../../../../utils/network';
 import AlertMessage from '../alertMessage';
 import { MODAL_OVERLAY_PROPS } from '../consts';
-import { switchChainModal$ } from './store';
+import {
+	switchChainModalStore,
+	useChainIdToSwitchTo,
+	useIsOpen,
+	useIsSwitching,
+	useOnClose,
+	useOnError,
+	useOnSuccess,
+} from './store';
 
 export type ShowSwitchChainModalArgs = {
 	chainIdToSwitchTo: number;
@@ -18,59 +25,54 @@ export type ShowSwitchChainModalArgs = {
 
 export const useSwitchChainModal = () => {
 	return {
-		show: (args: ShowSwitchChainModalArgs) => switchChainModal$.open(args),
-		close: () => switchChainModal$.delete(),
-		isSwitching$: switchChainModal$.state.isSwitching,
+		show: (args: ShowSwitchChainModalArgs) =>
+			switchChainModalStore.send({ type: 'open', ...args }),
+		close: () => switchChainModalStore.send({ type: 'close' }),
 	};
 };
 
-const SwitchChainModal = observer(() => {
-	const chainIdToSwitchTo = switchChainModal$.state.chainIdToSwitchTo.get();
-	const isSwitching$ = switchChainModal$.state.isSwitching;
+const SwitchChainModal = () => {
+	const isOpen = useIsOpen();
+	const chainIdToSwitchTo = useChainIdToSwitchTo();
+	const isSwitching = useIsSwitching();
+	const onSuccess = useOnSuccess();
+	const onError = useOnError();
+	const onClose = useOnClose();
+
 	const chainName = chainIdToSwitchTo
 		? getPresentableChainName(chainIdToSwitchTo)
 		: '';
 	const { switchChainAsync } = useSwitchChain();
 
 	async function handleSwitchChain() {
-		isSwitching$.set(true);
+		switchChainModalStore.send({ type: 'setSwitching', isSwitching: true });
 
 		try {
 			if (!chainIdToSwitchTo) return;
 			await switchChainAsync({ chainId: Number(chainIdToSwitchTo) });
 
-			if (
-				switchChainModal$.state.onSuccess.get() &&
-				typeof switchChainModal$.state.onSuccess.get() === 'function'
-			) {
-				switchChainModal$.state.onSuccess();
+			if (onSuccess && typeof onSuccess === 'function') {
+				onSuccess();
 			}
 
-			switchChainModal$.delete();
+			switchChainModalStore.send({ type: 'close' });
 		} catch (error) {
-			if (
-				error instanceof Error &&
-				switchChainModal$.state.onError.get() &&
-				typeof switchChainModal$.state.onError.get() === 'function'
-			) {
-				switchChainModal$.state.onError.get()?.(error as SwitchChainError);
+			if (error instanceof Error && onError && typeof onError === 'function') {
+				onError(error as SwitchChainError);
 			}
 		} finally {
-			isSwitching$.set(false);
+			switchChainModalStore.send({ type: 'setSwitching', isSwitching: false });
 		}
 	}
 
 	const handleClose = () => {
-		if (
-			switchChainModal$.state.onClose &&
-			typeof switchChainModal$.state.onClose === 'function'
-		) {
-			switchChainModal$.state.onClose();
+		if (onClose && typeof onClose === 'function') {
+			onClose();
 		}
-		switchChainModal$.delete();
+		switchChainModalStore.send({ type: 'close' });
 	};
 
-	if (!chainIdToSwitchTo) return null;
+	if (!isOpen || !chainIdToSwitchTo) return null;
 
 	return (
 		<Modal
@@ -92,7 +94,7 @@ const SwitchChainModal = observer(() => {
 
 				<Button
 					className={`${
-						isSwitching$.get()
+						isSwitching
 							? 'flex w-[147px] items-center justify-center [&>div]:justify-center'
 							: 'w-[147px]'
 					} flex justify-self-end`}
@@ -100,7 +102,7 @@ const SwitchChainModal = observer(() => {
 					id="switch-chain-button"
 					size="sm"
 					label={
-						isSwitching$.get() ? (
+						isSwitching ? (
 							<div data-testid="switch-chain-spinner">
 								<Spinner className="spinner" />
 							</div>
@@ -109,7 +111,7 @@ const SwitchChainModal = observer(() => {
 						)
 					}
 					variant="primary"
-					pending={isSwitching$.get()}
+					pending={isSwitching}
 					shape="square"
 					onClick={handleSwitchChain}
 					data-testid="switch-chain-button"
@@ -117,6 +119,6 @@ const SwitchChainModal = observer(() => {
 			</div>
 		</Modal>
 	);
-});
+};
 
 export default SwitchChainModal;