@0xsequence/marketplace-sdk 0.0.0-20250513233135

package/src/react/ui/modals/_internal/components/transaction-footer/index.tsx

@@ -0,0 +1,67 @@
+import { CheckmarkIcon, Spinner, Text } from '@0xsequence/design-system';
+import { type ChainId, networks } from '@0xsequence/network';
+import type { Hex } from 'viem';
+import { truncateMiddle } from '../../../../../../utils';
+
+type TransactionFooterProps = {
+	transactionHash: Hex | undefined;
+	orderId?: string;
+	isConfirming: boolean;
+	isConfirmed: boolean;
+	isFailed: boolean;
+	isTimeout: boolean;
+	chainId: number;
+};
+
+export default function TransactionFooter({
+	transactionHash,
+	orderId,
+	isConfirming,
+	isConfirmed,
+	isFailed,
+	isTimeout,
+	chainId,
+}: TransactionFooterProps) {
+	const icon =
+		((isConfirmed || orderId) && <PositiveCircle />) ||
+		(isConfirming && <Spinner size="md" />);
+
+	const title =
+		((isConfirmed || orderId) && 'Transaction complete') ||
+		(isConfirming && 'Processing transaction') ||
+		(isFailed && 'Transaction failed') ||
+		(isTimeout && 'Transaction took longer than expected');
+
+	const transactionUrl = `${networks[chainId as unknown as ChainId]?.blockExplorer?.rootUrl}tx/${transactionHash}`;
+	return (
+		<div className="flex items-center">
+			{icon}
+			<Text
+				className="ml-2 grow font-body text-sm"
+				color="text50"
+				fontWeight="medium"
+			>
+				{title}
+			</Text>
+			<a
+				className="ml-2 text-right no-underline"
+				href={transactionUrl}
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<Text
+					className="text-right font-body text-sm text-violet-400"
+					fontWeight="medium"
+				>
+					{transactionHash && truncateMiddle(transactionHash, 4, 4)}
+				</Text>
+			</a>
+		</div>
+	);
+}
+
+export const PositiveCircle = () => (
+	<div className="flex h-5 w-5 items-center justify-center rounded-full bg-[#35a554]">
+		<CheckmarkIcon size="xs" color="white" />
+	</div>
+);

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

@@ -0,0 +1,85 @@
+'use client';
+
+import { Image, Skeleton, Text } from '@0xsequence/design-system';
+import type { Hex } from 'viem';
+import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../../../consts';
+import type { Price } from '../../../../../../types';
+import { calculateEarningsAfterFees } from '../../../../../../utils/price';
+import { useMarketplaceConfig, useRoyalty } from '../../../../../hooks';
+
+type TransactionDetailsProps = {
+	collectibleId: string;
+	collectionAddress: Hex;
+	chainId: number;
+	price?: Price;
+	currencyImageUrl?: string;
+	includeMarketplaceFee: boolean;
+	// We use a placeholder price for create listing modal
+	showPlaceholderPrice?: boolean;
+};
+
+export default function TransactionDetails({
+	collectibleId,
+	collectionAddress,
+	chainId,
+	includeMarketplaceFee,
+	price,
+	showPlaceholderPrice,
+	currencyImageUrl,
+}: TransactionDetailsProps) {
+	const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
+
+	const marketplaceFeePercentage = includeMarketplaceFee
+		? data?.collections.find(
+				(collection) => collection.address === collectionAddress,
+			)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE
+		: 0;
+	// royaltyPercentage is an array of [recipient, percentage]
+	const { data: royalty, isLoading: royaltyLoading } = useRoyalty({
+		chainId,
+		collectionAddress,
+		collectibleId,
+	});
+
+	const priceLoading = !price || marketplaceConfigLoading || royaltyLoading;
+
+	let formattedAmount = '0';
+
+	if (price) {
+		const fees: number[] = [];
+
+		if (royalty !== null) {
+			fees.push(Number(royalty.percentage));
+		}
+
+		if (marketplaceFeePercentage > 0) {
+			fees.push(marketplaceFeePercentage);
+		}
+
+		formattedAmount = calculateEarningsAfterFees(
+			BigInt(price.amountRaw),
+			price.currency.decimals,
+			fees,
+		);
+	}
+
+	return (
+		<div className="flex w-full items-center justify-between">
+			<Text className="font-body font-medium text-xs" color={'text50'}>
+				Total earnings
+			</Text>
+			<div className="flex items-center gap-2">
+				<Image className="h-3 w-3" src={currencyImageUrl} />
+
+				{priceLoading ? (
+					<Skeleton className="h-4 w-24 animate-shimmer" />
+				) : (
+					<Text className="font-body font-medium text-xs" color={'text100'}>
+						{showPlaceholderPrice ? '0' : formattedAmount}{' '}
+						{price.currency.symbol}
+					</Text>
+				)}
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,36 @@
+import { Image, Skeleton, Text } from '@0xsequence/design-system';
+import { formatDistanceToNow } from 'date-fns';
+
+type TransactionHeaderProps = {
+	title: string;
+	currencyImageUrl?: string;
+	date?: Date;
+};
+
+export default function TransactionHeader({
+	title,
+	currencyImageUrl,
+	date,
+}: TransactionHeaderProps) {
+	return (
+		<div className="flex w-full items-center">
+			<Text
+				className="mr-1 font-body text-sm"
+				fontWeight="medium"
+				color="text80"
+			>
+				{title}
+			</Text>
+			<Image className="mr-1 h-3 w-3" src={currencyImageUrl} />
+			{(date && (
+				<Text
+					className="grow text-right font-body text-xs"
+					fontWeight="medium"
+					color="text50"
+				>
+					{formatDistanceToNow(date)} ago
+				</Text>
+			)) || <Skeleton className="h-4 w-8" />}
+		</div>
+	);
+}

package/src/react/ui/modals/_internal/components/transactionPreview/consts.ts

@@ -0,0 +1,32 @@
+export const TRANSACTION_TITLES = {
+	SELL: {
+		confirming: 'Selling',
+		confirmed: 'Sold',
+		failed: 'Sale failed',
+	},
+	LISTING: {
+		confirming: 'Creating listing',
+		confirmed: 'Listed',
+		failed: 'Listing failed',
+	},
+	OFFER: {
+		confirming: 'Creating offer',
+		confirmed: 'Offer created',
+		failed: 'Offer failed',
+	},
+	BUY: {
+		confirming: 'Buying',
+		confirmed: 'Bought',
+		failed: 'Purchase failed',
+	},
+	TRANSFER: {
+		confirming: 'Transferring',
+		confirmed: 'Transferred',
+		failed: 'Transfer failed',
+	},
+	CANCEL: {
+		confirming: 'Cancelling',
+		confirmed: 'Cancelled',
+		failed: 'Cancellation failed',
+	},
+} as const;

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

@@ -0,0 +1,136 @@
+import { Image, NetworkImage, Skeleton, Text } from '@0xsequence/design-system';
+import type { TokenMetadata } from '@0xsequence/metadata';
+import { observer } from '@legendapp/state/react';
+import { type Hex, formatUnits } from 'viem';
+import type { Price } from '../../../../../../types';
+import { useCollection } from '../../../../../hooks';
+import ChessTileImage from '../../../../images/chess-tile.png';
+import TimeAgo from '../timeAgo';
+import { transactionStatusModal$ } from '../transactionStatusModal/store';
+import { useTransactionPreviewTitle } from './useTransactionPreviewTitle';
+
+type TransactionPreviewProps = {
+	orderId?: string;
+	price?: Price;
+	collectionAddress: Hex;
+	chainId: number;
+	collectible: TokenMetadata | undefined;
+	collectibleLoading: boolean;
+	currencyImageUrl?: string;
+	isConfirming: boolean;
+	isConfirmed: boolean;
+	isFailed: boolean;
+	isTimeout: boolean;
+};
+
+const TransactionPreview = observer(
+	({
+		orderId,
+		price,
+		collectionAddress,
+		chainId,
+		collectible,
+		collectibleLoading,
+		currencyImageUrl,
+		isConfirming,
+		isConfirmed,
+		isFailed,
+		isTimeout,
+	}: TransactionPreviewProps) => {
+		const { type } = transactionStatusModal$.state.get();
+		const title = useTransactionPreviewTitle(
+			orderId,
+			{ isConfirmed, isConfirming, isFailed, isTimeout },
+			type,
+		);
+		const { data: collection, isLoading: collectionLoading } = useCollection({
+			collectionAddress,
+			chainId,
+		});
+
+		const collectibleImage = collectible?.image;
+		const collectibleName = collectible?.name;
+		const collectionName = collection?.name;
+		const priceFormatted = price
+			? formatUnits(BigInt(price?.amountRaw), price?.currency.decimals)
+			: undefined;
+
+		if (collectibleLoading || collectionLoading) {
+			return (
+				<div className="w-full rounded-xl" style={{ height: 83 }}>
+					<Skeleton style={{ width: '100%', height: '100%' }} />
+				</div>
+			);
+		}
+
+		return (
+			<div
+				className="rounded-xl bg-background-secondary p-3"
+				data-testid="transaction-preview"
+			>
+				<div className="flex items-center">
+					<Text
+						className="mr-1 font-body text-xs"
+						color="text80"
+						fontWeight="medium"
+						data-testid="transaction-preview-title"
+					>
+						{title}
+					</Text>
+
+					<NetworkImage chainId={Number(chainId)} size="xs" />
+
+					{isConfirming && <TimeAgo date={new Date()} />}
+				</div>
+				<div className="mt-2 flex items-center">
+					<Image
+						className="mr-3 h-9 w-9 rounded-sm"
+						src={collectibleImage || ChessTileImage}
+						alt={collectibleName}
+						style={{ objectFit: 'cover' }}
+						data-testid="transaction-preview-image"
+					/>
+
+					<div className="flex flex-col items-start gap-0.5">
+						<Text
+							className="font-body text-xs"
+							color="text80"
+							fontWeight="medium"
+							data-testid="transaction-preview-collection-name"
+						>
+							{collectionName}
+						</Text>
+
+						<Text
+							className="font-body text-xs"
+							color="text100"
+							fontWeight="bold"
+							data-testid="transaction-preview-collectible-name"
+						>
+							{collectibleName}
+						</Text>
+					</div>
+
+					{price && (
+						<div
+							className="flex grow items-center justify-end gap-1"
+							data-testid="transaction-preview-price"
+						>
+							<Image className="h-3 w-3" src={currencyImageUrl} />
+
+							<Text
+								className="font-body text-xs"
+								color="text100"
+								fontWeight="bold"
+							>
+								{priceFormatted} {price?.currency.symbol}
+							</Text>
+						</div>
+					)}
+				</div>
+			</div>
+		);
+	},
+);
+
+export default TransactionPreview;

package/src/react/ui/modals/_internal/components/transactionPreview/useTransactionPreviewTitle.tsx

@@ -0,0 +1,20 @@
+import type { TransactionType } from '../../../../../_internal/types';
+import type { ConfirmationStatus } from '../transactionStatusModal/store';
+import { TRANSACTION_TITLES } from './consts';
+
+export function useTransactionPreviewTitle(
+	orderId: string | undefined,
+	status: ConfirmationStatus,
+	type?: TransactionType | undefined,
+): string {
+	if (!type) return '';
+
+	const { isConfirming, isConfirmed, isFailed } = status;
+	const titles = TRANSACTION_TITLES[type];
+
+	if (isConfirmed || orderId) return titles.confirmed;
+	if (isConfirming) return titles.confirming;
+	if (isFailed) return titles.failed;
+
+	return '';
+}

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

@@ -0,0 +1,141 @@
+import { cleanup, render, screen, waitFor } from '@test';
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { TransactionType } from '../../../../../../_internal/types';
+import TransactionStatusModal from '../index';
+import type { ShowTransactionStatusModalArgs } from '../index';
+import { transactionStatusModal$ } from '../store';
+
+const mockTransactionArgs: ShowTransactionStatusModalArgs = {
+	hash: '0x123' as `0x${string}`,
+	collectionAddress: '0x456' as `0x${string}`,
+	chainId: 1,
+	collectibleId: '1',
+	type: TransactionType.BUY,
+};
+
+vi.mock('../hooks/useTransactionStatus', () => ({
+	default: vi.fn(),
+}));
+
+import useTransactionStatus from '../hooks/useTransactionStatus';
+
+describe('TransactionStatusModal', () => {
+	afterEach(() => {
+		cleanup();
+	});
+
+	beforeEach(() => {
+		transactionStatusModal$.close();
+		vi.clearAllMocks();
+		vi.mocked(useTransactionStatus).mockReturnValue('PENDING');
+	});
+
+	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 () => {
+		vi.mocked(useTransactionStatus).mockReturnValue('PENDING');
+		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 () => {
+		vi.mocked(useTransactionStatus).mockReturnValue('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 () => {
+		vi.mocked(useTransactionStatus).mockReturnValue('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 () => {
+		vi.mocked(useTransactionStatus).mockReturnValue('TIMEOUT');
+		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();
+		vi.mocked(useTransactionStatus).mockImplementation(() => {
+			onSuccess({
+				hash: mockTransactionArgs.hash,
+			});
+			return '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');
+		vi.mocked(useTransactionStatus).mockImplementation(() => {
+			onError(error);
+			return 'FAILED';
+		});
+
+		transactionStatusModal$.open({
+			...mockTransactionArgs,
+			callbacks: { onError },
+		});
+		render(<TransactionStatusModal />);
+
+		await waitFor(() => {
+			expect(onError).toHaveBeenCalledWith(error);
+		});
+	});
+});