Gelato

Recommended: JavaScript SDK with React Hooks

For new React apps, we recommend the JavaScript SDK with React Hooks (@dynamic-labs-sdk/react-hooks) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the React quickstart (JavaScript SDK) to get started.

This guide is currently React only.

Setup Instructions

Create Dynamic Environment

Visit the Dynamic Dashboard
Create a new app or select an existing one
Enable the Embedded Wallets feature
Copy your Environment ID from the dashboard

Get Gelato API Key

Visit the Gelato App
Navigate to Paymaster & Bundler > API Keys
Create a new API Key and select your required networks
Copy the generated API Key

Create app with the React Quickstart

Scaffold Next.js with create-next-app, then follow the React Quickstart Custom setup path: Ethereum (EVM) with Wagmi and viem. In the Dynamic dashboard, enable Embedded wallets and Ethereum under Chains & Networks, and add your dev origin under Security → Allowed Origins.

Install Gelato Smart Wallet SDK

From your project root, install the Gelato Smart Wallet SDK:

npm install @gelatonetwork/smartwallet

yarn add @gelatonetwork/smartwallet

pnpm add @gelatonetwork/smartwallet

bun add @gelatonetwork/smartwallet

Set Environment Variables

In the scaffolded project, create a .env.local file in the project root:

NEXT_PUBLIC_DYNAMIC_APP_ID=your_dynamic_environment_id
NEXT_PUBLIC_GELATO_API_KEY=your_gelato_api_key

Implementation

Configure providers (lib/providers.tsx)

In the scaffolded app, update your providers to include Dynamic, Wagmi, and React Query. If your project already has a lib/providers.tsx, edit it; otherwise create it and use it in your root layout.

// lib/providers.tsx
import React from "react";
import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
import { EthereumWalletConnectors, isEthereumWallet } from "@dynamic-labs/ethereum";
import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
import { WagmiProvider, createConfig, http } from "wagmi";
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 Smart Wallet Client (components/SendTransactionButton.tsx)

// components/SendTransactionButton.tsx
import React from "react";
import { useDynamicContext } from "@dynamic-labs/sdk-react-core";
import { isEthereumWallet } from "@dynamic-labs/ethereum";
import { isDynamicWaasConnector } from "@dynamic-labs/wallet-connector-core";
import {
  createGelatoSmartWalletClient,
} from "@gelatonetwork/smartwallet";
import {
  prepareAuthorization,
  SignAuthorizationReturnType,
} from "viem/actions";

export function SendTransactionButton() {
  const { primaryWallet } = useDynamicContext();

  const sendTransaction = async () => {
    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 smartWalletClient = await createGelatoSmartWalletClient(client, {
      apiKey: process.env.NEXT_PUBLIC_GELATO_API_KEY,
      scw: { type: "gelato" }, // use gelato, kernel, safe, or custom
    });

    // Example: call execute later (see next step)
    console.log("Gelato Smart Wallet client ready", smartWalletClient);
  };

  return <button onClick={sendTransaction}>Send Transaction</button>;
}

Use the button (e.g., app/page.tsx)

// app/page.tsx
import { SendTransactionButton } from "@/components/SendTransactionButton";

export default function Page() {
  return (
    <main>
      <SendTransactionButton />
    </main>
  );
}

Execute Transactions

Execute transactions using different payment methods:

Sponsored
ERC-20
Native

const results = await smartWalletClient?.execute({
  payment: sponsored(),
  calls: [
    {
      to: "0xa8851f5f279eD47a292f09CA2b6D40736a51788E",
      data: "0xd09de08a",
      value: 0n,
    },
  ],
});

import { erc20 } from "@gelatonetwork/smartwallet";

const token = "0x036CbD53842c5426634e7929541eC2318f3dCF7e"; // USDC (Base Sepolia)

const results = await smartWalletClient?.execute({
  payment: erc20(token),
  calls: [
    {
      to: "0xa8851f5f279eD47a292f09CA2b6D40736a51788E",
      data: "0xd09de08a",
      value: 0n,
    },
  ],
});

import { native } from "@gelatonetwork/smartwallet";

const results = await smartWalletClient?.execute({
  payment: native(),
  calls: [
    {
      to: "0xa8851f5f279eD47a292f09CA2b6D40736a51788E",
      data: "0xd09de08a",
      value: 0n,
    },
  ],
});

Implementation Guides

SDK Reference

Recommended: JavaScript SDK with React Hooks

Setup Instructions

Implementation

Additional Resources

Recommended: JavaScript SDK with React Hooks

​Setup Instructions

​Implementation

​Additional Resources

Setup Instructions

Implementation

Additional Resources