Get Started With OpenLaw in Minutes — Build a complete Dapp with the OpenLaw API + Truffle + React.js.

Introduction

Skip Ahead:

What we are building: — A DApp to interact with the OpenLaw API

Overview

Setup OpenLaw

<%
[[Seller Address: EthAddress]]
[[Buyer Address: EthAddress]]
[[Purchased Item]]
[[Purchase Price: Number]]
[[@Purchase Price in Wei = Purchase Price * 1000000000000000000]]
[[Record Contract:EthereumCall(
contract: "0x9570a3C2e9cC4a43D03d06EC9bf36fa5B9bCd0D2";
interface:[{"constant":false,"inputs":[{"name":"_descr","type":"string"},{"name":"_price","type":"uint256"},{"name":"_seller","type":"address"},{"name":"_buyer","type":"address"}],"name":"recordContract","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"}];
network:"Rinkeby";
function:"recordContract";
arguments: Purchased Item, Purchase Price in Wei, Seller Address, Buyer Address)]]
%>
\centered ** BILL OF SALE **Seller at Ethereum address [[Seller Address]] ("Seller") agrees to sell a **[[Purchased Item]]**, and buyer at Ethereum address [[Buyer Address]] ("Buyer") agrees to pay [[Purchase Price]] ether located at the contract address "Insert your contract address".[[Record Contract]]SELLER:[[Seller Signatory Email: Identity | Signature]]________________BUYER:[[Buyer Signatory Email: Identity | Signature]]

Set up with Truffle’s React Box, Add CSS, and Deploy a Smart Contract.

mkdir openlaw-api-tutorial
cd openlaw-api-tutorial
truffle unbox react
npm install dotenv
npm install truffle-hdwallet-provider@web3-one
cd client
npm install openlaw --save
Root directory with .env and truffle.js added.
cd client 
npm i semantic-ui
npm i semantic-ui-react
cd client/public/index.html
<link 
rel="stylesheet" href="//cdn.jsdelivr.net/npm/semanticui@2.4.2/dist/semantic.min.css/>
Infura Dashboard
inside the .env file in our root directory
require('dotenv').config();
var HDWalletProvider = require("truffle-hdwallet-provider");
var mnemonic = process.env["MNEMONIC"];
var infuraKey = process.env["INFURA_API_KEY"];
module.exports = {
// See <http://truffleframework.com/docs/advanced/configuration>
// to customize your Truffle configuration!
//https://truffleframework.com/docs/truffle/getting-started/truffle-with-metamask
//add solc optimizer
solc: {
optimizer: {
enabled: true,
runs: 2000
}
},
//default -- contracts_build_directory:"./build/contracts",
// contracts_build_directory:"./client/src/contracts",
networks: {
ganache: {
host: "localhost",
port: 8545,
network_id: "*" // match any network
},
rinkeby: {
//wrap provider in function to avoid crashing
provider: function() {
return new HDWalletProvider(mnemonic, "https://rinkeby.infura.io/v3/" + infuraKey);
},
host: "localhost",
//port: 8545,
network_id: 4, //rinkeby test network
gas: 4000000, // Gas limit used for deploys
gasPrice : 1000000000
}
}
};
pragma solidity ^0.5.0;contract BillOfSale {
address payable public seller;
address public buyer;
string public descr;
uint public price;
bool public confirmed;
//from OpenLaw Template
function recordContract(string memory _descr, uint _price,
address payable _seller, address _buyer
) public {
descr = _descr;
price = _price;
seller = _seller;
buyer = _buyer;
}
function () external payable { }function confirmReceipt() public payable {
require(msg.sender == buyer, "only buyer can confirm");
require(address(this).balance == price, "purchase price must be funded");
address(seller).transfer(address(this).balance);
confirmed = true;
}
}
var BillOfSale = artifacts.require("./BillOfSale.sol");module.exports = function(deployer) {
deployer.deploy(BillOfSale);
};
rm -r build/
truffle compile
truffle migrate --reset --network rinkeby
Successful deployment to Rinkeby

Using the OpenLaw JavaScript API

cd client
npm run start
import React, { Component } from "react";
import BillOfSaleContract from "./contracts/BillOfSale.json";
import getWeb3 from "./utils/getWeb3";
import { Container,Grid, Button, Form} from 'semantic-ui-react';
import { APIClient, Openlaw } from 'openlaw';
import "./App.css";
  1. Configure the OpenLaw API constants and access our OpenLaw instance and current template of OpenLaw Tutorial Sale Agreement.
  2. Set the state variables.
  3. Capture the User’s input from the Form.
  4. Build the OpenLaw object parameters
  5. Send the OpenLaw object to the OpenLaw instance and have it appear in the “Draft Management” or “Contract Management” tab.
Constant variables
State variables
App.js Function Table

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
OpenLaw

A commercial operating system for blockchains. By @awrigh01 and @bmalaus; a @ConsenSys spoke. https://openlaw.io/