Integrating Smart Contract with Web App

December 17, 2018 Original post View as markdown

In this section, we would create a front-end web application that

would execute our smart contract. As mentioned earlier, the DApp comprises of a

frontend and a blackened code. We implemented the backend code for our

crowdsourcing application using smart contract. Now, to interact with the smart

contract and the blockchain network using a frontend application, we have a

wide range of options. You can develop using the Web3.js JavaScript library or

install a framework like Truffle that provides a development and testing

environment for building DApp.

For our use case, we would use the Web3.js library to interact with

our smart contract. We will execute the

same steps we carried out in Use Case 2, but this time, we would call the Stop

Fund Raising method of the contract through the user interface and check the

status of the project once the block has been committed to our local blockchain

network.

To get started, carry out steps 1 -5 as listed in Use Case 2 as a

prerequisite. Next, navigate to ethereum/web folder of the downloaded source

code location and open the home.html in any editor. Let’s look at some of the

important code snippets.

In home.html, we first add

web3.js library.

Next, we specify the public address of the contract. Replace the below

address with the address of the contract you created for this use case. (Tip:

Click on the newly created contract address in Ethereum Wallet and select copy address on the contract page)

var contract_address =

“0x0EfBae3f8e3bc34b4A77E07c75dFd9f9A32f6bA2”;

Next, we will initialize a variable with the contract details in JSON format. To get these details, click the Show Interface icon, as shown below, on the contract page and you will the relevant contract information in JSON format.

We have defined the contract_abi variable and initialized it with the

above contract details.

var contract_abi = [ { “constant”: true,

“inputs”: [], “name”: “fundingproject”,

“outputs”: [ { “name”: “name”, “type”:

“string”, “value”: “g” }, { “name”:

“email”, ….. “payable”: false, “type”:

“constructor” } ]

Next, we create the Web3 instance by providing the endpoint

address of our running Ethereum

instance.

web3 = new Web3(new

Web3.providers.HttpProvider(“http://127.0.0.1:8545”));

Next, we create the instance of contract by providing the contract

details as part of contract_abi variable

and address of the contract.

var contract_instance =

web3.eth.contract(contract_abi).at(contract_address);

In our HTML page, we have added a button named Stop Fund Raising, once clicked will invoke the getStatus() method. The getStatus() method calls the stopFundRaising() method on the contract

instance. To execute the operations on the contract, we also provide the

account (the Main Account for this example), which would pay the transaction

fee to execute this transaction on the blockchain network. While running this,

replace the ‘passw0rd’ value in the unlockAccount method below, with the

password of your Main account.

The following shows the getStatus() method.

function getStatus() {

//Unlock main Ether Base account and replace password with your account password
//This is a demo setup only, get this value through secured login credentials in actual environment
            web3.personal.unlockAccount(web3.eth.accounts[0], 'passw0rd');
//Call the Stop Fund Raising method
            contract_instance.stopFundRaising({from: web3.eth.accounts[0]}, function(error, result) {
                if(error) {
                    console.error(error);
                } else {
                    var hash = result;
                    console.log("hash"+hash);
                    checkHashStatus(hash, updateStatusFromContract);
                }
            });
        }

Now, once the stopFundRaising method is executed, the transaction will be committed as a block in the blockchain network. As we are running this on the local network, it shouldn’t take more than a minute or so to execute. To track the transaction, we will store the returned hashed value of the submitted transaction. We then call the getTransactionReceipt() method passing the hash value as a parameter. The said method will be invoked recursively every one minute to check for the valid returned object. If the method returns a valid object, it implies the block is committed, and the transaction is complete. The following code snippet shows the checkHashStatus() which makes a call to the getTransactionReceipt() of the web3 API:

function checkHashStatus(hash, callback) {
web3.eth.getTransactionReceipt(hash, function(error, rcpt) {
                if(error) {
                    console.error(error);
                } else {
                    if(rcpt == null) {
                        setTimeout(function() {
//call iteratively till hash matches and block is mined
                            checkHashStatus(hash, callback);
                        }, 1000);
                    } else {
                        console.log(rcpt)
                        //call the function once block is committed
                        callback();
                    }
                }
            })
        }

We also print the response from the getTransactionReceipt() method on the

browser console, and you can verify the hash, block number, address (contract

address) and other details like gas used for this transaction.

{blockHash:

“0x739f8a73aa5e7ccca62be65d2f43be732c82ac02693d298ce2af64354be9ee1b”,

blockNumber: 39659, contractAddress: null, cumulativeGasUsed: 32083, from:

“0x6b8dc00c09dd3c240c0b964ccec6baf07ab038a5”, to:“0x290298bf15d9546850161e3046233801f2488523”…}

Once we receive the transaction receipt, we print the status of the

project on the html page as shown below. The status is fetched by invoking the getProjectStatus() method on the

contract instance. The method returns the status as ‘Funding Stopped’.

document.getElementById(“status”).innerText = contract_instance.getProjectStatus();

This completes one end-to-end transaction

of a web application invoking a smart contract.

Note - The above example uses ether

tokens for crowdfunding. As a next step, you can create your own digital token

for crowdfunding. You can extend the ECR20 Token Contract (https://theethereum.wiki/w/index.php/ERC20_Token_Standard) as the starting point to create

your own Initial Coin offering (ICO) and club it with the crowd funding

contract logic, which will use your

coins for fund raising. Investors/Participant would invest in your idea by

buying your tokens with a hope that their investment and value in tokens

multiplies based on the success of the funded project.

In the next article, we look at some of the challenges of Ethereum platform

blockchain