@0xsequence/marketplace-sdk 0.0.0-20250513233135

package/src/react/ui/modals/_internal/components/selectWaasFeeOptions/_components/ActionButtons.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { Button, Skeleton, Spinner } from '@0xsequence/design-system';
+
+const ActionButtons = ({
+	onCancel,
+	onConfirm,
+	disabled,
+	loading,
+	confirmed,
+	tokenSymbol,
+}: {
+	onCancel: () => void;
+	onConfirm: () => void;
+	disabled: boolean;
+	loading: boolean;
+	confirmed: boolean;
+	tokenSymbol?: string;
+}) => (
+	<div className="mt-4 flex w-full items-center justify-end gap-2">
+		<Button
+			pending={loading}
+			onClick={onCancel}
+			label={<div className="flex items-center gap-2">Cancel</div>}
+			variant={'ghost'}
+			shape="square"
+			size="md"
+		/>
+
+		<Button
+			disabled={disabled}
+			pending={loading || confirmed}
+			onClick={onConfirm}
+			label={
+				<div className="flex items-center gap-2">
+					{!confirmed ? (
+						tokenSymbol ? (
+							`Continue with ${tokenSymbol}`
+						) : (
+							<div className="flex items-center gap-2">
+								Continue with
+								<Skeleton className="h-[20px] w-6 animate-shimmer" />
+							</div>
+						)
+					) : (
+						<div className="flex items-center gap-2">
+							<Spinner size="sm" />
+							Confirming
+						</div>
+					)}
+				</div>
+			}
+			variant={'primary'}
+			shape="square"
+			size="md"
+		/>
+	</div>
+);
+
+export default ActionButtons;

package/src/react/ui/modals/_internal/components/selectWaasFeeOptions/_components/BalanceIndicator.tsx

@@ -0,0 +1,30 @@
+import { Text, WarningIcon } from '@0xsequence/design-system';
+import { CheckmarkIcon } from '@0xsequence/design-system';
+
+const BalanceIndicator = ({
+	insufficientBalance,
+	currencyBalance,
+	selectedFeeOption,
+}: {
+	insufficientBalance: boolean;
+	currencyBalance?: { formatted: string };
+	selectedFeeOption?: { token: { symbol: string } };
+}) => (
+	<div className="flex items-center gap-2">
+		{insufficientBalance ? (
+			<WarningIcon className="text-negative" size="xs" />
+		) : (
+			<CheckmarkIcon className="text-positive" size="xs" />
+		)}
+
+		<Text
+			className="font-body font-medium text-xs"
+			color={insufficientBalance ? 'negative' : 'text100'}
+		>
+			You have {currencyBalance?.formatted || '0'}{' '}
+			{selectedFeeOption?.token.symbol}
+		</Text>
+	</div>
+);
+
+export default BalanceIndicator;

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

@@ -0,0 +1,126 @@
+'use client';
+
+import { getNetwork } from '@0xsequence/connect';
+import { Divider, Skeleton, Text } from '@0xsequence/design-system';
+import { NetworkType } from '@0xsequence/network';
+import { observer } from '@legendapp/state/react';
+import type { FeeOption } from '../../../../../../types/waas-types';
+import { cn } from '../../../../../../utils';
+import WaasFeeOptionsSelect from '../waasFeeOptionsSelect/WaasFeeOptionsSelect';
+import ActionButtons from './_components/ActionButtons';
+import BalanceIndicator from './_components/BalanceIndicator';
+import { selectWaasFeeOptions$ } from './store';
+import useWaasFeeOptionManager from './useWaasFeeOptionManager';
+
+type SelectWaasFeeOptionsProps = {
+	onCancel?: () => void;
+	chainId: number;
+	titleOnConfirm?: string;
+	className?: string;
+};
+
+const SelectWaasFeeOptions = observer(
+	({
+		chainId,
+		onCancel,
+		titleOnConfirm,
+		className,
+	}: SelectWaasFeeOptionsProps) => {
+		const network = getNetwork(chainId);
+		const isTestnet = network.type === NetworkType.TESTNET;
+		const {
+			selectedFeeOption$,
+			selectedFeeOption,
+			pendingFeeOptionConfirmation,
+			currencyBalance,
+			currencyBalanceLoading,
+			insufficientBalance,
+			feeOptionsConfirmed,
+			handleConfirmFeeOption,
+		} = useWaasFeeOptionManager(chainId);
+
+		console.log('pendingFeeOptionConfirmation', pendingFeeOptionConfirmation);
+
+		const handleCancelFeeOption = () => {
+			selectWaasFeeOptions$.hide();
+
+			onCancel?.();
+		};
+
+		if (
+			!selectWaasFeeOptions$.isVisible.get() ||
+			isTestnet ||
+			!selectedFeeOption
+		) {
+			return null;
+		}
+
+		return (
+			<div
+				className={cn(
+					'flex w-full flex-col gap-2 rounded-2xl bg-button-emphasis p-0 backdrop-blur-md',
+					className,
+				)}
+			>
+				<Divider className="mt-0 mb-4" />
+
+				<Text className="mb-2 font-body font-bold text-large text-text-100">
+					{feeOptionsConfirmed ? titleOnConfirm : 'Select a fee option'}
+				</Text>
+
+				{!feeOptionsConfirmed && !pendingFeeOptionConfirmation && (
+					<Skeleton className="h-[52px] w-full animate-shimmer rounded-xl" />
+				)}
+
+				{(feeOptionsConfirmed || pendingFeeOptionConfirmation) && (
+					<div
+						className={cn(
+							'[&>label>button>span]:overflow-hidden [&>label>button]:w-full [&>label>button]:text-xs [&>label]:flex [&>label]:w-full',
+							feeOptionsConfirmed && 'pointer-events-none opacity-70',
+						)}
+					>
+						<WaasFeeOptionsSelect
+							options={
+								(pendingFeeOptionConfirmation?.options as FeeOption[]) || [
+									selectedFeeOption,
+								]
+							}
+							selectedFeeOption$={selectedFeeOption$}
+						/>
+					</div>
+				)}
+
+				<div className="flex w-full items-start justify-between">
+					{!feeOptionsConfirmed &&
+						(!pendingFeeOptionConfirmation || currencyBalanceLoading) && (
+							<Skeleton className="h-[20px] w-2/3 animate-shimmer rounded-xl" />
+						)}
+
+					{(feeOptionsConfirmed ||
+						(pendingFeeOptionConfirmation && !currencyBalanceLoading)) && (
+						<BalanceIndicator
+							insufficientBalance={insufficientBalance}
+							currencyBalance={currencyBalance}
+							selectedFeeOption={selectedFeeOption}
+						/>
+					)}
+				</div>
+
+				<ActionButtons
+					onCancel={handleCancelFeeOption}
+					onConfirm={handleConfirmFeeOption}
+					disabled={
+						!selectedFeeOption?.token ||
+						insufficientBalance ||
+						currencyBalanceLoading
+					}
+					loading={currencyBalanceLoading}
+					confirmed={feeOptionsConfirmed}
+					tokenSymbol={selectedFeeOption?.token.symbol}
+				/>
+			</div>
+		);
+	},
+);
+
+export default SelectWaasFeeOptions;

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

@@ -0,0 +1,25 @@
+import { observable } from '@legendapp/state';
+import type {
+	FeeOption,
+	WaasFeeOptionConfirmation,
+} from '../../../../../../types/waas-types';
+
+type SelectWaasFeeOptionsState = {
+	selectedFeeOption: FeeOption | undefined;
+	pendingFeeOptionConfirmation: WaasFeeOptionConfirmation | undefined;
+	isVisible: boolean;
+	hide: () => void;
+};
+
+const initialState = {
+	selectedFeeOption: undefined,
+	pendingFeeOptionConfirmation: undefined,
+	isVisible: false,
+	hide: () => {
+		selectWaasFeeOptions$.isVisible.set(false);
+		selectWaasFeeOptions$.selectedFeeOption.set(undefined);
+		selectWaasFeeOptions$.pendingFeeOptionConfirmation.set(undefined);
+	},
+} as SelectWaasFeeOptionsState;
+
+export const selectWaasFeeOptions$ = observable(initialState);

package/src/react/ui/modals/_internal/components/selectWaasFeeOptions/useWaasFeeOptionManager.tsx

@@ -0,0 +1,74 @@
+import { useWaasFeeOptions } from '@0xsequence/connect';
+import { useEffect, useState } from 'react';
+import { type Address, zeroAddress } from 'viem';
+import { useAccount } from 'wagmi';
+import type { FeeOption } from '../../../../../../types/waas-types';
+import { useCurrencyBalance } from '../../../../../hooks/useCurrencyBalance';
+import { selectWaasFeeOptions$ } from './store';
+
+const useWaasFeeOptionManager = (chainId: number) => {
+	const { address: userAddress } = useAccount();
+	const selectedFeeOption$ = selectWaasFeeOptions$.selectedFeeOption;
+	const [pendingFeeOptionConfirmation, confirmPendingFeeOption] =
+		useWaasFeeOptions();
+	const [feeOptionsConfirmed, setFeeOptionsConfirmed] = useState(false);
+	const selectedFeeOption = selectedFeeOption$.get();
+
+	const { data: currencyBalance, isLoading: currencyBalanceLoading } =
+		useCurrencyBalance({
+			chainId,
+			currencyAddress: (selectedFeeOption?.token.contractAddress ||
+				zeroAddress) as Address,
+			userAddress: userAddress as Address,
+		});
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: it causes a loop
+	useEffect(() => {
+		if (!selectedFeeOption && pendingFeeOptionConfirmation) {
+			selectedFeeOption$.set(
+				pendingFeeOptionConfirmation.options[0] as FeeOption,
+			);
+		}
+	}, [pendingFeeOptionConfirmation]);
+
+	const insufficientBalance = (() => {
+		if (!selectedFeeOption?.value || !selectedFeeOption.token.decimals) {
+			return false;
+		}
+
+		if (!currencyBalance?.value && currencyBalance?.value !== 0n) {
+			return true;
+		}
+
+		try {
+			const feeValue = BigInt(selectedFeeOption.value);
+			return currencyBalance.value === 0n || currencyBalance.value < feeValue;
+		} catch {
+			return true;
+		}
+	})();
+
+	const handleConfirmFeeOption = () => {
+		if (!selectedFeeOption?.token || !pendingFeeOptionConfirmation?.id) return;
+
+		confirmPendingFeeOption(
+			pendingFeeOptionConfirmation?.id,
+			selectedFeeOption.token.contractAddress || zeroAddress,
+		);
+
+		setFeeOptionsConfirmed(true);
+	};
+
+	return {
+		selectedFeeOption$,
+		selectedFeeOption,
+		pendingFeeOptionConfirmation,
+		currencyBalance,
+		currencyBalanceLoading,
+		insufficientBalance,
+		feeOptionsConfirmed,
+		handleConfirmFeeOption,
+	};
+};
+
+export default useWaasFeeOptionManager;

package/src/react/ui/modals/_internal/components/switchChainModal/__tests__/SwitchChainModal.test.tsx

@@ -0,0 +1,113 @@
+import {
+	fireEvent,
+	render,
+	renderHook,
+	screen,
+	wagmiConfig,
+	waitFor,
+} from '@test';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { useChainId } from 'wagmi';
+import SwitchChainModal, { useSwitchChainModal } from '../index';
+import { switchChainModal$ } from '../store';
+
+const chainToSwitchTo = wagmiConfig.chains[1];
+
+describe('SwitchChainModal', () => {
+	beforeEach(() => {
+		switchChainModal$.state.isSwitching.set(false);
+		switchChainModal$.state.chainIdToSwitchTo.set(undefined);
+		switchChainModal$.state.onError.set(undefined);
+		switchChainModal$.state.onSuccess.set(undefined);
+		switchChainModal$.state.onClose.set(undefined);
+	});
+
+	test('opens switch chain modal with correct chain', async () => {
+		const { result } = renderHook(() => useSwitchChainModal());
+
+		result.current.show({ chainIdToSwitchTo: chainToSwitchTo.id });
+		render(<SwitchChainModal />);
+
+		await waitFor(() => {
+			const titleElement = screen.getByText('Wrong network');
+			expect(titleElement).toBeInTheDocument();
+		});
+
+		const titleElement = await screen.findByText('Wrong network');
+		expect(titleElement).toBeInTheDocument();
+
+		const messageElement = await screen.findByText(
+			`You need to switch to ${chainToSwitchTo.name} network before completing the transaction`,
+		);
+		expect(messageElement).toBeInTheDocument();
+
+		const buttonElement = await screen.findByRole('button', {
+			name: /switch network/i,
+		});
+		expect(buttonElement).toBeInTheDocument();
+	});
+
+	test('closes switch chain modal using close callback', async () => {
+		const { result } = renderHook(() => useSwitchChainModal());
+
+		result.current.show({ chainIdToSwitchTo: chainToSwitchTo.id });
+		render(<SwitchChainModal />);
+
+		result.current.close();
+
+		const titleElement = screen.queryByText('Wrong network');
+		await waitFor(() => {
+			expect(titleElement).not.toBeInTheDocument();
+		});
+	});
+
+	test('clicking Switch Network button triggers chain switch', async () => {
+		render(<SwitchChainModal />);
+		const { show } = useSwitchChainModal();
+
+		show({ chainIdToSwitchTo: chainToSwitchTo.id });
+
+		const switchButton = await screen.findByRole('button', {
+			name: /switch network/i,
+		});
+		expect(switchButton).toBeInTheDocument();
+
+		fireEvent.click(switchButton);
+
+		await waitFor(() => {
+			const chainId = renderHook(() => useChainId()).result.current;
+			expect(chainId).toBe(chainToSwitchTo.id);
+		});
+	});
+
+	test('shows spinner while switching chain', async () => {
+		switchChainModal$.state.isSwitching.set(true);
+		switchChainModal$.state.chainIdToSwitchTo.set(chainToSwitchTo.id);
+
+		render(<SwitchChainModal />);
+
+		const spinner = screen.getByTestId('switch-chain-spinner');
+		expect(spinner).toBeInTheDocument();
+	});
+
+	test('shows error message when chain switch fails', async () => {
+		const mockOnError = vi.fn();
+		const { result } = renderHook(() => useSwitchChainModal());
+
+		result.current.show({
+			// @ts-expect-error - invalid chain id to trigger error
+			chainIdToSwitchTo: 'invalid-chain-id',
+			onError: mockOnError,
+		});
+		render(<SwitchChainModal />);
+
+		const button = await screen.findByRole('button', {
+			name: /switch network/i,
+		});
+		fireEvent.click(button);
+
+		await waitFor(() => {
+			expect(mockOnError).toHaveBeenCalledOnce();
+		});
+	});
+});

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

@@ -0,0 +1,122 @@
+'use client';
+
+import { Button, Modal, Spinner, Text } from '@0xsequence/design-system';
+import { observer } from '@legendapp/state/react';
+import type { SwitchChainError } from 'viem';
+import { useSwitchChain } from 'wagmi';
+import { getPresentableChainName } from '../../../../../../utils/network';
+import AlertMessage from '../alertMessage';
+import { MODAL_OVERLAY_PROPS } from '../consts';
+import { switchChainModal$ } from './store';
+
+export type ShowSwitchChainModalArgs = {
+	chainIdToSwitchTo: number;
+	onSuccess?: () => void;
+	onError?: (error: SwitchChainError) => void;
+	onClose?: () => void;
+};
+
+export const useSwitchChainModal = () => {
+	return {
+		show: (args: ShowSwitchChainModalArgs) => switchChainModal$.open(args),
+		close: () => switchChainModal$.delete(),
+		isSwitching$: switchChainModal$.state.isSwitching,
+	};
+};
+
+const SwitchChainModal = observer(() => {
+	const chainIdToSwitchTo = switchChainModal$.state.chainIdToSwitchTo.get();
+	const isSwitching$ = switchChainModal$.state.isSwitching;
+	const chainName = chainIdToSwitchTo
+		? getPresentableChainName(chainIdToSwitchTo)
+		: '';
+	const { switchChainAsync } = useSwitchChain();
+
+	async function handleSwitchChain() {
+		isSwitching$.set(true);
+
+		try {
+			if (!chainIdToSwitchTo) return;
+			await switchChainAsync({ chainId: Number(chainIdToSwitchTo) });
+
+			if (
+				switchChainModal$.state.onSuccess.get() &&
+				typeof switchChainModal$.state.onSuccess.get() === 'function'
+			) {
+				switchChainModal$.state.onSuccess();
+			}
+
+			switchChainModal$.delete();
+		} catch (error) {
+			if (
+				error instanceof Error &&
+				switchChainModal$.state.onError.get() &&
+				typeof switchChainModal$.state.onError.get() === 'function'
+			) {
+				switchChainModal$.state.onError.get()?.(error as SwitchChainError);
+			}
+		} finally {
+			isSwitching$.set(false);
+		}
+	}
+
+	const handleClose = () => {
+		if (
+			switchChainModal$.state.onClose &&
+			typeof switchChainModal$.state.onClose === 'function'
+		) {
+			switchChainModal$.state.onClose();
+		}
+		switchChainModal$.delete();
+	};
+
+	if (!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">
+					Wrong network
+				</Text>
+
+				<AlertMessage
+					type="warning"
+					message={`You need to switch to ${chainName} network before completing the transaction`}
+				/>
+
+				<Button
+					className={`${
+						isSwitching$.get()
+							? 'flex w-[147px] items-center justify-center [&>div]:justify-center'
+							: 'w-[147px]'
+					} flex justify-self-end`}
+					name="switch-chain"
+					id="switch-chain-button"
+					size="sm"
+					label={
+						isSwitching$.get() ? (
+							<div data-testid="switch-chain-spinner">
+								<Spinner className="spinner" />
+							</div>
+						) : (
+							'Switch Network'
+						)
+					}
+					variant="primary"
+					pending={isSwitching$.get()}
+					shape="square"
+					onClick={handleSwitchChain}
+					data-testid="switch-chain-button"
+				/>
+			</div>
+		</Modal>
+	);
+});
+
+export default SwitchChainModal;

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

@@ -0,0 +1,42 @@
+import { observable } from '@legendapp/state';
+import type { SwitchChainError } from 'viem';
+import type { ShowSwitchChainModalArgs } from '.';
+
+export interface SwitchChainModalState {
+	isOpen: boolean;
+	open: (args: ShowSwitchChainModalArgs) => void;
+	close: () => void;
+	state: {
+		chainIdToSwitchTo: number | undefined;
+		isSwitching: boolean;
+		onSuccess: (() => void) | undefined;
+		onError: undefined | ((error: SwitchChainError) => void);
+		onClose: (() => void) | undefined;
+	};
+}
+
+export const initialState: SwitchChainModalState = {
+	isOpen: false,
+	open: ({ chainIdToSwitchTo, onError, onSuccess, onClose }) => {
+		switchChainModal$.state.set({
+			...switchChainModal$.state.get(),
+			chainIdToSwitchTo,
+			onError,
+			onSuccess,
+			onClose,
+		});
+		switchChainModal$.isOpen.set(true);
+	},
+	close: () => {
+		switchChainModal$.isOpen.set(false);
+	},
+	state: {
+		chainIdToSwitchTo: undefined,
+		onError: undefined,
+		onSuccess: undefined,
+		onClose: undefined,
+		isSwitching: false,
+	},
+};
+
+export const switchChainModal$ = observable(initialState);

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

@@ -0,0 +1,29 @@
+'use client';
+
+import { Text } from '@0xsequence/design-system';
+import { formatDistanceToNow } from 'date-fns';
+import { useEffect, useState } from 'react';
+
+type TimeAgoProps = {
+	date: Date;
+};
+
+export default function TimeAgo({ date }: TimeAgoProps) {
+	const [timeAgo, setTimeAgo] = useState<string>('');
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setTimeAgo(formatDistanceToNow(date));
+		}, 1000);
+
+		return () => clearInterval(interval);
+	}, [date]);
+
+	return (
+		<div className="flex grow items-center justify-end">
+			<Text className="text-sm" color="text50">
+				{timeAgo}
+			</Text>
+		</div>
+	);
+}

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

@@ -0,0 +1,62 @@
+'use client';
+
+import { Image, Skeleton, Text } from '@0xsequence/design-system';
+import type { Hex } from 'viem';
+import { useCollectible } from '../../../../../hooks';
+import ChessTileImage from '../../../../images/chess-tile.png';
+
+type TokenPreviewProps = {
+	collectionName?: string;
+	collectionAddress: Hex;
+	collectibleId: string;
+	chainId: number;
+};
+
+export default function TokenPreview({
+	collectionName,
+	collectionAddress,
+	collectibleId,
+	chainId,
+}: TokenPreviewProps) {
+	const { data: collectable, isLoading: collectibleLoading } = useCollectible({
+		chainId: chainId,
+		collectionAddress: collectionAddress,
+		collectibleId,
+	});
+
+	if (collectibleLoading) {
+		return (
+			<div className="flex w-full items-center gap-3">
+				<Skeleton className="h-9 w-9 rounded-sm" />
+				<div className="flex grow flex-col gap-1">
+					<Skeleton className="h-3 w-1/3" />
+					<Skeleton className="h-3 w-1/2" />
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex w-full items-center">
+			<Image
+				className="h-9 w-9 rounded-sm"
+				src={collectable?.image || ChessTileImage}
+				alt={collectable?.name}
+				style={{ objectFit: 'cover' }}
+			/>
+			<div className="ml-3 flex flex-col">
+				<Text className="font-body font-medium text-xs" color={'text80'}>
+					{collectionName}
+				</Text>
+
+				<Text
+					className="font-body font-bold text-xs"
+					fontWeight={'bold'}
+					color={'text100'}
+				>
+					{collectable?.name}
+				</Text>
+			</div>
+		</div>
+	);
+}