Transactions

Send transactions

This guide will teach you how to send a single EVM transaction. Smart Wallets make it easy!

Prerequisites

Implementation

Required SDK version: ^v4.62.2

Prerequisites

You can use the useSendCalls hook to send calls, followed by the useWaitForCallsStatus hook to wait for confirmation.

sendCalls.tsx
1import {
2  useSendCalls,
3  useSmartAccountClient,
4  useWaitForCallsStatus,
5} from "@account-kit/react";
6import { parseEther, toHex } from "viem";
7
8export default function SendCalls() {
9  const { client } = useSmartAccountClient({});
10
11  const { sendCalls, isSendingCalls, sendCallsResult } = useSendCalls({
12    client,
13  });
14
15  const {
16    data: statusResult,
17    isLoading: isWaitingForConfirmation,
18    error,
19  } = useWaitForCallsStatus({
20    client,
21    id: sendCallsResult?.ids[0],
22  });
23
24  const handleSend = async () => {
25    if (!client) {
26      throw new Error("Smart account client not connected");
27    }
28
29    sendCalls({
30      calls: [
31        {
32          to: "0x0000000000000000000000000000000000000000",
33          value: toHex(parseEther("0")),
34          data: "0x",
35        },
36      ],
37    });
38  };
39
40  return (
41    <div>
42      <button onClick={handleSend}>
43        {isSendingCalls ? "Sending..." : "Send"}
44      </button>
45      {sendCallsResult && (
46        <p>
47          {isWaitingForConfirmation
48            ? "Waiting for confirmation..."
49            : error
50              ? `Error: ${error}`
51              : !statusResult
52                ? "Timed out waiting for confirmation"
53                : `Result: ${statusResult.status}`}
54        </p>
55      )}
56    </div>
57  );
58}

See the useSendCalls SDK reference for full descriptions of the parameters used in the above example.

Advanced

If you need to encode function data (instead of just sending value), it is easy to do so using Viem or Foundry.

In React, you can use Viem to encode function call data.

Prerequisites

1import { useSendCalls, useSmartAccountClient } from "@account-kit/react";
2import { encodeFunctionData } from "viem";
3import { exampleAbi } from "./abi.ts";
4
5export default function SendCalls() {
6  const { client } = useSmartAccountClient({});
7  const { sendCalls, isSendingCalls } = useSendCalls({
8    client,
9  });
10
11  const handleSend = async () => {
12    if (!client) {
13      throw new Error("Smart account client not connected");
14    }
15
16    sendCalls({
17      calls: [
18        {
19          to: "0x0000000000000000000000000000000000000000",
20          data: encodeFunctionData({
21            abi: exampleAbi,
22            functionName: "mintTo",
23            args: [client.account.address],
24          }),
25        },
26      ],
27    });
28  };
29
30  return (
31    <button onClick={handleSend}>
32      {isSendingCalls ? "Sending..." : "Send"}
33    </button>
34  );
35}

Instead of using the sendCalls abstraction, you can prepare and send calls using underlying methods in React or using the JavaScript client. Usage of the capability will be the same as when using send calls. It is recommended to use prepareCalls if you want to inspect the prepared call prior to prompting the user for signature.

Required SDK version: ^v4.62.2

Prerequisites

You can use React hooks to prepare, sign, and send transactions.

sendCalls.tsx
1import {
2  usePrepareCalls,
3  useSmartAccountClient,
4  useSendPreparedCalls,
5  useSmartWalletClient,
6} from "@account-kit/react";
7import { parseEther, toHex } from "viem";
8
9export default function SendCalls() {
10  const { client } = useSmartAccountClient({});
11  const { prepareCallsAsync } = usePrepareCalls({ client });
12  const { sendPreparedCallsAsync } = useSendPreparedCalls({ client });
13  const smartWalletClient = useSmartWalletClient({
14    account: client?.account.address,
15  });
16
17  const handleSend = async () => {
18    if (!client || !smartWalletClient) {
19      throw new Error("Client not connected");
20    }
21
22    const preparedCalls = await prepareCallsAsync({
23      calls: [
24        {
25          to: "0x0000000000000000000000000000000000000000",
26          value: toHex(parseEther("0")),
27          data: "0x",
28        },
29      ],
30    });
31
32    console.log({ preparedCalls }); // Here you can inspect the prepared calls before signing.
33
34    const signedCalls =
35      await smartWalletClient.signPreparedCalls(preparedCalls);
36
37    const sentCalls = await sendPreparedCallsAsync(signedCalls);
38
39    console.log({ sentCalls });
40  };
41
42  return <button onClick={handleSend}>Send</button>;
43}

See the usePrepareCalls, useSendPreparedCalls, and useSmartWalletClient SDK reference for full descriptions of the parameters used in the above example.

Next steps

Build more:

Troubleshooting: