Feature: incremental order book support (#1765)

Peatio introduced the support of incremental order-book from version 2.4
You can enable this feature in frontend with the following configuration in env.js:
```json
{
  incrementalOrderBook: true
}
```

Author: oyershov

.dockerignore

@@ -1,4 +1,3 @@
 *Dockerfile*
 *docker-compose*
 node_modules
-

.drone.yml

@@ -25,6 +25,25 @@ steps:
       - yarn test:ci --collectCoverage=true
       - yarn build
 
+  - name: "Build enterprise image"
+    image: plugins/gcr
+    environment:
+      BUILD_EXPIRE: "3 month"
+      NPM_AUTH_TOKEN:
+        from_secret: drone_npm_auth_token
+      REACT_APP_BUILD_VERSION: Enterprise
+    settings:
+      repo: gcr.io/openware-production/baseapp
+      build_args_from_env:
+        - BUILD_EXPIRE
+        - REACT_APP_BUILD_VERSION
+        - NPM_AUTH_TOKEN
+      json_key:
+        from_secret: openware_gcp_creds_base64
+    when:
+      branch:
+        - rc/**
+
   - name: "Stage with mock server"
     image: instrumentisto/rsync-ssh
     environment:
@@ -117,12 +136,12 @@ steps:
     environment:
       NPM_AUTH_TOKEN:
         from_secret: drone_npm_auth_token
-      BUILD_DOMAIN: $(cat .domains)
+      BUILD_EXPIRE: "3 month"
       REACT_APP_BUILD_VERSION: Enterprise
     settings:
       repo: gcr.io/openware-production/baseapp
       build_args_from_env:
-        - BUILD_DOMAIN
+        - BUILD_EXPIRE
         - REACT_APP_BUILD_VERSION
         - NPM_AUTH_TOKEN
       json_key:
@@ -133,7 +152,6 @@ steps:
     environment:
       NPM_AUTH_TOKEN:
         from_secret: drone_npm_auth_token
-      BUILD_EXPIRE: $(date -d "+1 month" +%s000)
       REACT_APP_BUILD_VERSION: Lite
       REACT_APP_TENKO_PUBLIC_KEY:
         from_secret: tenko_public_key
@@ -146,7 +164,6 @@ steps:
       build_args_from_env:
         - REACT_APP_BUILD_VERSION
         - REACT_APP_TENKO_PUBLIC_KEY
-        - BUILD_EXPIRE
         - NPM_AUTH_TOKEN
       registry: quay.io
 

Dockerfile

@@ -15,15 +15,12 @@ USER node
 
 ENV REACT_APP_TENKO_PUBLIC_KEY=${REACT_APP_TENKO_PUBLIC_KEY}
 ENV REACT_APP_BUILD_VERSION=${REACT_APP_BUILD_VERSION}
-ENV BUILD_EXPIRE=${BUILD_EXPIRE}
-ENV BUILD_DOMAIN=${BUILD_DOMAIN:-""}
-ENV REACT_APP_BUILD_EXPIRE=${BUILD_EXPIRE}
 ENV NPM_AUTH_TOKEN=${NPM_AUTH_TOKEN}
 
 RUN cd src/containers/ && unlink index.ts && ln -s index${REACT_APP_BUILD_VERSION}.ts index.ts
 RUN echo "//registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN}" > .npmrc
 RUN yarn install
-RUN REACT_APP_GIT_SHA=$(git rev-parse --short HEAD) bash -c 'yarn build'
+RUN ./scripts/build.sh
 
 FROM nginx:mainline-alpine
 

public/config/env.js

@@ -16,4 +16,5 @@ window.env = {
     rangerReconnectPeriod: '1',
     msAlertDisplayTime: '5000',
     licenseKey: '',
+    incrementalOrderBook: true,
 };

scripts/build.sh

@@ -0,0 +1,10 @@
+#!/bin/sh
+
+export REACT_APP_GIT_SHA=$(git rev-parse --short HEAD)
+if [ $REACT_APP_BUILD_VERSION = "Enterprise" ]
+then
+  export BUILD_DOMAIN=${BUILD_DOMAIN:-$(cat .domains)}
+  [ -n "$BUILD_EXPIRE" ] && export REACT_APP_BUILD_EXPIRE=$(date -d "+${BUILD_EXPIRE}" +%s000)
+fi
+
+yarn build

src/api/config.ts

@@ -20,6 +20,7 @@ export const defaultConfig: Config = {
     gaTrackerKey: '',
     msAlertDisplayTime: '5000',
     licenseKey: '',
+    incrementalOrderBook: false,
 };
 
 export const Cryptobase = {
@@ -50,3 +51,4 @@ export const captchaType = () => Cryptobase.config.captcha.captchaType;
 export const gaTrackerKey = (): string => Cryptobase.config.gaTrackerKey || '';
 export const msAlertDisplayTime = (): string => Cryptobase.config.msAlertDisplayTime || '5000';
 export const rangerReconnectPeriod = (): number => Cryptobase.config.rangerReconnectPeriod ? Number(Cryptobase.config.rangerReconnectPeriod) : 1;
+export const incrementalOrderBook = (): boolean => Cryptobase.config.incrementalOrderBook || false;

src/api/types.ts

@@ -19,4 +19,5 @@ export interface Config {
     gaTrackerKey?: string;
     msAlertDisplayTime?: string;
     licenseKey?: string;
+    incrementalOrderBook: boolean;
 }

src/containers/MarketDepth/index.tsx

@@ -1,7 +1,7 @@
 import { Decimal, MarketDepths } from '@openware/components';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { connect, MapStateToProps } from 'react-redux';
+import { connect } from 'react-redux';
 import {
     Market,
     RootState,
@@ -134,7 +134,7 @@ class MarketDepthContainer extends React.Component<Props> {
     }
 }
 
-const mapStateToProps: MapStateToProps<ReduxProps, {}, RootState> = state => ({
+const mapStateToProps = (state: RootState) => ({
     asksItems: selectDepthAsks(state),
     bidsItems: selectDepthBids(state),
     currentMarket: selectCurrentMarket(state),

src/containers/Markets/index.tsx

@@ -6,6 +6,7 @@ import {
     injectIntl,
 } from 'react-intl';
 import { connect, MapDispatchToPropsFunction } from 'react-redux';
+import { incrementalOrderBook } from '../../api';
 import { RootState, selectUserInfo, setCurrentPrice, User } from '../../modules';
 import {
     Market,
@@ -17,7 +18,7 @@ import {
     setCurrentMarket,
     Ticker,
 } from '../../modules/public/markets';
-import { depthFetch, orderBookFetch } from '../../modules/public/orderBook';
+import { depthFetch } from '../../modules/public/orderBook';
 import { walletsFetch } from '../../modules/user/wallets';
 
 interface ReduxProps {
@@ -34,7 +35,6 @@ interface DispatchProps {
     setCurrentMarket: typeof setCurrentMarket;
     depthFetch: typeof depthFetch;
     walletsFetch: typeof walletsFetch;
-    orderBookFetch: typeof orderBookFetch;
     tickers: typeof marketsTickersFetch;
     setCurrentPrice: typeof setCurrentPrice;
 }
@@ -107,8 +107,9 @@ class MarketsContainer extends React.Component<Props> {
 
         if (!currentMarket || currentMarket.id !== marketToSet.id) {
             this.props.setCurrentMarket(marketToSet);
-            this.props.depthFetch(marketToSet);
-            this.props.orderBookFetch(marketToSet);
+            if (!incrementalOrderBook()) {
+              this.props.depthFetch(marketToSet);
+            }
         }
     };
 }
@@ -126,7 +127,6 @@ const mapDispatchToProps: MapDispatchToPropsFunction<DispatchProps, {}> =
         setCurrentMarket: (market: Market) => dispatch(setCurrentMarket(market)),
         walletsFetch: () => dispatch(walletsFetch()),
         depthFetch: (market: Market) => dispatch(depthFetch(market)),
-        orderBookFetch: (market: Market) => dispatch(orderBookFetch(market)),
         tickers: () => dispatch(marketsTickersFetch()),
         setCurrentPrice: payload => dispatch(setCurrentPrice(payload)),
     });

src/containers/Order/index.tsx

@@ -12,7 +12,8 @@ import {
     RootState,
     selectCurrentPrice,
     selectDepthAsks,
-    selectDepthBids, selectUserLoggedIn,
+    selectDepthBids,
+    selectUserLoggedIn,
     selectWallets,
     setCurrentPrice,
     Wallet, walletsFetch,

src/containers/OrderBook/OrderBook.pcss

@@ -138,6 +138,7 @@
         }
 
         &:first-child {
+          flex-direction: column-reverse;
           top: 0;
           right: 0;
           left: 0;

src/containers/OrderBook/index.tsx

@@ -2,11 +2,7 @@ import { CombinedOrderBook, Decimal, Loader } from '@openware/components';
 import classNames from 'classnames';
 import * as React from 'react';
 import { InjectedIntlProps, injectIntl } from 'react-intl';
-import {
-    connect,
-    MapDispatchToPropsFunction,
-    MapStateToProps,
-} from 'react-redux';
+import { connect, MapDispatchToPropsFunction } from 'react-redux';
 import { accumulateVolume, calcMaxVolume, sortAsks, sortBids } from '../../helpers';
 import {
     Market,
@@ -21,11 +17,11 @@ import {
 } from '../../modules';
 
 interface ReduxProps {
-    bids: string[][];
-    isLoading: boolean;
     asks: string[][];
+    bids: string[][];
     currentMarket: Market | undefined;
     currentPrice: number | undefined;
+    orderBookLoading: boolean;
 }
 
 interface DispatchProps {
@@ -63,17 +59,21 @@ class OrderBookContainer extends React.Component<Props, State> {
     }
 
     public render() {
-        const { bids, isLoading, asks } = this.props;
+        const {
+            asks,
+            bids,
+            orderBookLoading,
+        } = this.props;
         const isLarge = this.state.width > breakpoint;
         const cn = classNames('pg-combined-order-book ', {
-            'cr-combined-order-book--loading': isLoading,
+            'cr-combined-order-book--loading': orderBookLoading,
             'pg-combined-order-book--no-data-first': (!asks.length && !isLarge) || (!bids.length && isLarge),
             'pg-combined-order-book--no-data-second': (!bids.length && !isLarge) || (!asks.length && isLarge),
         });
 
         return (
             <div className={cn} ref={this.orderRef}>
-                {isLoading ? <div><Loader /></div> : this.orderBook(sortBids(bids), sortAsks(asks))}
+                {orderBookLoading ? <div><Loader /></div> : this.orderBook(sortBids(bids), sortAsks(asks))}
             </div>
         );
     }
@@ -188,10 +188,10 @@ class OrderBookContainer extends React.Component<Props, State> {
     };
 }
 
-const mapStateToProps: MapStateToProps<ReduxProps, {}, RootState> = state => ({
+const mapStateToProps = (state: RootState) => ({
     bids: selectDepthBids(state),
     asks: selectDepthAsks(state),
-    isLoading: selectDepthLoading(state),
+    orderBookLoading: selectDepthLoading(state),
     currentMarket: selectCurrentMarket(state),
     currentPrice: selectCurrentPrice(state),
     marketTickers: selectMarketTickers(state),

src/containers/Sidebar/index.tsx

@@ -93,8 +93,8 @@ class SidebarContainer extends React.Component<Props, State> {
         const path = url.includes('/trading') && currentMarket ? `/trading/${currentMarket.id}` : url;
         const isActive = (url === '/trading/' && address.includes('/trading')) || address === url;
         return (
-            <Link to={path} onClick={handleLinkChange} className={`${isActive && 'route-selected'}`}>
-                <div className="pg-sidebar-wrapper-nav-item" key={index}>
+            <Link to={path} key={index} onClick={handleLinkChange} className={`${isActive && 'route-selected'}`}>
+                <div className="pg-sidebar-wrapper-nav-item">
                     <div className="pg-sidebar-wrapper-nav-item-img-wrapper">
                         <img
                             className="pg-sidebar-wrapper-nav-item-img"

src/containers/ToolBar/MarketSelector/MarketsList/index.tsx

@@ -7,11 +7,11 @@ import {
     intlShape,
 } from 'react-intl';
 import { connect } from 'react-redux';
+import { incrementalOrderBook } from '../../../../api';
 import { SortAsc, SortDefault, SortDesc } from '../../../../assets/images/SortIcons';
 import {
     depthFetch,
     Market,
-    orderBookFetch,
     RootState,
     selectCurrentMarket,
     selectMarkets,
@@ -32,7 +32,6 @@ interface ReduxProps {
 interface DispatchProps {
     setCurrentMarket: typeof setCurrentMarket;
     depthFetch: typeof depthFetch;
-    orderBookFetch: typeof orderBookFetch;
     setCurrentPrice: typeof setCurrentPrice;
 }
 
@@ -98,8 +97,9 @@ class MarketsListComponent extends React.Component<Props, State> {
         this.props.setCurrentPrice();
         if (marketToSet) {
             this.props.setCurrentMarket(marketToSet);
-            this.props.depthFetch(marketToSet);
-            this.props.orderBookFetch(marketToSet);
+            if (!incrementalOrderBook()) {
+              this.props.depthFetch(marketToSet);
+            }
         }
     };
 
@@ -210,7 +210,6 @@ const mapStateToProps = (state: RootState): ReduxProps => ({
 const mapDispatchToProps = {
     setCurrentMarket,
     depthFetch,
-    orderBookFetch,
     setCurrentPrice,
 };