How can we connect our smart contract to a UI

#blockchain #javascript #webdev #beginners

This article is a part of a series called Corporate Governance on Blockchain.

Read this to learn how blockchain could change corporate governance for the better. Here, you will also find how to set up your project to follow this article series.

In Part 1 of the series outlines the potential applications of blockchain in corporate governance and walks through how to set up your project to follow this series. Part 2 outlines the entire business logic of the shareholder voting smart contract and includes best practices for smart contract development.

In this article, we will learn how to wire up a UI to the smart contract created in part 2 of this series.

Step 1: Expose all smart contract functions as a library

On exposing smart contract functions as a library, it becomes very easy to manage the arguments (parameters) and results. This is one of the key steps in connecting the blockchain with our UI.

DappStarter has already generated dapp-lib.js for this purpose. You can find it using:

packages
  - dapplib
    - src
      - lib
        -> dapp-lib.js

In this file, you can see that all functions that are available in the contracts.

Let's create our very own function within dapp-lib.js. You can write them anywhere in the file. I will write them under Examples section.

	static async getCandidates() {

	//Result object will contain the list of our candidates
	let result = await Blockchain.get({
	config: DappLib.getConfig(),
	contract: DappLib.DAPP_CONTRACT,
	params: {
	}
	},
	'getCandidates', // Make sure this matches the function name in Dapp.sol
	);

	let results = [];
	//Fetch names from the Result object
	let names = result.callData[0];
	//Fetch vote counts from the Result object
	let voteCounts = result.callData[1];
	//Let's merge names and voteCounts together so that our final result looks something like this:
	/*
	{
	name: "Kitty"
	voteCount: 0
	},
	{
	name: "Doggo"
	voteCount: 0
	}
	*/
	names.forEach((name, index) => {
	results.push({
	name: name,
	voteCount: voteCounts[index],
	})
	});
	return results;
	}

view raw dapp-lib.js hosted with ❤ by GitHub

Dapp-lib.js abstracts all the complex communication with the blockchain. So you, as a developer, don’t need to set up Web3 library for your project from scratch. All the code responsible for managing blockchain (inputs and outputs) can be found in blockchain.js. DappStarter is designed in a way that you wouldn’t really need to tweak blockchain.js. Dapp-Lib.js does that for you.

It's as simple as that.

Let’s test out the getCandidates() function we just created in Dapp-lib.js. To do so, let’s call getCandidates() function from constructor() function in dapp-page.js and print the result.

	constructor (args) {
	...
	let result = DappLib.getCandidates();
	console.log(result);
	...
	}

view raw dapp-page.js hosted with ❤ by GitHub

This returns a resolved promise. This promise contains all the required data-- name and voteCount.

This verifies that our function getCandidates is working properly.

Step 2: Get icons for candidates

Thanks to Alfrey Davilla for creating such cute icons. :)

Our two candidates are Ms. Kitty and Mr. Doggo :

You can download the picture of the cat from here.
You can download the picture of the dog from here.

As a good practice you should save static assets in:

packages
  - client
    - src
      - dapp
        - assets
          - img
            -> kitty.png
            -> doggo.png

Step 3: Import icons

Now let's import these images in dapp-page.js. You can find dapp-page.js in:

packages
  - client
    - src
      - dapp
        - pages
          -> dapp-page.js

In the beginning of the file, you can add the code:

	import kitty from "../assets/img/kitty.png";
	import doggo from "../assets/img/doggo.png";

view raw dapp-page.js hosted with ❤ by GitHub

Step 4: Set up CSS structure to make a placeholder for candidates

DappStarter uses Tailwind CSS. You can even add your own components in dapp-page.js under render() function.

	<div class="flex flex-wrap mb-4">
	<div class="w-full sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2 mb-4">
	<div class="max-w-sm rounded overflow-hidden shadow-lg m-4 h-full">
	<img class="w-full" src="${kitty}" alt="Miss Kitty"> // Use Kitty icon here
	<div class="px-6 py-4">
	<div class="font-bold text-xl mb-2">Miss Kitty </div>
	<p class="text-gray-700 text-base h-20">
	Choose me as your next board member. Purr.
	</p>
	</div>
	</div>
	</div>

	<div class="w-full sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2 mb-4">
	<div class="max-w-sm rounded overflow-hidden shadow-lg m-4 h-full">
	<img class="w-full" src="${doggo}" alt="Mr Doggo"> // Use Doggo icon here
	<div class="px-6 py-4">
	<div class="font-bold text-xl mb-2">Mr Doggo </div>
	<p class="text-gray-700 text-base h-20">
	If you choose me, we'll be ruff!
	</p>
	</div>
	</div>
	</div>
	</div>
	</div>

view raw dapp-page.js hosted with ❤ by GitHub

Your dapp should look like this now-

In this article, we’ve learned how to expose our functions as a library in dapp-lib.js to communicate with the blockchain. We also learned how to read data from the blockchain and how the basic UI works in DappStarter.

Our dapp is coming together well now. In the next article, we will add voting logic so shareholders can cast their vote to be written to the blockchain. We will also explore how DappStarter manages UI in more depth.