Dynamic Signer
In this guide, you will learn how to create a Dynamic (opens in a new tab) signer that can be added as a Safe owner and used to initialize any of the kits from the Safe{Core} SDK.
Check out the Safe Signers demo app (opens in a new tab) on GitHub to follow along this guide with the completed code.
Note that this guide will focus on supporting Ethereum and EVM-compatible wallets. You can enable, import and add more connectors (opens in a new tab) as needed.
Prerequisites
- A Dynamic account (opens in a new tab) and an environment ID.
Install dependencies
_10npm install @dynamic-labs/sdk-react-core @dynamic-labs/ethereum
Steps
Imports
Here are the necessary imports for this guide.
_10import {_10 DynamicContextProvider,_10 useDynamicContext,_10 useIsLoggedIn_10} from '@dynamic-labs/sdk-react-core'_10import {_10 EthereumWalletConnectors,_10 isEthereumWallet_10} from '@dynamic-labs/ethereum'
Get the Environment ID
Once you create a new Dynamic project in the dashboard (opens in a new tab), you will find your environment ID in the SDK & API Keys page (opens in a new tab).
Once you have it, you need to initialize the DYNAMIC_ENVIRONMENT_ID variable with it.
_10const DYNAMIC_ENVIRONMENT_ID = // ...
Initialize Dynamic
Dynamic works with React hooks. This means you can wrap your app with the DynamicContextProvider and have access to several react hooks like useDynamicContext() that will provide all the functionality.
DynamicContextProvider receives an environmentId and other configuration options. Check Dynamic React SDK documentation (opens in a new tab) to learn more about all the different configuration options.
_10<DynamicContextProvider_10 settings={{_10 environmentId: DYNAMIC_ENVIRONMENT_ID,_10 walletConnectors: [EthereumWalletConnectors],_10 // Add other configuration options as needed_10 }}_10>_10 <App />_10</DynamicContextProvider>
In this guide you will use the primaryWallet from the useDynamicContext() hook, and the useIsLoggedIn() hook.
_10const { primaryWallet } = useDynamicContext()_10const isLoggedIn = useIsLoggedIn()
Login
In the App component, add the DynamicWidget component (opens in a new tab) that will handle all the login and authentication logic for you.
_10import { DynamicWidget } from '@dynamic-labs/sdk-react-core'_10_10const App = () => {_10 return (_10 <>_10 // Your other content here_10 <DynamicWidget />_10 </>_10 )_10}
Get the provider and signer
Once the user is logged in through the DynamicWidget, you can get the provider and signer, which is the externally-owned account of the user that was derived from its credentials.
To do that there is a useEffect() that executes when any of the isLoggedIn and primaryWallet variables have their values updated. Once they are all true, you have access to the user's connected signer. Note that you should also check that the wallet is an Ethereum wallet using the isEthereumWallet() function.
You can instantiate the provider and signer like so:
_10useEffect(() => {_10 const init = async () => {_10 if (isLoggedIn && primaryWallet && isEthereumWallet(primaryWallet)) {_10 const provider = await primaryWallet.getWalletClient()_10_10 const signer = primaryWallet.address_10 }_10 }_10 init()_10}, [isLoggedIn, primaryWallet])
With the provider and signer you are ready to instantiate any of the kits from the Safe{Core} SDK and set up or use this signer as a Safe owner.
Recap and further reading
After following this guide, you are able to create a Safe signer using Dynamic and get the provider and signer required to initialize the kits from the Safe{Core} SDK.
Learn more about Dynamic by checking the following resources: