> ## 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) — это библиотека React.js-компонентов для подключения кошелька к вашему dapp, и вы можете использовать [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`:

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

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