|
| 1 | +# Tutorial — Batch multiple transactions from a smart account |
| 2 | + |
| 3 | +In this tutorial, you will deploy an ERC-4337 smart account and submit your first user operation — one that batches **multiple calls** into a single on-chain transaction. |
| 4 | + |
| 5 | +Batching is one of the core superpowers of smart accounts. Instead of asking the user to sign two transactions (e.g. an ERC-20 `approve` followed by a `swap`), you can bundle them into a single user operation that executes atomically: either everything succeeds, or nothing does. |
| 6 | + |
| 7 | +You will set up the necessary permissionless.js clients, build a batched user operation, fund the smart account with Sepolia ETH so it can pay its own gas, and then submit it on-chain with Pimlico's bundler. |
| 8 | + |
| 9 | +:::tip[Want gasless transactions instead?] |
| 10 | +If you'd rather have a paymaster sponsor the gas for your user, jump to [Tutorial 1 — Send your first gasless transaction](/guides/tutorials/tutorial-1). |
| 11 | +::: |
| 12 | + |
| 13 | +## Steps |
| 14 | + |
| 15 | +::::steps |
| 16 | + |
| 17 | +### Get a Pimlico API key |
| 18 | + |
| 19 | +[Create your API key](/guides/create-api-key) |
| 20 | + |
| 21 | +### Clone the Pimlico tutorial template repository |
| 22 | + |
| 23 | +We have created a [Pimlico tutorial template repository](https://github.com/pimlicolabs/tutorial-template) that you can use to get started. It comes set up with Typescript, viem, and permissionless.js. |
| 24 | + |
| 25 | +```bash |
| 26 | +git clone https://github.com/pimlicolabs/tutorial-template.git pimlico-tutorial-send-transaction |
| 27 | +cd pimlico-tutorial-send-transaction |
| 28 | +``` |
| 29 | + |
| 30 | +Now, let's install the dependencies: |
| 31 | + |
| 32 | +```bash |
| 33 | +npm install |
| 34 | +``` |
| 35 | + |
| 36 | +The main file we will be working with is `index.ts`. Let's run it to make sure everything is working: |
| 37 | + |
| 38 | +```bash |
| 39 | +npm start |
| 40 | +``` |
| 41 | + |
| 42 | +If everything has been set up correctly, you should see `Hello world!` printed to the console. |
| 43 | + |
| 44 | +### Create the public client and generate a private key |
| 45 | + |
| 46 | +The public client will be responsible for querying the blockchain. We will also use a Pimlico client to fetch gas prices from the bundler. |
| 47 | + |
| 48 | +Make sure to replace `YOUR_PIMLICO_API_KEY` in the code below with your actual Pimlico API key. |
| 49 | + |
| 50 | +Let's open up `index.ts`, and add the following to the bottom: |
| 51 | + |
| 52 | +```ts |
| 53 | +// [!include ~/snippets/send-transaction.ts:clients] |
| 54 | +``` |
| 55 | + |
| 56 | +### Create the `SmartAccount` instance |
| 57 | + |
| 58 | +For the purposes of this guide, we will be using [Safe](https://safe.global) accounts. This account is an ERC-4337 wallet controlled by a single EOA signer. |
| 59 | + |
| 60 | +:::tip[Tip] |
| 61 | +Want to learn more about using Safe accounts? Take a look at our [dedicated Safe guide](/references/permissionless/how-to/accounts/use-safe-account) |
| 62 | +::: |
| 63 | + |
| 64 | +To create the Safe account, we will use the `toSafeSmartAccount` utility function from permissionless.js. We need to specify the Safe version we are using as well as the global ERC-4337 EntryPoint address. For the signer, we will be using the previously generated private key. |
| 65 | + |
| 66 | +Add the following to the bottom of `index.ts`: |
| 67 | + |
| 68 | +```ts |
| 69 | +// [!include ~/snippets/send-transaction.ts:smartAccount] |
| 70 | +``` |
| 71 | + |
| 72 | +Let's run this code with `npm start`. You should see the smart account address printed to the console. |
| 73 | + |
| 74 | +```txt |
| 75 | +Smart account address: https://sepolia.etherscan.io/address/0x374b42bCFAcf85FDCaAB84774EA15ff36D42cdA7 |
| 76 | +``` |
| 77 | + |
| 78 | +:::info |
| 79 | +If you visit the address on Etherscan, you might notice that no contract is actually deployed to this address yet. This is because smart accounts are counterfactual, meaning that they are only deployed on-chain the first time you send a transaction through the account. |
| 80 | +::: |
| 81 | + |
| 82 | +### Fund the smart account with Sepolia ETH |
| 83 | + |
| 84 | +Since we are not using a paymaster in this tutorial, the smart account needs to pay its own gas. Send a small amount of Sepolia ETH (0.01 ETH is plenty) to the smart account address printed above. |
| 85 | + |
| 86 | +You can get Sepolia ETH from a public faucet, for example the [PoW Sepolia Faucet](https://sepolia-faucet.pk910.de/). |
| 87 | + |
| 88 | +:::note |
| 89 | +If you'd prefer to skip funding and have the gas sponsored instead, see [Tutorial 1](/guides/tutorials/tutorial-1), which uses Pimlico's verifying paymaster. |
| 90 | +::: |
| 91 | + |
| 92 | +### Create the bundler and smart account clients |
| 93 | + |
| 94 | +Now that we have a `SmartAccount` instance, we need to create a `SmartAccountClient` instance to be able to transact from it. `SmartAccountClient` is an almost drop-in replacement for a viem [`WalletClient`](https://viem.sh/docs/clients/wallet), but it also includes some additional functionality for interacting with smart accounts. |
| 95 | + |
| 96 | +We specify the `gasPrice` middleware function to fetch the gas price from the bundler that we will use to submit the user operation in the next step. We do **not** configure a paymaster — the smart account will pay for its own gas using the ETH you just sent it. |
| 97 | + |
| 98 | +Add the following to the bottom of `index.ts`: |
| 99 | + |
| 100 | +```typescript |
| 101 | +// [!include ~/snippets/send-transaction.ts:smartAccountClient] |
| 102 | +``` |
| 103 | + |
| 104 | +### Batch multiple calls in one user operation |
| 105 | + |
| 106 | +Finally, let's submit a batched user operation from the smart account. We will send **two calls** to `0xd8da6bf26964af9d7eed9e03e53415d37aa96045` (vitalik.eth) with different `callData`, packed into a single user operation. |
| 107 | + |
| 108 | +Instead of passing a single `to`/`data` pair, we pass an array of `calls` — the smart account will execute them atomically. |
| 109 | + |
| 110 | +Underneath the hood, the `SmartAccountClient` will build a user operation, sign it with the smart account's private key, and then submit it to the bundler. The bundler will then query for receipts until it sees the user operation included on-chain. |
| 111 | + |
| 112 | +Add the following to the bottom of `index.ts`: |
| 113 | + |
| 114 | +```typescript |
| 115 | +// [!include ~/snippets/send-transaction.ts:submit] |
| 116 | +``` |
| 117 | + |
| 118 | +:::tip[Real-world batching] |
| 119 | +In production, batching is how you deliver "one-click" UX for multi-step flows — for example, combining an ERC-20 `approve` and a DEX `swap` into a single signature, or minting an NFT and listing it for sale in one go. |
| 120 | +::: |
| 121 | + |
| 122 | +Let's run this code again with `npm start`. You should see the transaction hash bundling the user operation on-chain printed to the console. |
| 123 | + |
| 124 | +```txt |
| 125 | +User operation included: https://sepolia.etherscan.io/tx/0x7a2b61b4b7b6e9e66c459e3c9c24c7a292fc6c740533ce35dbf58710960cc0e5 |
| 126 | +``` |
| 127 | + |
| 128 | +You can now view the transaction on the Sepolia testnet explorer. By sending this user operation, you have: |
| 129 | +- Deployed the counterfactual smart account contract |
| 130 | +- Had this newly-deployed smart account verify the private key's signature |
| 131 | +- Paid for the user operation's gas fees from the smart account's own ETH balance |
| 132 | +- Executed **two calls atomically** in a single on-chain transaction |
| 133 | + |
| 134 | +All in a couple lines of code. |
| 135 | + |
| 136 | +Congratulations, you are now a pioneer of Account Abstraction! 🎉 |
| 137 | + |
| 138 | +Please [get in touch](https://t.me/pimlicoHQ) if you have any questions or if you'd like to share what you're building! |
| 139 | + |
| 140 | +:::: |
| 141 | + |
| 142 | +### Combined code |
| 143 | + |
| 144 | +If you want to see the complete code that combines all of the previous steps, we uploaded it to a [separate repository](https://github.com/pimlicolabs/tutorials). If you're looking to run it, remember to replace the API key with your own! |
0 commit comments