@0xsequence/marketplace-sdk 0.8.3 → 0.8.5

package/src/react/ui/components/collectible-card/__tests__/Footer.test.tsx

@@ -0,0 +1,136 @@
+import { TEST_CURRENCY } from '@test/const';
+import { render, screen } from '@test/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import { ContractType } from '../../../../_internal';
+import { mockOrder } from '../../../../_internal/api/__mocks__/marketplace.msw';
+import { Footer } from '../Footer';
+
+const defaultProps = {
+	name: 'Test',
+	type: ContractType.ERC721,
+	decimals: 18,
+	onOfferClick: vi.fn(),
+	highestOffer: mockOrder,
+	lowestOffer: mockOrder,
+	lowestListingPriceAmount: '100',
+	lowestListingCurrency: TEST_CURRENCY,
+	balance: '100',
+};
+
+describe('Footer', () => {
+	it('Renders with basic props (name, type) correctly', () => {
+		render(<Footer {...defaultProps} />);
+
+		expect(screen.getByText('Test')).toBeInTheDocument();
+		expect(screen.getByText('0.0001 TEST')).toBeInTheDocument();
+
+		const notificationBell = screen.getByRole('button', {
+			name: 'Notification Bell',
+		});
+		expect(notificationBell).toBeInTheDocument();
+	});
+
+	it('Truncates long names appropriately based on presence of offers', () => {
+		const longName =
+			'This is a very long collectible name that needs truncation';
+
+		// Test truncation with offer present (truncates to 13 chars + "...")
+		render(
+			<Footer {...defaultProps} name={longName} highestOffer={mockOrder} />,
+		);
+		expect(screen.getByText('This is a ver...')).toBeInTheDocument();
+
+		// Test truncation without offer present (truncates to 17 chars + "...")
+		render(
+			<Footer {...defaultProps} name={longName} highestOffer={undefined} />,
+		);
+		expect(screen.getByText('This is a very lo...')).toBeInTheDocument();
+
+		// Test short name with offer (no truncation needed)
+		render(
+			<Footer {...defaultProps} name="Short Name" highestOffer={mockOrder} />,
+		);
+		expect(screen.getByText('Short Name')).toBeInTheDocument();
+	});
+
+	it('Formats prices correctly for different scenarios (normal, overflow, underflow)', () => {
+		// Test normal price formatting
+		render(
+			<Footer
+				{...defaultProps}
+				lowestListingPriceAmount="1000000000000000000" // 1 TOKEN in wei
+			/>,
+		);
+		expect(screen.getByText('1 TEST')).toBeInTheDocument();
+
+		// Test small number formatting (shows more decimals)
+		render(
+			<Footer
+				{...defaultProps}
+				lowestListingPriceAmount="5000000000000000" // 0.005 TOKEN in wei
+			/>,
+		);
+		expect(screen.getByText('0.005 TEST')).toBeInTheDocument();
+
+		// Test underflow price (< 0.0001)
+		render(
+			<Footer
+				{...defaultProps}
+				lowestListingPriceAmount="10000000000000" // 0.00001 TOKEN in wei
+			/>,
+		);
+		// Should display minimum price with chevron icon
+		expect(screen.getByText('0.0001 TEST')).toBeInTheDocument();
+
+		// Test overflow price (> 100,000,000)
+		render(
+			<Footer
+				{...defaultProps}
+				lowestListingPriceAmount="100000000000000000000000000" // 100M+ TOKEN in wei
+			/>,
+		);
+		// Should display maximum price with chevron icon
+		expect(screen.getByText('100,000,000 TEST')).toBeInTheDocument();
+	});
+
+	it("Displays 'Not listed yet' when no listing price is provided", () => {
+		// Create props without listing price information
+		const propsWithoutListing = {
+			...defaultProps,
+			lowestListingPriceAmount: undefined,
+			lowestListingCurrency: undefined,
+		};
+
+		render(<Footer {...propsWithoutListing} />);
+
+		// Verify "Not listed yet" text is displayed
+		expect(screen.getByText('Not listed yet')).toBeInTheDocument();
+	});
+
+	it('Shows proper token balance information for ERC721 vs ERC1155 tokens', () => {
+		// Test ERC721 token display
+		render(<Footer {...defaultProps} type={ContractType.ERC721} />);
+		expect(screen.getByText('ERC-721')).toBeInTheDocument();
+
+		// Test ERC1155 token display without balance
+		render(
+			<Footer
+				{...defaultProps}
+				type={ContractType.ERC1155}
+				balance={undefined}
+			/>,
+		);
+		expect(screen.getByText('ERC-1155')).toBeInTheDocument();
+
+		// Test ERC1155 token display with balance
+		render(
+			<Footer
+				{...defaultProps}
+				type={ContractType.ERC1155}
+				balance="1000000000000000000"
+				decimals={18}
+			/>,
+		);
+		expect(screen.getByText('Owned: 1')).toBeInTheDocument();
+	});
+});

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/CreateListingModal/__tests__/Modal.test.tsx

@@ -1,137 +1,107 @@
-import { useWaasFeeOptions } from '@0xsequence/connect';
-import { cleanup, fireEvent, render, screen, waitFor } from '@test';
-import { zeroAddress } from 'viem';
+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 * as hooks from '../../../../hooks';
+import { useCreateListingModal } from '..';
+import { StepType, WalletKind } from '../../../../_internal';
+import { createMockStep } from '../../../../_internal/api/__mocks__/marketplace.msw';
+import * as walletModule from '../../../../_internal/wallet/useWallet';
 import { CreateListingModal } from '../Modal';
-import { createListingModal$ } from '../store';
-
-vi.mock(import('../../../../hooks'), async (importOriginal) => {
-	const actual = await importOriginal();
-	return {
-		...actual,
-		useCollectible: vi.fn(actual.useCollectible),
-		useCollection: vi.fn(actual.useCollection),
-		useCurrencies: vi.fn(actual.useCurrencies),
-		useMarketplaceConfig: vi.fn(actual.useMarketplaceConfig),
-		useLowestListing: vi.fn(actual.useLowestListing),
-	};
-});
-
-vi.mock('@0xsequence/kit', () => ({
-	useWaasFeeOptions: vi.fn(),
-}));
+import * as useGetTokenApprovalDataModule from '../hooks/useGetTokenApproval';
 
 const defaultArgs = {
-	collectionAddress: zeroAddress,
-	chainId: 1,
-	collectibleId: '1',
+	collectionAddress: TEST_COLLECTIBLE.collectionAddress,
+	chainId: TEST_COLLECTIBLE.chainId,
+	collectibleId: TEST_COLLECTIBLE.collectibleId,
 };
 
-describe.skip('CreateListingModal', () => {
+describe('MakeOfferModal', () => {
+	const mockWallet = createMockWallet();
+
 	beforeEach(() => {
 		cleanup();
 		// Reset all mocks
 		vi.clearAllMocks();
 		vi.resetAllMocks();
-		vi.mocked(useWaasFeeOptions).mockReturnValue([undefined, vi.fn(), vi.fn()]);
+		vi.restoreAllMocks();
 	});
 
-	it('should not render when modal is closed', () => {
-		render(<CreateListingModal />);
-		expect(screen.queryByText('List item for sale')).toBeNull();
-	});
-
-	it('should show error modal when there is an error fetching data', async () => {
-		// @ts-expect-error - TODO: Add a common mock object with the correct shape
-		vi.mocked(hooks.useCollection).mockReturnValue({
-			data: undefined,
+	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: true,
+			isError: false,
 		});
-
-		createListingModal$.open(defaultArgs);
-
-		render(<CreateListingModal />);
-
-		expect(
-			await screen.findByText('Error loading item details'),
-		).toBeInTheDocument();
-	});
-
-	it('should render main form when data is loaded', async () => {
-		createListingModal$.open(defaultArgs);
-		render(<CreateListingModal />);
-
-		// Check for the collection name in the token preview
-		expect(await screen.findByText('Mock Collection')).toBeInTheDocument();
-	});
-
-	it('should reset store values when modal is closed and reopened', () => {
-		// Open modal first time
-		createListingModal$.open(defaultArgs);
-
-		// Set some values in the store
-		createListingModal$.listingPrice.amountRaw.set('1000000000000000000');
-		createListingModal$.quantity.set('5');
-
-		// Close modal
-		createListingModal$.close();
-
-		// Verify store is reset
-		expect(createListingModal$.listingPrice.amountRaw.get()).toBe('0');
-		expect(createListingModal$.quantity.get()).toBe('1');
-
-		// Reopen modal
-		createListingModal$.open({
-			collectionAddress: '0x456',
-			chainId: 1,
-			collectibleId: '2',
+		vi.spyOn(
+			useGetTokenApprovalDataModule,
+			'useGetTokenApprovalData',
+		).mockReturnValue({
+			data: {
+				step: null,
+			},
+			isLoading: false,
+			isSuccess: true,
 		});
 
-		// Verify store has default values
-		expect(createListingModal$.listingPrice.amountRaw.get()).toBe('0');
-		expect(createListingModal$.quantity.get()).toBe('1');
-	});
-
-	it('should update state based on price input', async () => {
-		createListingModal$.open(defaultArgs);
+		// Render the modal
+		const { result } = renderHook(() => useCreateListingModal());
+		result.current.show(defaultArgs);
 
 		render(<CreateListingModal />);
 
-		// Initial price should be 0
-		expect(createListingModal$.listingPrice.amountRaw.get()).toBe('0');
-
-		// Find and interact with price input using id
-		const priceInput = await screen.findByRole('textbox', {
-			name: /enter price/i,
-		});
-		expect(priceInput).toBeInTheDocument();
-
-		fireEvent.change(priceInput, { target: { value: '1.5' } });
-
-		// Wait for the state to update and verify it's not 0 anymore
+		// Wait for the component to update
 		await waitFor(() => {
-			expect(createListingModal$.listingPrice.amountRaw.get()).not.toBe('0');
+			// The Approve TOKEN button should not exist
+			expect(screen.queryByText('Approve TOKEN')).toBeNull();
+
+			// The List item for sale button should exist
+			expect(
+				screen.getByRole('button', { name: 'List item for sale' }),
+			).toBeDefined();
 		});
 	});
 
-	it('should show no currencies configured modal when currencies array is empty', async () => {
-		// @ts-expect-error - Improve this mock
-		vi.mocked(hooks.useCurrencies).mockReturnValue({
-			data: [],
+	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,
 		});
+		vi.spyOn(
+			useGetTokenApprovalDataModule,
+			'useGetTokenApprovalData',
+		).mockReturnValue({
+			data: {
+				step: createMockStep(StepType.tokenApproval),
+			},
+			isLoading: false,
+			isSuccess: true,
+		});
 
-		createListingModal$.open(defaultArgs);
+		// Render the modal
+		const { result } = renderHook(() => useCreateListingModal());
+		result.current.show(defaultArgs);
 
 		render(<CreateListingModal />);
 
-		expect(
-			await screen.findByText(
-				'No currencies are configured for the marketplace, contact the marketplace owners',
-			),
-		).toBeInTheDocument();
+		await waitFor(() => {
+			expect(screen.getByText('Approve TOKEN')).toBeDefined();
+
+			expect(
+				screen.getByRole('button', { name: 'List item for sale' }),
+			).toBeDefined();
+			expect(
+				screen.getByRole('button', { name: 'List item for sale' }),
+			).toBeDisabled();
+		});
 	});
 });

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

@@ -1,119 +1,149 @@
-import { cleanup, fireEvent, render, screen, waitFor } from '@test';
-import { zeroAddress } from 'viem';
+import { cleanup, render, renderHook, waitFor } from '@test';
+import { TEST_COLLECTIBLE } from '@test/const';
+import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useMakeOfferModal } from '..';
+import { CurrencyStatus, WalletKind } from '../../../../_internal';
+import * as walletModule from '../../../../_internal/wallet/useWallet';
 import { MakeOfferModal } from '../Modal';
 import { makeOfferModal$ } from '../store';
 
-// TODO: This should be moved to a shared test file
-vi.mock(import('../../../../hooks'), async (importOriginal) => {
-	const actual = await importOriginal();
-	return {
-		...actual,
-		useCollectible: vi.fn(actual.useCollectible),
-		useCollection: vi.fn(actual.useCollection),
-		useCurrencies: vi.fn(actual.useCurrencies),
-		useMarketplaceConfig: vi.fn(actual.useMarketplaceConfig),
-		useLowestListing: vi.fn(actual.useLowestListing),
-	};
-});
-
-vi.mock('@0xsequence/kit', () => ({
-	useWaasFeeOptions: vi.fn().mockReturnValue([]),
-}));
-
 const defaultArgs = {
-	collectionAddress: zeroAddress,
+	collectionAddress: TEST_COLLECTIBLE.collectionAddress,
+	chainId: TEST_COLLECTIBLE.chainId,
+	collectibleId: TEST_COLLECTIBLE.collectibleId,
+};
+
+// Mock currency object with all required properties
+const mockCurrency = {
 	chainId: 1,
-	collectibleId: '1',
+	contractAddress: '0x123',
+	status: CurrencyStatus.active,
+	name: 'Test Token',
+	symbol: 'TEST',
+	decimals: 18,
+	imageUrl: 'https://example.com/test.png',
+	exchangeRate: 1,
+	defaultChainCurrency: false,
+	nativeCurrency: false,
+	createdAt: new Date().toISOString(),
+	updatedAt: new Date().toISOString(),
 };
 
-describe.skip('MakeOfferModal', () => {
+describe('MakeOfferModal', () => {
+	const mockWallet = createMockWallet();
+
 	beforeEach(() => {
 		cleanup();
 		// Reset all mocks
 		vi.clearAllMocks();
 		vi.resetAllMocks();
+		vi.restoreAllMocks();
 	});
 
-	it('should not render when modal is closed', () => {
-		render(<MakeOfferModal />);
-		expect(screen.queryByText('Make an offer')).toBeNull();
-	});
-
-	it('should render loading state', () => {
-		makeOfferModal$.open(defaultArgs);
-
-		render(<MakeOfferModal />);
-		const loadingModal = screen.getByTestId('loading-modal');
-		expect(loadingModal).toBeVisible();
-	});
-
-	it.skip('should render error state', async () => {
-		// @ts-expect-error - TODO: Add a common mock object with the correct shape
-		vi.mocked(hooks.useCollection).mockReturnValue({
-			data: undefined,
+	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: true,
+			isError: false,
 		});
 
-		makeOfferModal$.open(defaultArgs);
+		// Render the modal
+		const { result } = renderHook(() => useMakeOfferModal());
+		result.current.show(defaultArgs);
 
-		render(<MakeOfferModal />);
-		const errorModal = await screen.findByTestId('error-modal');
-		expect(errorModal).toBeVisible();
-	});
+		const { queryByText } = render(<MakeOfferModal />);
 
-	it.skip('should render main form when data is loaded', async () => {
-		makeOfferModal$.open(defaultArgs);
-
-		render(<MakeOfferModal />);
+		// Wait for the component to update
+		await waitFor(() => {
+			// The Approve TOKEN button should not exist
+			const approveButton = queryByText('Approve TOKEN');
+			expect(approveButton).toBeNull();
 
-		expect(await screen.findByText('Enter price')).toBeInTheDocument();
+			const makeOfferButton = queryByText('Make offer');
+			expect(makeOfferButton).toBeDefined();
+		});
 	});
 
-	it.skip('should reset store values when modal is closed and reopened', () => {
-		// Open modal first time
-		makeOfferModal$.open(defaultArgs);
-
-		// Set some values in the store
-		makeOfferModal$.offerPrice.amountRaw.set('1000000000000000000');
-		makeOfferModal$.expiry.set(new Date());
+	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,
+		});
 
-		// Close modal
-		makeOfferModal$.close();
+		// Render the modal
+		const { result } = renderHook(() => useMakeOfferModal());
+		result.current.show(defaultArgs);
 
-		// Verify store is reset
-		expect(makeOfferModal$.offerPrice.amountRaw.get()).toBe('0');
-		expect(makeOfferModal$.expiry.get()).toBeDefined();
+		const { getByText } = render(<MakeOfferModal />);
 
-		// Reopen modal
-		makeOfferModal$.open(defaultArgs);
+		await waitFor(() => {
+			// find the Approve TOKEN button
+			const approveButton = getByText('Approve TOKEN');
+			expect(approveButton).toBeDefined();
 
-		// Verify store has default values
-		expect(makeOfferModal$.offerPrice.amountRaw.get()).toBe('0');
-		expect(makeOfferModal$.expiry.get()).toBeDefined();
+			// main button is disabled when approval step exists
+			const makeOfferButton = getByText('Make offer');
+			expect(makeOfferButton.closest('button')).toHaveAttribute('disabled');
+		});
 	});
 
-	it.skip('should update state based on price input', async () => {
+	it('should show/hide CTAs based on approval step existence in store', async () => {
+		// test case 1: approval.exist = true
 		makeOfferModal$.open(defaultArgs);
+		makeOfferModal$.offerPrice.set({
+			amountRaw: '1000000000000000000',
+			currency: mockCurrency,
+		});
+		makeOfferModal$.offerPriceChanged.set(true);
+		makeOfferModal$.steps.approval.exist.set(true);
 
-		render(<MakeOfferModal />);
+		const { getByText, unmount } = render(<MakeOfferModal />);
 
-		// Initial price should be 0
-		expect(makeOfferModal$.offerPrice.amountRaw.get()).toBe('0');
+		await waitFor(() => {
+			// Approve TOKEN button should be visible
+			const approveButton = getByText('Approve TOKEN');
+			expect(approveButton).toBeDefined();
+
+			// Make offer button should be disabled
+			const makeOfferButton = getByText('Make offer');
+			expect(makeOfferButton.closest('button')).toHaveAttribute('disabled');
+		});
 
-		// Find and interact with price input
+		unmount();
+		cleanup();
 
-		const priceInput = await screen.findByRole('textbox', {
-			name: 'Enter price',
+		// test case 2: approval.exist = false
+		makeOfferModal$.open(defaultArgs);
+		makeOfferModal$.offerPrice.set({
+			amountRaw: '1000000000000000000',
+			currency: mockCurrency,
 		});
-		expect(priceInput).toBeInTheDocument();
+		makeOfferModal$.offerPriceChanged.set(true);
+		makeOfferModal$.steps.approval.exist.set(false);
 
-		fireEvent.change(priceInput, { target: { value: '1.5' } });
+		const { queryByText, getByText: getByText2 } = render(<MakeOfferModal />);
 
-		// Wait for the state to update and verify it's not 0 anymore
 		await waitFor(() => {
-			expect(makeOfferModal$.offerPrice.amountRaw.get()).not.toBe('0');
+			// Approve TOKEN button should not exist or be hidden
+			const approveButton = queryByText('Approve TOKEN');
+			expect(approveButton).toBeNull();
+
+			// Make offer button should be enabled
+			const makeOfferButton = getByText2('Make offer');
+			expect(makeOfferButton.closest('button')).not.toHaveAttribute('disabled');
 		});
+
+		makeOfferModal$.close();
 	});
 });