> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# DynamicWagmiConnector

> The `DynamicWagmiConnector` component integrates your Dynamic project settings with Wagmi

<Card title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](/javascript/reference/react-quickstart) to get started.
</Card>

# Usage

```typescript theme={"system"}
import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector";
import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";

function App() {
  return (
    <DynamicContextProvider settings={{ environmentId: "your_env_id" }}>
      <DynamicWagmiConnector>
        <YourRoutes />
      </DynamicWagmiConnector>
    </DynamicContextProvider>
  );
}
```

# Props

## evmNetworks

You can pass a static `evmNetworks` array. This will be passed down to the [Wagmi client config](https://wagmi.sh/react/client#configuration).

The reference for an EvmNetwork can be found [here](/react/reference/objects/evmNetwork).

Example:

```typescript theme={"system"}
const evmNetworks: EvmNetwork[] = [
  {
    blockExplorerUrls: ["https://etherscan.io/"],
    chainId: 1,
    chainName: "Ethereum Mainnet",
    iconUrls: ["https://app.dynamic.xyz/assets/networks/eth.svg"],
    nativeCurrency: { decimals: 18, name: "Ether", symbol: "ETH" },
    networkId: 1,
    privateCustomerRpcUrls: ["https://mainnet.infura.io/v3/your-api-key"],
    rpcUrls: ["https://cloudflare-eth.com"],
    vanityName: "Ethereum",
  },
];
```

### WebSocket

For webSocket support with Wagmi, you can pass an object as the privateCustomerRpcUrls with your webSocket url configuration

```typescript theme={"system"}
const evmNetworks: EvmNetwork[] = [
  {
    ...
    privateCustomerRpcUrls: [
      {
        url: "https://mainnet.infura.io/v3/your-api-key",
        webSocket: "wss://mainnet.infura.io/v3/your-api-key"
      }
    ],
    ...
  },
];
```