OpenLaw Tutorial: DApps for Your Smart Agreements

Published in

Coinmonks

7 min readJan 24, 2019

In this article, we’re going to learn how to create an Ethereum DApp to interact with the legal agreement and smart contract you came up with in Michael Rice’s tutorial here.

I highly recommend you finish that tutorial before moving onto this as the material covered here is more advanced. Knowledge of ReactJS will be needed to build DApps beyond this tutorial, but isn’t essential for now.

By the end of this tutorial, you’ll have created a DApp which allows users to administer their executed Bill of Sale agreement. Users can view the agreement’s details, the buyer will be able to pay for the item, and the seller will be able to withdraw their funds following payment.

Admittedly, this article is very opinionated on tools and how to do things. There many other correct ways of accomplishing what we’re doing, but I find this to be the most efficient way to get started. So here we go!

Setting up your development environment

There are a lot of moving parts in what we’re aiming to achieve, so please ensure you’ve done the following:

Install Node.js v8+ LTS and npm.
Install MetaMask (remember to save your 12-word mnemonic, we’ll be needing it later). MetaMask brings Ethereum to your browser, allowing you to interact with DApps.
Get some test Ether for Rinkeby from a faucet (I use https://faucet.rinkeby.io/. You can forgo social media verification with http://rinkeby-faucet.com/ but it only gives 0.001 ETH)
Install Truffle globally with npm install -g truffle in your terminal. Truffle provides a comprehensive suite of tools for Ethereum DApp development.
Register for an Infura account and obtain your API key (under the Project ID heading after you log in). Infura offers a remote node that lets you deploy your contracts without having to download the Ethereum blockchain locally
Have a text editor installed (my favorite is VS Code)

If you get stuck anywhere along the way, a working version of the code can be found here.

Step 1: Install boilerplate DApp and dependencies

In a terminal window create a directory in your folder of choice and then move inside it.

mkdir openlaw-dapp-tutorial
cd openlaw-dapp-tutorial

2. Now we download the boilerplate Truffle Box which includes a basic Ethereum DApp project structure

truffle unbox joshma91/openlaw-react-box

3. Install dependencies

npm install

4. Open your openlaw-dapp-tutorial project folder in your text editor. If you’re on Windows or Linux and are using VS Code, you can run the following in the terminal

code .

Directory structure

Let’s have a quick look at the directory structure that we’re working with:

client/: Contains the React files for our website
contracts/: Contains the Solidity source files for our smart contracts
migrations/: Contains the Truffle files which handle smart contract deployments
test/: Contains both JavaScript and Solidity tests for our smart contracts
truffle.js: A Truffle configuration file which specifies our contract build directory and Ethereum network locations

Step 2: Create & deploy BillOfSale smart contract

Create a new file BillOfSale.sol in the contracts/ directory with the following contents. You may recall that this is from the previous tutorial (with slight modifications):

The recordContract function takes four parameters: the item description, the purchase price, and the buyer and seller’s Ethereum addresses. The confirmReceipt function allows the buyer to confirm receipt of their item and release funds stored in the contract to the seller.

2. In the project root directory, create a file named .env and populate it with the following contents:

MNEMONIC = “YOUR METAMASK 12 WORD MNEMONIC HERE”
INFURA_API_KEY = “YOUR INFURA API KEY HERE”

3. In migrations/2_deploy_contracts.js replace all 3 instances of SimpleStorage with BillOfSale.

4. Run the following in your terminal to deploy the contracts to Rinkeby Testnet:

truffle migrate --network rinkeby

This may take a while, but if all goes well, you should see something like this:

So your contract is now deployed and what’s more is that Truffle has automagically saved the contract interface (the contract ABI) in client/src/contracts/BillofSale.json. This is important for calling smart contract functions from your DApp in Step 4.

Step 3: Create OpenLaw Bill Of Sale template

This step rehashes what you did in Michael’s tutorial so I won’t explain what’s going on below, but here’s the full agreement markup so you can just drop it into a new template: https://app.openlaw.io/new_template.

Remember to replace the contract field with your “contract address” highlighted in the previous image.

Step 4: Create the DApp

Open client/src/App.js in your text editor and you’ll notice that there’s already bunch of code in there. If you’re new to React, this might look scary, but just follow these instructions carefully and you’ll be fine. What we’re going to do first is unhook the boilerplate stuff and replace it with the code we need to interact with BillOfSale.sol.

First, look near the top of the file and change

import SimpleStorageContract from "./contracts/SimpleStorage.json";

import BillOfSaleContract from "./contracts/BillOfSale.json";

Within the componentDidMount() method, replace SimpleStorageContract with BillOfSaleContract as such:

const Contract = truffleContract(BillOfSaleContract);

Replace the state initialization (the line right under class App extends Component)with the following:

state = { seller: null, buyer: null, descr: null, price: 0, web3: null, accounts: null, contract: null };

With the above changes, App.js now references an instance of our BillOfSale contract and initializes the React state with the variables we’ll be using.

That was a lot just to unwire the boilerplate DApp, but now we’re on to the fun stuff. At the bottom of App.js replace all of the methods after the closing brace of componentDidMount()with the following and save the file (there will be one closing brace near the bottom that shouldn’t be replaced):

Since this isn’t a React tutorial, here are the most important takeaways from the above:

runExample() is called in the componentDidMount() React lifecycle method that runs before the page is loaded to get the contract balance, seller & buyer Ethereum addresses, the item description & price, and the agreement status from BillOfSale.sol
setStatusMessage() checks whether the buyer has funded the smart contract with the proper amount and sets a status accordingly
onFundClick() is called when the Fund Contract button is clicked to prompt the user to fund the contract with the item price
onConfirmClick() is called with the Confirm Receipt button is clicked. If called by the seller’s Ethereum address, it will trigger the confirmReceipt() method in BillOfSale.sol, sending the contract balance to the seller and confirming performance of the agreement
render()is the React method where all of the presentation code is contained (JSX - a mix of HTML and JavaScript if you will)

Step 5: Tying it all together

It’s taken a lot of work to get here so kudos to you! Here is where the magic finally happens.

Execute the OpenLaw agreement

Go to the OpenLaw agreement template you created and fill in the necessary fields (TIP: keep the price low e.g. 0.01 ETH, to ensure you have enough to play with). Send the draft to the signatories and sign the agreement. After both signatories have signed, the recordContract() method in BillOfSale.sol is called to store your agreement details on the blockchain.

Run the DApp

Now in your terminal, we’re going to navigate to the client/ directory and launch our DApp by running the following commands:

cd client
npm run start

2. Open a browser window and navigate to http://localhost:3000, making sure your MetaMask is set to Rinkeby. You should see something like the following:

At this point, the DApp is now fully functional and you should try it out. In MetaMask, switch to your “seller” address and hit the Fund Contract button and submit the transaction. After the transaction is confirmed (MetaMask can show you the status of your transaction), refresh the page and observe the change in the information that’s displayed.

Now change your MetaMask account to your “buyer” address and refresh the page. Hit the Confirm Receipt button and submit the transaction. Refresh the page after the transaction is confirmed and observe the changes to the page and your metamask balances.

Conclusion

Congratulations! By creating an end-to-end smart agreement that can be administered through an Ethereum DApp, you’ve opened a world of possibilities for legal engineering through OpenLaw. Of course, this is only the beginning and there is a lot to learn (definitely myself included) about what can be achieved using these tools.

To learn more about OpenLaw, check out their site and documentation. I’m happy to answer any questions or just to chat. Hit me up on the community Slack channel (Josh Ma), on Github, or on Twitter.

You can find another smart agreement I’ve done here: