useDropAndReplaceUserOperation

function useDropAndReplaceUserOperation<TEntryPointVersion, TAccount>(
  config,
): UseDropAndReplaceUserOperationResult<TEntryPointVersion, TAccount>;

import React from "react";
import {
  useDropAndReplaceUserOperation,
  useSendUserOperation,
  useSmartAccountClient,
} from "@account-kit/react";
 
export function ComponentWithDropAndReplaceUO() {
  const { client } = useSmartAccountClient({});
 
  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({
            uo: {
              target: "0xTARGET_ADDRESS",
              data: "0x",
              value: 0n,
            },
          });
 
          dropAndReplaceUserOperation({
            uoToDrop: request,
          });
        }}
        disabled={isSendingUserOperation || isDroppingAndReplacingUserOperation}
      >
        {isSendingUserOperation
          ? "Sending..."
          : isDroppingAndReplacingUserOperation
            ? "Replacing..."
            : "Send then Replace UO"}
      </button>
    </div>
  );
}