@0xsequence/marketplace-sdk 1.1.0 → 1.2.0

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/floorPriceText/__tests__/FloorPriceText.test.tsx

@@ -19,6 +19,8 @@ describe('FloorPriceText', () => {
 		nativeCurrency: true,
 		createdAt: '',
 		updatedAt: '',
+		openseaListing: true,
+		openseaOffer: true,
 	};
 
 	const mockProps = {

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

@@ -68,7 +68,7 @@ export default function FloorPriceText({
 	}
 
 	return (
-		<div className="flex w-full items-center justify-between gap-2">
+		<div className="flex w-full flex-wrap items-center justify-between gap-2">
 			<Text className="text-left font-body font-medium text-muted text-xs">
 				{floorPriceDifferenceText}
 			</Text>

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

@@ -1,11 +1,22 @@
 'use client';
 
-import { NumericInput, Text } from '@0xsequence/design-system';
+import {
+	InfoIcon,
+	NumericInput,
+	Text,
+	Tooltip,
+} from '@0xsequence/design-system';
 import { useEffect, useRef, useState } from 'react';
-import { type Address, parseUnits } from 'viem';
+import { type Address, formatUnits, parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
-import type { Currency, Price } from '../../../../../../types';
-import { cn } from '../../../../../../utils';
+import {
+	type Currency,
+	OrderbookKind,
+	type Price,
+} from '../../../../../../types';
+import { calculateTotalOfferCost, cn } from '../../../../../../utils';
+import { validateOpenseaOfferDecimals } from '../../../../../../utils/price';
+import { useConvertPriceToUSD } from '../../../../../hooks';
 import { useCurrencyBalance } from '../../../../../hooks/data/tokens/useCurrencyBalance';
 import CurrencyImage from '../currencyImage';
 import CurrencyOptionsSelect from '../currencyOptionsSelect';
@@ -23,6 +34,13 @@ type PriceInputProps = {
 		callback: (state: boolean) => void;
 	};
 	disabled?: boolean;
+	orderbookKind?: OrderbookKind;
+	setOpenseaLowestPriceCriteriaMet?: (state: boolean) => void;
+	modalType?: 'listing' | 'offer';
+	// Fee data for enhanced balance checking in offers
+	feeData?: {
+		royaltyPercentage?: number;
+	};
 };
 
 export default function PriceInput({
@@ -35,6 +53,10 @@ export default function PriceInput({
 	secondCurrencyAsDefault,
 	includeNativeCurrency,
 	disabled,
+	orderbookKind,
+	setOpenseaLowestPriceCriteriaMet,
+	modalType,
+	feeData,
 }: PriceInputProps) {
 	const { address: accountAddress } = useAccount();
 	const inputRef = useRef<HTMLInputElement>(null);
@@ -49,6 +71,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();
@@ -60,20 +96,88 @@ export default function PriceInput({
 		chainId,
 		userAddress: accountAddress,
 	});
+	const getTotalRequiredBalance = () => {
+		if (!priceAmountRaw || !currencyDecimals) return BigInt(0);
+
+		const offerAmountRaw = BigInt(priceAmountRaw);
+
+		// For offers, include fees in balance calculation
+		if (modalType === 'offer' && feeData) {
+			return calculateTotalOfferCost(
+				offerAmountRaw,
+				currencyDecimals,
+				feeData.royaltyPercentage || 0,
+			);
+		}
+
+		return offerAmountRaw;
+	};
 
 	const balanceError =
 		!!checkBalance?.enabled &&
 		!!isBalanceSuccess &&
 		!!priceAmountRaw &&
 		!!currencyDecimals &&
-		BigInt(priceAmountRaw) > BigInt(balance?.value || 0n);
+		getTotalRequiredBalance() > BigInt(balance?.value || 0n);
+
+	const hasEnoughForBaseOffer =
+		!!isBalanceSuccess &&
+		!!priceAmountRaw &&
+		BigInt(priceAmountRaw) <= BigInt(balance?.value || 0n);
+
+	const getRoyaltyFeeAmount = () => {
+		if (!priceAmountRaw || !currencyDecimals || !feeData?.royaltyPercentage) {
+			return null;
+		}
+
+		const offerAmount = BigInt(priceAmountRaw);
+		const royaltyFeeAmount =
+			(offerAmount * BigInt(Math.round(feeData.royaltyPercentage * 100))) /
+			BigInt(10000);
+
+		return formatUnits(royaltyFeeAmount, currencyDecimals);
+	};
+
+	const royaltyFeeFormatted = getRoyaltyFeeAmount();
+
+	const RoyaltyFeeTooltip = ({ children }: { children: React.ReactNode }) => (
+		<Tooltip
+			message={
+				<div className="flex flex-col gap-1">
+					<Text className="font-body font-medium text-xs">
+						A royalty fee is a percentage of each resale
+					</Text>
+					<Text className="font-body font-medium text-xs">
+						price that automatically compensates the original
+					</Text>
+					<Text className="font-body font-medium text-xs">
+						creator every time their collectible changes hands.
+					</Text>
+				</div>
+			}
+		>
+			{children}
+		</Tooltip>
+	);
+
+	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);
+	const [openseaDecimalError, setOpenseaDecimalError] = useState<string | null>(
+		null,
+	);
 
 	// Handle currency changes and adjust the raw amount accordingly
 	useEffect(() => {
@@ -105,6 +209,24 @@ export default function PriceInput({
 
 		if (!price || !onPriceChange) return;
 
+		// Validate OpenSea decimal constraints for offers
+		if (orderbookKind === OrderbookKind.opensea && modalType === 'offer') {
+			const validation = validateOpenseaOfferDecimals(newValue);
+			if (!validation.isValid) {
+				setOpenseaDecimalError(validation.errorMessage || null);
+				try {
+					const parsedAmount = parseUnits(newValue, Number(currencyDecimals));
+					const updatedPrice = { ...price, amountRaw: parsedAmount.toString() };
+					onPriceChange(updatedPrice);
+				} catch {
+					const updatedPrice = { ...price, amountRaw: '0' };
+					onPriceChange(updatedPrice);
+				}
+				return;
+			}
+			setOpenseaDecimalError(null);
+		}
+
 		try {
 			const parsedAmount = parseUnits(newValue, Number(currencyDecimals));
 			const updatedPrice = { ...price, amountRaw: parsedAmount.toString() };
@@ -143,6 +265,8 @@ export default function PriceInput({
 							chainId={chainId}
 							secondCurrencyAsDefault={secondCurrencyAsDefault}
 							includeNativeCurrency={includeNativeCurrency}
+							orderbookKind={orderbookKind}
+							modalType={modalType}
 						/>
 					}
 					value={value}
@@ -151,13 +275,76 @@ export default function PriceInput({
 			</div>
 
 			{balanceError && (
-				<Text
-					className="-bottom-5 absolute font-body font-medium text-xs"
-					color="negative"
-				>
-					Insufficient balance
-				</Text>
+				<div className="mt-2">
+					<Text className="font-body font-medium text-xs" color="negative">
+						{modalType === 'offer' &&
+						hasEnoughForBaseOffer &&
+						royaltyFeeFormatted &&
+						Number(royaltyFeeFormatted) > 0 ? (
+							<RoyaltyFeeTooltip>
+								<div className="flex items-center gap-1">
+									<InfoIcon className="h-4 w-4 text-negative" />
+									<Text
+										className="font-body font-medium text-xs"
+										color="negative"
+									>
+										You need {royaltyFeeFormatted} {currency?.symbol} for
+										royalty fees
+									</Text>
+								</div>
+							</RoyaltyFeeTooltip>
+						) : (
+							'Insufficient balance'
+						)}
+					</Text>
+				</div>
 			)}
+
+			{!balanceError &&
+				modalType === 'offer' &&
+				royaltyFeeFormatted &&
+				Number(royaltyFeeFormatted) > 0 && (
+					<div className="mt-2">
+						<RoyaltyFeeTooltip>
+							<div className="flex items-center gap-1">
+								<InfoIcon className="h-4 w-4 text-text-50" />
+
+								<Text className="font-body font-medium text-xs" color="text50">
+									Total:{' '}
+									{(Number(value) + Number(royaltyFeeFormatted))
+										.toFixed(6)
+										.replace(/\.?0+$/, '')}{' '}
+									{currency?.symbol} (includes {royaltyFeeFormatted}{' '}
+									{currency?.symbol} royalty fee)
+								</Text>
+							</div>
+						</RoyaltyFeeTooltip>
+					</div>
+				)}
+
+			{!balanceError &&
+				priceAmountRaw !== '0' &&
+				!openseaLowestPriceCriteriaMet &&
+				orderbookKind === OrderbookKind.opensea &&
+				!isConversionLoading &&
+				modalType === 'offer' &&
+				!openseaDecimalError && (
+					<Text
+						className="-bottom-5 absolute font-body font-medium text-xs"
+						color="negative"
+					>
+						Lowest price must be at least $0.01
+					</Text>
+				)}
+
+			{!balanceError &&
+				openseaDecimalError &&
+				orderbookKind === OrderbookKind.opensea &&
+				modalType === 'offer' && (
+					<Text className="font-body font-medium text-xs" color="negative">
+						{openseaDecimalError}
+					</Text>
+				)}
 		</div>
 	);
 }

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

@@ -1,6 +1,13 @@
 'use client';
 
-import { Image, Skeleton, Text } from '@0xsequence/design-system';
+import {
+	ChevronRightIcon,
+	Image,
+	Skeleton,
+	Text,
+	Tooltip,
+} from '@0xsequence/design-system';
+import { useEffect, useState } from 'react';
 import type { Address } from 'viem';
 import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../../../consts';
 import type { Price } from '../../../../../../types';
@@ -40,28 +47,50 @@ export default function TransactionDetails({
 		collectionAddress,
 		collectibleId,
 	});
+	const [overflow, setOverflow] = useState({
+		status: false,
+		amount: '0',
+	});
 
 	const priceLoading = !price || marketplaceConfigLoading || royaltyLoading;
 
-	let formattedAmount = '0';
+	const [formattedAmount, setFormattedAmount] = useState('0');
 
-	if (price) {
-		const fees: number[] = [];
+	useEffect(() => {
+		if (!price || royaltyLoading || marketplaceConfigLoading) return;
 
+		const fees: number[] = [];
 		if (royalty !== null) {
 			fees.push(Number(royalty.percentage));
 		}
-
 		if (marketplaceFeePercentage > 0) {
 			fees.push(marketplaceFeePercentage);
 		}
-
-		formattedAmount = calculateEarningsAfterFees(
+		const newFormattedAmount = calculateEarningsAfterFees(
 			BigInt(price.amountRaw),
 			price.currency.decimals,
 			fees,
 		);
-	}
+		setFormattedAmount(newFormattedAmount);
+	}, [
+		price,
+		royalty,
+		marketplaceFeePercentage,
+		royaltyLoading,
+		marketplaceConfigLoading,
+	]);
+
+	useEffect(() => {
+		if (formattedAmount.length > 15) {
+			setOverflow((prev) =>
+				prev.status
+					? prev
+					: { status: true, amount: formattedAmount.slice(0, 15) },
+			);
+		} else {
+			setOverflow({ status: false, amount: formattedAmount });
+		}
+	}, [formattedAmount]);
 
 	return (
 		<div className="flex w-full items-center justify-between">
@@ -75,8 +104,27 @@ export default function TransactionDetails({
 					<Skeleton className="h-4 w-24 animate-shimmer" />
 				) : (
 					<Text className="font-body font-medium text-xs" color={'text100'}>
-						{showPlaceholderPrice ? '0' : formattedAmount}{' '}
-						{price.currency.symbol}
+						{showPlaceholderPrice ? (
+							<Text className="font-body font-medium text-xs" color={'text100'}>
+								0 {price.currency.symbol}
+							</Text>
+						) : overflow.status ? (
+							<Tooltip message={`${formattedAmount} ${price.currency.symbol}`}>
+								<div className="flex items-center">
+									<ChevronRightIcon className="h-3 w-3 text-text-100" />
+									<Text
+										className="font-body font-medium text-xs"
+										color={'text100'}
+									>
+										{overflow.amount} {price.currency.symbol}
+									</Text>
+								</div>
+							</Tooltip>
+						) : (
+							<Text className="font-body font-medium text-xs" color={'text100'}>
+								{formattedAmount} {price.currency.symbol}
+							</Text>
+						)}
 					</Text>
 				)}
 			</div>

package/src/react/ui/modals/_internal/components/transactionStatusModal/__tests__/utils.test.ts

@@ -113,6 +113,8 @@ describe('Transaction Status Modal Utils', () => {
 							createdAt: '2024-01-21T00:00:00Z',
 							updatedAt: '2024-01-21T00:00:00Z',
 							status: CurrencyStatus.active,
+							openseaListing: true,
+							openseaOffer: true,
 						},
 					},
 				}),

package/src/react/utils/waitForTransactionReceipt.ts

@@ -1,49 +1,43 @@
 import type { TransactionReceipt } from '@0xsequence/indexer';
-import {
-	type Hex,
-	TransactionReceiptNotFoundError,
-	WaitForTransactionReceiptTimeoutError,
-} from 'viem';
+import { type Hex, TransactionReceiptNotFoundError } from 'viem';
 import type { SdkConfig } from '../../types';
 import { getIndexerClient } from '../_internal/api';
 
-const ONE_MIN = 60 * 1000;
-const THREE_MIN = 3 * ONE_MIN;
+const MAX_RETRIES = 3;
+const MAX_BLOCK_WAIT = 30;
 
 export const waitForTransactionReceipt = async ({
 	txHash,
 	chainId,
 	sdkConfig,
-	timeout = THREE_MIN,
+	maxBlockWait = MAX_BLOCK_WAIT,
 }: {
 	txHash: Hex;
 	chainId: number;
 	sdkConfig: SdkConfig;
-	timeout?: number;
+	maxBlockWait?: number;
 }): Promise<TransactionReceipt> => {
 	const indexer = getIndexerClient(chainId, sdkConfig);
-	return Promise.race([
-		new Promise<TransactionReceipt>((resolve, reject) => {
-			indexer.subscribeReceipts(
-				{
-					filter: {
-						txnHash: txHash,
-					},
-				},
-				{
-					onMessage: ({ receipt }) => {
-						resolve(receipt);
-					},
-					onError: () => {
-						reject(TransactionReceiptNotFoundError);
-					},
-				},
+	let retries = 0;
+
+	while (retries < MAX_RETRIES) {
+		try {
+			const result = await indexer.fetchTransactionReceipt({
+				txnHash: txHash,
+				maxBlockWait,
+			});
+			return result.receipt;
+		} catch (error) {
+			retries++;
+			console.error(
+				`Failed to fetch transaction receipt (attempt ${retries}/${MAX_RETRIES}):`,
+				error,
 			);
-		}),
-		new Promise<TransactionReceipt>((_, reject) => {
-			setTimeout(() => {
-				reject(WaitForTransactionReceiptTimeoutError);
-			}, timeout);
-		}),
-	]);
+			if (retries >= MAX_RETRIES) {
+				throw TransactionReceiptNotFoundError;
+			}
+		}
+	}
+
+	throw TransactionReceiptNotFoundError;
 };

package/src/styles/index.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
 @import "@0xsequence/design-system/preset";
 @import "react-day-picker/style.css";
+@import "../react/ui/modals/_internal/components/calendarDropdown/overrides.css";
 
 @source "../";