Raze Frontend Architecture

Framework and Technology

• Vue UI framework

• ElementUI

• Vuex

• Vue router

Project setup

yarn install or npm install

Compiles and hot-reloads for development

yarn serve or npm run serve

Compiles and minifies for production

yarn build or npm run build

Customize Configuration

See Configuration Reference.

How to Interact with the Vue Frontend

• src/razeClient.js exports a JS object razeApp , which provides all necessary APIs to interact with the contract:

  • initRazeEthClient : initialize a client to interact with a specific Raze contract that has been deployed on a chain;

  • razeEthLogin : retrieve contract status from the chain for a Raze account secret

  • razeEthRegister : register a Raze account with a provided secret

  • razeEthDeposit : deposit certain amount of native tokens on the Raze contract

  • razeEthWithdraw : withdraw a certain amount of native tokens from the Raze contract

  • razeEthTransfer : transfer a certain amount of Raze tokens from one account to another

• When the frontend project initializes, it imports razeClient in src/main.js , creates a client instance through initRazeClient , and stores it in a vue instance, so that the whole frontend can call the above APIs through $raze .