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.
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.
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.