Allow users to pay gas with erc20

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.

Steps

1. Import required 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.

Gelato

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,
});

Kernel

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

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

const account = await kernel({
  owner,
  client: publicClient,
  eip7702: false, // set to true if you want to use EIP-7702 with ERC-4337
});

Safe

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

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

const account = await safe({
  client: publicClient,
  owners: [owner],
  version: "1.4.1",
});

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. Create 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.

View example code implementing ERC-20 gas payments using the Gelato Smart Wallet SDK here.

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);

5. 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
      },
    ]
});