Sandeep/fix outdated deps 1

.gitignore

@@ -22,4 +22,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.idea
+.idea
+
+.vscode/settings.json

package.json

@@ -55,12 +55,12 @@
     "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
     "@commitlint/cli": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
-    "@deriv/api-types": "^1.0.80",
+    "@deriv/api-types": "^1.0.172",
     "@docusaurus/module-type-aliases": "^2.4.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",

src/configs/websocket/index.ts

@@ -66,10 +66,10 @@ export class ApiManager {
   }
 
   private registerKeepAlive() {
-    if (this.pingInterval) {
+    if (this.pingInterval && typeof this.pingInterval === 'number') {
       clearInterval(this.pingInterval);
     }
-    if (this.reconnectInterval) {
+    if (this.reconnectInterval && typeof this.reconnectInterval === 'number') {
       clearInterval(this.reconnectInterval);
     }
     this.socket.addEventListener('open', () => {
@@ -82,7 +82,9 @@ export class ApiManager {
     this.socket.addEventListener('close', () => {
       this.is_websocket_connected?.(false);
       this.is_websocket_authorized?.(false);
-      clearInterval(this.pingInterval);
+      if (this.pingInterval && typeof this.pingInterval === 'number') {
+        clearInterval(this.pingInterval);
+      }
       this.socket = null;
       if (attempts > 0) {
         this.reconnectInterval = setTimeout(this.init.bind(this), RECONNECT_INTERVAL);
@@ -91,12 +93,16 @@ export class ApiManager {
         window.alert(
           'Sorry, the server is currently down. Please refresh the page or try again later',
         );
-        clearInterval(this.reconnectInterval);
+        if (this.reconnectInterval && typeof this.reconnectInterval === 'number') {
+          clearInterval(this.reconnectInterval);
+        }
       }
     });
 
     this.socket.addEventListener('error', () => {
-      clearInterval(this.pingInterval);
+      if (this.pingInterval && typeof this.pingInterval === 'number') {
+        clearInterval(this.pingInterval);
+      }
     });
   }
 

src/features/Endpoint/Endpoint.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import { Button, Text } from '@deriv/ui';
 import { getAppId } from '@site/src/utils';
-import { OAUTH_URL } from '@site/src/utils/constants';
+import { DEFAULT_WS_SERVER } from '@site/src/utils/constants';
 import styles from './Endpoint.module.scss';
 
 interface IEndpointFormValues {
@@ -12,7 +12,7 @@ interface IEndpointFormValues {
 const EndPoint = () => {
   const default_endpoint = {
     app_id: getAppId(),
-    server_url: OAUTH_URL,
+    server_url: DEFAULT_WS_SERVER,
   };
 
   const {

src/features/Endpoint/__tests__/Endpoint.test.tsx

@@ -2,6 +2,7 @@ import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
 import React from 'react';
 import EndPoint from '../Endpoint';
 import userEvent from '@testing-library/user-event';
+import { DEFAULT_WS_SERVER } from '@site/src/utils/constants';
 
 describe('Endpoint', () => {
   beforeEach(() => {
@@ -23,7 +24,7 @@ describe('Endpoint', () => {
   it('should have default values in input fields', () => {
     const server = screen.getByPlaceholderText('e.g. ws.derivws.com');
     const app_id = screen.getByPlaceholderText('e.g. 9999');
-    expect(server).toHaveValue('oauth.deriv.com');
+    expect(server).toHaveValue(DEFAULT_WS_SERVER);
 
     expect(app_id).toHaveValue('35074');
   });

src/features/dashboard/components/AppForm/__tests__/app-form.test.tsx

@@ -57,6 +57,7 @@ describe('App Form', () => {
         scopes: ['read', 'trade', 'trading_information'],
         verification_uri: 'https://example.com',
         last_used: '',
+        official: 0,
       },
       {
         active: 1,
@@ -71,6 +72,7 @@ describe('App Form', () => {
         scopes: ['read', 'trade'],
         verification_uri: 'https://example.com',
         last_used: '',
+        official: 0,
       },
     ];
     const mockGetApps = jest.fn();

src/features/dashboard/components/AppsTable/__tests__/apps-table.test.tsx

@@ -34,6 +34,7 @@ const fakeApplications: ApplicationObject[] = [
     scopes: ['admin', 'payments', 'read', 'trade', 'trading_information'],
     verification_uri: 'https://example.com',
     last_used: '',
+    official: 0,
   },
   {
     active: 1,
@@ -48,6 +49,7 @@ const fakeApplications: ApplicationObject[] = [
     scopes: ['payments', 'read', 'trade', 'trading_information'],
     verification_uri: 'https://example.com',
     last_used: '',
+    official: 0,
   },
 ];
 

src/features/dashboard/components/AppsTable/app-actions.cell.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { CellProps } from 'react-table';
-import { TAppColumn } from '.';
 import styles from './cells.module.scss';
+import { ApplicationObject } from '@deriv/api-types';
 
-interface IAppActionsCellProps extends React.PropsWithChildren<CellProps<TAppColumn, string>> {
+interface IAppActionsCellProps extends CellProps<ApplicationObject> {
   openDeleteDialog: () => void;
   openEditDialog: () => void;
 }

src/features/dashboard/components/Dialogs/UpdateAppDialog/__tests__/update-app-dialog.test.tsx

@@ -67,6 +67,7 @@ const fakeApp: ApplicationObject = {
   scopes: ['read', 'trade', 'trading_information'],
   verification_uri: 'https://example.com',
   last_used: '',
+  official: 0,
 };
 
 describe('Update App Dialog', () => {

src/features/dashboard/manage-apps/__tests__/manage-apps.test.tsx

@@ -3,7 +3,6 @@ import useAppManager from '@site/src/hooks/useAppManager';
 import { render, screen, cleanup } from '@site/src/test-utils';
 import React from 'react';
 import AppManagement from '..';
-import LoadingTable from '../../components/LoadingTable';
 
 jest.mock('@site/src/hooks/useAppManager');
 
@@ -53,6 +52,7 @@ describe('App Management', () => {
         scopes: ['admin', 'payments', 'read', 'trade', 'trading_information'],
         verification_uri: 'https://example.com',
         last_used: '',
+        official: 0,
       },
       {
         active: 1,
@@ -67,6 +67,7 @@ describe('App Management', () => {
         scopes: ['payments', 'read', 'trade', 'trading_information'],
         verification_uri: 'https://example.com',
         last_used: '',
+        official: 0,
       },
     ];
 

src/features/dashboard/register-app/__tests__/register-app.test.tsx

@@ -83,21 +83,6 @@ mockUseAppManager.mockImplementation(() => ({
   getApps: mockGetApps,
 }));
 
-const fakeApp: ApplicationObject = {
-  active: 1,
-  app_id: 12345,
-  app_markup_percentage: 0,
-  appstore: '',
-  github: '',
-  googleplay: '',
-  homepage: '',
-  name: 'testApp',
-  redirect_uri: 'https://example.com',
-  scopes: ['read', 'trade', 'trading_information'],
-  verification_uri: 'https://example.com',
-  last_used: '',
-};
-
 describe('Update App Dialog', () => {
   let wsServer: WS;
 

src/utils/index.ts

@@ -143,11 +143,13 @@ export const getServerConfig = () => {
   if (isBrowser) {
     const config_server_url = localStorage.getItem('config.server_url');
     const config_app_id = localStorage.getItem('config.app_id');
+    const is_qa_server = config_server_url?.toLowerCase().includes('qa');
+    const oauth = is_qa_server ? config_server_url : OAUTH_URL;
 
     return {
       serverUrl: config_server_url ?? DEFAULT_WS_SERVER,
       appId: config_app_id ?? getAppId(),
-      oauth: config_server_url ?? OAUTH_URL,
+      oauth,
     };
   } else {
     return {