Intro to the SDK

Let’s look at an example to get used to working with our SDK! Imagine we want to get the address and signer of the user’s primary wallet, and also sign a transaction.

​

Getting set up

​

Installation

• yarn

• npm

  yarn add @dynamic-labs/sdk-react

​

Setting up the DynamicContextProvider

Now that we have the SDK installed, we need to wrap our application in the DynamicContextProvider component. This component is the entry point to the SDK, and it provides all the hooks and components that we will use to interact with the SDK.

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

const App = () => (
  <DynamicContextProvider
     settings={{
       environmentId: 'Enter your Environment ID here'
    }}>
    <DynamicWidget /> 
  </DynamicContextProvider>
);

export default App;

​

Environment ID

The DynamicContextProvider component takes a prop called environmentId. This is a string that represents the Dynamic environment that you want to use. You should paste in your environmentId which you can find here

​

Accessing hooks

Once you wrap your application in the DynamicContextProvider component and have your environmentId set, any child component will be able to use the provided hooks and components. We will employ a commonly used hook: useDynamicContext.

This hook gives you access to all kinds of things, which you can learn about here. Specifically though, it gives you access to wallets that the user has associated with them.

You can access wallets in multiple ways through the hook, from the list of currently connected wallets, to the secondary wallets connected. Again, all these attributes can be found in the spec for the hook.

Getting primary wallet address One of the most commonly accessed attributes is primaryWallet, which is an instance of a Wallet that represents the most recently connected wallet, or the last wallet that was selected as primary wallet - this is the one we want!

const { primaryWallet } = useDynamicContext();

Since primaryWallet is an instance of Wallet, we can look at the Object Reference to see what this gives us access to. Immediately we can see “address” which is the first thing we wanted:

const primaryWalletAddress = primaryWallet?.address;

​

Getting the signer and signing

Now the last part, the signer. We can also see in the reference for Wallet that there is a field called connector. This is a really important concept!

Each web3 wallet has different methods associated with it. For example a Metamask might have different method names than Phantom. We provide you with an interface so the methods are standardized between all wallets - that’s the wallet connector interface!

Each and every Wallet has a connector object on it, accessed like this:

const connector = primaryWallet?.connector;

By looking at the Object Reference for the connector, we can see a method called getSigner, which sounds exactly like what we need! It returns a promise, so we will either use async/await or implement .then and .catch:

const signer = await connector.getSigner();

Once we have our signer, we can very quickly sign a message using the following:

const signature = await signer.signMessage(‘example’)

We’re done!

​

Summary

We explained how the SDK works by demonstrating an example.

By using the useDynamicContext hook within the DynamicContextProvider component, we accessed the Wallet interface.

Through this interface, we obtained the address of the user’s primary wallet using primaryWallet.address.

We also learned about the connector attribute, which led us to the wallet connector interface. From there, we accessed the getSigner() method to retrieve the signer for the wallet and use that signer to sign an example message.

​

CodeSandBox

https://codesandbox.io/p/github/dynamic-labs/sdk-example/main

​

Full Code

import "./App.css";
import Main from "./components/Main";

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

function App() {
  return (
    <div className="App">
      <DynamicContextProvider
        settings={{
          environmentId: "dca95954-81d8-4ef8-b20f-b1c3b6781cb6",
        }}
      >
        <Main />
      </DynamicContextProvider>
    </div>
  );
}

export default App;

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

const Main = () => {
  const { primaryWallet } = useDynamicContext();

  const signMessage = async (primaryWallet) => {
    if (!primaryWallet) return null;
    else {
      console.log(primaryWallet.address);
    }

    const signer = await primaryWallet.connector.getSigner();

    return signer ? await signer.signMessage("example") : null;
  };

  return (
    <div>
      <DynamicWidget />
      <button onClick={() => signMessage(primaryWallet)}>Sign Message</button>
    </div>
  );
};

export default Main;

You can find more examples here

​

Links

DynamicContextProvider component: https://docs.dynamic.xyz/docs/dynamiccontextprovider-settings

useDynamicContext hook: https://docs.dynamic.xyz/docs/usedynamiccontext

Wallet object reference: https://docs.dynamic.xyz/docs/wallet

Wallet Connector object reference: https://docs.dynamic.xyz/docs/walletconnector