With the recently launched Cronos chain, many developers want to build and connect their dapps to Cronos. If this is a task you’d like to accomplish, you’ve come to the right place. In this article, you will learn how to connect dapps to Cronos in a quick and easy way. In fact, by following our lead, you’ll be able to accomplish this process in less than seven minutes, thanks to the ultimate Web3 tech stack! Furthermore, some of the tools from the stack are Moralis’ enterprise-grade Web3 APIs, enabling you to dive deep into dapp development using legacy development skills and tools.
Moralis is cross-platform interoperable, allowing you to combine its power with all leading Web2 development platforms. Furthermore, with Moralis’ Web3 API, you get to cover blockchain backend functionalities with short snippets of code. In turn, it will save you time and resources, so you can focus on creating the best possible frontend. Moreover, with Moralis’ cross-chain interoperability, you can connect dapps to Cronos and other chains such as Ethereum, Solana, and all the other leading EVM-compatible chains Moralis supports. In fact, you can use the same lines of code with minor tweaks to deploy your dapps on many chains. As a result, this also future-proofs your work.
With that in mind, you can relax knowing that when you connect a dapp to Cronos with Moralis, things are not set in stone. You can connect to other supported chains whenever you want. However, Cronos is a reliable chain with great potential. Hence, make sure to create your free Moralis account and learn how to connect dapps to Cronos by following our lead.
The Cronos Network Explained
Before we show you how to connect a dapp to Cronos, we ought to provide you with some basic information regarding this development chain. So, let’s use this section to briefly explain what Cronos entails.
The Cronos network was launched in 2021. Since then, it’s been running parallel with Cronos POS Chain. Also, Cronos is closely connected with Crypto.com; after all, it powers that exchange’s “Pay” feature. Furthermore, it’s worth pointing out that Crypto.com has been around since 2016, and is the organization behind both the Cronos POS and Cronos EVM blockchains.
Also, keep in mind that the Cronos blockchain is EVM-compatible. It supports inter-blockchain communications (IBC) among networks based on the Cosmos SDK. After all, Cronos was built on Cosmos, and, in turn, Cronos is compatible with Ethereum and Cosmos-based ecosystems. Hence, this high degree of interoperability enables devs to port Ethereum dapps and smart contracts without breaking a sweat.
Furthermore, you might have heard of “CRO” before. The latter serves as the base settlement currency of the Cronos network. However, CRO was primarily (and still is) the native token of Cronos POS Chain. Accordingly, CRO constitutes an essential component of both the Cronos POS and Cronos EVM blockchain ecosystems.
As far as the consensus mechanism goes, Cronos relies on the proof-of-stake (PoS) concept. This means that Cronos network validators stake part of their assets, which is used to validate transactions. This also enforces good behavior of network participants. Nonetheless, it’s worth pointing out that the main benefit of using PoS is scalability. After all, that’s one of the main reasons Ethereum transitioned from its proof-of-work (PoW) mechanism to PoS (The Merge). Of course, PoS is also more friendly to the environment.
Why Building and Connecting Dapps to the Cronos Network?
Blockchain technology already offers great opportunities and many reliable chains. However, none of the blockchains is perfect – each has its pros and cons. As such, it’s up to you to decide which chain you want to focus on. Fortunately, when you use Moralis, you are not stuck to any particular chain. So, why build and connect dapps to Cronos? The following arguments provided by Cronos.org may help you decide whether or not you want to give Cronos a chance.
- Cronos is built on Ethermint, which supports rapid porting of dapps and smart contracts from Ethereum and other EVM-compatible chains.
- The Cronos network can process more transactions per minute than Ethereum. Hence, it is faster and cheaper.
- It is also carbon-neutral to execute smart contracts on the Cronos network.
- The IBC protocol enables interoperability and bridging to Cronos POS Chain and other IBC-enabled chains (e.g., Cosmos Hub).
- The Cronos network is open-source. Anyone from the community is welcome to review and provide suggestions to strengthen Cronos.
How to Connect Dapps to Cronos – Development Tutorial
Using this article or the video tutorial at the bottom of this article, you can build and connect dapps to Cronos in less than seven minutes. Essentially, you need to complete the following three steps:
- Clone the ultimate EVM boilerplate – you can find it on GitHub.
- Customize specific environment variables and connect to Cronos or any other supported EVM-compatible chains.
- Start your Cronos dapp.
However, before we take you through the above steps in more detail, we want to do a quick demo of our boilerplate dapp. That way, you’ll know exactly what to expect, and it will help you decide whether or not you want to connect your dapp to Cronos.
Demo EVM-Compatible Dapp
The following screenshot shows the homepage of our boilerplate dapp:
Note: Don’t let the “Ethereum Boilerplate” name fool you. We use this name because Ethereum is still the most popular chain. However, as mentioned before, this boilerplate supports other EVM-compatible chains, including Cronos.
Looking at the above screenshot, you can see that the homepage template lists the main features and benefits of this boilerplate. The above image also shows the top navigation bar. The latter includes links to the following pages: “Home”, “Transactions”, “Transfers”, and “Balances”. Moreover, in the top-right corner, you can see the “Connect Wallet” button, which enables users to complete their Web3 authentication. So, after clicking on that button, users can choose between the most popular Web3 wallets to connect to this dapp. Nonetheless, you can also see the dark/light theme switch on the far right of the top navigation bar:
For the sake of this demonstration, we are using the MetaMask authentication method. Hence, after clicking on the “Connect Wallet” button, we selected MetaMask. As such, our MetaMask extension was prompted by the Moralis Auth API:
In order to confirm our authentication, we need to sign the above signature request. After clicking on the “Sign” button, we get to see our wallet address in the same spot where the “Connect Wallet” button was before:
Moreover, we can explore other pages with our wallet connected to our boilerplate dapp. As such, we can view the transactions for the connected address by clicking on the “Transactions” option in the top menu:
The above screenshot shows how our example dapp displays transactions. Furthermore, you can see that the transaction details include transaction hashes, such as “from” addresses, “to” addresses, the amounts of gas used, dates of the transaction, and a transaction’s status.
Viewing ERC-20 and NFT Transfers and Balances
Aside from the above-demonstrated transaction, our boilerplate dapp displays ERC-20 and NFT transfers and balances. Of course, the details displayed depend on the activity and balance of the connected wallet address. For instance, these are the NFT transfers on the wallet we used for this demonstration:
To get to the “NFT Transfers” page, we need to click on the “Transfers” option and select “NFT” from the drop-down menu:
We can also check our ERC-20 token and NTF balances via the “Balances” menu. Moreover, just like with “Transfers”, we get to select between “ERC-20” and “NFT” options:
So, when we decide to view the “ERC-20 Balances” page, we get these results:
Additionally, when we focus on the “NFT Balances” page, we get to see some example NFTs stored in the connected wallet:
Looking at the above screenshots of the “ERC-20 Balances” and “NFT Balances” pages, you can see that our boilerplate dapp also provides certain token details. These include token names, symbols, and amounts.
Now that you know what to expect from this ultimate EVM boilerplate, it’s time you roll up your sleeves and connect your dapp to Cronos.
Build and Connect Dapps to Cronos with Moralis – Follow-Along Instructions
In this section, you’ll learn about the values you need to use to connect dapps to Cronos using the above-presented boilerplate. Moreover, we’ll also provide you with a clear overview of the process. However, for detailed follow-along instructions, use the video below. Starting at 2:00, you will learn how to access the boilerplates repo and clone the code. Moving forward, you’ll need to tweak your “.env.local.example” file. Starting at 3:20, you’ll learn about the variables and their values in that file:
As far as your goal to connect a dapp to Cronos goes, this step bears the highest significance. Looking at the above screenshot, you can see that the variable at the top of the “.en.local.example” file is “APP_CHAIN_ID“. As such, this is where you’ll need to enter the details that match the Cronos chain. Of course, you get to connect your dapp to the Cronos mainnet or testnet:
- Cronos Mainnet Chain ID: 0x19
- Cronos Testnet Chain ID: 0x152
Note: As noted in the above demo section, Ethereum (0x1) is this boilerplate’s default option. Moreover, the expert in the video tutorial focuses on the Polygon testnet (0x13881). Furthermore, in the Moralis documentation, you can explore chain IDs for all supported chains.
Once you specify one of the above Cronos chain IDs, you’ll also need to take care of the other values. Further, as far as the “NEXTAUTH_SECRET” and “NEXTAUTH_URL” variables, the “.env.local.example” file alone provides you with all the instructions needed. However, if you are new to Moralis, you may need help obtaining your Web3 API key. But fear not; this is also a straightforward task.
Obtain Your Web3 API Key
In order to obtain your Moralis Web3 API key, you need your Moralis account. In case you haven’t created your free account yet, do so now. It shouldn’t take you more than a minute or so to have your account up and ready. So, you can start by using the “create your free Moralis account” link in the intro or by clicking on the “Start for Free” button on Moralis’ homepage:
Once you have your account, log in with your credentials to access your Moralis admin area. From there, you’ll be able to obtain your Web3 API key in these two simple steps:
Return to the “.env.local.example” file and replace the placeholder content next to “MORALIS_API_KEY” with the above-copied key.
Once you’ve properly tweaked your “.env.local.example”, you’ll also want to rename it to “.env.local”. Then, at 4:42, you’ll learn how to install all dependencies. With all dependencies in place, you’ll finally get to run your Cronos dapp. To do this, you must enter “yarn run dev” or “npm run dev” in your terminal.
Here’s the video tutorial with all the details you need to build and connect dapps to Cronos:
Cronos Development – Connect Dapps to Cronos – Summary
We took you on quite a journey throughout this article. First, we provided you with some basic information about the Cronos network. As such, you discovered that Cronos is an EVM-compatible chain built on Cosmos. We also looked at some of the key advantages of this programmable chain that might inspire you to build dapps and connect them to Cronos. Moreover, with the basics under your belt, you had an opportunity to check out a demo of our boilerplate. Finally, we provided you with all the details you need to use this boilerplate to connect your dapp to Cronos in less than seven minutes.
If you enjoyed today’s tutorial and want to dive deeper into Cronos development, make sure to visit the Moralis YouTube channel and the Moralis blog. After all, you now know that you can use Moralis’ EVM API to build on Cronos and other networks. Hence, you can follow the other tutorials focusing on other chains and change the chain IDs, so it matches Cronos. Of course, these two outlets mentioned above are also what you need if you want to focus on other supported chains. Some of the latest topics show you how to connect a dapp to the Ethereum network, how to connect a dapp to Polygon, how to clone Zapper, how to connect PlayFab with Web3 using Azure Functions, how to connect MetaMask to website with NextJS, and much more.
On the other hand, you might be interested in a more professional approach to your crypto education. If so, Moralis Academy is the place to be. This online blockchain development education platform offers several top-tier courses. For instance, the “Moralis Web3 Dapp Programming” course could really catapult you forward.
