> ## 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.

# 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

```bash theme={"system"}
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.

```typescript theme={"system"}
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.

```typescript theme={"system"}
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:

```typescript theme={"system"}
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.

```tsx theme={"system"}
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:

```tsx theme={"system"}
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.

```typescript theme={"system"}
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](https://docs.dynamic.xyz/docs/javascript/migrating-from-react/integrating-chains.md) enables EVM with `addEvmExtension()`
* [Using connected wallets](https://docs.dynamic.xyz/docs/javascript/migrating-from-react/using-connected-wallets.md) reads and acts on wallet accounts
* [Transactions & balance](https://docs.dynamic.xyz/docs/javascript/migrating-from-react/transactions-and-balance.md) signs, sends, and reads balances


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.