@0xsequence/marketplace-sdk 0.8.12 → 0.10.0

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 SelectWaasFeeOptions from '..';
 import type {
-	FeeOption,
 	FeeOptionExtended,
 	WaasFeeOptionConfirmation,
 } from '../../../../../../../types/waas-types';
-import { selectWaasFeeOptions$ } from '../store';
+import SelectWaasFeeOptions from '..';
+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();
+	});
 });

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,