@0xsequence/marketplace-sdk 2.0.0 → 2.0.2

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,
+		});
+	});
+});

package/src/react/ui/modals/BuyModal/internal/buildTrailsMarketBuyActions.ts

@@ -0,0 +1,259 @@
+import {
+	type Address,
+	type ApprovalStep,
+	type BuyStep,
+	ContractType,
+	type Hash,
+	MarketplaceKind,
+	type Order,
+	type OrderbookKind,
+} from '@0xsequence/api-client';
+import { buildErc20Approve, type Call, self } from '0xtrails';
+import { encodeFunctionData, zeroAddress } from 'viem';
+import { getConduitAddressForOrderbook } from '../../../../../utils/getConduitAddressForOrderbook';
+import { normalizeMarketplaceKind } from '../../../../../utils/normalizeMarketplace';
+import { OPENSEA_CHAIN_CURRENCIES } from '../../_internal/constants/opensea-currencies';
+
+export type TrailsMarketBuyCall = Call;
+
+export type TrailsMarketBuyActions = {
+	calls: TrailsMarketBuyCall[];
+	paymentTokenAddress: Address;
+	paymentAmount: bigint;
+};
+
+type BuildTrailsMarketBuyActionsParams = {
+	chainId: number;
+	buyStep: BuyStep;
+	marketOrder: Order;
+	contractType: ContractType.ERC721 | ContractType.ERC1155;
+	recipientAddress: Address;
+	approvalStep?: ApprovalStep;
+	quantity?: bigint;
+};
+
+const WETH_ABI = [
+	{
+		type: 'function',
+		name: 'withdraw',
+		stateMutability: 'nonpayable',
+		inputs: [{ name: 'wad', type: 'uint256' }],
+		outputs: [],
+	},
+] as const;
+
+const ERC721_TRANSFER_FROM_ABI = [
+	{
+		type: 'function',
+		name: 'transferFrom',
+		stateMutability: 'nonpayable',
+		inputs: [
+			{ name: 'from', type: 'address' },
+			{ name: 'to', type: 'address' },
+			{ name: 'tokenId', type: 'uint256' },
+		],
+		outputs: [],
+	},
+] as const;
+
+const ERC1155_SAFE_TRANSFER_FROM_ABI = [
+	{
+		type: 'function',
+		name: 'safeTransferFrom',
+		stateMutability: 'nonpayable',
+		inputs: [
+			{ name: 'from', type: 'address' },
+			{ name: 'to', type: 'address' },
+			{ name: 'id', type: 'uint256' },
+			{ name: 'amount', type: 'uint256' },
+			{ name: 'data', type: 'bytes' },
+		],
+		outputs: [],
+	},
+] as const;
+
+const OPENSEA_FULFILL_WITHOUT_RECIPIENT_SELECTORS = new Set([
+	'0xfb0f3ee1', // fulfillBasicOrder(...)
+	'0xb1b747c3', // fulfillOrder(...)
+]);
+
+const isNativeCurrency = (currencyAddress: Address) =>
+	currencyAddress.toLowerCase() === zeroAddress;
+
+const getPaymentAmount = ({
+	buyStep,
+	marketOrder,
+	isErc20Payment,
+}: {
+	buyStep: BuyStep;
+	marketOrder: Order;
+	isErc20Payment: boolean;
+}) => {
+	if (isErc20Payment) {
+		return buyStep.price > 0n ? buyStep.price : marketOrder.priceAmount;
+	}
+
+	if (buyStep.value > 0n) {
+		return buyStep.value;
+	}
+
+	return buyStep.price > 0n ? buyStep.price : marketOrder.priceAmount;
+};
+
+const getWrappedNativeCurrencyAddress = (chainId: number) =>
+	OPENSEA_CHAIN_CURRENCIES[chainId.toString()]?.wrappedNativeCurrency.address as
+		| Address
+		| undefined;
+
+const buildWrappedNativeWithdrawCall = ({
+	wrappedNativeAddress,
+	amount,
+}: {
+	wrappedNativeAddress: Address;
+	amount: bigint;
+}): TrailsMarketBuyCall => ({
+	to: wrappedNativeAddress,
+	data: encodeFunctionData({
+		abi: WETH_ABI,
+		functionName: 'withdraw',
+		args: [amount],
+	}),
+});
+
+const isOpenSeaFulfillWithoutRecipient = (calldata: Hash) =>
+	OPENSEA_FULFILL_WITHOUT_RECIPIENT_SELECTORS.has(
+		calldata.slice(0, 10).toLowerCase(),
+	);
+
+const buildOpenSeaNftTransferCall = ({
+	marketOrder,
+	contractType,
+	recipientAddress,
+	quantity,
+}: {
+	marketOrder: Order;
+	contractType: ContractType.ERC721 | ContractType.ERC1155;
+	recipientAddress: Address;
+	quantity: bigint;
+}): TrailsMarketBuyCall | undefined => {
+	if (marketOrder.tokenId === undefined) {
+		return undefined;
+	}
+
+	const collectionAddress = marketOrder.collectionContractAddress as Address;
+	const executorAddress = self();
+
+	if (contractType === ContractType.ERC1155) {
+		return {
+			to: collectionAddress,
+			data: encodeFunctionData({
+				abi: ERC1155_SAFE_TRANSFER_FROM_ABI,
+				functionName: 'safeTransferFrom',
+				args: [
+					executorAddress,
+					recipientAddress,
+					marketOrder.tokenId,
+					quantity,
+					'0x',
+				],
+			}),
+		};
+	}
+
+	return {
+		to: collectionAddress,
+		data: encodeFunctionData({
+			abi: ERC721_TRANSFER_FROM_ABI,
+			functionName: 'transferFrom',
+			args: [executorAddress, recipientAddress, marketOrder.tokenId],
+		}),
+	};
+};
+
+export function buildTrailsMarketBuyActions({
+	chainId,
+	buyStep,
+	marketOrder,
+	contractType,
+	recipientAddress,
+	approvalStep,
+	quantity = 1n,
+}: BuildTrailsMarketBuyActionsParams): TrailsMarketBuyActions | undefined {
+	const calls: TrailsMarketBuyCall[] = [];
+	const currencyAddress = marketOrder.priceCurrencyAddress;
+	const isErc20Payment = !isNativeCurrency(currencyAddress);
+	const paymentAmount = getPaymentAmount({
+		buyStep,
+		marketOrder,
+		isErc20Payment,
+	});
+	let paymentTokenAddress = currencyAddress;
+
+	if (isErc20Payment && paymentAmount > 0n) {
+		if (approvalStep) {
+			calls.push({
+				to: approvalStep.to,
+				data: approvalStep.data,
+			});
+		} else {
+			const spenderAddress = getConduitAddressForOrderbook(
+				marketOrder.marketplace as unknown as OrderbookKind,
+			);
+
+			if (spenderAddress) {
+				calls.push(
+					buildErc20Approve({
+						tokenAddress: currencyAddress,
+						spender: spenderAddress,
+						amount: paymentAmount,
+					}),
+				);
+			}
+		}
+	} else if (!isErc20Payment) {
+		const wrappedNativeAddress = getWrappedNativeCurrencyAddress(chainId);
+		if (!wrappedNativeAddress) {
+			return undefined;
+		}
+
+		paymentTokenAddress = wrappedNativeAddress;
+		if (paymentAmount > 0n) {
+			calls.push(
+				buildWrappedNativeWithdrawCall({
+					wrappedNativeAddress,
+					amount: paymentAmount,
+				}),
+			);
+		}
+	}
+
+	calls.push({
+		to: buyStep.to,
+		data: buyStep.data,
+		...(!isErc20Payment && paymentAmount > 0n
+			? { value: paymentAmount, sweepTokens: [zeroAddress] }
+			: {}),
+	});
+
+	const isOpenSeaOrder =
+		normalizeMarketplaceKind(marketOrder.marketplace) ===
+		MarketplaceKind.opensea;
+	if (isOpenSeaOrder && isOpenSeaFulfillWithoutRecipient(buyStep.data)) {
+		const nftTransferCall = buildOpenSeaNftTransferCall({
+			marketOrder,
+			contractType,
+			recipientAddress,
+			quantity,
+		});
+
+		if (nftTransferCall) {
+			calls.push(nftTransferCall);
+		}
+	}
+
+	return {
+		calls,
+		paymentTokenAddress,
+		paymentAmount,
+	};
+}

package/src/react/ui/modals/BuyModal/internal/buyModalContext.ts

@@ -1,6 +1,14 @@
-import { ContractType, type Hash } from '@0xsequence/api-client';
-import { useSupportedChains } from '0xtrails';
+import {
+	type Address,
+	ContractType,
+	findApprovalStep,
+	findBuyStep,
+	type Hash,
+} from '@0xsequence/api-client';
+import { encodeDestinationCalls, useSupportedChains } from '0xtrails';
+import { useMemo } from 'react';
 import { type Chain, formatUnits } from 'viem';
+import { useAccount } from 'wagmi';
 import { TransactionType } from '../../../../_internal';
 import { useConfig } from '../../../../hooks';
 import { useBuyTransaction } from '../../../../hooks/transactions/useBuyTransaction';
@@ -10,15 +18,25 @@ import { useTransactionStatusModal } from '../../_internal/components/transactio
 import { useBuyModal } from '..';
 import { useBuyModalData } from '../hooks/useBuyModalData';
 import { useBuyModalProps } from '../store';
+import { buildTrailsMarketBuyActions } from './buildTrailsMarketBuyActions';
 import { determineCheckoutMode } from './determineCheckoutMode';
 
+type TrailsDestination = {
+	recipient: Address;
+	destinationCalldata: Hash;
+	paymentTokenAddress: Address;
+	paymentAmount: bigint;
+};
+
 export function useBuyModalContext() {
 	const config = useConfig();
 	const modalProps = useBuyModalProps();
 	const checkoutModeConfig: CheckoutMode = config.checkoutMode ?? 'trails';
 	const { close } = useBuyModal();
 	const transactionStatusModal = useTransactionStatusModal();
-	const { supportedChains, isLoadingChains } = useSupportedChains();
+	const { address: userWalletAddress } = useAccount();
+	const { data: supportedChains = [], isLoading: isLoadingChains } =
+		useSupportedChains();
 
 	const {
 		collectible,
@@ -34,16 +52,18 @@ export function useBuyModalContext() {
 		refetchQueries,
 	} = useBuyModalData();
 
+	const contractType =
+		collection?.type === ContractType.ERC1155
+			? ContractType.ERC1155
+			: ContractType.ERC721;
+
 	const transactionData = useBuyTransaction({
 		modalProps,
 		primarySalePrice: {
 			amount: primarySaleItem?.priceAmount,
 			currencyAddress: primarySaleItem?.currencyAddress,
 		},
-		contractType:
-			collection?.type === ContractType.ERC1155
-				? ContractType.ERC1155
-				: ContractType.ERC721,
+		contractType,
 	});
 	const steps = transactionData.data?.steps;
 	const canBeUsedWithTrails =
@@ -58,7 +78,47 @@ export function useBuyModalContext() {
 
 	const isLoading = isLoadingSteps || isLoadingChains || isBuyModalDataLoading;
 
-	const buyStep = steps?.find((step) => step.id === 'buy');
+	const buyStep = steps ? findBuyStep(steps) : undefined;
+	const approvalStep = steps ? findApprovalStep(steps) : undefined;
+
+	const trailsDestination = useMemo<TrailsDestination | undefined>(() => {
+		if (!isMarket || !marketOrder || !buyStep || !userWalletAddress) {
+			return undefined;
+		}
+
+		const trailsMarketBuyActions = buildTrailsMarketBuyActions({
+			chainId: modalProps.chainId,
+			buyStep,
+			marketOrder,
+			contractType,
+			recipientAddress: userWalletAddress,
+			approvalStep,
+		});
+		if (!trailsMarketBuyActions) {
+			return undefined;
+		}
+
+		const destination = encodeDestinationCalls({
+			calls: trailsMarketBuyActions.calls,
+			tokenAddress: trailsMarketBuyActions.paymentTokenAddress,
+			sweepTarget: userWalletAddress,
+		});
+
+		return {
+			recipient: destination.recipient,
+			destinationCalldata: destination.destinationCalldata,
+			paymentTokenAddress: trailsMarketBuyActions.paymentTokenAddress,
+			paymentAmount: trailsMarketBuyActions.paymentAmount,
+		};
+	}, [
+		approvalStep,
+		buyStep,
+		contractType,
+		isMarket,
+		marketOrder,
+		modalProps.chainId,
+		userWalletAddress,
+	]);
 
 	const checkoutMode = determineCheckoutMode({
 		checkoutModeConfig,
@@ -66,9 +126,16 @@ export function useBuyModalContext() {
 		canBeUsedWithTrails,
 	});
 
+	const paymentAmount =
+		trailsDestination?.paymentAmount ??
+		(buyStep
+			? buyStep.price > 0n
+				? buyStep.price
+				: buyStep.value
+			: undefined);
 	const formattedAmount =
-		currency?.decimals && buyStep?.price
-			? formatUnits(BigInt(buyStep.price), currency.decimals)
+		currency?.decimals !== undefined && paymentAmount !== undefined
+			? formatUnits(paymentAmount, currency.decimals)
 			: undefined;
 
 	const handleTransactionSuccess = (hash: Hash) => {
@@ -131,8 +198,10 @@ export function useBuyModalContext() {
 		collection,
 		primarySaleItem,
 		marketOrder,
+		isMarket,
 		isShop,
 		buyStep,
+		trailsDestination,
 		isLoading,
 		checkoutMode,
 		formattedAmount,