@0xsequence/marketplace-sdk 2.0.0 → 2.0.1

package/src/react/ui/modals/BuyModal/components/BuyModalContent.tsx

@@ -10,12 +10,14 @@ import {
 	Text,
 } from '@0xsequence/design-system';
 import { TrailsWidget } from '0xtrails/widget';
+import { useRef, useState } from 'react';
 import {
 	getSequenceApiUrl,
 	getSequenceIndexerUrl,
 	getSequenceNodeGatewayUrl,
 	getTrailsApiUrl,
 } from '../../../../_internal/api/services';
+import { cn } from '../../../../ssr';
 import { ModalInitializationError } from '../../_internal/components/baseModal/errors/ModalInitializationError';
 import { MODAL_OVERLAY_PROPS } from '../../_internal/components/consts';
 import { useBuyModalContext } from '../internal/buyModalContext';
@@ -56,12 +58,12 @@ export const BuyModalContent = () => {
 	if (error) {
 		return (
 			<Modal
-				isDismissible={false}
+				isDismissible={true}
 				onClose={close}
 				overlayProps={MODAL_OVERLAY_PROPS}
 				contentProps={{
 					style: {
-						width: '450px',
+						width: '400px',
 						height: 'auto',
 					},
 					className: 'overflow-y-auto',
@@ -101,10 +103,7 @@ export const BuyModalContent = () => {
 
 					{isLoading && (
 						<div className="flex w-full items-center justify-center py-8">
-							<div className="flex flex-col items-center gap-4">
-								<Spinner size="lg" />
-								<Text className="text-text-80">Loading payment options...</Text>
-							</div>
+							<ProgressiveLoadingMessage />
 						</div>
 					)}
 
@@ -159,3 +158,38 @@ export const BuyModalContent = () => {
 		</Dialog>
 	);
 };
+
+const ProgressiveLoadingMessage = () => {
+	const [showSecondaryMessage, setShowSecondaryMessage] = useState(false);
+	const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+	if (!timerRef.current) {
+		timerRef.current = setTimeout(() => {
+			setShowSecondaryMessage(true);
+		}, 3000);
+	}
+
+	return (
+		<div className="flex items-center gap-4">
+			<div
+				className={cn(
+					'transition-all duration-300',
+					showSecondaryMessage ? 'h-10 w-10' : 'h-5 w-5',
+				)}
+			>
+				<Spinner className="h-full w-full transition-all duration-150" />
+			</div>
+
+			<div className="flex flex-col gap-2">
+				<p className="animate-pulse text-text-100">
+					Loading payment options...
+				</p>
+				{showSecondaryMessage && (
+					<p className="text-small text-text-50">
+						This is taking longer than expected.
+					</p>
+				)}
+			</div>
+		</div>
+	);
+};

package/src/react/ui/modals/BuyModal/hooks/useMarketPlatformFee.ts

@@ -1,6 +1,6 @@
 import { skipToken } from '@tanstack/react-query';
 import { avalanche, optimism } from 'viem/chains';
-import { compareAddress } from '../../../../../utils';
+import { findMarketCollection } from '../../../../../utils';
 import type { AdditionalFee } from '../../../../_internal';
 import { useMarketplaceConfig } from '../../../../hooks';
 
@@ -28,10 +28,10 @@ export const useMarketPlatformFee = (params: FeesParams | typeof skipToken) => {
 	const { chainId, collectionAddress } = params;
 
 	// Find collection in market collections only (not shop collections)
-	const marketCollection = marketplaceConfig?.market?.collections?.find(
-		(col) =>
-			compareAddress(col.itemsAddress, collectionAddress) &&
-			String(col.chainId) === String(chainId),
+	const marketCollection = findMarketCollection(
+		marketplaceConfig?.market?.collections ?? [],
+		collectionAddress,
+		chainId,
 	);
 
 	const avalancheOrOptimism =

package/src/react/ui/modals/CreateListingModal/internal/store.ts

@@ -1,6 +1,7 @@
 import type { Address } from '@0xsequence/api-client';
 import { createStore } from '@xstate/store';
 import { useSelector } from '@xstate/store/react';
+import { findMarketCollection } from '../../../../../utils';
 import { useMarketplaceConfig } from '../../../hooks';
 
 export type OpenCreateListingModalArgs = {
@@ -109,8 +110,10 @@ export const useCreateListingModalState = () => {
 	} = useSelector(createListingModalStore, (state) => state.context);
 
 	const { data: marketplaceConfig } = useMarketplaceConfig();
-	const orderbookKind = marketplaceConfig?.market.collections.find(
-		(collection) => collection.itemsAddress === collectionAddress,
+	const orderbookKind = findMarketCollection(
+		marketplaceConfig?.market.collections ?? [],
+		collectionAddress,
+		chainId,
 	)?.destinationMarketplace;
 
 	const closeModal = () => createListingModalStore.send({ type: 'close' });

package/src/react/ui/modals/MakeOfferModal/internal/context.ts

@@ -11,6 +11,7 @@ import {
 	useCollectionMetadata,
 	useConfig,
 	useConnectorMetadata,
+	useCurrencyConvertToUSD,
 	useCurrencyList,
 	useTokenCurrencyBalance,
 } from '../../../../hooks';
@@ -106,6 +107,18 @@ export function useMakeOfferModalContext() {
 		},
 	});
 
+	const { data: usdConversion } = useCurrencyConvertToUSD({
+		chainId: state.chainId,
+		currencyAddress: selectedCurrency?.contractAddress ?? zeroAddress,
+		amountRaw: state.priceInput?.toString(),
+		query: {
+			enabled:
+				state.orderbookKind === OrderbookKind.opensea &&
+				!!selectedCurrency?.contractAddress &&
+				!!state.priceInput,
+		},
+	});
+
 	const expiryDate = useMemo(
 		() => new Date(Date.now() + state.expiryDays * 24 * 60 * 60 * 1000),
 		[state.expiryDays],
@@ -139,6 +152,7 @@ export function useMakeOfferModalContext() {
 		balance: balanceDnum,
 		lowestListing: lowestListingDnum,
 		orderbookKind: state.orderbookKind,
+		usdAmount: usdConversion?.usdAmount,
 	});
 
 	const formIsValid = isFormValid(validation);
@@ -359,6 +373,7 @@ export function useMakeOfferModalContext() {
 				quantity: validation.quantity,
 				balance: validation.balance,
 				openseaCriteria: validation.openseaCriteria,
+				openseaMinPrice: validation.openseaMinPrice,
 			},
 			errors: {
 				price: state.isPriceTouched ? validation.price.error : undefined,
@@ -369,6 +384,9 @@ export function useMakeOfferModalContext() {
 				openseaCriteria: state.isPriceTouched
 					? validation.openseaCriteria?.error
 					: undefined,
+				openseaMinPrice: state.isPriceTouched
+					? validation.openseaMinPrice?.error
+					: undefined,
 			},
 		},
 
@@ -415,7 +433,8 @@ export function useMakeOfferModalContext() {
 				this.form.errors.price ||
 				this.form.errors.quantity ||
 				this.form.errors.balance ||
-				this.form.errors.openseaCriteria
+				this.form.errors.openseaCriteria ||
+				this.form.errors.openseaMinPrice
 			);
 		},
 

package/src/react/ui/modals/MakeOfferModal/internal/helpers/validation.ts

@@ -11,6 +11,7 @@ export type OfferValidation = {
 	quantity: FieldValidation;
 	balance: FieldValidation;
 	openseaCriteria?: FieldValidation;
+	openseaMinPrice?: FieldValidation;
 };
 
 export function validateOfferForm({
@@ -19,12 +20,14 @@ export function validateOfferForm({
 	balance,
 	lowestListing,
 	orderbookKind,
+	usdAmount,
 }: {
 	price: Dnum;
 	quantity: Dnum;
 	balance?: Dnum;
 	lowestListing?: Dnum;
 	orderbookKind?: string;
+	usdAmount?: number;
 }): OfferValidation {
 	const validation: OfferValidation = {
 		price: { isValid: true, error: null },
@@ -67,6 +70,15 @@ export function validateOfferForm({
 		};
 	}
 
+	// OpenSea minimum price validation ($0.01 USD)
+	if (orderbookKind === 'opensea' && usdAmount !== undefined) {
+		const meetsMinPrice = usdAmount >= 0.01;
+		validation.openseaMinPrice = {
+			isValid: meetsMinPrice,
+			error: meetsMinPrice ? null : 'Lowest price must be at least $0.01',
+		};
+	}
+
 	return validation;
 }
 
@@ -75,7 +87,8 @@ export function isFormValid(validation: OfferValidation): boolean {
 		validation.price.isValid &&
 		validation.quantity.isValid &&
 		validation.balance.isValid &&
-		(validation.openseaCriteria?.isValid ?? true)
+		(validation.openseaCriteria?.isValid ?? true) &&
+		(validation.openseaMinPrice?.isValid ?? true)
 	);
 }
 
@@ -87,6 +100,8 @@ export function getValidationErrors(validation: OfferValidation): string[] {
 	if (validation.balance.error) errors.push(validation.balance.error);
 	if (validation.openseaCriteria?.error)
 		errors.push(validation.openseaCriteria.error);
+	if (validation.openseaMinPrice?.error)
+		errors.push(validation.openseaMinPrice.error);
 
 	return errors;
 }

package/src/react/ui/modals/MakeOfferModal/internal/store.ts

@@ -1,6 +1,7 @@
 import type { Address } from '@0xsequence/api-client';
 import { createStore } from '@xstate/store';
 import { useSelector } from '@xstate/store/react';
+import { findMarketCollection } from '../../../../../utils';
 import { useMarketplaceConfig } from '../../../hooks';
 
 export type OpenMakeOfferModalArgs = {
@@ -109,8 +110,10 @@ export const useMakeOfferModalState = () => {
 	} = useSelector(makeOfferModalStore, (state) => state.context);
 
 	const { data: marketplaceConfig } = useMarketplaceConfig();
-	const orderbookKind = marketplaceConfig?.market.collections.find(
-		(collection) => collection.itemsAddress === collectionAddress,
+	const orderbookKind = findMarketCollection(
+		marketplaceConfig?.market.collections ?? [],
+		collectionAddress,
+		chainId,
 	)?.destinationMarketplace;
 
 	const closeModal = () => makeOfferModalStore.send({ type: 'close' });

package/src/react/ui/modals/SellModal/internal/store.ts

@@ -2,6 +2,7 @@ import type { Address } from '@0xsequence/api-client';
 import { createStore } from '@xstate/store';
 import { useSelector } from '@xstate/store/react';
 import { zeroAddress } from 'viem';
+import { findMarketCollection } from '../../../../../utils';
 import type { Order } from '../../../../_internal';
 import { useMarketplaceConfig } from '../../../hooks';
 
@@ -56,8 +57,10 @@ export const useSellModalState = () => {
 	);
 
 	const { data: marketplaceConfig } = useMarketplaceConfig();
-	const orderbookKind = marketplaceConfig?.market.collections.find(
-		(collection) => collection.itemsAddress === collectionAddress,
+	const orderbookKind = findMarketCollection(
+		marketplaceConfig?.market.collections ?? [],
+		collectionAddress,
+		chainId,
 	)?.destinationMarketplace;
 
 	const closeModal = () => sellModalStore.send({ type: 'close' });

package/src/react/ui/modals/_internal/components/baseModal/errors/ModalInitializationError.tsx

@@ -17,7 +17,7 @@ export const ModalInitializationError = ({
 	const [showTechnicalDetails, setShowTechnicalDetails] = useState(false);
 
 	return (
-		<div className="flex min-h-[400px] flex-col items-center justify-center p-4 text-white">
+		<div className="flex min-h-[400px] flex-col items-center justify-center p-6 text-white">
 			<div className="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-red-500">
 				<WarningIcon className="h-8 w-8 text-white" />
 			</div>
@@ -29,7 +29,7 @@ export const ModalInitializationError = ({
 				refresh the page.
 			</p>
 
-			{error.stack && (
+			{(error.cause as string) && (
 				<button
 					type="button"
 					onClick={() => setShowTechnicalDetails(!showTechnicalDetails)}
@@ -50,19 +50,21 @@ export const ModalInitializationError = ({
 							d="M19 9l-7 7-7-7"
 						/>
 					</svg>
-					Show technical details
+					{showTechnicalDetails
+						? 'Hide technical details'
+						: 'Show technical details'}
 				</button>
 			)}
 
-			{showTechnicalDetails && error.stack && (
+			{showTechnicalDetails && (error.cause as string) && (
 				<div className="mb-8 max-h-64 w-full max-w-md overflow-y-auto rounded-lg border border-red-900 bg-[#2b0000] p-4">
 					<pre className="whitespace-pre-wrap break-words text-red-100 text-xs">
-						{error.stack}
+						{error.cause as string}
 					</pre>
 				</div>
 			)}
 
-			<div className="flex w-full max-w-xs flex-col space-y-3">
+			<div className="flex w-full flex-col space-y-3">
 				{onTryAgain && (
 					<Button
 						onClick={onTryAgain}

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

@@ -36,7 +36,6 @@ type PriceInputProps = {
 	};
 	disabled?: boolean;
 	orderbookKind?: OrderbookKind;
-	setOpenseaLowestPriceCriteriaMet?: (state: boolean) => void;
 	modalType?: 'listing' | 'offer';
 	// Fee data for enhanced balance checking in offers
 	feeData?: {
@@ -55,7 +54,6 @@ export default function PriceInput({
 	includeNativeCurrency,
 	disabled,
 	orderbookKind,
-	setOpenseaLowestPriceCriteriaMet,
 	modalType,
 	feeData,
 }: PriceInputProps) {
@@ -81,8 +79,7 @@ export default function PriceInput({
 				enabled:
 					orderbookKind === OrderbookKind.opensea &&
 					!!currencyAddress &&
-					!!priceAmountRaw &&
-					!!setOpenseaLowestPriceCriteriaMet,
+					!!priceAmountRaw,
 			},
 		});
 
@@ -164,17 +161,13 @@ export default function PriceInput({
 
 	const openseaLowestPriceCriteriaMet =
 		orderbookKind === OrderbookKind.opensea &&
-		!!conversion?.usdAmount &&
+		conversion?.usdAmount !== undefined &&
 		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>(

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

@@ -11,6 +11,7 @@ import {
 import { useEffect, useState } from 'react';
 import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../../../consts';
 import type { Price } from '../../../../../../types';
+import { findMarketCollection } from '../../../../../../utils';
 import { calculateEarningsAfterFees } from '../../../../../../utils/price';
 import { useMarketplaceConfig, useRoyalty } from '../../../../../hooks';
 
@@ -37,8 +38,10 @@ export default function TransactionDetails({
 	const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
 
 	const marketplaceFeePercentage = includeMarketplaceFee
-		? data?.market.collections.find(
-				(collection) => collection.itemsAddress === collectionAddress,
+		? findMarketCollection(
+				data?.market.collections ?? [],
+				collectionAddress,
+				chainId,
 			)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE
 		: 0;
 	// royaltyPercentage is an array of [recipient, percentage]

package/src/styles/styles.ts

@@ -1855,6 +1855,17 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
     --tw-tracking: var(--tracking-normal);
     letter-spacing: var(--tracking-normal);
   }
+  .text-small {
+    font-family: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
   .font-body {
     font-family: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   }
@@ -1985,6 +1996,9 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
   .break-words {
     overflow-wrap: break-word;
   }
+  .wrap-anywhere {
+    overflow-wrap: anywhere;
+  }
   .text-ellipsis {
     text-overflow: ellipsis;
   }
@@ -2313,6 +2327,10 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
     --tw-duration: 100ms;
     transition-duration: 100ms;
   }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;

package/src/utils/collection.ts

@@ -0,0 +1,19 @@
+import type { MarketCollection } from '@0xsequence/api-client';
+import { compareAddress } from './address';
+
+/**
+ * Finds a market collection matching both the collection address and chain ID.
+ * Always use this instead of manually searching market.collections to avoid
+ * multi-chain bugs where the same collection address exists on different chains.
+ */
+export const findMarketCollection = (
+	collections: MarketCollection[],
+	collectionAddress: string,
+	chainId: string | number,
+): MarketCollection | undefined => {
+	return collections.find(
+		(collection) =>
+			compareAddress(collection.itemsAddress, collectionAddress) &&
+			Number(collection.chainId) === Number(chainId),
+	);
+};

package/src/utils/index.ts

@@ -1,6 +1,7 @@
 export * from './abi';
 export * from './address';
 export * from './cn';
+export * from './collection';
 export * from './getMarketplaceDetails';
 export * from './network';
 export * from './networkconfigToWagmiChain';