deriv-com · sandeep-deriv · Jun 28, 2024 · Jun 21, 2024 · Jun 24, 2024 · Jun 27, 2024
@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/deriv-logo.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Deriv V2</title>
+        <title>Deriv Bot</title>
     </head>
     <body class="body">
         <div id="root"></div>

@@ -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",

@@ -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

@@ -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) {

@@ -27,7 +27,7 @@ class DBot {
     async initWorkspace(public_path, store, api_helpers_store, is_mobile, is_dark_mode) {
         await loadBlockly(is_dark_mode);
         const recent_files = await getSavedWorkspaces();
-        api_base.init();
+
         this.interpreter = Interpreter();
         const that = this;
         window.Blockly.Blocks.trade_definition_tradetype.onchange = function (event) {

@@ -7,15 +7,14 @@ import PendingPromise from '../../utils/pending-promise';
 import { api_base } from './api-base';
 
 export default class ActiveSymbols {
-    constructor(ws, trading_times) {
+    constructor(trading_times) {
         this.active_symbols = [];
         this.disabled_symbols = config.DISABLED_SYMBOLS;
         this.disabled_submarkets = config.DISABLED_SUBMARKETS;
         this.init_promise = new PendingPromise();
         this.is_initialised = false;
         this.processed_symbols = {};
         this.trading_times = trading_times;
-        this.ws = ws;
     }
 
     async retrieveActiveSymbols(is_forced_update = false) {
@@ -27,9 +26,14 @@ export default class ActiveSymbols {
         }
 
         this.is_initialised = true;
-        const active_symbols = api_base?.active_symbols ?? [];
 
-        this.active_symbols = active_symbols;
+        if (api_base.has_active_symbols) {
+            this.active_symbols = api_base?.active_symbols ?? [];
+        } else {
+            await api_base.active_symbols_promise;
+            this.active_symbols = api_base?.active_symbols ?? [];
+        }
+
         this.processed_symbols = this.processActiveSymbols();
 
         // TODO: fix need to look into it as the method is not present

@@ -2,6 +2,7 @@ import { observer as globalObserver } from '../../utils/observer';
 import { doUntilDone, socket_state } from '../tradeEngine/utils/helpers';
 
 import { generateDerivApiInstance, getLoginId, getToken } from './appId';
+import chart_api from './chart-api';
 
 class APIBase {
     api;
@@ -12,26 +13,28 @@ 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.getActiveSymbols();
-            }
         }
+        chart_api.init();
     }
 
     getConnectionStatus() {
@@ -79,10 +82,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.active_symbols_promise = this.getActiveSymbols();
                 }
                 await this.subscribe();
                 this.account_info = authorize;
@@ -101,16 +104,19 @@ class APIBase {
     }
 
     getActiveSymbols = async () => {
-        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 => {

@@ -9,7 +9,7 @@ class ApiHelpers {
     constructor(api_helpers_store) {
         this.trading_times = new TradingTimes(api_helpers_store);
         this.contracts_for = new ContractsFor(api_helpers_store);
-        this.active_symbols = new ActiveSymbols(api_helpers_store.ws, this.trading_times);
+        this.active_symbols = new ActiveSymbols(this.trading_times);
         this.account_limits = new AccountLimits(api_helpers_store);
     }
 

@@ -0,0 +1,25 @@
+import { generateDerivApiInstance, getLoginId, getToken } from './appId';
+
+class ChartAPI {
+    api;
+
+    init = async () => {
+        this.api = await generateDerivApiInstance();
+        if (getLoginId()) {
+            await this.api.authorize(getToken().token);
+        }
+        this.getTime();
+    };
+
+    getTime() {
+        if (!this.time_interval) {
+            this.time_interval = setInterval(() => {
+                this.api.send({ time: 1 });
+            }, 30000);
+        }
+    }
+}
+
+const chart_api = new ChartAPI();
+
+export default chart_api;
@@ -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 [];

@@ -1,10 +1,5 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 
 import App from './app/App.tsx';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>
-);
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);