Bala/revert mobx6 (#6364)

* chore: revert mobx6

* chore: remove duplicate account_limit

packages/account/package.json

@@ -36,8 +36,8 @@
         "formik": "^2.1.4",
         "i18n-iso-countries": "^6.8.0",
         "js-cookie": "^2.2.1",
-        "mobx": "^6.6.1",
-        "mobx-react": "^7.5.1",
+        "mobx": "^5.15.7",
+        "mobx-react": "6.3.1",
         "onfido-sdk-ui": "8.1.1",
         "prop-types": "^15.7.2",
         "qrcode.react": "^1.0.0",

packages/appstore/package.json

@@ -36,8 +36,8 @@
         "@deriv/translations": "^1.0.0",
         "classnames": "^2.2.6",
         "formik": "^2.1.4",
-        "mobx": "^6.6.1",
-        "mobx-react-lite": "^3.4.0",
+        "mobx": "^5.15.7",
+        "mobx-react-lite": "^2.2.2",
         "object.fromentries": "^2.0.0",
         "prop-types": "^15.7.2",
         "react-router": "^5.2.0",

packages/bot-web-ui/package.json

@@ -66,7 +66,7 @@
     "dependencies": {
         "@deriv/bot-skeleton": "^1.0.0",
         "@deriv/components": "^1.0.0",
-        "@deriv/deriv-charts": "1.0.0",
+        "@deriv/deriv-charts": "^0.6.3",
         "@deriv/shared": "^1.0.0",
         "@deriv/translations": "^1.0.0",
         "classnames": "^2.2.6",
@@ -75,8 +75,8 @@
         "gh-pages": "^2.1.1",
         "immutable": "^3.8.2",
         "lz-string": "^1.4.4",
-        "mobx": "^6.6.1",
-        "mobx-react": "^7.5.1",
+        "mobx": "^5.15.7",
+        "mobx-react": "6.3.1",
         "pako": "^1.0.11",
         "prop-types": "^15.7.2",
         "react": "^16.14.0",

packages/bot-web-ui/src/stores/app-store.js

@@ -1,20 +1,16 @@
-import { action, reaction, makeObservable } from 'mobx';
+import { action, reaction } from 'mobx';
 import { isEuResidenceWithOnlyVRTC, showDigitalOptionsUnavailableError } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { runIrreversibleEvents, ApiHelpers, DBot } from '@deriv/bot-skeleton';
 
 export default class AppStore {
     constructor(root_store) {
-        makeObservable(this, {
-            onMount: action.bound,
-            onUnmount: action.bound,
-        });
-
         this.root_store = root_store;
         this.dbot_store = null;
         this.api_helpers_store = null;
     }
 
+    @action.bound
     onMount() {
         const { blockly_store, core, main_content } = this.root_store;
         const { client, common, ui } = core;
@@ -37,6 +33,7 @@ export default class AppStore {
         main_content.getCachedActiveTab();
     }
 
+    @action.bound
     onUnmount() {
         DBot.terminateBot();
 

packages/bot-web-ui/src/stores/blockly-store.js

@@ -1,22 +1,18 @@
-import { action, observable, makeObservable } from 'mobx';
+import { action, observable } from 'mobx';
 
 export default class BlocklyStore {
     constructor(root_store) {
-        makeObservable(this, {
-            is_loading: observable,
-            startLoading: action.bound,
-            endLoading: action.bound,
-        });
-
         this.root_store = root_store;
     }
 
-    is_loading = false;
+    @observable is_loading = false;
 
+    @action.bound
     startLoading() {
         this.is_loading = true;
     }
 
+    @action.bound
     endLoading() {
         this.is_loading = false;
     }

packages/bot-web-ui/src/stores/chart-store.js

@@ -1,4 +1,4 @@
-import { action, computed, observable, reaction, makeObservable } from 'mobx';
+import { action, computed, observable, reaction } from 'mobx';
 // import { tabs_title } from '../constants/bot-contents';
 import { ServerTime } from '@deriv/bot-skeleton';
 
@@ -7,21 +7,6 @@ let WS;
 
 export default class ChartStore {
     constructor(root_store) {
-        makeObservable(this, {
-            symbol: observable,
-            is_chart_loading: observable,
-            chart_type: observable,
-            granularity: observable,
-            is_contract_ended: computed,
-            onStartBot: action.bound,
-            onStopBot: action.bound,
-            updateSymbol: action.bound,
-            onSymbolChange: action.bound,
-            updateGranularity: action.bound,
-            updateChartType: action.bound,
-            setChartStatus: action.bound,
-        });
-
         this.root_store = root_store;
         WS = root_store.ws;
         const { run_panel } = root_store;
@@ -32,30 +17,34 @@ export default class ChartStore {
         );
     }
 
-    symbol;
-    is_chart_loading;
-    chart_type;
-    granularity;
+    @observable symbol;
+    @observable is_chart_loading;
+    @observable chart_type;
+    @observable granularity;
 
+    @computed
     get is_contract_ended() {
         const { transactions } = this.root_store;
 
         return transactions.contracts.length > 0 && transactions.contracts[0].is_ended;
     }
 
+    @action.bound
     onStartBot() {
         this.updateSymbol();
 
         // const { main_content } = this.root_store;
         // main_content.setActiveTab(tabs_title.CHART);
     }
 
+    @action.bound
     // eslint-disable-next-line
     onStopBot() {
         // const { main_content } = this.root_store;
         // main_content.setActiveTab(tabs_title.WORKSPACE);
     }
 
+    @action.bound
     updateSymbol() {
         const workspace = Blockly.derivWorkspace;
         const market_block = workspace.getAllBlocks().find(block => {
@@ -68,18 +57,22 @@ export default class ChartStore {
         }
     }
 
+    @action.bound
     onSymbolChange(symbol) {
         this.symbol = symbol;
     }
 
+    @action.bound
     updateGranularity(granularity) {
         this.granularity = granularity;
     }
 
+    @action.bound
     updateChartType(chart_type) {
         this.chart_type = chart_type;
     }
 
+    @action.bound
     setChartStatus(status) {
         this.is_chart_loading = status;
     }

packages/bot-web-ui/src/stores/download-store.js

@@ -1,14 +1,9 @@
-import { action, makeObservable } from 'mobx';
+import { action } from 'mobx';
 import { localize } from '@deriv/translations';
 import { log_types } from '@deriv/bot-skeleton';
 
 export default class DownloadStore {
     constructor(root_store) {
-        makeObservable(this, {
-            onClickDownloadTransaction: action.bound,
-            onClickDownloadJournal: action.bound,
-        });
-
         this.root_store = root_store;
     }
 
@@ -41,6 +36,7 @@ export default class DownloadStore {
         }
     };
 
+    @action.bound
     onClickDownloadTransaction = () => {
         // Transaction Array
         const transaction_csv_titles = [
@@ -89,6 +85,7 @@ export default class DownloadStore {
         transaction_link.parentNode.removeChild(transaction_link);
     };
 
+    @action.bound
     onClickDownloadJournal = () => {
         // Journal Array
         const journal_csv_titles = [[localize('Date'), localize('Time'), localize('Message')]];

packages/bot-web-ui/src/stores/flyout-help-store.js

@@ -1,28 +1,10 @@
-import { observable, action, runInAction, makeObservable } from 'mobx';
+import { observable, action, runInAction } from 'mobx';
 import { config } from '@deriv/bot-skeleton';
 import { help_content_config } from 'Utils/help-content/help-content.config';
 import * as help_strings from 'Utils/help-content/help-strings';
 
 export default class FlyoutHelpStore {
     constructor(root_store) {
-        makeObservable(this, {
-            block_node: observable,
-            block_type: observable,
-            examples: observable,
-            help_string: observable,
-            title: observable,
-            should_next_disable: observable,
-            should_previous_disable: observable,
-            active_helper: observable,
-            setHelpContent: action.bound,
-            setActiveHelper: action.bound,
-            onBackClick: action.bound,
-            onSequenceClick: action.bound,
-            initFlyoutHelp: action.bound,
-            updateSequenceButtons: action.bound,
-            setExamples: action.bound,
-        });
-
         this.root_store = root_store;
     }
 
@@ -34,15 +16,16 @@ export default class FlyoutHelpStore {
         sounds: false,
     };
 
-    block_node = null;
-    block_type = '';
-    examples = [];
-    help_string = {};
-    title = '';
-    should_next_disable = false;
-    should_previous_disable = false;
-    active_helper = '';
+    @observable block_node = null;
+    @observable block_type = '';
+    @observable examples = [];
+    @observable help_string = {};
+    @observable title = '';
+    @observable should_next_disable = false;
+    @observable should_previous_disable = false;
+    @observable active_helper = '';
 
+    @action.bound
     setHelpContent = async block_node => {
         const block_type = block_node.getAttribute('type');
         const title = Blockly.Blocks[block_type].meta().display_name;
@@ -89,10 +72,12 @@ export default class FlyoutHelpStore {
         return is_last ? filled_blocks_index[filled_blocks_index.length - 1] : filled_blocks_index[0];
     };
 
+    @action.bound
     setActiveHelper(active_helper) {
         this.active_helper = active_helper;
     }
 
+    @action.bound
     onBackClick() {
         const { toolbox, flyout } = this.root_store;
 
@@ -104,6 +89,7 @@ export default class FlyoutHelpStore {
         }
     }
 
+    @action.bound
     async onSequenceClick(should_go_next) {
         const current_block = Array.from(this.xml_list).find(xml => xml.getAttribute('type') === this.block_type);
 
@@ -146,6 +132,7 @@ export default class FlyoutHelpStore {
         }
     }
 
+    @action.bound
     initFlyoutHelp(block_node) {
         const { flyout, toolbox } = this.root_store;
         this.xml_list = toolbox.getCategoryContents(flyout.selected_category);
@@ -154,6 +141,7 @@ export default class FlyoutHelpStore {
         this.setHelpContent(block_node);
     }
 
+    @action.bound
     async updateSequenceButtons() {
         const current_block = Array.from(this.xml_list).find(xml => xml.getAttribute('type') === this.block_type);
         const current_index = Object.keys(this.xml_list_group).findIndex(
@@ -192,6 +180,7 @@ export default class FlyoutHelpStore {
         }, {});
     }
 
+    @action.bound
     setExamples(block_type) {
         const { toolbox } = this.root_store;
         const all_examples = [...toolbox.toolbox_examples.childNodes];