Thirdweb to Gelato Migration Guide

This project demonstrates how to migrate from Thirdweb's bundled infrastructure (bundler + paymaster) to Gelato's infrastructure while keeping the Thirdweb SDK for wallet management and smart accounts.

Overview

In this repo you will be able to:

• Run the demo
• Migration guide

🚀 Run this Demo

Prerequisites

Before running this demo, make sure you have:

• Node.js (version 18 or higher)
• pnpm or yarn
• A modern web browser

Quick Start

1. Install Dependencies

   pnpm install

2. Set Up Environment Variables

   cp .env.example .env

   Then edit .env and add your API keys and ID:

   NEXT_PUBLIC_THIRDWEB_SECRET_KEY=
   NEXT_PUBLIC_THIRDWEB_CLIENT_ID=
   NEXT_PUBLIC_GELATO_API_KEY=your_gelato_api_key_here

3. Start the Development Server

   pnpm run dev

4. Open Your Browser Navigate to http://localhost:3000 to see the demo in action.

How to get Gelato Api Key?

For sponsored transactions (gasless), you'll need a Sponsor API Key:

1. Visit the Gelato Relay App
2. Create an account and generate a Sponsor API Key for Arbitrum Sepolia
3. Add the key to your .env file

Need help? Check out our How to Create a Sponsor API Key Guide

Migration Steps

1. Environment Variables

Before (Thirdweb Infrastructure):

NEXT_PUBLIC_THIRDWEB_CLIENT_ID=your_thirdweb_client_id
NEXT_PUBLIC_THIRDWEB_SECRET_KEY=your_thirdweb_secret_key
NEXT_PUBLIC_BASE_SEPOLIA_RPC_URL=your_base_sepolia_rpc_url

After (Gelato Infrastructure):

NEXT_PUBLIC_THIRDWEB_CLIENT_ID=your_thirdweb_client_id
NEXT_PUBLIC_THIRDWEB_SECRET_KEY=your_thirdweb_secret_key
NEXT_PUBLIC_GELATO_API_KEY=your_gelato_api_key
NEXT_PUBLIC_BASE_SEPOLIA_RPC_URL=your_base_sepolia_rpc_url

2. Dependencies

Add Specific dependencies:

npm install viem permissionless

3. Code Migration

Before: Thirdweb Infrastructure

import { smartWallet } from "thirdweb/wallets";
import { sendTransaction } from "thirdweb";

// Configure smart wallet with Thirdweb infrastructure
const wallet = smartWallet({
  chain: chainConfig,
  sponsorGas: true, // Uses Thirdweb paymaster
});

// Connect the smart wallet
const smartAccount = await wallet.connect({
  client,
  personalAccount: account,
});

// Send transaction using Thirdweb bundler
const { transactionHash } = await sendTransaction({
  account: smartAccount,
  transaction: {
    chain: chainConfig,
    client,
    to: "0x0000000000000000000000000000000000000000",
    value: BigInt(0),
    data: "0x",
  },
});

After: Gelato Infrastructure

import { toThirdwebSmartAccount } from "permissionless/accounts";
import { createBundlerClient } from "viem/account-abstraction";
import { viemAdapter } from "thirdweb/adapters/viem";

// Create Viem client wallet adapter
const viemClientWallet = viemAdapter.wallet.toViem({
  client,
  chain: chainConfig,
  wallet: wallet,
});

// Create smart account with Gelato bundler
const smartAccount = await toThirdwebSmartAccount({
  client: publicClient,
  owner: viemClientWallet as any,
});

// Create bundler client with Gelato
const bundlerClient = createBundlerClient({
  account: smartAccount,
  client: publicClient,
  transport: http(
    `https://api.gelato.digital/bundlers/${baseSepolia.id}/rpc?sponsorApiKey=${process.env.NEXT_PUBLIC_GELATO_API_KEY}`
  ),
});

// Send user operation through Gelato bundler
const userOpHash = await bundlerClient.sendUserOperation({
  calls: [
    {
      to: "0x0000000000000000000000000000000000000000",
      data: "0x",
      value: BigInt(0),
    },
  ],
  maxPriorityFeePerGas: BigInt(0), 
  maxFeePerGas: BigInt(0), 
});

// Wait for transaction receipt
const tx = await bundlerClient.waitForUserOperationReceipt({
  hash: userOpHash,
});

const transactionHash = tx.receipt.transactionHash;

4. Key Changes Explained

Smart Account Creation

• Before: Uses smartWallet() from Thirdweb with built-in bundler/paymaster
• After: Uses toThirdwebSmartAccount() with Viem adapter and custom bundler client

Transaction Sending

• Before: Uses sendTransaction() action from Thirdweb
• After: Uses sendUserOperation() with Gelato bundler client

Gas Sponsorship

• Before: Handled automatically by Thirdweb paymaster
• After: Handled by Gelato paymaster (1Balance) (set maxPriorityFeePerGas and maxFeePerGas to 0)

5. Benefits of Migration

Gelato Advantages:

• Better Performance: Optimized bundling and faster transaction processing
• Cost Efficiency: Competitive gas pricing and efficient batching
• Reliability: High uptime and robust infrastructure
• Flexibility: More control over bundling parameters
• Multi-chain Support: Extensive chain coverage

6. Monitoring and Debugging

Gelato Task Status

const checkTaskStatus = async (taskId: string) => {
  const response = await fetch(`https://relay.gelato.digital/tasks/status/${taskId}`);
  const data = await response.json();
  return data.task;
};

Support

• Gelato Documentation: docs.gelato.network
• Thirdweb Documentation: portal.thirdweb.com
• Viem Documentation: viem.sh