Learn more
Introducing the Dynamic Global Wallet Kit: A powerful toolset for developers to build ecosystems around their apps or chains!
Table of contents
You’ve already heard about our Wagmi integration, but today we will put it to the test by implementing Dynamic straight into a default implementation of create-web3-dapp from Alchemy (cw3d) in three steps! Cw3d is fantastic to use as a scaffold to get going quickly with a dapp. If you want to learn more about cw3d and how to kickstart your web3 dapps in less than 3 minutes, check out the official docs.
1. Make sure you have a Dynamic account and know your environment ID (found in your developer section in the Dynamic dashboard)
2. Set up a fresh default instance of create-web3-dapp locally by running the npx command (see code snippet below).
For this tutorial, we recommend the minimal installation, like the options chosen here:
Everything we're about to cover can be found in this live Codesandbox (you will need to add your own env vars in .env)
1. With whatever package manager you’re comfortable with, uninstall and update the following:
Then install the following:
2. In /app/layout.tsx, overwrite the whole file with the following code (paste in your own environment ID):
In /components/navigation/navbar/index.tsx, overwrite the whole file with the following code:
As you can see, everything is very similar to what you’re pasting over. In fact, it comes in at even less code for even more functionality.
3. You’re done! You can now create a new component, and then add components from create-web3-dapp to that using these guides, and they will work just as soon as you access the primary wallet address using the useDynamicContext hook, then pass walletAddress={address} to your create-web3-dapp components as a prop. Here is an example you can paste over /app/page.tsx
All child-components get wrapped in the DynamicContextProvider, making sure all components have access to Dynamic functionality.
The next layer is the DynamicWagmiConnector component wrapper, which connects up Dynamic to Wagmi so you can just use Wagmi as expected.
We then use the DynamicWidget component to display the Connect Wallet button and also a bar to show the users' current connected status.
Now you can use the useAccount hook from Wagmi to fetch the currently connected wallet address which can be used elsewhere i.e. in TokensBalanceDisplay.
Wondering where to go from here? You can start to customize the design of the widget, capture more optional information from users, and much more!
In the next post, we will enhance our app by adding NFT gating to login!
Share this article