In this tutorial, we will build a Solana dapp where users can query a portfolio based on a Web3 wallet address they themselves supply. To make the process more understandable, we’ll break down the process into three simple steps. However, if you would rather skip the guide and dive straight into the code, you’ll find the full documentation in the following GitHub repo:
Full Solana Dapp Documentation — https://github.com/YosephKS/demo-moralis-solana-api
Solana is one of the major blockchain networks and hosts a prominent ecosystem of dapps (decentralized applications), DeFi platforms, and other interesting Web3 projects. In times where Ethereum gas fees soar, making it economically unviable to develop on this network, it’s becoming increasingly interesting to look at other alternatives. Solana emphasizes scalability and speed, making it a valid Ethereum alternative. As such, we’re going to explore how to build a Solana dapp in the following sections using the Moralis operating system. So, if you follow along, you’ll learn to create your very own Solana dapp in just three simple steps!
With Moralis Solana API, you can easily create dapps for the Solana network. This, in combination with the underlying backend infrastructure of the platform and other interesting development tools, provides a more accessible development process. However, this simply scratches the surface of Moralis, and there is a lot more to discover. For example, if you want to get into dapp development for other networks, check out the Ethereum dapp API or the Polygon dapp API. These tools allow us to create sophisticated dapps like Web3 Spotify and Web3 Amazon clones easily.
So, if you have the ambitions to become a blockchain developer, you’re at the right place. Moralis offers everything you need to get into Web3 development, and you can sign up with Moralis entirely for free!
What is a Solana Dapp?
Before we explore how to build a Solana dapp, it might be a good idea to dive deeper into Solana dapps and what they entail. As such, we’ll take this section to answer the question, ”what is a Solana dapp?”
To understand what a Solana dapp is, we first need to explore the Solana network. First introduced in 2017, Solana is a layer-1 blockchain with a focus on solving the issues of the ”blockchain trilemma”. Specifically, when building a blockchain network, developers are generally forced to sacrifice one of the following three characteristics in favor of the others:
- Scalability
- Decentralization
- Security
Solana focuses on speed and scalability, and the network can facilitate this due to its unique hybrid consensus mechanism. Meanwhile, Ethereum utilizes a PoW (proof-of-work) mechanism, Solana implements both PoS (proof-of-stake) and PoH (proof-of-history).
You might be more familiar with the concept of PoS, where validators are more likely to become eligible to validate blocks depending on how much cryptocurrency they stake in the protocol. PoH, on the other hand, might be more foreign; however, this essentially allows the Solana network to create historical records showing that events happened at particular moments in time. Unfortunately, even though this system allows for greater scalability, it comes at the expense of decentralization.
With a somewhat brief look at the Solana network, answering the question ”what is a Solana dapp?” becomes relatively easy. In essence, a Solana dapp is a dapp built on top of the Solana network. It’s as simple as that! If you’d like to learn more about dapps, please check out the following article answering the question ”what are dapps?”
Building a Dapp in 3 Steps with Moralis
With a better understanding of what Solana dapps are, we can proceed to the main toping and explore how to build a Solana dapp. As we’ll be utilizing Moralis, we can create the dapp in only three simple steps:
- Creating a Moralis Dapp
- Structuring the Dapp’s Content with HTML
- Adding the JavaScript Logic
Through these steps, we’ll create a dapp allowing users to input a wallet address and query its portfolio. In doing so, users receive access to information regarding the wallet’s native Solana tokens, other tokens, and NFT balances. However, to give you an idea of what the final product will look like, here is a print screen of the UI (user interface):
What’s more, if you’d rather watch a video explaining the entire process, feel free to check out the video below. In the video, you will receive a more detailed breakdown of the entire code as we’ll focus on the essentials here in this article.
But, with no further ado, let’s initiate this ”how to build a Solana dapp” tutorial by diving deeper into the first step where we’ll create a Moralis dapp!
Step 1: Build a Solana Dapp — Creating a Moralis Dapp
If you haven’t already, you’ll need a Moralis account before we proceed. You can create an account for free here at Moralis, which only takes a few seconds. Now that you’re a member of Moralis, you can initiate the process of creating a Moralis dapp by pressing the ”Create New Dapp” button on the Moralis admin panel.
If you click this button, you’ll be prompted to choose the development environment. As this is a tutorial, we’ll opt for the ”Testnet” alternative. So, if you follow along, we recommend you do the same. With the environment selected, the next step is to pick network(s). However, you’ll quickly notice that Solana isn’t an option, but that doesn’t matter. Thanks to Moralis’ Solana API, you can choose any available networks, which won’t affect the dapp. As such, we’ll select Polygon’s Mumbai testnet for our demo dapp.
With the network(s) selected, you’ll need to pick a region. This choice should be dependent on your geographical location and where you should choose the alternative closest to you. From there, you only need to name the dapp and hit the ”Create Your Dapp” button. This will spin up the dapp, and it will be operational momentarily.
Now that you have access to your Moralis dapp, you can explore a couple of options. As such, if you click ”Settings” for the dapp in question, you’ll be directed to the dapp’s dashboard. This will showcase a navigation bar to the left of your interface with a bunch of options for you to explore.
However, we’ll direct our attention to the landing page where you’ll find ”Dapp Credentials” Under this heading, you’ll find both the dapp URL and application ID. Keep this in mind, as we’ll need both elements in the third step.
Step 2: Build a Solana Dapp — Structuring the Dapp’s Content with HTML
With the first step finalized and a Moralis dapp at your disposal, we can take a closer look at the code itself. The first thing we recommend that you do is clone down the project to your local directory. In this case, we’ll go for the vanilla JavaScript alternative. So, if you want to follow along, we recommend you do the same.
With the project in your preferred IDE (integrated development environment), you’ll notice two separate files, and in this section, we’ll take a closer look at ”index.html”. This is an HTML file containing the code for all the fields and buttons for the dapp. As such, if we go back to the print screen of the dapp we presented earlier in the article, the elements in the HTML file should correspond to the heading, input field, dropdown menu, and the ”Get Portfolio” button.
These elements are quite straightforward, and as this determines the structure of the dapp’s content, you’re free to tailor this however you’d like. As such, you can add, remove, or edit existing elements according to your preferences. However, if you make changes to this file, make sure to change the JavaScript logic accordingly. Moreover, you can customize these elements even further using CSS.
If you’d like to learn more about Web3 frontend development, check out Moralis’ web3uitkit. Using this tool, you’ll be able to create a great dapp UI for all future Web3 projects!
However, before we progress, we must also dedicate a short paragraph to one of the initial lines of the HTML file. The fifth line of the code is essential as this is where we import the Moralis SDK, allowing us to use already prepared code snippets. Nonetheless, this is what it looks like in the code:
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
Step 3: Build a Solana Dapp — Adding the JavaScript Logic
In this final part of building a Solana dapp, we’ll inspect the ”index.js” file. This file contains all the dapp’s logic and is where we add the functionality to query a portfolio based on a Web3 wallet address. However, before exploring the code for the functionality of the dapp, we need to initialize Moralis.
Initializing Moralis is relatively easy, and now is the time when we need the dapp URL and application ID we found earlier. As such, you can navigate back to the Moralis admin panel and copy these elements. Once you have them at hand, you need to input them in the following part of the code:
const serverUrl = "";
const appId = "";
Moralis.start({ serverUrl, appId });With Moralis initialized, we can dive into the core function of the code, which is called ”getSolanaPortfolio()”. The function might look a bit short; however, this is thanks to Moralis, allowing us to query a wallet portfolio with essentially only one single line of code! Nonetheless, here is the entire function so we can dissect it further:
The first thing the function does is create an object called ”options” using the input and choices of the user. As such, the function fetches both the network and address from the dapp’s UI. The function then passes the object as an argument when calling Moralis’ ”Moralis.SolanaAPI.account.getPortfolio()” function. Finally, the response is returned, providing access to the wallet’s portfolio.
The magic here lies in the Moralis function and the Solana API, allowing us to easily fetch all sorts of on-chain data! Without the API and Moralis’ SDK, this process would be significantly harder and would take up unnecessary time. As such, opting to work with Moralis is a no-brainer as you save an average of 87% on development time for all projects!
Creating Solana Dapps — Summary
The Solana blockchain network was first introduced in 2017 and is now host to a vast ecosystem of dapps and other interesting Web3 projects. Solana is a great alternative to Ethereum, which has struggled with high Ethereum gas fees. Solana rather focuses on scalability and keeps transaction costs at a minimum. As such, this is a more economically viable option for Ethereum development.
Due to the benefits of the Solana network, we took this article to dive deeper into Solana programming. In doing so, we explored how to build a Solana dapp with Moralis. Due to the utilization of the Moralis operating system, we were able to build a Solana dapp in only three steps:
- Creating a Moralis Dapp
- Structuring the Dapp’s Content with HTML
- Adding the JavaScript Logic
However, this only covers the basics of what’s possible with Moralis. For more information, please consider reading the Moralis blog. There you’ll find the freshest Web3 development content to help you in your programming endeavors. For example, check out the following articles on Web3 webhooks and Web3 syncing, which are great if you’re looking to up your Web3 game!
What’s more, if you are looking to become more proficient in the best languages for blockchain development, consider enrolling in Moralis Academy. Moralis Academy offers some of the best blockchain courses on the market. Check out ”Solana Programming 101” if you are especially interested in Solana development! Otherwise, if you’re entirely new to the space, take the ”Crypto for Beginners” course to learn the fundamentals of Web3 and the crypto space.
So, if you want to build Solana dapps, make sure to sign up with Moralis! You can create an account entirely for free and begin contributing to Solana — or any other network for the matter — in no time!
