Web3 developers will know how frequently new dApps (decentralized applications) and web applications are popping up. One example of this is crypto wallets, where there’s a plethora of alternatives. This is understandable, as crypto wallets are an essential element for anyone getting involved in crypto. In fact, there are hundreds of alternatives, such as Coinbase, Binance, and, of course, MetaMask. These wallets allow users to fully manage their crypto assets efficiently. Furthermore, as they are growing in popularity with more mainstream adoption of crypto, we will in this article look closer at how to build a crypto wallet with the ultimate Web3 development platform — Moralis. 

From a conventional perspective, one of the most pressing issues of dApp development has always been backend development. This is the area in which Web3 development differs significantly from that of Web2. As such, Web3 backend management is difficult and requires both resources and time. However, this is where Moralis comes into the picture as the premier middleware for developing dApps. The platform provides a readily available, plug-and-play backend infrastructure – allowing developers to focus on creating smart contracts of the highest standard and focus on frontend development. 

Furthermore, the platform also supplies a selection of excellent development tools such as the Moralis’ Speedy Nodes, cross-chain compatibility, and native support for IPFS. This means that Moralis users are provided with everything they need to deploy and develop dApps. 

So, if you want to get into Web3 development, signing up with Moralis is the logical choice. This will give you immediate access to all the platform’s tools, along with the possibility to utilize the already developed backend structure! 

How to Build a Crypto Wallet in 4 Steps

In the following sections, we will take a closer look at how to build a crypto wallet from scratch. We are going to create a web application where users can sign in and authenticate themselves with MetaMask. 

Once signed in, they will have the ability to view their transactions, balances, and NFTs. Furthermore, we are going to add the ability to transfer ETH and ERC-20 tokens. As such, this crypto wallet will provide the users with the tools they need to fully manage their crypto assets directly through our application. 

However, going through all the code for this application will be a bit unnecessary and will take quite a while. For this reason, we have decided to focus most of our attention on taking a closer look at the functions enabling users to transfer coins and tokens directly through the wallet. Nevertheless, we’ll still provide an overview of the complete application, which you can complement by taking a closer look at the GitHub repository for this web application. In the directory, you will find everything from the HTML files to the JavaScript file containing the logic of all the features. 

As such, we are going to break down the process of how to build a crypto wallet into four different steps: 

1. Create a Moralis Server
2. Structure the Content with HTML
3. Add JavaScript Logic
4. Add the Transfer Functions

Following these four steps will give us a broad overview of what we need to complete this crypto wallet. So, let’s kick off this tutorial by creating our very own Moralis server. 

Furthermore, if you’d rather watch a video tutorial of the process, then take a closer look at this video from the Moralis YouTube channel: 

Step 1: How to Build a Crypto Wallet – Create a Moralis Server

As we are going to be working with Moralis throughout this article, the first thing we need to do is sign up with the platform. This only takes a couple of seconds, and as a user, we can begin setting up our very own server. 

To initiate a new instance, we must begin by clicking the ”+Create a new App” button once logged into Moralis. You will be able to find this button at the top right of the interface, and once it is pressed, it will provide us with a dropdown menu. 

The menu will contain three different alternatives; however, it doesn’t matter which one you opt for; all alternatives will take you to a new window where you’ll need to input a name, select a region, and select networks. We have chosen a testnet server for this example, but this decision should be based on the purpose of the dApp. 

Once all the information is inputted, all that remains is to hit the ”Add Instance” button at the bottom right to spin up the server. However, this might take a while, but worry not; the server will be finalized in a couple of minutes. 

Step 2: How to Build a Crypto Wallet – Structure the Content with HTML

The second thing we need to do when creating our own crypto wallet is set up the correct structure for our web content. This we can accomplish through HTML code, and in this example, we have two different files; one for the sign-in page and one for the dashboard itself. So, the login page, once completed, will look something like this: 

The code for this specific page can be found in the GitHub repository in the ”index.html” file. The code in this file is based on a simple Bootstrap sign-in template that we used to build around. It isn’t more complicated than that, and you can use the same template and make some modifications to fit your own needs. 

Next up, we also have the dashboard page of our crypto wallet, which looks like this: 

The code for the dashboard can also be found at the Moralis GitHub, and just like the ”index.html” file, it is also based on a Bootstrap template. However, a critical element of this file worth noticing is that we connect our SDK to Moralis, which looks like this: 

Moreover, the majority of this code is the fields and buttons of our crypto wallet, which are the elements that we, later on, will reference when writing the JavaScript code. Furthermore, at the bottom of the file, we also find some vital code implementing some JavaScript files making the template work as it should. 

Step 3: How to Build a Crypto Wallet – JavaScript Logic

Next up, we have a JavaScript file that contains the logic for our application. In this file, we have a bunch of different functions enabling our wallet to work as intended. We won’t be going through each line of the code as there is a lot to take in. As we mentioned, we are going to focus on the functions needed to enable transfers between accounts. However, for a full overview and the complete file, you can again visit the GitHub repository. 

The first thing that we’re going to do is to initialize Moralis. This basically connects our project to our Moralis server that we created in the first step. To link the two together, we need to implement the following lines: 

As you can see, we need the App ID and the Server URL. We can fetch these elements from our server by clicking the ”View Details” button in the Moralis admin panel under the ”Servers” tab. All we need to do is implement these two elements by copying and pasting them into our code.  

Along with this, we have some essential functions for logging in, logging out, rendering content, hiding content, etc. These are all pretty straightforward functions that are easy to implement. For example, this is what the login function looks like: 

In this case, all that is really necessary is the “Moralis.Web3.authenticate()” line as we are using Moralis. Without the platform, this task would have been a lot more complicated, and this is only one instance in which Moralis comes in handy. 

Step 4: How to Build a Crypto Wallet – Transfer Functions

In this crypto wallet, we have a few different functions for transferring tokens. For example, we have one function for sending ETH, one for ERC-20 tokens, and one for NFTs. As we are working with Moralis, it is possible to add these features easily as the platform provides some functions ready to use “out of the box”. 

Transferring ETH

So, firstly we have a function for sending ETH which will look something like this: 

We basically only need the ”Moralis.transfer(options)” function, which is a single line of code used to transfer the ETH from one account to another. However, as you can see from the code, this function takes an argument in the form of an object. As such, prior to calling this function, we specify the properties of the ”options” object. So, for example, we first determine the type of token, which in this case is ”native”, then the amount the user inputs, and finally the address to where the ETH should be sent. 

Transferring ERC-20 Tokens

The function for transferring ERC-20 tokens is somewhat more complicated; however, just as with transferring ETH, only a single line of code is necessary to implement the feature. So, this is what the function looks like: 

The first thing that the function does is create variables with the information fetched from the user’s input. This information is then used to create an object by taking the variables as properties. Firstly, the type is automatically set to “erc20”, then the amount and decimals are implemented using the user inputs. After this, the code simply adds the receiver and the contract address.  

Once we have all this information, we can simply pass the object ”options” as an argument when we call the transfer function. 

”getTransferERC20Balances()” Function

As you noticed, it is necessary to include the contract address and the decimals when sending ERC-20 tokens. Finding this information isn’t hard, but it is still an annoying task that is avoidable. To improve the user experience of our applications, we are also going to create a function that allows us to fetch this information directly from the blockchain. 

The print screen above shows you how the UI for transferring tokens. As you can see, the interface prompts users for the amount, which address they would like to transfer the tokens too, the decimals, and the contract address. 

The first thing that the ”getTransferERC20Balances()” function does is check the user balance to find out what tokens are available in their MetaMask accounts. With the balances at hand, the functions go through each token, creates a content block with the correct information from the blockchain, and then sends it directly to the frontend of the application. This is the information that is available to the users below the input fields.

If the user clicks any of these buttons, the function automatically fetches both the decimals and the address of that specific token and automatically fills in these fields for the users. 

Furthermore, if you take a closer look at the code in the GitHub repository, you’ll find that the code is incomplete. The reason for this is that we only added functionality to get this information for the Rinkeby blockchain. However, you can easily use the same structure to expand the function, making it compatible with other chains. 

So, this is it for this tutorial and the transfer functions. However, as we mentioned previously, this doesn’t cover all the code necessary to make the wallet work, but you can find the complete code on the Moralis GitHub page. 

How to Build a Crypto Wallet in 4 Steps

The process of how to build a crypto wallet is relatively easy with the Moralis platform. We can utilize the already developed backend infrastructure to set up a server and use the Moralis SDK to make the process more accessible. In fact, we can build a crypto wallet in just four simple steps: 

1. Create a Moralis Server
2. Structure the Content with HTML
3. Add JavaScript Logic
4. Create Transfer Functions

Furthermore, the possibilities with Moralis are endless, and you can, for example, easily build ETH dApps or create a Polygon token in just a couple of minutes. All this accessibility comes primarily due to the infrastructure of Moralis along with the many tools of the platform. For example, as a user, you’ll have access to the Price API, the Moralis SDK, NFT API, etc. Additionally, be sure to check out the powerful Moralis plugins that can help you supercharge your dApp development. For example, you can create a fiat onramp for your dApps with just a few lines of code using Moralis plugins!

Moreover, the website also has a blog that publishes new content daily. Reading this content might enable you to become a better blockchain developer and inspire you for your next project. For example, you can read more about how to add a Fiat Onramp gateway to dApps or Ethereum development for beginners. 

If you wish to become a Web3 developer, the first step is to sign up with Moralis. This only takes a few moments, and it will provide you with immediate access to all the platform’s tools. Signing up is completely free, so do not hesitate; you have nothing to lose!