Step-By-Step Guide To Build A dApp On Polygon

Because of its open-source ecosystem and capacity to solve the problems with the Bitcoin blockchain, Ethereum is incredibly popular. For example, the development of decentralized apps and solutions cannot be supported by the Bitcoin network. Ethereum, on the other hand, provides an open-source platform that allows everyone to create blockchain-powered applications and support the expansion of the ecosystem.

Ethereum has many drawbacks despite its many advantages, such as its built-in programming language, EVM (Ethereum virtual machine), and smart contracts. Scalability problems in Ethereum are caused by insufficient throughput, high transaction costs, and network congestion. A core group of four software developers created the Polygon network to address the problems that Ethereum was facing at the time.

Polygon is powered by layer-2 scaling solutions and uses the proof-of-stake consensus process. By utilizing Ethereum’s technology, the network enhances its worth. As a result, Polygon offers improved development possibilities, reduced transaction costs, and increased throughput on Ethereum’s ecosystem and many blockchains that are interoperable with Ethereum.

Another reason Polygon is well-liked is its distinct suitability for dApp development assistance. Developers can create business-specific decentralized applications by utilizing Polygon’s SDKs and development tools. This tutorial will provide a step-by-step explanation of dApp creation on the Polygon network.

What is Polygon Blockchain?

Polygon is a framework and platform for blockchain scalability that connects and creates Ethereum-compatib
le blockchain networks. Polygon used to be called the Matic network. Polygon refers to itself as “Ethereum’s internet of blockchains” since it is working to bring together scalable solutions to create a multichain Ethereum ecosystem. The unique characteristics of Polygon are as follows:

The Polygon network, also referred to as a layer-2 Ethereum solution, offers a sophisticated framework made up of sovereign blockchains and sidechains, and is intended to interact with both Ethereum’s current and future infrastructures.

To complement the base chain’s fundamental problems and lessen its constraints, Layer 2 solutions are placed onto it.

In essence, Polygon is a Plasma-based aggregator that provides a framework with enhanced security, speed, and scalability to facilitate the development of off-chain decentralized applications. One of the main causes of Polygon’s widespread use is this Plasma framework.

Polygon Plasma Chains are one way that Polygon uses Plasma. In addition to speeding up and lowering the cost of transactions on the main blockchain, it provides a foundation for the development of decentralized apps.

What Limitations are there on Ethereum?

The Ethereum blockchain is intended to be an innovative and potent blockchain for businesses. It does, however, have some restrictions.

The poor throughput problem is Ethereum’s largest obstacle. Compared to most second-generation blockchains, its transaction processing speed is rather low, with only 30 transactions per second.

On Ethereum, the typical transaction charge is $51.45. The network’s miners’ supply and demand strategies, however, decide the precise charge.

Ethereum isn’t interoperable. As a result, it prevents communication between the blockchains that are compatible with Ethereum.

Because Ethereum lacks a mechanism to link different blockchains, it presents significant development hurdles and fragments the ecosystem.

How can Polygon solve these limitations?

All of these networks are connected to Ethereum using Polygon, which serves as a framework and protocol to facilitate the creation of blockchains that are compatible with Ethereum. This is Polygon’s solution to Ethereum’s drawbacks.

Blockchain networks encoded with Polygon may be deployed with a single click.

It provides an expanding selection of modules for creating unique networks.

Polygon’s interoperability protocol enables random messages to be shared across Ethereum and other blockchains.

uses “security as a service,” which is modular and optional, to improve the security system on blockchains.

The adaptor modules from Polygon allow for more interoperability with current blockchain networks.

Why Consider dApp Development on Polygon?

Polygon has become a prominent platform that aids in the creation of decentralized infrastructures
and scalable Ethereum solutions. With numerous project partners and creative tools periodically added, the network continues to expand.

More than 300 decentralized apps have already been developed on the ecosystem, and more are in the works. Keeping this in mind, let’s examine Polygon’s developer advantages.

How to Build a Decentralized App on Polygon?

This section will walk you through creating a decentralized application (dApp) on the Polygon blockchain that enables users to join to various networks within the app and establish a wallet using their email address.

We are utilizing Magic as a key-based authentication solution for this guide. Using magic links, you may provide passwordless authentication for your application. Magic is a developer SDK that works precisely like Medium and Slack.

Quick Start for Developers

You can be a competent Polygon developer if you have experience with Ethereum-based development. Polygon supports all of the Ethereum tools you use, including Web3js, Remix, and Truffle.

Therefore, move to Polygon’s RPC and begin creating your dApp.

Step 1: Linking to a Polygon

Two Magic and two Web3 instances are required for each of the two networks—Polygon and Ethereum—when using magic.js. You enable consumers to transition between these two platforms with this feature.

To ensure that users’ public address remains unchanged, we will utilize the same API key for both Magic instances. Execute the subsequent command:

import { Magic } from ‘magic-sdk’;

import Web3 from ‘web3’;

/**

NOTE: When connecting to a testnet, TEST API keys must be used from the Magic dashboard (live API keys for eth mainnet)

*/

const customNodeOptions = {

rpcUrl: ‘https://rpc-mumbai.matic.today’,

chainId: 80001

}

// Setting network to Matic

export const magicMatic = new Magic(process.env.REACT_APP_MAGIC_PUBLISHABLE_KEY, { network: customNodeOptions });

magicMatic.network = “matic”

export const maticWeb3 = new Web3(magicMatic.rpcProvider);

// Setting network to Ethereum (Ropsten Testnet)

export const magicEthereum = new Magic(process.env.REACT_APP_MAGIC_PUBLISHABLE_KEY, { network: ‘ropsten’ });

magicEthereum.network = “ethereum”

export const ethWeb3 = new Web3(magicEthereum.rpcProvider);

Step: Two: Network Switching

The pick element dropdown list in Polygon-based dApps lets you move between the Ethereum and Polygon networks. Two Magic instances are pointing in the direction of Polygon and Ethereum, respectively. As a result, you must adjust the instance that our decentralized application uses by the network preferences of users. Apply the provided command:

import { magicEthereum, magicMatic, ethWeb3, maticWeb3 } from “../magic”;

const handleChangeNetwork = (e) => {

e.target.value === ‘ethereum’ ? setMagic(magicEthereum) : setMagic(magicMatic);

fetchBalance(userMetadata.publicAddress);

fetchContractMessage();

}

return (

< select name=“network” onchange=“{(e)”>handleChangeNetwork(e)}>

< option value=“ethereum”>Ethereum (Ropsten Testnet)< /option>

< option value=“matic”>Matic (Mumbai Testnet)< /option>

<!– select–></div > )

Step #3: Seeing the User’s Balance

On the Ethereum and Polygon blockchains, users’ public addresses stay the same (unless you use a different API for each instance). For both networks, a straightforward web3.eth.getBalance call is therefore necessary. Since ETH is the native token of Ethereum and MATIC is the native token of Polygon, the token symbol that appears depends on the network to which we are connected.

The user’s public address. Apply the provided command:

const fetchBalance = (address) => {

web3.eth.getBalance(address).then(bal => setBalance(web3.utils.fromWei(bal)))

}

return (

Balance

{balance.toString().substring(0, 6)} {magic.network === ‘matic’ ? ‘MATIC’ : ‘ETH’}

)

Step 4: Transaction Sending

Transmitting a transaction is not a brainstorming session, and the network to which you are connected is no different. Just the amount to be sent, along with the form and destination addresses, are required. Furthermore, the overall gas limit and price are computed automatically if neither gas nor gas prices are exceeded.

const web3 = magic.network === “ethereum” ? ethWeb3 : maticWeb3;

const sendTransaction = async () => {

if (!toAddress || !amount) return;

const receipt = await web3.eth.sendTransaction({

from: publicAddress,

to: toAddress,

value: web3.utils.toWei(amount)

});

}

return (

Send Transaction

< input type=“text” value=“{toAddress}” /> setToAddress(e.target.value)}

placeholder=“To Address”

/>

< input type=“text” value=“{amount}” /> setAmount(e.target.value)}

placeholder=“Amount”

/>

Send Transaction

)

Calling Smart Contracts

To let users communicate with Ethereum and Polygon independently, you must implement distinct smart contracts on each platform. You must be aware of the proper address where contracts must be deployed to do this.

const network = magic.network === “ethereum” ? ‘ethereum’ : ‘matic’;

const ropstenContractAddress = ‘0x8cb46E4bFc14Ce010dFbE5Ecb61BA64d798D3A67’;

const maticContractAddress = ‘0x9ebE0B009146643bb3560375A4562D8d89E135e9’;

const contract = new web3.eth.Contract(abi, network === “ethereum” ? ropstenContractAddress : maticContractAddress);

// Grabbing message variable value stored in the smart contract

const fetchContractMessage = () => contract.methods.message().call().then(setMessage)

// Update contract message value on the blockchain

const updateContractMessage = async () => {

if (!newMessage) return;

const receipt = await contract.methods.update(newMessage).send({ from: user.publicAddress });

}

return (

Contract Message

{message}

Update Message

< Input type=“text” value=“{newMessage}” /> setNewMessage(e.target.value)}

placeholder=“New Message” />

Update

)

Conclusion