:root {
  /* Colors */
  --gelato-text-primary: #010110;
  --gelato-dark-bg: #010110;
  --gelato-dark-bg-elevated: #22222a;
  --gelato-dark-text-primary: #FFEFE3;
}

.dark #search-bar-entry {
  background-color: var(--gelato-dark-bg-elevated);
}

/* Navbar CTA button */
#topbar-cta-button a span {
  background-color: var(--gelato-text-primary);
}

#topbar-cta-button a:hover * {
  opacity: 1;
}

#topbar-cta-button a svg {
  color: currentColor;
}

.dark #topbar-cta-button a span {
  color: var(--gelato-dark-bg);
  background-color: var(--gelato-dark-text-primary);
}

.dark #topbar-cta-button a {
  color: var(--gelato-dark-bg);
}


const { generatePrivateKey, privateKeyToAccount } = require("viem/accounts");

export default async function handler(req, res) {
  // Set CORS headers
  res.setHeader('Access-Control-Allow-Credentials', true);
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT');
  res.setHeader(
    'Access-Control-Allow-Headers',
    'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
  );

  // Handle preflight request
  if (req.method === 'OPTIONS') {
    res.status(200).end();
    return;
  }

  if (req.method !== "POST")
    return res.status(405).json({ error: "Only POST allowed" });

  try {
    const privateKey = generatePrivateKey();
    const account = privateKeyToAccount(privateKey);
    res.status(200).json({ privateKey, address: account.address });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}


const { createPublicClient, http } = require("viem");
const { privateKeyToAccount } = require("viem/accounts");
const { baseSepolia } = require("viem/chains");
const { gelato } = require("@gelatonetwork/smartwallet/accounts");

const usdcContract = {
  address: "0x036CbD53842c5426634e7929541eC2318f3dCF7e",
  abi: [
    {
      name: "balanceOf",
      type: "function",
      stateMutability: "view",
      inputs: [{ name: "account", type: "address" }],
      outputs: [{ name: "", type: "uint256" }],
    },
  ],
};

export default async function handler(req, res) {
  // Set CORS headers
  res.setHeader('Access-Control-Allow-Credentials', true);
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT');
  res.setHeader(
    'Access-Control-Allow-Headers',
    'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
  );

  // Handle preflight request
  if (req.method === 'OPTIONS') {
    res.status(200).end();
    return;
  }

  if (req.method !== "POST")
    return res.status(405).json({ error: "Only POST allowed" });

  try {
    const privateKey = req.body.privateKey;
    const signer = privateKeyToAccount(privateKey);

    const publicClient = createPublicClient({
      chain: baseSepolia,
      transport: http(),
    });

    const account = await gelato({
      owner: signer,
      client: publicClient,
    });


    const balance = await publicClient.readContract({
      address: usdcContract.address,
      abi: usdcContract.abi,
      functionName: "balanceOf",
      args: [account.address],
    });

    res.status(200).json({ balance: Number(balance) / 1e6 });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}


const { createPublicClient, http, formatEther } = require("viem");
const { privateKeyToAccount } = require("viem/accounts");
const { baseSepolia } = require("viem/chains");

export default async function handler(req, res) {
  // Set CORS headers
  res.setHeader('Access-Control-Allow-Credentials', true);
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT');
  res.setHeader(
    'Access-Control-Allow-Headers',
    'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
  );

  // Handle preflight request
  if (req.method === 'OPTIONS') {
    res.status(200).end();
    return;
  }

  if (req.method !== "POST")
    return res.status(405).json({ error: "Only POST allowed" });

  try {
    const privateKey = req.body.privateKey;
    const account = privateKeyToAccount(privateKey);

    const publicClient = createPublicClient({
      chain: baseSepolia,
      transport: http(),
    });

    const balance = await publicClient.getBalance({ address: account.address });
    res.status(200).json({ balance: formatEther(balance) });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}


const { createWalletClient, createPublicClient, http, zeroAddress } = require("viem");
const { privateKeyToAccount } = require("viem/accounts");
const { baseSepolia } = require("viem/chains");
const {
  createGelatoSmartWalletClient,
  erc20,
} = require("@gelatonetwork/smartwallet");
const { gelato } = require("@gelatonetwork/smartwallet/accounts");

export default async function handler(req, res) {
  // Set CORS headers
  res.setHeader('Access-Control-Allow-Credentials', true);
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT');
  res.setHeader(
    'Access-Control-Allow-Headers',
    'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
  );

  // Handle preflight request
  if (req.method === 'OPTIONS') {
    res.status(200).end();
    return;
  }

  if (req.method !== "POST")
    return res.status(405).json({ error: "Only POST allowed" });

  try {
    const privateKey = req.body.privateKey;
    const sponsorApiKey = process.env.SPONSOR_API_KEY;

    const signer = privateKeyToAccount(privateKey);
    const publicClient = createPublicClient({
      chain: baseSepolia,
      transport: http(),
    });
    const account = await gelato({
      owner: signer,
      client: publicClient,
    })
    const client = createWalletClient({
      account,
      chain: baseSepolia,
      transport: http(),
    });

    const tokenAddress = "0x036CbD53842c5426634e7929541eC2318f3dCF7e";

    const smartWalletClient = await createGelatoSmartWalletClient(client, {
      apiKey: sponsorApiKey,
    });

    const response = await smartWalletClient.execute({
      payment: erc20(tokenAddress),
      calls: [{ to: zeroAddress, data: "0x", value: 0n }],
    });

    const txHash = await response.wait();

    res.status(200).json({ gelatoId: response.id, txHash });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}


const { createWalletClient, createPublicClient, http, zeroAddress } = require("viem");
const { privateKeyToAccount } = require("viem/accounts");
const { baseSepolia } = require("viem/chains");
const {
  createGelatoSmartWalletClient,
  native,
} = require("@gelatonetwork/smartwallet");
const { gelato } = require("@gelatonetwork/smartwallet/accounts");

export default async function handler(req, res) {
  // Set CORS headers
  res.setHeader('Access-Control-Allow-Credentials', true);
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT');
  res.setHeader(
    'Access-Control-Allow-Headers',
    'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
  );

  // Handle preflight request
  if (req.method === 'OPTIONS') {
    res.status(200).end();
    return;
  }

  if (req.method !== "POST")
    return res.status(405).json({ error: "Only POST allowed" });

  try {
    const privateKey = req.body.privateKey;
    const sponsorApiKey = process.env.SPONSOR_API_KEY;

    const signer = privateKeyToAccount(privateKey);
    const publicClient = createPublicClient({
      chain: baseSepolia,
      transport: http(),
    });

    const account = await gelato({
      owner: signer,
      client: publicClient,
    });

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

    const smartWalletClient = await createGelatoSmartWalletClient(client, {
      apiKey: sponsorApiKey,
    });

    const response = await smartWalletClient.execute({
      payment: native(),
      calls: [{ to: zeroAddress, data: "0x", value: 0n }],
    });

    const txHash = await response.wait();

    res.status(200).json({ gelatoId: response.id, txHash });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}


const { createWalletClient, createPublicClient, http, zeroAddress } = require("viem");
const { privateKeyToAccount } = require("viem/accounts");
const { baseSepolia } = require("viem/chains");
const {
  createGelatoSmartWalletClient,
  sponsored,
} = require("@gelatonetwork/smartwallet");
const { gelato } = require("@gelatonetwork/smartwallet/accounts");

export default async function handler(req, res) {
  // Set CORS headers
  res.setHeader('Access-Control-Allow-Credentials', true);
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT');
  res.setHeader(
    'Access-Control-Allow-Headers',
    'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
  );

  // Handle preflight request
  if (req.method === 'OPTIONS') {
    res.status(200).end();
    return;
  }

  if (req.method !== "POST")
    return res.status(405).json({ error: "Only POST allowed" });

  try {
    const privateKey = req.body.privateKey;
    const sponsorApiKey = process.env.SPONSOR_API_KEY;

    const signer = privateKeyToAccount(privateKey);
    const publicClient = createPublicClient({
      chain: baseSepolia,
      transport: http(),
    });

    const account = await gelato({
      owner: signer,
      client: publicClient,
    });

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

    const smartWalletClient = await createGelatoSmartWalletClient(client, {
      apiKey: sponsorApiKey,
    });

    const response = await smartWalletClient.execute({
      payment: sponsored(sponsorApiKey),
      calls: [{ to: zeroAddress, data: "0x", value: 0n }],
    });

    const txHash = await response.wait();

    res.status(200).json({ gelatoId: response.id, txHash });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}


Summary

ERC-4337 at a Glance

EIP-7702 Overview

Conclusion

EIP-7702 vs ERC-4337

Gelato

Explore our API & SDK references, demos, and guides for building onchain apps.

Gelato Developer Docs

Overview

Understanding EIP-7702

Understanding ERC-4337

Learn how to create and manage a Sponsor API Key for gas sponsorship

Create a Sponsor API Key

Sponsor Gas for your users

Pay Gas with ERC-20 Tokens

Pay Gas with Native Tokens

Learn how to estimate gas costs for transactions using the Smart Wallet SDK

Estimate Gas Costs

Applied Use Cases: Morpho Demo

Learn how to create and manage a Dynamic Environment ID for wallet providers

Create Dynamic's Environment ID

Learn how to integrate Dynamic or Privy as wallet providers with the Gelato Smart Wallets React SDK

Use Dynamic or Privy Signers

Demo

Gelato Smart Wallet SDK is currently supported on the following networks

Supported Networks

Introduction

ABC Stack

Arbitrum Orbit

OP Stack

Deploy your own rollup

Learn how to run an Arbitrum Orbit node on your local machine

Run a Full Orbit Node

Learn how to build and run an op-node from source

Run OP Node

Run a Verifier Node

Celestia

Avail

EigenDA

Custom Gas Token

Public Testnet

Verifier Node Package

Gelato Services

Data Indexers

Block Explorers

Oracles

Bridges

Account Abstraction

On & Off-ramp

Community

Identity & KYC

Others

Get a Private RPC

Calculate Compute Units

Pricing & Plans

Trigger Types

Typescript Functions

Solidity Functions

Automated Transactions

Dedicated msg.sender

Test & Deploy Typescript Functions

Write Solidity Functions

Test & Deploy Solidity Functions

Initiate an Automated Transaction

Templates & Use Cases

Analytics & Monitoring

Subscriptions & Payments

What is Relaying?

Essential reading to safeguard your contracts

Make sure your contracts are not affected by the recently disclosed vulnerability

Introduction

How-To Guides

React SDK

Additional Resources

EIP-7702 vs ERC-4337

Summary

ERC-4337 at a Glance

EIP-7702 Overview

Conclusion

Introduction

How-To Guides

React SDK

Additional Resources

​Summary

​ERC-4337 at a Glance

​EIP-7702 Overview

​Conclusion

Summary

ERC-4337 at a Glance

EIP-7702 Overview

Conclusion