Press "Enter" to skip to content

Developing Blockchain App – #2 Interact with UI

Tahmini okuma süresi: 15 dakika

In previous article, we prepared our contract and wrote our test codes. In this article, we will access the contract from the UI and call the functions defined in the contract. If you haven’t read the previous article, you can go to the link below.

Compiling and Publishing the Contract to the Network

First, we need to publish the contract on the blockchain network. In this article, we will continue to use the local blockchain network Ganache. When we run the following command, deployment will be made to Ganache according to the network definition in the truffle-config.js file. We made this definition in our previous article.

truffle migrate --reset

After the contracts are compiled, they are sent to the blockchain network in bytecode. Therefore, we need an interface to communicate with contracts. This interface is called ABI. When the contract is compiled, json output is produced. This json output contains ABI. When we run the above code, we can see this json under the build/contracts folder. Apart from the interface, we will also need the address of our contract on the blockchain network. We can see the address of the contract deployed in the console. Let’s take a note of this.

Installing MetaMask and Connecting with Ganache

While writing a test in previous article, we saw that Ganache provided us with 10 accounts with 100ETH balance. We were calling and testing contract functions using these accounts. Now, we will develop an UI application, we need a wallet that we can use on the browser. This wallet is called MetaMask. Besides being a wallet, MetaMask allows us to communicate with the blockchain network. It signs our transactions and sends them to the network. You can install it on your browser as an extension from the link below.

After installing, you will need to create an account. Since MetaMask is connected to Ethereum networks and we will run our tests over Ganache, we need to connect MetaMask to Ganache. We go to Custom RPC from the Networks section and fill in the information as follows. By the way, Ganache must be running.

Now we need to transfer some of our Ganache accounts to MetaMask. Click on the key icon to the right of the accounts and copy the Private Key.

In MetaMask, go to Import Account from My Accounts section and paste this key.

According to our contract, the first account was the owner of the contract. We definitely import this on. Apart from this, let’s import another one so that we can do the authorization tests.

Connecting with MetaMask and Preparing Web3.JS

Now we can write our codes in the UI application. I have created an application with VueJS. You can access the final version of the project on Github. Since our purpose isn’t to learn VueJS, I will only try to share and explain the sections related to blockchain.

In order to connect with MetaMask, we need to install the MetaMask package.

We need web3.js so that we can make RPC calls to a network on Ethereum with Javascript. That’s why we see that this package has been installed in the 3rd line.

In the 9th line, we check if MetaMask is installed. When the active account is changed in MetaMask, we listen for the “accountsChanged” event in 13th line to get the address of the new account.

In 18th line, we send a connection request to MetaMask. When this request is made, MetaMask will open and ask if we can grant access to the site. It will also ask for which accounts to allow.

We store the address of the first account allowed in the 20th line. In the 30th line, we give MetaMask as provider to web3.js. This way MetaMask will sign all our transactions and send them to the network.

Preparing the Contract

Now we create an instance of our contract by giving our contract information to web3.js.

In the 6th line, we give the ABI and in the 7th line, we give the address of the contract. If you remember, we published events such as OrderPaid, OrderDelivered from the contract. Here you can listen to all events by subscribing in 10th line. You can also subscribe to individual events.

Querying the Balance of the Contract

First, let’s query about the balance of the contract.

In the 49th line, we specify the address of the contract as a parameter and query the balance of the contract from web3.js. Since getBalance isn’t a contract-specific function, we query it via web3.js. In the 52th line, we converted the balance to ETH. I mentioned it in the previous article. Transactions are made with the smallest unit WEI.

Adding an Order

In the 45th line, we convert the price of the order from ETH to WEI. In the 46th line, we convert the delivery date to the uint data type in the contract. We convert timestamp in JS by dividing 1000 for solidity. We pass the address of the active account in MetaMask as a parameter to the send method.

Getting Payment

We pass the payment amount of the order as a parameter to the send method.

Delivery of the Order

Making a Refund

Querying the Order

We get the status of our order by calling the call function in the 122th line. With the parseDate method, we multiply the timestamp in solidity by 1000.

We learned how to interact with the UI. In the next post we will send the contract to Rinkeby, one of Ethereum’s testnets. We will also see how queries are made on the contract with the API.

You can access the sample application on Github.

Good luck.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *