ConsenSource UI

Certification transparency and authenticity to empower responsible sourcing

---

Table Of Contents

• Table Of Contents
• About
• Getting Started
  • Overview
  • Development Environment Setup
    • Docker setup
    • Running the UI
• Available Commands
  • yarn start
  • yarn test
  • yarn build
  • yarn format
  • yarn lint
  • yarn generate-protobufs
  • yarn clean

About

The ConsenSource UI is comprised of multiple user interfaces. Each view provides its corresponding persona a unique set of interactions with the ConsenSource blockchain platform.

• Retailer - view suppliers and their certifications

• Supplier - view and request certifications

• Standards Body - manage the standards that certifications are accredited

• Certifying Body - manage and track certificates issued to suppliers

For more details on specific persona actions, see Transaction Processor docs

Getting Started

Overview

The ConsenSource UI allows retailers, standards bodies, certifying bodies, and factories to build transactions and interact with the underlying ConsenSource blockchain. Account info such as username, private and public keys, etc, are stored in an off-chain database.

In addition to transaction building, the UI allows end users to explore factory profiles and discover new factories based on various certification criteria.

Development Environment Setup

Docker setup

In order to run the UI you will need to clone the consensource-compose repo and follow the setup instructions to download the docker images for all of the services.

Once you have all of the images, you can run the following command to start the network:

./docker-helper -r

Running the UI

# Use correct Node version
nvm use

# Install dependencies
yarn

# Generate protobufs
yarn generate-protobufs

# Start the dev server
yarn start

Available Commands

From a command line in the project directory, you can run:

yarn 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.

Read the Development Environment Setup instructions for info on starting the backend services for ConsenSource.

yarn test

Launches the test runner in the interactive watch mode.

yarn build

Builds the app and outputs to the build folder.

yarn format

Formats all globbed files using prettier for consistency throughout the codebase.

yarn lint

Lints all globbed files according to the rules specified in the .eslintrc.js file, emitting errors and warnings to the console.

yarn generate-protobufs

Takes the content of our /protos folder and generates a JavaScript interface and TypeScript declaration file for the JS interface. Outputs these files to src/services/protobuf/compiled/.

yarn clean

Removes the the contents of node_modules and src/services/protobuf/compiled/.