Enigma brings data privacy to smart contracts. The basic building blocks for this are secret contracts: smart contracts that execute on the decentralized network without revealing input data, ensuring data privacy. In light of our most recent Discovery release (which includes encrypted state, Rust-based secret contracts, and other new features), we are continuing with our three-part “getting started” series for developers, which covers:

a guide to Rust an introduction to Secret Contracts and setting up the Enigma developer environment building a front end for our Enigma-powered dApp

Part 3: Building a Front End for an Enigma-Powered dApp

In the two previous installments of this series, we discussed 1.) our motivation for using Rust as our language of choice for writing secret contracts and dove into developing a standalone Rust program that naively accomplishes Yao’s Millionaires’ Problem, and 2.) how to set up the Enigma Discovery Developer Testnet and write, deploy, and test our very first secret contract. If you are yet to go through those, or want to brush up on any of those materials, we highly recommend you do so before continuing here.

What follows is a walkthrough guide where we will build a front end for our Enigma-powered, decentralized, privacy-centric dApp to interact with our Yao’s Millionaires’ Problem secret contract.

💡Tip:

Want to see the repo implementing all the completed code from this 3-part guide? Save yourself some copy-paste and check it out.

Background

We will be building a simple React-based front end for the Millionaires’ Problem. For those of you unfamiliar with React, it is a JavaScript library for building user interfaces through a stateful component-driven approach and I highly recommend you check out a quick tutorial to get familiar with some basic concepts, such as state, props, components, JSX, etc. Furthermore, we will be utilizing Redux — a predictable state container for JS applications that can work with any framework, including…you guessed it — React!

The specific folder ( client ) we will be working in is based off of the official truffle-react box, so things will be very familiar for many of you. All of the code we will be writing for our front end will be located within the client (moreover, within client/src ) portion of our Discovery scaffolding, thus is cleanly separated from the work we have done up until this point. There are a several directories here by default that are worth briefly pointing out in particular:

utils — Contains helper functions to initialize a web3 instance and the enigma-js client library object. We will not touch this folder whatsoever.

— Contains helper functions to initialize a instance and the client library object. We will not touch this folder whatsoever. build — Symlinks to the build folder at the root level of our Discovery project. This is necessary since create-react-app-based projects only operate within the scope of client/src , thus in order for us to work with our compiled Ethereum smart contracts and Enigma secret contracts, we need to bring them within our current scope. We will not touch this folder whatsoever.

— Symlinks to the folder at the root level of our Discovery project. This is necessary since create-react-app-based projects only operate within the scope of , thus in order for us to work with our compiled Ethereum smart contracts and Enigma secret contracts, we need to bring them within our current scope. We will not touch this folder whatsoever. actions — Contains our application’s exported redux actions, which are payloads of information that send data from your application to your store. We will add a couple actions to the existing ones.

— Contains our application’s exported redux actions, which are payloads of information that send data from your application to your store. We will add a couple actions to the existing ones. reducers — Contains our application’s exported redux reducers, which specify how the application’s state changes in response to actions sent to the store. We will add a couple reducers to the existing ones.

— Contains our application’s exported redux reducers, which specify how the application’s state changes in response to actions sent to the store. We will add a couple reducers to the existing ones. components — Contains logically-separated UI components for our dApp. We will edit and add to this folder.

The scaffolding we have created is a fairly-opinionated one that sets ourselves up nicely for a Redux-driven state management environment. By no means is this required, but it is highly for those of you interested in developing front ends. You can certainly get by without such a framework, especially for a simpler app such as this one, but Redux has many positive architectural and performance implications. Once again, may be a tad overkill for this particular dApp, but it is good to start exploring some of these Redux concepts now before diving into a more complex dApp in the near future :). There are many wonderfully-helpful React/Redux materials out there to help you get started, both written and video tutorials alike.

There are four files we’ll be updating/adding: actions/index.js , reducers/index.js , components/App.js , components/MillionairesProblem.js . As a heads up, most of the code below is generic React/Redux code that doesn’t have to do with interfacing with the Enigma protocol and the secret contract we wrote last post; we have made special note of the portions that are especially unique.

Actions

actions/index.js

Redux actions will be dispatched in our app when we expect state to store/update in a certain way. When thinking about what we would like in state and what would trigger state changes in our React dApp, a few things come to mind right off the bat — enigma-js client library object, web3 accounts, our deployed Millionaires’ Problem secret contract address, the richest millionaire’s address upon computation, and any toast/snackbar alert messages. Thinking about things in this manner helps us devise actions that can achieve such state updates.

Copy and paste the following comment-annotated code.

Reducers

reducers/index.js

Redux reducers update and modify state based on the actions that have been dispatched. We can implement our reducers based on our assessment of what we would like in our application state in addition to the redux actions we have written above.

Copy and paste the following comment-annotated code.

App.js

components/App.js

This is essentially the root page, which will handle:

initialization of the state variable, enigma (enigma-js client library object), [lines 35–38] mentioned above.

(enigma-js client library object), [lines 35–38] mentioned above. initialization of the state variable, accounts ( web3 unlocked accounts we have at our disposal), [lines 39–42] mentioned above.

( unlocked accounts we have at our disposal), [lines 39–42] mentioned above. initialization of the state variable, deployedMillionairesProblem (address of our secret contract deployment), [lines 43–47] mentioned above. This dApp operates under the assumption that the Millionaires’ Problem secret contract was the last one we have deployed, thus can be retrieved using the Enigma contract’s getSecretContractAddresses view function.

(address of our secret contract deployment), [lines 43–47] mentioned above. This dApp operates under the assumption that the Millionaires’ Problem secret contract was the last one we have deployed, thus can be retrieved using the contract’s view function. the top-level rendering of our dApp

Copy and paste the following comment-annotated code.

MillionairesProblem.js

components/MillionairesProblem.js

This component drives the business logic for our Millionaires’ Problem implementation by handling:

the logic to add a new millionaire’s Ethereum address and net worth. Specifically, this involves using the stored enigma-js client library to submit a new compute task and poll its result. [Lines 70–107]

client library to submit a new compute task and poll its result. [Lines 70–107] the logic to compute the richest millionaire’s Ethereum address. Specifically, this involves using the stored enigma-js client library to submit a new compute task, poll its result, and decrypt/ABI-decode the task output. [Lines 109–146]

client library to submit a new compute task, poll its result, and decrypt/ABI-decode the task output. [Lines 109–146] Rendering the UI, which includes the deployed Millionaires’ Problem secret contract address, form input, trigger for computing the richest millionaire, and richest millionaire’s address. [Lines 156–221]

And that is it, we are all done with the front-end portion of our project! As mentioned earlier, the majority of what we have gone over here is closely tied to React and Redux concepts. For those of you who are less familiar with these front-end tools, it is definitely worth thoroughly looking through what we have done here to get up to speed. For the rest of you, the main takeaways are mostly within the MillionairesProblem.js file, where we demonstrate how to submit a compute task to run the logic within a secret contract, poll its status, and decrypt its result — all using the enigma-js library!

Screenshots

Adding a millionaire

Computing richest millionaire

Conclusion