Forks will be deprecated on March 31, 2025. Please migrate to Tenderly Virtual TestNets or contact our support for assistance with automatic migration.
Node RPC
Dapp UI Libraries
Reown AppKit

Reown AppKit - Node RPC Integration

Reown AppKit streamlines Web3 wallet integration by offering seamless authentication through email and social logins, built-in fiat on-ramps, smart contract accounts, and user notifications — delivering a complete toolkit for creating engaging blockchain applications.

You can use Node RPC as chain provider, by using Wagmi’s createConfig and setting Node RPCs in transports array.

RPC Configuration

  • Add the following configuration to config/index.ts to use Tenderly RPC.
  • Set the following environment variables:
    • NEXT_PUBLIC_TENDERLY_NODE_ACCESS_KEY_MAINNET
    • NEXT_PUBLIC_PROJECT_ID
config/index.ts
import { cookieStorage, createStorage, http } from '@wagmi/core'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { mainnet, arbitrum } from '@reown/appkit/networks'
 
// Get projectId from https://cloud.reown.com
export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID
 
if (!projectId) {
  throw new Error('Project ID is not defined')
}
 
export const networks = [mainnet, arbitrum]
 
//Set up the Wagmi Adapter (Config)
export const wagmiAdapter = new WagmiAdapter({
  storage: createStorage({
    storage: cookieStorage
  }),
  ssr: true,
  transports: {
    [mainnet.id]: http(process.env.NEXT_PUBLIC_TENDERLY_NODE_ACCESS_KEY_MAINNET!)
  },
  networks,
  projectId
})
 
export const config = wagmiAdapter.wagmiConfig

Create the ContextProvider

Create Reown AppKit ContextProvider you can use in the rest of your UI to connect to selected networks.

context/index.ts
'use client'
 
import { wagmiAdapter, projectId } from '@/config'
import { createAppKit } from '@reown/appkit/react'
import { mainnet, arbitrum } from '@reown/appkit/networks'
 
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import React, { type ReactNode } from 'react'
import { cookieToInitialState, WagmiProvider, type Config } from 'wagmi'
 
// Set up queryClient
const queryClient = new QueryClient()
 
if (!projectId) {
  throw new Error('Project ID is not defined')
}
 
// Set up metadata
const metadata = { //this is optional
  name: "appkit-example",
  description: "AppKit Example - EVM",
  url: "https://exampleapp.com", // origin must match your domain & subdomain
  icons: ["https://avatars.githubusercontent.com/u/37784886"]
}
 
// Create the modal
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata: metadata,
  features: {
    analytics: true, // Optional - defaults to your Cloud configuration
  }
})
 
function ContextProvider({ children, cookies }: { children: ReactNode; cookies: string | null }) {
  const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig as Config, cookies)
 
  return (
    <WagmiProvider config={wagmiAdapter.wagmiConfig as Config} initialState={initialState}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  )
}
 
export default ContextProvider
WagmiConnect Kit