Mobx p2p

packages/account/package.json

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

packages/account/src/Components/self-exclusion/self-exclusion-inputs.jsx

@@ -206,7 +206,7 @@ const SessionAndLoginLimitsInputs = () => {
                                 min_date={toMoment().add(1, 'days').format('YYYY-MM-DD')}
                                 max_date={toMoment().add(6, 'weeks').format('YYYY-MM-DD')}
                                 {...field}
-                                should_show_today={false}
+                                should_show_today="false"
                                 className='da-self-exclusion__input'
                                 label={localize('Date')}
                                 value={values.timeout_until && epochToMoment(values.timeout_until)}

packages/appstore/package.json

@@ -36,8 +36,8 @@
         "@deriv/translations": "^1.0.0",
         "classnames": "^2.2.6",
         "formik": "^2.1.4",
-        "mobx": "^5.15.7",
-        "mobx-react-lite": "^2.2.2",
+        "mobx": "6.5.0",
+        "mobx-react-lite": "3.3.0",
         "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": "^0.6.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": "^5.15.7",
-    "mobx-react": "6.3.1",
+    "mobx": "6.5.0",
+    "mobx-react": "7.3.0",
     "pako": "^1.0.11",
     "prop-types": "^15.7.2",
     "react": "^16.14.0",

packages/cashier/package.json

@@ -43,8 +43,8 @@
         "classnames": "^2.2.6",
         "formik": "^2.1.4",
         "loadjs": "^4.2.0",
-        "mobx": "^5.15.7",
-        "mobx-react": "6.3.1",
+        "mobx": "6.5.0",
+        "mobx-react": "7.3.0",
         "moment": "^2.29.2",
         "prop-types": "^15.7.2",
         "qrcode.react": "^1.0.0",

packages/cashier/src/Stores/account-prompt-dialog-store.js

@@ -1,17 +1,29 @@
-import { observable, action } from 'mobx';
+import { observable, action, makeObservable } from 'mobx';
 import { isCryptocurrency } from '@deriv/shared';
 
 export default class AccountPromptDialogStore {
     constructor(root_store) {
+        makeObservable(this, {
+            should_show: observable,
+            is_confirmed: observable,
+            last_location: observable,
+            current_location: observable,
+            shouldNavigateAfterPrompt: action.bound,
+            resetLastLocation: action.bound,
+            resetIsConfirmed: action.bound,
+            onConfirm: action.bound,
+            onCancel: action.bound,
+            continueRoute: action.bound
+        });
+
         this.root_store = root_store;
     }
 
-    @observable should_show = false;
-    @observable is_confirmed = false;
-    @observable last_location = null;
-    @observable current_location = null;
+    should_show = false;
+    is_confirmed = false;
+    last_location = null;
+    current_location = null;
 
-    @action.bound
     shouldNavigateAfterPrompt(next_location, current_location) {
         if (!this.is_confirmed) {
             this.last_location = next_location;
@@ -20,17 +32,14 @@ export default class AccountPromptDialogStore {
         }
     }
 
-    @action.bound
     resetLastLocation() {
         this.last_location = null;
     }
 
-    @action.bound
     resetIsConfirmed() {
         this.is_confirmed = false;
     }
 
-    @action.bound
     async onConfirm() {
         const { client, modules } = this.root_store;
         const { accounts_list } = modules.cashier.account_transfer;
@@ -55,12 +64,10 @@ export default class AccountPromptDialogStore {
         }
     }
 
-    @action.bound
     onCancel() {
         this.should_show = false;
     }
 
-    @action.bound
     continueRoute() {
         if (this.is_confirmed && this.last_location) {
             this.root_store.common.routeTo(this.last_location);

packages/cashier/src/Stores/account-transfer-store.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { action, computed, observable } from 'mobx';
+import { action, computed, observable, makeObservable } from 'mobx';
 import {
     formatMoney,
     isEmptyObject,
@@ -39,35 +39,77 @@ const getSelectedError = (selected_value, is_from_account) => {
 
 export default class AccountTransferStore {
     constructor({ WS, root_store }) {
+        makeObservable(this, {
+            accounts_list: observable,
+            container: observable,
+            error: observable,
+            has_no_account: observable,
+            has_no_accounts_balance: observable,
+            is_transfer_confirm: observable,
+            is_transfer_successful: observable,
+            is_mt5_transfer_in_progress: observable,
+            minimum_fee: observable,
+            receipt: observable,
+            selected_from: observable,
+            selected_to: observable,
+            account_transfer_amount: observable,
+            transfer_fee: observable,
+            transfer_limit: observable,
+            is_account_transfer_visible: computed,
+            is_transfer_locked: computed,
+            setBalanceByLoginId: action.bound,
+            setBalanceSelectedFrom: action.bound,
+            setBalanceSelectedTo: action.bound,
+            onMountAccountTransfer: action.bound,
+            setHasNoAccountsBalance: action.bound,
+            setHasNoAccount: action.bound,
+            setTransferFee: action.bound,
+            setMinimumFee: action.bound,
+            setTransferLimit: action.bound,
+            sortAccountsTransfer: action.bound,
+            setSelectedFrom: action.bound,
+            setSelectedTo: action.bound,
+            setAccounts: action.bound,
+            setIsTransferConfirm: action.bound,
+            setAccountTransferAmount: action.bound,
+            setIsTransferSuccessful: action.bound,
+            setIsMT5TransferInProgress: action.bound,
+            setReceiptTransfer: action.bound,
+            onChangeTransferFrom: action.bound,
+            onChangeTransferTo: action.bound,
+            resetAccountTransfer: action.bound,
+            setTransferPercentageSelectorResult: action.bound,
+            validateTransferFromAmount: action.bound,
+            validateTransferToAmount: action.bound
+        });
+
         this.root_store = root_store;
         this.WS = WS;
     }
 
-    @observable accounts_list = [];
-    @observable container = Constants.containers.account_transfer;
-    @observable error = new ErrorStore();
-    @observable has_no_account = false;
-    @observable has_no_accounts_balance = false;
-    @observable is_transfer_confirm = false;
-    @observable is_transfer_successful = false;
-    @observable is_mt5_transfer_in_progress = false;
-    @observable minimum_fee = null;
-    @observable receipt = {};
-    @observable selected_from = {};
-    @observable selected_to = {};
-    @observable account_transfer_amount = '';
-    @observable transfer_fee = null;
-    @observable transfer_limit = {};
-
-    @computed
+    accounts_list = [];
+    container = Constants.containers.account_transfer;
+    error = new ErrorStore();
+    has_no_account = false;
+    has_no_accounts_balance = false;
+    is_transfer_confirm = false;
+    is_transfer_successful = false;
+    is_mt5_transfer_in_progress = false;
+    minimum_fee = null;
+    receipt = {};
+    selected_from = {};
+    selected_to = {};
+    account_transfer_amount = '';
+    transfer_fee = null;
+    transfer_limit = {};
+
     get is_account_transfer_visible() {
         const { has_maltainvest_account, landing_company_shortcode, residence } = this.root_store.client;
         // cashier Transfer account tab is hidden for iom clients
         // check for residence to hide the tab before creating a real money account
         return residence !== 'im' && (landing_company_shortcode !== 'malta' || has_maltainvest_account);
     }
 
-    @computed
     get is_transfer_locked() {
         const {
             is_financial_account,
@@ -84,17 +126,14 @@ export default class AccountTransferStore {
         return need_financial_assessment && this.error.is_ask_financial_risk_approval;
     }
 
-    @action.bound
     setBalanceByLoginId(loginid, balance) {
         this.accounts_list.find(acc => loginid === acc.value).balance = balance;
     }
 
-    @action.bound
     setBalanceSelectedFrom(balance) {
         this.selected_from.balance = balance;
     }
 
-    @action.bound
     setBalanceSelectedTo(balance) {
         this.selected_to.balance = balance;
     }
@@ -103,7 +142,6 @@ export default class AccountTransferStore {
     // 1. fiat to crypto & vice versa
     // 2. fiat to mt & vice versa
     // 3. crypto to mt & vice versa
-    @action.bound
     async onMountAccountTransfer() {
         const { client, modules } = this.root_store;
         const { onMountCommon, setLoading, setOnRemount } = modules.cashier.general_store;
@@ -183,17 +221,14 @@ export default class AccountTransferStore {
         return can_transfer;
     }
 
-    @action.bound
     setHasNoAccountsBalance(has_no_accounts_balance) {
         this.has_no_accounts_balance = has_no_accounts_balance;
     }
 
-    @action.bound
     setHasNoAccount(has_no_account) {
         this.has_no_account = has_no_account;
     }
 
-    @action.bound
     setTransferFee() {
         const transfer_fee = getPropertyValue(getCurrencies(), [
             this.selected_from.currency,
@@ -204,14 +239,12 @@ export default class AccountTransferStore {
         this.transfer_fee = Number(transfer_fee || 0);
     }
 
-    @action.bound
     setMinimumFee() {
         const decimals = getDecimalPlaces(this.selected_from.currency);
         // we need .toFixed() so that it doesn't display in scientific notation, e.g. 1e-8 for currencies with 8 decimal places
         this.minimum_fee = (1 / Math.pow(10, decimals)).toFixed(decimals);
     }
 
-    @action.bound
     setTransferLimit() {
         const is_mt_transfer = this.selected_from.is_mt || this.selected_to.is_mt;
         const is_dxtrade_transfer = this.selected_from.is_dxtrade || this.selected_to.is_dxtrade;
@@ -242,7 +275,6 @@ export default class AccountTransferStore {
         };
     }
 
-    @action.bound
     async sortAccountsTransfer(response_accounts) {
         const transfer_between_accounts = response_accounts || (await this.WS.authorized.transferBetweenAccounts());
         if (!this.accounts_list.length) {
@@ -378,49 +410,40 @@ export default class AccountTransferStore {
         this.setAccounts(arr_accounts);
     }
 
-    @action.bound
     setSelectedFrom(obj_values) {
         this.selected_from = obj_values;
     }
 
-    @action.bound
     setSelectedTo(obj_values) {
         this.selected_to = obj_values;
     }
 
-    @action.bound
     setAccounts(arr_accounts) {
         this.accounts_list = arr_accounts;
     }
 
-    @action.bound
     setIsTransferConfirm(is_transfer_confirm) {
         this.is_transfer_confirm = is_transfer_confirm;
     }
 
-    @action.bound
     setAccountTransferAmount(amount) {
         this.account_transfer_amount = amount;
     }
 
-    @action.bound
     setIsTransferSuccessful(is_transfer_successful) {
         this.is_transfer_successful = is_transfer_successful;
     }
 
-    @action.bound
     setIsMT5TransferInProgress(is_mt5_transfer_in_progress) {
         this.is_mt5_transfer_in_progress = is_mt5_transfer_in_progress;
     }
 
-    @action.bound
     setReceiptTransfer({ amount }) {
         this.receipt = {
             amount_transferred: amount,
         };
     }
 
-    @action.bound
     onChangeTransferFrom({ target }) {
         this.error.setErrorMessage('');
         this.selected_from.error = '';
@@ -455,7 +478,6 @@ export default class AccountTransferStore {
         this.setTransferLimit();
     }
 
-    @action.bound
     onChangeTransferTo({ target }) {
         this.error.setErrorMessage('');
         this.selected_to.error = '';
@@ -551,13 +573,11 @@ export default class AccountTransferStore {
         return transfer_between_accounts;
     };
 
-    @action.bound
     resetAccountTransfer = async () => {
         this.setIsTransferConfirm(false);
         this.setTransferLimit();
     };
 
-    @action.bound
     setTransferPercentageSelectorResult(amount) {
         const { crypto_fiat_converter, general_store } = this.root_store.modules.cashier;
 
@@ -579,7 +599,6 @@ export default class AccountTransferStore {
         general_store.percentageSelectorSelectionStatus(false);
     }
 
-    @action.bound
     validateTransferFromAmount() {
         const { converter_from_amount, setConverterFromError } = this.root_store.modules.cashier.crypto_fiat_converter;
 
@@ -602,7 +621,6 @@ export default class AccountTransferStore {
         }
     }
 
-    @action.bound
     validateTransferToAmount() {
         const { converter_to_amount, setConverterToError } = this.root_store.modules.cashier.crypto_fiat_converter;