@0xsequence/marketplace-sdk 2.0.1 → 2.0.2

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/internal/__tests__/buildTrailsMarketBuyActions.test.ts

@@ -0,0 +1,213 @@
+import {
+	type BuyStep,
+	ContractType,
+	MarketplaceKind,
+	type Order,
+	StepType,
+} from '@0xsequence/api-client';
+import { encodeDestinationCalls } from '0xtrails';
+import { type Address, decodeFunctionData, erc20Abi, zeroAddress } from 'viem';
+import { describe, expect, it } from 'vitest';
+import { OPENSEA_SEAPORT_CONDUIT_ADDRESS } from '../../../../../../utils/getConduitAddressForOrderbook';
+import { buildTrailsMarketBuyActions } from '../buildTrailsMarketBuyActions';
+
+const BUY_TARGET = '0x1000000000000000000000000000000000000001' as Address;
+const USER_WALLET = '0x2000000000000000000000000000000000000002' as Address;
+const ERC20_CURRENCY = '0x3000000000000000000000000000000000000003' as Address;
+const COLLECTION_ADDRESS =
+	'0x4000000000000000000000000000000000000004' as Address;
+const SEAPORT_ADDRESS = '0x0000000000000068F116a894984e2DB1123eB395' as Address;
+const BASE_WETH = '0x4200000000000000000000000000000000000006' as Address;
+const OPENSEA_FULFILL_BASIC_ORDER_SELECTOR = '0xfb0f3ee1';
+
+const createBuyStep = (overrides: Partial<BuyStep> = {}): BuyStep =>
+	({
+		id: StepType.buy,
+		to: BUY_TARGET,
+		data: '0xabcdef',
+		value: 0n,
+		price: 100n,
+		...overrides,
+	}) as BuyStep;
+
+const createOrder = (overrides: Partial<Order> = {}): Order =>
+	({
+		orderId: 'order-1',
+		marketplace: MarketplaceKind.sequence_marketplace_v2,
+		collectionContractAddress: COLLECTION_ADDRESS,
+		tokenId: 7n,
+		priceCurrencyAddress: ERC20_CURRENCY,
+		priceAmount: 100n,
+		...overrides,
+	}) as Order;
+
+const build = (
+	overrides: {
+		buyStep?: Partial<BuyStep>;
+		marketOrder?: Partial<Order>;
+		contractType?: ContractType.ERC721 | ContractType.ERC1155;
+	} = {},
+) =>
+	buildTrailsMarketBuyActions({
+		chainId: 8453,
+		buyStep: createBuyStep(overrides.buyStep),
+		marketOrder: createOrder(overrides.marketOrder),
+		contractType: overrides.contractType ?? ContractType.ERC721,
+		recipientAddress: USER_WALLET,
+	});
+
+describe('buildTrailsMarketBuyActions', () => {
+	it('builds ERC20 approval and marketplace buy calls using the required payment amount', () => {
+		const result = build();
+
+		expect(result).toBeDefined();
+		expect(result?.paymentTokenAddress).toBe(ERC20_CURRENCY);
+		expect(result?.paymentAmount).toBe(100n);
+		expect(result?.calls).toHaveLength(2);
+		expect(result?.calls[0]).toMatchObject({
+			to: ERC20_CURRENCY,
+		});
+		expect(result?.calls[0]?.data).toMatch(/^0x095ea7b3/);
+		const approval = decodeFunctionData({
+			abi: erc20Abi,
+			data: result?.calls[0]?.data ?? '0x',
+		});
+		expect(approval.args[1]).toBe(100n);
+
+		expect(result?.calls[1]).toMatchObject({
+			to: BUY_TARGET,
+			data: '0xabcdef',
+		});
+		expect(result?.calls[1]?.value).toBe(undefined);
+
+		expect(() =>
+			encodeDestinationCalls({
+				calls: result?.calls ?? [],
+				tokenAddress: ERC20_CURRENCY,
+				sweepTarget: USER_WALLET,
+			}),
+		).not.toThrow();
+	});
+
+	it('encodes OpenSea ERC20 buys even when approval spender is the OpenSea conduit', () => {
+		const result = build({
+			buyStep: {
+				to: SEAPORT_ADDRESS,
+				data: OPENSEA_FULFILL_BASIC_ORDER_SELECTOR,
+			},
+			marketOrder: {
+				marketplace: MarketplaceKind.opensea,
+			},
+		});
+
+		expect(result).toBeDefined();
+		expect(result?.calls).toHaveLength(3);
+		const approval = decodeFunctionData({
+			abi: erc20Abi,
+			data: result?.calls[0]?.data ?? '0x',
+		});
+		expect(approval.args[0]).toBe(OPENSEA_SEAPORT_CONDUIT_ADDRESS);
+		expect(approval.args[1]).toBe(100n);
+		expect(result?.calls[1]).toMatchObject({
+			to: SEAPORT_ADDRESS,
+			data: OPENSEA_FULFILL_BASIC_ORDER_SELECTOR,
+		});
+		expect(result?.calls[2]?.to).toBe(COLLECTION_ADDRESS);
+		expect(result?.calls[2]?.data).toMatch(/^0x23b872dd/);
+
+		expect(() =>
+			encodeDestinationCalls({
+				calls: result?.calls ?? [],
+				tokenAddress: result?.paymentTokenAddress ?? ERC20_CURRENCY,
+				sweepTarget: USER_WALLET,
+			}),
+		).not.toThrow();
+	});
+
+	it('uses wrapped native currency for native marketplace buys', () => {
+		const result = build({
+			buyStep: {
+				value: 123n,
+				price: 0n,
+			},
+			marketOrder: {
+				priceCurrencyAddress: zeroAddress,
+				priceAmount: 123n,
+			},
+		});
+
+		expect(result).toBeDefined();
+		expect(result?.paymentTokenAddress).toBe(BASE_WETH);
+		expect(result?.paymentAmount).toBe(123n);
+		expect(result?.calls).toHaveLength(2);
+		expect(result?.calls[0]).toMatchObject({
+			to: BASE_WETH,
+		});
+		expect(result?.calls[0]?.data).toMatch(/^0x2e1a7d4d/);
+		expect(result?.calls[1]).toMatchObject({
+			to: BUY_TARGET,
+			data: '0xabcdef',
+			value: 123n,
+			sweepTokens: [zeroAddress],
+		});
+
+		expect(() =>
+			encodeDestinationCalls({
+				calls: result?.calls ?? [],
+				tokenAddress: result?.paymentTokenAddress ?? BASE_WETH,
+				sweepTarget: USER_WALLET,
+			}),
+		).not.toThrow();
+	});
+
+	it('wraps native OpenSea buys through WETH and appends an NFT transfer', () => {
+		const result = build({
+			buyStep: {
+				to: SEAPORT_ADDRESS,
+				data: OPENSEA_FULFILL_BASIC_ORDER_SELECTOR,
+				value: 123n,
+				price: 0n,
+			},
+			marketOrder: {
+				marketplace: MarketplaceKind.opensea,
+				priceCurrencyAddress: zeroAddress,
+				priceAmount: 123n,
+			},
+		});
+
+		expect(result?.paymentTokenAddress).toBe(BASE_WETH);
+		expect(result?.paymentAmount).toBe(123n);
+		expect(result?.calls).toHaveLength(3);
+		expect(result?.calls[0]?.data).toMatch(/^0x2e1a7d4d/);
+		expect(result?.calls[1]).toMatchObject({
+			to: SEAPORT_ADDRESS,
+			value: 123n,
+		});
+		expect(result?.calls[2]?.to).toBe(COLLECTION_ADDRESS);
+
+		expect(() =>
+			encodeDestinationCalls({
+				calls: result?.calls ?? [],
+				tokenAddress: result?.paymentTokenAddress ?? BASE_WETH,
+				sweepTarget: USER_WALLET,
+			}),
+		).not.toThrow();
+	});
+
+	it('falls back to order price as native value when the buy step value is empty', () => {
+		const result = build({
+			buyStep: { value: 0n, price: 0n },
+			marketOrder: {
+				priceCurrencyAddress: zeroAddress,
+				priceAmount: 123n,
+			},
+		});
+
+		expect(result?.paymentAmount).toBe(123n);
+		expect(result?.calls[1]).toMatchObject({
+			to: BUY_TARGET,
+			data: '0xabcdef',
+			value: 123n,
+		});
+	});
+});