@0xsequence/marketplace-sdk 1.1.0 → 1.2.0

package/src/react/ui/modals/MakeOfferModal/hooks/useGetTokenApproval.tsx

@@ -6,6 +6,7 @@ import {
 	type CreateReq,
 	type GenerateOfferTransactionArgs,
 	getMarketplaceClient,
+	OfferType,
 	type OrderbookKind,
 	type QueryArg,
 	StepType,
@@ -42,7 +43,7 @@ export const useGetTokenApprovalData = (
 
 	const isEnabled = address && params.query?.enabled !== false;
 
-	const { data, isLoading, isSuccess } = useQuery({
+	const { data, isLoading, isSuccess, isError, error } = useQuery({
 		queryKey: ['token-approval-data', params.currencyAddress],
 		queryFn: isEnabled
 			? async () => {
@@ -54,6 +55,8 @@ export const useGetTokenApprovalData = (
 						contractType: params.contractType,
 						orderbook: params.orderbook,
 						offer,
+						additionalFees: [],
+						offerType: OfferType.item,
 					} satisfies GenerateOfferTransactionArgs;
 					const steps = await marketplaceClient
 						.generateOfferTransaction(args)
@@ -81,5 +84,7 @@ export const useGetTokenApprovalData = (
 		data,
 		isLoading,
 		isSuccess,
+		isError,
+		error,
 	};
 };

package/src/react/ui/modals/MakeOfferModal/hooks/useMakeOffer.tsx

@@ -4,10 +4,8 @@ import type { Observable } from '@legendapp/state';
 import { useEffect } from 'react';
 import type { Address } from 'viem';
 import { OrderbookKind } from '../../../../../types';
-import type { MarketCollection } from '../../../../../types/new-marketplace-types';
 import type { TransactionSteps } from '../../../../_internal';
 import type { OfferInput } from '../../../../_internal/types';
-import { useMarketplaceConfig } from '../../../../hooks';
 import type { ModalCallbacks } from '../../_internal/types';
 import { useGetTokenApprovalData } from './useGetTokenApproval';
 import { useTransactionSteps } from './useTransactionSteps';
@@ -31,30 +29,19 @@ export const useMakeOffer = ({
 	closeMainModal,
 	steps$,
 }: UseMakeOfferArgs) => {
-	const { data: marketplaceConfig, isLoading: marketplaceIsLoading } =
-		useMarketplaceConfig();
-
-	const collectionConfig = marketplaceConfig?.market.collections.find(
-		(c) => c.itemsAddress === collectionAddress,
-	) as MarketCollection;
-
-	orderbookKind =
-		orderbookKind ??
-		collectionConfig?.destinationMarketplace ??
-		OrderbookKind.sequence_marketplace_v2;
-
-	const { data: tokenApproval, isLoading: tokenApprovalIsLoading } =
-		useGetTokenApprovalData({
-			chainId,
-			tokenId: offerInput.offer.tokenId,
-			collectionAddress,
-			currencyAddress: offerInput.offer.currencyAddress,
-			contractType: offerInput.contractType,
-			orderbook: orderbookKind,
-			query: {
-				enabled: !marketplaceIsLoading,
-			},
-		});
+	const {
+		data: tokenApproval,
+		isLoading: tokenApprovalIsLoading,
+		isError,
+		error,
+	} = useGetTokenApprovalData({
+		chainId,
+		tokenId: offerInput.offer.tokenId,
+		collectionAddress,
+		currencyAddress: offerInput.offer.currencyAddress,
+		contractType: offerInput.contractType,
+		orderbook: orderbookKind || OrderbookKind.sequence_marketplace_v2,
+	});
 
 	useEffect(() => {
 		if (!tokenApprovalIsLoading) {
@@ -78,5 +65,7 @@ export const useMakeOffer = ({
 		makeOffer,
 		tokenApprovalStepExists: tokenApproval?.step !== null,
 		tokenApprovalIsLoading,
+		isError,
+		error,
 	};
 };

package/src/react/ui/modals/MakeOfferModal/hooks/useTransactionSteps.tsx

@@ -6,6 +6,7 @@ import { getSequenceMarketplaceRequestId } from '../../../../../utils/getSequenc
 import {
 	balanceQueries,
 	collectableKeys,
+	OfferType,
 	StepType,
 	type TransactionSteps,
 } from '../../../../_internal';
@@ -77,6 +78,8 @@ export const useTransactionSteps = ({
 					...offerInput.offer,
 					expiry: new Date(Number(offerInput.offer.expiry) * 1000),
 				},
+				additionalFees: [],
+				offerType: OfferType.item,
 			});
 
 			return steps;

package/src/react/ui/modals/SellModal/Modal.tsx

@@ -2,6 +2,7 @@
 
 import { NetworkType } from '@0xsequence/network';
 import { observer, Show } from '@legendapp/state/react';
+import { useState } from 'react';
 import { type Address, parseUnits } from 'viem';
 import type { Price } from '../../../../types';
 import type { FeeOption } from '../../../../types/waas-types';
@@ -10,6 +11,7 @@ import type { MarketplaceKind } from '../../../_internal/api/marketplace.gen';
 import { useCollection } from '../../../hooks';
 import { useConnectorMetadata } from '../../../hooks/config/useConnectorMetadata';
 import { useCurrency } from '../../../hooks/data/market/useCurrency';
+import { ErrorLogBox } from '../../components/_internals/ErrorLogBox';
 import {
 	ActionModal,
 	type ActionModalProps,
@@ -39,6 +41,7 @@ const Modal = observer(() => {
 		chainId,
 		collectionAddress,
 	});
+	const [error, setError] = useState<Error | undefined>(undefined);
 
 	const {
 		data: collection,
@@ -69,7 +72,7 @@ const Modal = observer(() => {
 			selectedFeeOption: selectedFeeOption as FeeOption,
 		});
 
-	const { isLoading, executeApproval, sell } = useSell({
+	const { isLoading, executeApproval, sell, isError } = useSell({
 		collectionAddress,
 		chainId,
 		collectibleId: tokenId,
@@ -94,7 +97,7 @@ const Modal = observer(() => {
 	const modalLoading = collectionLoading || currencyLoading;
 
 	if (
-		(collectionError || order === undefined || currencyError) &&
+		(collectionError || order === undefined || currencyError || isError) &&
 		!modalLoading
 	) {
 		return (
@@ -126,6 +129,13 @@ const Modal = observer(() => {
 		}
 	};
 
+	const handleApproveToken = async () => {
+		await executeApproval().catch((error) => {
+			console.error('Approve TOKEN failed:', error);
+			setError(error as Error);
+		});
+	};
+
 	// if it's testnet, we don't need to show the fee options
 	const sellCtaLabel = isProcessing
 		? isWaaS && !isTestnet
@@ -136,7 +146,7 @@ const Modal = observer(() => {
 	const ctas = [
 		{
 			label: 'Approve TOKEN',
-			onClick: async () => await executeApproval(),
+			onClick: handleApproveToken,
 			hidden: !steps$.approval.exist.get(),
 			pending: steps$.approval.isExecuting.get(),
 			variant: 'glass' as const,
@@ -211,6 +221,14 @@ const Modal = observer(() => {
 					titleOnConfirm="Accepting offer..."
 				/>
 			)}
+
+			{error && (
+				<ErrorLogBox
+					title="An error occurred while selling"
+					message={error.message}
+					error={error}
+				/>
+			)}
 		</ActionModal>
 	);
 });

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

@@ -65,6 +65,8 @@ describe('MakeOfferModal', () => {
 			},
 			isLoading: false,
 			isSuccess: true,
+			isError: false,
+			error: null,
 		});
 
 		// Render the modal

package/src/react/ui/modals/SellModal/hooks/useGetTokenApproval.tsx

@@ -30,7 +30,7 @@ export const useGetTokenApprovalData = (
 		collectionAddress: params.collectionAddress,
 	});
 
-	const { data, isLoading, isSuccess } = useQuery({
+	const { data, isLoading, isSuccess, isError, error } = useQuery({
 		queryKey: ['token-approval-data', params.ordersData],
 		queryFn: address
 			? async () => {
@@ -73,5 +73,7 @@ export const useGetTokenApprovalData = (
 		data,
 		isLoading,
 		isSuccess,
+		isError,
+		error,
 	};
 };

package/src/react/ui/modals/SellModal/hooks/useSell.tsx

@@ -36,13 +36,17 @@ export const useSell = ({
 	closeMainModal,
 	steps$,
 }: UseSellArgs) => {
-	const { data: tokenApproval, isLoading: tokenApprovalIsLoading } =
-		useGetTokenApprovalData({
-			chainId,
-			collectionAddress,
-			ordersData,
-			marketplace,
-		});
+	const {
+		data: tokenApproval,
+		isLoading: tokenApprovalIsLoading,
+		isError,
+		error,
+	} = useGetTokenApprovalData({
+		chainId,
+		collectionAddress,
+		ordersData,
+		marketplace,
+	});
 
 	useEffect(() => {
 		if (tokenApproval?.step && !tokenApprovalIsLoading) {
@@ -67,5 +71,7 @@ export const useSell = ({
 		sell,
 		tokenApprovalStepExists: tokenApproval?.step !== null,
 		tokenApprovalIsLoading,
+		isError,
+		error,
 	};
 };

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/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,7 +3,7 @@
 import { Skeleton } from '@0xsequence/design-system';
 import { useEffect } from 'react';
 import type { Address } from 'viem';
-import type { Currency } from '../../../../../_internal';
+import { type Currency, OrderbookKind } from '../../../../../_internal';
 import { useMarketCurrencies } from '../../../../../hooks/data/market/useMarketCurrencies';
 import {
 	CustomSelect,
@@ -17,6 +17,8 @@ type CurrencyOptionsSelectProps = {
 	onCurrencyChange: (currency: Currency) => void;
 	secondCurrencyAsDefault?: boolean;
 	includeNativeCurrency?: boolean;
+	orderbookKind?: OrderbookKind;
+	modalType?: 'listing' | 'offer';
 };
 
 function CurrencyOptionsSelect({
@@ -26,6 +28,8 @@ function CurrencyOptionsSelect({
 	selectedCurrency,
 	onCurrencyChange,
 	includeNativeCurrency,
+	orderbookKind,
+	modalType,
 }: CurrencyOptionsSelectProps) {
 	const { data: currencies, isLoading: currenciesLoading } =
 		useMarketCurrencies({
@@ -34,33 +38,49 @@ function CurrencyOptionsSelect({
 			includeNativeCurrency,
 		});
 
+	// Filter currencies for OpenSea
+	let filteredCurrencies = currencies;
+
+	if (currencies && orderbookKind === OrderbookKind.opensea && modalType) {
+		// Filter currencies based on OpenSea support flags from API
+		filteredCurrencies = currencies.filter((currency) => {
+			if (modalType === 'listing') {
+				return currency.openseaListing;
+			}
+			if (modalType === 'offer') {
+				return currency.openseaOffer;
+			}
+			return false;
+		});
+	}
+
 	// 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 +90,7 @@ function CurrencyOptionsSelect({
 	);
 
 	const onChange = (value: string) => {
-		const selectedCurrency = currencies.find(
+		const selectedCurrency = filteredCurrencies.find(
 			(currency) => currency.contractAddress === value,
 		);
 		if (selectedCurrency) {
@@ -78,6 +98,9 @@ function CurrencyOptionsSelect({
 		}
 	};
 
+	// Disable dropdown for OpenSea since there's typically only one currency
+	const isDropdownDisabled = orderbookKind === OrderbookKind.opensea;
+
 	return (
 		<CustomSelect
 			items={options}
@@ -86,6 +109,7 @@ function CurrencyOptionsSelect({
 				value: selectedCurrency.contractAddress,
 				content: selectedCurrency.symbol,
 			}}
+			disabled={isDropdownDisabled}
 			testId="currency-select"
 		/>
 	);