In January 2022, I did a 30-day project on “Why Your Business Needs to Adapt to Blockchain”. This post is a part of it. To know what I covered, learned, and executed in the project, visit this page.

I am almost into the last leg of this series of posts. I started with creating a Greeter dApp and deployed it on my local blockchain. Then, I created a token of my own that I traded through Metamask. In this post, I will show you how I exchanged the token through my web front-end.

Exchanging the Token Through Node.js

Once I checked that I could send the token through Metamask, I wanted to create this facility at the web front-end.

To do that, I needed to edit the App.js file. So, I opened it in the editor using vi src/App.js

First of all, I had to import the Token into the Javascript file. To do that, I added import Token from ‘./artifacts/contracts/Token.sol/Token.json’ to App.js.

Next, I added the address of the token underneath the greeter’s address.

Under the App function, I added two lines for the User Account and the Amount respectively.

I also added two functions – getBalance and sendCoins

The getBalance and sendCoins functions are the same as that for Greeter. 

And finally, I added two buttons for the getBalance and sendCoins functions respectively. I’ll also have the Account IDs and the Amount displayed.

After adding the lines, I started the server using npm start and got this:

It has the two new buttons and the two text boxes as added.

Upon clicking on Get Balance, I got 10 the first time when recly-test02 was selected. I got 990 when I selected hh-test01 and clicked on Get Balance.

Next, I wanted to send 20 KB01 tokens from the hh-test01 account to the recly-test02. I copied the address of the recly-test02 and pasted it on Account ID while the hh-test01 account was selected. Next, I entered 20 in Amount and clicked on Send Coins. Metamask popped up.

I clicked on Confirm and 20 KB01s were transferred from hh-test01 to recly-test02 after consuming some Ethers as gas fees. Now when I clicked on Get Balance, it showed 970.

Thus, I created my own token, transferred it using the Metamask wallet first, and then using the Javascript-based web platform.

The last goal was to deploy the application on the global Ropsten Testnet to make it truly decentralized. In the next post, I show how I deployed the application on the Ropsten Testnet.