Install Dynamic

Install Dynamic if the desired component you wish to use requires WEB3 wallet connectivity

Install web3 dependencies

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

Wagmi config setup

Create a new file for your Wagmi configuration.

For this example we will create a file named config/index.tsx outside our app directory and set up the following configuration.

import { http, createConfig } from "wagmi";
import { mainnet, arbitrum, sepolia, polygon, base, optimism } from "wagmi/chains";

// Dynamic Environment ID from https://app.dynamic.xyz/dashboard/developer/api
export const dynamicEnvironmentId = process.env.NEXT_PUBLIC_DYNAMIC_ID;

if (!dynamicEnvironmentId) {
  console.warn("NEXT_PUBLIC_DYNAMIC_ID is not defined");
}

export const chains = [mainnet, arbitrum, sepolia, polygon, base, optimism] as const;

// Wagmi config for use with Dynamic
export const wagmiConfig = createConfig({
  chains,
  multiInjectedProviderDiscovery: false,
  transports: {
    [mainnet.id]: http(),
    [arbitrum.id]: http(),
    [sepolia.id]: http(),
    [polygon.id]: http(),
    [base.id]: http(),
    [optimism.id]: http(),
  },
});

In order for Dynamic to work properly you must first setup a .env file in the root of your directory and create a variable named NEXT_PUBLIC_DYNAMIC_ID where you will pass in your Environment ID. You can get your Environment ID for free by visiting the Dynamic developer dashboard.

Context provider setup

Let's create now a context provider that will wrap our application and initialize Dynamic with Wagmi integration.

In this example we will create a file named context/index.tsx outside our app directory and set up the following configuration

"use client";

import React, { type ReactNode } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector";
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
import { wagmiConfig, dynamicEnvironmentId } from "@/config";

// Set up queryClient
const queryClient = new QueryClient();

function ContextProvider({ children }: { children: ReactNode }) {
  return (
    <DynamicContextProvider
      settings={{
        environmentId: dynamicEnvironmentId || "",
        walletConnectors: [EthereumWalletConnectors],
      }}
    >
      <WagmiProvider config={wagmiConfig}>
        <QueryClientProvider client={queryClient}>
          <DynamicWagmiConnector>
            {children}
          </DynamicWagmiConnector>
        </QueryClientProvider>
      </WagmiProvider>
    </DynamicContextProvider>
  );
}

export default ContextProvider;

Layout setup

Next in our app/layout.tsx file, we will import our ContextProvider component and wrap our application with it.

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

import ContextProvider from '@/context'

export const metadata: Metadata = {
  title: "Dynamic Example App",
  description: "Powered by Dynamic, built by Gizmolab"
};

export default function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ContextProvider>{children}</ContextProvider>
      </body>
    </html>
  )
}

Using the Dynamic Widget

To display a connect wallet button, you can use the DynamicWidget component from Dynamic. Add it anywhere in your app where you want users to connect their wallet.

import { DynamicWidget } from "@dynamic-labs/sdk-react-core";

export default function Header() {
  return (
    <header className="flex justify-between items-center p-4">
      <h1>My App</h1>
      <DynamicWidget />
    </header>
  );
}

The DynamicWidget provides a complete wallet connection experience including wallet selection, connection status, and user profile. You can customize its appearance in the Dynamic dashboard design settings.

Troubleshooting-first refresh

Verify the Dynamic + Wagmi install before you ship wallet UX

This guide now focuses on the implementation questions behind the search demand: how to line up your environment ID, Wagmi chains, provider order, and post-install verification so the widget works on the first meaningful wallet-connect test.

Chain Selector component

See a production-ready Dynamic-powered component that depends on the same wallet connectivity pattern.

LiFi Widget component

Use this example when you want to turn the wallet connection layer into a swap and bridging workflow.

Install Next.js guide

Start here if you need the base app scaffold before wiring Dynamic and Wagmi together.

Install Dynamic FAQ

Why does Dynamic throw evmNetworks or privateCustomerRpcUrls errors?

Those errors usually mean the Wagmi chains array, transport map, or Dynamic environment setup is incomplete. Match the chains you pass into createConfig with the connectors and RPC settings your app exposes before mounting DynamicWagmiConnector.

Where should I define NEXT_PUBLIC_DYNAMIC_ID in a Next.js app?

Add NEXT_PUBLIC_DYNAMIC_ID to your project root .env file before starting the app. The guide keeps the value in a shared config module so both the DynamicContextProvider and any wallet-dependent UI use the same environment ID.

What is the safest way to verify the integration after setup?

Restart the dev server, confirm the Dynamic widget renders, open the wallet modal, and test a full connect flow on one supported chain. If the modal opens but the provider fails, re-check your Wagmi config, provider order, and environment variables.