> ## 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 title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  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)](/javascript/reference/react-quickstart) to get started.
</Card>

<Note>
  This guide is currently React only.
</Note>

## Setup Instructions

<Steps>
  <Step title="Create Dynamic Environment">
    1. Visit the [Dynamic Dashboard](https://app.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 dashboard
  </Step>

  <Step title="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
  </Step>

  <Step title="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](/react/reference/quickstart) **Custom setup** path: **Ethereum (EVM)** with **Wagmi** and **viem**. In the [Dynamic dashboard](https://app.dynamic.xyz/dashboard), enable **Embedded wallets** and **Ethereum** under **Chains & Networks**, and add your dev origin under **Security** → **Allowed Origins**.
  </Step>

  <Step title="Install Gelato Smart Wallet SDK">
    From your project root, install the Gelato Smart Wallet SDK:

    <CodeGroup>
      ```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
      ```
    </CodeGroup>
  </Step>

  <Step title="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
    ```
  </Step>
</Steps>

## Implementation

<Steps>
  <Step title="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>
      );
    }
    ```
  </Step>

  <Step title="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>;
    }
    ```
  </Step>

  <Step title="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>
      );
    }
    ```
  </Step>

  <Step title="Execute Transactions">
    Execute transactions using different payment methods:

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

      <Tab title="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>

      <Tab title="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,
            },
          ],
        });
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## 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)