@0xsequence/marketplace-sdk 0.0.1

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

@@ -0,0 +1,59 @@
+'use client';
+
+import { DayPicker, type PropsSingle } from 'react-day-picker';
+import 'react-day-picker/style.css';
+
+export type CalendarProps = React.PropsWithChildren<PropsSingle> & {
+	selectedDate?: Date;
+	setSelectedDate?: (date: Date) => void;
+};
+
+function Calendar({ ...props }: CalendarProps) {
+	const { selectedDate, setSelectedDate } = props;
+
+	return (
+		<DayPicker
+			disabled={{
+				before: new Date(),
+			}}
+			selected={selectedDate as unknown as Date}
+			onDayClick={setSelectedDate}
+			defaultMonth={selectedDate}
+			modifiersStyles={{
+				selected: {
+					color: 'hsl(var(--foreground))',
+					background: 'hsl(var(--primary))',
+					border: 'none',
+				},
+			}}
+			styles={{
+				root: {
+					width: 'max-content',
+					margin: 0,
+					color: 'hsl(var(--foreground))',
+					background: 'hsl(var(--background))',
+					border: `1px solid hsl(var(--border))`,
+					borderRadius: 'var(--radius)',
+					padding: '0.5rem',
+					position: 'relative',
+				},
+				day: {
+					margin: 0,
+					width: '1rem',
+					height: '1rem',
+				},
+				day_button: {
+					margin: 0,
+					width: '1.8rem',
+					height: '1.5rem',
+					padding: 0,
+					border: 'none',
+				},
+			}}
+			{...props}
+		/>
+	);
+}
+Calendar.displayName = 'Calendar';
+
+export default Calendar;

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

@@ -0,0 +1,41 @@
+'use client';
+
+import { Button } from '@0xsequence/design-system';
+import { Content, Portal, Root, Trigger } from '@radix-ui/react-popover';
+import { format } from 'date-fns';
+import SvgCalendarIcon from '../../../../icons/CalendarIcon';
+import Calendar from '../calendar';
+import { dateSelectButton, dateSelectPopoverContent } from './styles.css';
+
+type CalendarPopoverProps = {
+	selectedDate: Date;
+	setSelectedDate: (date: Date) => void;
+};
+
+export default function CalendarPopover({
+	selectedDate,
+	setSelectedDate,
+}: CalendarPopoverProps) {
+	return (
+		<Root>
+			<Trigger asChild>
+				<Button
+					leftIcon={SvgCalendarIcon}
+					className={dateSelectButton}
+					variant="ghost"
+					label={format(selectedDate, 'dd/MM/yyyy HH:mm')}
+					shape="square"
+				/>
+			</Trigger>
+			<Portal>
+				<Content className={dateSelectPopoverContent} sideOffset={5}>
+					<Calendar
+						selectedDate={selectedDate}
+						setSelectedDate={setSelectedDate}
+						mode="single"
+					/>
+				</Content>
+			</Portal>
+		</Root>
+	);
+}

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

@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css';
+
+export const dateSelectButton = style({
+	flex: '3 !important',
+	padding: '10px 8px !important',
+	height: '36px !important',
+	border: '1px solid #4F4F4F !important',
+	borderRadius: '4px !important',
+	fontWeight: '400 !important',
+	fontSize: '12px !important',
+});
+
+export const dateSelectPopoverContent = style({
+	zIndex: 20,
+	pointerEvents: 'all',
+});

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

@@ -0,0 +1,76 @@
+import { Box, Select, Skeleton } from '@0xsequence/design-system';
+import type { ChainId } from '@internal';
+import type { Observable } from '@legendapp/state';
+import { observer } from '@legendapp/state/react';
+import { useCurrencies } from '@react-hooks/useCurrencies';
+import type { Currency } from '@types';
+import { useEffect, useState } from 'react';
+import { currencySelect } from './styles.css';
+
+// TODO: this should be exported from design system
+type SelectOption = {
+	label: string;
+	value: string;
+};
+
+type CurrencyOptionsSelectProps = {
+	collectionAddress: string;
+	chainId: ChainId;
+	$selectedCurrency: Observable<Currency | null | undefined>;
+};
+
+const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
+	chainId,
+	collectionAddress,
+	$selectedCurrency,
+}: CurrencyOptionsSelectProps) {
+	const [value, setValue] = useState<string | null>(null);
+	const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
+		collectionAddress,
+		chainId,
+	});
+
+	useEffect(() => {
+		if (
+			currencies &&
+			currencies.length > 0 &&
+			!$selectedCurrency.contractAddress.get()
+		) {
+			$selectedCurrency.set(currencies[0]);
+		}
+	}, [currencies]);
+
+	if (!currencies || currenciesLoading) {
+		return <Skeleton borderRadius="lg" width="20" height="7" marginRight="3" />;
+	}
+
+	const options = currencies.map(
+		(currency) =>
+			({
+				label: currency.name,
+				value: currency.contractAddress,
+			}) satisfies SelectOption,
+	);
+
+	const onChange = (value: string) => {
+		// biome-ignore lint/style/noNonNullAssertion: This can not be undefined
+		const c = currencies.find(
+			(currency) => currency.contractAddress === value,
+		)!;
+		setValue(value);
+		$selectedCurrency.set(c);
+	};
+
+	return (
+		<Box className={currencySelect}>
+			<Select
+				name="currencies"
+				value={value || options?.[0]?.value}
+				onValueChange={(value) => onChange(value)}
+				options={options}
+			/>
+		</Box>
+	);
+});
+
+export default CurrencyOptionsSelect;

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

@@ -0,0 +1,33 @@
+import { atoms } from '@0xsequence/design-system';
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const currencySelect = style([
+	atoms({
+		height: 'full',
+	}),
+]);
+
+globalStyle(`${currencySelect} > label`, {
+	height: '100%',
+});
+
+globalStyle(`${currencySelect} > label > button`, {
+	background: '#FFFFFF1A',
+	borderRadius: 30,
+	padding: '12px',
+	marginRight: 8,
+	marginTop: 4,
+	marginBottom: 4,
+	height: 28,
+	border: 'none',
+	boxShadow: 'none',
+});
+
+globalStyle(`${currencySelect} > label > button > span`, {
+	fontSize: 10,
+});
+
+globalStyle(`${currencySelect} > label > button > span > svg`, {
+	width: 16,
+	height: 16,
+});

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

@@ -0,0 +1,127 @@
+import { useState } from 'react';
+
+import { Box, Select, Text } from '@0xsequence/design-system';
+import type { Observable } from '@legendapp/state';
+import { observer } from '@legendapp/state/react';
+import { addDays, isSameDay } from 'date-fns';
+import CalendarPopover from '../calendarPopover';
+import { rangeSelect } from './styles.css';
+
+export const PRESET_RANGES = {
+	TODAY: {
+		label: 'Today',
+		value: 'today',
+		offset: 0,
+	},
+	TOMORROW: {
+		label: 'Tomorrow',
+		value: 'tomorrow',
+		offset: 1,
+	},
+	IN_3_DAYS: {
+		label: 'In 3 days',
+		value: '3_days',
+		offset: 3,
+	},
+	ONE_WEEK: {
+		label: '1 week',
+		value: '1_week',
+		offset: 7,
+	},
+	ONE_MONTH: {
+		label: '1 month',
+		value: '1_month',
+		offset: 30,
+	},
+} as const;
+
+export type rangeType =
+	(typeof PRESET_RANGES)[keyof typeof PRESET_RANGES]['value'];
+
+type ExpirationDateSelectProps = {
+	className?: string;
+	$date: Observable<Date>;
+};
+
+const ExpirationDateSelect = observer(function ExpirationDateSelect({
+	className,
+	$date,
+}: ExpirationDateSelectProps) {
+	const [_, setRange] = useState<rangeType>('1_week');
+	function handleSelectPresetRange(range: rangeType) {
+		setRange(range);
+
+		const presetRange = Object.values(PRESET_RANGES).find(
+			(preset) => preset.value === range,
+		);
+
+		if (!presetRange) {
+			return;
+		}
+
+		const newDate = addDays(new Date(), presetRange.offset);
+
+		$date.set(newDate);
+	}
+
+	function handleDateValueChange(date: Date) {
+		const presetRange = Object.values(PRESET_RANGES).find((preset) =>
+			isSameDay(new Date(date), addDays(new Date(), preset.offset)),
+		);
+
+		if (presetRange) {
+			setRange(presetRange.value);
+		}
+
+		$date.set(date);
+	}
+
+	return (
+		<Box width="full" position="relative">
+			<Text
+				fontSize={'small'}
+				fontWeight={'medium'}
+				textAlign={'left'}
+				width={'full'}
+				color={'text100'}
+			>
+				Set expiry
+			</Text>
+
+			<Box
+				className={className}
+				width={'full'}
+				display={'flex'}
+				alignItems={'center'}
+				gap={'2'}
+				marginTop={'0.5'}
+			>
+				<Box className={rangeSelect} position={'absolute'} right={'2'}>
+					<Select
+						name="expirationDate"
+						options={Object.values(PRESET_RANGES)}
+						defaultValue={undefined}
+						value={
+							Object.values(PRESET_RANGES).find((preset) =>
+								isSameDay(
+									new Date($date.get()),
+									addDays(new Date(), preset.offset),
+								),
+							)?.value
+						}
+						onValueChange={(value) =>
+							handleSelectPresetRange(value as rangeType)
+						}
+					/>
+				</Box>
+
+				<CalendarPopover
+					selectedDate={$date.get()}
+					setSelectedDate={(date) => handleDateValueChange(date)}
+				/>
+			</Box>
+		</Box>
+	);
+});
+
+export default ExpirationDateSelect;

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

@@ -0,0 +1,25 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const rangeSelect = style({
+	flex: 2,
+});
+
+globalStyle(`${rangeSelect} > label > button`, {
+	background: '#FFFFFF1A',
+	borderRadius: 30,
+	padding: '12px',
+	marginTop: 4,
+	marginBottom: 4,
+	height: 28,
+	border: 'none',
+	boxShadow: 'none',
+});
+
+globalStyle(`${rangeSelect} > label > button > span`, {
+	fontSize: 10,
+});
+
+globalStyle(`${rangeSelect} > label > button > span > svg`, {
+	width: 16,
+	height: 16,
+});

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

@@ -0,0 +1,54 @@
+import { Text } from '@0xsequence/design-system';
+import type { Price } from '@types';
+import { calculatePriceDifferencePercentage } from '../../../../../../utils';
+import { useLowestListing } from '@react-hooks/useLowestListing';
+
+export default function FloorPriceText({
+	chainId,
+	collectionAddress,
+	tokenId,
+	price,
+}: {
+	chainId: string;
+	collectionAddress: string;
+	tokenId: string;
+	price: Price;
+}) {
+	const { data: listing, isLoading: listingLoading } = useLowestListing({
+		tokenId: tokenId,
+		chainId,
+		collectionAddress,
+		filters: {
+			currencies: [price.currency.contractAddress],
+		},
+	});
+
+	const floorPriceRaw = listing?.order?.priceAmount;
+
+	if (!floorPriceRaw || listingLoading || price.amountRaw === '0') {
+		return null;
+	}
+
+	const floorPriceDifference = calculatePriceDifferencePercentage({
+		inputPriceRaw: BigInt(price.amountRaw),
+		basePriceRaw: BigInt(floorPriceRaw),
+		decimals: price.currency.decimals,
+	});
+
+	const floorPriceDifferenceText =
+		floorPriceRaw === price.amountRaw
+			? 'Same as floor price'
+			: `${floorPriceDifference}% ${floorPriceRaw > price.amountRaw ? 'below' : 'above'} floor price`;
+
+	return (
+		<Text
+			fontSize={'small'}
+			fontWeight={'medium'}
+			textAlign={'left'}
+			width={'full'}
+			color={'text50'}
+		>
+			{floorPriceDifferenceText}
+		</Text>
+	);
+}

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

@@ -0,0 +1,72 @@
+import { Box, NumericInput, TokenImage } from '@0xsequence/design-system';
+import type { Observable } from '@legendapp/state';
+import { observer } from '@legendapp/state/react';
+import type { Price } from '@types';
+import { useState } from 'react';
+import CurrencyOptionsSelect from '../currencyOptionsSelect';
+import { priceInputWrapper } from './styles.css';
+import { parseUnits } from 'viem';
+
+type PriceInputProps = {
+	collectionAddress: string;
+	chainId: string;
+	$listingPrice: Observable<Price | undefined>;
+	error?: string;
+};
+
+const PriceInput = observer(function PriceInput({
+	chainId,
+	collectionAddress,
+	$listingPrice,
+	error,
+}: PriceInputProps) {
+	const [inputPrice, setInputPrice] = useState('');
+	const changeListingPrice = (value: string) => {
+		setInputPrice(value);
+		const parsedAmount = parseUnits(
+			value,
+			Number($listingPrice.currency.decimals.get()),
+		);
+		$listingPrice.amountRaw.set(parsedAmount.toString());
+	};
+
+	return (
+		<Box className={priceInputWrapper} position="relative">
+			<Box
+				position="absolute"
+				bottom="3"
+				left="2"
+				display="flex"
+				alignItems="center"
+			>
+				<TokenImage src={$listingPrice.currency.imageUrl.get()} size="xs" />
+			</Box>
+
+			<NumericInput
+				name="listingPrice"
+				decimals={$listingPrice?.currency.decimals.get()}
+				label="Enter price"
+				labelLocation="top"
+				placeholder="0.00"
+				controls={
+					<CurrencyOptionsSelect
+						$selectedCurrency={$listingPrice?.currency}
+						collectionAddress={collectionAddress}
+						chainId={chainId}
+					/>
+				}
+				numeric={true}
+				value={inputPrice}
+				onChange={(event) => changeListingPrice(event.target.value)}
+				width="full"
+			/>
+			{error && (
+				<Box color="negative" fontSize="small">
+					{error}
+				</Box>
+			)}
+		</Box>
+	);
+});
+
+export default PriceInput;

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

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

package/src/react/ui/modals/_internal/components/priceInput/types.ts

@@ -0,0 +1,4 @@
+export type SelectedCurrency = {
+	symbol: string;
+	decimals: number;
+};

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

@@ -0,0 +1,168 @@
+import { Box, IconButton, NumericInput } from '@0xsequence/design-system';
+import type { Observable } from '@legendapp/state';
+import { useCollectible } from '@react-hooks/useCollectible';
+import SvgMinusIcon from '../../../../icons/MinusIcon';
+import SvgPlusIcon from '../../../../icons/PlusIcon';
+import { quantityInputWrapper } from './styles.css';
+
+type QuantityInputProps = {
+	$quantity: Observable<string>;
+	chainId: string;
+	collectionAddress: string;
+	collectibleId: string;
+};
+
+export default function QuantityInput({
+	$quantity,
+	chainId,
+	collectionAddress,
+	collectibleId,
+}: QuantityInputProps) {
+	const { data: collectable, isLoading: collectableLoading } = useCollectible({
+		chainId,
+		collectionAddress,
+		collectibleId,
+	});
+
+	const quantityDecimals =
+		collectable && ((collectable.decimals || 0) as number | undefined);
+
+	function handleChangeQuantity(value: string) {
+		if (!isValidInput(value)) return;
+
+		const formattedValue = formatQuantity(value);
+		if (formattedValue !== null) {
+			$quantity.set(formattedValue);
+		}
+	}
+
+	function handleIncrement() {
+		if (!isValidInput()) return;
+
+		const newQuantity = incrementQuantity();
+		if (newQuantity !== null) {
+			$quantity.set(newQuantity);
+		}
+	}
+
+	function handleDecrement() {
+		if (!isValidInput()) return;
+
+		const newQuantity = decrementQuantity();
+		if (newQuantity !== null) {
+			$quantity.set(newQuantity);
+		}
+	}
+
+	function isValidInput(value?: string): boolean {
+		return (
+			collectable !== undefined &&
+			quantityDecimals !== undefined &&
+			(value === undefined || value !== '')
+		);
+	}
+
+	function formatQuantity(value: string): string | null {
+		if (quantityDecimals === 0 && value.includes('.')) {
+			return null;
+		}
+
+		if (quantityDecimals && quantityDecimals > 0) {
+			const decimalIndex = value.indexOf('.');
+			if (
+				decimalIndex !== -1 &&
+				value.length - decimalIndex > quantityDecimals + 1
+			) {
+				return null;
+			}
+		}
+
+		return value;
+	}
+
+	const quantity = $quantity.get();
+
+	function incrementQuantity(): string | null {
+		if (!isValidInput()) return null;
+
+		if (!quantity) {
+			return quantityDecimals === 0
+				? '1'
+				: `1.${'0'.repeat(quantityDecimals!)}`;
+		}
+
+		const newValue =
+			quantityDecimals === 0
+				? (Number.parseInt(quantity) + 1).toString()
+				: (Number.parseFloat(quantity) + 1).toFixed(quantityDecimals);
+
+		return newValue;
+	}
+
+	function decrementQuantity(): string | null {
+		if (!quantity) {
+			return '1';
+		}
+
+		const newValue = Number.parseFloat(quantity) - 1;
+		if (newValue < 0) {
+			return null;
+		}
+
+		return quantityDecimals === 0
+			? newValue.toString()
+			: newValue.toFixed(quantityDecimals);
+	}
+
+	function getPlaceholder(decimals: number) {
+		if (decimals === 0) {
+			return '0';
+		} else {
+			return '0.' + '0'.repeat(decimals);
+		}
+	}
+
+	if (collectableLoading) {
+		return null;
+	}
+
+	return (
+		<Box className={quantityInputWrapper}>
+			<NumericInput
+				name={'quantity'}
+				decimals={quantityDecimals || 0}
+				paddingLeft={'1'}
+				label={'Enter quantity'}
+				labelLocation="top"
+				placeholder={getPlaceholder(quantityDecimals || 0)}
+				controls={
+					<Box
+						display={'flex'}
+						alignItems={'center'}
+						gap={'1'}
+						marginRight={'2'}
+					>
+						<IconButton
+							disabled={Number.parseFloat(quantity) === 0 || !quantity}
+							onClick={handleDecrement}
+							background={'buttonGlass'}
+							size="xs"
+							icon={SvgMinusIcon}
+						/>
+
+						<IconButton
+							onClick={handleIncrement}
+							background={'buttonGlass'}
+							size="xs"
+							icon={SvgPlusIcon}
+						/>
+					</Box>
+				}
+				numeric={true}
+				value={$quantity.get()}
+				onChange={(e) => handleChangeQuantity(e.target.value)}
+				width={'full'}
+			/>
+		</Box>
+	);
+}