Dynamic

Integration

Install the sdk

By default, the latest version of the Dynamic SDK ships with Viem. If you need to use Ethers, please refer to this guide

In this example, we are installing only the Ethereum connectors in order to keep bundle size light. If you need any others, you can find the references here

npm

npm i -s @dynamic-labs/sdk-react-core @dynamic-labs/ethereum

yarn

yarn add @dynamic-labs/sdk-react-core @dynamic-labs/ethereum

Add Dynamic to your application

In order to use Dynamic, you should wrap your app with DynamicContextProvider at the highest possible level i.e.

import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
import Home from "./Home";

// Found in your Dynamic dashboard (https://app.dynamic.xyz/dashboard/developer)
const DYNAMIC_ENVIRONMENT_ID = "XXXXX";

const App = () => {
  return (
    <div className="app">
      <DynamicContextProvider
        settings={{
          environmentId: DYNAMIC_ENVIRONMENT_ID,
          walletConnectors: [EthereumWalletConnectors],
        }}
      >
        <Home />
      </DynamicContextProvider>
    </div>
  );
};

export default App;

Create a SmartAccountSigner

Next, inside any component which is wrapped by the above DynamicContextProvider, use the useDynamicContext hook to fetch your provider, and create a SmartAccountSigner:

import { WalletClientSigner, type SmartAccountSigner } from "@alchemy/aa-core";
import { useDynamicContext } from "@dynamic-labs/sdk-react-core";

// eslint-disable-next-line react-hooks/rules-of-hooks
const { primaryWallet } = useDynamicContext();

const dynamicProvider = await primaryWallet?.connector?.getWalletClient();

// a smart account signer you can use as an owner on ISmartContractAccount
export const dynamicSigner: SmartAccountSigner = new WalletClientSigner(
  dynamicProvider,
  "dynamic" // signer type
);

Use it with Modular Account

Let's see it in action with aa-alchemy:

example.ts

import { createModularAccountAlchemyClient } from "@alchemy/aa-alchemy";
import { sepolia } from "@alchemy/aa-core";
import { dynamicSigner } from "./dynamic";

const chain = sepolia;

const provider = await createModularAccountAlchemyClient({
  apiKey: "ALCHEMY_API_KEY",
  chain,
  signer: dynamicSigner,
});

dynamic.ts

import { WalletClientSigner, type SmartAccountSigner } from "@alchemy/aa-core";
import { useDynamicContext } from "@dynamic-labs/sdk-react-core";

// eslint-disable-next-line react-hooks/rules-of-hooks
const { primaryWallet } = useDynamicContext();

const dynamicProvider = await primaryWallet?.connector?.getWalletClient();

// a smart account signer you can use as an owner on ISmartContractAccount
export const dynamicSigner: SmartAccountSigner = new WalletClientSigner(
  dynamicProvider,
  "dynamic" // signer type
);