@0xsequence/marketplace-sdk 1.2.0 → 2.0.0

package/src/react/hooks/transactions/usePrimarySaleTransactionSteps.ts

@@ -0,0 +1,196 @@
+import type { Address } from '@0xsequence/api-client';
+import { type ContractType, type Step, StepType } from '@0xsequence/api-client';
+import { useQuery } from '@tanstack/react-query';
+import { encodeFunctionData, maxUint256, zeroAddress } from 'viem';
+import { useReadContract } from 'wagmi';
+import { ERC20_ABI } from '../../../utils/abi';
+import {
+	SalesContractVersion,
+	useSalesContractABI,
+} from '../contracts/useSalesContractABI';
+
+export type UsePrimarySaleTransactionStepsParams = {
+	chainId: number;
+	buyer: Address;
+	recipient?: Address;
+	salesContractAddress: Address;
+	tokenIds: bigint[];
+	amounts: number[];
+	maxTotal: bigint;
+	paymentToken: Address;
+	merkleProof?: string[];
+	contractType: ContractType.ERC721 | ContractType.ERC1155;
+	enabled?: boolean;
+};
+
+/**
+ * Hook to generate transaction steps for primary sale transactions (minting/shop)
+ * This directly creates steps without using generators
+ */
+export function usePrimarySaleTransactionSteps({
+	chainId,
+	buyer,
+	recipient,
+	salesContractAddress,
+	tokenIds,
+	amounts,
+	maxTotal,
+	paymentToken,
+	merkleProof = [],
+	contractType,
+	enabled = true,
+}: UsePrimarySaleTransactionStepsParams) {
+	const queryEnabled =
+		enabled &&
+		!!buyer &&
+		!!salesContractAddress &&
+		tokenIds.length > 0 &&
+		amounts.length > 0 &&
+		maxTotal !== undefined &&
+		contractType !== undefined &&
+		paymentToken !== undefined;
+	// Get the correct ABI version for this sales contract
+	const {
+		abi,
+		version,
+		isLoading: abiLoading,
+	} = useSalesContractABI({
+		contractAddress: salesContractAddress,
+		contractType,
+		chainId,
+		enabled,
+	});
+
+	// Check allowance if using ERC20
+	const { data: allowance, isLoading: allowanceLoading } = useReadContract({
+		address: paymentToken,
+		abi: ERC20_ABI,
+		functionName: 'allowance',
+		args: [buyer, salesContractAddress],
+		chainId,
+		query: {
+			enabled: enabled && !!buyer && paymentToken !== zeroAddress,
+		},
+	});
+
+	return useQuery<{ steps: Step[]; canBeUsedWithTrails: boolean }, Error>({
+		queryKey: [
+			'primary-sale-steps',
+			{
+				chainId,
+				salesContractAddress,
+				tokenIds,
+				amounts,
+				buyer,
+				maxTotal,
+				paymentToken,
+			},
+		],
+		// eslint-disable-next-line @typescript-eslint/require-await -- React Query expects async queryFn
+		queryFn: async () => {
+			if (!abi) {
+				throw new Error('Unable to determine sales contract ABI');
+			}
+
+			const steps: Step[] = [];
+
+			// Add approval step if needed
+			if (
+				paymentToken !== zeroAddress &&
+				allowance !== undefined &&
+				allowance < maxTotal
+			) {
+				const approvalCalldata = encodeFunctionData({
+					abi: ERC20_ABI,
+					functionName: 'approve',
+					args: [salesContractAddress, maxUint256],
+				});
+
+				steps.push({
+					id: StepType.tokenApproval,
+					data: approvalCalldata,
+					to: paymentToken,
+					value: 0n,
+					price: 0n,
+				});
+			}
+
+			// Format mint args based on version
+			const mintArgs = formatMintArgs({
+				recipient: recipient || buyer,
+				tokenIds,
+				amounts,
+				paymentToken,
+				maxTotal,
+				merkleProof,
+				version,
+			});
+
+			// Add mint step
+			const mintCalldata = encodeFunctionData({
+				abi,
+				functionName: 'mint',
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Type assertion needed due to complex ABI types
+				args: mintArgs as any,
+			});
+
+			steps.push({
+				id: StepType.buy,
+				data: mintCalldata,
+				to: salesContractAddress,
+				value: paymentToken === zeroAddress ? maxTotal : 0n,
+				price: maxTotal,
+			});
+
+			return {
+				steps,
+				canBeUsedWithTrails: true,
+			};
+		},
+		enabled: queryEnabled && !!abi && !abiLoading && !allowanceLoading,
+	});
+}
+
+/**
+ * Format mint arguments based on contract version
+ */
+function formatMintArgs({
+	recipient,
+	tokenIds,
+	amounts,
+	paymentToken,
+	maxTotal,
+	merkleProof,
+	version,
+}: {
+	recipient: Address;
+	tokenIds: bigint[];
+	amounts: number[];
+	paymentToken: Address;
+	maxTotal: bigint;
+	merkleProof: string[];
+	version: SalesContractVersion;
+}): unknown[] {
+	// V1 contracts have different argument order than V0
+	if (version === SalesContractVersion.V1) {
+		return [
+			recipient, // to
+			tokenIds, // tokenIds
+			amounts, // amounts
+			'0x', // data (empty bytes)
+			paymentToken, // expectedPaymentToken
+			maxTotal, // maxTotal
+			merkleProof, // proof
+		];
+	}
+
+	// V0 contracts
+	return [
+		recipient, // to
+		tokenIds, // tokenIds
+		amounts, // amounts
+		paymentToken, // expectedPaymentToken
+		maxTotal, // maxTotal
+		'0x', // data (empty bytes)
+	];
+}

package/src/react/hooks/transactions/useProcessStep.test.tsx

@@ -1,7 +1,12 @@
 import { renderHook } from '@test';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { useSendTransaction, useSignMessage, useSignTypedData } from 'wagmi';
-import { ExecuteType, StepType } from '../../_internal/api';
+import {
+	ExecuteType,
+	type SignatureStep,
+	StepType,
+	type TransactionStep,
+} from '../../_internal';
 import { useProcessStep } from './useProcessStep';
 
 vi.mock('wagmi', async (importOriginal) => {
@@ -64,9 +69,9 @@ describe('useProcessStep', () => {
 				id: StepType.buy,
 				to: '0x123',
 				data: '0xabc',
-				value: '0x0',
-				price: '0x0',
-			};
+				value: 0n,
+				price: 0n,
+			} as TransactionStep;
 
 			const response = await result.current.processStep(step, 1);
 
@@ -89,44 +94,14 @@ describe('useProcessStep', () => {
 				id: StepType.tokenApproval,
 				to: '0x456',
 				data: '0xdef',
-				value: '0x0',
-				price: '0x0',
-			};
+				value: 0n,
+				price: 0n,
+			} as TransactionStep;
 
 			const response = await result.current.processStep(step, 1);
 
 			expect(response).toEqual({ type: 'transaction', hash: mockHash });
 		});
-
-		it('should handle gas parameters', async () => {
-			const mockHash = '0x789ghi';
-			mockSendTransactionAsync.mockResolvedValue(mockHash);
-
-			const { result } = renderHook(() => useProcessStep());
-
-			const step = {
-				id: StepType.sell,
-				to: '0x789',
-				data: '0xghi',
-				value: '0x0',
-				price: '0x0',
-				maxFeePerGas: '0x100',
-				maxPriorityFeePerGas: '0x50',
-				gas: '0x5208',
-			};
-
-			await result.current.processStep(step, 1);
-
-			expect(mockSendTransactionAsync).toHaveBeenCalledWith({
-				chainId: 1,
-				to: '0x789',
-				data: '0xghi',
-				value: 0n,
-				maxFeePerGas: 256n,
-				maxPriorityFeePerGas: 80n,
-				gas: 21000n,
-			});
-		});
 	});
 
 	describe('signature steps', () => {
@@ -142,14 +117,14 @@ describe('useProcessStep', () => {
 				id: StepType.signEIP191,
 				data: 'Sign this message',
 				to: '0x0',
-				value: '0x0',
-				price: '0x0',
+				value: 0n,
+				price: 0n,
 				post: {
 					endpoint: '/api/order',
 					method: 'POST',
 					body: { test: 'data' },
 				},
-			};
+			} as SignatureStep;
 
 			const response = await result.current.processStep(step, 1);
 
@@ -181,8 +156,8 @@ describe('useProcessStep', () => {
 				id: StepType.signEIP712,
 				data: '0x0',
 				to: '0x0',
-				value: '0x0',
-				price: '0x0',
+				value: 0n,
+				price: 0n,
 				signature: {
 					domain: {
 						name: 'Test',
@@ -199,7 +174,7 @@ describe('useProcessStep', () => {
 					method: 'POST',
 					body: { test: 'data' },
 				},
-			};
+			} as SignatureStep;
 
 			const response = await result.current.processStep(step, 1);
 
@@ -217,24 +192,43 @@ describe('useProcessStep', () => {
 			});
 		});
 
-		it('should handle signature without post step', async () => {
-			const mockSignature = '0xsignatureonly';
+		it('should handle signature step with valid post', async () => {
+			const mockSignature = '0xsignaturevalid';
+			const mockOrderId = 'order-789';
 			mockSignMessageAsync.mockResolvedValue(mockSignature);
+			mockExecute.mockResolvedValue({ orderId: mockOrderId });
 
 			const { result } = renderHook(() => useProcessStep());
 
 			const step = {
 				id: StepType.signEIP191,
-				data: '0xabc',
+				data: 'Sign this message',
 				to: '0x0',
-				value: '0x0',
-				price: '0x0',
-			};
+				value: 0n,
+				price: 0n,
+				post: {
+					endpoint: '/api/create-order',
+					method: 'POST',
+					body: { orderData: 'test' },
+				},
+			} as SignatureStep;
 
 			const response = await result.current.processStep(step, 1);
 
-			expect(response).toEqual({ type: 'signature', signature: mockSignature });
-			expect(mockExecute).not.toHaveBeenCalled();
+			expect(response).toEqual({ type: 'signature', orderId: mockOrderId });
+			expect(mockSignMessageAsync).toHaveBeenCalledWith({
+				message: 'Sign this message',
+			});
+			expect(mockExecute).toHaveBeenCalledWith({
+				params: {
+					chainId: '1',
+					signature: mockSignature,
+					method: 'POST',
+					endpoint: '/api/create-order',
+					body: { orderData: 'test' },
+					executeType: ExecuteType.order,
+				},
+			});
 		});
 	});
 
@@ -246,12 +240,17 @@ describe('useProcessStep', () => {
 				id: 'unsupported' as any,
 				data: '0x0',
 				to: '0x0',
-				value: '0x0',
-				price: '0x0',
-			};
+				value: 0n,
+				price: 0n,
+				post: {
+					endpoint: '',
+					method: '',
+					body: {},
+				},
+			} as any;
 
 			await expect(result.current.processStep(step, 1)).rejects.toThrow(
-				'Unsupported step type: unsupported',
+				'Unsupported step type',
 			);
 		});
 
@@ -262,12 +261,17 @@ describe('useProcessStep', () => {
 				id: StepType.signEIP712,
 				data: '0x0',
 				to: '0x0',
-				value: '0x0',
-				price: '0x0',
-			};
+				value: 0n,
+				price: 0n,
+				post: {
+					endpoint: '',
+					method: '',
+					body: {},
+				},
+			} as unknown as SignatureStep;
 
 			await expect(result.current.processStep(step, 1)).rejects.toThrow(
-				'EIP712 step missing signature data',
+				'EIP-712 step missing signature data',
 			);
 		});
 	});

package/src/react/hooks/transactions/useProcessStep.ts

@@ -1,12 +1,12 @@
-import { type Hex, hexToBigInt, isHex, type TypedDataDomain } from 'viem';
+import { type Hex, isHex } from 'viem';
 import { useSendTransaction, useSignMessage, useSignTypedData } from 'wagmi';
 import {
 	ExecuteType,
-	getMarketplaceClient,
+	isTransactionStep,
 	type Step,
 	StepType,
-} from '../../_internal/api';
-import { isSignatureStep, isTransactionStep } from '../../_internal/utils';
+} from '../../_internal';
+import { getMarketplaceClient } from '../../_internal/api';
 import { useConfig } from '../config';
 
 type ProcessStepResult =
@@ -28,69 +28,67 @@ export const useProcessStep = () => {
 		if (isTransactionStep(step)) {
 			const hash = await sendTransactionAsync({
 				chainId,
-				to: step.to as Hex,
-				data: step.data as Hex,
-				value: hexToBigInt((step.value as Hex) || '0x0'),
-				...(step.maxFeePerGas && {
-					maxFeePerGas: hexToBigInt(step.maxFeePerGas as Hex),
-				}),
-				...(step.maxPriorityFeePerGas && {
-					maxPriorityFeePerGas: hexToBigInt(step.maxPriorityFeePerGas as Hex),
-				}),
-				...(step.gas && {
-					gas: hexToBigInt(step.gas as Hex),
-				}),
+				to: step.to,
+				data: step.data,
+				value: step.value,
 			});
 
 			return { type: 'transaction', hash };
 		}
 
-		// Signature steps - sign and execute API call
-		if (isSignatureStep(step)) {
-			let signature: Hex | undefined;
+		// EIP-191 Signature - plain text or hex message
+		if (step.id === StepType.signEIP191) {
+			const data = step.data;
+			const message = isHex(data) ? ({ raw: data } as const) : data;
+			const signature = await signMessageAsync({ message });
 
-			if (step.id === StepType.signEIP191) {
-				const message = isHex(step.data)
-					? { raw: step.data as Hex }
-					: step.data;
-				signature = await signMessageAsync({ message });
-			} else if (step.id === StepType.signEIP712) {
-				if (!step.signature) {
-					throw new Error('EIP712 step missing signature data');
-				}
-				signature = await signTypedDataAsync({
-					domain: step.signature.domain as TypedDataDomain,
-					types: step.signature.types,
-					primaryType: step.signature.primaryType,
-					message: step.signature.value,
-				});
-			}
+			// Call execute endpoint with signature
+			const result = await marketplaceClient.execute({
+				params: {
+					chainId: chainId.toString(),
+					signature,
+					method: step.post.method,
+					endpoint: step.post.endpoint,
+					body: step.post.body,
+					executeType: ExecuteType.order,
+				},
+			});
+
+			return { type: 'signature', orderId: result.orderId };
+		}
 
-			if (!signature) {
-				throw new Error('Failed to sign message');
+		// EIP-712 Typed Data Signature
+		if (step.id === StepType.signEIP712) {
+			// TypeScript can't narrow discriminated unions with complex types
+			// so we manually assert that signature is defined for EIP-712
+			if (!step.signature) {
+				throw new Error('EIP-712 step missing signature data');
 			}
 
-			// Call execute endpoint with signature
-			if (step.post) {
-				const result = await marketplaceClient.execute({
-					params: {
-						chainId: String(chainId),
-						signature,
-						method: step.post.method,
-						endpoint: step.post.endpoint,
-						body: step.post.body,
-						executeType: ExecuteType.order,
-					},
-				});
+			const signature = await signTypedDataAsync({
+				domain: step.signature.domain,
+				types: step.signature.types,
+				primaryType: step.signature.primaryType,
+				message: step.signature.value,
+			});
 
-				return { type: 'signature', orderId: result.orderId };
-			}
+			// Call execute endpoint with signature
+			const result = await marketplaceClient.execute({
+				params: {
+					chainId: chainId.toString(),
+					signature,
+					method: step.post.method,
+					endpoint: step.post.endpoint,
+					body: step.post.body,
+					executeType: ExecuteType.order,
+				},
+			});
 
-			// Some signature steps might not have post (edge case)
-			return { type: 'signature', signature };
+			return { type: 'signature', orderId: result.orderId };
 		}
 
-		throw new Error(`Unsupported step type: ${step.id}`);
+		// This should never be reached
+		throw new Error(`Unsupported step type: ${(step as Step).id}`);
 	};
 
 	return { processStep };

package/src/react/hooks/transactions/useTransactionExecution.test.tsx

@@ -0,0 +1,99 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Step } from '../../_internal';
+import { useProcessStep } from './useProcessStep';
+import { useTransactionExecution } from './useTransactionExecution';
+
+// Mock dependencies
+vi.mock('./useProcessStep');
+
+describe('useTransactionExecution', () => {
+	const mockProcessStep = vi.fn();
+
+	beforeEach(() => {
+		vi.resetAllMocks();
+		vi.mocked(useProcessStep).mockReturnValue({
+			processStep: mockProcessStep,
+		});
+	});
+
+	it('should execute steps in order and return results', async () => {
+		const steps: Step[] = [
+			{
+				id: 'step1',
+				type: 'transaction',
+				to: '0x1',
+				data: '0x',
+				value: '0',
+			} as any,
+			{
+				id: 'step2',
+				type: 'transaction',
+				to: '0x2',
+				data: '0x',
+				value: '0',
+			} as any,
+		];
+		const chainId = 1;
+
+		// Mock successful execution
+		mockProcessStep
+			.mockResolvedValueOnce({ type: 'transaction', hash: '0xhash1' })
+			.mockResolvedValueOnce({ type: 'transaction', hash: '0xhash2' });
+
+		const { result } = renderHook(() => useTransactionExecution());
+
+		const executionPromise = result.current.executeSteps(steps, chainId);
+
+		await expect(executionPromise).resolves.toEqual([
+			{ type: 'transaction', hash: '0xhash1' },
+			{ type: 'transaction', hash: '0xhash2' },
+		]);
+
+		expect(mockProcessStep).toHaveBeenCalledTimes(2);
+		expect(mockProcessStep).toHaveBeenNthCalledWith(1, steps[0], chainId);
+		expect(mockProcessStep).toHaveBeenNthCalledWith(2, steps[1], chainId);
+	});
+
+	it('should stop and throw if a step fails', async () => {
+		const steps: Step[] = [
+			{ id: 'step1', type: 'transaction' } as any,
+			{ id: 'step2', type: 'transaction' } as any,
+		];
+		const chainId = 1;
+
+		// First step succeeds, second fails
+		mockProcessStep
+			.mockResolvedValueOnce({ type: 'transaction', hash: '0xhash1' })
+			.mockRejectedValueOnce(new Error('Step execution failed'));
+
+		const { result } = renderHook(() => useTransactionExecution());
+
+		await expect(result.current.executeSteps(steps, chainId)).rejects.toThrow(
+			'Failed to execute step step2: Step execution failed',
+		);
+
+		expect(mockProcessStep).toHaveBeenCalledTimes(2);
+	});
+
+	it('should handle different result types', async () => {
+		const steps: Step[] = [
+			{ id: 'step1', type: 'transaction' } as any,
+			{ id: 'sign1', type: 'signature' } as any, // implicitly EIP-191 or 712 in real usage
+		];
+		const chainId = 137;
+
+		mockProcessStep
+			.mockResolvedValueOnce({ type: 'transaction', hash: '0xhash1' })
+			.mockResolvedValueOnce({ type: 'signature', signature: '0xsig' });
+
+		const { result } = renderHook(() => useTransactionExecution());
+
+		const output = await result.current.executeSteps(steps, chainId);
+
+		expect(output).toEqual([
+			{ type: 'transaction', hash: '0xhash1' },
+			{ type: 'signature', signature: '0xsig' },
+		]);
+	});
+});

package/src/react/hooks/transactions/useTransactionExecution.ts

@@ -0,0 +1,31 @@
+import type { Step } from '../../_internal';
+import { useProcessStep } from './useProcessStep';
+
+export function useTransactionExecution() {
+	const { processStep } = useProcessStep();
+
+	const executeSteps = async (steps: Step[], chainId: number) => {
+		const results = [];
+
+		for (const step of steps) {
+			try {
+				const result = await processStep(step, chainId);
+				results.push(result);
+
+				// Handle step-specific logic if needed
+				if (result.type === 'transaction' && step.id === 'tokenApproval') {
+					// Wait for approval confirmation before proceeding
+					// This is handled automatically by processStep
+				}
+			} catch (error) {
+				throw new Error(
+					`Failed to execute step ${step.id}: ${error instanceof Error ? error.message : 'Unknown error'}`,
+				);
+			}
+		}
+
+		return results;
+	};
+
+	return { executeSteps };
+}

package/src/react/hooks/transactions/useTransactionType.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { TransactionType } from '../../../types/transactions';
+import type { BuyModalProps } from '../../ui/modals/BuyModal/store';
+
+/**
+ * Hook to detect transaction type from modal props
+ * Returns TransactionType.PRIMARY_SALE for shop transactions,
+ * otherwise returns TransactionType.MARKET_BUY
+ */
+export function useTransactionType(modalProps: BuyModalProps) {
+	return useMemo(() => {
+		// Shop transactions are primary sales
+		if (modalProps.cardType === 'shop') {
+			return TransactionType.PRIMARY_SALE;
+		}
+
+		// Everything else is a market transaction
+		return TransactionType.MARKET_BUY;
+	}, [modalProps.cardType]);
+}