Pay for gas with ERC20 tokens using MultiTokenPaymaster

Using token paymasters we have the ability to pay for gas with whatever ERC20 tokens the paymaster supports. We can do this in two steps:

Fetch the paymaster address and see if the MultiTokenPaymaster supports the particular token.
Approve the tokens we wish to pay for gas with if exists and when estimating the transaction include the Arka and ERC20 parameters and send it to the bundler as a single batch transaction. We can do this like so:

const ARKA_API_KEY = ''; // insert your api key here
const TOKEN_ADDRESS = "0xC168E40227E4ebD8C1caE80F7a55a4F0e6D66C97"; // token on polygon
const CHAIN_ID = 137;
const ARKA_URL = 'https://rpc.etherspot.io/paymaster';
const returnedValue = await fetch(`${ARKA_URL}/getAllCommonERC20PaymasterAddress?apiKey=${ARKA_API_KEY}&chainId=${CHAIN_ID}`, {
method: 'POST',
headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
},
body: JSON.stringify({ "params": ["0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789"] })
})
.then((res) => {
    return res.json()
}).catch((err) => {
    console.log(err);
});
const returnData: {
    chainId: number;
    paymasterAddress: string;
    gasToken: string;
    decimals: number;
}[] = JSON.parse(returnedValue.message); // List of all paymasters available
const paymasterDetails = returnData.filter((item: any) => item.chainId === chainId && item.gasToken === tokenAddress);
if (paymasterDetails.length < 0) throw new Error('Token not supported');
const paymasterAddress = paymasterDetails[0].paymasterAddress;

From the above list of multiTokenPaymasters, check if your token is supported. If so, continue to the next step after taking the paymaster address associated with your token address. Note: ERC20_ABI is the ERC20 ABI for the token you want to pay for gas with. You can copy from here

const erc20Contract = new ethers.Contract(TOKEN_ADDRESS, ERC20_ABI)
const encodedData = erc20Contract.interface.encodeFunctionData('approve', [paymasterAddress, ethers.utils.parseEther('1')]) // Approval for 1 ETH
await primeSdk.addUserOpsToBatch({ to: TOKEN_ADDRESS, data: encodedData });

Once the tokens are approved we can create whatever transactions we want, then estimate them before sending like this:

const op = await primeSdk.estimate(
{ 
    url: "https://rpc.etherspot.io/paymaster?apiKey=${ARKA_API_KEY}&chainId=${CHAIN_ID}",
    context: { token: TOKEN_ADDRESS, mode: 'commonerc20' } 
 });

And send the estimated transactions in a batch once you are okay with the estimated gas fee

await primeSdk.send(op);

If you still face any issues, please reach out to us on Discord.

Arka Paymaster