@0xsequence/marketplace-sdk 0.0.1

package/src/react/ui/modals/_internal/components/quantityInput/styles.css.ts

@@ -0,0 +1,30 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const quantityInputWrapper = style({
+	display: 'flex',
+	flexDirection: 'column',
+	width: '100%',
+});
+
+globalStyle(`${quantityInputWrapper} > label`, {
+	gap: 2,
+});
+
+globalStyle(`${quantityInputWrapper} > label > div > div`, {
+	height: 36,
+	fontSize: 12,
+	borderRadius: 4,
+	paddingLeft: 12,
+	paddingRight: 0,
+});
+
+globalStyle(
+	`${quantityInputWrapper} > label > div > div:has(:disabled) , ${quantityInputWrapper} > label > div > div:has(:disabled):hover`,
+	{
+		opacity: 1,
+	},
+);
+
+globalStyle(`${quantityInputWrapper} > label > div > div > input`, {
+	fontSize: 12,
+});

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

@@ -0,0 +1,132 @@
+import { Close, Content, Overlay, Portal, Root } from '@radix-ui/react-dialog';
+import { switchChainModal$ } from './store';
+import {
+	closeButton,
+	dialogOverlay,
+	switchChainCta,
+	switchChainModalContent,
+} from './styles.css';
+import {
+	Button,
+	CloseIcon,
+	IconButton,
+	Spinner,
+	Text,
+} from '@0xsequence/design-system';
+import AlertMessage from '../alertMessage';
+import { observer } from '@legendapp/state/react';
+import { useSwitchChain } from 'wagmi';
+import { BaseError } from 'viem';
+import { getPresentableChainName } from '../../../../../../utils/network';
+
+import { UserRejectedRequestError } from 'viem';
+import { SwitchChainNotSupportedError } from 'wagmi';
+import type { SwitchChainMessageCallbacks } from '../../../../../../types/messages';
+
+export type ShowSwitchChainModalArgs = {
+	chainIdToSwitchTo: number;
+	onSwitchChain: () => void;
+	messages?: SwitchChainMessageCallbacks;
+};
+
+export const useSwitchChainModal = () => {
+	return {
+		show: (args: ShowSwitchChainModalArgs) => switchChainModal$.open(args),
+		close: () => switchChainModal$.close(),
+		isSwitching$: switchChainModal$.state.isSwitching,
+	};
+};
+
+const SwitchChainModal = observer(() => {
+	const chainIdToSwitchTo = switchChainModal$.state.chainIdToSwitchTo.get();
+	const isSwitching$ = switchChainModal$.state.isSwitching;
+	const chainName = getPresentableChainName(chainIdToSwitchTo!);
+	const { switchChainAsync } = useSwitchChain();
+	const {
+		onSwitchingNotSupported,
+		onUserRejectedRequest,
+		onUnknownError,
+		onSuccess,
+	}: Partial<SwitchChainMessageCallbacks> =
+		switchChainModal$.state.messages.get() || {};
+
+	async function handleSwitchChain() {
+		isSwitching$.set(true);
+
+		try {
+			await switchChainAsync({ chainId: chainIdToSwitchTo! });
+
+			switchChainModal$.state.onSwitchChain();
+			onSuccess && onSuccess();
+
+			switchChainModal$.close();
+		} catch (error) {
+			if (error instanceof BaseError) {
+				const name = error.name as BaseError['name'];
+
+				switch (name) {
+					case SwitchChainNotSupportedError.name:
+						onSwitchingNotSupported && onSwitchingNotSupported();
+						break;
+					case UserRejectedRequestError.name:
+						onUserRejectedRequest && onUserRejectedRequest();
+						break;
+					default:
+						onUnknownError && onUnknownError(error);
+						break;
+				}
+			} else {
+				onUnknownError && onUnknownError(error);
+			}
+		} finally {
+			isSwitching$.set(false);
+		}
+	}
+
+	return (
+		<Root open={switchChainModal$.isOpen.get()}>
+			<Portal>
+				<Overlay className={dialogOverlay} />
+
+				<Content className={switchChainModalContent}>
+					<Text fontSize="large" fontWeight="bold" color="text100">
+						Wrong network
+					</Text>
+
+					<AlertMessage
+						type="warning"
+						message={`You need to switch to ${chainName} network before completing the transaction`}
+					/>
+
+					<Button
+						name="switch-chain"
+						size="sm"
+						label={isSwitching$.get() ? <Spinner /> : 'Switch Network'}
+						variant="primary"
+						pending={isSwitching$.get()}
+						shape="square"
+						className={
+							isSwitching$.get()
+								? switchChainCta.pending
+								: switchChainCta.default
+						}
+						justifySelf="flex-end"
+						onClick={handleSwitchChain}
+					/>
+
+					<Close
+						onClick={() => {
+							switchChainModal$.delete();
+						}}
+						className={closeButton}
+						asChild
+					>
+						<IconButton size="xs" aria-label="Close modal" icon={CloseIcon} />
+					</Close>
+				</Content>
+			</Portal>
+		</Root>
+	);
+});
+
+export default SwitchChainModal;

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

@@ -0,0 +1,41 @@
+import { observable } from '@legendapp/state';
+import type { ShowSwitchChainModalArgs } from '.';
+import type { SwitchChainMessageCallbacks } from '../../../../../../types/messages';
+
+export interface SwitchChainModalState {
+	isOpen: boolean;
+	open: (args: ShowSwitchChainModalArgs) => void;
+	close: () => void;
+	state: {
+		chainIdToSwitchTo?: number;
+		onSwitchChain?: () => void;
+		isSwitching: boolean;
+		messages?: SwitchChainMessageCallbacks;
+	};
+}
+
+export const initialState: SwitchChainModalState = {
+	isOpen: false,
+	open: ({ chainIdToSwitchTo, onSwitchChain, messages }) => {
+		switchChainModal$.state.set({
+			...switchChainModal$.state.get(),
+			chainIdToSwitchTo,
+			onSwitchChain,
+			messages,
+		});
+		switchChainModal$.isOpen.set(true);
+	},
+	close: () => {
+		switchChainModal$.isOpen.set(false);
+		switchChainModal$.state.set({
+			...initialState.state,
+		});
+	},
+	state: {
+		chainIdToSwitchTo: undefined,
+		onSwitchChain: () => {},
+		isSwitching: false,
+	},
+};
+
+export const switchChainModal$ = observable(initialState);

package/src/react/ui/modals/_internal/components/switchChainModal/styles.css.ts

@@ -0,0 +1,37 @@
+import { dialogContent } from '../../../../styles/index';
+import { atoms } from '@0xsequence/design-system';
+import { style } from '@vanilla-extract/css';
+import { styleVariants } from '@vanilla-extract/css';
+import { globalStyle } from '@vanilla-extract/css';
+
+export { closeButton, dialogOverlay } from '../../../../styles/modal.css';
+
+export const switchChainModalContent = style([
+	dialogContent.wide,
+	atoms({
+		display: 'grid',
+		flexDirection: 'column',
+		gap: '6',
+		padding: '7',
+	}),
+]);
+
+const switchChainCtaBase = style({
+	width: '147px',
+});
+
+export const switchChainCta = styleVariants({
+	default: [switchChainCtaBase],
+	pending: [
+		switchChainCtaBase,
+		{
+			display: 'flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+		},
+	],
+});
+
+globalStyle(`${switchChainCta.pending} > div`, {
+	justifyContent: 'center',
+});

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

@@ -0,0 +1,32 @@
+import { Box, Text } from '@0xsequence/design-system';
+import { formatDistanceToNow } from 'date-fns';
+import { useState, useEffect } 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 (
+		<Box
+			flexGrow="1"
+			display="flex"
+			alignItems="center"
+			justifyContent="flex-end"
+		>
+			<Text color="text50" fontSize="small">
+				{timeAgo}
+			</Text>
+		</Box>
+	);
+}

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

@@ -0,0 +1,58 @@
+import { Box, Image, Skeleton, Text } from '@0xsequence/design-system';
+import { useCollectible } from '@react-hooks/useCollectible';
+import { tokenPreview } from './styles.css';
+
+type TokenPreviewProps = {
+	collectionName?: string;
+	collectionAddress: string;
+	collectibleId: string;
+	chainId: string;
+};
+
+export default function TokenPreview({
+	collectionName,
+	collectionAddress,
+	collectibleId,
+	chainId,
+}: TokenPreviewProps) {
+	const { data: collectable, isLoading: collectibleLoading } = useCollectible({
+		chainId: chainId,
+		collectionAddress: collectionAddress,
+		collectibleId,
+	});
+
+	if (collectibleLoading) {
+		return (
+			<Box display="flex" alignItems="center" gap="3" width="full">
+				<Skeleton width={'9'} height={'9'} borderRadius={'xs'} />
+
+				<Box display="flex" flexGrow="1" gap="1" flexDirection="column">
+					<Skeleton width="1/3" height="3" />
+					<Skeleton width="1/2" height="3" />
+				</Box>
+			</Box>
+		);
+	}
+
+	return (
+		<Box className={tokenPreview}>
+			<Image
+				src={collectable?.image}
+				alt={collectable?.name}
+				width={'9'}
+				height={'9'}
+				borderRadius={'xs'}
+			/>
+
+			<Box display={'flex'} flexDirection={'column'} marginLeft={'3'}>
+				<Text fontSize={'small'} color={'text80'} fontWeight={'medium'}>
+					{collectionName}
+				</Text>
+
+				<Text fontSize={'small'} fontWeight={'bold'} color={'text100'}>
+					{collectable?.name}
+				</Text>
+			</Box>
+		</Box>
+	);
+}

package/src/react/ui/modals/_internal/components/tokenPreview/styles.css.ts

@@ -0,0 +1,11 @@
+import { atoms } from '@0xsequence/design-system';
+import { style } from '@vanilla-extract/css';
+
+export const tokenPreview = style([
+	atoms({
+		display: 'flex',
+		alignItems: 'center',
+		width: 'full',
+		marginX: '4',
+	}),
+]);

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

@@ -0,0 +1,48 @@
+import { truncateMiddle } from '../../../../../../utils';
+import SvgPositiveCircleIcon from '../../../../icons/PositiveCircleIcon';
+import { Box, Spinner, Text } from '@0xsequence/design-system';
+import type { Hex } from 'viem';
+
+type TransactionFooterProps = {
+	transactionHash: Hex;
+	isConfirming: boolean;
+	isConfirmed: boolean;
+	isFailed: boolean;
+};
+
+export default function TransactionFooter({
+	transactionHash,
+	isConfirming,
+	isConfirmed,
+	isFailed,
+}: TransactionFooterProps) {
+	const icon =
+		(isConfirming && <Spinner size="md" />) ||
+		(isConfirmed && <SvgPositiveCircleIcon size="md" />);
+
+	const title =
+		(isConfirming && 'Processing transaction') ||
+		(isConfirmed && 'Transaction complete') ||
+		(isFailed && 'Transaction failed');
+	return (
+		<Box display="flex" alignItems="center">
+			{icon}
+
+			<Text color="text50" fontSize="normal" fontWeight="medium" marginLeft="2">
+				{title}
+			</Text>
+
+			<Text
+				// TODO: Replace "polygonLight" with the actual color from design system
+				color="polygonLight"
+				flexGrow="1"
+				textAlign="right"
+				fontSize="normal"
+				fontWeight="medium"
+				marginLeft="2"
+			>
+				{truncateMiddle(transactionHash, 4, 4)}
+			</Text>
+		</Box>
+	);
+}

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

@@ -0,0 +1,80 @@
+import { Box, NetworkImage, Skeleton, Text } from '@0xsequence/design-system';
+import { useMarketplaceConfig } from '@react-hooks/useMarketplaceConfig';
+import { useRoyaltyPercentage } from '@react-hooks/useRoyaltyPercentage';
+import type { Price } from '@types';
+import { formatUnits } from 'viem';
+
+type TransactionDetailsProps = {
+	collectibleId: string;
+	collectionAddress: string;
+	chainId: string;
+	price?: Price;
+};
+
+//TODO: Move this
+const DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
+
+export default function TransactionDetails({
+	collectibleId,
+	collectionAddress,
+	chainId,
+	price,
+}: TransactionDetailsProps) {
+	const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
+
+	const marketplaceFeePercentage =
+		data?.collections.find(
+			(collection) => collection.collectionAddress === collectionAddress,
+		)?.marketplaceFeePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
+	const { data: royaltyPercentage, isLoading: royaltyPercentageLoading } =
+		useRoyaltyPercentage({
+			chainId,
+			collectionAddress,
+			collectibleId,
+		});
+
+	const priceLoading =
+		!price || marketplaceConfigLoading || royaltyPercentageLoading;
+
+	let formattedAmount =
+		price && formatUnits(BigInt(price.amountRaw), price.currency.decimals);
+
+	if (royaltyPercentage !== undefined && formattedAmount) {
+		formattedAmount = (
+			Number.parseFloat(formattedAmount) -
+			(Number.parseFloat(formattedAmount) * Number(royaltyPercentage)) / 100
+		).toString();
+	}
+
+	if (marketplaceFeePercentage !== undefined && formattedAmount) {
+		formattedAmount = (
+			Number.parseFloat(formattedAmount) -
+			(Number.parseFloat(formattedAmount) * marketplaceFeePercentage) / 100
+		).toString();
+	}
+
+	return (
+		<Box
+			width="full"
+			display={'flex'}
+			justifyContent={'space-between'}
+			alignItems={'center'}
+		>
+			<Text fontSize={'small'} color={'text50'}>
+				Total earnings
+			</Text>
+
+			<Box display="flex" alignItems="center" gap="2">
+				<NetworkImage chainId={Number(chainId)} size="xs" />
+
+				{priceLoading ? (
+					<Skeleton width="16" height={'4'} />
+				) : (
+					<Text fontSize={'small'} color={'text100'}>
+						{formattedAmount} {price.currency.symbol}
+					</Text>
+				)}
+			</Box>
+		</Box>
+	);
+}

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

@@ -0,0 +1,30 @@
+import { Box, NetworkImage, Skeleton, Text } from '@0xsequence/design-system';
+import { formatDistanceToNow } from 'date-fns';
+
+type TransactionHeaderProps = {
+	title: string;
+	chainId: number;
+	date?: Date;
+};
+
+export default function TransactionHeader({
+	title,
+	chainId,
+	date,
+}: TransactionHeaderProps) {
+	return (
+		<Box display="flex" alignItems="center" width="full">
+			<Text fontSize="small" fontWeight="medium" color="text80" marginRight="1">
+				{title}
+			</Text>
+
+			<NetworkImage size="xs" chainId={chainId} />
+
+			{(date && (
+				<Text fontSize="small" color="text50" flexGrow="1" textAlign="right">
+					{formatDistanceToNow(date)} ago
+				</Text>
+			)) || <Skeleton width="8" height="4" />}
+		</Box>
+	);
+}

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

@@ -0,0 +1,27 @@
+export const TRANSACTION_TITLES = {
+	sell: {
+		confirming: 'Selling',
+		confirmed: 'Sold',
+		failed: 'Sale failed',
+	},
+	createListing: {
+		confirming: 'Creating listing',
+		confirmed: 'Listed',
+		failed: 'Listing failed',
+	},
+	createOffer: {
+		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',
+	},
+} as const;

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

@@ -0,0 +1,111 @@
+import { Box, Image, NetworkImage, Text } from '@0xsequence/design-system';
+import type { TokenMetadata } from '@internal';
+import { useCollection } from '@react-hooks/useCollection';
+import TimeAgo from '../timeAgo';
+import { transactionStatusModal$ } from '../transactionStatusModal/store';
+import { observer } from '@legendapp/state/react';
+import { useTransactionPreviewTitle } from './useTransactionPreviewTitle';
+import type { Price } from '@types';
+import { formatUnits } from 'viem';
+
+type TransactionPreviewProps = {
+	price?: Price;
+	collectionAddress: string;
+	chainId: string;
+	collectible: TokenMetadata;
+	isConfirming: boolean;
+	isConfirmed: boolean;
+	isFailed: boolean;
+};
+
+const TransactionPreview = observer(
+	({
+		price,
+		collectionAddress,
+		chainId,
+		collectible,
+		isConfirming,
+		isConfirmed,
+		isFailed,
+	}: TransactionPreviewProps) => {
+		const { type } = transactionStatusModal$.state.get();
+		const title = useTransactionPreviewTitle(
+			{ isConfirmed, isConfirming, isFailed },
+			type,
+		);
+		const { data: collection } = 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;
+
+		return (
+			<Box padding="3" background="backgroundSecondary" borderRadius="md">
+				<Box display="flex" alignItems="center">
+					<Text
+						color="text50"
+						fontSize="small"
+						fontWeight="medium"
+						marginRight="1"
+					>
+						{title}
+					</Text>
+
+					<NetworkImage chainId={Number(chainId)} size="xs" />
+
+					{isConfirming && <TimeAgo date={new Date()} />}
+				</Box>
+
+				<Box display="flex" alignItems="center" marginTop="2">
+					<Image
+						src={collectibleImage}
+						alt={collectibleName}
+						width="9"
+						height="9"
+						borderRadius="xs"
+						marginRight="3"
+					/>
+
+					<Box
+						display="flex"
+						flexDirection="column"
+						alignItems="flex-start"
+						gap="0.5"
+					>
+						<Text color="text80" fontSize="small" fontWeight="medium">
+							{collectibleName}
+						</Text>
+
+						<Text color="text100" fontSize="small">
+							{collectionName}
+						</Text>
+					</Box>
+
+					{price && (
+						<Box
+							flexGrow="1"
+							display="flex"
+							alignItems="center"
+							justifyContent="flex-end"
+							gap="1"
+						>
+							<NetworkImage chainId={Number(chainId)} size="xs" />
+
+							<Text color="text80" fontSize="small" fontWeight="medium">
+								{priceFormatted} {price!.currency.symbol}
+							</Text>
+						</Box>
+					)}
+				</Box>
+			</Box>
+		);
+	},
+);
+
+export default TransactionPreview;

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

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