@0xsequence/marketplace-sdk 0.10.0 → 1.1.0

package/src/react/ui/modals/_internal/components/actionModal/ActionModal.tsx

@@ -3,9 +3,9 @@
 import { Button, Modal, Spinner, Text } from '@0xsequence/design-system';
 import type React from 'react';
 import type { ComponentProps } from 'react';
-import { useWallet } from '../../../../../_internal/wallet/useWallet';
+import { useAccount } from 'wagmi';
+import { useEnsureCorrectChain } from '../../../../../hooks';
 import { MODAL_CONTENT_PROPS, MODAL_OVERLAY_PROPS } from '../consts';
-import { useSwitchChainModal } from '../switchChainModal';
 
 export interface ActionModalProps {
 	isOpen: boolean;
@@ -40,27 +40,10 @@ export const ActionModal = ({
 	spinnerContainerClassname,
 	hideCtas,
 }: ActionModalProps) => {
-	const { show: showSwitchChainModal } = useSwitchChainModal();
-	const { wallet, isLoading, isError } = useWallet();
+	const { status } = useAccount();
+	const { ensureCorrectChain } = useEnsureCorrectChain();
 
-	const checkChain = async ({ onSuccess }: { onSuccess: () => void }) => {
-		const walletChainId = await wallet?.getChainId();
-		const chainMismatch = walletChainId !== Number(chainId);
-		if (chainMismatch) {
-			showSwitchChainModal({
-				chainIdToSwitchTo: chainId,
-				onSuccess,
-			});
-		} else {
-			onSuccess();
-		}
-	};
-
-	if (wallet?.isWaaS) {
-		wallet.switchChain(Number(chainId));
-	}
-
-	if (!isOpen || !chainId) {
+	if (!isOpen) {
 		return null;
 	}
 
@@ -77,30 +60,20 @@ export const ActionModal = ({
 					{title}
 				</Text>
 
-				{modalLoading || isLoading || isError ? (
+				{modalLoading || status !== 'connected' ? (
 					<div
 						className={`flex ${spinnerContainerClassname} w-full items-center justify-center`}
 						data-testid="error-loading-wrapper"
 					>
-						{isError && (
-							<Text
-								data-testid="error-loading-text"
-								className="text-center font-body text-error100 text-small"
-							>
-								Error loading modal
-							</Text>
-						)}
-						{(isLoading || modalLoading) && (
-							<div data-testid="spinner">
-								<Spinner size="lg" />
-							</div>
-						)}
+						<div data-testid="spinner">
+							<Spinner size="lg" />
+						</div>
 					</div>
 				) : (
 					children
 				)}
 
-				{!hideCtas && !isLoading && !isError && (
+				{!hideCtas && status === 'connected' && (
 					<div className="flex w-full flex-col gap-2">
 						{ctas.map(
 							(cta) =>
@@ -108,13 +81,11 @@ export const ActionModal = ({
 									<Button
 										className="w-full rounded-[12px] [&>div]:justify-center"
 										key={cta.onClick.toString()}
-										onClick={async () => {
-											await checkChain({
-												onSuccess: () => {
-													cta.onClick();
-												},
-											});
-										}}
+										onClick={() =>
+											ensureCorrectChain(Number(chainId), {
+												onSuccess: cta.onClick,
+											})
+										}
 										variant={cta.variant || 'primary'}
 										pending={cta.pending}
 										disabled={cta.disabled}

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

@@ -1,2 +1 @@
 export * from './ActionModal';
-export * from './store';

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

@@ -5,7 +5,7 @@ import { screen } from '@testing-library/react';
 import { zeroAddress } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { Currency } from '../../../../../../_internal';
-import * as hooks from '../../../../../../hooks';
+import * as marketCurrenciesFn from '../../../../../../hooks/data/market/useMarketCurrencies';
 import CurrencyOptionsSelect from '..';
 
 const mockOnCurrencyChange = vi.fn();
@@ -26,7 +26,10 @@ describe('CurrencyOptionsSelect', () => {
 	});
 
 	it('should render loading skeleton when currencies are loading', () => {
-		const useCurrenciesSpy = vi.spyOn(hooks, 'useMarketCurrencies');
+		const useCurrenciesSpy = vi.spyOn(
+			marketCurrenciesFn,
+			'useMarketCurrencies',
+		);
 		useCurrenciesSpy.mockReturnValue({
 			isLoading: true,
 			data: undefined,
@@ -41,7 +44,10 @@ describe('CurrencyOptionsSelect', () => {
 	});
 
 	it('should set first currency as default when currencies load', async () => {
-		const useCurrenciesSpy = vi.spyOn(hooks, 'useMarketCurrencies');
+		const useCurrenciesSpy = vi.spyOn(
+			marketCurrenciesFn,
+			'useMarketCurrencies',
+		);
 		useCurrenciesSpy.mockReturnValue({
 			isLoading: false,
 			data: TEST_CURRENCIES,

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

@@ -4,7 +4,7 @@ import { Skeleton } from '@0xsequence/design-system';
 import { useEffect } from 'react';
 import type { Address } from 'viem';
 import type { Currency } from '../../../../../_internal';
-import { useMarketCurrencies } from '../../../../../hooks';
+import { useMarketCurrencies } from '../../../../../hooks/data/market/useMarketCurrencies';
 import {
 	CustomSelect,
 	type SelectItem,

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

@@ -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');
 

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

@@ -6,7 +6,7 @@ import { type Address, parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
 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';
 
@@ -127,10 +127,10 @@ export default function PriceInput({
 				<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">
+			<div className="[&>label]:gap-1">
 				<NumericInput
 					ref={inputRef}
-					className="ml-5 w-full text-xs"
+					className="h-9 w-full rounded-sm px-2 [&>input]:pl-5 [&>input]:text-xs"
 					name="price-input"
 					decimals={currencyDecimals}
 					label="Enter price"

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

@@ -110,6 +110,7 @@ describe('QuantityInput', () => {
 			<QuantityInput
 				{...defaultProps}
 				quantity="5"
+				decimals={0} // Set decimals to 0 for whole number increments
 				onQuantityChange={onQuantityChange}
 			/>,
 		);
@@ -127,6 +128,7 @@ describe('QuantityInput', () => {
 			<QuantityInput
 				{...defaultProps}
 				quantity="5"
+				decimals={0} // Set decimals to 0 for whole number decrements
 				onQuantityChange={onQuantityChange}
 			/>,
 		);
@@ -163,16 +165,20 @@ describe('QuantityInput', () => {
 			/>,
 		);
 
-		// Set to 1 first
-		const input = screen.getByRole('textbox', { name: /Enter quantity/i });
-		fireEvent.change(input, { target: { value: '1' } });
-
-		// Click decrement button, should go to minimum value
-		const decrementButton = screen.getAllByRole('button')[0]; // The first button is the decrement button
+		// Click decrement button multiple times to reach minimum value
+		const decrementButton = screen.getAllByRole('button')[0];
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
 		fireEvent.click(decrementButton);
 
 		// For decimals=1, the min value should be 0.1
-		expect(onQuantityChange).toHaveBeenCalledWith('0.1');
+		expect(onQuantityChange).toHaveBeenLastCalledWith('0.1');
 	});
 
 	it('should cap quantity to maxQuantity when incrementing past the maximum', () => {
@@ -183,6 +189,7 @@ describe('QuantityInput', () => {
 			<QuantityInput
 				{...defaultProps}
 				quantity="9"
+				decimals={0} // Set decimals to 0 for whole number increments
 				onQuantityChange={onQuantityChange}
 				maxQuantity={maxQuantity}
 			/>,
@@ -218,4 +225,87 @@ describe('QuantityInput', () => {
 		expect(onQuantityChange).toHaveBeenCalledWith('10');
 		expect(onInvalidQuantityChange).toHaveBeenCalledWith(false);
 	});
+
+	describe('with 2 decimals', () => {
+		const defaultPropsDecimals2 = {
+			...defaultProps,
+			decimals: 2,
+			quantity: '1.00',
+			maxQuantity: '10.00',
+		};
+
+		it('should handle increment with 2 decimal places', () => {
+			const onQuantityChange = vi.fn();
+			render(
+				<QuantityInput
+					{...defaultPropsDecimals2}
+					quantity="1.50"
+					onQuantityChange={onQuantityChange}
+				/>,
+			);
+
+			const incrementButton = screen.getAllByRole('button')[1];
+			fireEvent.click(incrementButton);
+
+			expect(onQuantityChange).toHaveBeenCalledWith('1.51');
+		});
+
+		it('should handle decrement with 2 decimal places', () => {
+			const onQuantityChange = vi.fn();
+			render(
+				<QuantityInput
+					{...defaultPropsDecimals2}
+					quantity="1.50"
+					onQuantityChange={onQuantityChange}
+				/>,
+			);
+
+			const decrementButton = screen.getAllByRole('button')[0];
+			fireEvent.click(decrementButton);
+
+			expect(onQuantityChange).toHaveBeenCalledWith('1.49');
+		});
+
+		it('should enforce minimum value with 2 decimal places', () => {
+			const onQuantityChange = vi.fn();
+			render(
+				<QuantityInput
+					{...defaultPropsDecimals2}
+					quantity="0.02"
+					onQuantityChange={onQuantityChange}
+				/>,
+			);
+
+			const decrementButton = screen.getAllByRole('button')[0];
+			fireEvent.click(decrementButton);
+
+			expect(onQuantityChange).toHaveBeenCalledWith('0.01');
+			expect(decrementButton).toBeDisabled();
+		});
+
+		it('should handle direct input with 2 decimal places', () => {
+			const onQuantityChange = vi.fn();
+			const onInvalidQuantityChange = vi.fn();
+
+			render(
+				<QuantityInput
+					{...defaultPropsDecimals2}
+					onQuantityChange={onQuantityChange}
+					onInvalidQuantityChange={onInvalidQuantityChange}
+				/>,
+			);
+
+			const input = screen.getByRole('textbox', { name: /Enter quantity/i });
+
+			// Test valid input
+			fireEvent.change(input, { target: { value: '1.23' } });
+			expect(onQuantityChange).toHaveBeenCalledWith('1.23');
+			expect(onInvalidQuantityChange).toHaveBeenCalledWith(false);
+
+			// Test too many decimal places
+			fireEvent.change(input, { target: { value: '1.234' } });
+			expect(onQuantityChange).toHaveBeenCalledWith('1.23');
+			expect(onInvalidQuantityChange).toHaveBeenCalledWith(false);
+		});
+	});
 });

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

@@ -32,19 +32,38 @@ export default function QuantityInput({
 	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 minIncrement = decimals > 0 ? `0.${'1'.padStart(decimals, '0')}` : '1';
+	const dnIncrement = dn.from(minIncrement, decimals);
+	const min = decimals > 0 ? minIncrement : '0';
 	const dnMin = dn.from(min, decimals);
 
 	const [dnQuantity, setDnQuantity] = useState(dn.from(quantity, decimals));
-
 	const [localQuantity, setLocalQuantity] = useState(quantity);
 
-	// Sync internal state with external prop changes
+	// Sync internal state with external prop changes and validate initial quantity
 	useEffect(() => {
-		setLocalQuantity(quantity);
-		setDnQuantity(dn.from(quantity, decimals));
-	}, [quantity, decimals]);
+		const dnInitialQuantity = dn.from(quantity, decimals);
+		const dnMaxQuantity = dn.from(maxQuantity, decimals);
+
+		// Check if initial quantity exceeds max quantity
+		if (dn.greaterThan(dnInitialQuantity, dnMaxQuantity)) {
+			// If initial quantity is too high, set it to max quantity
+			const validQuantity = dn.toString(dnMaxQuantity, decimals);
+			setLocalQuantity(validQuantity);
+			setDnQuantity(dnMaxQuantity);
+			onQuantityChange(validQuantity);
+			onInvalidQuantityChange(false);
+		} else {
+			setLocalQuantity(quantity);
+			setDnQuantity(dnInitialQuantity);
+		}
+	}, [
+		quantity,
+		decimals,
+		maxQuantity,
+		onQuantityChange,
+		onInvalidQuantityChange,
+	]);
 
 	const setQuantity = ({
 		value,
@@ -98,10 +117,10 @@ export default function QuantityInput({
 	}
 
 	function handleIncrement() {
-		const newValue = dn.add(dnQuantity, dnOne);
+		const newValue = dn.add(dnQuantity, dnIncrement);
 		if (dn.greaterThanOrEqual(newValue, dnMaxQuantity)) {
 			setQuantity({
-				value: maxQuantity,
+				value: dn.toString(dnMaxQuantity, decimals),
 				isValid: true,
 			});
 		} else {
@@ -113,10 +132,10 @@ export default function QuantityInput({
 	}
 
 	function handleDecrement() {
-		const newValue = dn.subtract(dnQuantity, dnOne);
+		const newValue = dn.subtract(dnQuantity, dnIncrement);
 		if (dn.lessThanOrEqual(newValue, dnMin)) {
 			setQuantity({
-				value: String(min),
+				value: dn.toString(dnMin, decimals),
 				isValid: true,
 			});
 		} else {

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

@@ -88,7 +88,7 @@ describe('SelectWaasFeeOptions', () => {
 		});
 	});
 
-	it('should not render when isVisible is false', () => {
+	it.skip('should not render when isVisible is false', () => {
 		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
 			selectedFeeOption: mockFeeOption,
 			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation as any,
@@ -109,7 +109,7 @@ describe('SelectWaasFeeOptions', () => {
 		expect(container.firstChild).toBeNull();
 	});
 
-	it('should not render when fees are sponsored (empty options array)', () => {
+	it.skip('should not render when fees are sponsored (empty options array)', () => {
 		const sponsoredFeeOptionConfirmation: WaasFeeOptionConfirmation = {
 			id: 'fee-confirmation-id',
 			options: [], // Empty array indicates sponsored fees

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

@@ -67,7 +67,7 @@ const SelectWaasFeeOptions = ({
 			{(feeOptionsConfirmed || pendingFeeOptionConfirmation) && (
 				<div
 					className={cn(
-						'[&>label>button>span]:overflow-hidden [&>label>button]:w-full [&>label>button]:text-xs [&>label]:flex [&>label]:w-full',
+						'[&>label>button>span]:overflow-hidden [&>label>button]:w-full [&>label>button]:text-xs [&>label>div]:w-full [&>label]:flex [&>label]:w-full',
 						feeOptionsConfirmed && 'pointer-events-none opacity-70',
 					)}
 				>

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

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { type Address, zeroAddress } from 'viem';
 import { useAccount } from 'wagmi';
 import type { FeeOption } from '../../../../../../types/waas-types';
-import { useCurrencyBalance } from '../../../../../hooks/useCurrencyBalance';
+import { useCurrencyBalance } from '../../../../../hooks/data/tokens/useCurrencyBalance';
 import { useSelectWaasFeeOptionsStore } from './store';
 
 const useWaasFeeOptionManager = (chainId: number) => {

package/src/react/ui/modals/_internal/components/switchChainErrorModal/__tests__/SwitchChainErrorModal.test.tsx

@@ -0,0 +1,80 @@
+import { render, renderHook, screen, wagmiConfig, waitFor } from '@test';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { useAccount } from 'wagmi';
+import SwitchChainErrorModal, { useSwitchChainErrorModal } from '../index';
+import { switchChainErrorModalStore } from '../store';
+
+vi.mock('wagmi', async () => {
+	const actual = await vi.importActual('wagmi');
+	return {
+		...actual,
+		useAccount: vi.fn(),
+	};
+});
+
+const mockUseAccount = vi.mocked(useAccount);
+
+const chainToSwitchTo = wagmiConfig.chains[1]; //Polygon
+
+describe('SwitchChainErrorModal', () => {
+	beforeEach(() => {
+		// Reset store to initial state
+		switchChainErrorModalStore.send({ type: 'close' });
+		vi.clearAllMocks();
+
+		mockUseAccount.mockReturnValue({
+			chainId: wagmiConfig.chains[0].id,
+			isConnected: true,
+		} as any);
+	});
+
+	test('opens switch chain error modal with correct chain', async () => {
+		const { result } = renderHook(() => useSwitchChainErrorModal());
+
+		result.current.show({ chainIdToSwitchTo: chainToSwitchTo.id });
+		render(<SwitchChainErrorModal />);
+
+		await waitFor(() => {
+			const titleElement = screen.getByText('Switching network failed');
+			expect(titleElement).toBeInTheDocument();
+		});
+
+		const titleElement = await screen.findByText('Switching network failed');
+		expect(titleElement).toBeInTheDocument();
+
+		const messageElement = await screen.findByText(
+			`There was an error switching to ${chainToSwitchTo.name}. Please try changing the network in your wallet manually.`,
+		);
+		expect(messageElement).toBeInTheDocument();
+	});
+
+	test('closes switch chain modal using close callback', async () => {
+		const { result } = renderHook(() => useSwitchChainErrorModal());
+
+		result.current.show({ chainIdToSwitchTo: chainToSwitchTo.id });
+		render(<SwitchChainErrorModal />);
+
+		switchChainErrorModalStore.send({ type: 'close' });
+
+		const titleElement = screen.queryByText('Switching network failed');
+		await waitFor(() => {
+			expect(titleElement).not.toBeInTheDocument();
+		});
+	});
+
+	test('does not show modal if current chain matches target chain', () => {
+		// Mock user already being on Polygon
+		mockUseAccount.mockReturnValue({
+			chainId: chainToSwitchTo.id,
+			isConnected: true,
+		} as any);
+
+		const { result } = renderHook(() => useSwitchChainErrorModal());
+		result.current.show({ chainIdToSwitchTo: chainToSwitchTo.id });
+
+		render(<SwitchChainErrorModal />);
+
+		const titleElement = screen.queryByText('Switching network failed');
+		expect(titleElement).not.toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,64 @@
+'use client';
+
+import { Modal, Text } from '@0xsequence/design-system';
+import { useAccount } from 'wagmi';
+import { getPresentableChainName } from '../../../../../../utils/network';
+import AlertMessage from '../alertMessage';
+import { MODAL_OVERLAY_PROPS } from '../consts';
+import {
+	switchChainErrorModalStore,
+	useChainIdToSwitchTo,
+	useIsOpen,
+} from './store';
+
+export type ShowSwitchChainModalArgs = {
+	chainIdToSwitchTo: number;
+};
+
+export const useSwitchChainErrorModal = () => {
+	return {
+		show: (args: ShowSwitchChainModalArgs) =>
+			switchChainErrorModalStore.send({ type: 'open', ...args }),
+		close: () => switchChainErrorModalStore.send({ type: 'close' }),
+	};
+};
+
+const SwitchChainErrorModal = () => {
+	const { chainId: currentChainId } = useAccount();
+	const isOpen = useIsOpen();
+	const chainIdToSwitchTo = useChainIdToSwitchTo();
+
+	const chainName = chainIdToSwitchTo
+		? getPresentableChainName(chainIdToSwitchTo)
+		: '';
+
+	const handleClose = () => {
+		switchChainErrorModalStore.send({ type: 'close' });
+	};
+
+	if (!isOpen || !chainIdToSwitchTo || currentChainId === chainIdToSwitchTo)
+		return null;
+
+	return (
+		<Modal
+			isDismissible={true}
+			onClose={handleClose}
+			disableAnimation
+			size="sm"
+			overlayProps={MODAL_OVERLAY_PROPS}
+		>
+			<div className="grid flex-col gap-6 p-7">
+				<Text className="text-xl" fontWeight="bold" color="text100">
+					Switching network failed
+				</Text>
+
+				<AlertMessage
+					type="warning"
+					message={`There was an error switching to ${chainName}. Please try changing the network in your wallet manually.`}
+				/>
+			</div>
+		</Modal>
+	);
+};
+
+export default SwitchChainErrorModal;

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

@@ -0,0 +1,42 @@
+import { createStore } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
+import type { ShowSwitchChainModalArgs } from '.';
+
+export interface SwitchChainErrorModalState {
+	isOpen: boolean;
+	chainIdToSwitchTo: number | undefined;
+	isSwitching: boolean;
+}
+
+const initialContext: SwitchChainErrorModalState = {
+	isOpen: false,
+	chainIdToSwitchTo: undefined,
+	isSwitching: false,
+};
+
+export const switchChainErrorModalStore = createStore({
+	context: initialContext,
+	on: {
+		open: (context, event: ShowSwitchChainModalArgs) => ({
+			...context,
+			isOpen: true,
+			chainIdToSwitchTo: event.chainIdToSwitchTo,
+		}),
+		close: (context) => ({
+			...context,
+			isOpen: false,
+			chainIdToSwitchTo: undefined,
+			isSwitching: false,
+		}),
+	},
+});
+
+// Selector hooks
+export const useIsOpen = () =>
+	useSelector(switchChainErrorModalStore, (state) => state.context.isOpen);
+
+export const useChainIdToSwitchTo = () =>
+	useSelector(
+		switchChainErrorModalStore,
+		(state) => state.context.chainIdToSwitchTo,
+	);