@0xsequence/marketplace-sdk 0.7.0 → 0.8.1

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

@@ -1,327 +0,0 @@
-import {
-	act,
-	cleanup,
-	fireEvent,
-	render,
-	screen,
-	waitFor,
-	within,
-} from '@test';
-import {
-	type Mock,
-	afterEach,
-	beforeEach,
-	describe,
-	expect,
-	it,
-	vi,
-} from 'vitest';
-import { createMockWallet } from '../../../../../../../test/mocks/wallet';
-import type { Order, TokenMetadata } from '../../../../../_internal';
-import {
-	mockOrder as baseMockOrder,
-	mockTokenMetadata,
-} from '../../../../../_internal/api/__mocks__/marketplace.msw';
-import { buyModal$ } from '../../store';
-import { ERC1155QuantityModal } from '../Modal1155';
-
-vi.mock(import('../../../../../hooks'), async (importOriginal) => {
-	const actual = await importOriginal();
-	return {
-		...actual,
-	};
-});
-
-const mockWallet = createMockWallet();
-
-const getChainIdMock = mockWallet.getChainId as Mock<
-	typeof mockWallet.getChainId
->;
-const switchChainMock = mockWallet.switchChain as Mock<
-	typeof mockWallet.switchChain
->;
-
-vi.mock('../../../../../_internal/wallet/useWallet', () => ({
-	useWallet: () => ({
-		wallet: mockWallet,
-	}),
-}));
-
-// Mock switch chain modal hook
-vi.mock('../../_internal/components/switchChainModal', () => ({
-	useSwitchChainModal: () => ({
-		show: vi.fn(),
-	}),
-}));
-
-vi.mock('@0xsequence/kit', () => ({
-	useWaasFeeOptions: vi.fn().mockReturnValue([]),
-}));
-
-describe.skip('ERC1155QuantityModal', () => {
-	// Customize the mock order for ERC1155 testing with specific price for predictable calculations
-	const mockOrder: Order = {
-		...baseMockOrder,
-		priceAmount: '1000000000000000000', // 1 ETH in wei
-		priceAmountFormatted: '1',
-		quantityRemaining: '10',
-		quantityRemainingFormatted: '10',
-		quantityAvailable: '10',
-		quantityAvailableFormatted: '10',
-		quantityDecimals: 0,
-	};
-
-	const mockCollectable: TokenMetadata = mockTokenMetadata;
-
-	const mockBuy = vi.fn();
-
-	beforeEach(() => {
-		vi.clearAllMocks();
-
-		// Reset the modal state
-		buyModal$.close();
-		buyModal$.state.checkoutModalLoaded.set(false);
-		buyModal$.state.checkoutModalIsLoading.set(false);
-		buyModal$.state.invalidQuantity.set(false);
-		buyModal$.state.quantity.set('10'); // Match the initial quantity with the mock order
-
-		// Reset mock wallet calls
-		switchChainMock.mockClear();
-	});
-
-	afterEach(() => {
-		buyModal$.close();
-		cleanup();
-		vi.clearAllMocks();
-	});
-
-	it.skip('should render quantity input correctly', async () => {
-		// Open the modal with initial state
-		buyModal$.open({
-			order: mockOrder,
-			callbacks: {},
-			chainId: '1',
-			collectionAddress: '0x123',
-			tokenId: '1',
-		});
-
-		render(
-			<ERC1155QuantityModal
-				buy={mockBuy}
-				collectable={mockCollectable}
-				order={mockOrder}
-				chainId="1"
-				collectionAddress="0x123"
-				collectibleId="1"
-			/>,
-		);
-
-		// Verify modal title
-		expect(screen.getByText('Select Quantity')).toBeInTheDocument();
-
-		// Verify quantity input is present with initial value
-		const quantityInput = screen.getByRole('textbox', {
-			name: /enter quantity/i,
-		});
-		expect(quantityInput).toBeInTheDocument();
-		expect(quantityInput).toHaveValue('10'); // Match the initial quantity
-
-		// Wait for price to be displayed
-		await waitFor(() => {
-			const priceLabels = screen.getAllByText('Total Price');
-			const priceContainer = priceLabels[0].parentElement;
-			if (!priceContainer) throw new Error('Price container not found');
-
-			// Check for the price without decimal
-			const priceElement = within(priceContainer).getByText('10');
-			expect(priceElement).toBeInTheDocument();
-			expect(within(priceContainer).getByText('ETH')).toBeInTheDocument();
-		});
-
-		// Verify buy button
-		const buyButton = screen.getByRole('button', { name: /buy now/i });
-		expect(buyButton).toBeInTheDocument();
-		expect(buyButton).not.toBeDisabled();
-
-		// Verify currency image (not NFT image)
-		const currencyImage = screen.getByRole('img', { name: '' });
-		expect(currencyImage).toBeInTheDocument();
-		// expect(currencyImage).toHaveAttribute('src', mockCurrencies[0].imageUrl);
-	});
-
-	it.skip('should update total price when quantity changes', async () => {
-		buyModal$.open({
-			order: mockOrder,
-			callbacks: {},
-			chainId: '1',
-			collectionAddress: '0x123',
-			tokenId: '1',
-		});
-
-		render(
-			<ERC1155QuantityModal
-				buy={mockBuy}
-				collectable={mockCollectable}
-				order={mockOrder}
-				chainId="1"
-				collectionAddress="0x123"
-				collectibleId="1"
-			/>,
-		);
-
-		const quantityInput = screen.getByRole('textbox', {
-			name: /enter quantity/i,
-		});
-
-		// Change quantity to 2
-		await act(async () => {
-			fireEvent.change(quantityInput, { target: { value: '2' } });
-		});
-
-		// Wait for updated price to be displayed
-		await waitFor(() => {
-			const priceLabels = screen.getAllByText('Total Price');
-			const priceContainer = priceLabels[0].parentElement;
-			if (!priceContainer) throw new Error('Price container not found');
-
-			// Check for the price without decimal
-			const priceElement = within(priceContainer).getByText('2');
-			expect(priceElement).toBeInTheDocument();
-		});
-	});
-
-	it('should disable buy button when quantity is invalid', async () => {
-		buyModal$.open({
-			order: mockOrder,
-			callbacks: {},
-			chainId: '1',
-			collectionAddress: '0x123',
-			tokenId: '1',
-		});
-
-		// Set invalid quantity and loading state
-		buyModal$.state.invalidQuantity.set(true);
-		buyModal$.state.checkoutModalIsLoading.set(true);
-
-		render(
-			<ERC1155QuantityModal
-				buy={mockBuy}
-				collectable={mockCollectable}
-				order={mockOrder}
-				chainId="1"
-				collectionAddress="0x123"
-				collectibleId="1"
-			/>,
-		);
-
-		const buyButton = screen.getByRole('button', { name: /buy now/i });
-
-		// Wait for the button to be disabled
-		await waitFor(() => {
-			expect(buyButton).toBeDisabled();
-		});
-
-		// Click should not trigger buy function
-		fireEvent.click(buyButton);
-		expect(mockBuy).not.toHaveBeenCalled();
-	});
-
-	it.skip('should calculate total price correctly', async () => {
-		// Open the modal with initial state
-		buyModal$.open({
-			order: mockOrder,
-			callbacks: {},
-			chainId: '1',
-			collectionAddress: '0x123',
-			tokenId: '1',
-		});
-
-		render(
-			<ERC1155QuantityModal
-				buy={mockBuy}
-				collectable={mockCollectable}
-				order={mockOrder}
-				chainId="1"
-				collectionAddress="0x123"
-				collectibleId="1"
-			/>,
-		);
-
-		// Wait for modal content to be fully loaded
-		await waitFor(() => {
-			expect(screen.getByText('Select Quantity')).toBeInTheDocument();
-			expect(
-				screen.getByRole('textbox', { name: /enter quantity/i }),
-			).toBeInTheDocument();
-			expect(screen.getAllByText('Total Price')[0]).toBeInTheDocument();
-		});
-
-		// Wait for initial price
-		await waitFor(() => {
-			const priceLabels = screen.getAllByText('Total Price');
-			const priceContainer = priceLabels[0].parentElement;
-			if (!priceContainer) throw new Error('Price container not found');
-
-			// Check for the price without decimal
-			const priceElement = within(priceContainer).getByText('10');
-			expect(priceElement).toBeInTheDocument();
-			expect(within(priceContainer).getByText('ETH')).toBeInTheDocument();
-		});
-
-		// Change quantity to 3
-		const quantityInput = screen.getByRole('textbox', {
-			name: /enter quantity/i,
-		});
-		await act(async () => {
-			fireEvent.change(quantityInput, { target: { value: '3' } });
-		});
-
-		// Wait for updated price
-		await waitFor(() => {
-			const priceLabels = screen.getAllByText('Total Price');
-			const priceContainer = priceLabels[0].parentElement;
-			if (!priceContainer) throw new Error('Price container not found');
-
-			// Check for the price without decimal
-			const priceElement = within(priceContainer).getByText('3');
-			expect(priceElement).toBeInTheDocument();
-		});
-	});
-
-	it.skip('should handle chain mismatch correctly', async () => {
-		// Mock wallet to return a different chain ID
-		getChainIdMock.mockResolvedValueOnce(2); // Different from order.chainId (1)
-
-		buyModal$.open({
-			order: mockOrder,
-			callbacks: {},
-			chainId: '1',
-			collectionAddress: '0x123',
-			tokenId: '1',
-		});
-
-		render(
-			<ERC1155QuantityModal
-				buy={mockBuy}
-				collectable={mockCollectable}
-				order={mockOrder}
-				chainId="1"
-				collectionAddress="0x123"
-				collectibleId="1"
-			/>,
-		);
-
-		const buyButton = screen.getByRole('button', { name: /buy now/i });
-
-		// Click buy button
-		fireEvent.click(buyButton);
-
-		// Verify chain switch was attempted
-		await waitFor(() => {
-			expect(getChainIdMock).toHaveBeenCalled();
-		});
-
-		// Verify buy function was not called
-		expect(mockBuy).not.toHaveBeenCalled();
-	});
-});

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

@@ -1,124 +0,0 @@
-'use client';
-
-import { useWaasFeeOptions } from '@0xsequence/connect';
-import { Button, Skeleton, Text, WarningIcon } from '@0xsequence/design-system';
-import { observer } from '@legendapp/state/react';
-import { useEffect } from 'react';
-import { type Hex, zeroAddress } from 'viem';
-import { useAccount } from 'wagmi';
-import { useCurrencyBalance } from '../../../../../hooks/useCurrencyBalance';
-import WaasFeeOptionsSelect, {
-	type FeeOption,
-} from '../waasFeeOptionsSelect/WaasFeeOptionsSelect';
-import { waasFeeOptionsModal$ } from './store';
-
-type WaasFeeOptionsBoxProps = {
-	onFeeOptionsLoaded: () => void;
-	onFeeOptionConfirmed: () => void;
-	chainId: number;
-};
-
-const WaasFeeOptionsBox = observer(
-	({
-		onFeeOptionsLoaded,
-		onFeeOptionConfirmed,
-		chainId,
-	}: WaasFeeOptionsBoxProps) => {
-		const { address: userAddress } = useAccount();
-		const selectedFeeOption$ = waasFeeOptionsModal$.selectedFeeOption;
-		const [pendingFeeOptionConfirmation, confirmPendingFeeOption] =
-			useWaasFeeOptions();
-		const { data: currencyBalance, isLoading: currencyBalanceLoading } =
-			useCurrencyBalance({
-				chainId,
-				currencyAddress: (selectedFeeOption$.token.contractAddress.get() ||
-					zeroAddress) as Hex,
-				userAddress: userAddress as Hex,
-			});
-
-		// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-		useEffect(() => {
-			if (pendingFeeOptionConfirmation) {
-				onFeeOptionsLoaded();
-			}
-		}, [pendingFeeOptionConfirmation]);
-
-		const selectedFeeOption = selectedFeeOption$.get();
-		const insufficientBalance = (() => {
-			if (!selectedFeeOption?.value || !selectedFeeOption.token.decimals) {
-				return false;
-			}
-
-			if (!currencyBalance?.value && currencyBalance?.value !== 0n) {
-				return true;
-			}
-
-			try {
-				const feeValue = BigInt(selectedFeeOption.value);
-				return currencyBalance.value === 0n || currencyBalance.value < feeValue;
-			} catch {
-				return true;
-			}
-		})();
-
-		const handleConfirmFeeOption = () => {
-			if (!selectedFeeOption?.token || !pendingFeeOptionConfirmation?.id)
-				return;
-
-			confirmPendingFeeOption(
-				pendingFeeOptionConfirmation?.id,
-				selectedFeeOption.token.contractAddress || zeroAddress,
-			);
-
-			onFeeOptionConfirmed();
-		};
-
-		if (!pendingFeeOptionConfirmation) return null;
-
-		return (
-			<div className="absolute bottom-[-140px] left-0 flex w-full flex-col gap-2 rounded-2xl bg-button-emphasis p-4 backdrop-blur-md">
-				<Text className="mb-2 font-body text-large" fontWeight="bold">
-					Select a fee option
-				</Text>
-				<WaasFeeOptionsSelect
-					options={(pendingFeeOptionConfirmation?.options as FeeOption[]) || []}
-					selectedFeeOption$={selectedFeeOption$}
-				/>
-				<div className="flex w-full items-center justify-between">
-					{currencyBalanceLoading ? (
-						<Skeleton className="w-1/3 rounded-xl" style={{ height: 15 }} />
-					) : (
-						<div className="flex items-center gap-2">
-							{insufficientBalance && (
-								<WarningIcon className="text-negative" size="xs" />
-							)}
-							<Text
-								className="font-body text-sm"
-								fontWeight="semibold"
-								color={insufficientBalance ? 'negative' : 'text100'}
-							>
-								You have {currencyBalance?.formatted || '0'}{' '}
-								{selectedFeeOption?.token.symbol}
-							</Text>
-						</div>
-					)}
-
-					<Button
-						disabled={
-							!selectedFeeOption?.token ||
-							insufficientBalance ||
-							currencyBalanceLoading
-						}
-						pending={currencyBalanceLoading}
-						onClick={handleConfirmFeeOption}
-						label={<div className="flex items-center gap-2">Confirm</div>}
-						variant={insufficientBalance ? 'danger' : 'primary'}
-						size="xs"
-					/>
-				</div>
-			</div>
-		);
-	},
-);
-
-export default WaasFeeOptionsBox;

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

@@ -1,12 +0,0 @@
-import { observable } from '@legendapp/state';
-import type { FeeOption } from '../waasFeeOptionsSelect/WaasFeeOptionsSelect';
-
-type WaasFeeOptionsModalState = {
-	selectedFeeOption: FeeOption | undefined;
-};
-
-const initialState = {
-	selectedFeeOption: undefined,
-} as WaasFeeOptionsModalState;
-
-export const waasFeeOptionsModal$ = observable(initialState);