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

# RainbowKit - Node RPC Integration

> RainbowKit के पीछे wagmi transport के रूप में Tenderly Node RPC को कॉन्फ़िगर करें, जिसमें createConfig, chains, connectors, और प्रति-चेन HTTPS endpoints शामिल हैं।

[RainbowKit](https://rainbowkit.com/docs/introduction) एक React लाइब्रेरी है जो विकेंद्रीकृत एप्लिकेशन के लिए wallet कनेक्शन को सरल बनाती है, उपयोगकर्ता अनुभव को बेहतर बनाने के लिए wallet प्रबंधन, चेन कनेक्शन, ENS resolution, बैलेंस डिस्प्ले, और कस्टमाइज़ करने योग्य UI सुविधाएं प्रदान करती है। यह [wagmi](/node-rpc/dapp-ui/wagmi) पर बनी है, इसलिए आप इसके transports को [Node RPC](/node-rpc/overview) पर पॉइंट करते हैं।

### Wagmi config सेट अप करें

```ts title="wagmi-config.ts" showLineNumbers theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
import { createConfig, http } from 'wagmi'
import { mainnet, base, baseSepolia, optimism } from 'wagmi/chains'
import { injected, walletConnect, metaMask, safe } from 'wagmi/connectors'

const projectId = '<WALLETCONNECT_PROJECT_ID>'

export const config = createConfig({
  chains: [mainnet, base, baseSepolia, optimism],
  connectors: [
    injected(),
    walletConnect({ projectId }),
    metaMask(),
    safe(),
  ],
  transports: {
    [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_PUBLIC_TENDERLY_NODE_ACCESS_KEY_BASE}`),
    [baseSepolia.id]: http(`https://base-sepolia.gateway.tenderly.co/${process.env.NEXT_PUBLIC_TENDERLY_NODE_ACCESS_KEY_BASE_SEPOLIA}`),
    [optimism.id]: http(`https://optimism.gateway.tenderly.co/${process.env.NEXT_PUBLIC_TENDERLY_NODE_ACCESS_KEY_OPTIMISM}`),
  },
})
```

### अपने ऐप को रैप करें

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

const queryClient = new QueryClient();

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <Home />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

export default App;
```