Wagmi integration

Replace the React SDK’s wagmi connector with @dynamic-labs-sdk/wagmi, which keeps a wagmi config in sync with Dynamic’s selected EVM wallet account.

The React SDK shipped a wagmi connector (@dynamic-labs/wagmi-connector) that you passed into createConfig. The JavaScript SDK ships @dynamic-labs-sdk/wagmi instead: you create your wagmi config once, with no Dynamic connector in it, then start a sync that keeps wagmi pointed at Dynamic’s selected EVM wallet account. Dynamic stays the source of truth and wagmi mirrors it, so useAccount, useSendTransaction, useReadContract, and the rest of the wagmi hooks work against Dynamic wallets.

Install

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

@wagmi/core (v2 or v3) and viem are peer dependencies. wagmi and @tanstack/react-query are only needed for the React helpers.

Which API to use

Goal	JavaScript	React
Keep wagmi on Dynamic’s selected account	syncDynamicWagmi	SyncDynamicWagmi component or useSyncDynamicWagmi hook
Pin wagmi to one specific account	createDynamicWagmiConnector	createDynamicWagmiConnector

createDynamicWagmiConnector is the primitive the sync helpers build on. It bridges exactly one account and never follows Dynamic’s selection, so reach for it only when you deliberately want wagmi pinned to a specific account.

Create the wagmi config

Create the config once at startup. There is no Dynamic connector in it, and you never rebuild it.

import { createConfig, http } from '@wagmi/core';
import { mainnet } from 'viem/chains';

export const config = createConfig({
  chains: [mainnet],
  // Dynamic handles wallet discovery, so disable wagmi's own injected discovery.
  multiInjectedProviderDiscovery: false,
  transports: { [mainnet.id]: http() },
});

Sync wagmi with Dynamic

syncDynamicWagmi subscribes to Dynamic’s wallet events and drives wagmi’s connect and disconnect whenever the selected EVM account changes (login, wallet switch, logout). It returns a function that stops the sync and tears down the connection it created.

import { syncDynamicWagmi } from '@dynamic-labs-sdk/wagmi';
import { config } from './wagmiConfig';

const stopSync = syncDynamicWagmi({ config });

// When you're done (teardown or logout):
stopSync();

You can start the sync before the user has a wallet: wagmi stays disconnected until an EVM wallet account is selected. If you use multiple Dynamic clients, pass the client as the second argument: syncDynamicWagmi({ config }, client).

Switching the wallet wagmi points at is a Dynamic call, with no wagmi code involved:

import { setSelectedWalletAccount } from '@dynamic-labs-sdk/client';
import type { WalletAccount } from '@dynamic-labs-sdk/client';

const switchWagmiToAccount = async (walletAccount: WalletAccount) => {
  // wagmi re-points to this account automatically.
  await setSelectedWalletAccount({ walletAccount });
};

React

SyncDynamicWagmi runs the sync for the component’s lifetime and renders nothing. Place it inside your DynamicProvider, WagmiProvider, and QueryClientProvider tree.

import { DynamicProvider } from '@dynamic-labs-sdk/react-hooks';
import { SyncDynamicWagmi } from '@dynamic-labs-sdk/wagmi/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet } from 'wagmi/chains';

// Your Dynamic client, created once with createDynamicClient(...).
import { client } from './dynamicClient';

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

const queryClient = new QueryClient();

export const Providers = ({ children }) => (
  <DynamicProvider client={client}>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <SyncDynamicWagmi config={config} />
        {children}
      </QueryClientProvider>
    </WagmiProvider>
  </DynamicProvider>
);

The hook is available directly when you prefer to run the sync yourself:

import { useSyncDynamicWagmi } from '@dynamic-labs-sdk/wagmi/react';
import { config } from './wagmiConfig';

function WagmiSync() {
  useSyncDynamicWagmi({ config });

  return null;
}

Pin wagmi to one account

To point wagmi at an account of your choosing rather than Dynamic’s selected one, build the connector yourself. The wallet provider is derived from the account, so you only pass the account.

import { createDynamicWagmiConnector } from '@dynamic-labs-sdk/wagmi';
import type { EvmWalletAccount } from '@dynamic-labs-sdk/evm';
import { connect, disconnect, getConnections } from '@wagmi/core';
import { config } from './wagmiConfig';

const pinWagmiToAccount = async (walletAccount: EvmWalletAccount) => {
  await connect(config, {
    connector: createDynamicWagmiConnector({ walletAccount }),
  });
};

// Dynamic-backed connectors carry `type: 'dynamic'`, so you can disconnect
// yours and leave connections your app made elsewhere untouched.
const disconnectDynamicConnections = async () => {
  const dynamicConnections = getConnections(config).filter(
    (connection) => connection.connector.type === 'dynamic',
  );

  for (const { connector } of dynamicConnections) {
    await disconnect(config, { connector });
  }
};

This connector is bound to that single account and does not react to setSelectedWalletAccount. To point it elsewhere, disconnect it and connect a connector built for the other account. createDynamicWagmiConnector throws NotEvmWalletAccountError when the account is not an EVM wallet account.

What the connector supports

• connect and disconnect
• getAccounts, getChainId, and isAuthorized
• switchChain
• Forwarding Dynamic wallet events (account change, network change, disconnect) to wagmi

Alternative: skip wagmi

You do not need wagmi to work with EVM wallets in the JavaScript SDK. Enable the EVM extension and use the SDK’s functions and React hooks directly:

• Integrating chains enables EVM with addEvmExtension()
• Using connected wallets reads and acts on wallet accounts
• Transactions & balance signs, sends, and reads balances