An extension to React Query's useMutation hook to execute ethers transactions. Examples using it and typechain.

example.ts

// example of using the usePause hook to log the transaction hash and the gas used
const { pause, isLoading: isPausing } = usePause({
  onTransaction: response => 
    console.log(
      "transaction: ", 
      response.hash
    ),
  onSuccess: receipt =>
    console.log(
      "gas used: ",
      receipt.gasUsed.toNumber().toLocaleString()
    ),
});

usePause.ts

import { MyToken } from "../../typechain-types";
import useTransactionMutation, {
	UseTransactionMutationOptions,
} from "../useTransactionMutation";

// example hook that call pause() on a MyToken contract
const usePause = (
	options?: UseTransactionMutationOptions<unknown, MyToken, unknown>
) => {
	const { mutate, ...result } = useTransactionMutation(
		contract => contract.pause(),
		options
	);

	return { pause: mutate, ...result };
};

export default usePause;

useTransactionMutation.ts

import {
	UseMutationOptions,
	useMutation,
	MutationFunction,
} from "@tanstack/react-query";
import {
	TransactionResponse,
	TransactionReceipt,
} from "@ethersproject/abstract-provider";

export type UseTransactionMutationOptions<
	TError = unknown,
	TVariables = void,
	TContext = unknown
> = UseMutationOptions<TransactionReceipt, TError, TVariables, TContext> & {
	onTransaction?: (
		response: TransactionResponse,
		variables: TVariables
	) => Promise<unknown> | unknown;
};

const useTransactionMutation = <
	TError = unknown,
	TVariables = void,
	TContext = unknown
>(
	mutationFn: MutationFunction<TransactionResponse, TVariables>,
	options?: UseTransactionMutationOptions<TError, TVariables, TContext>
) => {
	return useMutation<TransactionReceipt, TError, TVariables, TContext>(
		async data => {
			const response = await mutationFn(data);
			if (options?.onTransaction) options.onTransaction(response, data);
			return await response.wait();
		},
		options
	);
};

export default useTransactionMutation;