WIP - Transaction status modal and transaction flow

packages/sdk/src/react/_internal/transaction-machine/useTransactionMachine.ts

@@ -1,5 +1,5 @@
 import { useSelectPaymentModal } from '@0xsequence/kit-checkout';
-import type { Hash } from 'viem';
+import type { Hash, Hex } from 'viem';
 import { useAccount, useSwitchChain, useWalletClient } from 'wagmi';
 import { getPublicRpcClient } from '../../../utils';
 import { useConfig, useMarketplaceConfig } from '../../hooks';
@@ -8,47 +8,57 @@ import { WalletKind } from '../api';
 import {
 	type TransactionConfig,
 	TransactionMachine,
+	TransactionState,
 } from './execute-transaction';
+import { useState } from 'react';
+import { useTransactionStatusModal } from '../../ui/modals/_internal/components/transactionStatusModal';
 
 export type UseTransactionMachineConfig = Omit<
 	TransactionConfig,
 	'sdkConfig' | 'marketplaceConfig' | 'walletKind' | 'chains'
 >;
 
-export const useTransactionMachine = (
-	config: UseTransactionMachineConfig,
-	onSuccess?: (hash: Hash) => void,
-	onError?: (error: Error) => void,
-	onTransactionSent?: (hash: Hash) => void,
-) => {
+export const useTransactionMachine = ({
+	config,
+	closeActionModalCallback,
+	onSuccess,
+	onError,
+}: {
+	config: UseTransactionMachineConfig;
+	closeActionModalCallback?: () => void;
+	onSuccess?: (hash: Hash) => void;
+	onError?: (error: Error) => void;
+}) => {
+	const [transactionState, setTransactionState] =
+		useState<TransactionState>(null);
 	const { data: walletClient } = useWalletClient();
 	const { show: showSwitchChainModal } = useSwitchChainModal();
+	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	const sdkConfig = useConfig();
 	const { data: marketplaceConfig, error: marketplaceError } =
 		useMarketplaceConfig();
 	const { openSelectPaymentModal } = useSelectPaymentModal();
 	const { chains } = useSwitchChain();
-
-	const { connector } = useAccount();
+	const { connector, chainId: accountChainId } = useAccount();
 	const walletKind =
 		connector?.id === 'sequence' ? WalletKind.sequence : WalletKind.unknown;
 
 	if (marketplaceError) {
 		throw marketplaceError; //TODO: Add error handling
 	}
 
-	if (!walletClient || !marketplaceConfig) return null;
+	if (!walletClient || !marketplaceConfig || !accountChainId) return null;
 
-	return new TransactionMachine(
+	const transactionMachine = new TransactionMachine(
 		{
 			config: { sdkConfig, marketplaceConfig, walletKind, chains, ...config },
 			onSuccess,
 			onError,
-			onTransactionSent,
 		},
 		walletClient,
 		getPublicRpcClient(config.chainId),
 		openSelectPaymentModal,
+		accountChainId,
 		async (chainId) => {
 			return new Promise<void>((resolve, reject) => {
 				showSwitchChainModal({
@@ -59,8 +69,31 @@ export const useTransactionMachine = (
 					onError: (error) => {
 						reject(error);
 					},
+					onClose: () => {
+						closeActionModalCallback?.();
+						reject(new Error('User rejected chain switch'));
+					},
 				});
 			});
 		},
+		transactionState,
+		setTransactionState,
+		closeActionModalCallback ?? (() => {}),
+		({ hash, blocked }) => {
+			showTransactionStatusModal({
+				chainId: String(accountChainId),
+				collectionAddress: config.collectionAddress as Hex,
+				collectibleId: config.collectibleId as string,
+				hash: hash,
+				type: config.transactionInput.type,
+				callbacks: {
+					onError: onError,
+					onSuccess: onSuccess,
+				},
+				blocked,
+			});
+		},
 	);
+
+	return transactionMachine;
 };

packages/sdk/src/react/hooks/index.ts

@@ -25,5 +25,9 @@ export * from './useTransferTokens';
 export * from './useCheckoutOptions';
 export * from './useListCollections';
 export * from './useGenerateBuyTransaction';
-export * from './useCancelOrder';
-export * from './useBuyCollectable';
+
+export * from './useMakeOffer';
+export * from './useCreateListing';
+export * from './useBuy';
+export * from './useSell';
+export * from './useCancel';

packages/sdk/src/react/hooks/useBuy.tsx

@@ -0,0 +1,70 @@
+import {
+	useTransactionMachine,
+	UseTransactionMachineConfig,
+} from '../_internal/transaction-machine/useTransactionMachine';
+import {
+	BuyInput,
+	TransactionType,
+} from '../_internal/transaction-machine/execute-transaction';
+import { MarketplaceKind } from '../../types';
+import { ModalCallbacks } from '../ui/modals/_internal/types';
+
+export default function useBuy({
+	closeModalFn,
+	collectibleId,
+	collectionAddress,
+	chainId,
+	orderId,
+	collectableDecimals,
+	marketplace,
+	quantity,
+	callbacks,
+}: {
+	closeModalFn: () => void;
+	collectibleId: string;
+	collectionAddress: string;
+	chainId: string;
+	orderId: string;
+	collectableDecimals: number;
+	marketplace: MarketplaceKind;
+	quantity: string;
+	callbacks: ModalCallbacks;
+}) {
+	const buyProps = {
+		orderId,
+		collectableDecimals,
+		marketplace,
+		quantity,
+	} as BuyInput;
+	const machineConfig = {
+		transactionInput: {
+			type: TransactionType.BUY,
+			props: buyProps,
+		},
+		collectionAddress,
+		chainId,
+		collectibleId,
+		type: TransactionType.BUY,
+		fetchStepsOnInitialize: true,
+	} as UseTransactionMachineConfig;
+	const machine = useTransactionMachine({
+		config: machineConfig,
+		closeActionModalCallback: closeModalFn,
+		onSuccess: callbacks.onSuccess,
+		onError: callbacks.onError,
+	});
+
+	async function execute() {
+		if (!machine) return;
+
+		await machine.execute({
+			type: TransactionType.BUY,
+			props: buyProps,
+		});
+	}
+
+	return {
+		transactionState: machine?.transactionState,
+		execute,
+	};
+}

packages/sdk/src/react/hooks/useCancel.tsx

@@ -0,0 +1,51 @@
+import {
+	useTransactionMachine,
+	UseTransactionMachineConfig,
+} from '../_internal/transaction-machine/useTransactionMachine';
+import {
+	CancelInput,
+	TransactionType,
+} from '../_internal/transaction-machine/execute-transaction';
+import { ModalCallbacks } from '../ui/modals/_internal/types';
+
+export default function useCancel({
+	collectionAddress,
+	chainId,
+	collectibleId,
+	onSuccess,
+	onError,
+}: {
+	collectionAddress: string;
+	chainId: string;
+	collectibleId: string;
+	onSuccess?: ModalCallbacks['onSuccess'];
+	onError?: ModalCallbacks['onError'];
+}) {
+	const machineConfig = {
+		chainId: chainId,
+		collectionAddress: collectionAddress,
+		collectibleId: collectibleId,
+		// no token approval (neither for nfts nor erc20) is needed for cancel transaction, hence executing is done without checking approval step
+		fetchStepsOnInitialize: false,
+	} as UseTransactionMachineConfig;
+	const machine = useTransactionMachine({
+		config: machineConfig,
+		onSuccess,
+		onError,
+	});
+
+	async function execute(cancelProps: CancelInput) {
+		if (!machine) return;
+
+		await machine.execute({
+			type: TransactionType.CANCEL,
+			props: cancelProps,
+		});
+	}
+
+	return {
+		execute,
+		isLoading: machine?.transactionState?.transaction.executing,
+		executed: machine?.transactionState?.transaction.executed,
+	};
+}