@0xsequence/marketplace-sdk 1.0.0 → 1.1.1

package/src/react/ui/modals/SuccessfulPurchaseModal/__tests__/Modal.test.tsx

@@ -1,5 +1,6 @@
 import { cleanup, render, screen } from '@test';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { MetadataStatus } from '../../../../_internal/api/marketplace.gen';
 import type { ModalCallbacks } from '../../_internal/types';
 import SuccessfulPurchaseModal, { useSuccessfulPurchaseModal } from '..';
 import { successfulPurchaseModalStore } from '../store';
@@ -23,6 +24,7 @@ describe('SuccessfulPurchaseModal', () => {
 					name: 'Test NFT',
 					image: 'https://test.com/image.png',
 					attributes: [],
+					status: MetadataStatus.AVAILABLE,
 				},
 			],
 			totalPrice: '1.5 ETH',
@@ -47,6 +49,7 @@ describe('SuccessfulPurchaseModal', () => {
 					name: 'Test NFT',
 					image: 'https://test.com/image.png',
 					attributes: [],
+					status: MetadataStatus.AVAILABLE,
 				},
 			],
 			totalPrice: '1.5 ETH',
@@ -73,10 +76,12 @@ describe('SuccessfulPurchaseModal', () => {
 					name: `Test NFT ${index + 1}`,
 					image: `https://test.com/image${index + 1}.png`,
 					attributes: [],
+					status: MetadataStatus.AVAILABLE,
 				})),
 			totalPrice: '5.0 ETH',
 			explorerUrl: 'https://etherscan.io/tx/123',
 			explorerName: 'Etherscan',
+			status: MetadataStatus.AVAILABLE,
 		};
 
 		successfulPurchaseModalStore.send({ type: 'open', ...mockPurchaseData });
@@ -93,11 +98,13 @@ describe('SuccessfulPurchaseModal', () => {
 					name: 'Test NFT',
 					image: 'https://test.com/image.png',
 					attributes: [],
+					status: MetadataStatus.AVAILABLE,
 				},
 			],
 			totalPrice: '1.5 ETH',
 			explorerUrl: 'https://etherscan.io/tx/123',
 			explorerName: 'Etherscan',
+			status: MetadataStatus.AVAILABLE,
 		};
 
 		successfulPurchaseModalStore.send({ type: 'open', ...mockPurchaseData });
@@ -132,11 +139,13 @@ describe('SuccessfulPurchaseModal', () => {
 						name: 'Test NFT',
 						image: 'https://test.com/image.png',
 						attributes: [],
+						status: MetadataStatus.AVAILABLE,
 					},
 				],
 				totalPrice: '1.5 ETH',
 				explorerUrl: 'https://etherscan.io/tx/123',
 				explorerName: 'Etherscan',
+				status: MetadataStatus.AVAILABLE,
 			};
 
 			modal.show(mockPurchaseData);

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

@@ -6,10 +6,10 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { useAccount } from 'wagmi';
 import { ActionModal } from './ActionModal';
 
-const mockShowSwitchChainModal = vi.fn();
-vi.mock('../switchChainModal', () => ({
-	useSwitchChainModal: () => ({
-		show: mockShowSwitchChainModal,
+const mockShowSwitchChainErrorModal = vi.fn();
+vi.mock('../switchChainErrorModal', () => ({
+	useSwitchChainErrorModal: () => ({
+		show: mockShowSwitchChainErrorModal,
 		close: vi.fn(),
 	}),
 }));
@@ -96,11 +96,12 @@ describe('ActionModal', () => {
 			expect(onClick).toHaveBeenCalled();
 		});
 
-		it('should show switch chain modal when chain mismatch', async () => {
+		it('should attempt chain switching when chain mismatch occurs', async () => {
+			const onClick = vi.fn();
 			render(
 				<ActionModal
 					{...defaultProps}
-					ctas={[{ label: 'Test', onClick: vi.fn(), testid: 'test-btn' }]}
+					ctas={[{ label: 'Test', onClick, testid: 'test-btn' }]}
 					chainId={polygon.id}
 				/>,
 			);
@@ -110,10 +111,12 @@ describe('ActionModal', () => {
 				fireEvent.click(button);
 			});
 
-			expect(mockShowSwitchChainModal).toHaveBeenCalledWith({
+			// When there's a chain mismatch, the switch chain error modal should be shown
+			// and onClick should not be called immediately
+			expect(mockShowSwitchChainErrorModal).toHaveBeenCalledWith({
 				chainIdToSwitchTo: polygon.id,
-				onSuccess: expect.any(Function),
 			});
+			expect(onClick).not.toHaveBeenCalled();
 		});
 
 		it('should handle chain switching for WaaS wallets', async () => {
@@ -135,12 +138,20 @@ describe('ActionModal', () => {
 				},
 			);
 
+			// Wait for the account to be connected and initial chainId to be shown
+			await waitFor(() => {
+				expect(screen.getByText('1')).toBeInTheDocument(); // mainnet.id
+			});
+
 			await waitFor(() => {
 				const button = screen.getByTestId('test-btn');
 				fireEvent.click(button);
 			});
 
-			expect(screen.getByText(polygon.id)).toBeInTheDocument();
+			// For WaaS wallets, chain switching should show error modal since mock connector fails
+			expect(mockShowSwitchChainErrorModal).toHaveBeenCalledWith({
+				chainIdToSwitchTo: polygon.id,
+			});
 		});
 	});
 

package/src/react/ui/modals/_internal/components/calendarDropdown/TimeSelector.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { NumericInput, Text, TimeIcon } from '@0xsequence/design-system';
+import { getHours, getMinutes, setHours, setMinutes } from 'date-fns';
+import { useRef, useState } from 'react';
+import { clamp } from '../../../../../_internal/utils';
+
+interface TimeSelectorProps {
+	selectedDate: Date;
+	onTimeChange: (hours: number, minutes: number) => void;
+}
+
+export function TimeSelector({
+	selectedDate,
+	onTimeChange,
+}: TimeSelectorProps) {
+	const minutesRef = useRef<HTMLInputElement>(null);
+	const [draft, setDraft] = useState<{ hours: string; minutes: string } | null>(
+		null,
+	);
+
+	const currentHours = getHours(selectedDate);
+	const currentMinutes = getMinutes(selectedDate);
+
+	const commitChange = () => {
+		if (!draft) return;
+
+		const now = new Date();
+		const parse = (val: string, fallback: number) => {
+			const n = Number.parseInt(val, 10);
+			return Number.isNaN(n) ? fallback : n;
+		};
+
+		let h = clamp(parse(draft.hours, currentHours), 0, 23);
+		let m = clamp(parse(draft.minutes, currentMinutes), 0, 59);
+
+		const newDate = setMinutes(setHours(selectedDate, h), m);
+
+		if (newDate < now) {
+			h = getHours(now);
+			m = getMinutes(now);
+		}
+
+		onTimeChange(h, m);
+		setDraft(null);
+	};
+
+	const handleKeyDown = (
+		e: React.KeyboardEvent<HTMLInputElement>,
+		field: 'hours' | 'minutes',
+	) => {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			if (field === 'hours') {
+				minutesRef.current?.focus();
+			} else {
+				commitChange();
+			}
+		} else if (e.key === 'Escape') {
+			e.preventDefault();
+			setDraft(null);
+			e.currentTarget.blur();
+		}
+	};
+
+	const hours = draft?.hours ?? currentHours.toString().padStart(2, '0');
+	const minutes = draft?.minutes ?? currentMinutes.toString().padStart(2, '0');
+
+	return (
+		<div className="mt-3 flex items-center gap-6 border-border-base border-t pt-3">
+			<TimeIcon color="white" />
+
+			<div className="flex flex-1 items-center justify-between gap-2">
+				<div className="w-16 [&>label]:w-16">
+					<NumericInput
+						className="h-9 [&>input]:text-xs"
+						name="hours"
+						value={hours}
+						onChange={(e) => setDraft({ hours: e.target.value, minutes })}
+						onBlur={commitChange}
+						onKeyDown={(e) => handleKeyDown(e, 'hours')}
+						min={0}
+						max={23}
+						tabIndex={0}
+					/>
+				</div>
+				<Text className="font-medium text-sm text-text-80">:</Text>
+				<div className="w-16 [&>label]:w-16">
+					<NumericInput
+						ref={minutesRef}
+						className="h-9 [&>input]:text-xs"
+						name="minutes"
+						value={minutes}
+						onChange={(e) => setDraft({ hours, minutes: e.target.value })}
+						onBlur={commitChange}
+						onKeyDown={(e) => handleKeyDown(e, 'minutes')}
+						min={0}
+						max={59}
+						tabIndex={0}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -1,6 +1,4 @@
 'use client';
-
-import './overrides.css';
 import {
 	Button,
 	DropdownMenuContent,
@@ -8,10 +6,17 @@ import {
 	DropdownMenuRoot,
 	DropdownMenuTrigger,
 } from '@0xsequence/design-system';
-import { differenceInDays, format, isSameDay, startOfDay } from 'date-fns';
+import {
+	differenceInDays,
+	endOfDay,
+	format,
+	isSameDay,
+	startOfDay,
+} from 'date-fns';
 import SvgCalendarIcon from '../../../../icons/CalendarIcon';
 import Calendar from '../calendar';
 import { PRESET_RANGES, type RangeType } from '../expirationDateSelect';
+import { TimeSelector } from './TimeSelector';
 
 type CalendarDropdownProps = {
 	selectedDate: Date;
@@ -58,6 +63,12 @@ export default function CalendarDropdown({
 }: CalendarDropdownProps) {
 	const matchingPreset = getMatchingPreset(selectedDate);
 
+	const handleTimeChange = (hours: number, minutes: number) => {
+		const newDate = new Date(selectedDate);
+		newDate.setHours(hours, minutes, 0, 0);
+		setSelectedDate(newDate);
+	};
+
 	return (
 		<DropdownMenuRoot open={isOpen} onOpenChange={setIsOpen}>
 			<DropdownMenuTrigger asChild>
@@ -65,7 +76,7 @@ export default function CalendarDropdown({
 					leftIcon={SvgCalendarIcon}
 					className="h-9 flex-1 rounded-sm p-2 font-medium text-xs"
 					variant="base"
-					label={format(selectedDate, 'dd/MM/yyyy HH:mm')}
+					label={format(selectedDate, 'yyyy/MM/dd HH:mm')}
 					shape="square"
 					onClick={() => setIsOpen(!isOpen)}
 				/>
@@ -92,20 +103,42 @@ export default function CalendarDropdown({
 												? 'text-text-100'
 												: 'text-text-50 hover:text-text-80'
 										}`}
+										tabIndex={0}
 									>
 										{preset.label}
 									</Button>
 								);
 							})}
 						</div>
-						<Calendar
-							selectedDate={selectedDate}
-							setSelectedDate={(date) => {
-								setSelectedDate(date);
-								setIsOpen(false);
-							}}
-							mode="single"
-						/>
+
+						<div className="flex flex-col">
+							<Calendar
+								selectedDate={selectedDate}
+								setSelectedDate={(date) => {
+									const newDate = new Date(date);
+									const today = startOfDay(new Date());
+									const selectedDay = startOfDay(newDate);
+
+									// If selecting today, set to end of day. Otherwise preserve current time
+									if (isSameDay(selectedDay, today)) {
+										setSelectedDate(endOfDay(newDate));
+									} else {
+										newDate.setHours(
+											selectedDate.getHours(),
+											selectedDate.getMinutes(),
+											0,
+											0,
+										);
+										setSelectedDate(newDate);
+									}
+								}}
+								mode="single"
+							/>
+							<TimeSelector
+								selectedDate={selectedDate}
+								onTimeChange={handleTimeChange}
+							/>
+						</div>
 					</div>
 				</DropdownMenuContent>
 			</DropdownMenuPortal>

package/src/react/ui/modals/_internal/components/calendarDropdown/overrides.css

@@ -1,4 +1,5 @@
 .rdp-root {
+	width: 100% !important;
 	padding: 0 !important;
 	user-select: none;
 }
@@ -12,6 +13,15 @@
 	justify-content: space-between;
 }
 
+.rdp-caption_label {
+	color: var(--color-text-100) !important;
+}
+
+.rdp-months {
+	width: 100%;
+	max-width: unset !important;
+}
+
 .rdp-month_caption {
 	text-align: center;
 	width: 100%;
@@ -20,6 +30,14 @@
 	font-size: 14px !important;
 }
 
+.rdp-month_grid {
+	width: 100%;
+}
+
+.rdp-month {
+	width: 100%;
+}
+
 .rdp-button_previous {
 	background-color: var(--color-overlay-light) !important;
 	border-radius: 50%;
@@ -48,6 +66,11 @@
 	height: 16px !important;
 }
 
+.rdp-weekdays {
+	display: flex;
+	justify-content: space-between;
+}
+
 .rdp-weekday {
 	padding: 16px 0 !important;
 	font-size: 14px !important;
@@ -55,6 +78,22 @@
 	color: var(--color-text-80) !important;
 }
 
+.rdp-weeks {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.rdp-week {
+	display: flex;
+	justify-content: space-between;
+}
+
+.rdp-day {
+	width: 24px !important;
+	height: 24px !important;
+}
+
 .rdp-day_button {
 	width: 24px !important;
 	height: 24px !important;

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

@@ -3,12 +3,14 @@
 import { Skeleton } from '@0xsequence/design-system';
 import { useEffect } from 'react';
 import type { Address } from 'viem';
-import type { Currency } from '../../../../../_internal';
+import { compareAddress } from '../../../../../../utils';
+import { type Currency, OrderbookKind } from '../../../../../_internal';
 import { useMarketCurrencies } from '../../../../../hooks/data/market/useMarketCurrencies';
 import {
 	CustomSelect,
 	type SelectItem,
 } from '../../../../components/_internals/custom-select/CustomSelect';
+import { getOpenseaCurrencyForChain } from '../../constants/opensea-currencies';
 
 type CurrencyOptionsSelectProps = {
 	collectionAddress: Address;
@@ -17,6 +19,8 @@ type CurrencyOptionsSelectProps = {
 	onCurrencyChange: (currency: Currency) => void;
 	secondCurrencyAsDefault?: boolean;
 	includeNativeCurrency?: boolean;
+	orderbookKind?: OrderbookKind;
+	modalType?: 'listing' | 'offer';
 };
 
 function CurrencyOptionsSelect({
@@ -26,6 +30,8 @@ function CurrencyOptionsSelect({
 	selectedCurrency,
 	onCurrencyChange,
 	includeNativeCurrency,
+	orderbookKind,
+	modalType,
 }: CurrencyOptionsSelectProps) {
 	const { data: currencies, isLoading: currenciesLoading } =
 		useMarketCurrencies({
@@ -34,33 +40,48 @@ function CurrencyOptionsSelect({
 			includeNativeCurrency,
 		});
 
+	// Filter currencies for OpenSea
+	let filteredCurrencies = currencies;
+	if (currencies && orderbookKind === OrderbookKind.opensea && modalType) {
+		const openseaCurrency = getOpenseaCurrencyForChain(chainId, modalType);
+		if (openseaCurrency) {
+			// Filter to only show the OpenSea-supported currency
+			filteredCurrencies = currencies.filter((currency) =>
+				compareAddress(
+					currency.contractAddress,
+					openseaCurrency.address as Address,
+				),
+			);
+		}
+	}
+
 	// set default currency
 	useEffect(() => {
 		if (
-			currencies &&
-			currencies.length > 0 &&
+			filteredCurrencies &&
+			filteredCurrencies.length > 0 &&
 			!selectedCurrency?.contractAddress
 		) {
 			// We dont support native currency listings for any marketplace other than Sequence Marketplace v2
 			// So we need to set the set another currency as the default
-			if (secondCurrencyAsDefault) {
-				onCurrencyChange(currencies[1]);
+			if (secondCurrencyAsDefault && filteredCurrencies.length > 1) {
+				onCurrencyChange(filteredCurrencies[1]);
 			} else {
-				onCurrencyChange(currencies[0]);
+				onCurrencyChange(filteredCurrencies[0]);
 			}
 		}
 	}, [
-		currencies,
+		filteredCurrencies,
 		selectedCurrency?.contractAddress,
 		secondCurrencyAsDefault,
 		onCurrencyChange,
 	]);
 
-	if (!currencies || currenciesLoading || !selectedCurrency?.symbol) {
+	if (!filteredCurrencies || currenciesLoading || !selectedCurrency?.symbol) {
 		return <Skeleton className="mr-3 h-7 w-20 rounded-2xl" />;
 	}
 
-	const options = currencies.map(
+	const options = filteredCurrencies.map(
 		(currency) =>
 			({
 				label: currency.symbol,
@@ -70,7 +91,7 @@ function CurrencyOptionsSelect({
 	);
 
 	const onChange = (value: string) => {
-		const selectedCurrency = currencies.find(
+		const selectedCurrency = filteredCurrencies.find(
 			(currency) => currency.contractAddress === value,
 		);
 		if (selectedCurrency) {

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

@@ -1,17 +1,11 @@
 'use client';
 
 import { Skeleton, Text } from '@0xsequence/design-system';
-import { addDays } from 'date-fns';
+import { addDays, endOfDay } from 'date-fns';
 import { useState } from 'react';
 import { cn } from '../../../../../../utils';
 import CalendarDropdown from '../calendarDropdown';
 
-const setToEndOfDay = (date: Date): Date => {
-	const endOfDay = new Date(date);
-	endOfDay.setHours(23, 59, 59, 999);
-	return endOfDay;
-};
-
 export const PRESET_RANGES = {
 	TODAY: {
 		label: 'Today',
@@ -68,11 +62,26 @@ const ExpirationDateSelect = function ExpirationDateSelect({
 		}
 
 		const baseDate = new Date();
-		const newDate =
+		const targetDate =
 			presetRange.value === 'today'
-				? setToEndOfDay(baseDate)
+				? baseDate
 				: addDays(baseDate, presetRange.offset);
 
+		// For "today", set to end of day. For other presets, preserve current time
+		const newDate =
+			presetRange.value === 'today'
+				? endOfDay(targetDate)
+				: (() => {
+						const preservedTimeDate = new Date(targetDate);
+						preservedTimeDate.setHours(
+							date.getHours(),
+							date.getMinutes(),
+							date.getSeconds(),
+							date.getMilliseconds(),
+						);
+						return preservedTimeDate;
+					})();
+
 		onDateChange(newDate);
 	}
 

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

@@ -4,8 +4,13 @@ import { NumericInput, Text } from '@0xsequence/design-system';
 import { useEffect, useRef, useState } from 'react';
 import { type Address, parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
-import type { Currency, Price } from '../../../../../../types';
+import {
+	type Currency,
+	OrderbookKind,
+	type Price,
+} from '../../../../../../types';
 import { cn } from '../../../../../../utils';
+import { useConvertPriceToUSD } from '../../../../../hooks';
 import { useCurrencyBalance } from '../../../../../hooks/data/tokens/useCurrencyBalance';
 import CurrencyImage from '../currencyImage';
 import CurrencyOptionsSelect from '../currencyOptionsSelect';
@@ -23,6 +28,9 @@ type PriceInputProps = {
 		callback: (state: boolean) => void;
 	};
 	disabled?: boolean;
+	orderbookKind?: OrderbookKind;
+	setOpenseaLowestPriceCriteriaMet?: (state: boolean) => void;
+	modalType?: 'listing' | 'offer';
 };
 
 export default function PriceInput({
@@ -35,6 +43,9 @@ export default function PriceInput({
 	secondCurrencyAsDefault,
 	includeNativeCurrency,
 	disabled,
+	orderbookKind,
+	setOpenseaLowestPriceCriteriaMet,
+	modalType,
 }: PriceInputProps) {
 	const { address: accountAddress } = useAccount();
 	const inputRef = useRef<HTMLInputElement>(null);
@@ -49,6 +60,20 @@ export default function PriceInput({
 		}
 	};
 
+	const { data: conversion, isLoading: isConversionLoading } =
+		useConvertPriceToUSD({
+			chainId,
+			currencyAddress: currencyAddress as Address,
+			amountRaw: priceAmountRaw,
+			query: {
+				enabled:
+					orderbookKind === OrderbookKind.opensea &&
+					!!currencyAddress &&
+					!!priceAmountRaw &&
+					!!setOpenseaLowestPriceCriteriaMet,
+			},
+		});
+
 	useEffect(() => {
 		if (inputRef.current) {
 			inputRef.current.focus();
@@ -68,10 +93,19 @@ export default function PriceInput({
 		!!currencyDecimals &&
 		BigInt(priceAmountRaw) > BigInt(balance?.value || 0n);
 
+	const openseaLowestPriceCriteriaMet =
+		orderbookKind === OrderbookKind.opensea &&
+		!!conversion?.usdAmount &&
+		conversion.usdAmount >= 0.01;
+
 	if (checkBalance?.enabled) {
 		checkBalance.callback(balanceError);
 	}
 
+	if (setOpenseaLowestPriceCriteriaMet) {
+		setOpenseaLowestPriceCriteriaMet(openseaLowestPriceCriteriaMet);
+	}
+
 	const [value, setValue] = useState('0');
 	const prevCurrencyDecimals = useRef(currencyDecimals);
 
@@ -127,10 +161,10 @@ export default function PriceInput({
 				<CurrencyImage price={price} />
 			</div>
 
-			<div className="[&>label>div>div>.rounded-xl]:h-9 [&>label>div>div>.rounded-xl]:rounded-sm [&>label>div>div>.rounded-xl]:px-2 [&>label]:gap-1">
+			<div className="[&>label]:gap-1">
 				<NumericInput
 					ref={inputRef}
-					className="ml-5 w-full text-xs"
+					className="h-9 w-full rounded-sm px-2 [&>input]:pl-5 [&>input]:text-xs"
 					name="price-input"
 					decimals={currencyDecimals}
 					label="Enter price"
@@ -143,6 +177,8 @@ export default function PriceInput({
 							chainId={chainId}
 							secondCurrencyAsDefault={secondCurrencyAsDefault}
 							includeNativeCurrency={includeNativeCurrency}
+							orderbookKind={orderbookKind}
+							modalType={modalType}
 						/>
 					}
 					value={value}
@@ -158,6 +194,20 @@ export default function PriceInput({
 					Insufficient balance
 				</Text>
 			)}
+
+			{!balanceError &&
+				priceAmountRaw !== '0' &&
+				!openseaLowestPriceCriteriaMet &&
+				orderbookKind === OrderbookKind.opensea &&
+				!isConversionLoading &&
+				modalType === 'offer' && (
+					<Text
+						className="-bottom-5 absolute font-body font-medium text-xs"
+						color="negative"
+					>
+						Lowest price must be at least $0.01
+					</Text>
+				)}
 		</div>
 	);
 }