@0xsequence/marketplace-sdk 2.0.0 → 2.0.2

package/src/react/hooks/utils/useEnsureCorrectChain.ts

@@ -26,13 +26,18 @@ export const useEnsureCorrectChain = () => {
 	const ensureCorrectChainAsync = useCallback(
 		async (targetChainId: number) => {
 			if (currentChainId === targetChainId) {
-				return Promise.resolve();
+				return true;
 			}
-			return switchChainAsync({ chainId: targetChainId }).catch(() => {
-				showSwitchChainErrorModal({
-					chainIdToSwitchTo: targetChainId,
+
+			return switchChainAsync({ chainId: targetChainId })
+				.then(() => true)
+				.catch(() => {
+					showSwitchChainErrorModal({
+						chainIdToSwitchTo: targetChainId,
+					});
+
+					return false;
 				});
-			});
 		},
 		[currentChainId, isWaaS, switchChainAsync, showSwitchChainErrorModal],
 	);

package/src/react/queries/collectible/market-list.ts

@@ -1,7 +1,7 @@
 import { isAddress } from 'viem';
 import type { Page } from '../../../types';
 import type { CardType } from '../../../types/types';
-import { compareAddress } from '../../../utils';
+import { findMarketCollection } from '../../../utils';
 import type {
 	ListCollectiblesRequest,
 	ListCollectiblesResponse,
@@ -37,8 +37,10 @@ export async function fetchListCollectibles(
 		params;
 	const marketplaceClient = getMarketplaceClient(config);
 	const marketplaceConfig = await fetchMarketplaceConfig({ config });
-	const isMarketCollection = marketplaceConfig?.market.collections.some(
-		(collection) => compareAddress(collection.itemsAddress, collectionAddress),
+	const isMarketCollection = !!findMarketCollection(
+		marketplaceConfig?.market.collections ?? [],
+		collectionAddress,
+		chainId,
 	);
 
 	// If it's not a market collection, return an empty list. those collections are not compatible with the ListCollectibles endpoint.

package/src/react/queries/currency/list.ts

@@ -4,7 +4,7 @@ import type {
 	ListCurrenciesRequest,
 } from '@0xsequence/api-client';
 import { zeroAddress } from 'viem';
-import { compareAddress } from '../../../utils';
+import { compareAddress, findMarketCollection } from '../../../utils';
 import {
 	buildQueryOptions,
 	getMarketplaceClient,
@@ -50,15 +50,18 @@ export async function fetchMarketCurrencies(
 			marketplaceConfigOptions(config),
 		);
 
-		const currenciesOptions = marketplaceConfig.market.collections.find(
-			(collection) =>
-				compareAddress(collection.itemsAddress, collectionAddress),
+		const currenciesOptions = findMarketCollection(
+			marketplaceConfig.market.collections,
+			collectionAddress,
+			chainId,
 		)?.currencyOptions;
 
 		// Filter currencies based on collection currency options
 		if (currenciesOptions) {
 			currencies = currencies.filter((currency) =>
-				currenciesOptions.includes(currency.contractAddress),
+				currenciesOptions.some((option) =>
+					compareAddress(option, currency.contractAddress),
+				),
 			);
 		}
 	}

package/src/react/queries/inventory/inventory.ts

@@ -7,7 +7,7 @@ import type {
 import { ContractType, MetadataStatus } from '@0xsequence/api-client';
 import { isAddress } from 'viem';
 import type { Page } from '../../../types';
-import { compareAddress } from '../../../utils';
+import { findMarketCollection } from '../../../utils';
 import {
 	buildQueryOptions,
 	getQueryClient,
@@ -148,8 +148,10 @@ export async function fetchInventory(
 
 	const marketCollections = marketplaceConfig?.market.collections || [];
 
-	const isMarketCollection = marketCollections.some((collection) =>
-		compareAddress(collection.itemsAddress, collectionAddress),
+	const isMarketCollection = !!findMarketCollection(
+		marketCollections,
+		collectionAddress,
+		chainId,
 	);
 
 	// Determine if this collection is tradable (market collection vs shop collection)

package/src/react/queries/marketplace/filters.ts

@@ -1,7 +1,7 @@
 import type { GetFiltersArgs, PropertyFilter } from '@0xsequence/api-client';
 import { isAddress } from 'viem';
 import { FilterCondition } from '../../../types';
-import { compareAddress } from '../../../utils';
+import { findMarketCollection } from '../../../utils';
 import {
 	buildQueryOptions,
 	getMetadataClient,
@@ -49,8 +49,10 @@ export async function fetchFilters(
 	const marketplaceConfig = await queryClient.fetchQuery(
 		marketplaceConfigOptions(config),
 	);
-	const collectionFilters = marketplaceConfig.market.collections.find((c) =>
-		compareAddress(c.itemsAddress, collectionAddress),
+	const collectionFilters = findMarketCollection(
+		marketplaceConfig.market.collections,
+		collectionAddress,
+		chainId,
 	)?.filterSettings;
 
 	const filterOrder = collectionFilters?.filterOrder;

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

@@ -10,12 +10,8 @@ import {
 	Text,
 } from '@0xsequence/design-system';
 import { TrailsWidget } from '0xtrails/widget';
-import {
-	getSequenceApiUrl,
-	getSequenceIndexerUrl,
-	getSequenceNodeGatewayUrl,
-	getTrailsApiUrl,
-} from '../../../../_internal/api/services';
+import { useRef, useState } from 'react';
+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';
@@ -26,7 +22,6 @@ import { TRAILS_CUSTOM_CSS } from './TrailsCss';
 
 export const BuyModalContent = () => {
 	const {
-		config,
 		modalProps,
 		close,
 		steps,
@@ -34,10 +29,12 @@ export const BuyModalContent = () => {
 		marketOrder,
 		collectible,
 		buyStep,
+		trailsDestination,
 		isLoading,
 		collection,
 		checkoutMode,
 		formattedAmount,
+		isMarket,
 		isShop,
 		handleTrailsSuccess,
 		handleTransactionSuccess,
@@ -48,20 +45,15 @@ export const BuyModalContent = () => {
 		? primarySaleItem?.currencyAddress
 		: marketOrder?.priceCurrencyAddress;
 
-	const trailsApiUrl = getTrailsApiUrl(config);
-	const sequenceIndexerUrl = getSequenceIndexerUrl(config);
-	const sequenceNodeGatewayUrl = getSequenceNodeGatewayUrl(config);
-	const sequenceApiUrl = getSequenceApiUrl(config);
-
 	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 +93,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>
 					)}
 
@@ -123,6 +112,7 @@ export const BuyModalContent = () => {
 					{!isLoading &&
 						checkoutMode === 'trails' &&
 						buyStep &&
+						(!isMarket || trailsDestination) &&
 						!(isShop && primarySaleItem?.priceAmount === 0n) && (
 							<div className="pointer-events-auto w-full">
 								{collectible && (
@@ -133,25 +123,37 @@ export const BuyModalContent = () => {
 									/>
 								)}
 
-								<TrailsWidget
-									apiKey={config.projectAccessKey}
-									trailsApiUrl={trailsApiUrl}
-									sequenceIndexerUrl={sequenceIndexerUrl}
-									sequenceNodeGatewayUrl={sequenceNodeGatewayUrl}
-									sequenceApiUrl={sequenceApiUrl}
-									walletConnectProjectId={config.walletConnectProjectId}
-									toChainId={modalProps.chainId}
-									toAddress={buyStep.to}
-									toToken={currencyAddress}
-									toCalldata={buyStep.data}
-									toAmount={formattedAmount}
-									renderInline={true}
-									theme="dark"
-									mode="pay"
-									customCss={TRAILS_CUSTOM_CSS}
-									onDestinationConfirmation={handleTrailsSuccess}
-									payMessage="{TO_TOKEN_IMAGE}{TO_AMOUNT}{TO_TOKEN_SYMBOL}{TO_AMOUNT_USD}"
-								/>
+								{isMarket && trailsDestination ? (
+									<TrailsWidget
+										key={`market-${marketOrder?.orderId}-${trailsDestination.destinationCalldata}`}
+										toChainId={modalProps.chainId}
+										toAddress={trailsDestination.recipient}
+										toToken={trailsDestination.paymentTokenAddress}
+										toAmount={formattedAmount}
+										toCalldata={trailsDestination.destinationCalldata}
+										renderInline={true}
+										theme="dark"
+										mode="pay"
+										customCss={TRAILS_CUSTOM_CSS}
+										onDestinationConfirmation={handleTrailsSuccess}
+										payMessage="{TO_TOKEN_IMAGE}{TO_AMOUNT}{TO_TOKEN_SYMBOL}{TO_AMOUNT_USD}"
+									/>
+								) : (
+									<TrailsWidget
+										key={`direct-${buyStep.to}-${buyStep.data}`}
+										toChainId={modalProps.chainId}
+										toAddress={buyStep.to}
+										toToken={currencyAddress}
+										toAmount={formattedAmount}
+										toCalldata={buyStep.data}
+										renderInline={true}
+										theme="dark"
+										mode="pay"
+										customCss={TRAILS_CUSTOM_CSS}
+										onDestinationConfirmation={handleTrailsSuccess}
+										payMessage="{TO_TOKEN_IMAGE}{TO_AMOUNT}{TO_TOKEN_SYMBOL}{TO_AMOUNT_USD}"
+									/>
+								)}
 							</div>
 						)}
 				</div>
@@ -159,3 +161,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/components/CryptoPaymentModal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Button, Spinner, Text } from '@0xsequence/design-system';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import type { Hex } from 'viem';
 import { getPresentableChainName } from '../../../../../utils/network';
 import type { Step } from '../../../../_internal';
@@ -39,13 +39,36 @@ export const CryptoPaymentModal = ({
 	} = useCryptoPaymentModalContext({ chainId, steps, onSuccess });
 
 	const { ensureCorrectChainAsync } = useEnsureCorrectChain();
+	const [pendingAction, setPendingAction] = useState<'approval' | 'buy' | null>(
+		null,
+	);
 	const [chainSwitchError, setChainSwitchError] = useState<{
 		title: string;
 		message: string;
 		details?: Error;
 	} | null>(null);
+	const isPendingApprovalReady =
+		pendingAction === 'approval' && isOnCorrectChain && canApprove;
+	const isPendingBuyReady = pendingAction === 'buy' && isOnCorrectChain && canBuy;
+	const isPendingAction = pendingAction !== null;
+
+	useEffect(() => {
+		if (!isPendingApprovalReady && !isPendingBuyReady) {
+			return;
+		}
+
+		setPendingAction(null);
+
+		void (pendingAction === 'approval' ? executeApproval() : executeBuy());
+	}, [
+		executeApproval,
+		executeBuy,
+		isPendingApprovalReady,
+		isPendingBuyReady,
+		pendingAction,
+	]);
 
-	const handleChainSwitchError = (error: Error) => {
+	const handleChainSwitchError = (error?: Error) => {
 		const chainName = getPresentableChainName(chainId);
 		setChainSwitchError({
 			title: 'Chain switch failed',
@@ -58,27 +81,59 @@ export const CryptoPaymentModal = ({
 		setChainSwitchError(null);
 	};
 
+	const executeAction = async (action: 'approval' | 'buy') => {
+		setPendingAction(null);
+
+		if (action === 'approval') {
+			await executeApproval();
+			return;
+		}
+
+		await executeBuy();
+	};
+
 	const executeWithChainSwitch = async (action: 'approval' | 'buy') => {
 		dismissChainSwitchError();
+
+		if (isOnCorrectChain) {
+			await executeAction(action);
+			return;
+		}
+
+		setPendingAction(action);
+
 		try {
-			await ensureCorrectChainAsync(chainId);
+			const didRequestChainSwitch = await ensureCorrectChainAsync(chainId);
+			if (!didRequestChainSwitch) {
+				setPendingAction(null);
+				handleChainSwitchError();
+			}
 		} catch (error) {
+			setPendingAction(null);
+
 			if (error instanceof Error) {
 				handleChainSwitchError(error);
+			} else {
+				handleChainSwitchError();
 			}
 		}
-
-		if (action === 'approval') {
-			await executeApproval();
-		} else {
-			await executeBuy();
-		}
 	};
 
+	const isWaitingForChainSwitch = isPendingAction && !isOnCorrectChain;
+	const isPreparingPendingAction = isPendingAction && isOnCorrectChain;
+
 	const approvalButtonLabel = isApproving ? (
 		<div className="flex items-center gap-2">
 			<Spinner size="sm" /> Approving Token...
 		</div>
+	) : isWaitingForChainSwitch && pendingAction === 'approval' ? (
+		<div className="flex items-center gap-2">
+			<Spinner size="sm" /> Switching Network...
+		</div>
+	) : isPreparingPendingAction && pendingAction === 'approval' ? (
+		<div className="flex items-center gap-2">
+			<Spinner size="sm" /> Preparing Approval...
+		</div>
 	) : (
 		'Approve Token'
 	);
@@ -87,6 +142,14 @@ export const CryptoPaymentModal = ({
 			<div className="flex items-center gap-2">
 				<Spinner size="sm" /> Confirming Purchase...
 			</div>
+		) : isWaitingForChainSwitch && pendingAction === 'buy' ? (
+			<div className="flex items-center gap-2">
+				<Spinner size="sm" /> Switching Network...
+			</div>
+		) : isPreparingPendingAction && pendingAction === 'buy' ? (
+			<div className="flex items-center gap-2">
+				<Spinner size="sm" /> Preparing Purchase...
+			</div>
 		) : (
 			'Buy now'
 		);
@@ -129,7 +192,7 @@ export const CryptoPaymentModal = ({
 						onClick={async () => {
 							await executeWithChainSwitch('approval');
 						}}
-						disabled={!canApprove}
+						disabled={!canApprove || isPendingAction}
 						variant="primary"
 						size="lg"
 						className="w-full"
@@ -143,7 +206,7 @@ export const CryptoPaymentModal = ({
 						onClick={async () => {
 							await executeWithChainSwitch('buy');
 						}}
-						disabled={!canBuy}
+						disabled={!canBuy || isPendingAction}
 						variant="primary"
 						size="lg"
 						className="w-full"

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

@@ -1,8 +1,26 @@
 'use client';
 
+import {
+	type WagmiAdapterOptions,
+	wagmiAdapter,
+} from '@0xtrails/adapter-wagmi';
+import { TrailsProvider } from '0xtrails/widget';
+import { useConfig as useWagmiConfig } from 'wagmi';
+import {
+	getSequenceApiUrl,
+	getSequenceIndexerUrl,
+	getSequenceNodeGatewayUrl,
+	getTrailsApiUrl,
+} from '../../../../_internal/api/services';
+import { useConfig } from '../../../../hooks';
+import { useWaasFeeOptions } from '../../../../hooks/utils/useWaasFeeOptions';
 import { useIsOpen } from '../store';
 import { BuyModalContent } from './BuyModalContent';
 
+type TrailsUseWaasFeeOptions = NonNullable<
+	NonNullable<WagmiAdapterOptions['sequence']>['useWaasFeeOptions']
+>;
+
 export const BuyModal = () => {
 	const isOpen = useIsOpen();
 
@@ -10,5 +28,48 @@ export const BuyModal = () => {
 		return null;
 	}
 
-	return <BuyModalContent />;
+	return <BuyModalWithTrailsProvider />;
+};
+
+const useTrailsWaasFeeOptions: TrailsUseWaasFeeOptions = ({
+	chainIdOverride,
+} = {}) => {
+	const config = useConfig();
+	const {
+		pendingFeeOptionConfirmation,
+		confirmPendingFeeOption,
+		rejectPendingFeeOption,
+	} = useWaasFeeOptions(chainIdOverride ?? 0, config);
+
+	return [
+		pendingFeeOptionConfirmation,
+		confirmPendingFeeOption,
+		rejectPendingFeeOption,
+	];
+};
+
+const BuyModalWithTrailsProvider = () => {
+	const config = useConfig();
+	const wagmiConfig = useWagmiConfig();
+
+	return (
+		<TrailsProvider
+			config={{
+				trailsApiKey: config.projectAccessKey,
+				trailsApiUrl: getTrailsApiUrl(config),
+				sequenceIndexerUrl: getSequenceIndexerUrl(config),
+				sequenceNodeGatewayUrl: getSequenceNodeGatewayUrl(config),
+				sequenceApiUrl: getSequenceApiUrl(config),
+				walletConnectProjectId: config.walletConnectProjectId,
+				adapters: [
+					wagmiAdapter({
+						wagmiConfig,
+						sequence: { useWaasFeeOptions: useTrailsWaasFeeOptions },
+					}),
+				],
+			}}
+		>
+			<BuyModalContent />
+		</TrailsProvider>
+	);
 };

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

@@ -5,7 +5,6 @@ import type { Hex } from 'viem';
 import { useAccount, usePublicClient, useWalletClient } from 'wagmi';
 import { useConfig } from '../../../..';
 import { getIndexerClient, type Step } from '../../../../_internal';
-import { useBuyModalData } from './useBuyModalData';
 
 // https://github.com/0xsequence/web-sdk/blob/620b6fe7681ae49efd4eb3fa7607ef01dd7ede54/packages/connect/src/utils/transactions.ts#L11-L19
 class FeeOptionInsufficientFundsError extends Error {
@@ -21,31 +20,25 @@ class FeeOptionInsufficientFundsError extends Error {
 type UseExecuteBundledTransactions = {
 	chainId: number;
 	approvalStep?: Step;
-	priceAmount: bigint;
 };
 
 const useExecuteBundledTransactions = ({
 	chainId,
 	approvalStep,
-	priceAmount,
 }: UseExecuteBundledTransactions) => {
 	const config = useConfig();
 	const [isExecuting, setIsExecuting] = useState(false);
 	const { address, connector } = useAccount();
-	const publicClient = usePublicClient();
+	const publicClient = usePublicClient({ chainId });
 	const { data: walletClient } = useWalletClient();
 	const indexerClient = getIndexerClient(chainId, config);
 
-	const { collection, currency } = useBuyModalData();
-
 	const isReady =
 		!!address &&
 		!!publicClient &&
 		!!walletClient &&
 		!!indexerClient &&
-		!!connector &&
-		!!collection?.address &&
-		priceAmount != null;
+		!!connector;
 
 	const executeBundledTransactions = async ({
 		step,
@@ -79,28 +72,22 @@ const useExecuteBundledTransactions = ({
 				throw new Error('Connector not found');
 			}
 
-			if (!collection?.address) {
-				throw new Error('Collection address not found');
-			}
+			const buildTransaction = (step: Step) => {
+				const value = step.value ? BigInt(step.value) : 0n;
 
-			if (priceAmount == null) {
-				throw new Error('Price amount not found');
-			}
+				return {
+					to: step.to,
+					data: step.data as Hex,
+					chainId,
+					...(value > 0n ? { value } : {}),
+				};
+			};
 
 			const approvalData = approvalStep
-				? {
-						to: approvalStep.to,
-						data: approvalStep.data as Hex,
-						chainId,
-					}
+				? buildTransaction(approvalStep)
 				: undefined;
 
-			const transactionData = {
-				to: step.to,
-				data: step.data as Hex,
-				chainId,
-				...(currency?.nativeCurrency ? { value: priceAmount } : {}),
-			};
+			const transactionData = buildTransaction(step);
 
 			const transactions = [
 				...(approvalData ? [approvalData] : []),

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 =