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

# Wagmi - Node RPC Integration

> अपने React dapp में createConfig, chains, connectors, और प्रति-चेन HTTPS endpoints को वायर करते हुए, wagmi transport के रूप में Tenderly Node RPC को कॉन्फ़िगर करें।

[Wagmi](https://wagmi.sh/) एक React Hooks लाइब्रेरी है जो React एप्लिकेशन में Ethereum एकीकरण को सरल बनाती है, आसान इंस्टॉलेशन, चेन कॉन्फ़िगरेशन, और wallet, कॉन्ट्रैक्ट, और transaction इंटरैक्शन के लिए विभिन्न hooks प्रदान करती है।

[Reown AppKit](/node-rpc/dapp-ui/reown), [ConnectKit](/node-rpc/dapp-ui/connectkit), [Dynamic](/node-rpc/dapp-ui/dynamic) और [RainbowKit](/node-rpc/dapp-ui/rainbowkit) जैसी लाइब्रेरीज़ Wagmi के ऊपर बनी हुई हैं।

## Wagmi कॉन्फ़िगर करें

Node RPC RPC वाले `transports` के साथ नेटवर्क्स कॉन्फ़िगरेशन बनाएं।

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

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

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

const queryClient = new QueryClient();

export function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <Home />
      </QueryClientProvider>
    </WagmiProvider>
  )
}
```