@0xsequence/marketplace-sdk 0.9.0 → 0.10.0

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

@@ -1,37 +1,172 @@
 'use client';
 
-import type { Observable } from '@legendapp/state';
-import { observer } from '@legendapp/state/react';
-import { QuantityInputBase } from './QuantityInputBase';
+import {
+	AddIcon,
+	IconButton,
+	NumericInput,
+	SubtractIcon,
+} from '@0xsequence/design-system';
+import * as dn from 'dnum';
+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;
 };
 
-// Using observer to ensure re-render on observable changes
-export default observer(function QuantityInput({
-	$quantity,
-	$invalidQuantity,
+export default function QuantityInput({
+	quantity,
+	invalidQuantity,
+	onQuantityChange,
+	onInvalidQuantityChange,
 	decimals,
 	maxQuantity,
 	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, decimals));
+
+	const [localQuantity, setLocalQuantity] = useState(quantity);
+
+	// Sync internal state with external prop changes
+	useEffect(() => {
+		setLocalQuantity(quantity);
+		setDnQuantity(dn.from(quantity, decimals));
+	}, [quantity, decimals]);
+
+	const setQuantity = ({
+		value,
+		isValid,
+	}: {
+		value: string;
+		isValid: boolean;
+	}) => {
+		setLocalQuantity(value);
+		if (isValid) {
+			onQuantityChange(value);
+			setDnQuantity(dn.from(value, decimals));
+			onInvalidQuantityChange(false);
+		} else {
+			onInvalidQuantityChange(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 (
-		<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}
-		/>
+		<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 && (
+				<div className="text-negative text-sm">Invalid quantity</div>
+			)}
+		</div>
 	);
-});
+}

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

@@ -1,18 +1,16 @@
 import { TokenType } from '@0xsequence/api';
-import * as useNetworkModule from '@0xsequence/connect';
-import * as useWaasFeeOptionsModule from '@0xsequence/connect';
+import * as sequenceConnect from '@0xsequence/connect';
 import { NetworkType } from '@0xsequence/network';
-import { observable } from '@legendapp/state';
-import { render, screen } from '@test';
+import { fireEvent, render, screen, waitFor } from '@test';
 import { TEST_CURRENCY } from '@test/const';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type {
-	FeeOption,
 	FeeOptionExtended,
 	WaasFeeOptionConfirmation,
 } from '../../../../../../../types/waas-types';
 import SelectWaasFeeOptions from '..';
-import { selectWaasFeeOptions$ } from '../store';
+import * as storeModule from '../store';
+import { selectWaasFeeOptionsStore } from '../store';
 import * as useWaasFeeOptionManagerModule from '../useWaasFeeOptionManager';
 
 const mockFeeOption: FeeOptionExtended = {
@@ -34,12 +32,37 @@ const mockFeeOption: FeeOptionExtended = {
 	hasEnoughBalanceForFee: true,
 };
 
+const mockFeeOption2: FeeOptionExtended = {
+	gasLimit: 21000,
+	to: '0x456',
+	value: '2000000000000000',
+	token: {
+		chainId: 1,
+		contractAddress: '0x456',
+		decimals: 6,
+		logoURL: 'https://example.com/usdc.png',
+		name: 'USD Coin',
+		symbol: 'USDC',
+		tokenID: null,
+		type: TokenType.ERC20,
+	},
+	balance: '2000000000000000',
+	balanceFormatted: '2',
+	hasEnoughBalanceForFee: true,
+};
+
 const mockPendingFeeOptionConfirmation: WaasFeeOptionConfirmation = {
 	id: 'fee-confirmation-id',
 	options: [mockFeeOption],
 	chainId: 1,
 };
 
+const mockPendingFeeOptionConfirmationMultiple: WaasFeeOptionConfirmation = {
+	id: 'fee-confirmation-id-multiple',
+	options: [mockFeeOption, mockFeeOption2],
+	chainId: 1,
+};
+
 // Mock currency balance with formatted value
 const mockCurrencyBalance = {
 	value: 2000000000000000n,
@@ -54,19 +77,21 @@ describe('SelectWaasFeeOptions', () => {
 		vi.resetAllMocks();
 		vi.resetModules();
 
-		selectWaasFeeOptions$.isVisible.set(true);
-		selectWaasFeeOptions$.selectedFeeOption.set(undefined);
-		selectWaasFeeOptions$.pendingFeeOptionConfirmation.set(undefined);
+		selectWaasFeeOptionsStore.send({ type: 'show' });
+		selectWaasFeeOptionsStore.send({
+			type: 'setSelectedFeeOption',
+			feeOption: undefined,
+		});
+		selectWaasFeeOptionsStore.send({
+			type: 'setPendingFeeOptionConfirmation',
+			confirmation: undefined,
+		});
 	});
 
 	it('should not render when isVisible is false', () => {
 		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
-			selectedFeeOption$: observable<FeeOptionExtended | undefined>(
-				mockFeeOption,
-			),
 			selectedFeeOption: mockFeeOption,
-			// @ts-expect-error - types are not compatible
-			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation,
+			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation as any,
 			currencyBalance: mockCurrencyBalance,
 			currencyBalanceLoading: false,
 			insufficientBalance: false,
@@ -75,7 +100,7 @@ describe('SelectWaasFeeOptions', () => {
 		});
 
 		// Set isVisible to false
-		selectWaasFeeOptions$.isVisible.set(false);
+		selectWaasFeeOptionsStore.send({ type: 'hide' });
 
 		const { container } = render(
 			<SelectWaasFeeOptions chainId={1} onCancel={mockOnCancel} />,
@@ -92,9 +117,7 @@ describe('SelectWaasFeeOptions', () => {
 		};
 
 		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
-			selectedFeeOption$: observable<FeeOption | undefined>(undefined),
 			selectedFeeOption: undefined,
-			// @ts-expect-error - types are not compatible
 			pendingFeeOptionConfirmation: sponsoredFeeOptionConfirmation,
 			currencyBalance: mockCurrencyBalance,
 			currencyBalanceLoading: false,
@@ -103,17 +126,18 @@ describe('SelectWaasFeeOptions', () => {
 			handleConfirmFeeOption: mockHandleConfirmFeeOption,
 		});
 
-		vi.spyOn(useNetworkModule, 'getNetwork').mockReturnValue({
+		vi.spyOn(sequenceConnect, 'getNetwork').mockReturnValue({
 			type: NetworkType.MAINNET,
 			chainId: 1,
 			name: 'Mainnet',
 			nativeToken: TEST_CURRENCY,
 		});
-		vi.spyOn(useWaasFeeOptionsModule, 'useWaasFeeOptions').mockReturnValue([
-			// @ts-expect-error - types are not compatible
-			sponsoredFeeOptionConfirmation,
+		vi.spyOn(sequenceConnect, 'useWaasFeeOptions').mockReturnValue([
+			sponsoredFeeOptionConfirmation as any,
 			vi.fn(),
-		]);
+			false,
+			false,
+		] as any);
 
 		const { container } = render(
 			<SelectWaasFeeOptions chainId={1} onCancel={mockOnCancel} />,
@@ -125,7 +149,6 @@ describe('SelectWaasFeeOptions', () => {
 	it('should render loading skeleton when fee options are loading', () => {
 		// Mock the hook with loading state
 		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
-			selectedFeeOption$: observable<FeeOption | undefined>(undefined),
 			selectedFeeOption: mockFeeOption,
 			pendingFeeOptionConfirmation: undefined,
 			currencyBalance: undefined,
@@ -134,12 +157,12 @@ describe('SelectWaasFeeOptions', () => {
 			feeOptionsConfirmed: false,
 			handleConfirmFeeOption: mockHandleConfirmFeeOption,
 		});
-		vi.spyOn(useWaasFeeOptionsModule, 'useWaasFeeOptions').mockReturnValue([
-			// @ts-expect-error - types are not compatible
-			mockPendingFeeOptionConfirmation,
+		vi.spyOn(sequenceConnect, 'useWaasFeeOptions').mockReturnValue([
+			mockPendingFeeOptionConfirmation as any,
 			vi.fn(),
-		]);
-		vi.spyOn(useNetworkModule, 'getNetwork').mockReturnValue({
+			false,
+		] as any);
+		vi.spyOn(sequenceConnect, 'getNetwork').mockReturnValue({
 			type: NetworkType.MAINNET,
 			chainId: 1,
 			name: 'Mainnet',
@@ -157,28 +180,30 @@ describe('SelectWaasFeeOptions', () => {
 	});
 
 	it('should render fee options when loaded', () => {
-		selectWaasFeeOptions$.pendingFeeOptionConfirmation.set(
-			mockPendingFeeOptionConfirmation,
-		);
-		selectWaasFeeOptions$.selectedFeeOption.set(mockFeeOption);
+		selectWaasFeeOptionsStore.send({
+			type: 'setPendingFeeOptionConfirmation',
+			confirmation: mockPendingFeeOptionConfirmation as any,
+		});
+		selectWaasFeeOptionsStore.send({
+			type: 'setSelectedFeeOption',
+			feeOption: mockFeeOption,
+		});
 
 		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
-			selectedFeeOption$: selectWaasFeeOptions$.selectedFeeOption,
 			selectedFeeOption: mockFeeOption,
-			// @ts-expect-error - types are not compatible
-			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation,
+			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation as any,
 			currencyBalance: mockCurrencyBalance,
 			currencyBalanceLoading: false,
 			insufficientBalance: false,
 			feeOptionsConfirmed: false,
 			handleConfirmFeeOption: mockHandleConfirmFeeOption,
 		});
-		vi.spyOn(useWaasFeeOptionsModule, 'useWaasFeeOptions').mockReturnValue([
-			// @ts-expect-error - types are not compatible
-			mockPendingFeeOptionConfirmation,
+		vi.spyOn(sequenceConnect, 'useWaasFeeOptions').mockReturnValue([
+			mockPendingFeeOptionConfirmation as any,
 			vi.fn(),
-		]);
-		vi.spyOn(useNetworkModule, 'getNetwork').mockReturnValue({
+			false,
+		] as any);
+		vi.spyOn(sequenceConnect, 'getNetwork').mockReturnValue({
 			type: NetworkType.MAINNET,
 			chainId: 1,
 			name: 'Mainnet',
@@ -196,4 +221,278 @@ describe('SelectWaasFeeOptions', () => {
 		expect(screen.getByText('Select a fee option')).toBeInTheDocument();
 		expect(screen.queryByText('Confirm fee option')).not.toBeInTheDocument();
 	});
+
+	it('should select a fee option from multiple options', async () => {
+		const mockSetSelectedFeeOption = vi.fn();
+
+		vi.spyOn(storeModule, 'useSelectWaasFeeOptionsStore').mockReturnValue({
+			isVisible: true,
+			selectedFeeOption: mockFeeOption,
+			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmationMultiple,
+			show: vi.fn(),
+			hide: vi.fn(),
+			setSelectedFeeOption: mockSetSelectedFeeOption,
+			setPendingFeeOptionConfirmation: vi.fn(),
+		});
+
+		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
+			selectedFeeOption: mockFeeOption,
+			pendingFeeOptionConfirmation:
+				mockPendingFeeOptionConfirmationMultiple as any,
+			currencyBalance: mockCurrencyBalance,
+			currencyBalanceLoading: false,
+			insufficientBalance: false,
+			feeOptionsConfirmed: false,
+			handleConfirmFeeOption: mockHandleConfirmFeeOption,
+		});
+
+		vi.spyOn(sequenceConnect, 'useWaasFeeOptions').mockReturnValue([
+			mockPendingFeeOptionConfirmationMultiple as any,
+			vi.fn(),
+			false,
+		] as any);
+		vi.spyOn(sequenceConnect, 'getNetwork').mockReturnValue({
+			type: NetworkType.MAINNET,
+			chainId: 1,
+			name: 'Mainnet',
+			nativeToken: TEST_CURRENCY,
+		});
+
+		render(<SelectWaasFeeOptions chainId={1} onCancel={mockOnCancel} />);
+
+		// Find the select dropdown (fee option selector)
+		const selectTrigger = screen.getByRole('combobox');
+		expect(selectTrigger).toBeInTheDocument();
+		expect(selectTrigger).toHaveAttribute('id', 'fee-option');
+
+		// Click to open the dropdown
+		fireEvent.click(selectTrigger);
+
+		// Look for the USDC option in the dropdown
+		await waitFor(() => {
+			const usdcOption = screen.getByText(/USDC/);
+			expect(usdcOption).toBeInTheDocument();
+
+			// Select the USDC option
+			fireEvent.click(usdcOption);
+		});
+
+		// Verify the setSelectedFeeOption was called with the USDC option
+		await waitFor(() => {
+			expect(mockSetSelectedFeeOption).toHaveBeenCalledWith(mockFeeOption2);
+		});
+	});
+
+	it('should close the modal when cancel button is clicked', async () => {
+		const mockHide = vi.fn();
+
+		vi.spyOn(storeModule, 'useSelectWaasFeeOptionsStore').mockReturnValue({
+			isVisible: true,
+			selectedFeeOption: mockFeeOption,
+			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation,
+			show: vi.fn(),
+			hide: mockHide,
+			setSelectedFeeOption: vi.fn(),
+			setPendingFeeOptionConfirmation: vi.fn(),
+		});
+
+		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
+			selectedFeeOption: mockFeeOption,
+			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation as any,
+			currencyBalance: mockCurrencyBalance,
+			currencyBalanceLoading: false,
+			insufficientBalance: false,
+			feeOptionsConfirmed: false,
+			handleConfirmFeeOption: mockHandleConfirmFeeOption,
+		});
+
+		vi.spyOn(sequenceConnect, 'useWaasFeeOptions').mockReturnValue([
+			mockPendingFeeOptionConfirmation as any,
+			vi.fn(),
+			false,
+		] as any);
+		vi.spyOn(sequenceConnect, 'getNetwork').mockReturnValue({
+			type: NetworkType.MAINNET,
+			chainId: 1,
+			name: 'Mainnet',
+			nativeToken: TEST_CURRENCY,
+		});
+
+		render(<SelectWaasFeeOptions chainId={1} onCancel={mockOnCancel} />);
+
+		const cancelButton = screen.getByText('Cancel');
+		expect(cancelButton).toBeInTheDocument();
+
+		fireEvent.click(cancelButton);
+
+		expect(mockHide).toHaveBeenCalledTimes(1);
+		expect(mockOnCancel).toHaveBeenCalledTimes(1);
+	});
+
+	it('should confirm fee option when confirm button is clicked', async () => {
+		selectWaasFeeOptionsStore.send({
+			type: 'setPendingFeeOptionConfirmation',
+			confirmation: mockPendingFeeOptionConfirmation as any,
+		});
+		selectWaasFeeOptionsStore.send({
+			type: 'setSelectedFeeOption',
+			feeOption: mockFeeOption,
+		});
+
+		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
+			selectedFeeOption: mockFeeOption,
+			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation as any,
+			currencyBalance: mockCurrencyBalance,
+			currencyBalanceLoading: false,
+			insufficientBalance: false,
+			feeOptionsConfirmed: false,
+			handleConfirmFeeOption: mockHandleConfirmFeeOption,
+		});
+
+		vi.spyOn(sequenceConnect, 'useWaasFeeOptions').mockReturnValue([
+			mockPendingFeeOptionConfirmation as any,
+			vi.fn(),
+			false,
+		] as any);
+		vi.spyOn(sequenceConnect, 'getNetwork').mockReturnValue({
+			type: NetworkType.MAINNET,
+			chainId: 1,
+			name: 'Mainnet',
+			nativeToken: TEST_CURRENCY,
+		});
+
+		render(<SelectWaasFeeOptions chainId={1} onCancel={mockOnCancel} />);
+
+		const confirmButton = screen.getByText(
+			`Continue with ${mockFeeOption.token.symbol}`,
+		);
+		expect(confirmButton).toBeInTheDocument();
+
+		fireEvent.click(confirmButton);
+
+		expect(mockHandleConfirmFeeOption).toHaveBeenCalledTimes(1);
+	});
+
+	it('should disable confirm button when insufficient balance', () => {
+		selectWaasFeeOptionsStore.send({
+			type: 'setPendingFeeOptionConfirmation',
+			confirmation: mockPendingFeeOptionConfirmation as any,
+		});
+		selectWaasFeeOptionsStore.send({
+			type: 'setSelectedFeeOption',
+			feeOption: mockFeeOption,
+		});
+
+		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
+			selectedFeeOption: mockFeeOption,
+			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation as any,
+			currencyBalance: mockCurrencyBalance,
+			currencyBalanceLoading: false,
+			insufficientBalance: true, // Insufficient balance
+			feeOptionsConfirmed: false,
+			handleConfirmFeeOption: mockHandleConfirmFeeOption,
+		});
+
+		vi.spyOn(sequenceConnect, 'useWaasFeeOptions').mockReturnValue([
+			mockPendingFeeOptionConfirmation as any,
+			vi.fn(),
+			false,
+		] as any);
+		vi.spyOn(sequenceConnect, 'getNetwork').mockReturnValue({
+			type: NetworkType.MAINNET,
+			chainId: 1,
+			name: 'Mainnet',
+			nativeToken: TEST_CURRENCY,
+		});
+
+		render(<SelectWaasFeeOptions chainId={1} onCancel={mockOnCancel} />);
+
+		const confirmButton = screen
+			.getByText(`Continue with ${mockFeeOption.token.symbol}`)
+			.closest('button');
+		expect(confirmButton).toBeDisabled();
+
+		// Try to click it and verify handleConfirmFeeOption is not called
+		if (confirmButton) {
+			fireEvent.click(confirmButton);
+		}
+		expect(mockHandleConfirmFeeOption).not.toHaveBeenCalled();
+	});
+
+	it('should show confirmed state when fee options are confirmed', () => {
+		selectWaasFeeOptionsStore.send({
+			type: 'setPendingFeeOptionConfirmation',
+			confirmation: mockPendingFeeOptionConfirmation as any,
+		});
+		selectWaasFeeOptionsStore.send({
+			type: 'setSelectedFeeOption',
+			feeOption: mockFeeOption,
+		});
+
+		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
+			selectedFeeOption: mockFeeOption,
+			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation as any,
+			currencyBalance: mockCurrencyBalance,
+			currencyBalanceLoading: false,
+			insufficientBalance: false,
+			feeOptionsConfirmed: true, // Options confirmed
+			handleConfirmFeeOption: mockHandleConfirmFeeOption,
+		});
+
+		vi.spyOn(sequenceConnect, 'useWaasFeeOptions').mockReturnValue([
+			mockPendingFeeOptionConfirmation as any,
+			vi.fn(),
+			false,
+		] as any);
+		vi.spyOn(sequenceConnect, 'getNetwork').mockReturnValue({
+			type: NetworkType.MAINNET,
+			chainId: 1,
+			name: 'Mainnet',
+			nativeToken: TEST_CURRENCY,
+		});
+
+		render(
+			<SelectWaasFeeOptions
+				chainId={1}
+				onCancel={mockOnCancel}
+				titleOnConfirm="Confirm fee option"
+			/>,
+		);
+
+		expect(screen.getByText('Confirm fee option')).toBeInTheDocument();
+
+		// Should show "Confirming" state in button
+		expect(screen.getByText('Confirming')).toBeInTheDocument();
+
+		// Fee options selector should be disabled (pointer-events-none)
+		const feeOptionsContainer = document.querySelector('.pointer-events-none');
+		expect(feeOptionsContainer).toBeInTheDocument();
+	});
+
+	it('should reset store state when modal is hidden via cancel', () => {
+		selectWaasFeeOptionsStore.send({
+			type: 'setPendingFeeOptionConfirmation',
+			confirmation: mockPendingFeeOptionConfirmation as any,
+		});
+		selectWaasFeeOptionsStore.send({
+			type: 'setSelectedFeeOption',
+			feeOption: mockFeeOption,
+		});
+
+		expect(selectWaasFeeOptionsStore.getSnapshot().context.isVisible).toBe(
+			true,
+		);
+		expect(
+			selectWaasFeeOptionsStore.getSnapshot().context.selectedFeeOption,
+		).toBe(mockFeeOption);
+
+		// Hide the modal (simulating cancel action)
+		selectWaasFeeOptionsStore.send({ type: 'hide' });
+
+		// Verify state is reset
+		const state = selectWaasFeeOptionsStore.getSnapshot().context;
+		expect(state.isVisible).toBe(false);
+		expect(state.selectedFeeOption).toBeUndefined();
+		expect(state.pendingFeeOptionConfirmation).toBeUndefined();
+	});
 });