Smart Contract Escrow DApp — Buyer View

This is the second of a 2-part article that explains the codes behind Smart Contract Explained by Demonstration. You may read part one here.

Photo by Clark Young on Unsplash

In this part, I will focus on the UI for the buyer. The StartEscrow smart contract used by the DApp can be found here and I have previously written an article about how it works here.

You may find the complete buyer’s source codes in my Github repository here. In the sections that follow, I will refer to the line numbers from my codes in Github.

Initializations

Here’s where I perform the initializations.

var currentContractAddress;
var Purchase;
    
$(document).ready( function () {
   $("#confirmpurchasediv").hide();
   $("#confirmdeliverdiv").hide();
} );

In lines 71 to 77, the currentContractAddress variable is declared to keep the address of my Contract. The Purchase variable will store the Purchase contract. I also hide the confirmpurchasediv and confirmdeliverdiv panels. Read lines 44-56 and 58-68 to understand what the panels do. These panels draw the user interfaces for the buyer to interact with the contract. They are initially hidden until the buyer loads the item that he wishes to purchase.

if (typeof web3 !== 'undefined') {
         web3 = new Web3(web3.currentProvider);
}…