About The Scaffold Series (Don’t Skip This Part!)
I want to emphasize that the goal here is not to upload as much knowledge as possible into your beautiful mind. But also to give you the tools and mindset to navigate The Solana Path and shape you into a Solana dev.
I will be using a top-down approach. I will only explain concepts you can see and play with right now, so that's not a reference.
Instead of forcing accounts, transactions, and all kinds of weird things into your brain, we will do like in sports, where you will get to play with the ball first (the code) and then start to dig a bit deeper.
Questions open the mind, while answers close it, the goal is to give you the right questions to unroll the Solana path.
To be a good dev (and to live sanely), your goal is not only to learn more and more things but instead focus on reading between the lines, improve your pattern recognition and acquire the proper mindset for a specific technology.
You are accepted to the dojo if...
We will be using NextJS and React, so I assume you can code in any language or have basic Javascript skills.
🙊 Please DO NOT listen to the Imposter Syndrome voice telling you to take a course on NextJS or React right now! We are fine as we are. Of course, sharpen your NextJS or React skill later if needed.
This is not for you if...
You are already building on Solana; come back later for new chapters 😗.
The chapters:
- Getting a Base Floor - Wallet Adapter (this article).
- Your First Query - Cookbook & web3.js
- Transaction101 - Programs & Transactions
--
About The Authors
- Solana dApp Scaffold is written by DonnySolana
- And the article is written by mwrites
Scaffold Starter - 1 Wallet Adapter
Greetings! First, clap me five for coming here and taking steps to become a Solana Builder! 👊 This series is for you if you have a basic understanding of web3 and wallets or if you come from another chain such as Ethereum.
We will use one single project to grow our skills together as we unroll new concepts. It will be our quick experimentation playground.
About the code
I will keep the HTML and React stuff to a minimum to keep it short and on point. Rest assured that the entire working project is on GitHub here: https://github.com/mwrites/dapp-scaffold
🍀 What Will I Get From Part 1?
Okay, you are in! Now, what will you get from this part?
- [ ] Understand the role of wallets.
- [ ] Learn about the Solana environments.
- [ ] Discover how to support new wallets
- [ ] Build a starter project for your next successful idea!
🚀 What Are We Building Today?
Let's start our journey! After all this chitchat, please look at the below gif. The first step to the world of blockchains is to open the web3 door. What door? Well, to communicate with blockchains, you need a wallet. So, our goal in this part is to let users connect their wallets to our dapp.
Installation
First, you will need a wallet app. Let's install Phantom. Once you have done that, let's switch network to devnet:
Also, let's start on the same foot. I set up a starter project where I just glued all the HTML and dependencies for you:
git clone -b starter https://github.com/mwrites/dapp-scaffold.git
If you are starting from a new project, here are the dependencies I am using:
A crucial step is to make sure you are using react 17. As of the time of writing, react 18 is not supported yet.
Solana Wallet Adapter
As you can see from above, the library we need here is @solana/wallet-adapter. Wallet Adapter is simply a library that will help us easily integrate what we have shown in the gif above:
- Wallet Adapter gives you the UI I have shown you in the gif out of the box!
- On top of that, it covers all the use cases for you, connection, disconnection, and autoconnection.
Adding The Wallet Adapter Button
Okay, how to use this wallet adapter and add it to our dapp? Let's look at the setup instructions. If anything, we want to look for where the button is, then we can unroll the rest of the configuration. Basically, Wallet Adapter library provides a react component <WalletMultiButton /> that we can use to display a button with the wallet connection state.
Let's add this to our AppBar, open src/components/AppBar.tsx:
We should now see the "Select Wallet" button appear in the top right of our dapp page.
Configuring Wallet Adapter
That's a good start but not functional yet. We need to help the WalletAdapter library with some information to make the button work. Mainly, we need to let the library know:
- What network should the user connect to.
- What wallet apps do we want to support (Phantom, sollet, etc...).
Time for some react skills; we can achieve this by wrapping the WalletButton component with some configurations (I am just adapting the code from https://github.com/solana-labs/wallet-adapter#setup)
- endpoint: is the Solana network to connect to.
- wallets: is the list of wallets we want to support.
- onError: this is a callback to handle errors.
We could do all of this in our AppBar.tsx, but instead, let's do some Marie Kondo here and make this more reusable, create a new folder and a new file src/contexts/WalletContextProvider.tsx:
Great, this is the skeleton to make it work. But, first, we have to fill in endpoint and wallets.
PS: No, that's not a sharingan.
Currently, there are 3 blockchains environments in Solana:
- Mainnet: The live environment (and where real SOL are spent!)
- Testnet: is where the Solana team releases and tests new fixes and features to the blockchain. This is where you can test your dapp with the new Solana features.
- Devnet: is the stable testing environment where you can develop your dapp.
So let's start by configuring the blockchain connection with the endpoint:
The wallet library can now connect to the blockchain, yes! The second part is to get the user's public key. That's what a wallet adapter will do for us.
We just need to declare which wallets we want to support. Wallet apps behave differently depending on their implementation. hopefully, thanks to the adapter library, it is just a matter of adding an import:
Now, you know why it is called "Wallet Adapter"! 😁 There are many more wallets supported by the day. Here's the complete list.
If you are developing a new wallet app, you are welcome to contribute to the library!
Using The WalletContextProvider
Okay, we have stitched the network and the wallet configuration into the WalletContextProvider. Now, let's reap the result of our hard work. Head to src/pages/_app.tsx and sandwich wrap that <AppBar /> with our shiny wallet configuration:
You might have forgotten that the first thing we did was to put our wallet button inside the <AppBar/>. I won't deduct points from you because it's just some react stuff 😉
💡 Quiz
- [ ] What does it mean to connect the user's wallet with our dapp?
- [ ] When would you use testnet instead of devnet?
- [ ] How can you support a new type of wallet?
- [ ] Come up with an idea of what you could build in Solana!
🏆 Achievement - Wallet Connection
Congratulations!! Users can now connect their wallets to our DApp!! 💪
We had to detour a bit with some React skills, but I hope you are as excited as I am because now that we can connect to the user's wallet, we can start interacting with Solana!
If you are ready to implement it into your project, there are starters examples for every sauce here -> https://github.com/solana-labs/wallet-adapter#starter-projects.
The final code is here: https://github.com/solana-labs/dapp-scaffold/commit/f4803f84096b39a1f088fa9301a99b42b7b66252
🎙 Optional: Your Turn To Get The Mic!
Can you figure out how to implement the auto connection of the wallet?
🎬 See You In Next Episode
Going Further
Where To Ask Questions?
- https://stackoverflow.com/questions/tagged/solana
- Come vote on https://area51.stackexchange.com/proposals/126615/solana to have our dedicated Solana stack exchange!
