🤔 Got questions? Schedule an office hours session.
Node RPC
Dapp UI Libraries
Web3Modal - Node RPC Integration

Web3 Modal - Node RPC Integration

Web3Modal SDK asimplifies connecting Web3 dapps to wallets, offering a user-friendly interface for executing actions like signing transactions and interacting with smart contracts on the blockchain.

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

config.ts
import { createWeb3Modal } from '@web3modal/wagmi/react'
import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
 
import { WagmiProvider, http } from 'wagmi'
import { base, mainnet, optimism } from 'wagmi/chains'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
const queryClient = new QueryClient()
 
// https://cloud.walletconnect.com
const projectId = 'YOUR_PROJECT_ID'
 
const chains = [mainnet, base, optimism] as const
 
const config = defaultWagmiConfig({
  chains,
  projectId,
  metadata: {
    name: 'Web3Modal',
    description: 'Web3Modal Example',
    url: 'https://dapp.tenderly.co', // origin must match your domain & subdomain
    icons: ['https://tenderly.co/favicons/favicon.ico']
  },
  transports: {
    [mainnet.id]: http(`https://mainnet.gateway.tenderly.co/${process.env.NEXT_PUBLIC_TENDERLY_NODE_ACCESS_KEY_MAINNET}`),
    [base.id]: http(`https://base.gateway.tenderly.co/${process.env.NEXT_TENDERLY_NODE_ACCESS_KEY_BASE}`),
    [optimism.id]: http(`https://optimism.gateway.tenderly.co/${process.env.NEXT_TENDERLY_NODE_ACCESS_KEY_OPTIMISM}`),
  },
})
 
createWeb3Modal({
  wagmiConfig: config,
  projectId,
  enableAnalytics: true, // Optional - defaults to your Cloud configuration
  enableOnramp: true // Optional - false as default
})
export function Web3ModalProvider({ children }) {
    return (
        <WagmiProvider config={config}>
            <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
        </WagmiProvider>
    )
}
RainbowKit