Skip to main content

Ruby Connect 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 .