Building a Blockchain Wallet for Fungible and Non-Fungible Assets

The blockchain wallet forms the most integral part of any enterprise blockchain application. It is the customer interface of the blockchain application. It can take many shapes and forms, depending on the use case being implemented. It could be a payment wallet, a digital identity card, a land title portfolio, or an assets portfolio.

This chapter focuses on creating blockchain wallets suited for financial applications. Our wallet will be managing assets that are issued on the blockchain. These assets will be issued using pre-defined smart contract standards. For this, we will look at the ERC20 and ERC721 smart contract standards. We will learn to write, migrate, and deploy our own smart contract codes using Truffle. We will also learn to create a token wallet frontend using ReactJS, and finally, we will run the...

Technical requirements

The code files of this chapter are available at the following link:

https://github.com/PacktPublishing/Blockchain-Development-for-Finance-Projects/tree/master/Chapter%202/Chapter%202

We'll be using the following to develop our project:

• Ganache Private Blockchain Server—https://trufflesuite.com/ganache/
• Trufflesuite—https://github.com/trufflesuite/truffle
• MetaMask plugin for Chrome/Firefox/Safari—https://metamask.io/

For installing Ganache on Ubuntu, you might need to change some settings. Click on the drop-down menu next to the Ganache directory name on the title bar. Select Preferences. Navigate to the Behavior tab. Under Executable Text Files, set the option to Ask what to do. Navigate back to the file downloaded from the Ganache download link. Right-click on the file and click on PROPERTIES. Select the Permissions tab. Select...

Understanding ERC20 and ERC721 smart contract standards

To understand ERC20 and ERC721 contract standards, first, let's look at the concept of fungibility. Fungibility is used to describe the property of an asset where individual units do not hold a special value and can be replaced with another unit of the asset. A good example of this a 10 dollar bill. If you have a 10 dollar bill and I have a 10 dollar bill, they both hold the same value, which is 10 dollars. The bill would not have a higher or lower value depending on who is the owner of the bill. The bills can replace each other very easily. Hence, a 10 dollar bill is a fungible asset. All currency is essentially fungible in nature.

Now, take the case of a different kind of asset. If both of us owned a 400-square foot apartment and yours was in New York City and mine in New Delhi, the monetary value of both the apartments...

Writing the smart contract code

For our project, we'll be creating one fungible and one non-fungible token. Our fungible token will be a payment token called MoolahCoin. Our non-fungible token will be an apartment ownership token called Condos. We'll also be creating a wallet that can hold both fungible and non-fungible tokens.

We will be using Truffle Suite and the Ganache blockchain for building and deploying our smart contracts. For writing our smart contract, we'll be using the OpenZeppelin Solidity library version 2.2. OpenZeppelin is a nifty resource that provides smart contract templates for developing DApps. It is a suite of tested and community-approved smart contracts that can be used as building blocks for production-grade blockchain applications.

The OpenZeppelin framework consists of reusable contract code for Ethereum and other Ethereum Virtual Machine...

Migrating the smart contract code using Truffle

To work with our contracts, we first need to migrate these contracts to our test blockchain. Migrations carry out the following tasks:

• They deploy the compiled contract code to the blockchain.
• They establish interlinking between dependent contracts.
• They initialize the initial values through the constructor.
• Lastly, and most importantly, they manage the different versions of the contracts deployed. In the traditional model, every time a contract is deployed, a new Ethereum address is generated that then needs to be updated to the code of the blockchain application. Truffle allows us to abstract this concept and invoke the contract directly through a contract object instead of the address.

To deploy the smart contracts, first bring your Ganache blockchain online. Make sure your Ganache test server is running on localhost:8545....

Creating the token wallet frontend using ReactJS

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...

Running our app

Let's bring our wallet online and run the application to see how it works. Make sure your Ganache blockchain is running and the contracts are deployed. Let's run our React development server:

1. Run the following command in the project directory:

npm start 

By default, the app should run on port 3000.

2. To access the app, enter localhost:3000 in your browser. The app should open up in the browser, as shown in the following screenshot:

3. You need to sign in with your MetaMask credentials so the app can access your primary account. After signing in, you should get another popup, as shown in the following screenshot. You need to permit the app access to MetaMask:

On granting access, MetaMask returns an array of accounts to the app including your primary account in the 0^th location. Hence, the app should now be rendered with your primary Ethereum account...

Connecting to the main Ethereum network

In this section, we'll see how our wallet can be connected to the main Ethereum network and used for storing, transferring, and managing fungible and non-fungible assets on the Ethereum network:

1. To deploy the wallet and contracts in production, you need to have a geth instance running on the main Ethereum network. Geth is a popular Ethereum client used to run an Ethereum node and connect to the main network. Update the truffle-config.js file to point to the production geth instance as shown in the following. The network ID is set to 1 for the main network:

const HDWalletProvider = require('truffle-hdwallet-provider');
    
module.exports = {
networks: {
development: {
host: "127.0.0.1",     
port: 8545,            
network_id: "*",       
}
prod: {
host: "<Live geth host IP>",     
port: 8545,  ...

Summary

So, we come to the end of our second chapter. If this is your first time building a blockchain application, this chapter should have helped you to identify the different components of a blockchain application. If you are new to creating and issuing tokens on blockchains, this should have helped you to grasp the concept and give you some ideas on how you can implement them as part of your projects.

We started this chapter by looking at the concept of fungible and non-fungible tokens and the business cases you can implement using these tokens. We also looked at the smart contract standards for these tokens and how they can be implemented using Solidity and OpenZeppelin. We created a mintable fungible token called MoolahCoin and a non-fungible token called Condos using these resources. Finally, we built a wallet app to manage the tokens we issued on the blockchain using ReactJS...