Quickstart

​

Pre-requisites

​

Dynamic account

Sign up to create your account. Then copy your environmentID from the Dynamic overview page or from the developer page.

​

An Application

Dynamic works with React (v17 and upward) and NextJS (v12 and upward). If you don’t have an application at hand to work with, you can use our React starter or NextJS starter.

​

Step 1: Install the version of the SDK you need

This depends on whether you plan to use Ethers or Viem as your Etherium library, and also whether you want to start with the complete or modular version of the SDK itself (see note below)

yarn add @dynamic-labs/sdk-react@viem viem

  yarn add @dynamic-labs/sdk-react

​

Step 2: Initialize the SDK

We are going to use two components to configure Dynamic inside our application:

1. The DynamicContextProvider component, which will initialize the SDK and make it available to the rest of the application. It’s worth placing this as high up the component tree as possible to make sure Dynamic is reactable from wherever you need it.
2. The DynamicWidget component, which will render the UI for the user to connect, manage their wallet, and more.

You can place the DynamicWidget anywhere you want to as long as the containing component is wrapped by the DynamicProvider. For simplicities sake in this example we will just place it in App.js.

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

const App = () => (
  <DynamicContextProvider
    settings={{
      environmentId: "Your environmentID",
    }}
  >
    <DynamicWidget />
  </DynamicContextProvider>
);

export default App;

​

Step 3: Choose your React Hooks

    yarn add @dynamic-labs/wagmi-connector wagmi

    yarn add @dynamic-labs/wagmi-connector@viem wagmi

import { DynamicContextProvider, DynamicWidget } from '@dynamic-labs/sdk-react';

// 1. Import the DynamicWagmiConnector
import { DynamicWagmiConnector } from '@dynamic-labs/wagmi-connector';

export const App = () => {
return (
    <DynamicContextProvider
    settings={{
        environmentId: '<<sandboxEnvironmentId>>',
    }}
    >
    {/* 2. Wrap your app with the `DynamicWagmiConnector` */}
    <DynamicWagmiConnector>
        <DynamicWidget />
        <YourApp />
    </DynamicWagmiConnector>
    </DynamicContextProvider>
);
}

import { useAccount, useNetwork } from 'wagmi';

const YourApp = () => {
  const { address, isConnected } = useAccount();
  const { chain } = useNetwork();

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

​

Step 4: Log in with your wallet, and see data in your developer dashboard

Now that your widget is set up locally, try to log in. As soon as you do, head over to your developer dashboard and click on user management and analytics. You’ll be able to see your user show up!

​

Step 5: Celebrate! (and dive deeper into Dynamic)

That’s it. You should now have a fully working version of the Dynamic login flow.

Now that you have it set up, you can deep dive into the:

• Important concepts
• SDK reference
• Design customisations

The world is your oyster (imagine a deep movie voice).

You can also join our Slack Community to ask us anything on your mind.