@0xsequence/marketplace-sdk 0.0.0-20250513233135

package/src/react/ui/modals/TransferModal/index.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { Modal } from '@0xsequence/design-system';
+import { observer } from '@legendapp/state/react';
+import type { Address } from 'viem';
+import { useAccount, useSwitchChain } from 'wagmi';
+import type { FeeOption } from '../../../../types/waas-types';
+import { useWallet } from '../../../_internal/wallet/useWallet';
+import { MODAL_OVERLAY_PROPS } from '../_internal/components/consts';
+import SelectWaasFeeOptions from '../_internal/components/selectWaasFeeOptions';
+import { selectWaasFeeOptions$ } from '../_internal/components/selectWaasFeeOptions/store';
+import { useSwitchChainModal } from '../_internal/components/switchChainModal';
+import { useSelectWaasFeeOptions } from '../_internal/hooks/useSelectWaasFeeOptions';
+import type { ModalCallbacks } from '../_internal/types';
+import { transferModal$ } from './_store';
+import EnterWalletAddressView from './_views/enterWalletAddress';
+import FollowWalletInstructionsView from './_views/followWalletInstructions';
+
+export type ShowTransferModalArgs = {
+	collectionAddress: Address;
+	collectibleId: string;
+	chainId: number;
+	callbacks?: ModalCallbacks;
+};
+
+export const useTransferModal = () => {
+	const { chainId: accountChainId } = useAccount();
+	const { show: showSwitchNetworkModal } = useSwitchChainModal();
+	const { wallet } = useWallet();
+	const { switchChain } = useSwitchChain();
+
+	const openModal = (args: ShowTransferModalArgs) => {
+		transferModal$.open(args);
+	};
+
+	const handleShowModal = (args: ShowTransferModalArgs) => {
+		const targetChainId = Number(args.chainId);
+		const isSameChain = accountChainId === targetChainId;
+
+		if (!isSameChain) {
+			if (wallet?.isWaaS) {
+				switchChain({ chainId: targetChainId });
+
+				openModal(args);
+			} else {
+				showSwitchNetworkModal({
+					chainIdToSwitchTo: targetChainId,
+					onSuccess: () => openModal(args),
+				});
+			}
+			return;
+		}
+
+		openModal(args);
+	};
+
+	const updateCallbacks = (callbacks: ModalCallbacks) => {
+		transferModal$.state.set({
+			...transferModal$.state.get(),
+			callbacks,
+		});
+	};
+
+	return {
+		show: handleShowModal,
+		close: transferModal$.close,
+		onError: updateCallbacks,
+		onSuccess: updateCallbacks,
+	};
+};
+
+const TransactionModalView = observer(() => {
+	const { view } = transferModal$.get();
+
+	switch (view) {
+		case 'enterReceiverAddress':
+			return <EnterWalletAddressView />;
+		case 'followWalletInstructions':
+			return <FollowWalletInstructionsView />;
+		default:
+			return null;
+	}
+});
+
+const TransferModal = observer(() => {
+	const isOpen = transferModal$.isOpen.get();
+	const chainId = transferModal$.state.chainId.get();
+	const isTransferBeingProcessed =
+		transferModal$.state.transferIsBeingProcessed.get();
+	const { waasFeeOptionsShown } = useSelectWaasFeeOptions({
+		chainId: chainId,
+		isProcessing: isTransferBeingProcessed,
+		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
+		selectedFeeOption:
+			selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+	});
+
+	if (!isOpen) return null;
+
+	return (
+		<Modal
+			isDismissible={true}
+			onClose={() => {
+				transferModal$.close();
+				selectWaasFeeOptions$.hide();
+			}}
+			size="sm"
+			overlayProps={MODAL_OVERLAY_PROPS}
+			contentProps={{
+				style: {
+					height: 'auto',
+					overflow: 'auto',
+				},
+			}}
+		>
+			<div className="flex w-full flex-col p-7">
+				<TransactionModalView />
+			</div>
+
+			{waasFeeOptionsShown && (
+				<SelectWaasFeeOptions
+					chainId={Number(chainId)}
+					onCancel={() => {
+						transferModal$.state.transferIsBeingProcessed.set(false);
+					}}
+					titleOnConfirm="Processing transfer..."
+					className="p-7 pt-0"
+				/>
+			)}
+		</Modal>
+	);
+});
+
+export { TransferModal };

package/src/react/ui/modals/TransferModal/messages.ts

@@ -0,0 +1,14 @@
+import type { TransferModalState } from './_store';
+
+type MessageKey = NonNullable<TransferModalState['view']>;
+
+const baseMessages: Record<MessageKey, string> = {
+	enterReceiverAddress:
+		"Items sent to the wrong wallet address can't be recovered!",
+	followWalletInstructions:
+		"Follow your wallet's instructions to submit a transaction to transfer your assets.",
+};
+
+export default function getMessage(key: MessageKey): string {
+	return baseMessages[key];
+}

package/src/react/ui/modals/_internal/components/actionModal/ActionModal.test.tsx

@@ -0,0 +1,292 @@
+import { fireEvent, render, screen, waitFor } from '@test';
+import { type Address, type PublicClient, custom, zeroAddress } from 'viem';
+import { mainnet, polygon } from 'viem/chains';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { WalletKind } from '../../../../../_internal';
+import * as walletModule from '../../../../../_internal/wallet/useWallet';
+import { ActionModal } from './ActionModal';
+
+const mockShowSwitchChainModal = vi.fn();
+vi.mock('../switchChainModal', () => ({
+	useSwitchChainModal: () => ({
+		show: mockShowSwitchChainModal,
+		close: vi.fn(),
+		isSwitching$: { get: () => false },
+	}),
+}));
+
+describe('ActionModal', () => {
+	const mockOnClose = vi.fn();
+	const mockOnClick = vi.fn();
+
+	const defaultProps = {
+		isOpen: true,
+		onClose: mockOnClose,
+		title: 'Test Modal',
+		children: <div>Modal Content</div>,
+		ctas: [
+			{
+				label: 'Test Button',
+				onClick: mockOnClick,
+				testid: 'test-button',
+			},
+		],
+		chainId: polygon.id,
+	};
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	describe('Loading states', () => {
+		it('should show a loading spinner when modalLoading prop is true', async () => {
+			render(<ActionModal {...defaultProps} modalLoading={true} />);
+
+			expect(screen.getByTestId('spinner')).toBeInTheDocument();
+		});
+
+		it('should show a loading spinner when isLoading from useWallet is true', async () => {
+			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+				wallet: null,
+				isLoading: true,
+				isError: false,
+			});
+
+			render(<ActionModal {...defaultProps} />);
+
+			expect(screen.getByTestId('spinner')).toBeInTheDocument();
+		});
+
+		it('should show error message when useWallet returns an error', () => {
+			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+				wallet: null,
+				isLoading: false,
+				isError: true,
+			});
+
+			render(<ActionModal {...defaultProps} />);
+
+			expect(screen.getByTestId('error-loading-text')).toBeInTheDocument();
+			expect(screen.getByText('Error loading modal')).toBeInTheDocument();
+			expect(screen.queryByText('Modal Content')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('test-button')).not.toBeInTheDocument();
+		});
+
+		it('should show modal content if loading states is false and no error', async () => {
+			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+				wallet: null,
+				isLoading: false,
+				isError: false,
+			});
+
+			render(<ActionModal {...defaultProps} modalLoading={false} />);
+
+			expect(screen.getByText('Modal Content')).toBeInTheDocument();
+			expect(screen.getByTestId('test-button')).toBeInTheDocument();
+		});
+	});
+
+	describe('Chain switching', () => {
+		it('should automatically switch chain for Sequence WaaS wallets', async () => {
+			const switchChainMock = vi.fn();
+
+			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+				wallet: {
+					address: () => Promise.resolve(zeroAddress as Address),
+					getChainId: vi.fn().mockResolvedValue(mainnet.id),
+					switchChain: switchChainMock,
+					transport: custom({ request: vi.fn() }),
+					walletKind: WalletKind.sequence,
+					isWaaS: true,
+					handleConfirmTransactionStep: vi.fn(),
+					handleSendTransactionStep: vi.fn(),
+					handleSignMessageStep: vi.fn(),
+					hasTokenApproval: vi.fn(),
+					// @ts-expect-error
+					publicClient: vi.fn().mockResolvedValue({} as PublicClient),
+				},
+				isLoading: false,
+				isError: false,
+			});
+
+			render(<ActionModal {...defaultProps} />);
+
+			expect(switchChainMock).toHaveBeenCalledWith(polygon.id);
+		});
+
+		it('should show switch chain modal when CTA is clicked with chain mismatch', async () => {
+			mockShowSwitchChainModal.mockClear();
+
+			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+				wallet: {
+					address: () => Promise.resolve(zeroAddress as Address),
+					getChainId: vi.fn().mockResolvedValue(mainnet.id), // different from defaultProps.chainId
+					switchChain: vi.fn(),
+					transport: custom({ request: vi.fn() }),
+					walletKind: WalletKind.sequence,
+					isWaaS: false,
+					handleConfirmTransactionStep: vi.fn(),
+					handleSendTransactionStep: vi.fn(),
+					handleSignMessageStep: vi.fn(),
+					hasTokenApproval: vi.fn(),
+					// @ts-expect-error
+					publicClient: vi.fn().mockResolvedValue({} as PublicClient),
+				},
+				isLoading: false,
+				isError: false,
+			});
+
+			render(<ActionModal {...defaultProps} />);
+
+			const button = screen.getByTestId('test-button');
+			fireEvent.click(button);
+
+			await waitFor(() => {
+				expect(mockShowSwitchChainModal).toHaveBeenCalledWith({
+					chainIdToSwitchTo: polygon.id,
+					onSuccess: expect.any(Function),
+				});
+			});
+		});
+
+		it('should directly execute callback when chain already matches', async () => {
+			mockOnClick.mockClear();
+
+			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+				wallet: {
+					address: () => Promise.resolve(zeroAddress as Address),
+					getChainId: vi.fn().mockResolvedValue(polygon.id), // Same as defaultProps.chainId
+					switchChain: vi.fn(),
+					transport: custom({ request: vi.fn() }),
+					walletKind: WalletKind.sequence,
+					isWaaS: false,
+					handleConfirmTransactionStep: vi.fn(),
+					handleSendTransactionStep: vi.fn(),
+					handleSignMessageStep: vi.fn(),
+					hasTokenApproval: vi.fn(),
+					// @ts-expect-error
+					publicClient: vi.fn().mockResolvedValue({} as PublicClient),
+				},
+				isLoading: false,
+				isError: false,
+			});
+
+			render(<ActionModal {...defaultProps} />);
+
+			const button = screen.getByTestId('test-button');
+			fireEvent.click(button);
+
+			await waitFor(() => {
+				expect(mockOnClick).toHaveBeenCalled();
+			});
+		});
+	});
+
+	describe('CTA buttons', () => {
+		it('should call onClick when CTA button is clicked', async () => {
+			const onClick = vi.fn();
+			render(
+				<ActionModal
+					{...defaultProps}
+					ctas={[{ label: 'Click Me', onClick, testid: 'cta-button' }]}
+				/>,
+			);
+
+			const button = screen.getByTestId('cta-button');
+			fireEvent.click(button);
+
+			await waitFor(() => {
+				expect(onClick).toHaveBeenCalled();
+			});
+		});
+
+		it('should disable the button when disabled prop is true', () => {
+			render(
+				<ActionModal
+					{...defaultProps}
+					ctas={[
+						{
+							label: 'Disabled Button',
+							onClick: mockOnClick,
+							disabled: true,
+							testid: 'disabled-button',
+						},
+					]}
+				/>,
+			);
+
+			const button = screen.getByTestId('disabled-button');
+			expect(button).toBeDisabled();
+
+			fireEvent.click(button);
+			expect(mockOnClick).not.toHaveBeenCalled();
+		});
+
+		it('should show spinner when pending prop is true', () => {
+			render(
+				<ActionModal
+					{...defaultProps}
+					ctas={[
+						{
+							label: 'Loading Button',
+							onClick: mockOnClick,
+							pending: true,
+							testid: 'pending-button',
+						},
+					]}
+				/>,
+			);
+
+			expect(screen.getByTestId('pending-button')).toBeInTheDocument();
+			expect(screen.getByTestId('pending-button-spinner')).toBeInTheDocument(); // wrapper of spinner has data-testid of {testid}-spinner
+		});
+
+		it('should not render hidden buttons', () => {
+			render(
+				<ActionModal
+					{...defaultProps}
+					ctas={[
+						{
+							label: 'Visible Button',
+							onClick: vi.fn(),
+							testid: 'visible-button',
+						},
+						{
+							label: 'Hidden Button',
+							onClick: vi.fn(),
+							hidden: true,
+							testid: 'hidden-button',
+						},
+					]}
+				/>,
+			);
+
+			expect(screen.getByTestId('visible-button')).toBeInTheDocument();
+			expect(screen.queryByTestId('hidden-button')).not.toBeInTheDocument();
+		});
+
+		it('should render multiple CTA buttons', () => {
+			render(
+				<ActionModal
+					{...defaultProps}
+					ctas={[
+						{
+							label: 'Primary CTA',
+							onClick: vi.fn(),
+							testid: 'primary-cta',
+						},
+						{
+							label: 'Secondary CTA',
+							onClick: vi.fn(),
+							variant: 'base',
+							testid: 'secondary-cta',
+						},
+					]}
+				/>,
+			);
+
+			expect(screen.getByTestId('primary-cta')).toBeInTheDocument();
+			expect(screen.getByTestId('secondary-cta')).toBeInTheDocument();
+		});
+	});
+});

package/src/react/ui/modals/_internal/components/actionModal/ActionModal.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import type React from 'react';
+import type { ComponentProps } from 'react';
+
+import { Button, Modal, Spinner, Text } from '@0xsequence/design-system';
+import { observer } from '@legendapp/state/react';
+import { useWallet } from '../../../../../_internal/wallet/useWallet';
+import { MODAL_OVERLAY_PROPS } from '../consts';
+import { MODAL_CONTENT_PROPS } from '../consts';
+import { useSwitchChainModal } from '../switchChainModal';
+
+export interface ActionModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	title: string;
+	children: React.ReactNode;
+	ctas: {
+		label: React.ReactNode;
+		onClick: (() => Promise<void>) | (() => void);
+		pending?: boolean;
+		disabled?: boolean;
+		hidden?: boolean;
+		variant?: ComponentProps<typeof Button>['variant'];
+		testid?: string;
+	}[];
+	chainId: number;
+	modalLoading?: boolean;
+	spinnerContainerClassname?: string;
+	disableAnimation?: boolean;
+	hideCtas?: boolean;
+}
+
+export const ActionModal = observer(
+	({
+		isOpen,
+		onClose,
+		title,
+		children,
+		ctas,
+		chainId,
+		disableAnimation,
+		modalLoading,
+		spinnerContainerClassname,
+		hideCtas,
+	}: ActionModalProps) => {
+		const { show: showSwitchChainModal } = useSwitchChainModal();
+		const { wallet, isLoading, isError } = useWallet();
+
+		const checkChain = async ({ onSuccess }: { onSuccess: () => void }) => {
+			const walletChainId = await wallet?.getChainId();
+			const chainMismatch = walletChainId !== Number(chainId);
+			if (chainMismatch) {
+				showSwitchChainModal({
+					chainIdToSwitchTo: chainId,
+					onSuccess,
+				});
+			} else {
+				onSuccess();
+			}
+		};
+
+		if (wallet?.isWaaS) {
+			wallet.switchChain(Number(chainId));
+		}
+
+		if (!isOpen || !chainId) {
+			return null;
+		}
+
+		return (
+			<Modal
+				isDismissible={true}
+				onClose={onClose}
+				overlayProps={MODAL_OVERLAY_PROPS}
+				contentProps={MODAL_CONTENT_PROPS}
+				disableAnimation={disableAnimation}
+			>
+				<div className="relative flex grow flex-col items-center gap-4 p-6">
+					<Text className="w-full text-center font-body font-bold text-large text-text-100">
+						{title}
+					</Text>
+
+					{modalLoading || isLoading || isError ? (
+						<div
+							className={`flex ${spinnerContainerClassname} w-full items-center justify-center`}
+							data-testid="error-loading-wrapper"
+						>
+							{isError && (
+								<Text
+									data-testid="error-loading-text"
+									className="text-center font-body text-error100 text-small"
+								>
+									Error loading modal
+								</Text>
+							)}
+							{(isLoading || modalLoading) && (
+								<div data-testid="spinner">
+									<Spinner size="lg" />
+								</div>
+							)}
+						</div>
+					) : (
+						children
+					)}
+
+					{!hideCtas && !isLoading && !isError && (
+						<div className="flex w-full flex-col gap-2">
+							{ctas.map(
+								(cta) =>
+									!cta.hidden && (
+										<Button
+											className="w-full rounded-[12px] [&>div]:justify-center"
+											key={cta.onClick.toString()}
+											onClick={async () => {
+												await checkChain({
+													onSuccess: () => {
+														cta.onClick();
+													},
+												});
+											}}
+											variant={cta.variant || 'primary'}
+											pending={cta.pending}
+											disabled={cta.disabled}
+											size="lg"
+											data-testid={cta.testid}
+											label={
+												<div className="flex items-center justify-center gap-2">
+													{cta.pending && (
+														<div data-testid={`${cta.testid}-spinner`}>
+															<Spinner size="sm" />
+														</div>
+													)}
+
+													{cta.label}
+												</div>
+											}
+										/>
+									),
+							)}
+						</div>
+					)}
+				</div>
+			</Modal>
+		);
+	},
+);

package/src/react/ui/modals/_internal/components/actionModal/ErrorModal.tsx

@@ -0,0 +1,35 @@
+import { Text } from '@0xsequence/design-system';
+import { ActionModal } from './ActionModal';
+
+interface ErrorModalProps {
+	isOpen: boolean;
+	chainId: number;
+	onClose: () => void;
+	title: string;
+	message?: string;
+}
+
+export const ErrorModal = ({
+	isOpen,
+	chainId,
+	onClose,
+	title,
+	message,
+}: ErrorModalProps) => (
+	<ActionModal
+		isOpen={isOpen}
+		chainId={chainId}
+		onClose={onClose}
+		title={title}
+		ctas={[]}
+	>
+		<div
+			className="flex items-center justify-center p-4"
+			data-testid="error-modal"
+		>
+			<Text className="font-body" color="text80">
+				{message || 'Error loading item details'}
+			</Text>
+		</div>
+	</ActionModal>
+);

package/src/react/ui/modals/_internal/components/actionModal/LoadingModal.tsx

@@ -0,0 +1,32 @@
+import { Spinner } from '@0xsequence/design-system';
+import { ActionModal } from './ActionModal';
+
+interface LoadingModalProps {
+	isOpen: boolean;
+	chainId: number;
+	onClose: () => void;
+	title: string;
+}
+
+export const LoadingModal = ({
+	isOpen,
+	chainId,
+	onClose,
+	title,
+}: LoadingModalProps) => (
+	<ActionModal
+		isOpen={isOpen}
+		chainId={chainId}
+		onClose={onClose}
+		title={title}
+		ctas={[]}
+		disableAnimation
+	>
+		<div
+			className="flex items-center justify-center p-4"
+			data-testid="loading-modal"
+		>
+			<Spinner size="lg" />
+		</div>
+	</ActionModal>
+);

package/src/react/ui/modals/_internal/components/actionModal/index.ts

@@ -0,0 +1,2 @@
+export * from './ActionModal';
+export * from './store';

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

@@ -0,0 +1,24 @@
+import { type Observable, observable } from '@legendapp/state';
+import type { Address } from 'viem';
+
+export interface ActionModalState {
+	isOpen: boolean;
+	chainId: number | null;
+	collectionAddress: Address | null;
+}
+
+export function createActionModalStore() {
+	return observable<ActionModalState>({
+		isOpen: false,
+		chainId: null,
+		collectionAddress: null,
+	});
+}
+
+export function openModal(store: Observable<ActionModalState>) {
+	store.isOpen.set(true);
+}
+
+export function closeModal(store: Observable<ActionModalState>) {
+	store.isOpen.set(false);
+}