Tutorial: Learn 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 most certainly 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, observe alongside as we discover how you can join dapp to Polygon. Furthermore, this text showcases that this job – how to connect with Polygon Community – will be completed in minutes with out breaking a sweat!     

The above job is feasible due to advancing instruments from the present Web3 tech stack. In any case, the tech stack has come a good distance in recent times. Moreover, with wonderful cross-chain instruments and platforms like Moralis, you need to use your Web2 dev abilities to create killer dapps (decentralized purposes) 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. 

It’s also possible to use the final word Ethereum boilerplate, which helps all EVM-compatible chains, together with Polygon. This boilerplate is, with out query, the quickest option to construct and join dapp to Polygon. Accordingly, we’ll additionally present you how you can use this shortcut in at present’s article. So, make certain to create your free Moralis account and observe our lead!  

Get the Newest Information on What’s Taking place in Web3 Improvement – be a part of Moralis Journal!

Polygon Community Defined

Earlier than we dig into the method of how you can join dapp to Polygon Community, let’s discover what the Polygon community entails. Ethereum was the primary programmable chain, and we are able to really thank Ethereum for the Polygon community. In any case, it was the elevated adoption of Ethereum that prompted community congestion and astronomical transaction charges. Therefore, through the current crypto bull run, it was economically difficult to develop dapps. As such, a scalable resolution was abruptly 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 concern that the Ethereum community faces. In different phrases, Polygon serves as a extra economically sustainable improvement platform. It helps be certain that devs can create dapps with out spending a fortune on gasoline charges. Furthermore, it’s essential 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. Somewhat, they’re working with the main improvement blockchain to assist create a sound Web3 infrastructure. Due to this relation to Ethereum, there are various 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. Concerning MATIC, Polygon customers make the most of this community’s native foreign money to manipulate the chain. After all, it additionally serves as a cost for the comparatively low transaction charges. 

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

Is Matic Polygon?

If you happen to learn the introduction and the “Polygon Community Defined” part, you already know that Polygon was initially referred to 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 value holding that in thoughts as you be taught to connect with Polygon community.

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

Connecting Polygon to Your Dapp with Moralis’ API

Because of Moralis’ cross-platform interoperability, there are various methods to attach dapp to Polygon. Nevertheless, as talked about, we’ll deal with utilizing NodeJS (or Moralis’ JS SDK) herein. As such, you’ll want to finish the next 5 steps to attach dapp to Polygon:

1. Making a NodeJS Dapp
2. Importing and Setting Up the Newest Moralis JS SDK
3. Setting Up a Easy Specific Server
4. Integrating Your Dapp with Moralis Providers
5. Fetching Blockchain Knowledge from Polygon  

Earlier than you progress ahead, you want to deal with some conditions. So, should you haven’t performed 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 underneath your belt, you might be prepared to connect 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; nevertheless, 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 undertaking. You do that by coming into “npm init” into the terminal. After coming into this command, the interface will ask you to call your undertaking and choose your preferences. Nevertheless, be happy to stay to the default choices. Therefore, merely press “enter” a number of instances. If you happen to’ve efficiently initialized your NodeJS undertaking, there needs to be a “bundle.json” file in your undertaking’s file tree.

Importing and Setting Up the Newest Moralis JS SDK

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

Setting Up a Easy Specific Server

Because you already put in the “categorical” dependency, you may deal with organising your Specific server. To do that, you want to 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('Howdy 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’ve every little thing you want to run your Specific server. Therefore, be happy to execute the “npm run begin” command and go to “http://localhost:3000”. Try to be greeted by the “Howdy World!” message.

Integrating Your Dapp with Moralis Providers 

By integrating your dapp with Moralis companies, 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 you can receive your API key quickly, however first, add these strains of code on the prime 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“, you want to paste your API key. For the deal with, give a sound Polygon chain deal with. Furthermore, since we goal to connect with Polygon community, we have to use the “EvmChain.POLYGON” worth. 

Observe: To see what different chains Moralis helps, go to the “EVM API Overview” documentation web page. That is additionally a spot to be taught concerning the subject that the final 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 need to use your credentials to entry your Moralis admin space. There, you’ll be capable of copy your Moralis Web3 API key in two easy steps. First, choose the “Web3 APIs” possibility from the facet menu. Second, click on on the “copy” icon subsequent to your API key:

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

const startServer = async () => {

  await Moralis.begin({

    apiKey: MORALIS_API_KEY,

  })

Join Dapp to Polygon – Fetching Blockchain Knowledge

After initializing Moralis and coming into applicable values, you can begin implementing numerous Web3 API calls. Because the Moralis EVM API gives many choices, we received’t be capable of cowl all of them herein. Nevertheless, by displaying you how you can fetch the native steadiness, ERC-20 balances, and NFTs, you may simply discover different API endpoints by yourself.

Fetch Native Stability

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

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

  // Format the native steadiness formatted in ether through the .ether getter
  const native = nativeBalance.end result.steadiness.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” perform 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 Stability

As we speak, there are various ERC-20 tokens. Certain, most of them are on the Ethereum chain, however many are additionally on Polygon. As such, you need to use the “getWalletTokenBalances” endpoint to get the balances of all ERC-20 tokens for a particular deal with. To implement this performance, add these strains 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.end result.map((token) => token.show())
  
  // Add tokens to the output
  return { native, tokens }
}

Fetch NFTs

There are a number of fashionable NFTs on the Polygon chain, and you’ll fetch them simply now that you understand how to connect with Polygon community. By including the strains of code beneath to your “getDemoData” perform, 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.end result.map((nft) => ({
    identify: nft.end result.identify,
    quantity: nft.end result.quantity,
    metadata: nft.end result.metadata,
  }))
  
  // Add nfts to the output
  return { native, tokens, nfts }
}

Observe: To view the complete remaining code for the “index.js” file offered herein, go to the “Utilizing NodeJS” documentation web page. Nevertheless, do not forget that the code there focuses on the Ethereum chain. So, should you determine to repeat that code and use it to attach dapp to Polygon, substitute “ETHEREUM” with “POLYGON”. As well as, you’ll additionally want to switch 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 helps you to ship an eye catching frontend with minimal effort. That’s what the video tutorial beneath will present you. By following the lead of one among our in-house specialists within the video beneath, 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 suggests you need to use the identical boilerplate. All you want to do is enter the Polygon chain’s ID. You’ll discover ways to try this within the video beneath, beginning at 3:42. Moreover, take into account that this video tutorial focuses on Polygon’s testnet (chain ID 0x13881):

Nevertheless, should you have been to switch that ID with “0x89”, you’d be concentrating on Polygon’s mainnet.

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

1. Clone the Ethereum boilerplate code that awaits you on GitHub.
2. Customise particular setting variables and connect with any chain you need.
3. 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 Learn 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 discovered 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 you can join Polygon to your dapp with Moralis’ API. Primarily, we targeted on making a backend dapp utilizing NodeJS, which we related to Moralis’ EVM API. We additionally demonstrated how you can fetch a number 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 you can create a NextJS dapp in underneath seven minutes. Therefore, you now know how you can join dapp to Polygon or different EVM-compatible chains. 

With the data obtained herein, you might be able to take the subsequent step of your Web3 improvement journey. If you happen to desire to be taught by taking over numerous instance initiatives, you need to discover the Moralis YouTube channel and the Moralis weblog. There, you could find a ton of wonderful tutorials. A few of the newest articles educate you how you can join PlayFab with Web3 utilizing Azure Capabilities, how you can join MetaMask to web site with NextJS, how you can construct an Ethereum dapp in 5 steps, and even how you can construct a Web3 FIFA clone. 

Then again, chances are you’ll want to embark upon a personalised research path with professional mentorship. The latter awaits you at Moralis Academy, the place you get to change into blockchain licensed. By finishing blockchain improvement programs, such because the Blockchain Enterprise Masterclass course, you enhance your probabilities of touchdown an ideal crypto job.