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

All Products

Tenderly Node
Dapp UI Libraries
Connect Kit

Connect Kit - Tenderly Node

ConnectKit is a React.js component library for connecting a wallet to your dapp, and you can use Tenderly Node for blockchain connection.

Configure Web3Provider

Web3Provider.tsx
import {createConfig, http, WagmiProvider} from "wagmi";
import {base, mainnet, optimism} from "wagmi/chains";
import {ConnectKitProvider, getDefaultConfig} from "connectkit";
 
const config = createConfig(
  getDefaultConfig({
    // Your dApps chains
    chains: [mainnet],
    transports: {
      // RPC URL for each chain
      [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}`)
    },
 
    // Required API Keys
    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
 
    // Required App Info
    appName: "Your App Name",
 
    // Optional App Info
    appDescription: "Your App Description",
    appUrl: "https://dapp.tenderly.co", // your app's url
    appIcon: "https://tenderly.co/favicons/favicon.ico", // your app's icon, no bigger than 1024x1024px (max. 1MB)
  }),
);
 
 
export const Web3Provider = ({ children }) => {
  return (
    <WagmiProvider config={config}>
      <ConnectKitProvider>{children}</ConnectKitProvider>
    </WagmiProvider>
  );
};

Wrap your App with Web3Provider

Next, wrap your App with Web3Provider:

App.tsx
import { Web3Provider } from "./Web3Provider";
import { ConnectKitButton } from "connectkit";
 
const App = () => {
  return (
    <Web3Provider>
        <ConnectKitButton />
    </Web3Provider>
  );
};