@0xsequence/marketplace-sdk 1.0.0 → 1.1.1

package/src/react/ui/components/marketplace-collectible-card/Footer.tsx

@@ -1,238 +0,0 @@
-'use client';
-
-import {
-	ChevronLeftIcon,
-	ChevronRightIcon,
-	cn,
-	IconButton,
-	Image,
-	Text,
-} from '@0xsequence/design-system';
-import { formatUnits } from 'viem';
-import type { MarketplaceType } from '../../../../types';
-import { ContractType, type Currency, type Order } from '../../../_internal';
-import SvgBellIcon from '../../icons/BellIcon';
-import { formatPriceNumber, getSupplyStatusText } from './utils';
-
-const formatPrice = (amount: string, currency: Currency): React.ReactNode => {
-	const { formattedNumber, isUnderflow, isOverflow } = formatPriceNumber(
-		amount,
-		currency.decimals,
-	);
-	const isFree = amount === '0';
-
-	if (isFree) {
-		return <Text>Free</Text>;
-	}
-
-	if (isUnderflow) {
-		return (
-			<div className="flex items-center">
-				<ChevronLeftIcon className="h-3 w-3 text-text-100" />
-				<Text>{`${formattedNumber} ${currency.symbol}`}</Text>
-			</div>
-		);
-	}
-
-	if (isOverflow) {
-		return (
-			<div className="flex items-center">
-				<ChevronRightIcon className="h-3 w-3 text-text-100" />
-				<Text>{`${formattedNumber} ${currency.symbol}`}</Text>
-			</div>
-		);
-	}
-
-	return (
-		<div className="flex items-center gap-1">
-			<Text>
-				{formattedNumber} {currency.symbol}
-			</Text>
-		</div>
-	);
-};
-
-type FooterProps = {
-	name: string;
-	type?: ContractType;
-	decimals?: number;
-	onOfferClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-	highestOffer?: Order;
-	lowestListingPriceAmount?: string;
-	lowestListingCurrency?: Currency;
-	balance?: string;
-	quantityInitial: string | undefined;
-	quantityRemaining: string | undefined;
-	unlimitedSupply?: boolean;
-	marketplaceType: MarketplaceType;
-	salePriceAmount?: string;
-	salePriceCurrency?: Currency;
-};
-
-export const Footer = ({
-	name,
-	type,
-	decimals,
-	onOfferClick,
-	highestOffer,
-	lowestListingPriceAmount,
-	lowestListingCurrency,
-	balance,
-	quantityInitial,
-	quantityRemaining,
-	unlimitedSupply,
-	marketplaceType,
-	salePriceAmount,
-	salePriceCurrency,
-}: FooterProps) => {
-	const listed = !!lowestListingPriceAmount && !!lowestListingCurrency;
-	const isShop = marketplaceType === 'shop';
-	const isMarketplace = marketplaceType === 'market';
-
-	const displayName = (() => {
-		if (name.length > 15 && highestOffer && !isShop) {
-			return `${name.substring(0, 13)}...`;
-		}
-		if (name.length > 17 && !highestOffer && !isShop) {
-			return `${name.substring(0, 17)}...`;
-		}
-		return name;
-	})();
-
-	return (
-		<div className="relative flex flex-col items-start gap-2 whitespace-nowrap bg-background-primary p-4">
-			<div className="relative flex w-full items-center justify-between">
-				<Text
-					className={cn(
-						'overflow-hidden text-ellipsis text-left font-body font-bold text-sm text-text-100',
-						isShop &&
-							(quantityInitial === undefined ||
-								quantityRemaining === undefined) &&
-							'text-text-50',
-					)}
-				>
-					{displayName || 'Untitled'}
-				</Text>
-
-				{highestOffer && onOfferClick && !isShop && (
-					<IconButton
-						className="absolute top-0 right-0 h-[22px] w-[22px] hover:animate-bell-ring"
-						size="xs"
-						variant="primary"
-						onClick={(e) => {
-							onOfferClick?.(e);
-						}}
-						icon={(props) => <SvgBellIcon {...props} size="xs" />}
-					/>
-				)}
-			</div>
-
-			<div
-				className={cn(
-					'flex items-center gap-1',
-					isShop && !salePriceAmount && 'hidden',
-					isShop && type === ContractType.ERC721 && 'hidden',
-				)}
-			>
-				{((isMarketplace && listed && lowestListingCurrency?.imageUrl) ||
-					(isShop && salePriceCurrency && salePriceCurrency.imageUrl)) && (
-					<Image
-						alt={lowestListingCurrency?.symbol || salePriceCurrency?.symbol}
-						className="h-3 w-3"
-						src={lowestListingCurrency?.imageUrl || salePriceCurrency?.imageUrl}
-						onError={(e) => {
-							e.currentTarget.style.display = 'none';
-						}}
-					/>
-				)}
-
-				<Text
-					className={cn(
-						'text-left font-body font-bold text-sm',
-						listed && isMarketplace ? 'text-text-100' : 'text-text-50',
-						isShop &&
-							salePriceAmount &&
-							salePriceCurrency &&
-							type === ContractType.ERC1155 &&
-							'text-text-100',
-					)}
-				>
-					{listed &&
-						isMarketplace &&
-						formatPrice(lowestListingPriceAmount, lowestListingCurrency)}
-
-					{!listed && isMarketplace && 'Not listed yet'}
-
-					{isShop &&
-						salePriceAmount &&
-						salePriceCurrency &&
-						type === ContractType.ERC1155 &&
-						formatPrice(salePriceAmount, salePriceCurrency)}
-				</Text>
-			</div>
-
-			{isShop && (
-				<SaleDetailsPill
-					quantityRemaining={quantityRemaining}
-					collectionType={type as ContractType}
-					unlimitedSupply={unlimitedSupply}
-				/>
-			)}
-
-			{isShop && !salePriceAmount && <div className="h-5 w-full" />}
-
-			{isMarketplace && (
-				<TokenTypeBalancePill
-					balance={balance}
-					type={type as ContractType}
-					decimals={decimals}
-				/>
-			)}
-		</div>
-	);
-};
-
-const TokenTypeBalancePill = ({
-	balance,
-	type,
-	decimals,
-}: {
-	balance?: string;
-	type: ContractType;
-	decimals?: number;
-}) => {
-	const displayText =
-		type === ContractType.ERC1155
-			? balance
-				? `Owned: ${formatUnits(BigInt(balance), decimals ?? 0)}`
-				: 'ERC-1155'
-			: 'ERC-721';
-
-	return (
-		<Text className="rounded-lg bg-background-secondary px-2 py-1 text-left font-medium text-text-80 text-xs">
-			{displayText}
-		</Text>
-	);
-};
-
-const SaleDetailsPill = ({
-	quantityRemaining,
-	collectionType,
-	unlimitedSupply,
-}: {
-	quantityRemaining: string | undefined;
-	collectionType: ContractType;
-	unlimitedSupply?: boolean;
-}) => {
-	const supplyText = getSupplyStatusText({
-		quantityRemaining,
-		collectionType,
-		unlimitedSupply,
-	});
-
-	return (
-		<Text className="rounded-lg bg-background-secondary px-2 py-1 text-left font-medium text-text-80 text-xs">
-			{supplyText}
-		</Text>
-	);
-};

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

@@ -1,117 +0,0 @@
-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 { switchChainModalStore } from '../store';
-
-const chainToSwitchTo = wagmiConfig.chains[1];
-
-describe('SwitchChainModal', () => {
-	beforeEach(() => {
-		// Reset store to initial state
-		switchChainModalStore.send({ type: 'close' });
-	});
-
-	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 () => {
-		// Open modal and set isSwitching to true
-		switchChainModalStore.send({
-			type: 'open',
-			chainIdToSwitchTo: chainToSwitchTo.id,
-		});
-		switchChainModalStore.send({
-			type: 'setSwitching',
-			isSwitching: true,
-		});
-
-		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

@@ -1,124 +0,0 @@
-'use client';
-
-import { Button, Modal, Spinner, Text } from '@0xsequence/design-system';
-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 {
-	switchChainModalStore,
-	useChainIdToSwitchTo,
-	useIsOpen,
-	useIsSwitching,
-	useOnClose,
-	useOnError,
-	useOnSuccess,
-} from './store';
-
-export type ShowSwitchChainModalArgs = {
-	chainIdToSwitchTo: number;
-	onSuccess?: () => void;
-	onError?: (error: SwitchChainError) => void;
-	onClose?: () => void;
-};
-
-export const useSwitchChainModal = () => {
-	return {
-		show: (args: ShowSwitchChainModalArgs) =>
-			switchChainModalStore.send({ type: 'open', ...args }),
-		close: () => switchChainModalStore.send({ type: 'close' }),
-	};
-};
-
-const SwitchChainModal = () => {
-	const isOpen = useIsOpen();
-	const chainIdToSwitchTo = useChainIdToSwitchTo();
-	const isSwitching = useIsSwitching();
-	const onSuccess = useOnSuccess();
-	const onError = useOnError();
-	const onClose = useOnClose();
-
-	const chainName = chainIdToSwitchTo
-		? getPresentableChainName(chainIdToSwitchTo)
-		: '';
-	const { switchChainAsync } = useSwitchChain();
-
-	async function handleSwitchChain() {
-		switchChainModalStore.send({ type: 'setSwitching', isSwitching: true });
-
-		try {
-			if (!chainIdToSwitchTo) return;
-			await switchChainAsync({ chainId: Number(chainIdToSwitchTo) });
-
-			if (onSuccess && typeof onSuccess === 'function') {
-				onSuccess();
-			}
-
-			switchChainModalStore.send({ type: 'close' });
-		} catch (error) {
-			if (error instanceof Error && onError && typeof onError === 'function') {
-				onError(error as SwitchChainError);
-			}
-		} finally {
-			switchChainModalStore.send({ type: 'setSwitching', isSwitching: false });
-		}
-	}
-
-	const handleClose = () => {
-		if (onClose && typeof onClose === 'function') {
-			onClose();
-		}
-		switchChainModalStore.send({ type: 'close' });
-	};
-
-	if (!isOpen || !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
-							? '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 ? (
-							<div data-testid="switch-chain-spinner">
-								<Spinner className="spinner" />
-							</div>
-						) : (
-							'Switch Network'
-						)
-					}
-					variant="primary"
-					pending={isSwitching}
-					shape="square"
-					onClick={handleSwitchChain}
-					data-testid="switch-chain-button"
-				/>
-			</div>
-		</Modal>
-	);
-};
-
-export default SwitchChainModal;

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

@@ -1,71 +0,0 @@
-import { createStore } from '@xstate/store';
-import { useSelector } from '@xstate/store/react';
-import type { SwitchChainError } from 'viem';
-import type { ShowSwitchChainModalArgs } from '.';
-
-export interface SwitchChainModalState {
-	isOpen: boolean;
-	chainIdToSwitchTo: number | undefined;
-	isSwitching: boolean;
-	onSuccess: (() => void) | undefined;
-	onError: undefined | ((error: SwitchChainError) => void);
-	onClose: (() => void) | undefined;
-}
-
-const initialContext: SwitchChainModalState = {
-	isOpen: false,
-	chainIdToSwitchTo: undefined,
-	isSwitching: false,
-	onSuccess: undefined,
-	onError: undefined,
-	onClose: undefined,
-};
-
-export const switchChainModalStore = createStore({
-	context: initialContext,
-	on: {
-		open: (context, event: ShowSwitchChainModalArgs) => ({
-			...context,
-			isOpen: true,
-			chainIdToSwitchTo: event.chainIdToSwitchTo,
-			onSuccess: event.onSuccess,
-			onError: event.onError,
-			onClose: event.onClose,
-		}),
-		close: (context) => ({
-			...context,
-			isOpen: false,
-			chainIdToSwitchTo: undefined,
-			isSwitching: false,
-			onSuccess: undefined,
-			onError: undefined,
-			onClose: undefined,
-		}),
-		setSwitching: (context, event: { isSwitching: boolean }) => ({
-			...context,
-			isSwitching: event.isSwitching,
-		}),
-	},
-});
-
-// Selector hooks
-export const useIsOpen = () =>
-	useSelector(switchChainModalStore, (state) => state.context.isOpen);
-
-export const useChainIdToSwitchTo = () =>
-	useSelector(
-		switchChainModalStore,
-		(state) => state.context.chainIdToSwitchTo,
-	);
-
-export const useIsSwitching = () =>
-	useSelector(switchChainModalStore, (state) => state.context.isSwitching);
-
-export const useOnSuccess = () =>
-	useSelector(switchChainModalStore, (state) => state.context.onSuccess);
-
-export const useOnError = () =>
-	useSelector(switchChainModalStore, (state) => state.context.onError);
-
-export const useOnClose = () =>
-	useSelector(switchChainModalStore, (state) => state.context.onClose);