Now, let's create a simple wallet app in react.js to manage tokens. The wallet will have the following functionalities:
- It will allow the user to send ERC20 and ERC721 tokens.
- It can mint new tokens if the address owner is the contract owner for the token. Minting issues new ERC20 or ERC721 tokens and credits them to any Ethereum account on the network.
- It will approve an Ethereum account to spend the tokens on the user's behalf. Certain use cases and workflows might require the user account to approve or authorize an external party to debit their account and transfer tokens. The approve functionality allows us to achieve the same.
I am assuming that you will have a basic understanding of the React framework for this project. I'll be focusing on the sections where our app interacts with the token contracts. You can download the source code for the entire app from our GitHub repository at this link: https://github.com/PacktPublishing/Blockchain-Development-for-Finance-Projects/tree/master/Chapter%202/Chapter%202/tokenwallet.
We need to set up a MetaMask account before we can create our wallet frontend. To do so, follow these steps:
- Start by installing MetaMask into your browser. It's available as a plugin for Chrome and Firefox. Create or import your wallet using the seed words.
- Open the MetaMask wallet by clicking on the icon on the right-hand side. On the top right hand side of your Chrome or Firefox browser for test account. From the drop-down menu for the network tab in MetaMask, select the network as Localhost 8545.
- Open the Ganache blockchain interface. Copy the secret key for an account. To do so, click the key icon next to the first Ethereum test account available in Ganache. Copy the secret key from the popup that appears.
- Navigate back to your MetaMask wallet. Import the Ethereum account into MetaMask as an account. To do so, click on the account icon on the top right-hand side in your MetaMask wallet. Click on Import Account. Select and paste the private key and click on Import. Your Ganache address should now be available as an account on MetaMask.
We are now good to start working on the wallet.