In this article, we’ll explore the intricacies of Solana JavaScript development and how you can use Moralis’ Solana API in vanilla JavaScript. To illustrate how the API works, we’ll create a simple dapp (decentralized application) where users can input a wallet address and query the portfolio. However, if you want to jump straight into the code, just visit the following GitHub repository:
Complete Solana Dapp Documentation — https://github.com/YosephKS/demo-moralis-solana-api
Although the most popular blockchain network, the scalability challenges seen with Ethereum and its high Ethereum gas fees have left room for other networks to grow. One of those networks is Solana, which solves some of the scalability issues of Ethereum. Like Ethereum, Solana supplies a platform where developers can build sophisticated dapps. However, even though Solana has seen exponential growth, getting into Solana JavaScript development can still be challenging. For this reason, the demand for Solana APIs have increased – as they make Web3 development more accessible. As such, we’ll dedicate this brief guide to diving deeper into Solana JavaScript development and how to use the Moralis Solana API to make your programming endeavors more easy-going!
Moralis is the optimal operating system for Web3 development, supplying everything you’ll need when creating sophisticated dapps. Along with a fully managed backend infrastructure, Moralis additionally provides some of the best Web3 development tools. In this toolbox, you can, for example, find Moralis’ NFT API, metaverse SDK, and, of course, Moralis’ Solana API. Moreover, Moralis’ features are cross-chain compatible, allowing you to create dapps, DeFi platforms, and other projects for multiple chains!
So, if you’re looking to get into, for example, Solana or Ethereum development, sign up with Moralis. Creating an account is entirely free and only takes a couple of seconds!
What is a Solana API?
Before we get into Solana JavaScript development, we’re going to take a closer look at what a Solana API is. To fully grasp this concept, we’ll initiate this section by diving deeper into APIs and their implications. So, what is an API?
API is an abbreviation for ”application programming interface”, and whenever you browse the web or use an application on your phone, you’re generally in contact with APIs. When using any of your devices, your software connects to the internet to send data to a server. The server receives the information, performs a particular action, and sends back a response. Your device then interprets the response and presents it to you in a readable way. This entire process is generally expedited by an API. As such, APIs essentially allow two pieces of software to communicate with one another.
To make more sense of APIs, we can utilize a restaurant analogy to make this concept more understandable. In this metaphor, the kitchen would be the underlying ”system” handling your order. However, during a restaurant visit, you don’t generally communicate directly with the kitchen but instead, use an intermediary in the form of a waiter/waitress. In this example, the waiter/waitress is the API handling the communication between you and the chefs in the kitchen. This means that the waiter/waitress delivers your order (request) and then supplies you with the food (response).
So, to summarize, an API transfers/translates instructions for mutual understanding to allow compatible coding in safe development environments by supplying functions consistently on query. Now, with a better understanding of the concept, what does it mean in the context of Solana? Well, it’s quite simple; a Solana API essentially provides the functionality mentioned above for the Solana network.
Why Use a Solana API for Solana JavaScript Development?
With a better understanding of what a Solana API is, let’s discover more about why you might need an API. The importance of the ability for two pieces of software to be able to communicate can’t be understated. Since APIs facilitate the communication between software, they can significantly aid all development processes.
Every time a developer creates a new program or dapp, APIs allow developers to avoid creating everything from scratch. Instead, it becomes possible to ”contract out” responsibilities by, for example, utilizing already developed pieces of code that can do the job better.
Moreover, this is precisely where Moralis enters the picture, as the platform provides one of the best APIs for Solana JavaScript development. As such, it’s possible to use Moralis’ Solana API to acquire all sorts of backend and on-chain data using only a few lines of code. For example, you can easily query everything from token balances to authenticating users.
So, if you’re looking to become a blockchain developer and want to work with Solana, you should check out Moralis’ Solana API. With the API, you’ll be able to significantly cut down on development time and create Solana dapps more efficiently.
However, before we take a closer look at how the Moralis Solana API works, we’re going to take a closer look at JavaScript development. This will supply a good foundation before we take on a practical example of how accessible Solana JavaScript development becomes with the utilization of Moralis’ Solana API!
What is JavaScript Development?
JavaScript first appeared in the nineties and is now one of the most significant programming languages. Developers predominantly — but not exclusively — use JavaScript for web development and, more specifically, to make websites more interactive. The programming language has the feature to change and update HTML and CSS code, which are the foundation of Web2 web pages. Moreover, as JavaScript operates on top of HTML and CSS, developers often refer to it as the third layer of Web2. As such, whenever you find yourself interacting with a dynamic website, the likelihood that JavaScript is involved is high.
What’s more, JavaScript is a so-called text-based language — as such, learning JavaScript is quite intuitive. So, by utilizing this language, you can create dynamically updating content and provide a more sophisticated UX (user experience) for all your customers. This means you’re in complete control of images, multimedia elements, and much more when working with JavaScript.
As we previously mentioned, JavaScript is mainly used for developing web pages; however, this is not the full story. JavaScript is additionally used for other development areas such as software, servers, embedded hardware controls, etc. Consequently, developers have the potential to utilize JavaScript to set up simple web servers, develop web and mobile applications, and even create games.
This suggests that JavaScript is a door opener to many different areas. This is also one of the many reasons that JavaScript has huge adoption and has become one of the most popular languages.
If you’d like to learn more about JavaScript, please consider Moralis Academy. The academy offers a selection of courses to become a more proficient Web3 developer. Among the blockchain courses, you’ll find the ”Learn JavaScript Programming” course enabling you to take your JavaScript skills to the next level!
Solana JavaScript Development — Using Moralis’ Solana API
In the following sections, we’ll dive deeper into Solana JavaScript development and Moralis’ Solana API. To illustrate how easy it’s to work with Moralis’ Solana API in Vanilla JavaScript, we’re going to create a simple dapp where users can query a wallet portfolio by inputting a wallet address and clicking a button. So, to show you what we’re working towards, here is a print screen of the final product:
With this dapp, users can input a Solana wallet address, choose the desired network, and simply click the ”Get Portfolio” button to query the portfolio of that particular address. This will provide three pieces of information: native SOL tokens, other tokens, and NFT balances. What’s more, to acquire these three elements, we’ll only need a single line of code; however, more on that later.
To make the process more understandable, we’ll break down the process into the following three steps:
- Creating a Moralis Dapp
- Setting Up the HTML File
- Adding the JavaScript Logic
So, let’s kick things off by taking a closer look at how you can create your own Moralis dapp!
Step 1: Solana JavaScript Development — Creating a Moralis Dapp
If you haven’t already, you’ll need to create a Moralis account first. This is entirely free and just takes a couple of seconds. With an account at your disposal, you can initiate the process by navigating to the Moralis admin panel and hitting the ”Create New Dapp” button.
Once you click this button, the first thing you need to select is the environment. As this is only a tutorial, we’ll pick the ”Testnet” alternative. However, you’ll quickly notice that none of the testnet options are related to Solana. However, fret not; you can simply pick either of the alternatives as this won’t affect our dapp when working with the Solana API. So, in our case, we opted for Polygon’s Mumbai testnet. From there, all that remains is to select a region, name your project, and hit ”Create Your Dapp”.
With the server at hand, you have a few options to explore if you click the ”Settings” button. For example, you can find details regarding your dapp under the ”Dapp Credentials” heading. There you’ll find your dapp URL and application ID that we’ll need in the following steps!
Step 2: Solana JavaScript Development — Setting Up the HTML File
With the dapp all set up, we can begin the actual development process. However, before diving deeper into the code, please clone down the project from the GitHub repository we initially linked in the article.
Once you have both ”index.html” and ”index.js” available in your local repository, we’re going to start by taking a closer look at the HTML file. ”index.html” is relatively straightforward, and this is the entirety of the code:
<html>
<head>
<title>Solana API Demo</title>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
</head>
<body>
<h2>Solana API Demo</h2>
<input type="text" id="address" name="address" placeholder="address">
<select id="network" name="network" aria-placeholder="network">
<option value="mainnet">Mainnet</option>
<option value="devnet">Devnet</option>
</select>
<button id="get-portfolio">Get Portfolio</button>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
As you can see, there is a title, a heading, and some input fields and buttons. This is relatively simple, and we won’t be diving deeper into these elements. The reason for this is that the structure of the dapp’s content isn’t really essential. As such, it’s up to you to change this depending on your needs as a developer and how you want the final product to look.
However, a vital part of the HTML code is the fourth line:
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
This is where we import the Moralis SDK, which allows you to utilize the advanced development kit of Moralis. As such, this allows you to use the snippets of code that we’ll be taking a closer look at in the following step!
Step 3: Solana JavaScript Development — Adding the JavaScript Logic
In the final step of this Solana JavaScript development guide, we’ll add our application’s logic. However, before this, we need to initialize Moralis to connect our code to the dapp we created initially. If you take a closer look at the ”index.js” file, you can simply initialize Moralis by inserting your dapp URL and application ID in the following part of the code:
const serverUrl = "";
const appId = "";
Moralis.start({ serverUrl, appId });
With Moralis initialized, we’re going to focus on the ”getSolanaPortfolio()” function. This is what the function looks like:
const getSolanaPortfolio = async () => {
const options = {
network: document.getElementById("network").value,
address: document.getElementById("address").value,
};
const portfolio = await Moralis.SolanaAPI.account.getPortfolio(options);
console.log(portfolio);
};
It’s relatively straightforward, and all you need to do is create an “options” const using the user’s inputs and then pass it as an argument when running Moralis’ ”getPortfolio()” function. Now that’s essentially it! This illustrates the power of working with Moralis, as all you need to fetch a portfolio is a single snippet of Moralis code!
Other than that, you need to simply add an on-click event that triggers the ”getSolanaPortfolio()” function when the users click the ”Get Portfolio” button.
Now that’s it for this Solana JavaScript development guide where we utilized Moralis’ Solana API in Vanilla JavaScript. If you’d like a more detailed breakdown of the code or simply prefer watching videos to learn, check out the following YouTube clip:
Solana JavaScript Development — Summary
In this article, we took our time to explore the intricacies of Solana JavaScript development. In this process, we utilized Moralis’ Solana API with vanilla JavaScript to make the process more accessible. Through the use of Moralis SDK and the Solana API, we were able to create a simple Solana JavaScript demo dapp in only three steps:
- Creating a Moralis Dapp
- Setting Up the HTML File
- Adding the JavaScript Logic
With a single line of code, we were able to fetch the portfolio of a Web3 wallet address. This provides access to the native, token, and NFT balances. As such, this demonstrates the strengths of working with Moralis as it makes Web3 development significantly more accessible.
However, this only scratches the surface of the potential of working with Moralis. If you have further interest in APIs, feel free to take a closer look at Moralis’ Ethereum dapp API or Polygon dapp API. These tools allow you to create sophisticated dapps like, for example, a Web3 Spotify or Web3 Twitter clone! Moreover, if you’re more interested in NFTs and tokens, you can also learn everything you need regarding token development. For example, learn to create your own ERC-20 token or start generating NFTs in just 15 minutes!
So, if you have an interest in Solana JavaScript development, you should definitely sign up with Moralis!
