Use Dynamic or Privy Signers

Template & Examples

Smart Wallet React SDK Example

Check out the full example code for integrating Dynamic or Privy as wallet providers with the Gelato Smart Wallets React SDK.

Setup Instructions

Clone the Repository

git clone https://github.com/gelatodigital/how-tos-2-smartwallet-react-sdk-example.git
cd how-tos-2-smartwallet-react-sdk-example

Set Up Environment Variables

cp .env.example .env

Generate a Sponsor Key

Create a SponsorKey using the Relay App. Paste the key into your .env file. Check out the How-To Guides here.

Generate a Dynamic Environment ID

Generate the Dynamic Environment ID by following the steps in the How-To Guides here, then paste the ID into your .env file.

Install Dependencies

yarn install

Start the development server

yarn dev

Open your browser and navigate to http://localhost:5173

Not using templates? Prefer a step-by-step approach? Up next: How-To Guides for implementing the Smart Wallet React SDK use cases step-by-step.

Installation

npm install @gelatonetwork/smartwallet-react-sdk viem

Gelato Smart Wallets React SDK

Check out the NPM package for the Gelato Smart Wallets React SDK.

Getting Started

Importing Dependencies

import {
  GelatoSmartWalletContextProvider,
  useGelatoSmartWalletProviderContext,
  GelatoSmartWalletConnectButton,
  dynamic,
  privy,
  wagmi,
} from "@gelatonetwork/smartwallet-react-sdk";

import { sponsored, native, erc20 } from "@gelatonetwork/smartwallet";
import { baseSepolia } from "viem/chains";
import { http } from "wagmi";

Setting up Smart Wallet Context Provider

To create a Sponsor API Key, visit the Gelato App and navigate to the Relay section. Create a new app, select the required networks, and copy the generated Sponsor API Key. For detailed instructions, click here to learn more about creating a Sponsor API Key.

<GelatoSmartWalletContextProvider
  settings={{
    scw: {
      type: "gelato" // use gelato, kernel, safe, or custom
    }
    apiKey: process.env.SPONSOR_API_KEY as string,
    waas: dynamic(
      process.env.NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID as string
    ),
    wagmi: wagmi({
      chains: [baseSepolia],
      transports: {
        [baseSepolia.id]: http(),
      },
    }),
  }}
>
  {children}
</GelatoSmartWalletContextProvider>

<GelatoSmartWalletContextProvider
  settings={{
    scw: {
      type: "gelato" // use gelato, kernel, safe, or custom
    }
    apiKey: process.env.SPONSOR_API_KEY as string,
    waas: dynamic(
      process.env.NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID as string
    ),
    wagmi: wagmi({
      chains: [baseSepolia],
      transports: {
        [baseSepolia.id]: http(),
      },
    }),
  }}
>
  {children}
</GelatoSmartWalletContextProvider>

<GelatoSmartWalletContextProvider
  settings={{
    scw: {
      type: "gelato" // use gelato, kernel, safe, or custom
    }
    apiKey: process.env.SPONSOR_API_KEY as string,
    waas: privy(
      process.env.NEXT_PUBLIC_PRIVY_ENVIRONMENT_ID as string
    ),
    wagmi: wagmi({
      chains: [baseSepolia],
      transports: {
        [baseSepolia.id]: http(),
      },
    }),
  }}
>
  {children}
</GelatoSmartWalletContextProvider>

Setting up Connect Button

You can customize the appearance of your connect button here. This button triggers the wallet connectors widget configured for the UI.

const children = (
  <div className="mt-2 text-white">Get Started!</div>
) as React.ReactElement;

export const Login = () => (
  <GelatoSmartWalletConnectButton>{children}</GelatoSmartWalletConnectButton>
);

Fetching Smart Wallet Client

Use this client directly to execute transactions with different gas payment methods. Additionally, a logout option is available to disconnect your connected wallet.

const {
  gelato: { client },
  switchNetwork,
  logout,
} = useGelatoSmartWalletProviderContext();

Sending Transactions

You can send transactions using different gas payment methods as shown below. Additionally, you can add multiple transactions to the calls array to batch them and send them on-chain in a single request.

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

console.log("userOp hash:", results?.id);
const txHash = await results?.wait();
console.log("transaction hash", txHash);

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

console.log("userOp hash:", results?.id);
const txHash = await results?.wait();
console.log("transaction hash", txHash);

const token = "0x036CbD53842c5426634e7929541eC2318f3dCF7e"; // USDC (Base Sepolia)
const results = await client.execute({
  payment: erc20(token),
  calls: [
    {
      to: "0xa8851f5f279eD47a292f09CA2b6D40736a51788E",
      data: "0xd09de08a",
      value: 0n
    }
  ]
});

console.log("userOp hash:", results?.id);
const txHash = await results?.wait();
console.log("transaction hash", txHash);

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

console.log("userOp hash:", results?.id);
const txHash = await results?.wait();
console.log("transaction hash", txHash);

Additional Resources

Check out the complete example React app demonstrating the integration of Dynamic as the wallet provider here.

Introduction

How-To Guides

React SDK

Bundler API Endpoints

Additional Resources

Use Dynamic or Privy Signers

Template & Examples

Smart Wallet React SDK Example

Setup Instructions

Installation

Gelato Smart Wallets React SDK

Getting Started

Additional Resources

Introduction

How-To Guides

React SDK

Bundler API Endpoints

Additional Resources

​Template & Examples

Smart Wallet React SDK Example

​Setup Instructions

​Installation

Gelato Smart Wallets React SDK

​Getting Started

​Additional Resources

Template & Examples

Setup Instructions

Installation

Getting Started

Additional Resources