Enabling users to pay gas fees with ERC-20 tokens enhances the user experience by removing the need to hold native tokens like ETH. This is especially useful for onboarding users who primarily hold stable coins or other ERC-20 assets.

​
Getting Started

1

Importing Dependencies

import { createGelatoSmartWalletClient, erc20 } from "@gelatonetwork/smartwallet";
import { gelato, kernel, safe } from "@gelatonetwork/smartwallet/accounts";
import { createWalletClient, createPublicClient, http, type Hex } from "viem";
import { generatePrivateKey, privateKeyToAccount } from "viem/accounts";
2

Setup Smart Account

You can set up a Smart Account as per your needs. In the case of Gelato, the Gelato Smart Account address will be the same as your EOA, enabling EIP-7702 features.

When using a Kernel Account, you have the option to use EIP-7702 and ERC-4337 together. Setting eip7702 parameter to true will make your EOA the sender address. However, if you want to utilize existing Kernel accounts only with ERC-4337 features, set it to false.

For a Safe Account, it defaults to the ERC-4337 standard. You can either use an already deployed Safe Account or create a new one, while enhancing the experience with Gelato’s best-in-class infrastructure.

const privateKey = (process.env.PRIVATE_KEY ?? generatePrivateKey()) as Hex;
const owner = privateKeyToAccount(privateKey);

const publicClient = createPublicClient({
  chain: baseSepolia,
  transport: http(),
});

const account = await gelato({
  owner,
  client: publicClient,
});
3

Setup Wallet Client

Quickly get started by creating a wallet client using createWalletClient from viem with local account for your specified network. Checkout supported networks here.

const client = createWalletClient({
  account,
  chain: baseSepolia,
  transport: http()
});
4

Creating a Smart Wallet Client

To initialize a Smart Wallet Client, you can use the createGelatoSmartWalletClient method.

const smartWalletClient = createGelatoSmartWalletClient(client);
5

Sending Transactions

To send transactions with ERC-20 gas payments, select ERC20 as the payment method and use one of the supported tokens for gas fees. You can check the list of supported ERC-20 tokens here.

const tokenAddress = "0x036CbD53842c5426634e7929541eC2318f3dCF7e"; // USDC (Base Sepolia)
const results = await smartWalletClient.execute({
  payment: erc20(tokenAddress),
  calls: [
    {
      to: "0xa8851f5f279eD47a292f09CA2b6D40736a51788E",
      data: "0xd09de08a",
      value: 0n
    }
  ]
});

console.log("userOp hash:", results?.id);
const txHash = await results?.wait();
console.log("transaction hash", txHash);
6

Batch Multiple Transactions

You can batch multiple transactions to be sent on-chain at once by adding them to the calls array:

const results = await smartWalletClient.execute({
  payment: erc20(tokenAddress),
  calls: [
    {
      to: "0xa8851f5f279eD47a292f09CA2b6D40736a51788E",
      data: "0xd09de08a",
      value: 0n
    },
    {
      to: "0xa8851f5f279eD47a292f09CA2b6D40736a51788E",
      data: "0xd09de08a",
      value: 0n
    },
    {
      to: "0xa8851f5f279eD47a292f09CA2b6D40736a51788E",
      data: "0xd09de08a",
      value: 0n
    }
  ]
});

​
ERC20 Gas Payment Playground

​
Additional Resources

  • Check out the full implementation of ERC-20 gas payments using Gelato Wallets.