@0xsequence/marketplace-sdk 0.3.11 → 0.4.1

package/src/react/ui/modals/_internal/components/actionModal/LoadingModal.tsx

@@ -1,16 +1,26 @@
 import { Box, Spinner } from '@0xsequence/design-system';
-import type { Observable } from '@legendapp/state';
 import { ActionModal } from './ActionModal';
-import type { ActionModalState } from './store';
 
 interface LoadingModalProps {
-	store: Observable<ActionModalState>;
+	isOpen: boolean;
+	chainId: number;
 	onClose: () => void;
 	title: string;
 }
 
-export const LoadingModal = ({ store, onClose, title }: LoadingModalProps) => (
-	<ActionModal store={store} onClose={onClose} title={title} ctas={[]}>
+export const LoadingModal = ({
+	isOpen,
+	chainId,
+	onClose,
+	title,
+}: LoadingModalProps) => (
+	<ActionModal
+		isOpen={isOpen}
+		chainId={chainId}
+		onClose={onClose}
+		title={title}
+		ctas={[]}
+	>
 		<Box display="flex" justifyContent="center" alignItems="center" padding="4">
 			<Spinner size="lg" />
 		</Box>

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

@@ -1,12 +1,18 @@
 import { type Observable, observable } from '@legendapp/state';
+import type { ChainId } from '../../../../../_internal';
+import type { Address } from 'viem';
 
 export interface ActionModalState {
 	isOpen: boolean;
+	chainId: ChainId | null;
+	collectionAddress: Address | null;
 }
 
 export function createActionModalStore() {
 	return observable<ActionModalState>({
 		isOpen: false,
+		chainId: null,
+		collectionAddress: null,
 	});
 }
 

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

@@ -32,7 +32,7 @@ function Calendar({ ...props }: CalendarProps) {
 					margin: 0,
 					color: 'hsl(var(--foreground))',
 					background: 'hsl(var(--background))',
-					border: `1px solid hsl(var(--border))`,
+					border: '1px solid hsl(var(--border))',
 					borderRadius: 'var(--radius)',
 					padding: '0.5rem',
 					position: 'relative',

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

@@ -1,8 +1,8 @@
 import { Box, TokenImage } from '@0xsequence/design-system';
+import type { Observable } from '@legendapp/state';
 import { useState } from 'react';
-import { Address } from 'viem';
-import { Price } from '../../../../../../types';
-import { Observable } from '@legendapp/state';
+import type { Address } from 'viem';
+import type { Price } from '../../../../../../types';
 
 function CurrencyImage({
 	$listingPrice,

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

@@ -5,14 +5,11 @@ import { useEffect } from 'react';
 import type { Hex } from 'viem';
 import type { ChainId, Currency } from '../../../../../_internal';
 import { useCurrencies } from '../../../../../hooks';
-import { CustomSelect } from '../../../../components/_internals/custom-select/CustomSelect';
 import { useCurrencyOptions } from '../../../../../hooks/useCurrencyOptions';
-
-// TODO: this should be exported from design system
-type SelectOption = {
-	label: string;
-	value: string;
-};
+import {
+	CustomSelect,
+	type SelectItem,
+} from '../../../../components/_internals/custom-select/CustomSelect';
 
 type CurrencyOptionsSelectProps = {
 	collectionAddress: Hex;
@@ -33,22 +30,17 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 	});
 
 	// set default currency
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (
 			currencies &&
 			currencies.length > 0 &&
 			!selectedCurrency$.get()?.contractAddress
 		) {
-			console.debug('Setting default currency', currencies[0]);
 			selectedCurrency$.set(currencies[0]);
 		}
 	}, [currencies]);
 
-	console.debug('CurrencyOptionsSelect', {
-		currencies,
-		currenciesLoading,
-		currency,
-	});
 	if (!currencies || currenciesLoading || !currency.symbol) {
 		return <Skeleton borderRadius="lg" width="20" height="7" marginRight="3" />;
 	}
@@ -58,7 +50,8 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 			({
 				label: currency.symbol,
 				value: currency.contractAddress,
-			}) satisfies SelectOption,
+				content: currency.symbol,
+			}) as SelectItem,
 	);
 
 	const onChange = (value: string) => {
@@ -71,9 +64,11 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 	return (
 		<CustomSelect
 			items={options}
-			value={currency.symbol}
 			onValueChange={onChange}
-			defaultValue={currency.contractAddress}
+			defaultValue={{
+				value: currency.contractAddress,
+				content: currency.symbol,
+			}}
 		/>
 	);
 });

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

@@ -1,11 +1,10 @@
-import { useState } from 'react';
-
 import { Box, Skeleton, Text } from '@0xsequence/design-system';
 import type { Observable } from '@legendapp/state';
 import { observer } from '@legendapp/state/react';
-import { addDays, isSameDay } from 'date-fns';
+import { addDays } from 'date-fns';
 import { CustomSelect } from '../../../../components/_internals/custom-select/CustomSelect';
 import CalendarPopover from '../calendarPopover';
+import { useState } from 'react';
 
 export const PRESET_RANGES = {
 	TODAY: {
@@ -35,7 +34,7 @@ export const PRESET_RANGES = {
 	},
 } as const;
 
-export type rangeType =
+export type RangeType =
 	(typeof PRESET_RANGES)[keyof typeof PRESET_RANGES]['value'];
 
 type ExpirationDateSelectProps = {
@@ -47,15 +46,16 @@ const ExpirationDateSelect = observer(function ExpirationDateSelect({
 	className,
 	$date,
 }: ExpirationDateSelectProps) {
-	const defaultRange = '1_week';
-	const [range, setRange] = useState<rangeType>(defaultRange);
-	function handleSelectPresetRange(range: rangeType) {
-		setRange(range);
+	const defaultRange = '1_week' as RangeType;
+	const [selectedRange, setSelectedRange] = useState<RangeType>(defaultRange);
 
+	function handleSelectPresetRange(range: RangeType) {
 		const presetRange = Object.values(PRESET_RANGES).find(
 			(preset) => preset.value === range,
 		);
 
+		setSelectedRange(range);
+
 		if (!presetRange) {
 			return;
 		}
@@ -66,14 +66,6 @@ const ExpirationDateSelect = observer(function ExpirationDateSelect({
 	}
 
 	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);
 	}
 
@@ -112,12 +104,15 @@ const ExpirationDateSelect = observer(function ExpirationDateSelect({
 						items={Object.values(PRESET_RANGES).map((preset) => ({
 							label: preset.label,
 							value: preset.value,
+							content: preset.label,
 						}))}
-						value={range}
 						onValueChange={(value) =>
-							handleSelectPresetRange(value as rangeType)
+							handleSelectPresetRange(value as RangeType)
 						}
-						defaultValue={defaultRange}
+						defaultValue={{
+							value: selectedRange,
+							content: selectedRange,
+						}}
 					/>
 				</Box>
 

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

@@ -1,19 +1,20 @@
-import { Box, NumericInput } from '@0xsequence/design-system';
+import { Box, NumericInput, Text } from '@0xsequence/design-system';
 import type { Observable } from '@legendapp/state';
 import { observer } from '@legendapp/state/react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { type Hex, parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
 import type { Price } from '../../../../../../types';
-import CurrencyOptionsSelect from '../currencyOptionsSelect';
-import { priceInputCurrencyImage, priceInputWrapper } from './styles.css';
 import { useCurrencyBalance } from '../../../../../hooks/useCurrencyBalance';
 import CurrencyImage from '../currencyImage';
+import CurrencyOptionsSelect from '../currencyOptionsSelect';
+import { priceInputCurrencyImage, priceInputWrapper } from './styles.css';
 
 type PriceInputProps = {
 	collectionAddress: Hex;
 	chainId: string;
 	$listingPrice: Observable<Price | undefined>;
+	onPriceChange?: () => void;
 	checkBalance?: {
 		enabled: boolean;
 		callback: (state: boolean) => void;
@@ -24,6 +25,7 @@ const PriceInput = observer(function PriceInput({
 	chainId,
 	collectionAddress,
 	$listingPrice,
+	onPriceChange,
 	checkBalance,
 }: PriceInputProps) {
 	const [balanceError, setBalanceError] = useState('');
@@ -38,6 +40,17 @@ const PriceInput = observer(function PriceInput({
 
 	const [value, setValue] = useState('');
 
+	const changeListingPrice = (value: string) => {
+		setValue(value);
+		try {
+			const parsedAmount = parseUnits(value, Number(currencyDecimals));
+			$listingPrice.amountRaw.set(parsedAmount.toString());
+			onPriceChange?.();
+		} catch {
+			$listingPrice.amountRaw.set('0');
+		}
+	};
+
 	const checkInsufficientBalance = (priceAmountRaw: string) => {
 		const hasInsufficientBalance =
 			isBalanceSuccess &&
@@ -56,12 +69,13 @@ const PriceInput = observer(function PriceInput({
 		}
 	};
 
-	const changeListingPrice = (value: string) => {
-		setValue(value);
-		const parsedAmount = parseUnits(value, Number(currencyDecimals));
-		$listingPrice.amountRaw.set(parsedAmount.toString());
-		checkBalance && checkInsufficientBalance(parsedAmount.toString());
-	};
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+	useEffect(() => {
+		const priceAmountRaw = $listingPrice.amountRaw.get();
+		if (priceAmountRaw && priceAmountRaw !== '0') {
+			checkInsufficientBalance(priceAmountRaw);
+		}
+	}, [$listingPrice.currency.get()]);
 
 	return (
 		<Box className={priceInputWrapper} position="relative">
@@ -91,10 +105,18 @@ const PriceInput = observer(function PriceInput({
 				onChange={(event) => changeListingPrice(event.target.value)}
 				width="full"
 			/>
+
 			{balanceError && (
-				<Box color="negative" fontSize="small">
+				<Text
+					color="negative"
+					fontSize="xsmall"
+					fontFamily="body"
+					fontWeight="semibold"
+					position="absolute"
+					style={{ bottom: '-13px' }}
+				>
 					{balanceError}
-				</Box>
+				</Text>
 			)}
 		</Box>
 	);

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

@@ -23,7 +23,7 @@ export default function QuantityInput({
 
 		let formattedValue = sanitizedValue;
 		if (decimalParts.length > 2) {
-			formattedValue = decimalParts[0] + '.' + decimalParts[1];
+			formattedValue = `${decimalParts[0]}.${decimalParts[1]}`;
 		}
 
 		const finalValue = formatQuantity(formattedValue);
@@ -32,7 +32,7 @@ export default function QuantityInput({
 	}
 
 	function validateQuantity(value: string) {
-		if (!value || value.trim() === '' || isNaN(Number(value))) {
+		if (!value || value.trim() === '' || Number.isNaN(Number(value))) {
 			$invalidQuantity.set(true);
 			return;
 		}
@@ -49,7 +49,7 @@ export default function QuantityInput({
 	}
 
 	function formatQuantity(value: string) {
-		if (!value || isNaN(Number(value))) {
+		if (!value || Number.isNaN(Number(value))) {
 			return '0';
 		}
 

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

@@ -30,7 +30,7 @@ export type ShowSwitchChainModalArgs = {
 export const useSwitchChainModal = () => {
 	return {
 		show: (args: ShowSwitchChainModalArgs) => switchChainModal$.open(args),
-		close: () => switchChainModal$.close(),
+		close: () => switchChainModal$.delete(),
 		isSwitching$: switchChainModal$.state.isSwitching,
 	};
 };
@@ -38,18 +38,21 @@ export const useSwitchChainModal = () => {
 const SwitchChainModal = observer(() => {
 	const chainIdToSwitchTo = switchChainModal$.state.chainIdToSwitchTo.get();
 	const isSwitching$ = switchChainModal$.state.isSwitching;
-	const chainName = getPresentableChainName(chainIdToSwitchTo!);
+	const chainName = chainIdToSwitchTo
+		? getPresentableChainName(chainIdToSwitchTo)
+		: '';
 	const { switchChainAsync } = useSwitchChain();
 
 	async function handleSwitchChain() {
 		isSwitching$.set(true);
 
 		try {
-			await switchChainAsync({ chainId: Number(chainIdToSwitchTo!) });
+			if (!chainIdToSwitchTo) return;
+			await switchChainAsync({ chainId: Number(chainIdToSwitchTo) });
 
 			switchChainModal$.state.onSuccess?.();
 
-			switchChainModal$.close();
+			switchChainModal$.delete();
 		} catch (error) {
 			switchChainModal$.state.onError?.(error as SwitchChainErrorType);
 		} finally {

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

@@ -44,6 +44,7 @@ export default function TokenPreview({
 				width={'9'}
 				height={'9'}
 				borderRadius={'xs'}
+				style={{ objectFit: 'cover' }}
 			/>
 
 			<Box display={'flex'} flexDirection={'column'} marginLeft={'3'}>

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

@@ -1,11 +1,12 @@
-import { ChainId, networks } from '@0xsequence/network';
+import { type ChainId, networks } from '@0xsequence/network';
+import type { Hex } from 'viem';
+import { Box, Text, Spinner } from '@0xsequence/design-system';
 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;
+	transactionHash: Hex | undefined;
+	orderId?: string;
 	isConfirming: boolean;
 	isConfirmed: boolean;
 	isFailed: boolean;
@@ -15,6 +16,7 @@ type TransactionFooterProps = {
 
 export default function TransactionFooter({
 	transactionHash,
+	orderId,
 	isConfirming,
 	isConfirmed,
 	isFailed,
@@ -22,12 +24,12 @@ export default function TransactionFooter({
 	chainId,
 }: TransactionFooterProps) {
 	const icon =
-		(isConfirming && <Spinner size="md" />) ||
-		(isConfirmed && <SvgPositiveCircleIcon size="md" />);
+		((isConfirmed || orderId) && <SvgPositiveCircleIcon size="md" />) ||
+		(isConfirming && <Spinner size="md" />);
 
 	const title =
+		((isConfirmed || orderId) && 'Transaction complete') ||
 		(isConfirming && 'Processing transaction') ||
-		(isConfirmed && 'Transaction complete') ||
 		(isFailed && 'Transaction failed') ||
 		(isTimeout && 'Transaction took longer than expected');
 
@@ -64,7 +66,7 @@ export default function TransactionFooter({
 					fontWeight="medium"
 					fontFamily="body"
 				>
-					{truncateMiddle(transactionHash, 4, 4)}
+					{transactionHash && truncateMiddle(transactionHash, 4, 4)}
 				</Text>
 			</Box>
 		</Box>

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

@@ -12,6 +12,8 @@ type TransactionDetailsProps = {
 	chainId: string;
 	price?: Price;
 	currencyImageUrl?: string;
+	// We use a placeholder price for create listing modal
+	showPlaceholderPrice?: boolean;
 };
 
 //TODO: Move this
@@ -22,6 +24,7 @@ export default function TransactionDetails({
 	collectionAddress,
 	chainId,
 	price,
+	showPlaceholderPrice,
 	currencyImageUrl,
 }: TransactionDetailsProps) {
 	const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
@@ -43,18 +46,18 @@ export default function TransactionDetails({
 	let formattedAmount =
 		price && formatUnits(BigInt(price.amountRaw), price.currency.decimals);
 
-	if (royaltyPercentage !== undefined && formattedAmount) {
+	if (royaltyPercentage !== undefined && formattedAmount && price) {
 		formattedAmount = (
 			Number.parseFloat(formattedAmount) -
 			(Number.parseFloat(formattedAmount) * Number(royaltyPercentage)) / 100
-		).toString();
+		).toFixed(price.currency.decimals);
 	}
 
-	if (marketplaceFeePercentage !== undefined && formattedAmount) {
+	if (marketplaceFeePercentage !== undefined && formattedAmount && price) {
 		formattedAmount = (
 			Number.parseFloat(formattedAmount) -
 			(Number.parseFloat(formattedAmount) * marketplaceFeePercentage) / 100
-		).toString();
+		).toFixed(price.currency.decimals);
 	}
 
 	return (
@@ -75,7 +78,8 @@ export default function TransactionDetails({
 					<Skeleton width="16" height={'4'} />
 				) : (
 					<Text fontSize={'small'} color={'text100'} fontFamily="body">
-						{formattedAmount} {price.currency.symbol}
+						{showPlaceholderPrice ? '0' : formattedAmount}{' '}
+						{price.currency.symbol}
 					</Text>
 				)}
 			</Box>

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

@@ -5,17 +5,18 @@ import {
 	Skeleton,
 	Text,
 } from '@0xsequence/design-system';
+import type { TokenMetadata } from '@0xsequence/metadata';
 import { observer } from '@legendapp/state/react';
 import { type Hex, formatUnits } from 'viem';
 import type { Price } from '../../../../../../types';
 import { useCollection } from '../../../../../hooks';
+import ChessTileImage from '../../../../images/chess-tile.png';
 import TimeAgo from '../timeAgo';
 import { transactionStatusModal$ } from '../transactionStatusModal/store';
 import { useTransactionPreviewTitle } from './useTransactionPreviewTitle';
-import type { TokenMetadata } from '@0xsequence/metadata';
-import ChessTileImage from '../../../../images/chess-tile.png';
 
 type TransactionPreviewProps = {
+	orderId?: string;
 	price?: Price;
 	collectionAddress: Hex;
 	chainId: string;
@@ -30,6 +31,7 @@ type TransactionPreviewProps = {
 
 const TransactionPreview = observer(
 	({
+		orderId,
 		price,
 		collectionAddress,
 		chainId,
@@ -43,6 +45,7 @@ const TransactionPreview = observer(
 	}: TransactionPreviewProps) => {
 		const { type } = transactionStatusModal$.state.get();
 		const title = useTransactionPreviewTitle(
+			orderId,
 			{ isConfirmed, isConfirming, isFailed, isTimeout },
 			type,
 		);
@@ -55,7 +58,7 @@ const TransactionPreview = observer(
 		const collectibleName = collectible?.name;
 		const collectionName = collection?.name;
 		const priceFormatted = price
-			? formatUnits(BigInt(price!.amountRaw), price!.currency.decimals)
+			? formatUnits(BigInt(price?.amountRaw), price?.currency.decimals)
 			: undefined;
 
 		if (collectibleLoading || collectionLoading) {
@@ -131,7 +134,7 @@ const TransactionPreview = observer(
 								fontWeight="medium"
 								fontFamily="body"
 							>
-								{priceFormatted} {price!.currency.symbol}
+								{priceFormatted} {price?.currency.symbol}
 							</Text>
 						</Box>
 					)}

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

@@ -1,22 +1,20 @@
-import { useMemo } from 'react';
+import type { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
 import type { ConfirmationStatus } from '../transactionStatusModal/store';
 import { TRANSACTION_TITLES } from './consts';
-import { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
 
 export function useTransactionPreviewTitle(
+	orderId: string | undefined,
 	status: ConfirmationStatus,
 	type?: TransactionType | undefined,
 ): string {
-	return useMemo(() => {
-		if (!type) return '';
+	if (!type) return '';
 
-		const { isConfirming, isConfirmed, isFailed } = status;
-		const titles = TRANSACTION_TITLES[type];
+	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;
+	if (isConfirmed || orderId) return titles.confirmed;
+	if (isConfirming) return titles.confirming;
+	if (isFailed) return titles.failed;
 
-		return '';
-	}, [status, type]);
+	return '';
 }