@0xsequence/marketplace-sdk 1.0.0 → 1.1.1

package/src/react/ui/modals/_internal/components/switchChainErrorModal/__tests__/SwitchChainErrorModal.test.tsx

@@ -0,0 +1,80 @@
+import { render, renderHook, screen, wagmiConfig, waitFor } from '@test';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { useAccount } from 'wagmi';
+import SwitchChainErrorModal, { useSwitchChainErrorModal } from '../index';
+import { switchChainErrorModalStore } from '../store';
+
+vi.mock('wagmi', async () => {
+	const actual = await vi.importActual('wagmi');
+	return {
+		...actual,
+		useAccount: vi.fn(),
+	};
+});
+
+const mockUseAccount = vi.mocked(useAccount);
+
+const chainToSwitchTo = wagmiConfig.chains[1]; //Polygon
+
+describe('SwitchChainErrorModal', () => {
+	beforeEach(() => {
+		// Reset store to initial state
+		switchChainErrorModalStore.send({ type: 'close' });
+		vi.clearAllMocks();
+
+		mockUseAccount.mockReturnValue({
+			chainId: wagmiConfig.chains[0].id,
+			isConnected: true,
+		} as any);
+	});
+
+	test('opens switch chain error modal with correct chain', async () => {
+		const { result } = renderHook(() => useSwitchChainErrorModal());
+
+		result.current.show({ chainIdToSwitchTo: chainToSwitchTo.id });
+		render(<SwitchChainErrorModal />);
+
+		await waitFor(() => {
+			const titleElement = screen.getByText('Switching network failed');
+			expect(titleElement).toBeInTheDocument();
+		});
+
+		const titleElement = await screen.findByText('Switching network failed');
+		expect(titleElement).toBeInTheDocument();
+
+		const messageElement = await screen.findByText(
+			`There was an error switching to ${chainToSwitchTo.name}. Please try changing the network in your wallet manually.`,
+		);
+		expect(messageElement).toBeInTheDocument();
+	});
+
+	test('closes switch chain modal using close callback', async () => {
+		const { result } = renderHook(() => useSwitchChainErrorModal());
+
+		result.current.show({ chainIdToSwitchTo: chainToSwitchTo.id });
+		render(<SwitchChainErrorModal />);
+
+		switchChainErrorModalStore.send({ type: 'close' });
+
+		const titleElement = screen.queryByText('Switching network failed');
+		await waitFor(() => {
+			expect(titleElement).not.toBeInTheDocument();
+		});
+	});
+
+	test('does not show modal if current chain matches target chain', () => {
+		// Mock user already being on Polygon
+		mockUseAccount.mockReturnValue({
+			chainId: chainToSwitchTo.id,
+			isConnected: true,
+		} as any);
+
+		const { result } = renderHook(() => useSwitchChainErrorModal());
+		result.current.show({ chainIdToSwitchTo: chainToSwitchTo.id });
+
+		render(<SwitchChainErrorModal />);
+
+		const titleElement = screen.queryByText('Switching network failed');
+		expect(titleElement).not.toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,64 @@
+'use client';
+
+import { Modal, Text } from '@0xsequence/design-system';
+import { useAccount } from 'wagmi';
+import { getPresentableChainName } from '../../../../../../utils/network';
+import AlertMessage from '../alertMessage';
+import { MODAL_OVERLAY_PROPS } from '../consts';
+import {
+	switchChainErrorModalStore,
+	useChainIdToSwitchTo,
+	useIsOpen,
+} from './store';
+
+export type ShowSwitchChainModalArgs = {
+	chainIdToSwitchTo: number;
+};
+
+export const useSwitchChainErrorModal = () => {
+	return {
+		show: (args: ShowSwitchChainModalArgs) =>
+			switchChainErrorModalStore.send({ type: 'open', ...args }),
+		close: () => switchChainErrorModalStore.send({ type: 'close' }),
+	};
+};
+
+const SwitchChainErrorModal = () => {
+	const { chainId: currentChainId } = useAccount();
+	const isOpen = useIsOpen();
+	const chainIdToSwitchTo = useChainIdToSwitchTo();
+
+	const chainName = chainIdToSwitchTo
+		? getPresentableChainName(chainIdToSwitchTo)
+		: '';
+
+	const handleClose = () => {
+		switchChainErrorModalStore.send({ type: 'close' });
+	};
+
+	if (!isOpen || !chainIdToSwitchTo || currentChainId === chainIdToSwitchTo)
+		return null;
+
+	return (
+		<Modal
+			isDismissible={true}
+			onClose={handleClose}
+			disableAnimation
+			size="sm"
+			overlayProps={MODAL_OVERLAY_PROPS}
+		>
+			<div className="grid flex-col gap-6 p-7">
+				<Text className="text-xl" fontWeight="bold" color="text100">
+					Switching network failed
+				</Text>
+
+				<AlertMessage
+					type="warning"
+					message={`There was an error switching to ${chainName}. Please try changing the network in your wallet manually.`}
+				/>
+			</div>
+		</Modal>
+	);
+};
+
+export default SwitchChainErrorModal;

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

@@ -0,0 +1,42 @@
+import { createStore } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
+import type { ShowSwitchChainModalArgs } from '.';
+
+export interface SwitchChainErrorModalState {
+	isOpen: boolean;
+	chainIdToSwitchTo: number | undefined;
+	isSwitching: boolean;
+}
+
+const initialContext: SwitchChainErrorModalState = {
+	isOpen: false,
+	chainIdToSwitchTo: undefined,
+	isSwitching: false,
+};
+
+export const switchChainErrorModalStore = createStore({
+	context: initialContext,
+	on: {
+		open: (context, event: ShowSwitchChainModalArgs) => ({
+			...context,
+			isOpen: true,
+			chainIdToSwitchTo: event.chainIdToSwitchTo,
+		}),
+		close: (context) => ({
+			...context,
+			isOpen: false,
+			chainIdToSwitchTo: undefined,
+			isSwitching: false,
+		}),
+	},
+});
+
+// Selector hooks
+export const useIsOpen = () =>
+	useSelector(switchChainErrorModalStore, (state) => state.context.isOpen);
+
+export const useChainIdToSwitchTo = () =>
+	useSelector(
+		switchChainErrorModalStore,
+		(state) => state.context.chainIdToSwitchTo,
+	);

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

@@ -1,6 +1,13 @@
 'use client';
 
-import { Image, Skeleton, Text } from '@0xsequence/design-system';
+import {
+	ChevronRightIcon,
+	Image,
+	Skeleton,
+	Text,
+	Tooltip,
+} from '@0xsequence/design-system';
+import { useEffect, useState } from 'react';
 import type { Address } from 'viem';
 import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../../../consts';
 import type { Price } from '../../../../../../types';
@@ -40,28 +47,50 @@ export default function TransactionDetails({
 		collectionAddress,
 		collectibleId,
 	});
+	const [overflow, setOverflow] = useState({
+		status: false,
+		amount: '0',
+	});
 
 	const priceLoading = !price || marketplaceConfigLoading || royaltyLoading;
 
-	let formattedAmount = '0';
+	const [formattedAmount, setFormattedAmount] = useState('0');
 
-	if (price) {
-		const fees: number[] = [];
+	useEffect(() => {
+		if (!price || royaltyLoading || marketplaceConfigLoading) return;
 
+		const fees: number[] = [];
 		if (royalty !== null) {
 			fees.push(Number(royalty.percentage));
 		}
-
 		if (marketplaceFeePercentage > 0) {
 			fees.push(marketplaceFeePercentage);
 		}
-
-		formattedAmount = calculateEarningsAfterFees(
+		const newFormattedAmount = calculateEarningsAfterFees(
 			BigInt(price.amountRaw),
 			price.currency.decimals,
 			fees,
 		);
-	}
+		setFormattedAmount(newFormattedAmount);
+	}, [
+		price,
+		royalty,
+		marketplaceFeePercentage,
+		royaltyLoading,
+		marketplaceConfigLoading,
+	]);
+
+	useEffect(() => {
+		if (formattedAmount.length > 15) {
+			setOverflow((prev) =>
+				prev.status
+					? prev
+					: { status: true, amount: formattedAmount.slice(0, 15) },
+			);
+		} else {
+			setOverflow({ status: false, amount: formattedAmount });
+		}
+	}, [formattedAmount]);
 
 	return (
 		<div className="flex w-full items-center justify-between">
@@ -75,8 +104,27 @@ export default function TransactionDetails({
 					<Skeleton className="h-4 w-24 animate-shimmer" />
 				) : (
 					<Text className="font-body font-medium text-xs" color={'text100'}>
-						{showPlaceholderPrice ? '0' : formattedAmount}{' '}
-						{price.currency.symbol}
+						{showPlaceholderPrice ? (
+							<Text className="font-body font-medium text-xs" color={'text100'}>
+								0 {price.currency.symbol}
+							</Text>
+						) : overflow.status ? (
+							<Tooltip message={formattedAmount + ' ' + price.currency.symbol}>
+								<div className="flex items-center">
+									<ChevronRightIcon className="h-3 w-3 text-text-100" />
+									<Text
+										className="font-body font-medium text-xs"
+										color={'text100'}
+									>
+										{overflow.amount} {price.currency.symbol}
+									</Text>
+								</div>
+							</Tooltip>
+						) : (
+							<Text className="font-body font-medium text-xs" color={'text100'}>
+								{formattedAmount} {price.currency.symbol}
+							</Text>
+						)}
 					</Text>
 				)}
 			</div>