DynamicWagmiConnector

The DynamicWagmiConnector component integrates your Dynamic project settings with Wagmi

Recommended: JavaScript SDK with React Hooks

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) to get started.

Usage

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.

The reference for an EvmNetwork can be found here.

Example:

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

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