Your smart wallet is ready for gasless transactions
{address}
Base Sepolia
}
{state === "transaction-sent" &&
Transaction Sent!
Your ERC-20 gas payment transaction has been submitted to the network
{transactionHash}
}
;
};
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
```typescript theme={null}
import { createGelatoSmartWalletClient, erc20 } from "@gelatonetwork/smartwallet";
import { gelato, kernel, safe, metamask } from "@gelatonetwork/smartwallet/accounts";
import { createWalletClient, createPublicClient, http, type Hex } from "viem";
import { generatePrivateKey, privateKeyToAccount } from "viem/accounts";
```
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.
```typescript theme={null}
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,
});
```
```typescript theme={null}
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
});
```
```typescript theme={null}
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",
});
```
```typescript theme={null}
const privateKey = (process.env.PRIVATE_KEY ?? generatePrivateKey()) as Hex;
const owner = privateKeyToAccount(privateKey);
const publicClient = createPublicClient({
chain: baseSepolia,
transport: http(),
});
const account = await metamask({
owner,
client: publicClient,
});
```
Quickly get started by creating a wallet client using `createWalletClient` from `viem` with local account for your specified network. Checkout supported networks [here](/smart-wallet-sdk/additional-resources/supported-networks).
```typescript theme={null}
const client = createWalletClient({
account,
chain: baseSepolia,
transport: http()
});
```
To initialize a Smart Wallet Client, you can use the `createGelatoSmartWalletClient` method.
```typescript theme={null}
const smartWalletClient = createGelatoSmartWalletClient(client);
```
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](/smart-wallet-sdk/additional-resources/erc20-payment-tokens).
```typescript theme={null}
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);
```
You can batch multiple transactions to be sent on-chain at once by adding them to the calls array:
```typescript theme={null}
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](https://github.com/gelatodigital/smartwallet/tree/master/examples/erc20/src/index.ts).