useSendTransaction

Description

This hook provides functionality to send either a single transaction or multiple transactions in batch. It uses the smart account client to process and send these transactions.

It supports both synchronous and asynchronous methods for sending transactions, making it versatile for various use cases.

Returns

• data (Hash | undefined): The hash of the transaction if it was successfully sent, otherwise undefined.

• error (Error | null): An error object if the transaction failed, otherwise null.

• isPending (boolean): A boolean indicating whether the transaction is currently pending.

• isSuccess (boolean): A boolean indicating whether the transaction was successfully sent.

• isError (boolean): A boolean indicating whether an error occurred during the transaction process.

• sendTransaction (SendTransactionMutate): A function that sends the transaction(s) without waiting for a result.

• sendTransactionAsync (SendTransactionMutateAsync): A function that sends the transaction(s) and returns a promise that resolves to the transaction hash.

Example

import { useSendTransaction } from "@cometh/connect-react-hooks";
import { useState } from "react";
import { parseEther, Address } from "viem";
 
export const TransactionSender = () => {
  const { sendTransaction, sendTransactionAsync, isLoading, isError, error, isSuccess, data } = useSendTransaction();
  const [recipient, setRecipient] = useState<Address>();
  const [amount, setAmount] = useState<string>("0");
 
  const handleSendTransaction = () => {
    if (recipient) {
      sendTransaction({
       calls: {
          to: recipient,
          value: parseEther(amount),
          data: "0x",
        }
      });
    }
  };
 
  const handleSendBatchTransactions = async () => {
    if (recipient) {
      try {
       const hash = await sendTransactionAsync({
         calls: [
           {
              to: recipient,
              value: parseEther(amount),
              data: "0x",
           },
           {
             to: recipient,
             value: parseEther((Number(amount) * 2).toString()),
             data: "0x",
           }
          ]
        });
        console.log("Batch transactions sent! Hash:", hash);
      } catch (error) {
        console.error("Error sending batch transactions:", error);
      }
    }
  };
 
  return (
    <div>
      <input
        placeholder="Recipient address"
        onChange={(e) => setRecipient(e.target.value as Address)}
      />
      <input
        type="number"
        placeholder="Amount in ETH"
        onChange={(e) => setAmount(e.target.value)}
      />
      <button onClick={handleSendTransaction} disabled={isLoading}>
        Send Transaction
      </button>
      <button onClick={handleSendBatchTransactions} disabled={isLoading}>
        Send Batch Transactions
      </button>
      {isError && <p>Error: {error.message}</p>}
      {isSuccess && <p>Transaction sent! Hash: {data}</p>}
    </div>
  );
};