> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Gelato

> [card] 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)](https://docs.dynamic.xyz/docs/javascript/reference/react-quickstart.md) to get started.

> [!NOTE]
>
> This guide is currently React only.

## Setup Instructions

**1. Create Dynamic Environment**

1. Visit the [Dynamic Console](https://console.dynamic.xyz/)
2. Create a new app or select an existing one
3. Enable the `Embedded Wallets` feature
4. Copy your Environment ID from the Dynamic Console

**2. Get Gelato API Key**

1. Visit the [Gelato App](https://app.gelato.cloud/)
2. Navigate to `Paymaster & Bundler > API Keys`
3. Create a new API Key and select your required networks
4. Copy the generated API Key

**3. Create app with the React Quickstart**

Scaffold **Next.js** with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app), then follow the [React Quickstart](https://docs.dynamic.xyz/docs/react/reference/quickstart.md) **Custom setup** path: **Ethereum (EVM)** with **Wagmi** and **viem**. In the [Dynamic Console](https://console.dynamic.xyz/dashboard), enable **Embedded wallets** and **Ethereum** under **Chains & Networks**, and add your dev origin under **Security** → **Allowed Origins**.

**4. Install Gelato Smart Wallet SDK**

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

```bash npm theme={"system"}
npm install @gelatonetwork/smartwallet
```

```bash yarn theme={"system"}
yarn add @gelatonetwork/smartwallet
```

```bash pnpm theme={"system"}
pnpm add @gelatonetwork/smartwallet
```

```bash bun theme={"system"}
bun add @gelatonetwork/smartwallet
```

**5. Set Environment Variables**

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

```bash theme={null} theme={"system"}
NEXT_PUBLIC_DYNAMIC_APP_ID=your_dynamic_environment_id
NEXT_PUBLIC_GELATO_API_KEY=your_gelato_api_key
```

## Implementation

**1. 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.

```typescript theme={null} theme={"system"}
// 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>
  );
}
```

**2. Create Smart Wallet Client (components/SendTransactionButton.tsx)**

```typescript theme={null} theme={"system"}
// 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>;
}
```

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

```typescript theme={null} theme={"system"}
// app/page.tsx
import { SendTransactionButton } from "@/components/SendTransactionButton";

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

**4. Execute Transactions**

Execute transactions using different payment methods:

> [tab] Sponsored
>
> ```typescript theme={null} theme={"system"}
> const results = await smartWalletClient?.execute({
>   payment: sponsored(),
>   calls: [
>     {
>       to: "0xa8851f5f279eD47a292f09CA2b6D40736a51788E",
>       data: "0xd09de08a",
>       value: 0n,
>     },
>   ],
> });
> ```

> [tab] ERC-20
>
> ```typescript theme={null} theme={"system"}
> 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,
>     },
>   ],
> });
> ```

> [tab] Native
>
> ```typescript theme={null} theme={"system"}
> import { native } from "@gelatonetwork/smartwallet";
>
> const results = await smartWalletClient?.execute({
>   payment: native(),
>   calls: [
>     {
>       to: "0xa8851f5f279eD47a292f09CA2b6D40736a51788E",
>       data: "0xd09de08a",
>       value: 0n,
>     },
>   ],
> });
> ```

## Additional Resources

* [Custom Networks](https://www.dynamic.xyz/docs/chains/adding-custom-networks#adding-custom-networks)
* [Implementation Code](https://github.com/gelatodigital/smartwallet/tree/master/plugins/react/dynamic/src)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.