All Products

Tenderly Node
Dapp UI Libraries
RainbowKit

RainbowKit - Tenderly Node Integration

RainbowKit is a React library that simplifies wallet connection for decentralized applications, offering wallet management, chain connections, ENS resolution, balance display, and customizable UI features to enhance the user experience.

Set up Wagmi config

wagmi-config.ts
import {  createConfig, http } from 'wagmi'
import {  base, mainnet, optimism } from 'wagmi/chains'
import {  injected, metaMask, safe, walletConnect } from 'wagmi/connectors'
 
const projectId = '<WALLETCONNECT_PROJECT_ID>'
 
export const config = createConfig({
  chains: [mainnet, base],
  connectors: [
    injected(),
    walletConnect({ projectId }),
    metaMask(),
    safe(),
  ],
  transports: {
    [mainnet.id]: http(`https://mainnet.gateway.tenderly.co/${process.env.NEXT_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}`),
  },
})

Wrap your app

App.tsx
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Home } from "./Home";
import { config } from './wagmi-config';
 
const queryClient = new QueryClient();
 
const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <Home />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};
 
export default App;