JUR MVP

JUR MVP will be available at https://jur.io/mvp/

This project was bootstrapped with Create React App.

Note: this project should be refactored using Drizzle Truffle Box (Further info here)

Dependencies

Global (host) dependencies

• Truffle as EVM framework (more info here);
• Ganache CLI for ETH test network (more info here);
• VeChain Thor for VeChain Thor Blockchain test network (more info here);
• Dot Env for environment configuration (more info here);
• Composer as PHP package manager for Lumen/Laravel framework (more info here)
• Docker for service containers management (more info here)

Direct Dependencies

• react-blockies for users ident icons (based on ETH Blockies more info here)

Developmnent (host)

• prettier for coding style format (more info here);
• storybook for ui components (more info here);

Editor

Your code editor should be compatible with .editorconfig or Prettier. Please note: this project supports both.

Branches

This project repo is organized in 3 branches:

• master : is a mirror of production environment;
• beta : is a mirror of stage environment;
• develop : for development purposes;

Git Workflow

Using this repository you should follow this workflow: Atlassian Git-flow, by using features, hotfix and releases throuth previous mentioned branches.

Architecture

This project is structured as following:

• Frontend build with React.js + Drizzle
• REST API built with Laravel Lumen

Environment setup

This project uses a .env file in order to please follow the instructions here and create this file based on your needs.

NOTE : only constants definition prefixed by REACT_APP_ will be available in React App.

You can find the environment configuration template here.

Running Test Network

Ethereum

To run a test ethereum network, in a separate terminal execute: ganache-cli --gasLimit 7000000

VeChain

!!! Before run !!!

Make sure you've already installed VeChain Thor

Also make sure you've deployed smart contracts on local solo network using Web3-Gear using options --log 1 and --debug 1 for logging and debugghing purposes.

To run a test vechain blockchain network, in a separate terminal execute: $ bin/thor solo --gas-limit 7000000 --on-demand

Configuration

Please select the network properly in src/config/drizzleOptions.js file where you can find a node vechain that can be filled with a boolean value (for mainnet) or a string of your host (in ex. http://localhost:8669 in SOLO mode)

Rest API

REST API are used to keep all user, contracts and disputes data off-chain. This servise is exposed via Lumen and is accessible via Docker.

Please have a look at the Postman config available under rest/postman for furter informations about endpoints

Storybook

In order to have a full overview of the components available for this project please run Storybook available at http://localhost:9009 once you have run the following commands.

1. Make sure you have installed host dependencies;
2. Make sure you have installed project dependencies (step one of First run flow);
3. Run npm run storybook;

If all goes well Storybook is accessible at http://localhost:9009

First run flow

On first run you should download and setup Laravel packages and database. Just follow this commands.

This step by step guide assumes that Metamask and required host packages was already configured.

1. Project Dependecies Manager

$ cd path/to/project/root
$ npm install

2. Setup configuration

Based on .env.template create your local environment file and change <api-base-url> and other constant in relation to your host.

A standard .env.local configuration can have REACT_APP_API_BASE_URL=http://localhost/api/v1

3. Smart Contract Build

$ cd path/to/project/root/protocol
$ npm install
$ ganache-cli --gasLimit 7000000
$ truffle compile
$ cd ..
$ npm run migrate-contracts

Once contracts is migrated and available on your local network you should Mint a couple of Token. To do it you can use the last test available under protocol folder (protocol/test/07_mint_tokens.js).

Please use truffle network command to look at token address for minting (edit test file at row 17) and token adding in Metamask extension.

4. Docker Environment for API

$ cd path/to/project/root
$ docker-compose build
$ docker-compose up -d
$ docker exec -it php bash
$ cd ..
$ composer install
$ php artisan key:generate
$ php artisan migrate:refresh
$ php artisan db:seed

If all goes well, all API endpoints are accessible at http://localhost/api/v[api-version].

5. DApp run

$ cd path/to/project/root
$ npm start -- --reset-cache

If all goes well, now Dapp is accessible at http://localhost:3000.

$ docker-compose up -d

This command will launch REST API service on your host.

$ docker-compose stop

This command will stop REST API service on your host.

Deploy

After you have configured the environment on remote machine and already give the right permissions for rsync

You should use ./bin/deploy.sh script in order to deploy.

There are 3 parameteres to look at:

• -e|--environment to specify an environment from deploy-conf.yml file;
• -f|--frontend equals to 1 in order to deploy frontend only;
• -b|--backend equals to 1 in order to deploy backend only;
• --all equals to 1 to deploy both frontend and backend.

This operation uses rsync with sudo and and excludes files and folder written in deplpy-exclude.list file.

Teke a look also to .template files for this.

Please note: this operation should be automated using a CI service like CircleCI. Feel free to use this script on a runner machine.

Available Scripts

NOTE : see the Environment setup section for further details before first run of the following scripts.

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

npm run migrate-contracts

Note: this command will work only if you had installed truffle as global npm package!

Please install the same version available in protocol README.md - Truffle ^4.1.11

Run this command in order to migrate Smart Contract from protocol repository.

npm run storybook

Note: this command will work only if you had installed storybook as global npm package!

Run this command in order to view app storybook (and the entire components list) in your browser.

npm run build-storybook

Note: this command will work only if you had installed storybook as global npm package!

Run this command in order to build public storybook.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

Contributing Guide

See CONTRIBUTING.md

Troubleshooting

See TROUBLESHOOTING.md

Change Log

See CHANGELOG.md