fix: 🔥 removed core ws and fixing chart

deriv-com · Jun 24, 2024 · b5186d9 · b5186d9
1 parent 1702a71
commit b5186d9
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     },
     "scripts": {
         "start": "vite",
-        "start:dev": "vite-live-preview --reload --port=8443",
+        "start:dev": "vite-live-preview --reload --port=8444",
         "build": "vite build",
         "preview": "vite preview",
         "test:lint": "prettier --log-level silent --write . && eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
@@ -113,6 +113,7 @@
         "ts-jest": "^29.1.2",
         "typescript": "^5.2.2",
         "vite-live-preview": "^0.1.6",
+        "vite-plugin-static-copy": "^1.0.5",
         "vite-plugin-svgr": "^4.2.0",
         "vite-require": "^0.2.3",
         "vite-tsconfig-paths": "^4.3.2",

diff --git a/src/app/app-content.jsx b/src/app/app-content.jsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import { ToastContainer } from 'react-toastify';
 
+import { setSmartChartsPublicPath } from '@deriv/deriv-charts';
 import { Loader } from '@deriv-com/ui';
 
+import { getUrlBase } from '@/components/shared';
 import TransactionDetailsModal from '@/components/transaction-details';
 import { api_base, ApiHelpers, ServerTime } from '@/external/bot-skeleton';
 import { useStore } from '@/hooks/useStore';
@@ -57,6 +59,10 @@ const AppContent = () => {
         }
     };
 
+    React.useEffect(() => {
+        setSmartChartsPublicPath(getUrlBase('/js/smartcharts/'));
+    }, []);
+
     React.useEffect(() => {
         // Listen for proposal open contract messages to check
         // if there is any active contract from bot still running

diff --git a/src/components/trade-animation/trade-animation.tsx b/src/components/trade-animation/trade-animation.tsx
@@ -31,16 +31,15 @@ const TradeAnimation = observer(({ className, should_show_overlay }: TTradeAnima
         onStopBotClick,
         performSelfExclusionCheck,
     } = run_panel;
-    const { account_status } = client;
+    const { account_status, is_logged_in } = client;
     const cashier_validation = account_status?.cashier_validation;
     const [shouldDisable, setShouldDisable] = React.useState(false);
     const is_unavailable_for_payment_agent = cashier_validation?.includes('WithdrawServiceUnavailableForPA');
 
     // perform self-exclusion checks which will be stored under the self-exclusion-store
     React.useEffect(() => {
-        performSelfExclusionCheck();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        if (is_logged_in) performSelfExclusionCheck();
+    }, [is_logged_in, performSelfExclusionCheck]);
 
     React.useEffect(() => {
         if (shouldDisable) {

diff --git a/src/external/bot-skeleton/services/api/active-symbols.js b/src/external/bot-skeleton/services/api/active-symbols.js
@@ -27,7 +27,7 @@ export default class ActiveSymbols {
 
         this.is_initialised = true;
 
-        if (api_base.has_activeSymbols) {
+        if (api_base.has_active_symbols) {
             this.active_symbols = api_base?.active_symbols ?? [];
         } else {
             await api_base.active_symbols_promise;

diff --git a/src/external/bot-skeleton/services/api/api-base.js b/src/external/bot-skeleton/services/api/api-base.js
@@ -12,27 +12,26 @@ class APIBase {
     is_running = false;
     subscriptions = [];
     time_interval = null;
-    has_activeSymbols = false;
+    has_active_symbols = false;
     is_stopping = false;
     active_symbols = [];
 
     active_symbols_promise = null;
 
     async init(force_update = false) {
+        this.toggleRunButton(true);
+        if (force_update) this.terminate();
+        this.api = generateDerivApiInstance();
+        if (!this.has_active_symbols) {
+            this.active_symbols_promise = this.getActiveSymbols();
+        }
+        this.initEventListeners();
+        if (this.time_interval) clearInterval(this.time_interval);
+        this.time_interval = null;
+        this.getTime();
+
         if (getLoginId()) {
-            this.toggleRunButton(true);
-            if (force_update) this.terminate();
-            this.api = generateDerivApiInstance();
-            this.initEventListeners();
             await this.authorizeAndSubscribe();
-            if (this.time_interval) clearInterval(this.time_interval);
-            this.time_interval = null;
-            this.getTime();
-        } else {
-            this.api = generateDerivApiInstance();
-            if (!this.has_activeSymbols) {
-                this.active_symbols_promise = this.getActiveSymbols();
-            }
         }
     }
 
@@ -81,10 +80,10 @@ class APIBase {
             this.api.authorize(this.token);
             try {
                 const { authorize } = await this.api.expectResponse('authorize');
-                if (this.has_activeSymbols) {
+                if (this.has_active_symbols) {
                     this.toggleRunButton(false);
                 } else {
-                    this.getActiveSymbols = this.getActiveSymbols();
+                    this.active_symbols_promise = this.getActiveSymbols();
                 }
                 await this.subscribe();
                 this.account_info = authorize;
@@ -103,16 +102,19 @@ class APIBase {
     }
 
     getActiveSymbols = async () => {
-        await doUntilDone(() => this.api.send({ active_symbols: 'brief' })).then(({ active_symbols = [] }) => {
-            const pip_sizes = {};
-            if (active_symbols.length) this.has_activeSymbols = true;
-            active_symbols.forEach(({ symbol, pip }) => {
-                pip_sizes[symbol] = +(+pip).toExponential().substring(3);
-            });
-            this.pip_sizes = pip_sizes;
-            this.toggleRunButton(false);
-            this.active_symbols = active_symbols;
-        });
+        await doUntilDone(() => this.api.send({ active_symbols: 'brief' })).then(
+            ({ active_symbols = [], error = {} }) => {
+                const pip_sizes = {};
+                if (active_symbols.length) this.has_active_symbols = true;
+                active_symbols.forEach(({ symbol, pip }) => {
+                    pip_sizes[symbol] = +(+pip).toExponential().substring(3);
+                });
+                this.pip_sizes = pip_sizes;
+                this.toggleRunButton(false);
+                this.active_symbols = active_symbols;
+                return active_symbols || error;
+            }
+        );
     };
 
     toggleRunButton = toggle => {

diff --git a/src/external/bot-skeleton/services/api/contracts-for.js b/src/external/bot-skeleton/services/api/contracts-for.js
@@ -1,6 +1,8 @@
 import { config } from '../../constants/config';
 import PendingPromise from '../../utils/pending-promise';
 
+import { api_base } from './api-base';
+
 export default class ContractsFor {
     constructor({ ws, server_time }) {
         this.cache_age_in_min = 10;
@@ -196,7 +198,7 @@ export default class ContractsFor {
             }
 
             this.retrieving_contracts_for[symbol] = new PendingPromise();
-            const response = await this.ws.send({ contracts_for: symbol });
+            const response = await api_base.api.send({ contracts_for: symbol });
 
             if (response.error) {
                 return [];

diff --git a/src/pages/chart/chart.tsx b/src/pages/chart/chart.tsx
@@ -2,9 +2,8 @@ import { useEffect } from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 
-import { ChartTitle, setSmartChartsPublicPath, SmartChart } from '@deriv/deriv-charts';
+import { ChartTitle, SmartChart } from '@deriv/deriv-charts';
 
-import { getUrlBase } from '@/components/shared';
 import { useStore } from '@/hooks/useStore';
 
 import ToolbarWidgets from './toolbar-widgets';
@@ -27,6 +26,7 @@ const Chart = observer(({ show_digits_stats }: { show_digits_stats: boolean }) =
         wsForgetStream,
         wsSendRequest,
         wsSubscribe,
+        updateSymbol,
     } = chart_store;
     const {
         ui: { is_mobile, is_desktop },
@@ -44,8 +44,10 @@ const Chart = observer(({ show_digits_stats }: { show_digits_stats: boolean }) =
     };
 
     useEffect(() => {
-        setSmartChartsPublicPath(getUrlBase('/js/smartcharts/'));
-    }, []);
+        updateSymbol();
+    }, [updateSymbol]);
+
+    if (!symbol) return null;
 
     return (
         <div

diff --git a/src/stores/load-modal-store.ts b/src/stores/load-modal-store.ts
@@ -163,7 +163,7 @@ export default class LoadModalStore implements ILoadModalStore {
 
     get selected_strategy(): TStrategy {
         return (
-            this.dashboard_strategies.find((ws: { id: string }) => ws.id === this.selected_strategy_id) ??
+            this.dashboard_strategies.find((workspace: { id: string }) => workspace.id === this.selected_strategy_id) ??
             this.dashboard_strategies[0]
         );
     }

diff --git a/src/stores/root-store.ts b/src/stores/root-store.ts
@@ -43,7 +43,6 @@ export default class RootStore {
     public data_collection_store: DataCollectionStore;
 
     core = {};
-    ws = null;
 
     constructor(dbot: unknown) {
         this.dbot = dbot;

diff --git a/src/stores/self-exclusion-store.ts b/src/stores/self-exclusion-store.ts
@@ -67,8 +67,8 @@ export default class SelfExclusionStore {
 
     async checkRestriction() {
         if (api_base.api) {
-            api_base.api.getSelfExclusion().then(response => {
-                const { max_losses: maxLosses } = response.get_self_exclusion;
+            api_base.api.getSelfExclusion().then(({ get_self_exclusion }) => {
+                const { max_losses: maxLosses } = get_self_exclusion;
                 if (maxLosses) {
                     this.setApiMaxLosses(maxLosses);
                 }

diff --git a/src/stores/summary-card-store.ts b/src/stores/summary-card-store.ts
@@ -7,6 +7,7 @@ import { getIndicativePrice, isEqualObject, isMultiplierContract } from '@/compo
 import { TContractInfo } from '@/components/summary/summary-card.types';
 import { getValidationRules, TValidationRuleIndex, TValidationRules } from '@/constants/contract';
 import { contract_stages } from '@/constants/contract-stage';
+import { api_base } from '@/external/bot-skeleton';
 import { getContractUpdateConfig } from '@/utils/multiplier';
 import Validator from '@/utils/tmp/validator';
 
@@ -212,7 +213,7 @@ export default class SummaryCardStore {
         const limit_order = this.getLimitOrder();
 
         if (this.contract_info?.contract_id) {
-            this.root_store.ws.contractUpdate(this.contract_info?.contract_id, limit_order).then(response => {
+            api_base.api.contractUpdate(this.contract_info?.contract_id, limit_order).then(response => {
                 if (response.error) {
                     this.root_store.run_panel.showContractUpdateErrorDialog(response.error.message);
                     return;

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
 import svgr from 'vite-plugin-svgr';
 import { viteRequire } from 'vite-require';
 import tsconfigPaths from 'vite-tsconfig-paths';
@@ -28,6 +29,14 @@ export default defineConfig({
                 }
             },
         },
+        viteStaticCopy({
+            targets: [
+                {
+                    src: 'node_modules/@deriv/deriv-charts/dist/*',
+                    dest: 'js/smartcharts',
+                },
+            ],
+        }),
     ],
     css: {
         preprocessorOptions: {
@@ -47,6 +56,6 @@ export default defineConfig({
         },
     },
     server: {
-        port: 8443,
+        port: 8444,
     },
 });