Developing DAPPs with Svelte and Web3/Ethers, using Polygon MATIC - Part 1 | By Michael Whittle | Level Up Coding

admin

How to get started with Polygon’s Mumbai Testnet Licenced Image from Adobe Stock A few months ago I consulted on three projects to develop DAPPs on Polygon’s blockchain.I’m a Certified Ethereum Developer , Certified Ethereum QA Engineer , and have done the Quorum Specialisation .At first, I was a little apprehensive as I had never…

How to get started with Polygon’s Mumbai Testnet

Licenced Image from Adobe Stock A few months ago I consulted on three projects to develop DAPPs on Polygon’s blockchain.I’m a Certified Ethereum Developer , Certified Ethereum QA Engineer , and have done the Quorum Specialisation .At first, I was a little apprehensive as I had never worked with Polygon or MATIC before.I have knowledge and experience developing smart contracts in Solidity using Remix , Tuffle Suite and Hardhat , but would it be the same? To add another level of complexity, I have knowledge and experience using React.js but the requirement was to develop the front-end using Svelte .I had never heard of Svelte , but I was told it would be easy to pick up (and it was).

I thought I would share my experience with you over a few articles.For those wanting to develop DAPPs using Polygon MATIC, this should help accelerate your learning.I was really impressed with Polygon and Svelte, and I would probably prefer it over Ethereum and React.js now.Polygon is really easy to use.

The transactions are faster and lower cost.The speed of developing in Svelte is so much faster than React.js, and the same for performance.

Let’s dive in… If you are going to be developing DAPPs, you’ll start off working with Polygon’s Mumbai Testnet .

If you are familiar with Ethereum, this is comparable to Ropsten, Kovan, Rinkeby, and Görli.On the Ethereum networks, the currency is ETH which you use to pay for transactions.On the Polygon networks, the currency is MATIC which you will use to pay for transactions.

Step 1: Install MetaMask into your browser

MetaMask is a very popular client (browser plugin) for interfacing with Blockchains.There are other alternatives like WalletConnect , but my personal preference is MetaMask.

The installation process is really simple, just follow the instructions during the installation process.

Step 2: Add the Polygon Testnet to MetaMask as a network option

MetaMask has a number of pre-configured networks included, but you can add any Blockchain you wish.I’ll assume you don’t have it, and need to add it.

Screenshot by Author You will want to click on “ Show/hide test networks ” and make sure that “ Show test networks ” is toggled to on.

You may or may not see the Polygon Mumbai test network after you do this.

Screenshot by Author I don’t see it there, so will need to add it.Click “ Add network ”.

Screenshot by Author I still don’t see it there, so I will “ Add a network manually ”.

Network Name: Mumbai Testnet

New RPC URL: https://rpc-mumbai.maticvigil.com/

Just an aside here… the RPC URL above is not the only RPC URL for the Mumbai test network.

It does happen on occasion that RPC URLs experience problems.If for some reason your MetaMask stops connecting to the network or very slow, you do have other URLs you can try.

Chain ID: 80001

Currency Symbol: MATIC

Block Explorer URL: https://polygonscan.com/

Screenshot by Author Then click “ Save ”, and it should look like this.

Screenshot by Author We are now connected to the Polygon Testnet and I have an account created (“ 0xECaB3780e95793137a9964b55546a63128d6feba ”) with a zero balance of MATIC.

Step 3: Funding our Polygon Testnet account

In order to do anything on the Blockchain, we’ll need to pay for it using a token called MATIC.As this is a test network you can’t “purchase” MATIC like you would in the main network.

In the Blockchain world there is an important service called a Faucet.

You are able to request test funds to work with.There are many online, but it’s difficult to find one that works 😉

I just searched for “polygon mumbai faucet” in Google and found this one: https://faucet.polygon.technology

Screenshot by Author I pasted in my address in the, “ Wallet Address ” and clicked “ Submit ”, and then “ Confirm ”.

A couple of minutes later my account was credited with 0.2 MATIC.

Screenshot by Author Please note that a Faucet is not an unlimited resource.On this occasion the Faucet had MATIC to send, but it’s quite possible a Faucet may not have enough MATIC.

If this happens just keep searching online to find yourself one that works.

Step 4: Create an ERC-20 token (E.g.crypto currency) (optional)

Depending on what you would like to do in your DAPP, it’s possible you may want to work with ERC-20 tokens.There is a really easy way to create yourself your own ERC-20 token (or crypto currency).

I recommend you create one for the fun of it, but also I will cover how to interact with it using Svelte and Web3/Ethers in subsequent articles.

Go to this address:

https://www.smartcontracts.tools/token-generator/create/polygon/?tokenType=SimpleERC20

Screenshot by Author I created my SimpleERC20 token like this:

Token Name: Michael Whittle Token Symbol: WHITTLE Initial Supply: 21 Network: Mumbai Testnet Check that you have read the T’s and C’s Click “ Next ” This will open up your MetaMask client (which should be connected to Polygon Mumbai) and execute the transaction.

It will ask you about “ Billing Information ”.As we are on the Testnet you can click “ skip ”.

Screenshot by Author Click “ CREATE TOKEN ”.

This will open your MetaMask again to submit the transaction to deploy it.

Screenshot by Author What I like here is that you can add your ERC-20 token directly to your MetaMask with the link above.

Screenshot by Author My MetaMask looks like this now.

I have 0.3984 MATIC, which was 0.4 MATIC minus the transaction fees.

I also have the 21 WHITTLE token now.

You can view the transaction on PolygonScan .

Polygon Transaction Hash (Txhash) Details | PolygonScan This is a Polygon PoS Testnet transaction only ] 0x8805dbe9d6cc48742aa18fab0b20246d84d72d176110ceda8cb294a5993d2dd4 5… mumbai.polygonscan.com

Screenshot by Author I clicked on the link to my ERC-20 token at the end of the “ Tokens Transferred ” line.

Michael Whittle (WHITTLE) Token Tracker | PolygonScan Michael Whittle (WHITTLE) Token Tracker on PolygonScan shows the price of the Token $0.00, total supply 21,000,000… mumbai.polygonscan.com

Screenshot by Author This article covers the preparation to creating and working with your DAPP using Svelte and Web3/Ethers.With the initial setup done, the next article will focus on Svelte and Web3/Ethers and how to drive MetaMask through your DAPP.

I hope you found this article interesting and useful.

If you would like to be kept informed, please don’t forget to follow me and sign up to my email notifications .

Part 2 of this article is ready…

Developing DAPPs with Svelte and Web3/Ethers, using Polygon MATIC — Part 2 How to get started with Polygon’s Mumbai Testnet medium.com

Michael Whittle If you enjoyed this, please follow me on Medium For more interesting articles, please follow my publication Interested in collaborating? Let’s connect on LinkedIn Support me and other Medium writers by signing up here Please don’t forget to clap for the article 🙂 ← Thank you!.

Leave a Reply

Next Post

Crypto meltdown and basic economics

I have limited sympathy for those who lost their shirt or pride in the cryptocurrency meltdown.Crypto is nothing more than the 21st century’s version of Amway.They just substituted block chains for circles.Other than that, it’s the same old schtick. It is a curiosity to me that people who have never taken a class in economics…
Crypto meltdown and basic economics

Subscribe US Now