@0xsequence/marketplace-sdk 0.4.0 → 0.4.2

package/src/react/_internal/transaction-machine/execute-transaction.ts

@@ -1,18 +1,10 @@
 import type { SelectPaymentSettings } from '@0xsequence/kit-checkout';
-import type {
-	Chain,
-	Hash,
-	Hex,
-	PublicClient,
-	TypedDataDomain,
-	WalletClient,
-} from 'viem';
+import type { Chain, Hash, Hex } from 'viem';
 import { avalanche, optimism } from 'viem/chains';
 import {
 	type AdditionalFee,
 	type SequenceMarketplace,
 	TransactionSwapProvider,
-	type WalletKind,
 	WebrpcError,
 	getMarketplaceClient,
 } from '..';
@@ -28,21 +20,16 @@ import {
 	StepType,
 } from '../../../types';
 import {
-	ChainIdUnavailableError,
 	ChainSwitchError,
 	CheckoutOptionsError,
-	InvalidSignatureStepError,
-	MissingPostStepError,
 	MissingSignatureDataError,
 	MissingStepDataError,
 	NoExecutionStepError,
 	NoStepsFoundError,
-	NoWalletConnectedError,
 	OrderNotFoundError,
 	OrdersFetchError,
 	PaymentModalError,
 	PaymentModalTransactionError,
-	SignatureExecutionError,
 	StepExecutionError,
 	StepGenerationError,
 	TransactionError,
@@ -51,6 +38,11 @@ import {
 	UnknownTransactionTypeError,
 } from '../../../utils/_internal/error/transaction';
 import { type TransactionLogger, createLogger } from './logger';
+import type {
+	SignatureStep,
+	TransactionStep as StepForTransaction,
+} from './utils';
+import type { WalletInstance } from './wallet';
 
 export enum TransactionState {
 	IDLE = 'IDLE',
@@ -74,13 +66,11 @@ export enum TransactionType {
 
 export interface TransactionConfig {
 	type: TransactionType;
-	walletKind: WalletKind;
 	chainId: string;
 	chains: readonly Chain[];
 	collectionAddress: string;
 	sdkConfig: SdkConfig;
 	marketplaceConfig: MarketplaceConfig;
-	isWaaS: boolean;
 	orderbookKind?: OrderbookKind;
 }
 
@@ -88,6 +78,7 @@ interface StateConfig {
 	config: TransactionConfig;
 	onTransactionSent?: (hash?: Hash, orderId?: string) => void;
 	onSuccess?: (hash: Hash) => void;
+	onApprovalSuccess?: (hash: Hash) => void;
 }
 
 export interface BuyInput {
@@ -147,9 +138,10 @@ type TransactionInput =
 			props: CancelInput;
 	  };
 
-interface TransactionStep {
+export interface TransactionStep {
 	isPending: boolean;
 	isExecuting: boolean;
+	isSuccess?: boolean;
 }
 
 export interface TransactionSteps {
@@ -176,12 +168,12 @@ export class TransactionMachine {
 
 	constructor(
 		private readonly config: StateConfig,
-		private readonly walletClient: WalletClient,
-		private readonly publicClient: PublicClient,
+		private readonly wallet: WalletInstance,
 		private readonly openSelectPaymentModal: (
 			settings: SelectPaymentSettings,
 		) => void,
 		private readonly switchChainFn: (chainId: string) => Promise<void>,
+		private readonly onPaymentModalLoaded?: () => void,
 	) {
 		this.currentState = TransactionState.IDLE;
 		this.logger = createLogger('TransactionMachine');
@@ -189,14 +181,7 @@ export class TransactionMachine {
 			config.config.chainId,
 			config.config.sdkConfig,
 		);
-	}
-
-	private getAccount() {
-		const account = this.walletClient.account;
-		if (!account) {
-			throw new NoWalletConnectedError();
-		}
-		return account;
+		this.onPaymentModalLoaded = onPaymentModalLoaded;
 	}
 
 	private getMarketplaceFee(collectionAddress: string) {
@@ -205,15 +190,17 @@ export class TransactionMachine {
 			'0x858dB1cbF6D09D447C96A11603189b49B2D1C219';
 		const avalancheAndOptimismPlatformFeeRecipient =
 			'0x400cdab4676c17aec07e8ec748a5fc3b674bca41';
+
+		const chainId = Number(this.config.config.chainId);
 		const collection = this.config.config.marketplaceConfig.collections.find(
 			(collection) =>
 				collection.collectionAddress.toLowerCase() ===
 					collectionAddress.toLowerCase() &&
-				this.getChainId() === Number(collection.chainId),
+				chainId === Number(collection.chainId),
 		);
 
 		const avalancheOrOptimism =
-			this.getChainId() === avalanche.id || this.getChainId() === optimism.id;
+			chainId === avalanche.id || chainId === optimism.id;
 		const receiver = avalancheOrOptimism
 			? avalancheAndOptimismPlatformFeeRecipient
 			: defaultPlatformFeeRecipient;
@@ -229,17 +216,13 @@ export class TransactionMachine {
 		} satisfies AdditionalFee;
 	}
 
-	private getAccountAddress() {
-		return this.getAccount().address;
-	}
-
 	private async generateSteps({
 		type,
 		props,
 	}: TransactionInput): Promise<Step[]> {
 		this.logger.debug('Generating steps', { type, props });
 		const { collectionAddress } = this.config.config;
-		const address = this.getAccountAddress();
+		const address = await this.wallet.address();
 
 		try {
 			switch (type) {
@@ -248,7 +231,7 @@ export class TransactionMachine {
 						.generateBuyTransaction({
 							collectionAddress,
 							buyer: address,
-							walletType: this.config.config.walletKind,
+							walletType: this.wallet.walletKind,
 							marketplace: props.marketplace,
 							ordersData: [
 								{
@@ -265,7 +248,7 @@ export class TransactionMachine {
 						.generateSellTransaction({
 							collectionAddress,
 							seller: address,
-							walletType: this.config.config.walletKind,
+							walletType: this.wallet.walletKind,
 							marketplace: props.marketplace,
 							ordersData: [
 								{
@@ -273,7 +256,7 @@ export class TransactionMachine {
 									quantity: props.quantity || '1',
 								},
 							],
-							additionalFees: [],
+							additionalFees: [this.getMarketplaceFee(collectionAddress)],
 						})
 						.then((resp) => resp.steps);
 
@@ -287,7 +270,7 @@ export class TransactionMachine {
 						.generateListingTransaction({
 							collectionAddress,
 							owner: address,
-							walletType: this.config.config.walletKind,
+							walletType: this.wallet.walletKind,
 							contractType: props.contractType,
 							orderbook: this.config.config.orderbookKind,
 							listing: props.listing,
@@ -304,7 +287,7 @@ export class TransactionMachine {
 						.generateOfferTransaction({
 							collectionAddress,
 							maker: address,
-							walletType: this.config.config.walletKind,
+							walletType: this.wallet.walletKind,
 							contractType: props.contractType,
 							orderbook: this.config.config.orderbookKind,
 							offer: props.offer,
@@ -343,51 +326,44 @@ export class TransactionMachine {
 		this.clearMemoizedSteps();
 	}
 
-	private getChainId(): number {
-		const chainId = this.walletClient.chain?.id;
-		if (!chainId) {
-			throw new ChainIdUnavailableError();
-		}
-		return chainId;
-	}
-
-	private getChainForTransaction() {
-		const chainId = this.config.config.chainId;
-		return this.config.config.chains.find(
-			(chain) => chain.id === Number(chainId),
-		);
-	}
-
-	private isOnCorrectChain() {
-		return this.getChainId() === Number(this.config.config.chainId);
-	}
-
-	private async switchChain(): Promise<void> {
+	private async switchChain() {
 		this.logger.debug('Checking chain', {
-			currentChain: this.getChainId(),
+			currentChain: await this.wallet.getChainId(),
 			targetChain: Number(this.config.config.chainId),
 		});
 
-		if (!this.isOnCorrectChain()) {
-			const currentChain = this.getChainId();
+		const correctChain = await this.isOnCorrectChain();
+
+		if (!correctChain) {
+			const currentChain = await this.wallet.getChainId();
 			const targetChain = Number(this.config.config.chainId);
 
 			await this.transition(TransactionState.SWITCH_CHAIN);
 			try {
-				if (!this.config.config.isWaaS) {
+				if (this.wallet.isWaaS) {
+					await this.wallet.switchChain(targetChain);
+				} else {
 					await this.switchChainFn(this.config.config.chainId);
 				}
 
-				await this.walletClient.switchChain({
-					id: Number(this.config.config.chainId),
-				});
-				this.logger.debug('Switched chain');
+				if (!this.isOnCorrectChain()) {
+					throw new Error('Chain switch verification failed');
+				}
+
+				this.logger.debug('Switched chain successfully');
 			} catch (error) {
+				this.logger.debug('Chain switch failed', error);
 				throw new ChainSwitchError(currentChain, targetChain);
 			}
 		}
 	}
 
+	private async isOnCorrectChain() {
+		return (
+			(await this.wallet.getChainId()) === Number(this.config.config.chainId)
+		);
+	}
+
 	async start(props: Input) {
 		this.logger.debug('Starting transaction', props);
 
@@ -406,23 +382,41 @@ export class TransactionMachine {
 		await this.transition(TransactionState.SUCCESS);
 	}
 
-	private async handleTransactionSuccess(hash?: Hash) {
+	private async handleTransactionSuccess(
+		hash?: Hash,
+		isApproval?: boolean,
+		orderId?: string,
+	) {
 		if (!hash) {
 			// TODO: This is to handle signature steps, but it's not ideal
 			await this.transition(TransactionState.SUCCESS);
+			this.config.onTransactionSent?.(undefined, orderId);
 			return;
 		}
+
 		await this.transition(TransactionState.CONFIRMING);
-		this.config.onTransactionSent?.(hash);
+
+		// Only notify of transaction sent, don't show success toast yet
+		if (!isApproval) {
+			this.config.onTransactionSent?.(hash);
+		}
 
 		try {
-			const receipt = await this.publicClient.waitForTransactionReceipt({
+			const receipt = await this.wallet.handleConfirmTransactionStep(
 				hash,
-			});
+				await this.wallet.getChainId(),
+			);
 			this.logger.debug('Transaction confirmed', receipt);
 
 			await this.transition(TransactionState.SUCCESS);
-			this.config.onSuccess?.(hash);
+
+			// Only trigger success notification for the final confirmation
+			if (isApproval) {
+				this.config.onApprovalSuccess?.(hash);
+			} else {
+				console.log('onSuccess', hash);
+				this.config.onSuccess?.(hash);
+			}
 		} catch (error) {
 			throw new TransactionReceiptError(hash, error as Error);
 		}
@@ -432,19 +426,21 @@ export class TransactionMachine {
 		try {
 			await this.switchChain();
 
-			const transactionData = {
-				account: this.getAccount(),
-				chain: this.getChainForTransaction(),
-				to: step.to as Hex,
-				data: step.data as Hex,
-				value: BigInt(step.value || '0'),
-			};
+			if (step.id === StepType.tokenApproval) {
+				await this.transition(TransactionState.TOKEN_APPROVAL);
+			}
 
-			this.logger.debug('Executing transaction', transactionData);
-			const hash = await this.walletClient.sendTransaction(transactionData);
+			this.logger.debug('Executing transaction', step);
+			const hash = await this.wallet.handleSendTransactionStep(
+				Number(this.config.config.chainId),
+				step as StepForTransaction,
+			);
 			this.logger.debug('Transaction submitted', { hash });
 
-			await this.handleTransactionSuccess(hash);
+			await this.handleTransactionSuccess(
+				hash,
+				step.id === StepType.tokenApproval,
+			);
 			return hash;
 		} catch (error) {
 			throw new StepExecutionError(step.id, error as Error);
@@ -452,48 +448,27 @@ export class TransactionMachine {
 	}
 
 	private async executeSignature(step: Step) {
-		this.logger.debug('Executing signature', { stepId: step.id });
-		if (!step.post) {
-			throw new MissingPostStepError();
-		}
-
 		await this.switchChain();
 
-		let signature: Hex;
 		if (!step.signature) {
 			throw new MissingSignatureDataError();
 		}
 
-		switch (step.id) {
-			case StepType.signEIP712:
-				signature = await this.walletClient.signTypedData({
-					domain: step.signature.domain as TypedDataDomain,
-					types: step.signature.types,
-					primaryType: step.signature.primaryType,
-					account: this.getAccountAddress(),
-					message: step.signature.value,
-				});
-				break;
-			case StepType.signEIP191:
-				signature = await this.walletClient.signMessage({
-					message: step.data,
-					account: step.to as Hex,
-				});
-				break;
-			default:
-				throw new InvalidSignatureStepError(step.id);
-		}
-
 		try {
-			const { orderId } = await this.marketplaceClient.execute({
-				signature,
+			const signature = await this.wallet.handleSignMessageStep(
+				step as SignatureStep,
+			);
+
+			const result = await this.marketplaceClient.execute({
+				signature: signature as string,
 				executeType: ExecuteType.order,
-				body: step.post.body,
+				body: step.post?.body,
 			});
 
-			this.config.onTransactionSent?.(undefined, orderId);
+			await this.handleTransactionSuccess(undefined, false, result.orderId);
 		} catch (error) {
-			throw new SignatureExecutionError(step.id, error as Error);
+			this.logger.error('Signature execution failed', { error });
+			throw new StepExecutionError(step.id, error as Error);
 		}
 	}
 
@@ -532,7 +507,7 @@ export class TransactionMachine {
 				const [checkoutOptions, orders] = await Promise.all([
 					this.marketplaceClient
 						.checkoutOptionsMarketplace({
-							wallet: this.getAccountAddress(),
+							wallet: await this.wallet.address(),
 							orders: [
 								{
 									contractAddress: this.config.config.collectionAddress,
@@ -569,7 +544,7 @@ export class TransactionMachine {
 				}
 
 				const paymentModalProps = {
-					chain: this.getChainId()!,
+					chain: this.config.config.chainId,
 					collectibles: [
 						{
 							tokenId: order.tokenId,
@@ -578,11 +553,11 @@ export class TransactionMachine {
 						},
 					],
 					currencyAddress: order.priceCurrencyAddress,
-					price: order.priceAmount,
+					price: step.value,
 					targetContractAddress: step.to,
 					txData: step.data as Hex,
 					collectionAddress: this.config.config.collectionAddress,
-					recipientAddress: this.getAccountAddress(),
+					recipientAddress: await this.wallet.address(),
 					enableMainCurrencyPayment: true,
 					enableSwapPayments: !!checkoutOptions.options?.swap?.includes(
 						TransactionSwapProvider.zerox,
@@ -591,6 +566,9 @@ export class TransactionMachine {
 				};
 
 				this.logger.debug('Opening payment modal', paymentModalProps);
+
+				this.onPaymentModalLoaded?.();
+
 				await this.openPaymentModalWithPromise(paymentModalProps);
 			} catch (error) {
 				if (error instanceof TransactionError) {
@@ -631,11 +609,6 @@ export class TransactionMachine {
 			}
 
 			const hash = await this.executeTransaction(step);
-
-			if (step.id !== StepType.tokenApproval) {
-				this.config.onSuccess?.(hash);
-			}
-
 			return { hash };
 		} catch (error) {
 			if (error instanceof TransactionError) {

package/src/react/_internal/transaction-machine/useTransactionMachine.ts

@@ -1,7 +1,6 @@
 import { useSelectPaymentModal } from '@0xsequence/kit-checkout';
 import type { Hash } from 'viem';
 import { useAccount, useSwitchChain, useWalletClient } from 'wagmi';
-import { getPublicRpcClient } from '../../../utils';
 import {
 	NoMarketplaceConfigError,
 	NoWalletConnectedError,
@@ -9,24 +8,39 @@ import {
 } from '../../../utils/_internal/error/transaction';
 import { useConfig, useMarketplaceConfig } from '../../hooks';
 import { useSwitchChainModal } from '../../ui/modals/_internal/components/switchChainModal';
-import { WalletKind } from '../api';
 import {
 	type Input,
 	type TransactionConfig,
 	TransactionMachine,
 } from './execute-transaction';
+import { wallet } from './wallet';
 
 export type UseTransactionMachineConfig = Omit<
 	TransactionConfig,
-	'sdkConfig' | 'marketplaceConfig' | 'walletKind' | 'chains' | 'isWaaS'
+	'sdkConfig' | 'marketplaceConfig' | 'walletKind' | 'chains'
 >;
 
-export const useTransactionMachine = (
-	config: UseTransactionMachineConfig,
-	onSuccess?: (hash: Hash) => void,
-	onError?: (error: TransactionError) => void,
-	onTransactionSent?: (hash?: Hash, orderId?: string) => void,
-) => {
+export const useTransactionMachine = ({
+	config,
+	enabled,
+	onSuccess,
+	onError,
+	onTransactionSent,
+	onApprovalSuccess,
+	onPaymentModalLoaded,
+}: {
+	config: UseTransactionMachineConfig;
+	enabled: boolean;
+	onSuccess?: (hash: Hash) => void;
+	onError?: (error: TransactionError) => void;
+	onTransactionSent?: (
+		hash?: Hash,
+		orderId?: string,
+		isApproval?: boolean,
+	) => void;
+	onApprovalSuccess?: (hash: Hash) => void;
+	onPaymentModalLoaded?: () => void;
+}) => {
 	const { data: walletClient, isLoading: walletClientIsLoading } =
 		useWalletClient();
 	const { show: showSwitchChainModal } = useSwitchChainModal();
@@ -40,11 +54,8 @@ export const useTransactionMachine = (
 	const { chains } = useSwitchChain();
 
 	const { connector, isConnected } = useAccount();
-	const walletKind =
-		connector?.id === 'sequence' ? WalletKind.sequence : WalletKind.unknown;
 
-	// TODO: remove this once we have a better way to check if the wallet is a WAAS wallet
-	const isWaaS = connector?.id.endsWith('waas') || false;
+	if (!enabled) return { machine: null, error: null, isLoading: false };
 
 	if (!isConnected) {
 		// No wallet connected, TODO: add some sort of state for this
@@ -75,21 +86,25 @@ export const useTransactionMachine = (
 		return { machine: null, error };
 	}
 
+	const walletInstance = wallet({
+		wallet: walletClient,
+		chains,
+		connector: connector!,
+	});
+
 	const machine = new TransactionMachine(
 		{
 			config: {
 				sdkConfig,
 				marketplaceConfig,
-				walletKind,
 				chains,
 				...config,
-				isWaaS,
 			},
 			onSuccess,
 			onTransactionSent,
+			onApprovalSuccess,
 		},
-		walletClient,
-		getPublicRpcClient(config.chainId),
+		walletInstance,
 		openSelectPaymentModal,
 		async () =>
 			new Promise((resolve, reject) => {
@@ -100,6 +115,7 @@ export const useTransactionMachine = (
 					onClose: reject,
 				});
 			}),
+		onPaymentModalLoaded,
 	);
 
 	return {

package/src/react/_internal/transaction-machine/utils.ts

@@ -0,0 +1,50 @@
+import type { TypedData, TypedDataDomain } from 'viem';
+import type { Hex } from 'viem';
+import { type PostRequest, type Signature, type Step, StepType } from '../api';
+
+export interface SignatureStep {
+	id: StepType.signEIP191 | StepType.signEIP712;
+	domain?: TypedDataDomain;
+	types?: TypedData;
+	primaryType?: string;
+	to: Hex; // TODO: This should not be here, its wrongly typed in webrpc
+	data: string;
+	value: string;
+	signature?: Signature;
+	post: PostRequest;
+}
+
+export interface TransactionStep {
+	id:
+		| StepType.buy
+		| StepType.sell
+		| StepType.cancel
+		| StepType.createOffer
+		| StepType.createListing;
+	data: Hex;
+	to: Hex;
+	value: Hex;
+	maxFeePerGas?: Hex;
+	maxPriorityFeePerGas?: Hex;
+	gas?: Hex;
+}
+export interface ApprovalStep {
+	id: StepType.tokenApproval;
+	data: string;
+	to: Hex;
+	value: string;
+}
+
+export function isSignatureStep(step: Step): step is SignatureStep {
+	return step.id === StepType.signEIP191 || step.id === StepType.signEIP712;
+}
+
+export function isTransactionStep(step: Step): step is TransactionStep {
+	return [
+		StepType.buy,
+		StepType.sell,
+		StepType.cancel,
+		StepType.createOffer,
+		StepType.createListing,
+	].includes(step.id);
+}