useDropAndReplaceUserOperation

Custom hook that handles the drop and replace user operation for a given client and mutation arguments.

Import

1import { useDropAndReplaceUserOperation } from "@account-kit/react";

Usage

1import React from "react";
2import {
3 useDropAndReplaceUserOperation,
4 useSendUserOperation,
5 useSmartAccountClient,
6} from "@account-kit/react";
7
8export 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}

Parameters

config

UseDropAndReplaceUserOperationArgs<TEntryPointVersion, TAccount> The configuration parameters including the client and other mutation arguments. ref

Returns

UseDropAndReplaceUserOperationResult<TEntryPointVersion, TAccount> The result containing the mutation function, result data, loading state, and any error. ref