React NativeUsing 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 pretty straightforward. All you have to do is use the useSendUserOperation() hook from the @account-kit/react-native package.

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. You can also use a different account type (see other options here).

send-user-operation.tsx
1import React, { useState, useEffect } from "react";
2import { Alert, View, Button } from "react-native";
3import { User } from "@account-kit/signer";
4import {
5  createModularAccountV2Client,
6  ModularAccountV2,
7} from "@account-kit/smart-contracts";
8import {
9  useSendUserOperation,
10  useSmartAccountClient,
11} from "@account-kit/react-native";
12import { sepolia, alchemy } from "@account-kit/infra";
13import { SmartAccountClient } from "@aa-sdk/core";
14
15export default function MyOpSenderComponent() {
16  const { client } = useSmartAccountClient({});
17
18  const { sendUserOperation, isSendingUserOperation } = useSendUserOperation({
19    client,
20    waitForTxn: true,
21    onSuccess: ({ hash, request }) => {
22      // [optional] Do something with the hash and request
23    },
24    onError: (error) => {
25      // [optional] Do something with the error
26    },
27  });
28
29  const handleSendUserOperation = () => {
30    sendUserOperation({
31      uo: {
32        target: "0xTARGET_ADDRESS",
33        data: "0x",
34        value: 0n,
35      },
36    });
37  };
38
39  return (
40    <View>
41      <Button
42        onPress={handleSendUserOperation}
43        disabled={isSendingUserOperation}
44        title={isSendingUserOperation ? "Sending..." : "Send UO"}
45      />
46    </View>
47  );
48}

Batch user operation

To send multiple user operations in a single call, simply pass an array of user operations to the sendUserOperation method.

batch-user-operation-component.tsx
1import React, { useState, useEffect } from "react";
2import { Alert, View, Button } from "react-native";
3import { User } from "@account-kit/signer";
4import {
5  createModularAccountV2Client,
6  ModularAccountV2,
7} from "@account-kit/smart-contracts";
8import {
9  useSendUserOperation,
10  useSmartAccountClient,
11} from "@account-kit/react-native";
12import { sepolia, alchemy } from "@account-kit/infra";
13import { SmartAccountClient } from "@aa-sdk/core";
14
15export default function MyOpSenderComponent() {
16  const { client } = useSmartAccountClient({});
17
18  const { sendUserOperation, isSendingUserOperation } = useSendUserOperation({
19    client,
20    waitForTxn: true,
21    onSuccess: ({ hash, request }) => {
22      // [optional] Do something with the hash and request
23    },
24    onError: (error) => {
25      // [optional] Do something with the error
26    },
27  });
28
29  const handleSendBatchUserOperations = () => {
30    sendUserOperation({
31      uo: [
32        {
33          target: "0xTARGET_ADDRESS",
34          data: "0x",
35          value: 0n,
36        },
37        {
38          target: "0xTARGET_ADDRESS",
39          data: "0x",
40          value: 0n,
41        },
42      ],
43    });
44  };
45
46  return (
47    <View>
48      <Button
49        onPress={handleSendBatchUserOperations}
50        disabled={isSendingUserOperation}
51        title={isSendingUserOperation ? "Sending..." : "Send UO"}
52      />
53    </View>
54  );
55}