🤔 Got questions? Schedule an office hours session.
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