> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tenderly.co/llms.txt
> Use this file to discover all available pages before exploring further.

# ConnectKit - Node RPC 集成

> 了解如何配置 ConnectKit 组件，将 Node RPC 用作 RPC 提供程序。

[ConnectKit](https://family.co/docs/connectkit) 是一个用于将钱包连接到您的 dapp 的 React.js 组件库，您可以使用 [Node RPC](/node-rpc/overview) 进行区块链连接。ConnectKit 构建于 [wagmi](/node-rpc/dapp-ui/wagmi) 之上。

<Steps>
  ### 配置 Web3Provider

  ```tsx title="Web3Provider.tsx" showLineNumbers theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}

  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>
    );
  };
  ```

  ### 使用 Web3Provider 包裹您的 App

  接下来，用 `Web3Provider` 包裹您的 `App`：

  ```tsx title="App.tsx" showLineNumbers theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}

  const App = () => {
    return (
      <Web3Provider>
          <ConnectKitButton />
      </Web3Provider>
    );
  };
  ```
</Steps>