Merge pull request #13 from deriv-com/shafin/BOT-749/chore--remove-ws…

…-connection

[BOT] chore: remove core ws connection

package.json

@@ -8,6 +8,7 @@
     },
     "scripts": {
         "start": "vite",
+        "start:dev": "vite-live-preview --reload --port=8443",
         "build": "vite build",
         "preview": "vite preview",
         "test:lint": "prettier --log-level silent --write . && eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
@@ -18,7 +19,7 @@
     },
     "dependencies": {
         "@deriv-com/analytics": "^1.5.3",
-        "@deriv-com/api-hooks": "^0.0.22",
+        "@deriv-com/api-hooks": "^1.1.1",
         "@deriv-com/translations": "^1.2.4",
         "@deriv-com/ui": "latest",
         "@deriv-com/utils": "latest",
@@ -111,6 +112,7 @@
         "stylelint-selector-bem-pattern": "^4.0.0",
         "ts-jest": "^29.1.2",
         "typescript": "^5.2.2",
+        "vite-live-preview": "^0.1.6",
         "vite-plugin-svgr": "^4.2.0",
         "vite-require": "^0.2.3",
         "vite-tsconfig-paths": "^4.3.2",

src/app/app-content.jsx

@@ -118,7 +118,7 @@ const AppContent = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    return !is_loading ? (
+    return is_loading ? (
         <Loader />
     ) : (
         <>

src/app/index.ts

@@ -1,3 +1,3 @@
-import App from './app';
+import App from './App';
 
 export default App;

src/external/bot-skeleton/services/api/active-symbols.js

@@ -4,6 +4,8 @@ import { localize } from '@/utils/tmp/dummy';
 import { config } from '../../constants/config';
 import PendingPromise from '../../utils/pending-promise';
 
+import { api_base } from './api-base';
+
 export default class ActiveSymbols {
     constructor(ws, trading_times) {
         this.active_symbols = [];
@@ -25,11 +27,12 @@ export default class ActiveSymbols {
         }
 
         this.is_initialised = true;
-
-        const { active_symbols } = await this.ws.authorized.activeSymbols();
+        const active_symbols = api_base?.active_symbols ?? [];
 
         this.active_symbols = active_symbols;
         this.processed_symbols = this.processActiveSymbols();
+
+        // TODO: fix need to look into it as the method is not present
         this.trading_times.onMarketOpenCloseChanged = changes => {
             Object.keys(changes).forEach(symbol_name => {
                 const symbol_obj = this.active_symbols[symbol_name];

src/external/bot-skeleton/services/api/api-base.js

@@ -14,6 +14,7 @@ class APIBase {
     time_interval = null;
     has_activeSymbols = false;
     is_stopping = false;
+    active_symbols = [];
 
     async init(force_update = false) {
         if (getLoginId()) {
@@ -25,6 +26,11 @@ class APIBase {
             if (this.time_interval) clearInterval(this.time_interval);
             this.time_interval = null;
             this.getTime();
+        } else {
+            this.api = generateDerivApiInstance();
+            if (!this.has_activeSymbols) {
+                this.getActiveSymbols();
+            }
         }
     }
 
@@ -103,6 +109,7 @@ class APIBase {
             });
             this.pip_sizes = pip_sizes;
             this.toggleRunButton(false);
+            this.active_symbols = active_symbols;
         });
     };
 

src/external/bot-skeleton/services/api/trading-times.js

@@ -71,7 +71,7 @@ export default class TradingTimes {
 
     async updateTradingTimes() {
         const last_update_date = this.last_update_moment.format('YYYY-MM-DD');
-        const response = await this.ws.tradingTimes(last_update_date);
+        const response = await this.ws?.send({ trading_times: last_update_date });
 
         if (response.error) {
             return;

src/external/bot-skeleton/services/tradeEngine/trade/Balance.js

@@ -11,7 +11,7 @@ export default Engine =>
         observeBalance() {
             if (!api_base.api) return;
             const subscription = api_base.api.onMessage().subscribe(({ data }) => {
-                if (data.msg_type === 'balance') {
+                if (data?.msg_type === 'balance' && data?.balance) {
                     const {
                         balance: { balance: b, currency },
                     } = data;

src/hooks/useStore.tsx

@@ -1,4 +1,8 @@
-import { createContext, useContext, useMemo } from 'react';
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
+
+import { Loader } from '@deriv-com/ui';
+
+import { api_base } from '@/external/bot-skeleton';
 
 import Bot from '../external/bot-skeleton/scratch/dbot';
 import RootStore from '../stores';
@@ -10,11 +14,28 @@ type TStoreProvider = {
 };
 
 const StoreProvider: React.FC<TStoreProvider> = ({ children }) => {
-    const memoizedValue = useMemo(() => {
-        return new RootStore(Bot);
-    }, []);
+    const [store, setStore] = useState<RootStore | null>(null);
+    const initializingStore = useRef(false);
+
+    useEffect(() => {
+        const initializeStore = async () => {
+            await api_base.init();
+            const ws = api_base.api;
+            const rootStore = new RootStore(Bot, ws);
+            setStore(rootStore);
+        };
+
+        if (!store && !initializingStore.current) {
+            initializingStore.current = true;
+            initializeStore();
+        }
+    }, [store]);
+
+    if (!store) {
+        return <Loader />;
+    }
 
-    return <StoreContext.Provider value={memoizedValue}>{children}</StoreContext.Provider>;
+    return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
 };
 
 const useStore = () => {

src/stores/app-store.ts

@@ -25,7 +25,6 @@ export default class AppStore {
     disposeSwitchAccountListener: unknown;
     disposeLandingCompanyChangeReaction: unknown;
     disposeResidenceChangeReaction: unknown;
-    is_dbot_initialized: boolean;
 
     constructor(root_store: RootStore, core: TStores) {
         makeObservable(this, {
@@ -47,7 +46,6 @@ export default class AppStore {
         this.dbot_store = null;
         this.api_helpers_store = null;
         this.timer = null;
-        this.is_dbot_initialized = false;
     }
 
     getErrorForNonEuClients = () => ({
@@ -148,7 +146,6 @@ export default class AppStore {
 
         blockly_store.setLoading(true);
         await DBot.initWorkspace('/', this.dbot_store, this.api_helpers_store, ui.is_mobile, false);
-        this.is_dbot_initialized = true;
 
         blockly_store.setContainerSize();
         blockly_store.setLoading(false);
@@ -335,10 +332,6 @@ export default class AppStore {
             server_time: this.core.common.server_time,
             ws: this.root_store.ws,
         };
-
-        if (!this.is_dbot_initialized) {
-            this.onMount();
-        }
     };
 
     onClickOutsideBlockly = (event: Event) => {