Virtual TestNets are live! ⚡️ Test and stage dapps on real-time production data.
Get started →

All Products

Tenderly Node
Dapp UI Libraries
Web3Modal - Tenderly Node Integration

Web3 Modal - Tenderly Node 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 Tenderly Node as chain provider, by using Wagmi’s createConfig and setting Node RPCs in transports array.

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()
const projectId = 'YOUR_PROJECT_ID'
const chains = [mainnet, base, optimism] as const
const config = defaultWagmiConfig({
  metadata: {
    name: 'Web3Modal',
    description: 'Web3Modal Example',
    url: '', // origin must match your domain & subdomain
    icons: ['']
  transports: {
    []: http(`${process.env.NEXT_PUBLIC_TENDERLY_NODE_ACCESS_KEY_MAINNET}`),
    []: http(`${process.env.NEXT_TENDERLY_NODE_ACCESS_KEY_BASE}`),
    []: http(`${process.env.NEXT_TENDERLY_NODE_ACCESS_KEY_OPTIMISM}`),
  wagmiConfig: config,
  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>