Use Dynamic/Privy signers with React SDK

Curious about what our React SDK includes and the features it provides? Explore the full overview here.

Installation

npm: @gelatonetwork/smartwallet-react-sdknpm

npm

npm install @gelatonetwork/smartwallet-react-sdk viem wagmi

yarn

yarn add @gelatonetwork/smartwallet-react-sdk viem wagmi

pnpm

pnpm install @gelatonetwork/smartwallet-react-sdk viem wagmi

Getting started

1. 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";

2. Setting up Smart Wallet Context Provider for different Wallet Providers

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.

Dynamic

<GelatoSmartWalletContextProvider
      settings={{
        scw: {
            type: "gelato" // Select gelato, kernel or safe as scw type
        }, 
        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>

Privy

<GelatoSmartWalletContextProvider
      settings={{
        scw: {
            type: "gelato" // Select gelato, kernel or safe as scw type
        }, 
        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>

3. 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>
);

4. Fetching Smart Wallet Client from Smart Wallet Context

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();

5. 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.

Sponsored

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

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

ERC20

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

Native

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

---

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