How-To Create a React App to Interact with XRC20 and XRC721 Tokens
Creating a front-end for an XDC decentralized app and connecting it to XDC smart contracts.
In this tutorial, you will work with a few different tools to create a working decentralized App front-end from start to finish, leveraging React to bootstrap our front end. Web3Modal and web3.js will be used to create a touchpoint between our front-end and the XDC Network. You'll use the smart contract development environment of your choice: Truffle, Hardhat or Remix!
In this tutorial, you will learn how to interact with XDC Network smart contracts and tokens through a simple web front-end on the XDC Network mainnet and XDC Apothem testnet.
- Create a simple web front end
- Further instructions on how to deploy multiple smart contracts
- Interact with smart contracts
- Create Interfaces to use XRC20 tokens on a React App
- Create Interfaces to use XRC721 tokens on a React App
There are a few technical requirements before we start. Please install the following:
As you will be using XDCPay to interact with our first dApp on XDC Network, you can download XDCPay at:
This tutorial is full of important concepts and we wanted to make something both interesting and fun, with that in mind, we are happy to introduce
EGG GACHA
!
Egg Gacha!
EGG GACHA!
Gacha is a Japanese term for a small toy sold in a plastic capsule in a vending machine. And this is what we will make: A NFT vending machine where you can trade in an XRC20 token for a new XRC721 non-fungible token. We will create in the course of this tutorial:
- 1.An XRC20 Token called
EGT
(Egg Tokens); - 2.An XRC721 Token called
EGGS
; - 3.An
EGT Faucet
smart contract, so people can get moreEGT
and buy newEGGS
; - 4.An interface where users can interact with
EGT
,EGGS
and theEGT Faucet
Smart Contract;
It is not uncommon to see several smart contracts interacting in a real-world application to create a complete user experience - and that's what you'll be doing here. You will deploy three smart contracts that depend on one another to create our decentralized app experience.
If you have never deployed a Smart Contract on XDC Mainnet or Apothem Tesnet, please check the following tutorials before continuing (You can chose between using Truffle, Hardhat or Remix):