@0xsequence/marketplace-sdk 0.8.4 → 0.8.6

package/src/react/ui/modals/BuyModal/__tests__/Modal.test.tsx

@@ -1,4 +1,4 @@
-import { WebSdkWrapper, cleanup, render, screen } from '@test';
+import { cleanup, render, screen } from '@test';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
 import { server } from '@test';
@@ -46,9 +46,7 @@ describe('BuyModal', () => {
 		//   },
 		// });
 		// render(
-		// <WebSdkWrapper>
 		//   <BuyModal />
-		// </WebSdkWrapper>
 		// );
 		// // Should show error modal
 		// await waitFor(() => {
@@ -98,11 +96,7 @@ describe('BuyModal', () => {
 			},
 		});
 
-		render(
-			<WebSdkWrapper>
-				<BuyModal />
-			</WebSdkWrapper>,
-		);
+		render(<BuyModal />);
 
 		// Should show loading modal
 		expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();

package/src/react/ui/modals/SellModal/__tests__/Modal.test.tsx

@@ -1,166 +1,103 @@
-import { cleanup, fireEvent, render, screen } from '@test';
+import { cleanup, render, renderHook, screen, waitFor } from '@test';
+import { TEST_COLLECTIBLE } from '@test/const';
+import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { useCollection, useCurrency } from '../../../../hooks';
+import { useSellModal } from '..';
+import { StepType, WalletKind } from '../../../../_internal';
+import { createMockStep } from '../../../../_internal/api/__mocks__/marketplace.msw';
+import { mockOrder } from '../../../../_internal/api/__mocks__/marketplace.msw';
+import * as walletModule from '../../../../_internal/wallet/useWallet';
 import { SellModal } from '../Modal';
-import { type OpenSellModalArgs, sellModal$ } from '../store';
+import * as useGetTokenApprovalDataModule from '../hooks/useGetTokenApproval';
 
-import { MarketplaceKind, type Order } from '../../../../_internal';
-
-import { server } from '@test';
-import { http, HttpResponse } from 'msw';
-import { mockMarketplaceEndpoint } from '../../../../_internal/api/__mocks__/marketplace.msw';
-import { useSell } from '../hooks/useSell';
-
-// Test data
-const mockOrder = {
-	orderId: '1',
-	priceAmount: '1000000000000000000',
-	priceCurrencyAddress: '0x0',
-	quantityRemaining: '1',
-	createdAt: new Date().toISOString(),
-	marketplace: MarketplaceKind.sequence_marketplace_v2,
-} as Order;
-
-const mockModalProps = {
-	collectionAddress: '0x123',
-	chainId: 1,
-	tokenId: '1',
+const defaultArgs = {
+	collectionAddress: TEST_COLLECTIBLE.collectionAddress,
+	chainId: TEST_COLLECTIBLE.chainId,
+	tokenId: TEST_COLLECTIBLE.collectibleId,
 	order: mockOrder,
-} satisfies OpenSellModalArgs;
-
-// TODO: remove when there is mocks for more endpoints
-vi.mock(import('../../../../hooks'), async (importOriginal) => {
-	const mod = await importOriginal();
-	return {
-		...mod,
-		useCollection: vi.fn().mockImplementation(mod.useCollection),
-		useCurrency: vi.fn().mockImplementation(mod.useCurrency),
-	};
-});
-
-vi.mock('@0xsequence/kit', () => ({
-	useWaasFeeOptions: vi.fn().mockReturnValue([]),
-}));
-
-beforeEach(() => {
-	cleanup();
-	vi.clearAllMocks();
-	vi.mock('../hooks/useSell', () => ({
-		useSell: vi.fn().mockReturnValue({
-			isLoading: false,
-			executeApproval: vi.fn(),
-			sell: vi.fn(),
-		}),
-	}));
-});
+};
 
-describe.skip('SellModal', () => {
-	it('should not render when modal is closed', () => {
-		render(<SellModal />);
-		expect(screen.queryByText('You have an offer')).toBeNull();
-	});
+describe('MakeOfferModal', () => {
+	const mockWallet = createMockWallet();
 
-	it.skip('should render error state', async () => {
-		// Override MSW to return error
-		server.use(
-			http.post(mockMarketplaceEndpoint('GetCollectible'), () => {
-				return HttpResponse.error();
-			}),
-		);
-		sellModal$.open(mockModalProps);
-		render(<SellModal />);
-		const errorModal = await screen.findByTestId('error-modal');
-		expect(errorModal).toBeVisible();
+	beforeEach(() => {
+		cleanup();
+		// Reset all mocks
+		vi.clearAllMocks();
+		vi.resetAllMocks();
+		vi.restoreAllMocks();
 	});
 
-	it.skip('should render main modal when data is loaded', async () => {
-		vi.mocked(useCollection).mockReturnValue({
-			// @ts-expect-error - TODO: mock this better
-			data: {},
+	it('should show main button if there is no approval step', async () => {
+		// Mock sequence wallet
+		const sequenceWallet = {
+			...mockWallet,
+			walletKind: WalletKind.sequence,
+		};
+		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+			wallet: sequenceWallet,
 			isLoading: false,
 			isError: false,
 		});
-
-		vi.mocked(useCurrency).mockReturnValue({
-			// @ts-expect-error - TODO: mock this better
-			data: {},
+		vi.spyOn(
+			useGetTokenApprovalDataModule,
+			'useGetTokenApprovalData',
+		).mockReturnValue({
+			data: {
+				step: null,
+			},
 			isLoading: false,
-			isError: false,
+			isSuccess: true,
 		});
 
-		sellModal$.open(mockModalProps);
+		// Render the modal
+		const { result } = renderHook(() => useSellModal());
+		result.current.show(defaultArgs);
+
 		render(<SellModal />);
-		const text = await screen.findByText('Offer received');
-		expect(text).toBeInTheDocument();
+
+		// Wait for the component to update
+		await waitFor(() => {
+			// The Approve TOKEN button should not exist
+			expect(screen.queryByText('Approve TOKEN')).toBeNull();
+
+			// The Accept button should exist
+			expect(screen.getByRole('button', { name: 'Accept' })).toBeDefined();
+		});
 	});
-});
 
-describe.skip('Modal Actions', () => {
-	it('should handle approval step correctly', async () => {
-		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-		vi.mocked(useCollection as any).mockReturnValue({
-			data: {
-				name: 'Test Collection',
-				decimals: 0,
-			},
+	it('(non-sequence wallets) should show approve token button if there is an approval step, disable main button', async () => {
+		const nonSequenceWallet = {
+			...mockWallet,
+			walletKind: 'unknown' as WalletKind,
+		};
+		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+			wallet: nonSequenceWallet,
 			isLoading: false,
 			isError: false,
 		});
-
-		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-		vi.mocked(useCurrency as any).mockReturnValue({
+		vi.spyOn(
+			useGetTokenApprovalDataModule,
+			'useGetTokenApprovalData',
+		).mockReturnValue({
 			data: {
-				name: 'Test Currency',
-				imageUrl: 'test-url',
+				step: createMockStep(StepType.tokenApproval),
 			},
 			isLoading: false,
-			isError: false,
+			isSuccess: true,
 		});
 
-		const mockExecuteApproval = vi.fn();
+		// Render the modal
+		const { result } = renderHook(() => useSellModal());
+		result.current.show(defaultArgs);
 
-		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-		(useSell as any).mockReturnValue({
-			isLoading: false,
-			executeApproval: mockExecuteApproval,
-			sell: vi.fn(),
-		});
-
-		sellModal$.open({
-			...mockModalProps,
-			order: {
-				...mockOrder,
-				quantityRemaining: '1',
-			},
-		});
-		sellModal$.steps.approval.exist.set(true);
-		sellModal$.steps.approval.isExecuting.set(false);
-		sellModal$.steps.transaction.isExecuting.set(false);
 		render(<SellModal />);
 
-		const approveButton = await screen.findByText('Approve TOKEN');
-		expect(approveButton).not.toBeDisabled();
-		fireEvent.click(approveButton);
-		expect(mockExecuteApproval).toHaveBeenCalled();
-	});
-});
+		await waitFor(() => {
+			expect(screen.getByText('Approve TOKEN')).toBeDefined();
 
-it.skip('should handle sell action correctly', async () => {
-	const mockSell = vi.fn();
-	// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-	(useSell as any).mockReturnValue({
-		isLoading: false,
-		executeApproval: vi.fn(),
-		sell: mockSell,
+			expect(screen.getByRole('button', { name: 'Accept' })).toBeDefined();
+			expect(screen.getByRole('button', { name: 'Accept' })).toBeDisabled();
+		});
 	});
-
-	sellModal$.open(mockModalProps);
-	sellModal$.steps.approval.exist.set(false);
-	sellModal$.steps.approval.isExecuting.set(false);
-	sellModal$.steps.transaction.isExecuting.set(false);
-	render(<SellModal />);
-
-	const acceptButton = screen.getByText('Accept');
-	fireEvent.click(acceptButton);
-	expect(mockSell).toHaveBeenCalled();
 });

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

@@ -0,0 +1,72 @@
+'use client';
+
+import { fireEvent, render, screen } from '@test';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import ActionButtons from '../_components/ActionButtons';
+
+describe('ActionButtons', () => {
+	const mockOnCancel = vi.fn();
+	const mockOnConfirm = vi.fn();
+
+	const defaultProps = {
+		onCancel: mockOnCancel,
+		onConfirm: mockOnConfirm,
+		disabled: false,
+		loading: false,
+		confirmed: false,
+	};
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should render both buttons', () => {
+		render(<ActionButtons {...defaultProps} />);
+
+		expect(screen.getByText('Cancel')).toBeInTheDocument();
+		expect(screen.getByText('Continue with')).toBeInTheDocument();
+	});
+
+	it('should call onCancel when cancel button is clicked', () => {
+		render(<ActionButtons {...defaultProps} />);
+
+		const cancelButton = screen.getByText('Cancel');
+		fireEvent.click(cancelButton);
+
+		expect(mockOnCancel).toHaveBeenCalledTimes(1);
+	});
+
+	it('should call onConfirm when confirm button is clicked', () => {
+		render(<ActionButtons {...defaultProps} />);
+
+		const confirmButton = screen.getByText('Continue with');
+		fireEvent.click(confirmButton);
+
+		expect(mockOnConfirm).toHaveBeenCalledTimes(1);
+	});
+
+	it('should disable confirm button when disabled prop is true', () => {
+		render(<ActionButtons {...defaultProps} disabled={true} />);
+
+		const confirmButton = screen.getByText('Continue with').closest('button');
+		expect(confirmButton).toBeDisabled();
+
+		if (confirmButton) {
+			fireEvent.click(confirmButton);
+		}
+		expect(mockOnConfirm).not.toHaveBeenCalled();
+	});
+
+	it('should display token symbol when provided', () => {
+		render(<ActionButtons {...defaultProps} tokenSymbol="ETH" />);
+
+		expect(screen.getByText('Continue with ETH')).toBeInTheDocument();
+	});
+
+	it('should show skeleton loading when tokenSymbol is not provided', () => {
+		render(<ActionButtons {...defaultProps} />);
+
+		expect(screen.getByText('Continue with')).toBeInTheDocument();
+		expect(document.querySelector('.animate-shimmer')).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,50 @@
+'use client';
+
+import { render, screen } from '@test';
+import { describe, expect, it } from 'vitest';
+import BalanceIndicator from '../_components/BalanceIndicator';
+
+describe('BalanceIndicator', () => {
+	it('should render warning icon and negative text when insufficient balance', () => {
+		render(
+			<BalanceIndicator
+				insufficientBalance={true}
+				currencyBalance={{ formatted: '0.5' }}
+				selectedFeeOption={{ token: { symbol: 'ETH' } }}
+			/>,
+		);
+
+		expect(document.querySelector('.text-negative')).toBeInTheDocument();
+		expect(screen.getByText('You have 0.5 ETH')).toBeInTheDocument();
+		expect(screen.getByText('You have 0.5 ETH').className).toContain(
+			'text-negative',
+		);
+	});
+
+	it('should render checkmark icon and normal text when balance is sufficient', () => {
+		render(
+			<BalanceIndicator
+				insufficientBalance={false}
+				currencyBalance={{ formatted: '1.5' }}
+				selectedFeeOption={{ token: { symbol: 'ETH' } }}
+			/>,
+		);
+
+		expect(document.querySelector('.text-positive')).toBeInTheDocument();
+		expect(screen.getByText('You have 1.5 ETH')).toBeInTheDocument();
+		expect(screen.getByText('You have 1.5 ETH').className).not.toContain(
+			'text-negative',
+		);
+	});
+
+	it('should handle undefined currencyBalance gracefully', () => {
+		render(
+			<BalanceIndicator
+				insufficientBalance={false}
+				selectedFeeOption={{ token: { symbol: 'ETH' } }}
+			/>,
+		);
+
+		expect(screen.getByText('You have 0 ETH')).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,193 @@
+import { TokenType } from '@0xsequence/api';
+import * as useNetworkModule from '@0xsequence/connect';
+import * as useWaasFeeOptionsModule from '@0xsequence/connect';
+import { NetworkType } from '@0xsequence/network';
+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 '../store';
+import * as useWaasFeeOptionManagerModule from '../useWaasFeeOptionManager';
+
+const mockFeeOption: FeeOptionExtended = {
+	gasLimit: 21000,
+	to: '0x123',
+	value: '1000000000000000',
+	token: {
+		chainId: 1,
+		contractAddress: TEST_CURRENCY.contractAddress,
+		decimals: TEST_CURRENCY.decimals,
+		logoURL: TEST_CURRENCY.imageUrl,
+		name: TEST_CURRENCY.name,
+		symbol: TEST_CURRENCY.symbol,
+		tokenID: null,
+		type: TokenType.ERC20,
+	},
+	balance: '1000000000000000',
+	balanceFormatted: '1',
+	hasEnoughBalanceForFee: true,
+};
+
+const mockPendingFeeOptionConfirmation: WaasFeeOptionConfirmation = {
+	id: 'fee-confirmation-id',
+	options: [mockFeeOption],
+	chainId: 1,
+};
+
+// Mock currency balance with formatted value
+const mockCurrencyBalance = {
+	value: 2000000000000000n,
+	formatted: '0.002',
+};
+
+describe('SelectWaasFeeOptions', () => {
+	const mockOnCancel = vi.fn();
+	const mockHandleConfirmFeeOption = vi.fn();
+
+	beforeEach(() => {
+		vi.resetAllMocks();
+		vi.resetModules();
+
+		selectWaasFeeOptions$.isVisible.set(true);
+		selectWaasFeeOptions$.selectedFeeOption.set(undefined);
+		selectWaasFeeOptions$.pendingFeeOptionConfirmation.set(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,
+			currencyBalance: mockCurrencyBalance,
+			currencyBalanceLoading: false,
+			insufficientBalance: false,
+			feeOptionsConfirmed: false,
+			handleConfirmFeeOption: mockHandleConfirmFeeOption,
+		});
+
+		// Set isVisible to false
+		selectWaasFeeOptions$.isVisible.set(false);
+
+		const { container } = render(
+			<SelectWaasFeeOptions chainId={1} onCancel={mockOnCancel} />,
+		);
+
+		expect(container.firstChild).toBeNull();
+	});
+
+	it('should not render on testnet', () => {
+		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
+			selectedFeeOption$: observable<FeeOption | undefined>(mockFeeOption),
+			selectedFeeOption: mockFeeOption,
+			// @ts-expect-error - types are not compatible
+			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation,
+			currencyBalance: mockCurrencyBalance,
+			currencyBalanceLoading: false,
+			insufficientBalance: false,
+			feeOptionsConfirmed: false,
+			handleConfirmFeeOption: mockHandleConfirmFeeOption,
+		});
+
+		vi.spyOn(useNetworkModule, 'getNetwork').mockReturnValue({
+			type: NetworkType.TESTNET,
+			chainId: 1,
+			name: 'Testnet',
+			nativeToken: TEST_CURRENCY,
+		});
+		vi.spyOn(useWaasFeeOptionsModule, 'useWaasFeeOptions').mockReturnValue([
+			// @ts-expect-error - types are not compatible
+			mockPendingFeeOptionConfirmation,
+			vi.fn(),
+		]);
+
+		const { container } = render(
+			<SelectWaasFeeOptions chainId={1} onCancel={mockOnCancel} />,
+		);
+
+		expect(container.firstChild).toBeNull();
+	});
+
+	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,
+			currencyBalanceLoading: true,
+			insufficientBalance: false,
+			feeOptionsConfirmed: false,
+			handleConfirmFeeOption: mockHandleConfirmFeeOption,
+		});
+		vi.spyOn(useWaasFeeOptionsModule, 'useWaasFeeOptions').mockReturnValue([
+			// @ts-expect-error - types are not compatible
+			mockPendingFeeOptionConfirmation,
+			vi.fn(),
+		]);
+		vi.spyOn(useNetworkModule, 'getNetwork').mockReturnValue({
+			type: NetworkType.MAINNET,
+			chainId: 1,
+			name: 'Mainnet',
+			nativeToken: TEST_CURRENCY,
+		});
+
+		render(<SelectWaasFeeOptions chainId={1} onCancel={mockOnCancel} />);
+
+		expect(screen.getByText('Select a fee option')).toBeInTheDocument();
+
+		// Should render skeleton
+		const skeleton = document.querySelector('.h-\\[52px\\]');
+		expect(skeleton).toBeInTheDocument();
+		expect(skeleton).toHaveClass('animate-shimmer');
+	});
+
+	it('should render fee options when loaded', () => {
+		selectWaasFeeOptions$.pendingFeeOptionConfirmation.set(
+			mockPendingFeeOptionConfirmation,
+		);
+		selectWaasFeeOptions$.selectedFeeOption.set(mockFeeOption);
+
+		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
+			selectedFeeOption$: selectWaasFeeOptions$.selectedFeeOption,
+			selectedFeeOption: mockFeeOption,
+			// @ts-expect-error - types are not compatible
+			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation,
+			currencyBalance: mockCurrencyBalance,
+			currencyBalanceLoading: false,
+			insufficientBalance: false,
+			feeOptionsConfirmed: false,
+			handleConfirmFeeOption: mockHandleConfirmFeeOption,
+		});
+		vi.spyOn(useWaasFeeOptionsModule, 'useWaasFeeOptions').mockReturnValue([
+			// @ts-expect-error - types are not compatible
+			mockPendingFeeOptionConfirmation,
+			vi.fn(),
+		]);
+		vi.spyOn(useNetworkModule, '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('Select a fee option')).toBeInTheDocument();
+		expect(screen.queryByText('Confirm fee option')).not.toBeInTheDocument();
+	});
+});