Configure wagmi transports with Tenderly Node RPC - Tenderly

Wagmi is a React Hooks library for Ethereum integration in React applications, with chain configuration and hooks for wallet, contract, and transaction interactions. Libraries such as Reown AppKit, ConnectKit, Dynamic and RainbowKit are built on top of Wagmi.

Configure Wagmi

Create networks configuration with transports containing Node RPC RPC.

wagmi-config.ts

import { createConfig, http } from 'wagmi'
import { mainnet, base, baseSepolia, optimism } from 'wagmi/chains'
import { injected, walletConnect, metaMask, safe } from 'wagmi/connectors'

const projectId = '<WALLETCONNECT_PROJECT_ID>'

export const config = createConfig({
  chains: [mainnet, base, baseSepolia, optimism],
  connectors: [
    injected(),
    walletConnect({ projectId }),
    metaMask(),
    safe(),
  ],
  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_PUBLIC_TENDERLY_NODE_ACCESS_KEY_BASE}`),
    [baseSepolia.id]: http(`https://base-sepolia.gateway.tenderly.co/${process.env.NEXT_PUBLIC_TENDERLY_NODE_ACCESS_KEY_BASE_SEPOLIA}`),
    [optimism.id]: http(`https://optimism.gateway.tenderly.co/${process.env.NEXT_PUBLIC_TENDERLY_NODE_ACCESS_KEY_OPTIMISM}`),
  },
})

Wrap your app in WagmiProvider

App.tsx

const queryClient = new QueryClient();

export function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <Home />
      </QueryClientProvider>
    </WagmiProvider>
  )
}