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

import React from "react";
import {
  type UseSendUserOperationResult,
  useSendUserOperation,
  useSmartAccountClient,
} from "@account-kit/react";
 
export default function MyOpSenderComponent() {
  const { client } = useSmartAccountClient({ type: "LightAccount" });
 
  const { sendUserOperation, isSendingUserOperation } = useSendUserOperation({
    client,
    // optional parameter that will wait for the transaction to be mined before returning
    waitForTxn: true,
    onSuccess: ({ hash, request }) => {
      // [optional] Do something with the hash and request
    },
    onError: (error) => {
      // [optional] Do something with the error
    },
  });
 
  return (
    <div>
      <button
        onClick={() =>
          sendUserOperation({
            uo: {
              target: "0xTARGET_ADDRESS",
              data: "0x",
              value: 0n,
            },
          })
        }
        disabled={isSendingUserOperation}
      >
        {isSendingUserOperation ? "Sending..." : "Send UO"}
      </button>
    </div>
  );
}

Batch user operation

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

import React from "react";
import {
  type UseSendUserOperationResult,
  useSendUserOperation,
  useSmartAccountClient,
} from "@account-kit/react";
 
export default function MyOpSenderComponent() {
  const { client } = useSmartAccountClient({ type: "LightAccount" });
 
  const { sendUserOperation, isSendingUserOperation } = useSendUserOperation({
    client,
    // optional parameter that will wait for the transaction to be mined before returning
    waitForTxn: true,
    onSuccess: ({ hash, request }) => {
      // [optional] Do something with the hash and request
    },
    onError: (error) => {
      // [optional] Do something with the error
    },
  });
 
  return (
    <div>
      <button
        onClick={() =>
          sendUserOperation({
            uo: [
              {
                target: "0xTARGET_ADDRESS",
                data: "0x",
                value: 0n,
              },
              {
                target: "0xTARGET_ADDRESS",
                data: "0x",
                value: 0n,
              },
            ],
          })
        }
        disabled={isSendingUserOperation}
      >
        {isSendingUserOperation ? "Sending..." : "Send UO"}
      </button>
    </div>
  );
}