@0xsequence/marketplace-sdk 0.0.0-20250513233135

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

@@ -0,0 +1,220 @@
+import { describe, expect, it } from 'vitest';
+import { CurrencyStatus } from '../../../../../../_internal';
+import { TransactionType } from '../../../../../../_internal/types';
+import type { TransactionStatus } from '../store';
+import { getFormattedType } from '../util/getFormattedType';
+import { getTransactionStatusModalMessage } from '../util/getMessage';
+import {
+	getTransactionStatusModalSpinnerTitle,
+	getTransactionStatusModalTitle,
+} from '../util/getTitle';
+
+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',
+							status: CurrencyStatus.active,
+						},
+					},
+				}),
+			).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/hooks/useTransactionStatus.ts

@@ -0,0 +1,65 @@
+'use client';
+
+import { TransactionStatus as IndexerTransactionStatus } from '@0xsequence/indexer';
+import { skipToken, useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { type Hex, WaitForTransactionReceiptTimeoutError } from 'viem';
+import { useWallet } from '../../../../../../_internal/wallet/useWallet';
+import type { ModalCallbacks } from '../../../types';
+import type { TransactionStatus } from '../store';
+
+const useTransactionStatus = (
+	hash: Hex | undefined,
+	chainId: number,
+	callbacks?: ModalCallbacks,
+) => {
+	const { wallet } = useWallet();
+	const [status, setStatus] = useState<TransactionStatus>(
+		hash ? 'PENDING' : 'SUCCESS',
+	);
+
+	const { data: confirmationResult } = useQuery({
+		queryKey: ['transaction-confirmation', hash, chainId, !!wallet],
+		queryFn:
+			!!wallet && hash
+				? async () =>
+						await wallet.handleConfirmTransactionStep(hash, Number(chainId))
+				: skipToken,
+	});
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+	useEffect(() => {
+		if (!hash) {
+			setStatus('SUCCESS');
+			return;
+		}
+
+		if (!confirmationResult) {
+			setStatus('PENDING');
+			return;
+		}
+
+		try {
+			if (
+				confirmationResult.txnStatus === IndexerTransactionStatus.SUCCESSFUL
+			) {
+				setStatus('SUCCESS');
+				callbacks?.onSuccess?.({ hash: hash || '0x0' });
+				return;
+			}
+			setStatus('FAILED');
+			callbacks?.onError?.(new Error('Transaction failed'));
+		} catch (error) {
+			setStatus(
+				error instanceof WaitForTransactionReceiptTimeoutError
+					? 'TIMEOUT'
+					: 'FAILED',
+			);
+			callbacks?.onError?.(error as Error);
+		}
+	}, [confirmationResult, hash]);
+
+	return status;
+};
+
+export default useTransactionStatus;

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

@@ -0,0 +1,172 @@
+'use client';
+
+import { Modal, Skeleton, Text } from '@0xsequence/design-system';
+import type { ChainId } from '@0xsequence/network';
+import { use$ } from '@legendapp/state/react';
+import type { QueryKey } from '@tanstack/react-query';
+import type { Hex } from 'viem';
+import type { Price } from '../../../../../../types';
+import { getQueryClient } from '../../../../../_internal';
+import type { TransactionType } from '../../../../../_internal/types';
+import { useCollectible } from '../../../../../hooks';
+import type { ModalCallbacks } from '../../types';
+import { MODAL_OVERLAY_PROPS } from '../consts';
+import { selectWaasFeeOptions$ } from '../selectWaasFeeOptions/store';
+import TransactionFooter from '../transaction-footer';
+import TransactionPreview from '../transactionPreview';
+import useTransactionStatus from './hooks/useTransactionStatus';
+import { transactionStatusModal$ } from './store';
+import { getTransactionStatusModalMessage } from './util/getMessage';
+import { getTransactionStatusModalTitle } from './util/getTitle';
+
+export type ShowTransactionStatusModalArgs = {
+	hash?: Hex;
+	orderId?: string;
+	price?: Price;
+	collectionAddress: Hex;
+	chainId: number;
+	collectibleId: string;
+	type: TransactionType;
+	callbacks?: ModalCallbacks;
+	queriesToInvalidate?: QueryKey[];
+};
+
+const invalidateQueries = async (queriesToInvalidate?: QueryKey[]) => {
+	const queryClient = getQueryClient();
+	if (!queriesToInvalidate) {
+		// Invalidate everything by default
+		queryClient.invalidateQueries();
+		return;
+	}
+	for (const queryKey of queriesToInvalidate) {
+		await queryClient.invalidateQueries({ queryKey });
+	}
+};
+
+export const useTransactionStatusModal = () => {
+	return {
+		show: (args: ShowTransactionStatusModalArgs) => {
+			transactionStatusModal$.open(args);
+		},
+		close: () => transactionStatusModal$.close(),
+	};
+};
+
+const TransactionStatusModal = () => {
+	const isOpen = use$(transactionStatusModal$.isOpen);
+	return isOpen ? <TransactionStatusModalContent /> : null;
+};
+
+function TransactionStatusModalContent() {
+	const {
+		type,
+		hash,
+		orderId,
+		price,
+		collectionAddress,
+		chainId,
+		collectibleId,
+		callbacks,
+		queriesToInvalidate,
+	} = use$(transactionStatusModal$.state);
+
+	const { data: collectible, isLoading: collectibleLoading } = useCollectible({
+		collectionAddress,
+		chainId,
+		collectibleId,
+	});
+
+	const transactionStatus = useTransactionStatus(hash, chainId, callbacks);
+
+	const title = getTransactionStatusModalTitle({
+		transactionStatus,
+		transactionType: type,
+		orderId,
+	});
+
+	const message = getTransactionStatusModalMessage({
+		transactionStatus,
+		transactionType: type,
+		collectibleName: collectible?.name || '',
+		orderId,
+		price,
+	});
+
+	const handleClose = () => {
+		invalidateQueries(queriesToInvalidate);
+		if (selectWaasFeeOptions$.isVisible.get()) {
+			selectWaasFeeOptions$.hide();
+		}
+
+		transactionStatusModal$.close();
+	};
+
+	return (
+		<Modal
+			isDismissible={true}
+			onClose={handleClose}
+			size="sm"
+			overlayProps={MODAL_OVERLAY_PROPS}
+			data-testid="transaction-status-modal"
+		>
+			<div className="grid flex-col gap-6 p-7">
+				{title ? (
+					<Text
+						className="font-body text-xl"
+						fontWeight="bold"
+						color="text100"
+						data-testid="transaction-status-title"
+					>
+						{title}
+					</Text>
+				) : (
+					<Skeleton
+						className="h-6 w-16"
+						data-testid="transaction-modal-title-skeleton"
+					/>
+				)}
+
+				{message ? (
+					<Text
+						className="font-body text-sm"
+						color="text80"
+						data-testid="transaction-status-message"
+					>
+						{message}
+					</Text>
+				) : (
+					<Skeleton
+						className="h-4 w-20"
+						data-testid="transaction-modal-content-skeleton"
+					/>
+				)}
+
+				<TransactionPreview
+					orderId={orderId}
+					price={price}
+					collectionAddress={collectionAddress}
+					chainId={chainId}
+					collectible={collectible}
+					collectibleLoading={collectibleLoading}
+					currencyImageUrl={price?.currency.imageUrl}
+					isConfirming={transactionStatus === 'PENDING'}
+					isConfirmed={transactionStatus === 'SUCCESS'}
+					isFailed={transactionStatus === 'FAILED'}
+					isTimeout={transactionStatus === 'TIMEOUT'}
+				/>
+
+				<TransactionFooter
+					transactionHash={hash}
+					orderId={orderId}
+					isConfirming={transactionStatus === 'PENDING'}
+					isConfirmed={transactionStatus === 'SUCCESS'}
+					isFailed={transactionStatus === 'FAILED'}
+					isTimeout={transactionStatus === 'TIMEOUT'}
+					chainId={chainId as unknown as ChainId}
+				/>
+			</div>
+		</Modal>
+	);
+}
+
+export default TransactionStatusModal;

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

@@ -0,0 +1,83 @@
+import { observable } from '@legendapp/state';
+import type { QueryKey } from '@tanstack/react-query';
+import type { Hex } from 'viem';
+import type { ShowTransactionStatusModalArgs } from '.';
+import type { Price } from '../../../../../../types';
+import type { TransactionType } from '../../../../../_internal/types';
+import type { ModalCallbacks } from '../../types';
+
+export type ConfirmationStatus = {
+	isConfirming: boolean;
+	isConfirmed: boolean;
+	isFailed: boolean;
+	isTimeout: boolean;
+};
+
+export type TransactionStatus = 'PENDING' | 'SUCCESS' | 'FAILED' | 'TIMEOUT';
+
+export interface TransactionStatusModalState {
+	isOpen: boolean;
+	open: (args: ShowTransactionStatusModalArgs) => void;
+	close: () => void;
+	state: {
+		hash: Hex | undefined;
+		orderId: string | undefined;
+		status: TransactionStatus;
+		type: TransactionType;
+		price: Price | undefined;
+		collectionAddress: Hex;
+		chainId: number;
+		collectibleId: string;
+		callbacks?: ModalCallbacks;
+		queriesToInvalidate?: QueryKey[];
+	};
+}
+
+export const initialState: TransactionStatusModalState = {
+	isOpen: false,
+	open: ({
+		hash,
+		orderId,
+		price,
+		collectionAddress,
+		chainId,
+		collectibleId,
+		type,
+		callbacks,
+		queriesToInvalidate,
+	}) => {
+		transactionStatusModal$.state.set({
+			...transactionStatusModal$.state.get(),
+			hash,
+			orderId,
+			price,
+			collectionAddress,
+			chainId,
+			collectibleId,
+			type,
+			callbacks,
+			queriesToInvalidate,
+		});
+		transactionStatusModal$.isOpen.set(true);
+	},
+	close: () => {
+		transactionStatusModal$.isOpen.set(false);
+		transactionStatusModal$.state.set({
+			...initialState.state,
+		});
+	},
+	state: {
+		hash: undefined,
+		orderId: undefined,
+		status: 'PENDING',
+		price: undefined,
+		collectionAddress: '' as Hex,
+		chainId: 0,
+		collectibleId: '',
+		type: undefined as unknown as TransactionType,
+		callbacks: undefined,
+		queriesToInvalidate: [],
+	},
+};
+
+export const transactionStatusModal$ = observable(initialState);

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

@@ -0,0 +1,23 @@
+import { TransactionType } from '../../../../../../_internal/types';
+
+export function getFormattedType(
+	transactionType: TransactionType,
+	verb = false,
+): string {
+	switch (transactionType) {
+		case TransactionType.TRANSFER:
+			return verb ? 'transferred' : 'transfer';
+		case TransactionType.LISTING:
+			return verb ? 'listed' : 'listing';
+		case TransactionType.BUY:
+			return verb ? 'purchased' : 'purchase';
+		case TransactionType.SELL:
+			return verb ? 'sold' : 'sale';
+		case TransactionType.CANCEL:
+			return verb ? 'cancelled' : 'cancellation';
+		case TransactionType.OFFER:
+			return verb ? 'offered' : 'offer';
+		default:
+			return 'transaction';
+	}
+}

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

@@ -0,0 +1,46 @@
+import { formatUnits } from 'viem';
+import type { Price } from '../../../../../../../types';
+import { TransactionType } from '../../../../../../_internal';
+import type { TransactionStatus } from '../store';
+import { getFormattedType } from './getFormattedType';
+
+export function getTransactionStatusModalMessage({
+	transactionStatus,
+	transactionType,
+	collectibleName,
+	orderId,
+	price,
+}: {
+	transactionStatus: TransactionStatus;
+	transactionType: TransactionType;
+	collectibleName: string;
+	orderId?: string;
+	price?: Price;
+}): string {
+	// without this, the text will be "Your cancellation CollectibleXXX has failed." which sounds weird
+	const hideCollectibleName = transactionType === 'CANCEL';
+	const formattedPrice = price
+		? formatUnits(BigInt(price.amountRaw), price.currency.decimals)
+		: '';
+
+	if (orderId) {
+		return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ''}. It's been confirmed on the blockchain!`;
+	}
+
+	if (transactionType === TransactionType.OFFER) {
+		return `You just offered ${formattedPrice} ${price?.currency.symbol} for ${collectibleName}. It's been confirmed on the blockchain!`;
+	}
+
+	switch (transactionStatus) {
+		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!`;
+		case 'FAILED':
+			return `Your ${getFormattedType(transactionType)} has failed.`;
+		case 'TIMEOUT':
+			return `Your ${getFormattedType(transactionType)} takes too long. Click the link below to track it on the explorer.`;
+		default:
+			return 'Your transaction is processing';
+	}
+}

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

@@ -0,0 +1,52 @@
+import type { TransactionType } from '../../../../../../_internal/types';
+import type { TransactionStatus } from '../store';
+import { getFormattedType } from './getFormattedType';
+
+export function getTransactionStatusModalTitle({
+	transactionStatus,
+	transactionType,
+	orderId,
+}: {
+	transactionStatus: TransactionStatus;
+	transactionType: TransactionType | undefined;
+	orderId?: string;
+}): string {
+	if (transactionType === undefined) {
+		return '';
+	}
+	if (orderId) {
+		return `Your ${getFormattedType(transactionType)} has processed`;
+	}
+
+	switch (transactionStatus) {
+		case 'PENDING':
+			return `Your ${getFormattedType(transactionType)} is processing`;
+		case 'SUCCESS':
+			return `Your ${getFormattedType(transactionType)} has processed`;
+		case 'FAILED':
+			return `Your ${getFormattedType(transactionType)} has failed`;
+		case 'TIMEOUT':
+			return `Your ${getFormattedType(transactionType)} takes too long`;
+		default:
+			return 'Your transaction is processing';
+	}
+}
+
+export function getTransactionStatusModalSpinnerTitle({
+	transactionStatus,
+}: {
+	transactionStatus: TransactionStatus;
+}): string {
+	switch (transactionStatus) {
+		case 'PENDING':
+			return 'Processing transaction';
+		case 'SUCCESS':
+			return 'Transaction completed';
+		case 'FAILED':
+			return 'Transaction failed';
+		case 'TIMEOUT':
+			return 'Taking too long';
+		default:
+			return 'Processing transaction';
+	}
+}