Account Kit

Appearance

useDropAndReplaceUserOperation ​

The useDropAndReplaceUserOperation hook enables dropping and replaicng a User Operation sent from a user's Embedded Account.

WARNING

This requires your user to be logged in. See useAuthenticate for more details.

Import ​

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

Usage ​

tsx
import {
  useDropAndReplaceUserOperation,
  useSendUserOperation,
  useSmartAccountClient,
} from "@alchemy/aa-alchemy/react";

export function ComponentWithDropAndReplaceUO() {
  /**
   * 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 { dropAndReplaceUserOperation, isDroppingAndReplacingUserOperation } =
    useDropAndReplaceUserOperation({
      client,
      onSuccess: ({ hash, request }) => {
        // [optional] Do something with the hash and request
      },
      onError: (error) => {
        // [optional] Do something with the error
      },
      // [optional] ...additional mutationArgs
    });

  return (
    <div>
      <button
        onClick={async () => {
          const { request } = await sendUserOperationAsync({
            target: "0xTARGET_ADDRESS",
            data: "0x",
            value: 0n,
          });

          dropAndReplaceUserOperation({
            uoToDrop: request,
          });
        }}
        disabled={isSendingUserOperation || isDroppingAndReplacingUserOperation}
      >
        {isSendingUserOperation
          ? "Sending..."
          : isDroppingAndReplacingUserOperation
          ? "Replacing..."
          : "Send then Replace UO"}
      </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 ​

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

Returns an object containing the following state.

dropAndReplaceUserOperation ​

UseMutateFunction A React query mutation function to sign a message. It returns a SendUserOperationResult object.

SendUserOperationResult
ts
export type SendUserOperationResult<
  TEntryPointVersion extends EntryPointVersion = EntryPointVersion
> = {
  hash: Hash;
  request: UserOperationRequest<TEntryPointVersion>;
};

It takes in DropAndReplaceUserOperationParameters which has the following type:

DropAndReplaceUserOperationParameters
ts
export type DropAndReplaceUserOperationParameters<
  TAccount extends SmartContractAccount | undefined,
  TContext extends UserOperationContext | undefined =
    | UserOperationContext
    | undefined,
  TEntryPointVersion extends GetEntryPointFromAccount<TAccount> = GetEntryPointFromAccount<TAccount>
> = {
  uoToDrop: UserOperationRequest<TEntryPointVersion>;
} & GetAccountParameter<TAccount> &
  GetContextParameter<TContext> &
  UserOperationOverridesParameter<TEntryPointVersion>;

dropAndReplaceUserOperationResult ​

An object of the following SendUserOperationResult type if the mutation has run successfully, undefined otherwise:

SendUserOperationResult
ts
export type SendUserOperationResult<
  TEntryPointVersion extends EntryPointVersion = EntryPointVersion
> = {
  hash: Hash;
  request: UserOperationRequest<TEntryPointVersion>;
};

isDroppingAndReplacingUserOperation ​

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.