Ethereum: Land Marketplace Dapp Tutorial — Part 2— Integrate With a Web App

Adeyemi Toluhi

Published in

Coinmonks

5 min readAug 1, 2018

GitHub repo

In the section we will invoke the smart contract we developed in part 1 of this tutorial from a web app.

Checkout the web app code from this GitHub repo. You need npm installed on your machine. You can find details on how to install npm/node here.

Install Dependencies

Launch a terminal or command prompt, navigate to the directory where you downloaded or checked the code out to and run npm install .

One of the first things you will probably noticed is the fact that the website is a react/redux based app. Do not worry if you are not familiar with them. We will only focus on the smart contract integration and hopefully, it will be obvious what you need to do to implement something similar with a different library/framework.

Open Web Socket API

The next thing we need to do is, stop the geth console if you still have it running and restart it with the command below.

geth —datadir ./datadir_new —networkid 2018 —port 30306 —nodiscover —rpc —rpcapi “db,personal,eth,net,web3,debug” —rpccorsdomain=”*” —rpcaddr=”localhost” —rpcport 8545 --ws --wsapi "db,personal,eth,net,web3,debug" --wsorigins="*"  --wsaddr="localhost" --wsport 8546 console

The difference between this command and the previous one is that this also exposes the geth api via web socket (port 8546).

Copy ABI From Remix

Follow the steps below to copy over the ABI from remix to src\contracts\landContract.json.

Open remix
Go to the compile tab

Click on Details, Scroll down on the modal view that appears and click the copy icon beside ABI. That will copy the ABI to the clipboard.

Paste the ABI into the src\contracts\landContract.json file.

So, what is this ABI and why do we need it? The ABI enables you encode calls to your smart contract and read/decode data from transactions.

If you haven’t made any custom changes then you ABI should be identical to the content of the landContract.json below.

Connect

In this section, we will be modifying src\action\index.js . There are placeholders for the relevant sections we need to modify, we will be working through those.

There are two key modules we import in this file, the first is web3 and the second is the ABI file we updates earlier.

The first thing we need to update is the web socket address of the blockchain.

Since we are connecting to a blockchain that is running locally and if you remember, we set the wsport to 8546, set the provider to ws://localhost:8546 .

To use this site, users have to login with their address and password. For that we will use the personal library. Modify the login function to look like this.

It would be a bad really user experience if the only way new users could use this website was by creating an account on the geth console. Again, using the personal library, we expose the account creation functionality. Update the signup function to this.

The next function changeContractAddress allows users of this site to change the instance (address) of the contract they are interacting with. There are 2 main things this function should do when it has succcessfully loaded a contract. First, load the list of plots and their status so it can update the UI and subscribe to events so it can respond to changes as they occur. This is also where the ABI is needed. Update the function to this.

The last three unimplemented functions are buyPlot, sellPlot and takeOffMarket, hopefully it is obvious what these functions should do. Replace the 3 functions with these.

To call functions or listen to event on a contract, we use the contract instance created in the changeContractAddress function.

Open a command prompt/terminal and navigate to your checkout folder. Then run npm start. Once it starts up, go to localhost:8080 from any browser on your computer and you should see the landing screen below.

Let’s try the Login feature.

From remix copy the address of an account that has ether by selecting the account and clicking the copy button beside the dropdown.

Account With Ether

Click Login and enter the address and password in the modal popup that appears. Then click Login

That should present you with a screen to enter the contract address. You can get the contract address from remix by clicking the copy button beside the deployed contract.

Paste the address and press enter

That should present you with the available plots.

Start the miner on your geth console miner.start(1) and click the buy button. Once your buy request has been mined. You will notice the buy button change to sell. You can also verify the status of the plot from remix.

Sell the plot clicking the sell button. Enter an asking price of say 12000 wei and you will notice that after your sell transaction is mined the UI will update and option on the plot you currently own will change to Take Plot Off the Market.

To make things interesting, open the localhost:8080 on a different tab and try to sign up, that should create a new account. Once the account has been created, transfer some ether from your coinbase account to the new account ( see this tutorial if you have forgotten how to.) then try to buy and sell plots between the accounts.

Hope you found this useful. Please leave any comments or feedback in the comments sections below.