Consult Match — An Ethereum dApp

Let's take a look at a concrete dApp to see how smart contracts on the Ethereum blockchain can be used in practice.

Consult Match is a platform for connecting employers and consultants. It consists of the following on-chain operations (mutations):

1. The ability for employers to publish jobs
2. The ability for employers to mark jobs as done
3. The ability for consultants to publish their profile
4. The ability for consultants to delete their profile

All the information can also be read back from the Ethereum blockchain. For instance, consultants can browse jobs and employers can browse consultant profiles.

GitHub Repo
dApp usable on the Ropsten test network

Technologies

For the frontend we use React, Redux, Material-UI, and Typescript. We are not going to go into these technologies here as there already exists a lot of good tutorials online, we are mainly interested in the smart contract and decentralized storage integration here.

Truffle is used for deployment of contracts and generation of application binary interfaces (ABI). The ABIs are used for interacting with the contracts from JavaScript/TypeScript once they are deployed. The ABIs encapsulate information in JSON format about what functions are available on a contract and what parameters that are expected.

[Truffle is ] A world class development environment, testing framework and asset pipeline for blockchains using the Ethereum Virtual Machine (EVM), aiming to make life as a developer easier. — https://truffleframework.com

Swarm is used for storing the information related to a job or a consultant profile.

Swarm is a distributed storage platform and content distribution service… — https://swarm-gateways.net/bzz:/theswarm.eth

Web3 is used for interacting with the Ethereum blockchain from the browser. Web3 is basically an Ethereum JavaScript API.

How to build it and run it locally

This is optional — you can also check out the dApp here, live on the Ropesten testnet.

Clone the repo:

git clone git@github.com:Hallingdata/consult-match.git

Install dependencies:

npm install

Run development blockchain and deploy contracts:

$ npm run eth-dev

Then in the console opened by the command above, deploy the contracts with the deploy keyword.

In a separate terminal instance, run the web-app (must be done after the contracts are deployed):

$ npm run app-start

Then go to http://localhost:3000/ in your browser to interact with the dApp. This requires Meta Mask or another dApp browser.

How it all ties together

To show how this all fits together we are going through the process of posting a new job (the posting of consultant profiles works very similarly). This shows how we can interact with Swarm and the Ethereum blockchain.

Front-end

First, we use thetruffle-contractlibrary to get access to the deployed instance of the contract using the contracts ABI.

When a job is posted, the data is published to Swarm. Swarm will then return the hash-link to the published content. The hash-link is then stored in the jobs-contract in Ethereum.

Pseudocode for the process:

import * as truffleContract from "truffle-contract"
import * as Swarm from "../../integrations/swarm"
import * as jobsABI from "./interfaces/Jobs.json"
const contractLoader = truffleContract(jobsABI)
const jobsContractInstance = await contractLoader.deployed()
function addJob(jobJson) {
  const jobSwarmHash = await Swarm.publish(jobJson)
  await jobsContractInstance.addJob(jobSwarmHash)
}

For the actual code where this happens check src/contracts/Jobs.ts and src/state/actions/jobs.ts.

Smart Contract

The jobs-contract:

jobs.sol contract

Here we can see the addJob function which we called from the front-end. The function works like this:

1. Adds the _hash (the Swarm hash-link) to the jobs array (line 17).
2. Saves the message sender as the job owner (line 20 and 23 with indexing both from owner to job and from job to owner).
3. Increases the numberOfJobsvariable by one.

When we later want to read the data back from the contracts, we call the getJob function which returns (amongst other things) the job’s Swarm hash-link. The job’s Swarm hash-link can then be used to get the actual job content from Swarm.

Pseudocode for the process:

import * as truffleContract from "truffle-contract"
import * as Swarm from "../../integrations/swarm"
import * as jobsABI from "./interfaces/Jobs.json"
const contractLoader = truffleContract(jobsABI)
const jobsContractInstance = await contractLoader.deployed()
function getJob(index) {
  const { jobSwarmHash } = await jobsContractInstance.getJob(index)
  const jobJsonContent = await Swarm.getContent(jobSwarmHash)
  return jobJsonContent
}

For the actual code where this happens, check src/contracts/Jobs.ts and src/state/actions/jobs.ts.

Now we have gone through one example of writing to the blockchain and Swarm, and one example for reading from the blockchain and Swarm.

For the full example application with all the implementation details and even more examples, check out the repo here: https://github.com/Hallingdata/consult-match. And if you have not done so already try out the dApp here, live on the Ropesten testnet.

If you find something that can be optimized or any errors, please leave us a comment below.

At Hallingdata we are super excited about blockchain and all the possibilities enabled by it.

Feel free to contact us in regards to your project.

www.hallingdata.no