This tutorial will learn how to create a Peer-to-Peer payment dApp and deploy our smart contract on Polygon Network. We will first create an ERC20 token smart contract and use this token in our payment dApp to send to other addresses.
This is part one of a two-part tutorial. In this part, we will learn how to send payments using a single token. The second part will cover how to add other tokens to our payment dApp.
This is what the dApp we will be creating looks like:
To successfully follow this tutorial, you will need fundamental knowledge and understanding of Blockchain technology, Solidity programming language, and ERC20 tokens.
We will be using web3.js to connect to Polygon and the Next.js framework for the frontend. It's recommended to learn the basics of Next.js before continuing.
Truffle - Truffle provides a local development environment for creating and testing blockchain applications. Metamask - You will need Metamask wallet installed in your browser. NodeJs - You must have a recent version of Node.js installed. We recommend using v14.17.6 LTS. Figment DataHub account - We will be using DataHub's Polygon RPC URL to deploy the smart contract.
Topics covered in this tutorial:
- Setting up development for Solidity and NextJs.
- Creating an ERC20 token smart contract.
- Deploying the smart contract to Polygon Testnet.
- Linking smart contract to frontend using web3js
- Creating UI using TailwindCSS.
Run the following commands in the terminal to install required packages and create project directories.
npx create-next-appwill create a basic Next.js project with typescript support, and
truffle initwill scaffold a Truffle project.
The code libraries
web3will be used to create, deploy and integrate our smart contract.
dotenvis for dealing with environment variables, and
tailwindcssis used for UI styling.
Create a new file called
contractsdirectory and add the following code:
We create a new ERC20 token using the OpenZeppelin ERC20 contract called Payment Token. This is the token we will use to make payments in our peer-to-peer payment dApp.
In the constructor of our contract, we are minting and sending 100,000 PAY tokens to the contract's owner, the account deploying the contract.
PaymentTokenis an ERC20 token and we are using OpenZeppelin's ERC20 contract, we have a few ready-made functions like
allowance, etc. We will be looking into the
transferfunction in our dApp, and come back to this when we start our frontend.
Now that we have our ERC20 token ready, we have to make few changes to compile and deploy our token.
Go to the
migrationsdirectory, create a new file
2_payment_token_migration.jsand add the following code:
Before running the deployment command, we need to get a Polygon RPC URL and API key from DataHub. Create an account on DataHub, head over to the Polygon section, and copy your API key.
.envfile in the root directory of your project (
/payment-dapp/) and paste the key after the name of the environment variable as shown below:
Now we need to get the Secret Recovery Phrase (mnemonic) of the account we will be using to deploy the smart contract. Go to your Metamask extension and get your account's mnemonic; if you don't know how to get your mnemonic, follow this tutorial.
Once you have your mnemonic, create a file called
.secretin the project root directory (
/payment-dapp/.secret) and paste your mnemonic there. Make sure you add
.gitignorefile so that your mnemonic is not added into your
githistory or uploaded to GitHub by accident.
To deploy our contract to Polygon testnet, we need to have some MATIC tokens in our account to pay for gas fees. To get some testnet MATIC tokens, go to the Polygon Faucet to get 0.1 MATIC in your account, which is more than enough to deploy the contract as gas fees are very cheap on the Polygon network.
truffle-config.js, delete the existing content and then add the following code:
mnemonicto use our funded testnet account and pay for gas fees. Truffle's wallet provider allows us to use the same account that we have in our Metamask using either a private key or mnemonic.
Next, we are creating a provider with RPC URL, chain ID, and Truffle provider. Chain ID and other information relevant to the Polygon network can be found here.
To compile and deploy the smart contract run the following command,
Now that we are done with the smart contract and have created our token, it's time to develop the frontend and integrate our contract using web3js.
We will create a context for the contract calls and provide all the data and functions through it. Create a file called
Here we create an interface for our context and an
useDatafunction to easily use context in our components.
useProviderDatawe are creating two functions -
loadWallet, we are fetching all the accounts present in our web3 provider (Metamask in our case). Create an instance of the
PaymentTokencontract instance using the ABI from the
abisdirectory. Then we will fetch the balance of the logged-in account using the
balanceOffunction available in ERC20 tokens.
sendPayment, we accept the amount to tokens and the receiver address as a parameter and convert the amount into Wei. Get the user's current balance and check if the balance is greater than the amount requested to transfer. If the balance is greater than the amount requested, we call the
transferfunction on our smart contract instance and pass in receiver address and amount in Wei. Since this is a transaction, we need to call the
sendfunction on the
transfercall and pass in the
fromparameter to pay the gas fees for the transaction.
First, we will create the Navbar, which will contain a button to connect to the Metamask wallet and show the current address from Metamask. Create a file called
Here, we check to see if we have an account address, then show the address; otherwise, we offer the connect button to connect Metamask.
To create the main UI, open
pages/index.tsxand add the following code.
Here we are creating two text fields and a button. One text field accepts the number of tokens to transfer, and the other text field accepts the receiver's address. We also show the current balance of the account above the text field and a button to select the max amount of tokens available in the wallet.
When the user clicks on the Send button, we call the
sendPaymentfunction from our context, which will send the token to the receiver's address and update the new balance of the current account in the UI.
We are finished with the UI now, and this is how the payment gateway should look:
Congratulations on finishing the tutorial! Thank you for taking the time to complete it. In this tutorial, we learned how to create an ERC20 token, deploy it to Polygon testnet and make a frontend dApp for payment gateway. In the next part of this tutorial, we will see how to extend the capabilities of this dApp and add more already existing tokens on the Polygon network to our payment dApp.
I'm Viral Sangani, a tech enthusiast working on blockchain projects & love the Web3 community. Feel free to connect with me on GitHub.