mayuran/DPROD-2759/ws_improvements (#7070)

* fix: wip

* fix: dummy initial

* fix: check socket

* fix: added conditionsa

* fix: ws call

* fix: ws reconnect

* fix: check api manager

* chore: trigger vercel

* fix: ws socket calls

* fix: session storage

* fix: window added

* fix: addded window

* fix: remove unwanted code

* fix: check

* fix: kogs

* fix: ready state

* fix: code clear

* fix: added logs

* fix: minor issue in reconnect

* fix: loading changed logic

* fix: remove session storage

* Revert "fix: remove session storage"

This reverts commit abb84c3.

* fix: remove session storage

* fix: improvement of use WS

crowdin/messages.json

@@ -27,7 +27,6 @@
   "26480598": "General",
   "26596220": "Finance",
   "27830635": "Deriv (V) Ltd",
-  "28675270": "Chief Financial Officer",
   "28681430": "Join great marketing minds at Deriv’s office in Ciudad del Este, Paraguay. Be part of a vibrant team that develops the company’s growth in the region.",
   "29394238": "<0> 280,000</0>",
   "33219178": "We'll pay your IB commission into your MT5 (Derived account daily).",
@@ -40,7 +39,6 @@
   "39595561": "See how your bot is performing as it executes each trade and receive notifications via Telegram.",
   "41078219": "Get into the Deriv Trader experience",
   "41570825": "Are High/Low Ticks options available on Deriv Trader?",
-  "48132512": "Join and grow with us.",
   "48235639": "The potential payout and loss (your initial stake) amounts are clearly displayed before you open the trade.",
   "48469443": "Complete <0>this form</0>, and we'll get in touch with you in a couple of days.<br/>You'll need a real Deriv trading account, too. If you don't have one, sign up <1>here</1>.",
   "48763975": "What if I am unhappy with the outcome of my complaint?",
@@ -83,7 +81,6 @@
   "71535160": "Calculate the overnight fees for holding any open positions. The fees can be positive or negative depending on your swap rate.",
   "71630191": "Do not share your account information and other personal details with anyone via Telegram.",
   "71650838": "Speak simply and plainly, and not hide behind ambiguity",
-  "73765361": "Chief Audit Executive",
   "74138086": "Take control of your trades on Deriv MT5",
   "74593350": "3. Select Real account or Demo account.",
   "76083876": "<0>A social media admin</0><br/>Promote our products and services on your social media pages, and earn commission when you convert your audience into traders.",
@@ -365,7 +362,6 @@
   "357273365": "For DEX Indices, a deal of 3 lots of the DEX 600 DOWN Index for a price of USD 6000 will pay out USD 0.5 in commission based on the following formula:",
   "358257887": "Once your submitted document has been approved, go to Cashier > DP2P to register your Deriv P2P account.",
   "358369253": "Can I close In/Out options before the end of the trade duration?",
-  "358838306": "Vice President of Customer Support",
   "360357815": "High/Low ticks | Digital options contract | Deriv",
   "361051814": "Let’s say you want to calculate the take profit level and pip value when you want to sell 3 lots of Volatility 50 Index priced at 249.5961 USD with a take profit amount of 84 USD.",
   "364422126": "Available 24/7 with varying levels of volatility, our synthetic indices are priced based on algorithms that are audited for fairness by an independent third party.",
@@ -406,7 +402,6 @@
   "396323780": "DEX Indices",
   "396992773": "Deriv is the best broker in the world so far in terms of the assets they offer, ease of withdrawals and deposits, plus other services. Keep on giving us the best, Deriv!",
   "399056226": "How can I recognise phishing websites?",
-  "400968378": "locations",
   "401039438": "Have consistent, regular sign ups via your referral link",
   "401450104": "> 3 - 5 billion",
   "401498558": "Deriv (FX) Ltd (Company No. LL13394), incorporated on the 18th January 2017, is registered in the Federal Territory of Labuan (Malaysia) with its registered office located at Unit No. 3A-16, Level 3A, Labuan Times Square, Jalan Merdeka, 87000, Federal Territory of Labuan, Malaysia. Deriv (FX) Ltd is licensed by the Labuan Financial Services Authority <0>(view licence)</0> and is a member of the <1>Labuan Fintech Association</1>.",
@@ -489,8 +484,6 @@
   "469798381": "Years of service",
   "470277541": "Maximum duration",
   "472630909": "It will take 1-3 working days for your application to be reviewed.",
-  "472915014": "Deriv is one of the world’s largest online brokers. We offer CFDs and other derivatives on forex, stocks & indices, cryptocurrencies, commodities, and derived indices to millions of registered users across the globe.",
-  "473760456": "We speak plainly to avoid ambiguity, disclose the terms of all contracts, and are clear about the risks of trading and how we make money.",
   "474616293": "The trading platform to fit your style",
   "475611258": "Help centre | Frequently asked questions | About Deriv | Deriv",
   "476241116": "Provide expert tips and opinions on online trading via a website, blog, YouTube channel, webinars, or other forms of digital media.",
@@ -565,7 +558,6 @@
   "535867011": "Sign up in minutes and explore Trader’s Hub — all your trading needs, in one place.",
   "538228086": "Close-Low",
   "539261300": "OS icon",
-  "539645627": "We aim to deliver market-leading products that are trusted around the world.",
   "540538076": "40+ stocks",
   "541218901": "Full name*",
   "541543954": "<0>Revenue share</0><br/>Earn commission of up to 45% based on the monthly net revenue generated by your clients. The higher their net revenue, the higher your commission payout.",
@@ -676,7 +668,6 @@
   "636857983": "Take advantage of a highly liquid market with round-the-clock trading. Profit from correctly predicting the movement of the world's most popular cryptocurrencies.",
   "636968212": "If you encounter any issues with a transaction on Deriv P2P, first try to resolve it with the trader you’re dealing with. If they’re not willing to help, please let us know via <0>live chat</0>, and we’ll help you resolve it.",
   "637013579": "Our classic \"drag-and-drop\" tool for creating trading bots, featuring pop-up trading charts, for advanced users.",
-  "640307277": "Vice President of Engineering",
   "640979467": "<0>IWM.US</0> The iShares Russell 2000 ETF tracks the investment results of an index of small-capitalisation US equities.",
   "642995056": "Email",
   "643714136": "Binary bot for creating trading bot",
@@ -750,7 +741,6 @@
   "706717249": "5 - 800",
   "706931524": "When you purchase a 'High-Close' contract, your payout will be equal to the difference between the highest price and the exit price over the duration of the contract multiplied by the multiplier.",
   "710137133": "Apply now",
-  "712547410": "total trade turnover",
   "714321435": "laptop mt5",
   "714478782": "<0>AUD Basket</0> measures the value of the Australian dollar against a basket of five global currencies (USD, EUR, GBP, JPY, CAD), each weighted by 20%.",
   "715753532": "Find your role with us by browsing Deriv job opportunities in Cyberjaya, Malaysia.",
@@ -806,7 +796,6 @@
   "762926186": "A quick strategy is a ready-made strategy that you can use in Deriv Bot. There are 3 quick strategies you can choose from: Martingale, D'Alembert, and Oscar's Grind.",
   "763072092": "MT5 trading signals subscriptions expire automatically after one month. To renew or cancel a subscription, follow these steps.",
   "763514492": "Get integrated help",
-  "764856444": "We have a huge mission, an incredible team, and rapid growth.",
   "764879840": "GLD.US",
   "764958509": "Trade on global financial markets and multiply your potential profit without losing more than your stake.",
   "768795461": "Start trading cryptocurrencies on Deriv in 3 simple steps",
@@ -848,7 +837,6 @@
   "803547668": "paid out since inception",
   "803989222": "The Synthetics account allows you to trade on Deriv’s proprietary synthetic indices that are available 24/7 and simulate real-world market movements.",
   "806165583": "Australia 200",
-  "808426886": "We don’t practise hard-selling, offer financial or trading advice, nor make promises of guaranteed returns. We don’t encourage vulnerable people to trade and implement controls to prevent any unlawful activity.",
   "809146176": "Not applicable",
   "809414451": "<0>Forex at your fingertips.</0> Currency trading with major and minor pairs.",
   "809480545": "If you'd like to log in using your email address instead, follow these steps:",
@@ -881,7 +869,6 @@
   "831164350": "Let’s say you want to calculate the stop loss level and pip value when you want to buy a lot of EUR/USD priced at 1.17524 USD with a stop loss amount of 24 USD.",
   "831282685": "Drop us an email",
   "831784233": "Close-Low Icon",
-  "832324110": "Our locations",
   "832827564": "This plan is not available for IBs who promote to clients residing in the EU.",
   "833547634": "Currency weight",
   "835328271": "accumulators take profit",
@@ -1208,7 +1195,6 @@
   "1149190992": "Trade selected derived and financial assets without overnight charges.",
   "1150115412": "1. Please log in to your account and go to the “Manage account settings”.",
   "1150953111": "Tight spreads",
-  "1151456638": "We value team players that collaborate freely across departments with humility and ambition.",
   "1153826782": "A sub-affiliate earns USD 200 from their Revenue Share plan. The same sub-affiliate earns USD 100 from their IB programme. Here is how we calculate their total commissions:",
   "1155361880": "Need help? Please <0>contact us via live chat.</0>",
   "1155971726": "Click <0>here</0> to close your account.",
@@ -1249,7 +1235,6 @@
   "1187487273": "Volatility 15 (1s) Index",
   "1189346909": "To withdraw from your Deriv account into your personal account, go to Cashier, click \"Withdrawal\", and follow the instructions on the screen. You’ll need to verify your withdrawal request and confirm your withdrawal amount.",
   "1189875009": "Proven track record",
-  "1190588251": "We treat all customers equitably, handle complaints with integrity, and offer competitive prices with no hidden costs and no artificial barriers on customer withdrawals.",
   "1191311301": "How do I set an investor password for my Deriv MT5 account?",
   "1191789799": "Password should be more than 8 characters including 1 uppercase and 1 number",
   "1192961783": "Licence and regulatory information | Deriv",
@@ -1391,7 +1376,6 @@
   "1319030942": "Signup failed",
   "1320418221": "Estimate the margin you need to hold your positions. The result depends on leverage, volume lot, and your Deriv MT5 account balance.",
   "1323941798": "Short",
-  "1324376913": "Our values are the fabric of our culture",
   "1325181938": "Street*",
   "1326142154": "high-low option trade",
   "1326235397": "These indices correspond to simulated markets with constant volatilities of 10%, 25%, 50%, 75%, and 100%.",
@@ -1483,7 +1467,6 @@
   "1403848854": "The Deriv MT5 Standard account offers new and experienced traders high leverage and variable spreads for maximum flexibility.",
   "1404594106": "Swap short (Daily points)",
   "1405194573": "Locate the live chat widget on our website or app at the bottom right corner of the screen.",
-  "1405237333": "Head of People Management",
   "1405929527": "Your IB commissions earned from Deriv X are credited directly into your Deriv account daily.",
   "1406209174": "Trade with a regulated industry pioneer trusted by traders for more than 20 years.",
   "1406360927": "Minor pairs",
@@ -1800,7 +1783,6 @@
   "1673505406": "An impersonator’s main goal is to steal your sensitive information and funds.",
   "1673824550": "Minimum stake",
   "1674164323": "<0>With a x500 multiplier</0>, if the market goes down 2%, you'll <1>lose only $100</1>. An automatic stop out kicks in if your loss reaches your stake amount.",
-  "1674363165": "traders worldwide",
   "1674798397": "Trade multipliers on our mobile app.",
   "1676292946": "Forex trading gives you the chance to profit from changes in the relative values of currencies on the forex market.",
   "1677027187": "Forex",
@@ -1862,7 +1844,6 @@
   "1733606989": "0.50",
   "1733660945": "Funds available as soon as confirmed",
   "1734026582": "This plan is available exclusively for affiliates who promote to clients residing in EU.",
-  "1734683614": "Chief Executive Officer",
   "1736625026": "What are accumulators?",
   "1737371600": "Where can I trade vanilla options on Deriv?",
   "1739086943": "Wall Street 30",
@@ -2333,7 +2314,6 @@
   "2139905716": "In addition to their simplicity to understand, the main reason traders choose to trade vanilla options is because they offer potentially high profit as they do not have a fixed payout, while losses are strictly limited to the initial stake amount.",
   "2142042461": "Trading CFDs increases both potential profit and loss",
   "2142117024": "Take profit amount in Up direction",
-  "2143477659": "We settle all contracts fairly, process all deposits and withdrawals promptly, and provide reliable support and a high-quality trading experience to all our customers.",
   "2143762194": "Create your Deriv account now and start trading!",
   "2144015434": "On Deriv, trading CFDs on leverage lets you pay only a small fraction of the contract’s value and amplify your potential profit, similarly increasing your potential loss.",
   "2144113378": "A chart illustrating a losing Rise trade type contract",
@@ -4704,31 +4684,5 @@
   "-594286125": "Practise trading with Deriv as long as you like. No risk, no hidden fees.",
   "-1773685845": "All markets and platforms",
   "-661813412": "Enjoy full access to all our markets and platforms.",
-  "-1520902282": "No credit card needed",
-  "-2022759357": "Make trading accessible to anyone, anywhere",
-  "-77779780": "From inception, our goal was to break free of the high commissions and clunky products offered by traditional brokers. Also, we aim to deliver a first-class experience to digitally inclined traders, regardless of the size of their accounts.",
-  "-1321496264": "In a journey spanning 25 years, we have grown to over 2.5 million customers worldwide. But our mission has remained the same:",
-  "-554746075": "Integrity",
-  "-1917169640": "We serve our customers with fairness and transparency. We settle all contracts by the book and speak plainly and truthfully.",
-  "-1679427554": "Customer focus",
-  "-411750591": "We put the customer first and strive to build products that deliver the best customer experience.",
-  "-611750993": "Competence",
-  "-1566641642": "We value colleagues with the ability to use good judgement and an aptitude to learn and grow.",
-  "-1111451256": "Teamwork",
-  "-418008452": "Our principles are the framework for our decisions",
-  "-3618456": "Learn more about our principles",
-  "-1855417261": "Our leadership",
-  "-1277783292": "Chief Operating Officer",
-  "-1369524546": "Chief Information Officer",
-  "-2049472334": "Chief Risk & Compliance Officer",
-  "-216767904": "Chief Administrative Officer",
-  "-197772643": "Head of Marketing & Global Partnerships",
-  "-290006480": "Vice President of Product",
-  "-871474425": "Vice President of IT Operations",
-  "-864130274": "Head of Accounts",
-  "-275117592": "withdrawals last month",
-  "-608807773": "trades last month",
-  "-1165835520": "employees",
-  "-651384976": "nationalities",
-  "-1033881248": "See our open positions"
+  "-1520902282": "No credit card needed"
 }

src/common/websocket/index.ts

@@ -23,8 +23,8 @@ const PING_INTERVAL = 30000
 export class ApiManager {
     private socket: WebSocket
     public derivApi: TDerivApi
-    private pingInterval: NodeJS.Timer
     private ready: boolean
+    public static readyState: number
 
     public static instance: ApiManager
     public static getInstance() {
@@ -34,22 +34,55 @@ export class ApiManager {
         return ApiManager.instance
     }
 
+    private setReadyState(state: number) {
+        ApiManager.readyState = state
+    }
+
     public init(lang?: string) {
         if (!this.ready) {
             if (!this.socket) {
+                console.log('WS connecting...')
                 const language = lang === 'ach' ? getCrowdin() : lang?.replace('-', '_')
                 const socket_url = getSocketURL()
                 const app_id = getAppId()
                 const websocket_connection_url = `${socket_url}?app_id=${app_id}&l=${language}&brand=${brand_name.toLowerCase()}`
 
                 this.socket = new WebSocket(websocket_connection_url)
+                this.setReadyState(this.socket?.readyState)
             }
             this.derivApi = new DerivAPIBasic({ connection: this.socket })
-            this.registerKeepAlive()
+            this.socket.addEventListener('open', () => {
+                console.log('WS connected.')
+                this.setReadyState(this?.socket?.readyState)
+            })
+
+            this.socket.addEventListener('close', () => {
+                console.log('WS closed')
+                this.derivApi.disconnect()
+                this.ready = null
+                this.setReadyState(null)
+            })
             this.ready = true
         }
     }
 
+    public reconnectIfNotConnected(lang?: string): Promise<void> {
+        console.log('WS reconnecting....')
+        return new Promise((resolve, reject) => {
+            if (this?.socket?.readyState !== 1) {
+                this.socket = null
+                this.ready = null
+                this.init(lang)
+                this?.socket?.addEventListener?.('open', () => {
+                    console.log('WS connected using reconnect method.')
+                    resolve()
+                })
+            } else {
+                resolve()
+            }
+        })
+    }
+
     public augmentedSend<T extends TSocketEndpointNames>(
         name: T,
         request?: TSocketRequestProps<T> extends never ? undefined : TSocketRequestProps<T>,
@@ -70,25 +103,6 @@ export class ApiManager {
         return this.derivApi.authorize({ authorize: token })
     }
 
-    private registerKeepAlive() {
-        if (this.pingInterval) {
-            clearInterval(this.pingInterval)
-        }
-        this.socket.addEventListener('open', () => {
-            this.pingInterval = setInterval(() => {
-                this.socket.send(JSON.stringify({ ping: 1 }))
-            }, PING_INTERVAL)
-        })
-
-        this.socket.addEventListener('close', () => {
-            clearInterval(this.pingInterval)
-        })
-
-        this.socket.addEventListener('error', () => {
-            clearInterval(this.pingInterval)
-        })
-    }
-
     public reset(language: string) {
         const socket_url = getSocketURL()
         const app_id = getAppId()
@@ -99,7 +113,6 @@ export class ApiManager {
 
         this.socket = new WebSocket(websocket_connection_url)
         this.derivApi = new DerivAPIBasic({ connection: this.socket })
-        this.registerKeepAlive()
     }
 }
 let apiManager: ApiManager

src/components/hooks/useWS.ts

@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react'
 import { TSocketEndpointNames, TSocketResponseData } from 'common/websocket/types'
-import apiManager from 'common/websocket'
+import apiManager, { ApiManager } from 'common/websocket'
+import { getLanguage, isBrowser } from 'common/utility'
 
 const useWS = <T extends TSocketEndpointNames>(name: T) => {
     const [is_loading, setIsLoading] = useState(false)
@@ -15,6 +16,23 @@ const useWS = <T extends TSocketEndpointNames>(name: T) => {
     const send = useCallback(
         async (data?: Parameters<typeof apiManager.augmentedSend<T>>[1]) => {
             setIsLoading(true)
+            const readyState = parseInt(ApiManager.readyState)
+            if (readyState !== 1 && readyState !== 0) {
+                if (isBrowser()) {
+                    const currentLanguage = getLanguage() ?? 'en'
+                    try {
+                        // Connect to WebSocket if not connected
+                        await apiManager.reconnectIfNotConnected(currentLanguage)
+                    } catch (e) {
+                        setError(e)
+                        setIsLoading(false)
+                        return
+                    }
+                } else {
+                    setIsLoading(false)
+                    return
+                }
+            }
             try {
                 const response = await apiManager.augmentedSend(name, data)
                 setData(response[name] as TSocketResponseData<T>)