Merge branch 'dev' into oskar/notification

binary-com · May 17, 2019 · b2752b9 · b2752b9
2 parents f944dbd + e3b77a0
commit b2752b9
Show file tree

Hide file tree

Showing 12 changed files with 520 additions and 123 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -83,15 +83,15 @@
     "grunt-webpack": "3.1.3",
     "jsdom": "9.12.0",
     "jsdom-global": "2.1.1",
-    "load-grunt-config": "1.0.1",
+    "load-grunt-config": "1.0.2",
     "load-grunt-tasks": "3.5.2",
     "mocha": "5.2.0",
     "mock-local-storage": "1.1.7",
     "node-gettext": "2.0.0",
     "node-sass": "4.11.0",
     "postcss-scss": "0.4.1",
     "react-render-html": "0.6.0",
-    "react-svg-loader": "^2.1.0",
+    "react-svg-loader": "3.0.1",
     "sitemap": "1.13.0",
     "stylelint": "10.0.0",
     "stylelint-formatter-pretty": "1.0.3",
@@ -101,7 +101,7 @@
     "time-grunt": "1.4.0",
     "uglifyjs-webpack-plugin": "1.3.0",
     "webpack": "4.17.2",
-    "webpack-bundle-analyzer": "3.0.2",
+    "webpack-bundle-analyzer": "3.3.2",
     "webpack-dev-server": "3.1.14",
     "webpack-manifest-plugin": "2.0.4",
     "webpack-merge": "4.1.4",

diff --git a/scripts/config/pages.js b/scripts/config/pages.js
@@ -3,5 +3,5 @@ module.exports = [
 
     // ==================== Section: "app" ====================
     // According to its section path ('app') would be saved to: /{lang}/index.html
-    ['index',                                   'app/app',                                   null,         'Trusted by traders since 2000',     'NOT-en',          'app'],
+    ['index',                                   'app/app',                                   null,         'Deriv App',     'NOT-en',          'app'],
 ];
diff --git a/src/javascript/app/App/Components/Elements/chart-loader.jsx b/src/javascript/app/App/Components/Elements/chart-loader.jsx
@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import React     from 'react';
+import Loading   from '../../../../../templates/_common/components/loading.jsx';
+
+const ChartLoader = ({ is_visible }) => (
+    is_visible &&
+    <div className='chart-container__loader'>
+        <Loading theme='chart-loader' />
+    </div>
+);
+
+ChartLoader.propTypes = {
+    is_visible: PropTypes.bool,
+};
+
+export default ChartLoader;
diff --git a/src/javascript/app/App/Components/Elements/ui-loader.jsx b/src/javascript/app/App/Components/Elements/ui-loader.jsx
@@ -3,8 +3,8 @@ import PropTypes  from 'prop-types';
 import React      from 'react';
 
 const UILoader = ({ className, classNameBlock }) => {
-    const loading_class = classNames('block-ui__loading', className);
     const block_class   = classNames(classNameBlock, 'block-ui');
+    const loading_class = classNames('block-ui__loading', className);
     return (
         <div className={block_class}>
             <div className={loading_class}>

diff --git a/src/javascript/app/Modules/SmartChart/Containers/smart-chart.jsx b/src/javascript/app/Modules/SmartChart/Containers/smart-chart.jsx
@@ -44,6 +44,7 @@ class Chart extends React.Component {
                 bottomWidgets={this.props.should_show_bottom_widgets ?
                     this.bottomWidgets : null}
                 chartControlsWidgets={this.props.is_contract_mode ? null : this.chartControlsWidgets}
+                chartStatusListener={this.props.getChartStatus}
                 chartType={this.props.chart_type}
                 endEpoch={this.props.end_epoch}
                 id={this.props.chart_id}
@@ -84,6 +85,7 @@ Chart.propTypes = {
     chart_type                  : PropTypes.string,
     end_epoch                   : PropTypes.number,
     exportLayout                : PropTypes.func,
+    getChartStatus              : PropTypes.func,
     granularity                 : PropTypes.number,
     InfoBox                     : PropTypes.node,
     is_contract_mode            : PropTypes.bool,
@@ -119,6 +121,7 @@ export default connect(
         chart_type          : modules.smart_chart.chart_type,
         end_epoch           : modules.smart_chart.end_epoch,
         exportLayout        : modules.smart_chart.exportLayout,
+        getChartStatus      : modules.smart_chart.getChartStatus,
         granularity         : modules.smart_chart.granularity,
         is_contract_mode    : modules.smart_chart.is_contract_mode,
         is_title_enabled    : modules.smart_chart.is_title_enabled,

diff --git a/src/javascript/app/Modules/Trading/Containers/trade.jsx b/src/javascript/app/Modules/Trading/Containers/trade.jsx
@@ -1,5 +1,6 @@
 import PropTypes            from 'prop-types';
 import React                from 'react';
+import ChartLoader          from 'App/Components/Elements/chart-loader.jsx';
 import { getPropertyValue } from '_common/utility';
 import UILoader             from 'App/Components/Elements/ui-loader.jsx';
 import { connect }          from 'Stores/connect';
@@ -27,10 +28,11 @@ class Trade extends React.Component {
     }
 
     render() {
-        const contract_id = getPropertyValue(this.props.purchase_info, ['buy', 'contract_id']);
-        const form_wrapper_class = this.props.is_mobile ? 'mobile-wrapper' : 'sidebar__container desktop-only';
+        const contract_id                  = getPropertyValue(this.props.purchase_info, ['buy', 'contract_id']);
+        const form_wrapper_class           = this.props.is_mobile ? 'mobile-wrapper' : 'sidebar__container desktop-only';
         const should_show_bottom_widgets   = this.props.is_digit_contract && this.props.is_contract_mode;
         const should_show_last_digit_stats = this.props.is_digit_contract && !this.props.is_contract_mode;
+        const is_chart_visible             = (this.props.is_chart_loading || !this.props.is_chart_ready);
 
         return (
             <div id='trade_container' className='trade-container'>
@@ -39,6 +41,7 @@ class Trade extends React.Component {
                     <NotificationMessages />
                     { this.props.symbol &&
                         <React.Suspense fallback={<UILoader />} >
+                            <ChartLoader is_visible={is_chart_visible} />
                             <SmartChart
                                 chart_id={this.props.chart_id}
                                 Digits={<Digits is_trade_page />}
@@ -76,9 +79,10 @@ class Trade extends React.Component {
 
 Trade.propTypes = {
     chart_id         : PropTypes.string,
-    chart_zoom       : PropTypes.number,
     contract_type    : PropTypes.string,
     hidePositions    : PropTypes.func,
+    is_chart_loading : PropTypes.bool,
+    is_chart_ready   : PropTypes.bool,
     is_contract_mode : PropTypes.bool,
     is_digit_contract: PropTypes.bool,
     is_mobile        : PropTypes.bool,
@@ -100,9 +104,11 @@ export default connect(
         is_digit_contract                  : modules.contract.is_digit_contract,
         onCloseContract                    : modules.contract.onCloseContract,
         chart_id                           : modules.smart_chart.chart_id,
+        is_chart_loading                   : modules.smart_chart.is_chart_loading,
+        is_chart_ready                     : modules.smart_chart.is_chart_ready,
+        is_contract_mode                   : modules.smart_chart.is_contract_mode,
         scroll_to_epoch                    : modules.smart_chart.scroll_to_left_epoch,
         scroll_to_offset                   : modules.smart_chart.scroll_to_left_epoch_offset,
-        is_contract_mode                   : modules.smart_chart.is_contract_mode,
         contract_type                      : modules.trade.contract_type,
         is_trade_enabled                   : modules.trade.is_trade_enabled,
         onClickNewTrade                    : modules.trade.onClickNewTrade,

diff --git a/src/javascript/app/Stores/Modules/Contract/contract-store.js b/src/javascript/app/Stores/Modules/Contract/contract-store.js
@@ -76,6 +76,11 @@ export default class ContractStore extends BaseStore {
                 SmartChartStore.updateGranularity(0);
                 SmartChartStore.updateChartType('mountain');
             }
+            // Clear chart loading status once ChartListener returns ready for completed contract
+            if (!this.is_ongoing_contract) {
+                this.waitForChartListener(SmartChartStore);
+            }
+
         // setters for ongoing contracts, will only init once onMount after left_epoch is set
         } else if (!this.is_left_epoch_set) {
             // For tick contracts, it is necessary to set the chartType and granularity after saving and clearing trade layout
@@ -102,6 +107,10 @@ export default class ContractStore extends BaseStore {
 
         createChartBarrier(SmartChartStore, contract_info);
         createChartMarkers(SmartChartStore, contract_info);
+
+        if (this.smart_chart.is_chart_ready) {
+            this.smart_chart.setIsChartLoading(false);
+        }
     }
 
     @action.bound
@@ -116,6 +125,9 @@ export default class ContractStore extends BaseStore {
         this.is_from_positions = is_from_positions;
 
         if (contract_id) {
+            if (this.is_from_positions) {
+                this.smart_chart.setIsChartLoading(true);
+            }
             this.smart_chart.saveAndClearTradeChartLayout();
             this.smart_chart.setContractMode(true);
             WS.subscribeProposalOpenContract(this.contract_id.toString(), this.updateProposal, false);
@@ -161,6 +173,7 @@ export default class ContractStore extends BaseStore {
             this.has_error     = true;
             this.error_message = response.error.message;
             this.contract_info = {};
+            this.smart_chart.setIsChartLoading(false);
             return;
         }
         if (isEmptyObject(response.proposal_open_contract)) {
@@ -169,6 +182,7 @@ export default class ContractStore extends BaseStore {
             this.contract_info = {};
             this.contract_id   = null;
             this.smart_chart.setContractMode(false);
+            this.smart_chart.setIsChartLoading(false);
             return;
         }
         if (+response.proposal_open_contract.contract_id !== +this.contract_id) return;
@@ -239,6 +253,23 @@ export default class ContractStore extends BaseStore {
         WS.forget('proposal_open_contract', this.updateProposal, { id: this.forget_id });
     }
 
+    waitForChartListener = (SmartChartStore) => {
+        // TODO: Refactor, timeout interval is required for completed contracts.
+        // There is an issue when we receive the proposal_open_contract response
+        // for a completed contract and chartListener returns false for that single instance / single response.
+        // Hence, we need to set an interval to keep checking the chartListener until it returns true
+
+        let timer;
+        if (!SmartChartStore.is_chart_ready) {
+            // console.log('waiting for listener');
+            timer = setTimeout(() => this.waitForChartListener(SmartChartStore), 500);
+        } else {
+            // console.log('cleared listener');
+            SmartChartStore.setIsChartLoading(false);
+            clearTimeout(timer);
+        }
+    };
+
     @action.bound
     removeSellError() {
         delete this.sell_info.error_message;

diff --git a/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js b/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js
@@ -30,12 +30,19 @@ export default class SmartChartStore extends BaseStore {
     @observable scroll_to_left_epoch_offset = 0;
 
     @observable chart_id             = 'trade';
+    @observable is_chart_loading     = false;
+    @observable is_chart_ready       = false;
     @observable should_import_layout = false;
     @observable should_export_layout = false;
     @observable should_clear_chart   = false;
     @observable trade_chart_layout   = null;
     trade_chart_symbol               = null;
 
+    @action.bound
+    getChartStatus(status) {
+        this.is_chart_ready = status;
+    }
+
     @action.bound
     updateChartType(type) {
         this.chart_type = type;
@@ -111,6 +118,11 @@ export default class SmartChartStore extends BaseStore {
         this.end_epoch = end;
     }
 
+    @action.bound
+    setIsChartLoading(bool) {
+        this.is_chart_loading = bool;
+    }
+
     // ---------- Barriers ----------
     @action.bound
     createBarriers = (contract_type, high_barrier, low_barrier, onChartBarrierChange, barrier_config) => {
@@ -160,6 +172,8 @@ export default class SmartChartStore extends BaseStore {
 
     @action.bound
     applySavedTradeChartLayout() {
+        if (!this.trade_chart_layout) return;
+        this.setIsChartLoading(true);
         this.should_export_layout = false;
         this.should_import_layout = true;
         this.should_clear_chart   = false;
@@ -173,6 +187,11 @@ export default class SmartChartStore extends BaseStore {
             if (this.trade_chart_symbol !== this.root_store.modules.trade.symbol) {
                 this.root_store.modules.trade.updateSymbol(this.trade_chart_symbol);
             }
+
+            // Clear chart loading status once ChartListener returns ready
+            if (this.is_chart_ready) {
+                this.setIsChartLoading(false);
+            }
         });
     }
 

diff --git a/src/sass/app/_common/base/themes.scss b/src/sass/app/_common/base/themes.scss
@@ -8,6 +8,7 @@ $themes: (
         background_cover                 : $COLOR_LIGHT_BLACK_4,
         background_icon_color            : $COLOR_LIGHT_BLACK_4_SOLID,
         background_tooltip_color         : $COLOR_LIGHT_BLACK_1,
+        barspinner_color                 : $COLOR_DARK_BLUE_5,
         border_color                     : $COLOR_LIGHT_BLACK_4_SOLID,
         border_hover_color               : $COLOR_LIGHT_GRAY_1,
         border_outline_color             : $COLOR_LIGHT_GRAY_2,
@@ -73,6 +74,7 @@ $themes: (
         background_cover                 : $COLOR_DARK_BLUE_2,
         background_icon_color            : $COLOR_DARK_BLUE_5,
         background_tooltip_color         : $COLOR_DARK_BLUE_5,
+        barspinner_color                 : $COLOR_WHITE,
         border_color                     : $COLOR_DARK_BLUE_2,
         border_hover_color               : $COLOR_DARK_BLUE_7,
         border_outline_color             : $COLOR_DARK_BLUE_8,

diff --git a/src/sass/app/_common/layout/layouts.scss b/src/sass/app/_common/layout/layouts.scss
@@ -83,6 +83,44 @@
     transition: width 0.15s ease-out, margin 0.15s ease-out;
     position: relative;
 
+    &__loader {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .barspinner {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0;
+            width: 100%;
+            height: 18px;
+
+            &__rect {
+                margin: 0.6em;
+                width: 8px;
+                @include themify($themes) {
+                    background-color: themed('barspinner_color');
+                }
+            }
+        }
+        & + .smartcharts {
+            visibility: hidden;
+            pointer-events: none;
+
+            .cq-symbols-display {
+                display: none;
+            }
+        }
+        @include themify($themes) {
+            background-color: themed('container_color');
+        }
+    }
     // smartchart library style fixes
     .cq-context {
         top: 0;

diff --git a/src/templates/app/components/loading.jsx b/src/templates/app/components/loading.jsx
@@ -1,3 +1,4 @@
+import classNames          from 'classnames';
 import React               from 'react';
 import PropTypes           from 'prop-types';
 import {
@@ -12,7 +13,7 @@ class Loading extends React.Component {
     }
 
     shouldComponentUpdate(nextProps) {
-        return nextProps.status !== this.props.status || nextProps.theme !== this.props.theme;
+        return (nextProps.status !== this.props.status) || (nextProps.theme !== this.props.theme);
     }
 
     componentDidMount() {
@@ -22,27 +23,34 @@ class Loading extends React.Component {
     }
 
     render() {
+        const { id, status, theme } = this.props;
+        const { is_mounted }        = this.state;
         return (
-            <div id={this.props.id} className={`initial-loader initial-loader--${this.props.theme}`}>
-                { this.state.is_mounted &&
+            <div
+                className={classNames('initial-loader', {
+                    [`initial-loader--${theme}`]: theme,
+                })}
+                id={id}
+            >
+                {is_mounted &&
                     <React.Fragment>
-                        { this.props.theme === 'dark' &&
+                        { theme === 'dark' &&
                             <Icon
                                 icon={IconInitialLogoDark}
                                 className='initial-loader__image'
                                 classNamePath='initial-loader__mask'
                                 classNameRect='initial-loader__fill'
                             />
                         }
-                        { this.props.theme === 'light' &&
+                        { theme === 'light' &&
                             <Icon
                                 icon={IconInitialLogoLight}
                                 className='initial-loader__image'
                                 classNamePath='initial-loader__mask'
                                 classNameRect='initial-loader__fill'
                             />
                         }
-                        { this.props.status && <h1 className='initial-loader__status'>{this.props.status}</h1>}
+                        { status && <h1 className='initial-loader__status'>{status}</h1> }
                     </React.Fragment>
                 }
             </div>