Tutorial: Tips on how to Join a Dapp to Polygon Community – Moralis Web3

Many who’ve skilled exorbitant gasoline charges on Ethereum have turned their consideration elsewhere. In doing so, they probably found Polygon (previously Matic). This decentralized scaling platform permits customers to execute on-chain transactions at minimal prices. Due to this, builders who construct Polygon dapps can profit immensely by providing customers the advantages of the Polygon community. If this sounds attention-grabbing and also you’d prefer to discover Polygon improvement additional, comply with alongside as we discover how one can join dapp to Polygon. Furthermore, this text showcases that this process – how to hook up with Polygon Community – may be achieved in minutes with out breaking a sweat!     

The above process is feasible because of advancing instruments from the present Web3 tech stack. In any case, the tech stack has come a great distance in recent times. Moreover, with glorious cross-chain instruments and platforms like Moralis, you should utilize your Web2 dev expertise to create killer dapps (decentralized functions) on numerous networks. Furthermore, with Moralis (the main enterprise-grade Web3 API supplier), you may mix the facility of NodeJS and Moralis’ EVM API to create a backend dapp and connect with Polygon Community effortlessly. 

You may also use the last word Ethereum boilerplate, which helps all EVM-compatible chains, together with Polygon. This boilerplate is, with out query, the quickest approach to construct and join dapp to Polygon. Accordingly, we’ll additionally present you how one can use this shortcut in at the moment’s article. So, ensure to create your free Moralis account and comply with our lead!  

Get the Newest Data on What’s Occurring in Web3 Improvement – be a part of Moralis Journal!

Polygon Community Defined

Earlier than we dig into the method of how one can join dapp to Polygon Community, let’s discover what the Polygon community entails. Ethereum was the primary programmable chain, and we will really thank Ethereum for the Polygon community. In any case, it was the elevated adoption of Ethereum that precipitated community congestion and astronomical transaction charges. Therefore, throughout the latest crypto bull run, it was economically difficult to develop dapps. As such, a scalable resolution was all of the sudden in excessive demand. One of many respected options was Matic, which rebranded to Polygon in February 2021.  

Polygon is a decentralized Ethereum scaling platform. Thus, it’s a potential resolution to the congestion situation that the Ethereum community faces. In different phrases, Polygon serves as a extra economically sustainable improvement platform. It helps be sure that devs can create dapps with out spending a fortune on gasoline charges. Furthermore, it’s vital to notice that it does so with out compromising the safety of the Ethereum blockchain. Accordingly, it makes plenty of sense to attach your dapp to Polygon.

Moreover, Polygons’ tagline – “bringing the world to Ethereum” – tells you they aren’t competing with Ethereum. Fairly, they’re working with the main improvement blockchain to assist create a sound Web3 infrastructure. Due to this relation to Ethereum, there are a lot of similarities between the 2 networks. For one, Polygon makes use of the identical token requirements (ERC-20, ERC-721, and ERC-1155). Additionally, the native token of Polygon (MATIC) is an ERC-20 token. Relating to MATIC, Polygon customers make the most of this community’s native forex to manipulate the chain. After all, it additionally serves as a fee for the comparatively low transaction charges. 

Nonetheless, till the Ethereum merge, Polygon and Ethereum used completely different consensus mechanisms. Nonetheless, each chains at the moment are powered by a extra scalable various – proof-of-stake (PoS).

Is Matic Polygon?

Should you learn the introduction and the “Polygon Community Defined” part, you already know that Polygon was initially known as Matic. Whereas the rebranding befell in February 2021, it didn’t have an effect on the chain’s native token’s image. The latter stays MATIC. As such, Matic and MATIC are two various things. The previous is the unique identify of the community that was changed by “Polygon”, whereas MATIC is the ticker for Polygon’s native cryptocurrency. It’s price maintaining that in thoughts as you be taught to hook up with Polygon community.

As well as, let’s additionally level out that, like most improvement blockchains, Polygon presents its testnet/devnet. The latter known as Mumbai, and it makes use of “take a look at” MATIC as its native forex. This testing forex is totally separate and distinct from Polygon’s native token. So, whereas you need to purchase actual MATIC, you should utilize a Mumbai testnet faucet to get “take a look at” MATIC totally free. 

Connecting Polygon to Your Dapp with Moralis’ API

Due to Moralis’ cross-platform interoperability, there are a lot of methods to attach dapp to Polygon. Nonetheless, as talked about, we’ll give attention to utilizing NodeJS (or Moralis’ JS SDK) herein. As such, you’ll want to finish the next 5 steps to attach dapp to Polygon:

Making a NodeJS Dapp Importing and Setting Up the Newest Moralis JS SDK Setting Up a Easy Categorical Server Integrating Your Dapp with Moralis Companies Fetching Blockchain Information from Polygon  

Earlier than you progress ahead, it is advisable deal with some conditions. So, when you haven’t carried out so but, get your free Moralis account arrange now. Additionally, have your favourite code editor (we use Visible Studio Code [VSC]) prepared and set up NodeJS. With these duties below your belt, you’re prepared to hook up with Polygon community.

Making a NodeJS Dapp

First, create the “Easy-NodeJS” folder and open it in VSC. After all, you may identify your folder as you want; nonetheless, to keep away from confusion, we encourage you to make use of the identical identify as ours. Subsequent, open a brand new terminal inside your IDE:

Then, initialize a brand new mission. You do that by coming into “npm init” into the terminal. After coming into this command, the interface will ask you to call your mission and choose your preferences. Nonetheless, be happy to stay to the default choices. Therefore, merely press “enter” a number of occasions. Should you’ve efficiently initialized your NodeJS mission, there needs to be a “bundle.json” file in your mission’s file tree.

Importing and Setting Up the Newest Moralis JS SDK

It’s time to import and arrange the most recent Moralis JS SDK. Luckily, a easy command will deal with that. Primarily, you simply want to put in the “moralis” dependency. Nonetheless, to skip a step, let’s on the similar time set up the “categorical” dependency as effectively. Thus, execute the “npm set up moralis categorical” command utilizing your terminal.

Setting Up a Easy Categorical Server

Because you already put in the “categorical” dependency, you may give attention to establishing your Categorical server. To do that, it is advisable create an “index.js” file. Then, populate that file with this code:

const categorical = require(‘categorical’)
const app = categorical()
const port = 3000

app.get(‘/’, (req, res) => {
res.ship(‘Hey World!’)
})

app.pay attention(port, () => {
console.log(`Instance app listening on port ${port}`)
})

As well as, additionally ensure you add the “begin” script to your  “bundle.json” file:

“scripts”: {
“begin”: “node index.js”
},

Now you may have every part it is advisable run your Categorical server. Therefore, be happy to execute the “npm run begin” command and go to “http://localhost:3000”. Try to be greeted by the “Hey World!” message.

Integrating Your Dapp with Moralis Companies 

By integrating your dapp with Moralis providers, you’ll import the Moralis EVM API, which incorporates the Polygon API. For that objective, you’ll be utilizing the “index.js” file. Moreover, that is additionally the place you’ll want to stick in your Moralis Web3 API key. We’ll present you how one can acquire your API key quickly, however first, add these traces of code on the high of the “index.js” file:

// Import Moralis
const Moralis = require(‘moralis’).default
// Import the EvmChain dataType
const { EvmChain } = require(“@moralisweb3/evm-utils”)

Subsequent, add the next three variables:

const MORALIS_API_KEY = “replace_me”
const deal with = “replace_me”
const chain = EvmChain.POLYGON

As you may see, the above-defined variables require particular values. Subsequent to “MORALIS_API_KEY“, it is advisable paste your API key. For the deal with, give a sound Polygon chain deal with. Furthermore, since we purpose to hook up with Polygon community, we have to use the “EvmChain.POLYGON” worth. 

Be aware: To see what different chains Moralis helps, go to the “EVM API Overview” documentation web page. That is additionally a spot to be taught in regards to the matter that the last word EVM API covers.

Acquiring Your Moralis Web3 API Key

At this level, you need to have your Moralis account up and operating. Therefore, you should utilize your credentials to entry your Moralis admin space. There, you’ll be capable to copy your Moralis Web3 API key in two easy steps. First, choose the “Web3 APIs” choice from the facet menu. Second, click on on the “copy” icon subsequent to your API key:

Then, return to your “index.js” file and exchange “replace_me” with the above-copied key. Moreover, don’t forget to initialize Moralis by including these traces of code:

const startServer = async () => {

  await Moralis.begin({

    apiKey: MORALIS_API_KEY,

  })

Join Dapp to Polygon – Fetching Blockchain Information

After initializing Moralis and coming into acceptable values, you can begin implementing numerous Web3 API calls. For the reason that Moralis EVM API presents many choices, we received’t be capable to cowl all of them herein. Nonetheless, by displaying you how one can fetch the native stability, ERC-20 balances, and NFTs, you may simply discover different API endpoints by yourself.

Fetch Native Steadiness

If you join dapp to Polygon, you may fetch MATIC stability utilizing Moralis’ “getNativeBalance” endpoint. If you wish to do these in a neat method, we encourage you to create the “getDemoData” operate contained in the “index.js” file:

async operate getDemoData() {
// Get native stability
const nativeBalance = await Moralis.EvmApi.stability.getNativeBalance({
deal with,
chain,
})

// Format the native stability formatted in ether by way of the .ether getter
const native = nativeBalance.outcome.stability.ether

return { native }
}

Furthermore, the “getNativeBalance” EVM API endpoint takes within the “deal with” and “chain” parameters. That is the place you get to make use of the beforehand outlined “deal with” and “chain” values. 

Moreover, ensure you additionally add the “/crypto-data” endpoint. The latter will return the outcomes of the “getDemoData” operate and allow you to make use of “http://localhost:3000/demo” to view the response:

app.get(“/demo”, async (req, res) => {
attempt {
// Get and return the crypto knowledge
const knowledge = await getDemoData()
res.standing(200)
res.json(knowledge)
} catch (error) {
// Deal with errors
console.error(error)
res.standing(500)
res.json({ error: error.message })
}
})

By calling the above endpoint, you may view the response within the following format:

{
“native”: “0.169421625822962794”
}

Fetch ERC-20 Steadiness

Immediately, there are a lot of ERC-20 tokens. Positive, most of them are on the Ethereum chain, however many are additionally on Polygon. As such, you should utilize the “getWalletTokenBalances” endpoint to get the balances of all ERC-20 tokens for a selected deal with. To implement this performance, add these traces of code to “getDemoData“:

// Get token balances
const tokenBalances = await Moralis.EvmApi.token.getWalletTokenBalances({
deal with,
chain,
})

// Format the balances to a readable output with the .show() methodology
const tokens = tokenBalances.outcome.map((token) => token.show())

// Add tokens to the output
return { native, tokens }
}

Fetch NFTs

There are a number of standard NFTs on the Polygon chain, and you’ll fetch them simply now that you understand how to hook up with Polygon community. By including the traces of code under to your “getDemoData” operate, you fetch the primary ten NFTs for a given deal with:

const nftsBalances = await Moralis.EvmApi.nft.getWalletNFTs({
deal with,
chain,
restrict: 10,
})

// Format the output to return identify, quantity and metadata
const nfts = nftsBalances.outcome.map((nft) => ({
identify: nft.outcome.identify,
quantity: nft.outcome.quantity,
metadata: nft.outcome.metadata,
}))

// Add nfts to the output
return { native, tokens, nfts }
}

Be aware: To view the whole closing code for the “index.js” file offered herein, go to the “Utilizing NodeJS” documentation web page. Nonetheless, do not forget that the code there focuses on the Ethereum chain. So, when you determine to repeat that code and use it to attach dapp to Polygon, exchange “ETHEREUM” with “POLYGON”. As well as, you’ll additionally want to exchange the instance deal with with a sound deal with on the Polygon chain. 

Construct and Join Dapp to Polygon Community 

Now that you understand how to create a NodeJS dapp with Moralis’ EVM API, you understand how to deal with backend dapps. Additionally, Moralis allows you to ship an attention grabbing frontend with minimal effort. That’s what the video tutorial under will present you. By following the lead of certainly one of our in-house specialists within the video under, you’ll be taught to construct and join dapp to Polygon shortly and simply. 

Furthermore, don’t let the “ethereum-boilerplate” identify idiot you. In any case, you now know that Polygon is an EVM-compatible chain, which implies you should utilize the identical boilerplate. All it is advisable do is enter the Polygon chain’s ID. You’ll discover ways to do this within the video under, beginning at 3:42. Moreover, remember the fact that this video tutorial focuses on Polygon’s testnet (chain ID 0x13881):

Nonetheless, when you had been to exchange that ID with “0x89”, you’d be concentrating on Polygon’s mainnet.

Finally, by utilizing the last word Ethereum boilerplate, you get to create a decentralized app in simply three steps:

Clone the Ethereum boilerplate code that awaits you on GitHub. Customise particular setting variables and connect with any chain you need. Begin your occasion of this Web3 web site template.

By finishing the above three steps, you may have a Polygon dapp prepared in lower than seven minutes.

Tutorial on Tips on how to Join Dapp to Polygon Community – Abstract

On this article, we began by instructing you the fundamentals of the Polygon community. As such, you came upon that Polygon is an EVM-compatible chain. You additionally had an opportunity to clear up the “Matic vs Polygon” confusion as soon as and for all. Accordingly, you now know that Matic was rebranded to Polygon in 2021, whereas the chain’s native coin stays MATIC. Then, we confirmed you how one can join Polygon to your dapp with Moralis’ API. Primarily, we targeted on making a backend dapp utilizing NodeJS, which we linked to Moralis’ EVM API. We additionally demonstrated how one can fetch a few of the on-chain knowledge when you’ve managed to attach dapp to Polygon. Final however not least, we shared a video tutorial displaying you how one can create a NextJS dapp in below seven minutes. Therefore, you now know how one can join dapp to Polygon or different EVM-compatible chains. 

With the information obtained herein, you’re able to take the subsequent step of your Web3 improvement journey. Should you choose to be taught by taking up numerous instance initiatives, you need to discover the Moralis YouTube channel and the Moralis weblog. There, you could find a ton of fantastic tutorials. A number of the newest articles train you how one can join PlayFab with Web3 utilizing Azure Capabilities, how one can join MetaMask to web site with NextJS, how one can construct an Ethereum dapp in 5 steps, and even how one can construct a Web3 FIFA clone. 

Then again, chances are you’ll want to embark upon a customized examine path with skilled mentorship. The latter awaits you at Moralis Academy, the place you get to develop into blockchain licensed. By finishing blockchain improvement programs, such because the Blockchain Enterprise Masterclass course, you improve your possibilities of touchdown an ideal crypto job.