> ## 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 集成

> 将 Tenderly Node RPC 配置为 wagmi transport，在 React dapp 中接入 createConfig、chains、connectors 以及各链的 HTTPS 端点。

[Wagmi](https://wagmi.sh/) 是一个 React Hooks 库，简化了 React 应用中的 Ethereum 集成，提供便捷的安装、链配置以及用于钱包、合约和交易交互的各种 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 的 `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>
  )
}
```