useDropAndReplaceUserOperation

1
import React from "react";
2
import {
3
  useDropAndReplaceUserOperation,
4
  useSendUserOperation,
5
  useSmartAccountClient,
6
} from "@account-kit/react";
7
8
export function ComponentWithDropAndReplaceUO() {
9
  const { client } = useSmartAccountClient({});
10
11
  const { sendUserOperationAsync, isSendingUserOperation } =
12
    useSendUserOperation({
13
      client,
14
    });
15
  const { dropAndReplaceUserOperation, isDroppingAndReplacingUserOperation } =
16
    useDropAndReplaceUserOperation({
17
      client,
18
      onSuccess: ({ hash, request }) => {
19
        // [optional] Do something with the hash and request
20
      },
21
      onError: (error) => {
22
        // [optional] Do something with the error
23
      },
24
      // [optional] ...additional mutationArgs
25
    });
26
27
  return (
28
    <div>
29
      <button
30
        onClick={async () => {
31
          const { request } = await sendUserOperationAsync({
32
            uo: {
33
              target: "0xTARGET_ADDRESS",
34
              data: "0x",
35
              value: 0n,
36
            },
37
          });
38
39
          dropAndReplaceUserOperation({
40
            uoToDrop: request,
41
          });
42
        }}
43
        disabled={isSendingUserOperation || isDroppingAndReplacingUserOperation}
44
      >
45
        {isSendingUserOperation
46
          ? "Sending..."
47
          : isDroppingAndReplacingUserOperation
48
            ? "Replacing..."
49
            : "Send then Replace UO"}
50
      </button>
51
    </div>
52
  );
53
}