@0xsequence/marketplace-sdk 0.4.6 → 0.4.8

package/src/react/ui/modals/_internal/components/transactionStatusModal/__tests__/TransactionStatusModal.test.tsx

@@ -0,0 +1,147 @@
+import {
+	render,
+	cleanup,
+	screen,
+	waitFor,
+} from '../../../../../../_internal/test-utils';
+import '@testing-library/jest-dom/vitest';
+import TransactionStatusModal from '../index';
+import { transactionStatusModal$ } from '../store';
+import type { ShowTransactionStatusModalArgs } from '../index';
+import { TransactionType } from '../../../../../../_internal/types';
+import { beforeEach, describe, expect, it, vi, afterEach } from 'vitest';
+import { WaitForTransactionReceiptTimeoutError } from 'viem';
+
+const mockTransactionArgs: ShowTransactionStatusModalArgs = {
+	hash: '0x123' as `0x${string}`,
+	collectionAddress: '0x456' as `0x${string}`,
+	chainId: '1',
+	collectibleId: '1',
+	type: TransactionType.BUY,
+};
+
+const mockPublicClient = {
+	waitForTransactionReceipt: vi.fn(),
+};
+
+vi.mock('../../../../../../../utils/get-public-rpc-client', () => ({
+	getPublicRpcClient: vi.fn().mockImplementation(() => mockPublicClient),
+}));
+
+describe('TransactionStatusModal', () => {
+	afterEach(() => {
+		cleanup();
+	});
+
+	beforeEach(() => {
+		transactionStatusModal$.close();
+		vi.clearAllMocks();
+	});
+
+	it('should not render when closed', () => {
+		render(<TransactionStatusModal />);
+		expect(
+			screen.queryByTestId('transaction-status-modal'),
+		).not.toBeInTheDocument();
+	});
+
+	it('should show processing state when transaction is processing', async () => {
+		transactionStatusModal$.open(mockTransactionArgs);
+		render(<TransactionStatusModal />);
+
+		await waitFor(() => {
+			const element = screen.queryByTestId('transaction-status-title');
+			expect(element).toHaveTextContent('Your purchase is processing');
+
+			const messageElement = screen.queryByTestId('transaction-status-message');
+			expect(messageElement).toHaveTextContent(
+				/It should be confirmed on the blockchain shortly/,
+			);
+		});
+	});
+
+	it('should show success state when transaction is successful', async () => {
+		mockPublicClient.waitForTransactionReceipt.mockResolvedValue({
+			status: 'success',
+		});
+		transactionStatusModal$.open(mockTransactionArgs);
+		render(<TransactionStatusModal />);
+
+		await waitFor(() => {
+			const element = screen.queryByTestId('transaction-status-title');
+			expect(element).toHaveTextContent('Your purchase has processed');
+
+			const messageElement = screen.queryByTestId('transaction-status-message');
+			expect(messageElement).toHaveTextContent(
+				/You just purchased .* It's been confirmed on the blockchain!/,
+			);
+		});
+	});
+
+	it('should show failed state when transaction fails', async () => {
+		mockPublicClient.waitForTransactionReceipt.mockRejectedValue(
+			new Error('Transaction failed'),
+		);
+		transactionStatusModal$.open(mockTransactionArgs);
+		render(<TransactionStatusModal />);
+
+		await waitFor(() => {
+			const element = screen.queryByTestId('transaction-status-title');
+			expect(element).toHaveTextContent('Your purchase has failed');
+
+			const messageElement = screen.queryByTestId('transaction-status-message');
+			expect(messageElement).toHaveTextContent(/Your purchase has failed/);
+		});
+	});
+
+	it('should show timeout state when transaction times out', async () => {
+		mockPublicClient.waitForTransactionReceipt.mockRejectedValue(
+			new WaitForTransactionReceiptTimeoutError({ hash: '0x123' }),
+		);
+		transactionStatusModal$.open(mockTransactionArgs);
+		render(<TransactionStatusModal />);
+
+		await waitFor(() => {
+			const element = screen.queryByTestId('transaction-status-title');
+			expect(element).toHaveTextContent('Your purchase takes too long');
+
+			const messageElement = screen.queryByTestId('transaction-status-message');
+			expect(messageElement).toHaveTextContent(/Your purchase takes too long/);
+		});
+	});
+
+	it('should call onSuccess callback when transaction succeeds', async () => {
+		const onSuccess = vi.fn();
+		mockPublicClient.waitForTransactionReceipt.mockResolvedValue({
+			status: 'success',
+		});
+
+		transactionStatusModal$.open({
+			...mockTransactionArgs,
+			callbacks: { onSuccess },
+		});
+		render(<TransactionStatusModal />);
+
+		await waitFor(() => {
+			expect(onSuccess).toHaveBeenCalledWith({
+				hash: mockTransactionArgs.hash,
+			});
+		});
+	});
+
+	it('should call onError callback when transaction fails', async () => {
+		const onError = vi.fn();
+		const error = new Error('Transaction failed');
+		mockPublicClient.waitForTransactionReceipt.mockRejectedValue(error);
+
+		transactionStatusModal$.open({
+			...mockTransactionArgs,
+			callbacks: { onError },
+		});
+		render(<TransactionStatusModal />);
+
+		await waitFor(() => {
+			expect(onError).toHaveBeenCalledWith(error);
+		});
+	});
+});

package/src/react/ui/modals/_internal/components/transactionStatusModal/__tests__/utils.test.ts

@@ -0,0 +1,218 @@
+import { describe, expect, it } from 'vitest';
+import { TransactionType } from '../../../../../../_internal/types';
+import { getFormattedType } from '../util/getFormattedType';
+import { getTransactionStatusModalMessage } from '../util/getMessage';
+import {
+	getTransactionStatusModalTitle,
+	getTransactionStatusModalSpinnerTitle,
+} from '../util/getTitle';
+import type { TransactionStatus } from '../store';
+
+describe('Transaction Status Modal Utils', () => {
+	describe('getFormattedType', () => {
+		it('should return correct format for each transaction type', () => {
+			expect(getFormattedType(TransactionType.TRANSFER)).toBe('transfer');
+			expect(getFormattedType(TransactionType.LISTING)).toBe('listing');
+			expect(getFormattedType(TransactionType.BUY)).toBe('purchase');
+			expect(getFormattedType(TransactionType.SELL)).toBe('sale');
+			expect(getFormattedType(TransactionType.CANCEL)).toBe('cancellation');
+			expect(getFormattedType(TransactionType.OFFER)).toBe('offer');
+		});
+
+		it('should return correct verb format when verb flag is true', () => {
+			expect(getFormattedType(TransactionType.TRANSFER, true)).toBe(
+				'transferred',
+			);
+			expect(getFormattedType(TransactionType.LISTING, true)).toBe('listed');
+			expect(getFormattedType(TransactionType.BUY, true)).toBe('purchased');
+			expect(getFormattedType(TransactionType.SELL, true)).toBe('sold');
+			expect(getFormattedType(TransactionType.CANCEL, true)).toBe('cancelled');
+			expect(getFormattedType(TransactionType.OFFER, true)).toBe('offered');
+		});
+
+		it("should return 'transaction' for unknown transaction types", () => {
+			expect(getFormattedType('UNKNOWN' as TransactionType)).toBe(
+				'transaction',
+			);
+		});
+	});
+
+	describe('getTransactionStatusModalMessage', () => {
+		const baseArgs = {
+			transactionType: TransactionType.BUY,
+			collectibleName: 'Test NFT',
+		};
+
+		it('should return correct message for each transaction status', () => {
+			expect(
+				getTransactionStatusModalMessage({
+					...baseArgs,
+					transactionStatus: 'PENDING',
+				}),
+			).toBe(
+				'You just purchased Test NFT. It should be confirmed on the blockchain shortly.',
+			);
+
+			expect(
+				getTransactionStatusModalMessage({
+					...baseArgs,
+					transactionStatus: 'SUCCESS',
+				}),
+			).toBe(
+				"You just purchased Test NFT. It's been confirmed on the blockchain!",
+			);
+
+			expect(
+				getTransactionStatusModalMessage({
+					...baseArgs,
+					transactionStatus: 'FAILED',
+				}),
+			).toBe('Your purchase has failed.');
+
+			expect(
+				getTransactionStatusModalMessage({
+					...baseArgs,
+					transactionStatus: 'TIMEOUT',
+				}),
+			).toBe(
+				'Your purchase takes too long. Click the link below to track it on the explorer.',
+			);
+		});
+
+		it('should handle order ID case', () => {
+			expect(
+				getTransactionStatusModalMessage({
+					...baseArgs,
+					orderId: '123',
+					transactionStatus: 'SUCCESS',
+				}),
+			).toBe(
+				"You just purchased Test NFT. It's been confirmed on the blockchain!",
+			);
+		});
+
+		it('should handle offer with price', () => {
+			expect(
+				getTransactionStatusModalMessage({
+					transactionType: TransactionType.OFFER,
+					collectibleName: 'Test NFT',
+					transactionStatus: 'SUCCESS',
+					price: {
+						amountRaw: '1000000000000000000',
+						currency: {
+							chainId: 1,
+							contractAddress: '0x0000000000000000000000000000000000000000',
+							name: 'Ethereum',
+							symbol: 'ETH',
+							decimals: 18,
+							imageUrl: 'https://ethereum.org/eth.png',
+							exchangeRate: 1,
+							defaultChainCurrency: true,
+							nativeCurrency: true,
+							createdAt: '2024-01-21T00:00:00Z',
+							updatedAt: '2024-01-21T00:00:00Z',
+						},
+					},
+				}),
+			).toBe(
+				"You just offered 1 ETH for Test NFT. It's been confirmed on the blockchain!",
+			);
+		});
+
+		it('should hide collectible name for cancel transactions', () => {
+			expect(
+				getTransactionStatusModalMessage({
+					transactionType: TransactionType.CANCEL,
+					collectibleName: 'Test NFT',
+					transactionStatus: 'SUCCESS',
+				}),
+			).toBe("You just cancelled. It's been confirmed on the blockchain!");
+		});
+	});
+
+	describe('getTransactionStatusModalTitle', () => {
+		const baseArgs = {
+			transactionType: TransactionType.BUY,
+		};
+
+		it('should return correct title for each transaction status', () => {
+			expect(
+				getTransactionStatusModalTitle({
+					...baseArgs,
+					transactionStatus: 'PENDING',
+				}),
+			).toBe('Your purchase is processing');
+
+			expect(
+				getTransactionStatusModalTitle({
+					...baseArgs,
+					transactionStatus: 'SUCCESS',
+				}),
+			).toBe('Your purchase has processed');
+
+			expect(
+				getTransactionStatusModalTitle({
+					...baseArgs,
+					transactionStatus: 'FAILED',
+				}),
+			).toBe('Your purchase has failed');
+
+			expect(
+				getTransactionStatusModalTitle({
+					...baseArgs,
+					transactionStatus: 'TIMEOUT',
+				}),
+			).toBe('Your purchase takes too long');
+		});
+
+		it('should handle order ID case', () => {
+			expect(
+				getTransactionStatusModalTitle({
+					...baseArgs,
+					orderId: '123',
+					transactionStatus: 'SUCCESS',
+				}),
+			).toBe('Your purchase has processed');
+		});
+
+		it('should return empty string when transaction type is undefined', () => {
+			expect(
+				getTransactionStatusModalTitle({
+					transactionType: undefined,
+					transactionStatus: 'SUCCESS',
+				}),
+			).toBe('');
+		});
+	});
+
+	describe('getTransactionStatusModalSpinnerTitle', () => {
+		it('should return correct spinner title for each status', () => {
+			const statuses: TransactionStatus[] = [
+				'PENDING',
+				'SUCCESS',
+				'FAILED',
+				'TIMEOUT',
+			];
+			const expectedTitles = {
+				PENDING: 'Processing transaction',
+				SUCCESS: 'Transaction completed',
+				FAILED: 'Transaction failed',
+				TIMEOUT: 'Taking too long',
+			};
+
+			for (const status of statuses) {
+				expect(
+					getTransactionStatusModalSpinnerTitle({ transactionStatus: status }),
+				).toBe(expectedTitles[status]);
+			}
+		});
+
+		it('should return default title for unknown status', () => {
+			expect(
+				getTransactionStatusModalSpinnerTitle({
+					transactionStatus: 'UNKNOWN' as TransactionStatus,
+				}),
+			).toBe('Processing transaction');
+		});
+	});
+});

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

@@ -82,6 +82,12 @@ const TransactionStatusModal = observer(() => {
 		orderId ? 'SUCCESS' : 'PENDING',
 	);
 	const queryClient = getQueryClient();
+	const publicClient = chainId ? getPublicRpcClient(chainId) : null;
+	const waitForTransactionReceiptPromise =
+		publicClient?.waitForTransactionReceipt({
+			confirmations: confirmations || TRANSACTION_CONFIRMATIONS_DEFAULT,
+			hash: hash || '0x',
+		});
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
@@ -148,38 +154,49 @@ const TransactionStatusModal = observer(() => {
 		orderId,
 		price,
 	});
-	const publicClient = chainId ? getPublicRpcClient(chainId) : null;
-	const waitForTransactionReceiptPromise =
-		publicClient?.waitForTransactionReceipt({
-			confirmations: confirmations || TRANSACTION_CONFIRMATIONS_DEFAULT,
-			hash: hash || '0x',
-		});
 
 	return (
 		<Root open={transactionStatusModal$.isOpen.get()}>
 			<Portal container={getProviderEl()}>
 				<Overlay className={dialogOverlay} />
 
-				<Content className={transactionStatusModalContent}>
+				<Content
+					className={transactionStatusModalContent}
+					data-testid="transaction-status-modal"
+				>
 					{title ? (
 						<Text
 							fontSize="large"
 							fontWeight="bold"
 							color="text100"
 							fontFamily="body"
+							data-testid="transaction-status-title"
 						>
 							{title}
 						</Text>
 					) : (
-						<Skeleton width="16" height="6" />
+						<Skeleton
+							width="16"
+							height="6"
+							data-testid="transaction-modal-title-skeleton"
+						/>
 					)}
 
 					{message ? (
-						<Text fontSize="small" color="text80" fontFamily="body">
+						<Text
+							fontSize="small"
+							color="text80"
+							fontFamily="body"
+							data-testid="transaction-status-message"
+						>
 							{message}
 						</Text>
 					) : (
-						<Skeleton width="20" height="4" />
+						<Skeleton
+							width="20"
+							height="4"
+							data-testid="transaction-modal-content-skeleton"
+						/>
 					)}
 
 					<TransactionPreview

package/src/react/ui/modals/_internal/components/transactionStatusModal/util/getMessage.ts

@@ -35,7 +35,7 @@ export function getTransactionStatusModalMessage({
 		case 'PENDING':
 			return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ''}. It should be confirmed on the blockchain shortly.`;
 		case 'SUCCESS':
-			return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ''}. It’s been confirmed on the blockchain!`;
+			return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ''}. It's been confirmed on the blockchain!`;
 		case 'FAILED':
 			return `Your ${getFormattedType(transactionType)} has failed.`;
 		case 'TIMEOUT':

package/src/react/ui/modals/modal-provider.tsx

@@ -1,5 +1,4 @@
 import { observer } from '@legendapp/state/react';
-import { AccountModal } from './Account';
 import { MakeOfferModal } from './MakeOfferModal/Modal';
 import { SellModal } from './SellModal/Modal';
 import SuccessfulPurchaseModal from './SuccessfulPurchaseModal';
@@ -13,7 +12,6 @@ import { BuyModal } from './BuyModal/Modal';
 export const ModalProvider = observer(() => {
 	return (
 		<>
-			<AccountModal />
 			<CreateListingModal />
 			<MakeOfferModal />
 			<TransferModal />

package/src/types/marketplace-config.ts

@@ -11,7 +11,7 @@ interface Socials {
 	youtube?: string;
 }
 
-enum WalletOptions {
+export enum WalletOptions {
 	Sequence = 'sequence',
 	Metamask = 'metamask',
 	WalletConnect = 'walletconnect',

package/src/utils/__tests__/address.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, test } from 'vitest';
+import { truncateMiddle, truncateEnd, compareAddress } from '../address';
+
+describe('address utils', () => {
+	describe('truncateMiddle', () => {
+		test('should truncate address with default parameters', () => {
+			const address = '0x1234567890123456789012345678901234567890';
+			const result = truncateMiddle(address);
+			expect(result).toBe('0x12345678901234567890…890');
+		});
+
+		test('should return full address if minPrefix + minSuffix >= 40', () => {
+			const address = '0x1234567890123456789012345678901234567890';
+			const result = truncateMiddle(address, 35, 6);
+			expect(result).toBe(address);
+		});
+
+		test('should truncate with custom prefix and suffix lengths', () => {
+			const address = '0x1234567890123456789012345678901234567890';
+			const result = truncateMiddle(address, 10, 5);
+			expect(result).toBe('0x1234567890…67890');
+		});
+	});
+
+	describe('truncateEnd', () => {
+		test('should return empty string for undefined input', () => {
+			expect(truncateEnd(undefined, 10)).toBe('');
+		});
+
+		test('should not truncate text shorter than truncateAt', () => {
+			const text = 'Short';
+			expect(truncateEnd(text, 10)).toBe('Short');
+		});
+
+		test('should truncate text longer than truncateAt', () => {
+			const text = 'This is a very long text';
+			expect(truncateEnd(text, 10)).toBe('This is a ...');
+		});
+
+		test('should truncate text equal to truncateAt', () => {
+			const text = '1234567890';
+			expect(truncateEnd(text, 10)).toBe('1234567890...');
+		});
+	});
+
+	describe('compareAddress', () => {
+		test('should return true for matching addresses with different cases', () => {
+			expect(compareAddress('0x1234567890abcdef', '0x1234567890ABCDEF')).toBe(
+				true,
+			);
+		});
+
+		test('should return false for different addresses', () => {
+			expect(compareAddress('0x1234567890abcdef', '0x1234567890abcdef1')).toBe(
+				false,
+			);
+		});
+
+		test('should handle undefined or empty inputs', () => {
+			expect(compareAddress()).toBe(true);
+			expect(compareAddress('', '')).toBe(true);
+			expect(compareAddress('0x123', '')).toBe(false);
+		});
+	});
+});

package/src/utils/__tests__/date.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'vitest';
+import { dateToUnixTime } from '../date';
+
+describe('date utils', () => {
+	describe('dateToUnixTime', () => {
+		test('should convert date to unix timestamp string', () => {
+			const date = new Date('2024-01-01T00:00:00Z');
+			const result = dateToUnixTime(date);
+			expect(result).toBe('1704067200');
+		});
+
+		test('should handle current date', () => {
+			const now = new Date();
+			const result = dateToUnixTime(now);
+			const expectedTimestamp = Math.floor(now.getTime() / 1000).toString();
+			expect(result).toBe(expectedTimestamp);
+		});
+
+		test('should handle dates with milliseconds', () => {
+			const date = new Date('2024-01-01T00:00:00.999Z');
+			const result = dateToUnixTime(date);
+			expect(result).toBe('1704067200');
+		});
+
+		test('should handle dates before unix epoch', () => {
+			const date = new Date('1969-12-31T23:59:59Z');
+			const result = dateToUnixTime(date);
+			expect(result).toBe('-1');
+		});
+	});
+});

package/src/utils/__tests__/get-public-rpc-client.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, test } from 'vitest';
+import { getPublicRpcClient } from '../get-public-rpc-client';
+import { allNetworks, findNetworkConfig } from '@0xsequence/network';
+import { MissingConfigError } from '../_internal/error/transaction';
+import type { PublicClient } from 'viem';
+
+describe('getPublicRpcClient', () => {
+	describe('successful client creation', () => {
+		test('should create client for mainnet', () => {
+			const chainId = 1;
+			const client = getPublicRpcClient(chainId);
+
+			expect(client).toBeDefined();
+			expect(client).toHaveProperty('chain');
+			expect(
+				(client as PublicClient & { chain: { id: number } }).chain.id,
+			).toBe(chainId);
+			expect(
+				(client as PublicClient & { chain: { name: string } }).chain.name,
+			).toBe('mainnet');
+		});
+
+		test('should create client for polygon', () => {
+			const chainId = 137;
+			const client = getPublicRpcClient(chainId);
+
+			expect(client).toBeDefined();
+			expect(
+				(client as PublicClient & { chain: { id: number } }).chain.id,
+			).toBe(chainId);
+			expect(
+				(client as PublicClient & { chain: { name: string } }).chain.name,
+			).toBe('polygon');
+		});
+
+		test('should set up multicall batching', () => {
+			const chainId = 1;
+			const client = getPublicRpcClient(chainId);
+
+			expect(client).toHaveProperty('batch');
+			expect(
+				(client as PublicClient & { batch: { multicall: boolean } }).batch
+					.multicall,
+			).toBe(true);
+		});
+
+		test('should configure RPC URLs correctly', () => {
+			const chainId = 1;
+			const network = findNetworkConfig(allNetworks, chainId);
+			expect(network).toBeDefined();
+			const client = getPublicRpcClient(chainId);
+
+			expect(client.chain!.rpcUrls.default.http).toEqual([network!.rpcUrl]);
+		});
+
+		test('should set up native currency details', () => {
+			const chainId = 1;
+			const network = findNetworkConfig(allNetworks, chainId);
+			expect(network).toBeDefined();
+			const client = getPublicRpcClient(chainId);
+
+			expect(client.chain!.nativeCurrency).toEqual(network!.nativeToken);
+		});
+	});
+
+	describe('error handling', () => {
+		test('should throw MissingConfigError for invalid chainId', () => {
+			const invalidChainId = 999999;
+
+			expect(() => getPublicRpcClient(invalidChainId)).toThrow(
+				MissingConfigError,
+			);
+			expect(() => getPublicRpcClient(invalidChainId)).toThrow(
+				`Network configuration for chainId: ${invalidChainId}`,
+			);
+		});
+
+		test('should throw MissingConfigError for undefined chainId', () => {
+			const undefinedChainId = undefined as unknown as number;
+
+			expect(() => getPublicRpcClient(undefinedChainId)).toThrow(
+				`Network configuration for chainId: ${undefinedChainId}`,
+			);
+		});
+	});
+
+	describe('client configuration', () => {
+		test('should create client with correct transport configuration', () => {
+			const chainId = 1;
+			const client = getPublicRpcClient(chainId);
+
+			expect(client).toHaveProperty('transport');
+			expect(client.transport).toHaveProperty('request');
+			expect(typeof client.transport.request).toBe('function');
+		});
+
+		test('should create unique instances for different chains', () => {
+			const mainnetClient = getPublicRpcClient(1);
+			const polygonClient = getPublicRpcClient(137);
+
+			expect(mainnetClient).not.toBe(polygonClient);
+			expect(
+				(mainnetClient as PublicClient & { chain: { id: number } }).chain.id,
+			).not.toBe(
+				(polygonClient as PublicClient & { chain: { id: number } }).chain.id,
+			);
+		});
+	});
+});