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.