Ruby 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/rubyClient.js exports a JS object rubyApp , which provides all necessary APIs to interact with the contract:

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

  • rubyEthLogin : retrieve contract status from the chain for a Ruby account secret

  • rubyEthRegister : register a Ruby account with a provided secret

  • rubyEthDeposit : deposit certain amount of native tokens on the Ruby contract

  • rubyEthWithdraw : withdraw a certain amount of native tokens from the Ruby contract

  • rubyEthTransfer : transfer a certain amount of Ruby tokens from one account to another

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