> ## 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 Integration

> जानें कि RPC प्रदाता के रूप में Node RPC का उपयोग करने के लिए अपने ConnectKit घटकों को कैसे कॉन्फ़िगर करें।

[ConnectKit](https://family.co/docs/connectkit) आपके dapp में wallet कनेक्ट करने के लिए एक 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>
    );
  };
  ```

  ### अपने App को Web3Provider से रैप करें

  इसके बाद, अपने `App` को `Web3Provider` से रैप करें:

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

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