How to Send Gasless Transaction by Using Biconomy

This tutorial will guide you through the process of implementing gasless transactions on the Mantle network using Biconomy. By the end of this tutorial, you'll learn how to integrate Biconomy into your DApp, allowing users to make transactions without holding native tokens.

Prerequisites

Before you start, ensure you have the following:

1. Basic Knowledge: Familiarity with Ethereum and smart contracts.
2. Development Environment: Node.js and npm installed.
3. Biconomy Account: Register and create a project on Biconomy.

Step 1: Create a Project on Biconomy

1. Add a Paymaster, in this tutorial we choose Mantle Sepolia network.
2. Now you can see a Mode screen on the right, choose and enable the Sponsored.
3. Now you need to setup your gas tank, choose your wallet and deposit some MNT testnet token.
4. Get your Bundler URL from Biconomy Dashboard.

Step 2: Setup the Gasless Transaction Environment

Import the following packages and setup the gasless transaction environment.

import {Hex, createWalletClient, http, parseEther} from 'viem';
import {privateKeyToAccount} from 'viem/accounts';
import {
  createSmartAccountClient,
  PaymasterMode,
  SupportedSigner,
} from '@biconomy/account';
import {mantle, mantleSepoliaTestnet} from 'viem/chains';

const biconomyTestPaymasterApiKey = 'Your Paymaster API Key';
const bundlerTestUrl = 'Your Bundler URL';

const privateKey = '0xxxxxxxx';

Step 3: Create Biconomy Smart Account Instance

Now you can create the Biconomy Smart Account Instance.

// ----- 1. Generate EOA from private key
const account = privateKeyToAccount(privateKey as Hex);
const client = createWalletClient({
  account,
  chain: mantleSepoliaTestnet,
  transport: http(),
});
const eoa = client.account.address;
console.log(`EOA address: ${eoa}`);

// ------ 2. Create biconomy smart account instance
const smartAccount = await createSmartAccountClient({
  signer: client as SupportedSigner,
  bundlerUrl: bundlerTestUrl,
  biconomyPaymasterApiKey: biconomyTestPaymasterApiKey,
});
const scwAddress = await smartAccount.getAccountAddress();
console.log('SCW Address', scwAddress);

Make sure your smart account has enough MNT tokens to transfer.

Step 4: Generate Transaction Data

// ------ 3. Generate transaction data
const txData = {
  to,
  value: parseEther(amount.toString()),
};

Step 5: Send Gasless Transaction

// ------ 4. Send user operation and get tx hash
const userOpResponse = await smartAccount.sendTransaction(txData, {
  paymasterServiceData: {mode: PaymasterMode.SPONSORED},
});
const {transactionHash} = await userOpResponse.waitForTxHash();
console.log('Transaction Hash', transactionHash);
const userOpReceipt = await userOpResponse.wait();
if (userOpReceipt.success == 'true') {
  console.log('UserOp receipt', userOpReceipt);
  console.log('Transaction receipt', userOpReceipt.receipt);
}

Step 6: Verify Transaction

Run this function and you can get your EOA address, smart account address and transaction hash, after several seconds you will receive the UserOp receipt which means the transaction was successful.