ReactUsing smart accounts

Send User Operations

Once your users have been authenticated, you can start sending user operations! Account Kit makes it really easy to send user operations using React hooks.

Sending user operations is really easy, since all you have to do is use the useSendUserOperation hook. If you want to sponsor the gas for a user, see our guide.

Single user operation

In the below example, we use ModularAccountV2 as the underlying Smart Contract type, which is our default and recommended account. To learn more about all the account options, check out our guide on choosing a smart account.

1import React from "react";
2import {
3  type UseSendUserOperationResult,
4  useSendUserOperation,
5  useSmartAccountClient,
6} from "@account-kit/react";
7
8export default function MyOpSenderComponent() {
9  const { client } = useSmartAccountClient({});
10
11  const { sendUserOperation, isSendingUserOperation } = useSendUserOperation({
12    client,
13    // optional parameter that will wait for the transaction to be mined before returning
14    waitForTxn: true,
15    onSuccess: ({ hash, request }) => {
16      // [optional] Do something with the hash and request
17    },
18    onError: (error) => {
19      // [optional] Do something with the error
20    },
21  });
22
23  return (
24    <div>
25      <button
26        onClick={() =>
27          sendUserOperation({
28            uo: {
29              target: "0xTARGET_ADDRESS",
30              data: "0x",
31              value: 0n,
32            },
33          })
34        }
35        disabled={isSendingUserOperation}
36      >
37        {isSendingUserOperation ? "Sending..." : "Send UO"}
38      </button>
39    </div>
40  );
41}

Batch user operation

It’s also possible to send user operations in batch using the same hook.

1import React from "react";
2import {
3  type UseSendUserOperationResult,
4  useSendUserOperation,
5  useSmartAccountClient,
6} from "@account-kit/react";
7
8export default function MyOpSenderComponent() {
9  const { client } = useSmartAccountClient({});
10
11  const { sendUserOperation, isSendingUserOperation } = useSendUserOperation({
12    client,
13    // optional parameter that will wait for the transaction to be mined before returning
14    waitForTxn: true,
15    onSuccess: ({ hash, request }) => {
16      // [optional] Do something with the hash and request
17    },
18    onError: (error) => {
19      // [optional] Do something with the error
20    },
21  });
22
23  return (
24    <div>
25      <button
26        onClick={() =>
27          sendUserOperation({
28            uo: [
29              {
30                target: "0xTARGET_ADDRESS",
31                data: "0x",
32                value: 0n,
33              },
34              {
35                target: "0xTARGET_ADDRESS",
36                data: "0x",
37                value: 0n,
38              },
39            ],
40          })
41        }
42        disabled={isSendingUserOperation}
43      >
44        {isSendingUserOperation ? "Sending..." : "Send UO"}
45      </button>
46    </div>
47  );
48}