From 4ffe50c07ea7e5e7039cd01b963634f2d2a85a8d Mon Sep 17 00:00:00 2001
From: sanjam chhatwal <sanjam@deriv.com>
Date: Wed, 29 Nov 2023 17:30:46 +0400
Subject: [PATCH 01/12] chore: updated the WS connection

---
 src/hooks/useWs/index.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useWs/index.tsx b/src/hooks/useWs/index.tsx
index b8ac97aae..84e9b5635 100644
--- a/src/hooks/useWs/index.tsx
+++ b/src/hooks/useWs/index.tsx
@@ -6,7 +6,7 @@ import {
 } from '@site/src/configs/websocket/types';
 import { useCallback, useState } from 'react';
 
-const useWS = <T extends TSocketEndpointNames>(name: T) => {
+const useWS = <T extends TSocketEndpointNames>(name?: T) => {
   const [is_loading, setIsLoading] = useState(false);
   const [error, setError] = useState<unknown>();
   const [data, setData] = useState<TSocketResponseData<T>>();
@@ -19,10 +19,20 @@ const useWS = <T extends TSocketEndpointNames>(name: T) => {
   }, []);
 
   const send = useCallback(
-    async (data?: Parameters<typeof apiManager.augmentedSend<T>>[1]) => {
+    async (data?: Parameters<typeof apiManager.augmentedSend<T>>[]) => {
+      let payload: any = data;
+      console.log();
+
+      if (name) {
+        payload = { ...payload, name: { [name]: 1 } };
+      } else {
+        payload = { ...payload };
+      }
+
       setIsLoading(true);
+
       try {
-        const response = await apiManager.augmentedSend(name, data);
+        const response = await apiManager.augmentedSend(payload);
         const key = response['msg_type'] ?? name;
         setData(response[key] as TSocketResponseData<T>);
         setFullResponse(response);

From 1c33bf8cff3bf6324771d88d7fdd5afd52958c1e Mon Sep 17 00:00:00 2001
From: sanjam chhatwal <sanjam@deriv.com>
Date: Wed, 29 Nov 2023 17:31:38 +0400
Subject: [PATCH 02/12] chore: updated the WS connection

---
 src/configs/websocket/index.ts                |   8 +-
 .../Apiexplorer/RequestJSONBox/index.tsx      |  10 -
 .../__tests__/useDynamicImport.test.tsx       | 243 ++++++++----------
 src/hooks/useSubscription/index.tsx           |  10 +-
 src/hooks/useWs/__tests__/useWs.test.tsx      |   4 +-
 5 files changed, 125 insertions(+), 150 deletions(-)

diff --git a/src/configs/websocket/index.ts b/src/configs/websocket/index.ts
index a6b49de63..da4287048 100644
--- a/src/configs/websocket/index.ts
+++ b/src/configs/websocket/index.ts
@@ -40,19 +40,15 @@ export class ApiManager {
   }
 
   public augmentedSend<T extends TSocketEndpointNames>(
-    name: T,
     request?: TSocketRequestProps<T> extends never ? undefined : TSocketRequestProps<T>,
   ): Promise<TSocketResponse<T>> {
-    return this.derivApi.send({ [name]: 1, ...request }) as Promise<TSocketResponse<T>>;
+    return this.derivApi.send(request) as Promise<TSocketResponse<T>>;
   }
 
   public augmentedSubscribe<T extends TSocketSubscribableEndpointNames>(
-    name: T,
     request?: TSocketRequestProps<T> extends never ? undefined : TSocketRequestProps<T>,
   ): Observable<TSocketResponse<T>> {
-    return this.derivApi.subscribe({ [name]: 1, subscribe: 1, ...request }) as Observable<
-      TSocketResponse<T>
-    >;
+    return this.derivApi.subscribe({ subscribe: 1, request }) as Observable<TSocketResponse<T>>;
   }
 
   public authorize(token: string) {
diff --git a/src/features/Apiexplorer/RequestJSONBox/index.tsx b/src/features/Apiexplorer/RequestJSONBox/index.tsx
index 88b409c87..495ac3aa5 100644
--- a/src/features/Apiexplorer/RequestJSONBox/index.tsx
+++ b/src/features/Apiexplorer/RequestJSONBox/index.tsx
@@ -22,15 +22,6 @@ function RequestJSONBox<T extends TSocketEndpointNames>({
   const is_subscribe = useMemo(() => {
     return request_example?.includes('subscribe');
   }, [request_example]);
-  const [isdisabled, setIsDisabled] = useState(false);
-
-  useEffect(() => {
-    if (name === null) {
-      setIsDisabled(true);
-    } else {
-      setIsDisabled(false);
-    }
-  }, [name]);
 
   return (
     <div className={style.playgroundBox}>
@@ -44,7 +35,6 @@ function RequestJSONBox<T extends TSocketEndpointNames>({
           placeholder={'Request JSON'}
           onChange={handleChange}
           value={request_example}
-          disabled={isdisabled}
         ></textarea>
         {is_subscribe ? (
           <SubscribeRenderer
diff --git a/src/hooks/useDynamicImportJSON/__tests__/useDynamicImport.test.tsx b/src/hooks/useDynamicImportJSON/__tests__/useDynamicImport.test.tsx
index 91523839c..4f6d32fcd 100644
--- a/src/hooks/useDynamicImportJSON/__tests__/useDynamicImport.test.tsx
+++ b/src/hooks/useDynamicImportJSON/__tests__/useDynamicImport.test.tsx
@@ -1,24 +1,24 @@
-import React from "react";
-import "@testing-library/jest-dom";
-import userEvent from "@testing-library/user-event";
-import { renderHook } from "@testing-library/react-hooks";
-import { act } from "react-dom/test-utils";
-import useDynamicImportJSON from "..";
-import { cleanup, render, screen } from "@testing-library/react";
-
-jest.mock("@docusaurus/router", () => ({
+import React from 'react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { renderHook } from '@testing-library/react-hooks';
+import { act } from 'react-dom/test-utils';
+import useDynamicImportJSON from '..';
+import { cleanup, render, screen } from '@testing-library/react';
+
+jest.mock('@docusaurus/router', () => ({
   useLocation: () => ({
-    pathname: "/api-explorer#active_symbols",
-    hash: "#active_symbols",
+    pathname: '/api-explorer#active_symbols',
+    hash: '#active_symbols',
   }),
   useHistory: () => ({
     push: jest.fn(),
   }),
 }));
 
-jest.mock("@site/src/hooks/useAuthContext");
+jest.mock('@site/src/hooks/useAuthContext');
 
-describe("useDynamicImportJSON", () => {
+describe('useDynamicImportJSON', () => {
   const { result } = renderHook(() => useDynamicImportJSON());
 
   afterEach(() => {
@@ -26,61 +26,52 @@ describe("useDynamicImportJSON", () => {
     cleanup();
   });
 
-  it("should populate text data with the correct values", () => {
+  it('should populate text data with the correct values', () => {
     act(() => {
       expect(result.current.text_data).toEqual({
-        request:
-          '{\n  "active_symbols": "brief",\n  "product_type": "basic"\n}',
-        selected_value: "Active Symbols",
-        name: "active_symbols",
+        request: '{\n  "active_symbols": "brief",\n  "product_type": "basic"\n}',
+        selected_value: 'Active Symbols',
+        name: 'active_symbols',
       });
     });
   });
 
-  it("should be able to call handleTextAreaInput when typing in a textarea", async () => {
-    const spyHandleInputFunction = jest.spyOn(
-      result.current,
-      "handleTextAreaInput"
-    );
+  it('should be able to call handleTextAreaInput when typing in a textarea', async () => {
+    const spyHandleInputFunction = jest.spyOn(result.current, 'handleTextAreaInput');
 
-    render(
-      <textarea
-        placeholder="testtextarea"
-        onChange={result.current.handleTextAreaInput}
-      />
-    );
+    render(<textarea placeholder='testtextarea' onChange={result.current.handleTextAreaInput} />);
 
-    const textarea = screen.getByPlaceholderText("testtextarea");
+    const textarea = screen.getByPlaceholderText('testtextarea');
     expect(textarea).toBeVisible();
 
-    await userEvent.type(textarea, "test123");
+    await userEvent.type(textarea, 'test123');
     expect(spyHandleInputFunction).toHaveBeenCalled();
   });
 
-  it("should have the correct hash value in the URL on selection of an api call", () => {
-    const location = require("@docusaurus/router").useLocation();
+  it('should have the correct hash value in the URL on selection of an api call', () => {
+    const location = require('@docusaurus/router').useLocation();
     const url = location.hash;
-    expect(url).toMatch("active_symbols");
+    expect(url).toMatch('active_symbols');
   });
 
-  it("should check for change in hash value and update text data accordingly", async () => {
-    jest.mock("@site/src/utils/playground_requests", () => ({
+  it('should check for change in hash value and update text data accordingly', async () => {
+    jest.mock('@site/src/utils/playground_requests', () => ({
       playground_requests: [
         {
-          name: "active_symbols",
-          title: "Active Symbols",
+          name: 'active_symbols',
+          title: 'Active Symbols',
           body: {
-            active_symbols: "brief",
-            product_type: "basic",
+            active_symbols: 'brief',
+            product_type: 'basic',
           },
         },
       ],
     }));
 
-    jest.mock("@docusaurus/router", () => ({
+    jest.mock('@docusaurus/router', () => ({
       useLocation: () => ({
-        pathname: "/api-explorer#active_symbols",
-        hash: "#active_symbol",
+        pathname: '/api-explorer#active_symbols',
+        hash: '#active_symbol',
       }),
       useHistory: () => ({
         push: jest.fn(),
@@ -89,31 +80,25 @@ describe("useDynamicImportJSON", () => {
 
     const mockEvent = {
       currentTarget: {
-        value: "active_symbols",
+        value: 'active_symbols',
       },
       preventDefault: jest.fn(),
     };
 
-    const spyHandleSelectChange = jest.spyOn(
-      result.current,
-      "handleSelectChange"
-    );
+    const spyHandleSelectChange = jest.spyOn(result.current, 'handleSelectChange');
 
     const mockHandleSelectChange = () =>
-      result.current.handleSelectChange(mockEvent, "active_symbols");
+      result.current.handleSelectChange(mockEvent, 'active_symbols');
 
     render(
       <div>
-        <button
-          className="simulated_option"
-          onClick={() => mockHandleSelectChange()}
-        >
+        <button className='simulated_option' onClick={() => mockHandleSelectChange()}>
           Active Symbols
         </button>
-      </div>
+      </div>,
     );
 
-    const option = screen.getByRole("button", { name: "Active Symbols" });
+    const option = screen.getByRole('button', { name: 'Active Symbols' });
 
     await userEvent.click(option);
 
@@ -121,141 +106,139 @@ describe("useDynamicImportJSON", () => {
 
     expect(result.current.text_data).toEqual({
       request: '{\n  "active_symbols": "brief",\n  "product_type": "basic"\n}',
-      selected_value: "Active Symbols",
-      name: "active_symbols",
+      selected_value: 'Active Symbols',
+      name: 'active_symbols',
     });
   });
 
-  it("should have correct text area inputs inside dynamic imports correctly", () => {
+  it('should have correct text area inputs inside dynamic imports correctly', () => {
     act(() => {
       result.current.dynamicImportJSON(result.current.text_data.selected_value);
       console.log(result.current.request_info);
     });
     expect(result.current.request_info).toEqual({
-      $schema: "http://json-schema.org/draft-04/schema#",
+      $schema: 'http://json-schema.org/draft-04/schema#',
       additionalProperties: false,
       auth_required: 0,
       default: {
-        $schema: "http://json-schema.org/draft-04/schema#",
+        $schema: 'http://json-schema.org/draft-04/schema#',
         additionalProperties: false,
         auth_required: 0,
         description:
-          "Retrieve a list of all currently active symbols (underlying markets upon which contracts are available for trading).",
+          'Retrieve a list of all currently active symbols (underlying markets upon which contracts are available for trading).',
         properties: {
           active_symbols: {
-            description:
-              "If you use `brief`, only a subset of fields will be returned.",
-            enum: ["brief", "full"],
-            type: "string",
+            description: 'If you use `brief`, only a subset of fields will be returned.',
+            enum: ['brief', 'full'],
+            type: 'string',
           },
           landing_company: {
-            description: "Deprecated - replaced by landing_company_short.",
+            description: 'Deprecated - replaced by landing_company_short.',
             enum: [
-              "iom",
-              "malta",
-              "maltainvest",
-              "svg",
-              "virtual",
-              "vanuatu",
-              "champion",
-              "champion-virtual",
+              'iom',
+              'malta',
+              'maltainvest',
+              'svg',
+              'virtual',
+              'vanuatu',
+              'champion',
+              'champion-virtual',
             ],
-            type: "string",
+            type: 'string',
           },
           landing_company_short: {
             description:
-              "[Optional] If you specify this field, only symbols available for trading by that landing company will be returned. If you are logged in, only symbols available for trading by your landing company will be returned regardless of what you specify in this field.",
+              '[Optional] If you specify this field, only symbols available for trading by that landing company will be returned. If you are logged in, only symbols available for trading by your landing company will be returned regardless of what you specify in this field.',
             enum: [
-              "iom",
-              "malta",
-              "maltainvest",
-              "svg",
-              "virtual",
-              "vanuatu",
-              "champion",
-              "champion-virtual",
+              'iom',
+              'malta',
+              'maltainvest',
+              'svg',
+              'virtual',
+              'vanuatu',
+              'champion',
+              'champion-virtual',
             ],
-            type: "string",
+            type: 'string',
           },
           passthrough: {
             description:
-              "[Optional] Used to pass data through the websocket, which may be retrieved via the `echo_req` output field. Maximum size is 3500 bytes.",
+              '[Optional] Used to pass data through the websocket, which may be retrieved via the `echo_req` output field. Maximum size is 3500 bytes.',
             maxSize: 3500,
-            type: "object",
+            type: 'object',
           },
           product_type: {
             description:
-              "[Optional] If you specify this field, only symbols that can be traded through that product type will be returned.",
-            enum: ["basic"],
-            type: "string",
+              '[Optional] If you specify this field, only symbols that can be traded through that product type will be returned.',
+            enum: ['basic'],
+            type: 'string',
           },
           req_id: {
-            description: "[Optional] Used to map request to response.",
-            type: "integer",
+            description: '[Optional] Used to map request to response.',
+            type: 'integer',
           },
         },
-        required: ["active_symbols"],
-        title: "Active Symbols (request)",
-        type: "object",
+        required: ['active_symbols'],
+        title: 'Active Symbols (request)',
+        type: 'object',
       },
       description:
-        "Retrieve a list of all currently active symbols (underlying markets upon which contracts are available for trading).",
+        'Retrieve a list of all currently active symbols (underlying markets upon which contracts are available for trading).',
       properties: {
         active_symbols: {
-          description:
-            "If you use `brief`, only a subset of fields will be returned.",
-          enum: ["brief", "full"],
-          type: "string",
+          description: 'If you use `brief`, only a subset of fields will be returned.',
+          enum: ['brief', 'full'],
+          type: 'string',
         },
         landing_company: {
-          description: "Deprecated - replaced by landing_company_short.",
+          description: 'Deprecated - replaced by landing_company_short.',
           enum: [
-            "iom",
-            "malta",
-            "maltainvest",
-            "svg",
-            "virtual",
-            "vanuatu",
-            "champion",
-            "champion-virtual",
+            'iom',
+            'malta',
+            'maltainvest',
+            'svg',
+            'virtual',
+            'vanuatu',
+            'champion',
+            'champion-virtual',
           ],
-          type: "string",
+          type: 'string',
         },
         landing_company_short: {
           description:
-            "[Optional] If you specify this field, only symbols available for trading by that landing company will be returned. If you are logged in, only symbols available for trading by your landing company will be returned regardless of what you specify in this field.",
+            '[Optional] If you specify this field, only symbols available for trading by that landing company will be returned. If you are logged in, only symbols available for trading by your landing company will be returned regardless of what you specify in this field.',
           enum: [
-            "iom",
-            "malta",
-            "maltainvest",
-            "svg",
-            "virtual",
-            "vanuatu",
-            "champion",
-            "champion-virtual",
+            'iom',
+            'malta',
+            'maltainvest',
+            'svg',
+            'virtual',
+            'vanuatu',
+            'champion',
+            'champion-virtual',
           ],
-          type: "string",
+          type: 'string',
         },
         passthrough: {
           description:
-            "[Optional] Used to pass data through the websocket, which may be retrieved via the `echo_req` output field. Maximum size is 3500 bytes.",
+            '[Optional] Used to pass data through the websocket, which may be retrieved via the `echo_req` output field. Maximum size is 3500 bytes.',
           maxSize: 3500,
-          type: "object",
+          type: 'object',
         },
         product_type: {
           description:
-            "[Optional] If you specify this field, only symbols that can be traded through that product type will be returned.",
-          enum: ["basic"],
-          type: "string",
+            '[Optional] If you specify this field, only symbols that can be traded through that product type will be returned.',
+          enum: ['basic'],
+          type: 'string',
         },
         req_id: {
-          description: "[Optional] Used to map request to response.",
-          type: "integer",
+          description: '[Optional] Used to map request to response.',
+          type: 'integer',
         },
       },
-      required: ["active_symbols"],
-      title: "Active Symbols (request)",
-      type: "object",
+      required: ['active_symbols'],
+      title: 'Active Symbols (request)',
+      type: 'object',
     });
   });
 });
diff --git a/src/hooks/useSubscription/index.tsx b/src/hooks/useSubscription/index.tsx
index a11725c78..390aa727b 100644
--- a/src/hooks/useSubscription/index.tsx
+++ b/src/hooks/useSubscription/index.tsx
@@ -36,10 +36,16 @@ const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) =>
   }, []);
 
   const subscribe = useCallback(
-    (data: Parameters<typeof apiManager.augmentedSubscribe<T>>[1]) => {
+    (data: Parameters<typeof apiManager.augmentedSubscribe<T>>[]) => {
+      let payload: any = data;
+      if (name) {
+        console.log('name', name);
+
+        payload = { [name]: 1, ...payload };
+      }
       setIsLoading(true);
       setSubscribed(true);
-      const subscriber_ref = apiManager.augmentedSubscribe(name, data).subscribe(onData, onError);
+      const subscriber_ref = apiManager.augmentedSubscribe(payload).subscribe(onData, onError);
       setSubscriber(subscriber_ref);
       return subscriber_ref;
     },
diff --git a/src/hooks/useWs/__tests__/useWs.test.tsx b/src/hooks/useWs/__tests__/useWs.test.tsx
index 3f615857d..bb8e7bb25 100644
--- a/src/hooks/useWs/__tests__/useWs.test.tsx
+++ b/src/hooks/useWs/__tests__/useWs.test.tsx
@@ -60,7 +60,7 @@ describe('Use WS', () => {
     expect(result.current.error).toBeUndefined();
 
     await expect(wsServer).toReceiveMessage({
-      active_symbols: 'brief',
+      active_symbols: 1,
       product_type: 'basic',
       req_id: 1,
     });
@@ -168,7 +168,7 @@ describe('Use WS', () => {
     expect(result.current.error).toBeUndefined();
 
     await expect(wsServer).toReceiveMessage({
-      active_symbols: 'brief',
+      active_symbols: 1,
       product_type: 'basic',
       req_id: 1,
     });

From 4ace2fd6d377ca97b750a420b2faad31f1c751f2 Mon Sep 17 00:00:00 2001
From: sanjam chhatwal <sanjam@deriv.com>
Date: Thu, 30 Nov 2023 12:42:02 +0400
Subject: [PATCH 03/12] fix: changed code implementation

---
 src/configs/websocket/index.ts      | 2 +-
 src/hooks/useSubscription/index.tsx | 6 +++---
 src/hooks/useWs/index.tsx           | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/configs/websocket/index.ts b/src/configs/websocket/index.ts
index da4287048..10f3e0be1 100644
--- a/src/configs/websocket/index.ts
+++ b/src/configs/websocket/index.ts
@@ -48,7 +48,7 @@ export class ApiManager {
   public augmentedSubscribe<T extends TSocketSubscribableEndpointNames>(
     request?: TSocketRequestProps<T> extends never ? undefined : TSocketRequestProps<T>,
   ): Observable<TSocketResponse<T>> {
-    return this.derivApi.subscribe({ subscribe: 1, request }) as Observable<TSocketResponse<T>>;
+    return this.derivApi.subscribe(request) as Observable<TSocketResponse<T>>;
   }
 
   public authorize(token: string) {
diff --git a/src/hooks/useSubscription/index.tsx b/src/hooks/useSubscription/index.tsx
index 390aa727b..cd544fc3b 100644
--- a/src/hooks/useSubscription/index.tsx
+++ b/src/hooks/useSubscription/index.tsx
@@ -39,9 +39,9 @@ const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) =>
     (data: Parameters<typeof apiManager.augmentedSubscribe<T>>[]) => {
       let payload: any = data;
       if (name) {
-        console.log('name', name);
-
-        payload = { [name]: 1, ...payload };
+        payload = { [name]: 1, subscribe: 1, ...payload };
+      } else {
+        payload = { subscribe: 1, ...payload };
       }
       setIsLoading(true);
       setSubscribed(true);
diff --git a/src/hooks/useWs/index.tsx b/src/hooks/useWs/index.tsx
index 84e9b5635..d1aa75757 100644
--- a/src/hooks/useWs/index.tsx
+++ b/src/hooks/useWs/index.tsx
@@ -21,10 +21,10 @@ const useWS = <T extends TSocketEndpointNames>(name?: T) => {
   const send = useCallback(
     async (data?: Parameters<typeof apiManager.augmentedSend<T>>[]) => {
       let payload: any = data;
-      console.log();
+      console.log(payload);
 
       if (name) {
-        payload = { ...payload, name: { [name]: 1 } };
+        payload = { [name]: 1, ...payload };
       } else {
         payload = { ...payload };
       }

From 67f1b1a21a1a95cc2a7c9240b132d3512a0e0d4e Mon Sep 17 00:00:00 2001
From: sanjam chhatwal <sanjam@deriv.com>
Date: Thu, 30 Nov 2023 15:03:10 +0400
Subject: [PATCH 04/12] fix: code implementation change

---
 src/configs/websocket/index.ts                       |  2 +-
 .../RequestJSONBox/__tests__/RequestJsonBox.test.tsx | 12 ------------
 src/hooks/useSubscription/index.tsx                  |  4 ++--
 src/hooks/useWs/__tests__/useWs.test.tsx             |  4 ++--
 src/hooks/useWs/index.tsx                            |  4 ++--
 5 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/configs/websocket/index.ts b/src/configs/websocket/index.ts
index 10f3e0be1..fd1aa630f 100644
--- a/src/configs/websocket/index.ts
+++ b/src/configs/websocket/index.ts
@@ -40,7 +40,7 @@ export class ApiManager {
   }
 
   public augmentedSend<T extends TSocketEndpointNames>(
-    request?: TSocketRequestProps<T> extends never ? undefined : TSocketRequestProps<T>,
+    request: TSocketRequestProps<T> extends never ? undefined : TSocketRequestProps<T>,
   ): Promise<TSocketResponse<T>> {
     return this.derivApi.send(request) as Promise<TSocketResponse<T>>;
   }
diff --git a/src/features/Apiexplorer/RequestJSONBox/__tests__/RequestJsonBox.test.tsx b/src/features/Apiexplorer/RequestJSONBox/__tests__/RequestJsonBox.test.tsx
index 7c74c52cd..599ebd1ee 100644
--- a/src/features/Apiexplorer/RequestJSONBox/__tests__/RequestJsonBox.test.tsx
+++ b/src/features/Apiexplorer/RequestJSONBox/__tests__/RequestJsonBox.test.tsx
@@ -86,18 +86,6 @@ describe('RequestResponseRenderer', () => {
     expect(placeholder).toHaveLength(1);
   });
 
-  it('should disable text box if no api call is selected in the dropdown', () => {
-    const newProps = {
-      handleChange: jest.fn(),
-      request_example: '',
-      name: null as TSocketEndpointNames,
-      auth: 0,
-    };
-    render(<RequestJSONBox {...newProps} />);
-    const textarea = screen.getByLabelText('Request JSON');
-    expect(textarea).toBeDisabled();
-  });
-
   it('should disable text box if no api call is selected in the dropdown', async () => {
     const newProps = {
       handleChange: jest.fn(),
diff --git a/src/hooks/useSubscription/index.tsx b/src/hooks/useSubscription/index.tsx
index cd544fc3b..06b25cbdb 100644
--- a/src/hooks/useSubscription/index.tsx
+++ b/src/hooks/useSubscription/index.tsx
@@ -36,8 +36,8 @@ const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) =>
   }, []);
 
   const subscribe = useCallback(
-    (data: Parameters<typeof apiManager.augmentedSubscribe<T>>[]) => {
-      let payload: any = data;
+    (data: Parameters<typeof apiManager.augmentedSubscribe<T>>[0]) => {
+      let payload = data;
       if (name) {
         payload = { [name]: 1, subscribe: 1, ...payload };
       } else {
diff --git a/src/hooks/useWs/__tests__/useWs.test.tsx b/src/hooks/useWs/__tests__/useWs.test.tsx
index bb8e7bb25..3f615857d 100644
--- a/src/hooks/useWs/__tests__/useWs.test.tsx
+++ b/src/hooks/useWs/__tests__/useWs.test.tsx
@@ -60,7 +60,7 @@ describe('Use WS', () => {
     expect(result.current.error).toBeUndefined();
 
     await expect(wsServer).toReceiveMessage({
-      active_symbols: 1,
+      active_symbols: 'brief',
       product_type: 'basic',
       req_id: 1,
     });
@@ -168,7 +168,7 @@ describe('Use WS', () => {
     expect(result.current.error).toBeUndefined();
 
     await expect(wsServer).toReceiveMessage({
-      active_symbols: 1,
+      active_symbols: 'brief',
       product_type: 'basic',
       req_id: 1,
     });
diff --git a/src/hooks/useWs/index.tsx b/src/hooks/useWs/index.tsx
index d1aa75757..3bb4f5e69 100644
--- a/src/hooks/useWs/index.tsx
+++ b/src/hooks/useWs/index.tsx
@@ -19,8 +19,8 @@ const useWS = <T extends TSocketEndpointNames>(name?: T) => {
   }, []);
 
   const send = useCallback(
-    async (data?: Parameters<typeof apiManager.augmentedSend<T>>[]) => {
-      let payload: any = data;
+    async (data?: Parameters<typeof apiManager.augmentedSend<T>>[0]) => {
+      let payload = data;
       console.log(payload);
 
       if (name) {

From 9bb647dac9d10f1f2f51bf03c83f479b577de5d8 Mon Sep 17 00:00:00 2001
From: sanjam chhatwal <sanjam@deriv.com>
Date: Tue, 5 Dec 2023 12:13:06 +0400
Subject: [PATCH 05/12] fix: review comments

---
 src/hooks/useWs/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/hooks/useWs/index.tsx b/src/hooks/useWs/index.tsx
index 3bb4f5e69..701de4c7d 100644
--- a/src/hooks/useWs/index.tsx
+++ b/src/hooks/useWs/index.tsx
@@ -21,7 +21,6 @@ const useWS = <T extends TSocketEndpointNames>(name?: T) => {
   const send = useCallback(
     async (data?: Parameters<typeof apiManager.augmentedSend<T>>[0]) => {
       let payload = data;
-      console.log(payload);
 
       if (name) {
         payload = { [name]: 1, ...payload };

From 4bf68391645e3475612f294337db63f1ead081db Mon Sep 17 00:00:00 2001
From: sanjam chhatwal <sanjam@deriv.com>
Date: Thu, 7 Dec 2023 18:50:35 +0400
Subject: [PATCH 06/12] fix: user gives payload and it does not match name

---
 src/hooks/useWs/index.tsx         | 2 +-
 src/utils/playground_requests.tsx | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useWs/index.tsx b/src/hooks/useWs/index.tsx
index 701de4c7d..ea5cc7685 100644
--- a/src/hooks/useWs/index.tsx
+++ b/src/hooks/useWs/index.tsx
@@ -23,7 +23,7 @@ const useWS = <T extends TSocketEndpointNames>(name?: T) => {
       let payload = data;
 
       if (name) {
-        payload = { [name]: 1, ...payload };
+        if (payload === undefined) payload = { [name]: 1, ...payload };
       } else {
         payload = { ...payload };
       }
diff --git a/src/utils/playground_requests.tsx b/src/utils/playground_requests.tsx
index 86a127c32..a4bfdfb2c 100644
--- a/src/utils/playground_requests.tsx
+++ b/src/utils/playground_requests.tsx
@@ -214,6 +214,13 @@ export const playground_requests = [
       trader_id: 'CR1234',
     },
   },
+  {
+    name: 'crypto_config',
+    title: 'Cryptocurrency configuration',
+    body: {
+      crypto_config: 1,
+    },
+  },
   {
     name: 'document_upload',
     title: 'Document Upload',

From a2c5c17b9cff2a4c304cef1a10568ec63aee3459 Mon Sep 17 00:00:00 2001
From: sanjam chhatwal <sanjam@deriv.com>
Date: Thu, 7 Dec 2023 18:59:10 +0400
Subject: [PATCH 07/12] fix: test fix

---
 src/utils/playground_requests.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/utils/playground_requests.tsx b/src/utils/playground_requests.tsx
index a4bfdfb2c..86a127c32 100644
--- a/src/utils/playground_requests.tsx
+++ b/src/utils/playground_requests.tsx
@@ -214,13 +214,6 @@ export const playground_requests = [
       trader_id: 'CR1234',
     },
   },
-  {
-    name: 'crypto_config',
-    title: 'Cryptocurrency configuration',
-    body: {
-      crypto_config: 1,
-    },
-  },
   {
     name: 'document_upload',
     title: 'Document Upload',

From 8b76cb3a16b052b960189b1c72214b25fae95ec8 Mon Sep 17 00:00:00 2001
From: sanjam chhatwal <sanjam@deriv.com>
Date: Fri, 8 Dec 2023 16:46:01 +0400
Subject: [PATCH 08/12] fix: test fix and token creation fix from dashboard

---
 .../hooks/useRegisterApp/__tests__/useRegisterApp.test.tsx  | 1 -
 .../dashboard/register-app/__tests__/register-app.test.tsx  | 2 --
 src/hooks/useWs/index.tsx                                   | 6 +++++-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/features/dashboard/hooks/useRegisterApp/__tests__/useRegisterApp.test.tsx b/src/features/dashboard/hooks/useRegisterApp/__tests__/useRegisterApp.test.tsx
index c27985f0e..b12336c52 100644
--- a/src/features/dashboard/hooks/useRegisterApp/__tests__/useRegisterApp.test.tsx
+++ b/src/features/dashboard/hooks/useRegisterApp/__tests__/useRegisterApp.test.tsx
@@ -34,7 +34,6 @@ describe('Use Delete App', () => {
     expect(result.current.is_loading).toBeTruthy();
 
     await expect(wsServer).toReceiveMessage({
-      app_register: 1,
       name: 'app',
       redirect_uri: 'https://example.com',
       req_id: 1,
diff --git a/src/features/dashboard/register-app/__tests__/register-app.test.tsx b/src/features/dashboard/register-app/__tests__/register-app.test.tsx
index a24b5644a..a08b5decd 100644
--- a/src/features/dashboard/register-app/__tests__/register-app.test.tsx
+++ b/src/features/dashboard/register-app/__tests__/register-app.test.tsx
@@ -239,7 +239,6 @@ describe('Update App Dialog', () => {
 
     await expect(wsServer).toReceiveMessage({
       app_markup_percentage: 0,
-      app_register: 1,
       name: 'test app wrong name fake',
       redirect_uri: 'https://example.com',
       req_id: 1,
@@ -250,7 +249,6 @@ describe('Update App Dialog', () => {
     wsServer.send({
       echo_req: {
         app_markup_percentage: 0,
-        app_register: 1,
         name: 'test app wrong name fake',
         redirect_uri: 'https://example.com',
         req_id: 1,
diff --git a/src/hooks/useWs/index.tsx b/src/hooks/useWs/index.tsx
index ea5cc7685..d433e9222 100644
--- a/src/hooks/useWs/index.tsx
+++ b/src/hooks/useWs/index.tsx
@@ -23,7 +23,11 @@ const useWS = <T extends TSocketEndpointNames>(name?: T) => {
       let payload = data;
 
       if (name) {
-        if (payload === undefined) payload = { [name]: 1, ...payload };
+        if (payload === undefined) {
+          payload = { [name]: 1, ...payload };
+        } else if (name == 'api_token') {
+          payload = { [name]: 1, ...payload };
+        }
       } else {
         payload = { ...payload };
       }

From 967959c71f45e13a4c1d4ddae6db2c740bb76a73 Mon Sep 17 00:00:00 2001
From: sanjam chhatwal <sanjam@deriv.com>
Date: Fri, 8 Dec 2023 16:47:50 +0400
Subject: [PATCH 09/12] fix: test fix

---
 .../dashboard/register-app/__tests__/register-app.test.tsx       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/features/dashboard/register-app/__tests__/register-app.test.tsx b/src/features/dashboard/register-app/__tests__/register-app.test.tsx
index a08b5decd..d7fad4163 100644
--- a/src/features/dashboard/register-app/__tests__/register-app.test.tsx
+++ b/src/features/dashboard/register-app/__tests__/register-app.test.tsx
@@ -165,7 +165,6 @@ describe('Update App Dialog', () => {
 
     await expect(wsServer).toReceiveMessage({
       app_markup_percentage: 0,
-      app_register: 1,
       name: 'test app name updated',
       redirect_uri: 'https://example.com',
       req_id: 1,

From b299567ddea106394b4e358c785f2305faf0b709 Mon Sep 17 00:00:00 2001
From: sanjam chhatwal <sanjam@deriv.com>
Date: Mon, 11 Dec 2023 13:35:47 +0400
Subject: [PATCH 10/12] fix: review fix

---
 src/hooks/useWs/index.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/hooks/useWs/index.tsx b/src/hooks/useWs/index.tsx
index d433e9222..95ec5a645 100644
--- a/src/hooks/useWs/index.tsx
+++ b/src/hooks/useWs/index.tsx
@@ -23,9 +23,7 @@ const useWS = <T extends TSocketEndpointNames>(name?: T) => {
       let payload = data;
 
       if (name) {
-        if (payload === undefined) {
-          payload = { [name]: 1, ...payload };
-        } else if (name == 'api_token') {
+        if (payload === undefined || name == 'api_token') {
           payload = { [name]: 1, ...payload };
         }
       } else {

From 2e4440c355f2f453561f3c5057aa213db0cd9165 Mon Sep 17 00:00:00 2001
From: sanjam chhatwal <sanjam@deriv.com>
Date: Tue, 12 Dec 2023 18:40:49 +0400
Subject: [PATCH 11/12] fix: registration fix

---
 src/hooks/useWs/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useWs/index.tsx b/src/hooks/useWs/index.tsx
index 95ec5a645..4a2c96c54 100644
--- a/src/hooks/useWs/index.tsx
+++ b/src/hooks/useWs/index.tsx
@@ -23,7 +23,7 @@ const useWS = <T extends TSocketEndpointNames>(name?: T) => {
       let payload = data;
 
       if (name) {
-        if (payload === undefined || name == 'api_token') {
+        if (payload === undefined || name == 'api_token' || name == 'app_register') {
           payload = { [name]: 1, ...payload };
         }
       } else {

From 705b512f4a5cc36dd7b0d413c4d24b9ceab7ab4b Mon Sep 17 00:00:00 2001
From: sanjam chhatwal <sanjam@deriv.com>
Date: Tue, 12 Dec 2023 18:49:33 +0400
Subject: [PATCH 12/12] fix: test fix

---
 .../hooks/useRegisterApp/__tests__/useRegisterApp.test.tsx     | 1 +
 .../dashboard/register-app/__tests__/register-app.test.tsx     | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/src/features/dashboard/hooks/useRegisterApp/__tests__/useRegisterApp.test.tsx b/src/features/dashboard/hooks/useRegisterApp/__tests__/useRegisterApp.test.tsx
index b12336c52..c27985f0e 100644
--- a/src/features/dashboard/hooks/useRegisterApp/__tests__/useRegisterApp.test.tsx
+++ b/src/features/dashboard/hooks/useRegisterApp/__tests__/useRegisterApp.test.tsx
@@ -34,6 +34,7 @@ describe('Use Delete App', () => {
     expect(result.current.is_loading).toBeTruthy();
 
     await expect(wsServer).toReceiveMessage({
+      app_register: 1,
       name: 'app',
       redirect_uri: 'https://example.com',
       req_id: 1,
diff --git a/src/features/dashboard/register-app/__tests__/register-app.test.tsx b/src/features/dashboard/register-app/__tests__/register-app.test.tsx
index d7fad4163..6cb523f33 100644
--- a/src/features/dashboard/register-app/__tests__/register-app.test.tsx
+++ b/src/features/dashboard/register-app/__tests__/register-app.test.tsx
@@ -165,6 +165,7 @@ describe('Update App Dialog', () => {
 
     await expect(wsServer).toReceiveMessage({
       app_markup_percentage: 0,
+      app_register: 1,
       name: 'test app name updated',
       redirect_uri: 'https://example.com',
       req_id: 1,
@@ -238,6 +239,7 @@ describe('Update App Dialog', () => {
 
     await expect(wsServer).toReceiveMessage({
       app_markup_percentage: 0,
+      app_register: 1,
       name: 'test app wrong name fake',
       redirect_uri: 'https://example.com',
       req_id: 1,
@@ -249,6 +251,7 @@ describe('Update App Dialog', () => {
       echo_req: {
         app_markup_percentage: 0,
         name: 'test app wrong name fake',
+        app_register: 1,
         redirect_uri: 'https://example.com',
         req_id: 1,
         scopes: [],