User authentication is vital for Web3 development and building decentralized apps (dApps) to determine that users are the rightful owners of crypto wallets. Moreover, once a user authenticates, our dApps can fetch information regarding token and NFT balances, transaction history, and much more. However, authenticating users can be quite cumbersome without an underlying backend infrastructure and proper tools. A tool that aids in this process is the Moralis SDK. This SDK allows you to authenticate users easily with WalletConnect or MetaMask. Moreover, with the Moralis integration of React Native, the operating system now alleviates the need for a WalletConnect Android SDK since Moralis now supports both WalletConnect and Android development, making it easier to develop mobile-compatible dApps. As such, in this article, we’ll look closer at how Moralis removes the need for a WalletConnect Android SDK.
Moralis is the premier operating system for Web3 development, and as a user, you’ll get access to the underlying backend infrastructure that the system provides. This allows you to significantly lower the development time of all your future blockchain projects.
Furthermore, Moralis offers extensive development tools making dApp development more accessible and straightforward. Among these tools, you’ll find Moralis Speedy Nodes, the NFT API, Price API, native support for IPFS, and much more. Also, Moralis supports cross-chain compatibility, allowing you to develop dApps for multiple different networks.
Blockchain development doesn’t have to be difficult when working with Moralis. With access to all the tools and the underlying backend infrastructure of the operating system, you’ll be able to develop dApps in minutes and hours rather than days. So, if you haven’t already, sign up with Moralis, and you’ll become a blockchain developer in no time!
What is WalletConnect?
An essential aspect of dApp development revolves around the authentication of users. First of all, it is imperative that we have a way to determine that a user is the rightful owner of a specific crypto wallet. Furthermore, once a user authenticates, it also becomes possible to fetch information like balances and transaction history. We can, in turn, display this information to the end-users to provide a more compelling customer experience.
A multitude of different alternatives exists that we can use to authenticate users. However, the two most significant ones are WalletConnect and MetaMask. In this section, we will dive deeper into and focus on WalletConnect rather than MetaMask. But, if you have an interest in learning more about the latter, you can go ahead and visit the Moralis blog for a full breakdown of MetaMask.
A common misconception about WalletConnect is that people often mistake it for an application. However, this is not the case as WalletConnect is a Web3 protocol that connects mobile crypto wallets to various dApps.
The protocol supports several different crypto wallets, and among the alternatives, you’ll find the most popular one – MetaMask. Further, the protocol establishes a connection between a dApp and a wallet. The connection can occur through one of two ways; either deep linking or a QR code. As such, this makes it possible for users to interact with dApps directly through their mobile devices. Moreover, as a phone is involved in the process, it suggests a higher degree of safety than, for example, MetaMask.
As such, WalletConnect opens an additional door to Web3, a realm that was only accessible through MetaMask. Moreover, the WalletConnect protocol supports an additional large set of crypto wallets such as TrustWallet, Rainbow, Argent, and many more, adding an additional layer of diversity.
What is React Native?
To understand why Moralis alleviates the need for a WalletConnect Android SDK, we need to understand React Native. As such, we’ll take this section of the article to delve deeper into React Native. So, what is React Native?
React Native is a JavaScript-based framework that allows developers to create natively-rendered Android and iOS applications. What makes React Native attractive is the ability to utilize the framework to create applications for several different platforms, all while using the same codebase.
React Native was initially released in 2015 and quickly became the primary solution for developing mobile-based applications. Much of the success originates from the fact that the framework is based on React, a popular JavaScript library. Moreover, React Native also allows businesses to develop applications compatible with Android and iOS. This enables them to save vast amounts of resources and time.
This is known as ”cross-platform”, enabling developers to build a codebase that can run on multiple different platforms. Meanwhile, the other alternative is to build software natively, making it compatible with a single platform. Moreover, cross-platform integration allows developers to create applications using tools they are already proficient in, such as JavaScript. As such, it isn’t the only business that benefits from React Native, but developers alike due to a more accessible development process.
Moreover, it is possible to integrate React Native in existing projects or create a new one from scratch. As such, you’ll be able to choose how much you’d like to use React Native depending on your preferences and specific needs for your various projects.
So, working with React Native provides loads of benefits, which is why Moralis has decided to integrate the framework. However, how does this translate to the decentralized web?
WalletConnect Android SDK Alternative – Moralis’ Support for React Native
When developing dApps, it becomes highly beneficial to be inclusive. Many individuals prefer to use their mobile devices when interacting with applications, meaning that we can’t neglect mobile users. As this is the case, it is essential to cater to all different devices to provide a compelling cross-platform experience. Without this, it can become problematic “businesswise” as you will lose potential dApp users. Moreover, developing dApps compatible with several different platforms has, at least from a traditional perspective, been quite cumbersome. However, this is no longer the case with the React-Moralis integration.
Moralis’ support for React Native enables developers to utilize the power and the tools of Moralis when developing mobile-compatible Web3 dApps. This means that it is now possible for developers to quickly and easily create dApps that meet the needs of web and mobile users, all while working with Moralis. As such, developers can overcome some of the hardships of creating mobile-based applications.
This suggests that Moralis’ integration for React Native alleviates the need for a WalletConnect Android SDK. Furthermore, as the operating system supports WalletConnect and React Native, developing powerful mobile dApps where WalletConnect is the central authentication mechanism is already possible. Moreover, as Moralis has native support for WalletConnect, it becomes a relatively straightforward task to add the protocol as an authentication mechanism. In fact, it is possible to do so with a few simple lines of code.
To illustrate this point, we’ll take a closer look at how to accomplish this in the following section. As such, we’ll go through the process of authenticating mobile users with Moralis as a WalletConnect Android SDK alternative through an example.
WalletConnect Android SDK Example – How to Get Going
In this section of the article, we’ll be taking a closer look at how Moralis can act as a WalletConnect Android SDK alternative by creating an example dApp. We’ll briefly cover the basics of developing an Ethereum-based, mobile-compatible dApp using an already prepared template. This will highlight the benefits of working with Moralis as we’ll be able to create a dApp in minutes.
In this example, we are working with Visual Studio Code, and the first thing you’ll need to do is ensure that the ”react”, ”react-dom”, and ”moralis” dependencies are installed. Following this, you’ll also need to install the ”react-moralis” dependency, which can be accomplished through one of the following alternatives:
Npm Manager: npm install react react-dom moralis react-moralis
Yarn Manager: yarn add react react-dom moralis react-moralis
With all dependencies installed, the next step is to wrap your application in a ”<MoralisProvider>”, which looks like this:
import React from "react";
import ReactDOM from "react-dom";
import { MoralisProvider } from "react-moralis";
ReactDOM.render(
<MoralisProvider appId="xxxxxxxx" serverUrl="xxxxxxxx">
<App />
</MoralisProvider>,
document.getElementById("root"),
);
Finally, all that remains is to call the hooks inside the application:
import React from "react";
import { useMoralis } from "react-moralis";
function App() {
const { authenticate, isAuthenticated, user } = useMoralis();
if (!isAuthenticated) {
return (
<div>
<button onClick={() => authenticate()}>Authenticate</button>
</div>
);
}
return (
<div>
<h1>Welcome {user.get("username")}</h1>
</div>
);
}This covers the basic setup of a mobile-compatible Ethereum dApp, which is the first step in our WalletConnect Android SDK alternative example. In the following section, we’ll take a closer look at a Moralis React Native template that you can utilize to create the dApp and, more specifically, the function that takes care of the WalletConnect authentication process.
However, this doesn’t cover all the necessary steps of getting the application working. For example, you’ll also need to initialize both WalletConnect and Moralis. However, if you read on, we’ll provide a link to a more extensive guide on developing mobile-friendly Ethereum dApps.
WalletConnect Android SDK Example – Moralis React Native Template
Now, with the hooks called inside the application, the next part of this WalletConnect Android SDK example is to continue by utilizing and exploring the Moralis React Native template. You’ll be able to find this template and more information on the Moralis GitHub page. Moreover, you are free to use this template when building your own Ethereum mobile application in the future.
If you take a closer look at the template, you’ll find that it is quite extensive and contains a lot of code. For this reason, we are unable to cover the complete code and will rather focus on the function for authenticating users, which can be found in the “App.tsx” file. In the following function, we specify that WalletConnect should be the primary authentication alternative, and it looks like this:
function App(): JSX.Element {
const connector = useWalletConnect();
const { authenticate, authError, isAuthenticating, isAuthenticated, logout, Moralis } = useMoralis();
return (
<View style={[StyleSheet.absoluteFill, styles.center, styles.white]}>
<View style={styles.marginLarge}>
{authError && (
<>
<Text>Authentication error:</Text>
<Text style={styles.margin}>{authError.message}</Text>
</>
)}
{isAuthenticating && <Text style={styles.margin}>Authenticating...</Text>}
{!isAuthenticated && (
// @ts-ignore
<TouchableOpacity onPress={() => authenticate({ connector })}>
<Text>Authenticate</Text>
</TouchableOpacity>
)}
{isAuthenticated && (
<TouchableOpacity onPress={() => logout()}>
<Text>Logout</Text>
</TouchableOpacity>
)}
</View>
{isAuthenticated && (
<View>
<UserExample />
<Web3ApiExample />
</View>
)}
</View>
);
}Authenticate Function
Initially, on the second line of the function, we specify the connector “const” to be equal to WalletConnect. With the connector set to WalletConnect, we continue passing this “const” as an argument when we call the ”authenticate()” function later in the code. This ensures that we use WalletConnect rather than the default alternative, MetaMask. This covers the basics of the authentication process; however, as you can see, there is more to this function. For example, it does other helpful things such as showing users’ email addresses and fetching information like balances.
However, this is only a fraction of the template. Additionally, it solely covers how to authenticate users with WalletConnect in a mobile-friendly Ethereum dApp. Suppose you’d like further information on other parts of the application. This could be how to specify providers or initialize both Moralis and WalletConnect (vital steps in making the application work). In that case, check out the following guide from the Moralis blog on creating a mobile Ethereum dApp.
Moreover, you should definitely check out the Moralis Metaverse SDK if you are interested in areas such as Web3 game development. This allows you to quickly develop metaverse games through Unity for several platforms such as Xbox, PlayStation, Android, and iOS with Moralis.
WalletConnect Android SDK Alternative – Summary
A common issue with Web3 development has, at least from a traditional perspective, been cross-platform compatibility. Decentralized applications, or dApps, are usually developed for web usage, meaning that mobile users get neglected. Moreover, an additional essential aspect of Web3 development is user authentication, and it has been particularly cumbersome when developing mobile-compatible dApps. In turn, there’s been a need for a WalletConnect Android SDK to make WalletConnect authentication easier for mobile development.
However, fortunately, this need has now been alleviated as Moralis provides a solution to this issue. Moralis has native support for WalletConnect and React Native. This means that the operating system fulfills the same need as a WalletConnect Android SDK. As such, it’s possible to utilize all of Moralis’ tools in mobile Web3 development, including the WalletConnect integration.
We illustrated in this article how to use Moralis as a substitute for a WalletConnect Android SDK by taking a closer look at how to get going with a mobile-compatible Ethereum dApp. Along with the initiation process, we took a closer look at the Moralis React Native template, focusing on how to connect users with WalletConnect.
However, this is far from the limits of Moralis, as the operating system makes all Web3 development more accessible. If you’d like, you should definitely check out more content from the Moralis blog. There, you’ll find additional articles on, for example, ERC20 contracts, smart contract indexing, how to connect to Avalanche nodes, and much more.
So, if you want to become a blockchain developer, the first step is to sign up with Moralis. Once a member, you’ll be able to build your first blockchain dApp in a matter of minutes. Moreover, you’ll also be able to cater to both desktop and mobile users without any trouble!
