useWaitForUserOperationTransaction

The useWaitForUserOperationTransaction hook enables waiting until a UserOperation that was sent on behalf of the user's Embedded Account eventually lands in a transaction.

Import

import { useWaitForUserOperationTransaction } from "@alchemy/aa-alchemy/react";

Usage

useWaitForUserOperationTransaction.tsx

import {
  useSendUserOperation,
  useSmartAccountClient,
  useWaitForUserOperationTransaction,
} from "@alchemy/aa-alchemy/react";
 
export function ComponentWithWaitForUOTxn() {
  /**
   * Assumes the app has context of a signer with an authenticated user
   * by using the `AlchemyAccountProvider` from `@alchemy/aa-alchemy/react`.
   */
  const { client } = useSmartAccountClient({
    type: "MultiOwnerModularAccount",
  });
  const { sendUserOperationAsync, isSendingUserOperation } =
    useSendUserOperation({
      client,
    });
  const {
    waitForUserOperationTransaction,
    isWaitingForUserOperationTransaction,
  } = useWaitForUserOperationTransaction({
    client,
    onSuccess: (hash) => {
      // [optional] Do something with the hash
    },
    onError: (error) => {
      // [optional] Do something with the error
    },
    // [optional] ...additional mutationArgs
  });
 
  return (
    <div>
      <button
        onClick={async () => {
          const { hash } = await sendUserOperationAsync({
            target: "0xTARGET_ADDRESS",
            data: "0x",
            value: 0n,
          });
 
          waitForUserOperationTransaction({
            hash: hash,
          });
        }}
        disabled={
          isSendingUserOperation || isWaitingForUserOperationTransaction
        }
      >
        {isSendingUserOperation
          ? "Sending..."
          : isWaitingForUserOperationTransaction
          ? "Waiting..."
          : "Send UO and wait for txn"}
      </button>
    </div>
  );
}

Params

client

AlchemySmartAccountClient | undefined A AlchemySmartAccountClient with methods to interact with an Alchemy smart account.

...mutationArgs

You can optionally specify any of the React Query useMutation parameters as parameters to this hook.

Return Type

import { type UseWaitForUserOperationTransactionResult } from "@alchemy/aa-alchemy/react";

Returns an object containing the following state.

waitForUserOperationTransaction

UseMutateFunction A React query mutation function to wait for a UserOperation's Transaction. It returns a transaction Hash.

It takes in WaitForUserOperationTxParameters which has the following type:

WaitForUserOperationTxParameters

types.ts

export type WaitForUserOperationTxParameters = {
  hash: Hex;
  /**
   * Exponential backoff paramters that can be used to override
   * the configuration on the client. If not provided, this method
   * will use the paramters passed via the `opts` parameter on the
   * smart account client.
   */
  retries?: {
    /**
     * the base retry interval or delay between requests
     */
    intervalMs: number;
    /**
     * the multiplier to exponentiate based on the number retries
     * setting this to one will result in a linear backoff
     */
    multiplier: number;
    /** the maximum number of retries before failing */
    maxRetries: number;
  };
};

waitForUserOperationTransactionResult

A transaction Hash type if the mutation has run successfully, undefined otherwise.

isWaitingForUserOperationTransaction

boolean A flag that determines whether the mutation is still running or not.

error

Error | null A field that relays any errors from the mutation. It is null if there is no error.