zaki/fix_start_epoch_and_handle_chart_static_prop

package.json

@@ -126,7 +126,7 @@
     "react-router-dom": "5.0.0",
     "react-transition-group": "2.4.0",
     "sinon": "7.2.2",
-    "smartcharts-beta": "0.4.25",
+    "smartcharts-beta": "0.4.26",
     "tt-react-custom-scrollbars": "4.2.1-tt2",
     "url-polyfill": "1.0.9",
     "web-push-notifications": "3.2.15"

src/javascript/app/App/Components/Elements/PositionsDrawer/result-overlay.jsx

@@ -40,7 +40,7 @@ const ResultOverlay = ({
                         'result__caption--lost': (result === 'lost'),
                     }
                     )}
-                    onClick={() => onClick(contract_id)}
+                    onClick={() => onClick(contract_id, true)}
                 >
                     {
                         (result === 'won') ?

src/javascript/app/App/Containers/Layout/footer.jsx

@@ -22,6 +22,7 @@ const Footer = ({
     is_positions_drawer_on,
     is_settings_dialog_on,
     showFullBlur,
+    show_positions_toggle,
     togglePositionsDrawer,
     toggleSettingsDialog,
 }) => (
@@ -32,7 +33,7 @@ const Footer = ({
     >
         <div className='footer__links footer__links--left'>
             {
-                is_logged_in &&
+                (is_logged_in && show_positions_toggle) &&
                 <TogglePositions
                     is_positions_drawer_on={is_positions_drawer_on}
                     togglePositionsDrawer={togglePositionsDrawer}
@@ -64,6 +65,7 @@ Footer.propTypes = {
     is_logged_in              : PropTypes.bool,
     is_positions_drawer_on    : PropTypes.bool,
     is_settings_dialog_on     : PropTypes.bool,
+    show_positions_toggle     : PropTypes.bool,
     togglePositionsDrawer     : PropTypes.func,
     toggleSettingsDialog      : PropTypes.func,
 };
@@ -80,6 +82,7 @@ export default connect(
         is_positions_drawer_on    : ui.is_positions_drawer_on,
         is_settings_dialog_on     : ui.is_settings_dialog_on,
         showFullBlur              : ui.showFullBlur,
+        show_positions_toggle     : ui.show_positions_toggle,
         togglePositionsDrawer     : ui.togglePositionsDrawer,
         toggleSettingsDialog      : ui.toggleSettingsDialog,
     })

src/javascript/app/App/Containers/ProgressSliderStream/progress-slider-stream.jsx

@@ -30,12 +30,9 @@ const ProgressSliderStream = ({
 
 ProgressSliderStream.propTypes = {
     getPositionById: PropTypes.func,
-    id             : PropTypes.oneOfType(
-        PropTypes.number,
-        PropTypes.string
-    ),
-    is_loading : PropTypes.bool,
-    server_time: PropTypes.object,
+    id             : PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    is_loading     : PropTypes.bool,
+    server_time    : PropTypes.object,
 };
 
 export default connect(({ modules, common }) => ({

src/javascript/app/Modules/Contract/Containers/contract-link.jsx

@@ -11,7 +11,7 @@ const ContractLink = ({
     <a
         className={className}
         href='javascript:;'
-        onClick={() => openContract(contract_id)}
+        onClick={() => openContract(contract_id, true)}
     >
         {children}
     </a>

src/javascript/app/Modules/SmartChart/Containers/smart-chart.jsx

@@ -63,6 +63,7 @@ class Chart extends React.Component {
                 clearChart={this.props.should_clear_chart}
                 importedLayout={this.props.should_import_layout ? this.props.trade_chart_layout : null}
                 onExportLayout={this.props.should_export_layout ? this.props.exportLayout : null}
+                isStaticChart={this.props.is_static_chart}
             >
                 { this.props.markers_array.map((marker, idx) => (
                     <ChartMarker
@@ -88,6 +89,7 @@ Chart.propTypes = {
     is_contract_mode            : PropTypes.bool,
     is_mobile                   : PropTypes.bool,
     is_socket_opened            : PropTypes.bool,
+    is_static_chart             : PropTypes.bool,
     is_title_enabled            : PropTypes.bool,
     markers_array               : PropTypes.array,
     onMount                     : PropTypes.func,
@@ -120,6 +122,7 @@ export default connect(
         granularity         : modules.smart_chart.granularity,
         is_contract_mode    : modules.smart_chart.is_contract_mode,
         is_title_enabled    : modules.smart_chart.is_title_enabled,
+        is_static_chart     : modules.smart_chart.is_static_chart,
         markers_array       : modules.smart_chart.markers_array,
         onMount             : modules.smart_chart.onMount,
         onUnmount           : modules.smart_chart.onUnmount,

src/javascript/app/Modules/Trading/Containers/trade.jsx

@@ -13,10 +13,12 @@ const SmartChart = React.lazy(() => import(/* webpackChunkName: "smart_chart" */
 
 class Trade extends React.Component {
     componentDidMount() {
+        this.props.showPositions();
         this.props.onMount();
     }
 
     componentWillUnmount() {
+        this.props.hidePositions();
         if (this.props.is_contract_mode) {
             this.props.onCloseContract();
         }
@@ -74,6 +76,7 @@ Trade.propTypes = {
     chart_id         : PropTypes.string,
     chart_zoom       : PropTypes.number,
     contract_type    : PropTypes.string,
+    hidePositions    : PropTypes.func,
     is_contract_mode : PropTypes.bool,
     is_digit_contract: PropTypes.bool,
     is_mobile        : PropTypes.bool,
@@ -86,6 +89,7 @@ Trade.propTypes = {
     purchase_info    : PropTypes.object,
     scroll_to_epoch  : PropTypes.number,
     scroll_to_offset : PropTypes.number,
+    showPositions    : PropTypes.func,
     symbol           : PropTypes.string,
 };
 
@@ -105,6 +109,8 @@ export default connect(
         onUnmount                          : modules.trade.onUnmount,
         purchase_info                      : modules.trade.purchase_info,
         symbol                             : modules.trade.symbol,
+        hidePositions                      : ui.hidePositionsFooterToggle,
+        showPositions                      : ui.showPositionsFooterToggle,
         has_only_forward_starting_contracts: ui.has_only_forward_starting_contracts,
         is_mobile                          : ui.is_mobile,
         setHasOnlyForwardingContracts      : ui.setHasOnlyForwardingContracts,

src/javascript/app/Stores/Modules/Contract/contract-store.js

@@ -41,9 +41,11 @@ export default class ContractStore extends BaseStore {
 
     // ---- Normal properties ---
     forget_id;
-    chart_type         = 'mountain';
-    is_granularity_set = false;
-    is_left_epoch_set  = false;
+    chart_type          = 'mountain';
+    is_granularity_set  = false;
+    is_left_epoch_set   = false;
+    is_from_positions   = false;
+    is_ongoing_contract = false;
 
     // -------------------
     // ----- Actions -----
@@ -56,8 +58,16 @@ export default class ContractStore extends BaseStore {
         const end_time                 = getEndTime(contract_info);
         const should_update_chart_type = (!contract_info.tick_count && !this.is_granularity_set);
 
-        SmartChartStore.setContractStart(date_start);
+        if (!end_time) this.is_ongoing_contract = true;
+
+        // finish contracts if end_time exists
         if (end_time) {
+            if (!this.is_ongoing_contract) {
+                SmartChartStore.setStaticChart(true);
+            } else {
+                SmartChartStore.setStaticChart(false);
+            }
+            SmartChartStore.setContractStart(date_start);
             SmartChartStore.setContractEnd(end_time);
 
             if (should_update_chart_type) {
@@ -66,17 +76,25 @@ export default class ContractStore extends BaseStore {
                 SmartChartStore.updateGranularity(0);
                 SmartChartStore.updateChartType('mountain');
             }
+        // 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
+            // TODO: Fix issue with setting start_epoch and loading ongoing contract from positions
+            // if (this.is_from_positions) {
+            //     SmartChartStore.setContractStart(date_start);
+            // }
+
             if (contract_info.tick_count) {
                 SmartChartStore.updateGranularity(0);
                 SmartChartStore.updateChartType('mountain');
             }
             this.is_left_epoch_set = true;
             SmartChartStore.setChartView(contract_info.purchase_time);
-        } else if (should_update_chart_type) {
+        }
+        if (should_update_chart_type && !contract_info.tick_count) {
             this.handleChartType(SmartChartStore, date_start, null);
-        } else if (this.is_granularity_set) {
+        }
+        if (this.is_granularity_set) {
             if (getChartType(date_start, null) !== this.chart_type) {
                 this.is_granularity_set = false;
             }
@@ -87,14 +105,15 @@ export default class ContractStore extends BaseStore {
     }
 
     @action.bound
-    onMount(contract_id) {
+    onMount(contract_id, is_from_positions) {
         if (contract_id === +this.contract_id) return;
         if (this.root_store.modules.smart_chart.is_contract_mode) this.onCloseContract();
         this.onSwitchAccount(this.accountSwitcherListener.bind(null));
         this.has_error         = false;
         this.error_message     = '';
         this.contract_id       = contract_id;
         this.smart_chart       = this.root_store.modules.smart_chart;
+        this.is_from_positions = is_from_positions;
 
         if (contract_id) {
             this.smart_chart.saveAndClearTradeChartLayout();
@@ -112,17 +131,19 @@ export default class ContractStore extends BaseStore {
     @action.bound
     onCloseContract() {
         this.forgetProposalOpenContract();
-        this.chart_type         = 'mountain';
-        this.contract_id        = null;
-        this.contract_info      = {};
-        this.digits_info        = {};
-        this.error_message      = '';
-        this.forget_id          = null;
-        this.has_error          = false;
-        this.is_granularity_set = false;
-        this.is_sell_requested  = false;
-        this.is_left_epoch_set  = false;
-        this.sell_info          = {};
+        this.chart_type          = 'mountain';
+        this.contract_id         = null;
+        this.contract_info       = {};
+        this.digits_info         = {};
+        this.error_message       = '';
+        this.forget_id           = null;
+        this.has_error           = false;
+        this.is_granularity_set  = false;
+        this.is_sell_requested   = false;
+        this.is_left_epoch_set   = false;
+        this.is_from_positions   = false;
+        this.is_ongoing_contract = false;
+        this.sell_info           = {};
 
         this.smart_chart.cleanupContractChartView();
         this.smart_chart.applySavedTradeChartLayout();

src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js

@@ -20,6 +20,7 @@ export default class SmartChartStore extends BaseStore {
     @observable markers  = observable.object({});
 
     @observable is_contract_mode = false;
+    @observable is_static_chart  = false;
     @observable is_title_enabled = true;
 
     @observable start_epoch;
@@ -63,6 +64,7 @@ export default class SmartChartStore extends BaseStore {
         this.setContractMode(false);
         this.setContractStart(null);
         this.setContractEnd(null);
+        this.setStaticChart(false);
     }
 
     @action.bound
@@ -180,6 +182,11 @@ export default class SmartChartStore extends BaseStore {
         this.should_clear_chart = true;
     }
 
+    @action.bound
+    setStaticChart(bool) {
+        this.is_static_chart = bool;
+    }
+
     @computed
     get barriers_array() {
         return barriersObjectToArray(this.barriers);

src/javascript/app/Stores/ui-store.js

@@ -52,8 +52,9 @@ export default class UIStore extends BaseStore {
     @observable duration_h             = 1;
     @observable duration_d             = 1;
 
-    @observable is_fully_blurred = false;
-    @observable is_app_blurred   = false;
+    @observable is_fully_blurred      = false;
+    @observable is_app_blurred        = false;
+    @observable show_positions_toggle = true;
 
     getDurationFromUnit = (unit) => this[`duration_${unit}`];
 
@@ -177,6 +178,16 @@ export default class UIStore extends BaseStore {
         return this.is_dark_mode_on;
     }
 
+    @action.bound
+    showPositionsFooterToggle() {
+        this.show_positions_toggle = true;
+    }
+
+    @action.bound
+    hidePositionsFooterToggle() {
+        this.show_positions_toggle = false;
+    }
+
     @action.bound
     toggleSettingsDialog() {
         this.is_settings_dialog_on = !this.is_settings_dialog_on;

src/sass/app/_common/form/input-field.scss

@@ -90,30 +90,29 @@
         vertical-align: middle;
         width: 16px;
         height: 16px;
-        border-radius: 1px;
-        border-width: 0.5px;
+        border-radius: 0;
         padding: 0;
         @include themify($themes) {
             background-color: themed('background_container_color');
-            border-color: themed('text_secondary_color');
+            border: 1px solid themed('text_secondary_color');
         }
 
         &:active {
             @include themify($themes) {
                 border-color: $COLOR_ORANGE;
-                border-radius: 1px;
+                border-radius: 0;
                 box-shadow: none;
             }
         }
         &:hover {
             @include themify($themes) {
                 border-color: themed('text_color');
-                border-radius: 1px;
+                border-radius: 0;
                 box-shadow: none;
             }
         }
         &:focus {
-            border-radius: 1px;
+            border-radius: 0;
             box-shadow: none;
         }
         &:checked {