Embedded Wallet Integrations

Embedded wallets enable users to interact with your dApp using familiar login methods like email, phone, or social accounts. Gelato Gasless SDK integrates seamlessly with popular embedded wallet providers.

Quick Start

Dynamic
Privy
Web3Auth
Turnkey

Installation

npm install @gelatocloud/gasless @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector @tanstack/react-query wagmi viem

Setup

Create an app at Dynamic Dashboard and enable Embedded Wallets
Get your Gelato API Key from Gelato App

NEXT_PUBLIC_DYNAMIC_APP_ID=your_dynamic_environment_id
NEXT_PUBLIC_GELATO_API_KEY=your_gelato_api_key

Configure Providers

import { DynamicContextProvider, useDynamicContext } from "@dynamic-labs/sdk-react-core";
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector";
import { WagmiProvider, createConfig, http } from "wagmi";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
import { baseSepolia } from "viem/chains";

const queryClient = new QueryClient();

export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <DynamicContextProvider
      settings={{
        environmentId: process.env.NEXT_PUBLIC_DYNAMIC_APP_ID!,
        walletConnectors: [EthereumWalletConnectors],
      }}
    >
      <WagmiProvider config={createConfig({
        chains: [baseSepolia],
        transports: { [baseSepolia.id]: http() },
      })}>
        <QueryClientProvider client={queryClient}>
          <DynamicWagmiConnector>{children}</DynamicWagmiConnector>
        </QueryClientProvider>
      </WagmiProvider>
    </DynamicContextProvider>
  );
}

Create Gelato Bundler Client

import { createGelatoBundlerClient, toGelatoSmartAccount } from "@gelatocloud/gasless";
import { isEthereumWallet } from "@dynamic-labs/ethereum";
import { isDynamicWaasConnector } from "@dynamic-labs/wallet-connector-core";
import { prepareAuthorization, SignAuthorizationReturnType } from "viem/actions";

const { primaryWallet } = useDynamicContext();

if (!primaryWallet || !isEthereumWallet(primaryWallet)) return;

const connector = primaryWallet.connector;
if (!connector || !isDynamicWaasConnector(connector)) return;

const client = await primaryWallet.getWalletClient();

client.account.signAuthorization = async (parameters) => {
  const preparedAuthorization = await prepareAuthorization(client, parameters);
  const signedAuthorization = await connector.signAuthorization(preparedAuthorization);

  return {
    address: preparedAuthorization.address,
    chainId: preparedAuthorization.chainId,
    nonce: preparedAuthorization.nonce,
    r: signedAuthorization.r,
    s: signedAuthorization.s,
    v: signedAuthorization.v,
    yParity: signedAuthorization.yParity,
  } as SignAuthorizationReturnType;
};

const account = toGelatoSmartAccount({
  client: client,
  owner: client.account,
});

const bundler = await createGelatoBundlerClient({
  account,
  apiKey: process.env.NEXT_PUBLIC_GELATO_API_KEY as string,
  client,
  pollingInterval: 100,
});

Dynamic Docs

Installation

npm install @gelatocloud/gasless @privy-io/react-auth @privy-io/wagmi @tanstack/react-query viem

Setup

Create an app at Privy Dashboard and enable Embedded Wallets
Get your Gelato API Key from Gelato App

NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id
NEXT_PUBLIC_GELATO_API_KEY=your_gelato_api_key

Configure Providers

import { PrivyProvider, PrivyClientConfig } from "@privy-io/react-auth";
import { WagmiProvider, createConfig } from "@privy-io/wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { http } from "viem";
import { baseSepolia } from "viem/chains";

const queryClient = new QueryClient();

const wagmiConfig = createConfig({
  chains: [baseSepolia],
  transports: { [baseSepolia.id]: http() },
});

const privyConfig: PrivyClientConfig = {
  embeddedWallets: {
    createOnLogin: "users-without-wallets",
    requireUserPasswordOnCreate: false,
  },
  loginMethods: ["email"],
};

export const App = () => (
  <PrivyProvider appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID!} config={privyConfig}>
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={wagmiConfig} reconnectOnMount={false}>
        <YourApp />
      </WagmiProvider>
    </QueryClientProvider>
  </PrivyProvider>
);

Create Gelato Bundler Client

import { createGelatoBundlerClient, toGelatoSmartAccount } from "@gelatocloud/gasless";
import { useWallets, useSign7702Authorization } from "@privy-io/react-auth";
import { createWalletClient, custom, Hex } from "viem";
import { prepareAuthorization, PrepareAuthorizationParameters } from "viem/actions";
import { baseSepolia } from "viem/chains";

const { wallets } = useWallets();
const { signAuthorization } = useSign7702Authorization();

const primaryWallet = wallets[0];
const provider = await primaryWallet?.getEthereumProvider();

const client = createWalletClient({
  account: primaryWallet.address as Hex,
  chain: baseSepolia,
  transport: custom(provider),
});

client.account.signAuthorization = async (parameters) => {
  const preparedAuthorization = await prepareAuthorization(client, parameters);
  return await signAuthorization({
    chainId: preparedAuthorization.chainId,
    contractAddress: preparedAuthorization.address,
    nonce: preparedAuthorization.nonce,
  });
};

const account = toGelatoSmartAccount({
  client: client,
  owner: client.account,
});

const bundler = await createGelatoBundlerClient({
  account,
  apiKey: process.env.NEXT_PUBLIC_GELATO_API_KEY as string,
  client,
  pollingInterval: 100,
});

Privy Docs

Installation

npm install @gelatocloud/gasless @web3auth/modal @web3auth/ethereum-provider viem

Setup

Create an app at Web3Auth Dashboard
Get your Gelato API Key from Gelato App

NEXT_PUBLIC_WEB3AUTH_CLIENT_ID=your_web3auth_client_id
NEXT_PUBLIC_GELATO_API_KEY=your_gelato_api_key

Initialize Web3Auth

import { Web3Auth } from "@web3auth/modal";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { createWalletClient, custom } from "viem";
import { baseSepolia } from "viem/chains";

const chainConfig = {
  chainNamespace: "eip155",
  chainId: "0x14a34",
  rpcTarget: "https://sepolia.base.org",
  displayName: "Base Sepolia",
  ticker: "ETH",
  tickerName: "Ethereum",
};

const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });

const web3auth = new Web3Auth({
  clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID!,
  web3AuthNetwork: "sapphire_devnet",
  privateKeyProvider,
});

await web3auth.initModal();
const provider = await web3auth.connect();

Create Gelato Bundler Client

import { createGelatoBundlerClient } from "@gelatocloud/gasless";
import { toKernelSmartAccount } from "permissionless/accounts";

const client = createWalletClient({
  chain: baseSepolia,
  transport: custom(provider),
});

const account = await toKernelSmartAccount({
  client,
  version: "0.3.1",
  entryPoint: {
      address: entryPoint07Address,
      version: "0.7"
  },
  owners: [client],
});

const bundler = await createGelatoBundlerClient({
  account,
  apiKey: process.env.NEXT_PUBLIC_GELATO_API_KEY as string,
  client,
  pollingInterval: 100,
});

Web3Auth Docs

Installation

npm install @gelatocloud/gasless @turnkey/sdk-browser @turnkey/viem viem

Setup

Create an organization at Turnkey Dashboard
Get your Gelato API Key from Gelato App

NEXT_PUBLIC_TURNKEY_ORG_ID=your_turnkey_org_id
NEXT_PUBLIC_GELATO_API_KEY=your_gelato_api_key

Initialize Turnkey

import { Turnkey } from "@turnkey/sdk-browser";
import { createAccount } from "@turnkey/viem";
import { createWalletClient, http } from "viem";
import { baseSepolia } from "viem/chains";

const turnkey = new Turnkey({
  apiBaseUrl: "https://api.turnkey.com",
  defaultOrganizationId: process.env.NEXT_PUBLIC_TURNKEY_ORG_ID!,
});

const account = await createAccount({
  client: turnkey.apiClient(),
  organizationId: process.env.NEXT_PUBLIC_TURNKEY_ORG_ID!,
  signWith: walletAddress,
});

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

Create Gelato Bundler Client

import { createGelatoBundlerClient, toGelatoSmartAccount } from "@gelatocloud/gasless";

const account = toGelatoSmartAccount({
  client: client,
  owner: client.account,
});

const bundler = await createGelatoBundlerClient({
  account,
  apiKey: process.env.NEXT_PUBLIC_GELATO_API_KEY as string,
  client,
  pollingInterval: 100,
});

Turnkey Docs

Execute Transactions

All providers support the same payment methods:

Sponsored
ERC-20
Native

const nonce = await publicClient.getTransactionCount({
  address: primaryWallet.address as Hex,
});

const authorization = await client.signAuthorization({
  address: account.authorization.address,
  nonce,
});

const hash = await bundler.sendUserOperation({
  account,
  calls: [{ to: account.address, value: 0n, data: "0x" }],
  authorization,
});

import { token } from "@gelatocloud/gasless";

const nonce = await publicClient.getTransactionCount({
  address: primaryWallet.address as Hex,
});

const authorization = await client.signAuthorization({
  address: account.authorization.address,
  nonce,
});

const tokenAddress = "0x036CbD53842c5426634e7929541eC2318f3dCF7e"; // USDC (Base Sepolia)
const hash = await bundler.sendUserOperation({
  account,
  calls: [{ to: account.address, value: 0n, data: "0x" }],
  authorization,
});

import { native } from "@gelatocloud/gasless";

const nonce = await publicClient.getTransactionCount({
  address: primaryWallet.address as Hex,
});

const authorization = await client.signAuthorization({
  address: account.authorization.address,
  nonce,
});

const hash = await bundler.sendUserOperation({
  account,
  calls: [{ to: account.address, value: 0n, data: "0x" }],
  authorization,
});

Smart Account Types

All providers support multiple smart account types:

Type	Description
`gelato`	Gelato Smart Account (EIP-7702 optimized), Also supports ERC-4337
`kernel`	Kernel Account (ERC-4337 + optional EIP-7702)
`safe`	Safe Account (ERC-4337)

const account = toGelatoSmartAccount({
  client: client,
  owner: client.account,
});

const bundler = await createGelatoBundlerClient({
  account,
  apiKey: process.env.NEXT_PUBLIC_GELATO_API_KEY as string,
  client,
  pollingInterval: 100,
});

Gelato Paymaster & Bundler

Features

How-To Guides

Gas Tank

Bundler API Endpoints

Additional Resources

Embedded Wallet Integrations

Quick Start

Installation

Setup

Configure Providers

Create Gelato Bundler Client

Installation

Setup

Configure Providers

Create Gelato Bundler Client

Installation

Setup

Initialize Web3Auth

Create Gelato Bundler Client

Installation

Setup

Initialize Turnkey

Create Gelato Bundler Client

Execute Transactions

Smart Account Types

Additional Resources

​Quick Start

​Installation

​Setup

​Configure Providers

​Create Gelato Bundler Client

​Installation

​Setup

​Configure Providers

​Create Gelato Bundler Client

​Installation

​Setup

​Initialize Web3Auth

​Create Gelato Bundler Client

​Installation

​Setup

​Initialize Turnkey

​Create Gelato Bundler Client

​Execute Transactions

​Smart Account Types

​Additional Resources

Quick Start

Installation

Setup

Configure Providers

Create Gelato Bundler Client

Installation

Setup

Configure Providers

Create Gelato Bundler Client

Installation

Setup

Initialize Web3Auth

Create Gelato Bundler Client

Installation

Setup

Initialize Turnkey

Create Gelato Bundler Client

Execute Transactions

Smart Account Types

Additional Resources