Dex

Intro

This is the web application for DEX AMM (Decentralized EXchange with Automatic Market Making) infrastructure. Here you can find all information about frontend part of that project.

Technologies

• Language: JavaScript
• Framework: React.js, docs - https://reactjs.org/docs/getting-started.html
• CSS-Framework: Bootstrap v4.6, docs - https://getbootstrap.com/docs/4.6/getting-started/introduction/
• Module bundler: Webpack, docs - https://webpack.js.org/api/
• Transpiler: Babel, docs - https://babeljs.io/docs/en/
• State container: Redux, docs - https://redux.js.org/introduction/getting-started

Dependencies

For communication with Enecuum blockchain application you must use the web-enq library and Enecuum-wallet extension. At the moment site maintains five methods:

• connect()
• enable() -> {pubkey, net}
• balanceOf(to, tokenHash) -> {amount, decimals, delegated, reward, transit, undelegated}
• sendTransaction(from, to, value, tokenHash)
• net.getProvider() -> {net} To learn more about web-enq API, visit - https://github.com/Enecuum/web-enq/blob/e392d8a51d993cc6fbce2de65ef6a5ce4f7e84a8/ENQweb3lib.md

Preparing for usage

• install necessary dependencies

    npm install

• create config.json, copy structure from config.example.json.
• install pm2

Usage

Development mode

• start server with webpack-dev-middleware. (check the mode inside ./webpack.config.js, must be 'development')

    npm run dev

• stop development server by command:

  pm2 stop hot_dev

Production mode (use docker hub)

• pull docker image

  docker pull enecuum/dex-ui:vX.X.X

• run the script for using docker images and running production solution (check the mode inside ./webpack.config.js, must be 'production').

  npm run prod -- enecuum/dex-ui:vX.X.X

See entire configuration for production mode inside ./production.bash

Production mode (build image by yourself)

• build the application with webpack (check the mode inside ./webpack.config.js, must be 'production')

  npm run make

• and then run production server

  npm run prod

After assembling all files are put inside ./public directory, where index.html is the frontend entry point, and enex.webpack.js is the js bundle. Also, command creates docker image (check IMG_TAG variable into ./production.bash)

• stop all docker images and clear memory by command:

  npm run clear

Webpack config

All settings for webpack module locates into ./webpack.config.js. Essential properties:

• entry - root file, which imports all scripts, styles and other assets
• output - property for specifying output bundle
• module.rules - amount of modules, and their rules for creating right imports
• devServer - configuration field with server deployment properties (read more about in on https://webpack.js.org/configuration/dev-server/)

Development mode details

In order to turn on the 'develop mode' you must specify in the file webpack.config.js in the property 'mode' the string 'development'. All server functional runs without docker images, therefore all manipulations with the server must be realized through the "pm2".

    mode : 'development'

In the develop mode you must take into consideration that all options specified in the server/scripts/hotDev.js file have a higher priority than the config.json file settings.

Redux

We use Redux for more comfortable supervising of components states. You can find container inside the ./assets/store directory. There is introduced seven main files and directories for creating main redux structure:

• store.js - main assembly file
• initialState.js and pageDataPresets.js - describe main state structure of the project
• ./actions and ./actionCreators - directories with rules and methods for using redux store
• ./reducers - middle layer for store control, change state object according the actions
• storeToProps.js - node for states and methods distribution across the components (react-redux connect())

Enecuum AMM DEX documentation

For more information about AMM DEX functional read: Enecuum/docs#6

---

Server architecture

Dex-ui server architecture is the service-oriented architecture. At the moment the structure of the system has only two working parts: request divisor and file loader. Here in the image you can see the plain model:

Every service consists of template named T_Service. That template represents mechanisms of service connection and internal requests exchange. In the image below you can see the simplified class diagram:

Services have ordinary mechanisms of authentication by password and authorisation by tokens. In the images below you can see a couple of sequence diagrams that explain service's API.

• Unsuccessful preparing service for connection

  

• Service successful connection, but unsuccessful authentication

  

• Service successful authentication

  

• Cross-service interaction

  

• Lack of functionality