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 { createWalletClient, http } from "viem";
import { generatePrivateKey, privateKeyToAccount } from "viem/accounts";

2. Setup Wallet Client

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

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

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

3. Create Smart Wallet Client

To initialize a Smart Wallet Client, you can use the createGelatoSmartWalletClient method. Use wallet: 'kernel' when creating the Smart Wallet client to ensure ERC-4337 compatibility.

A Smart Wallet Client serves as an alternative to the standard viem walletClient, but is purpose-built for managing EOA's as smart wallets instead of traditional EOA (Externally Owned Accounts).

const smartWalletClient = createGelatoSmartWalletClient(client);

A Kernel Wallet Client serves as an alternative to the standard viem walletClient, but is purpose-built for managing smart contract wallets instead of traditional EOA (Externally Owned Accounts).

const kernelWalletClient = createGelatoSmartWalletClient(client, {
  wallet: "kernel",
});

4. Sending transactions

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

const tokenAddress = "0x036CbD53842c5426634e7929541eC2318f3dCF7e"; // USDC (Base Sepolia)
const results = await kernelWalletClient.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({ // use kernelWalletClient for ERC4337 transactions
    payment : erc20(tokenAddress),
    calls: [
      {
        to: "0xa8851f5f279eD47a292f09CA2b6D40736a51788E",
        data: "0xd09de08a",
        value: 0n
      },
      {
        to: "0xa8851f5f279eD47a292f09CA2b6D40736a51788E",
        data: "0xd09de08a",
        value: 0n
      },
      {
        to: "0xa8851f5f279eD47a292f09CA2b6D40736a51788E",
        data: "0xd09de08a",
        value: 0n
      },
    ]
});

PreviousSponsor gas for your users NextAllow users to pay gas with native

Last updated 18 hours ago