Follow this guide to set up Dynamic to work with Wagmi V2.

Wagmi v2 is available in SDK v2.0.0-alpha.5 and up.

​
Installing packages

First, you want to install the DynamicWagmiConnector package using npm or yarn

npm install viem wagmi @tanstack/react-query @dynamic-labs/wagmi-connector@alpha @dynamic-labs/sdk-react-core@alpha @dynamic-labs/ethereum@alpha

​
Configure Wagmi and Dynamic

Here’s a full code snippet with all the setup code required.

import {
  DynamicContextProvider,
  DynamicWidget,
} from '@dynamic-labs/sdk-react-core';
import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';
import { DynamicWagmiConnector } from '@dynamic-labs/wagmi-connector';
import {
  createConfig,
  WagmiProvider,
  useAccount,
} from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { http } from 'viem';
import { mainnet } from 'viem/chains';

const config = createConfig({
  chains: [mainnet],
  multiInjectedProviderDiscovery: false,
  transports: {
    [mainnet.id]: http(),
  },
});

const queryClient = new QueryClient();

export default function App() {
  return (
    <DynamicContextProvider
      settings={{
        environmentId: 'ENV_ID',
        walletConnectors: [EthereumWalletConnectors],
      }}
    >
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          <DynamicWagmiConnector>
            <DynamicWidget />
            <AccountInfo />
          </DynamicWagmiConnector>
        </QueryClientProvider>
      </WagmiProvider>
    </DynamicContextProvider>
  );
}

function AccountInfo() {
  const { address, isConnected, chain } = useAccount();

  return (
    <div>
      <p>
        wagmi connected: {isConnected ? 'true' : 'false'}
      </p>
      <p>wagmi address: {address}</p>
      <p>wagmi network: {chain?.id}</p>
    </div>
  );
};

Two things to note here:

  1. multiInjectedProviderDiscovery is set to false – this is because Dynamic implements the multi injected provider discovery protocol itself. If you’d like to keep this enabled on Wagmi, go ahead but you might see some undefined behavior.
  2. The example configures mainnet as the only chain. You will need to pass in all of the chains that you are using yourself. For more info, see the “Chain Configuration” section below.

Throughout your app, you can now use Wagmi hooks like useAccount and they will automatically sync to the wallet that you logged in with via Dynamic.

Make sure to call createConfig at the top-level of your app. If you call it inside of a component, it will be called during each render, which can lead to unexpected behavior.

​
Chain Configuration

If you are upgrading from Dynamic + Wagmi v1, then this config will look new to you. Previously, Dynamic was automatically updating the Wagmi config with the chains that you configured in your Dynamic Dashboard. This behavior has changed in v2 to give you more control over your Wagmi config and for a simpler integration. What this means is that you will need to pass to Wagmi all of the chains you have configured with Dynamic.

For example, if in Dynamic you have enabled Ethereum Mainnet, Optimism and Base, you will need to update your Wagmi config to look like this:

import {
  createConfig,
  WagmiProvider,
} from 'wagmi';
import { http } from 'viem';
import { mainnet, optimism, base } from 'viem/chains';

const config = createConfig({
  chains: [mainnet, optimism, base],
  multiInjectedProviderDiscovery: false,
  transports: {
    [mainnet.id]: http(),
    [optimism.id]: http(),
    [base.id]: http(),
  },
});

For docs on createConfig, see: https://wagmi.sh/react/api/createConfig

For more general information on what you can do with Wagmi, check out their getting started docs: https://wagmi.sh/react/getting-started

Was this page helpful?

NextAuth & DynamicWagmi & Dynamic