From c8072898b53e02838f21ed9cdf384cdca85680f2 Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Tue, 9 May 2023 13:16:26 +0200
Subject: [PATCH 1/6] chore: migrating code

---
 .../Apiexplorer/LoginDialog/index.tsx         |   3 +-
 .../RequestResponseRenderer/index.tsx         |   4 +-
 .../__tests__/SubscribeRenderer.test.tsx      |  28 +++
 .../Apiexplorer/SubscribeRenderer/index.tsx   |   4 +-
 .../__tests__/ApiExplorer.test.tsx            | 198 ++++++++++--------
 src/hooks/useDisableSendRequest/index.tsx     |  18 ++
 src/hooks/useSubscription/index.tsx           |   4 +-
 src/hooks/useWs/index.tsx                     |  11 +-
 8 files changed, 176 insertions(+), 94 deletions(-)
 create mode 100644 src/hooks/useDisableSendRequest/index.tsx

diff --git a/src/features/Apiexplorer/LoginDialog/index.tsx b/src/features/Apiexplorer/LoginDialog/index.tsx
index 56f6995be..48f14d9b6 100644
--- a/src/features/Apiexplorer/LoginDialog/index.tsx
+++ b/src/features/Apiexplorer/LoginDialog/index.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
-import { Modal } from '@deriv/ui';
+import { Modal, Button } from '@deriv/ui';
 import useLoginUrl from '@site/src/hooks/useLoginUrl';
-import { Button } from '@deriv/ui';
 import styles from './LoginDialog.module.scss';
 
 type TLoginDialog = {
diff --git a/src/features/Apiexplorer/RequestResponseRenderer/index.tsx b/src/features/Apiexplorer/RequestResponseRenderer/index.tsx
index 99001ce96..f325274d6 100644
--- a/src/features/Apiexplorer/RequestResponseRenderer/index.tsx
+++ b/src/features/Apiexplorer/RequestResponseRenderer/index.tsx
@@ -5,6 +5,7 @@ import useWS from '@site/src/hooks/useWs';
 import useAuthContext from '@site/src/hooks/useAuthContext';
 import PlaygroundSection from './PlaygroundSection';
 import LoginDialog from '../LoginDialog';
+import useDisableSendRequest from '@site/src/hooks/useDisableSendRequest';
 import styles from '../RequestJSONBox/RequestJSONBox.module.scss';
 
 export interface IResponseRendererProps<T extends TSocketEndpointNames> {
@@ -19,6 +20,7 @@ function RequestResponseRenderer<T extends TSocketEndpointNames>({
   auth,
 }: IResponseRendererProps<T>) {
   const { is_logged_in } = useAuthContext();
+  const { disableSendRequest } = useDisableSendRequest();
   const { data, is_loading, send, clear, error } = useWS<T>(name);
   const [toggle_modal, setToggleModal] = useState(false);
   const [response_state, setResponseState] = useState(false);
@@ -51,7 +53,7 @@ function RequestResponseRenderer<T extends TSocketEndpointNames>({
   return (
     <div>
       <div className={styles.btnWrapper}>
-        <Button color='primary' onClick={handleClick}>
+        <Button color='primary' disabled={disableSendRequest(auth)} onClick={handleClick}>
           Send Request
         </Button>
         <Button color='secondary' onClick={handleClear}>
diff --git a/src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx b/src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx
index 868d60108..f783a4722 100644
--- a/src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx
+++ b/src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx
@@ -4,6 +4,7 @@ import { cleanup, render, screen } from '@testing-library/react';
 import SubscribeRenderer from '..';
 import useAuthContext from '@site/src/hooks/useAuthContext';
 import useSubscription from '@site/src/hooks/useSubscription';
+import useDynamicImportJSON from '@site/src/hooks/useDynamicImportJSON';
 import { IAuthContext } from '@site/src/contexts/auth/auth.context';
 
 jest.mock('@site/src/hooks/useAuthContext');
@@ -12,6 +13,33 @@ const mockUseAuthContext = useAuthContext as jest.MockedFunction<() => Partial<I
 
 mockUseAuthContext.mockImplementation(() => ({
   is_logged_in: true,
+  is_authorized: true,
+}));
+
+jest.mock('@site/src/hooks/useDynamicImportJSON');
+
+const mockUseDynamicImportJSON = useDynamicImportJSON as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useDynamicImportJSON>>
+>;
+
+mockUseDynamicImportJSON.mockImplementation(() => ({
+  request_info: {
+    auth_required: 1,
+    auth_scopes: [],
+    description: 'this is a test with `echo_req` description',
+    title: 'this is a test title',
+  },
+  response_info: {
+    description: 'this is a test with `echo_req` description',
+    title: 'this is a test title',
+  },
+  setSelected: jest.fn(),
+  handleSelectChange: jest.fn(),
+  text_data: {
+    name: null,
+    selected_value: 'Select API Call - Version 3',
+    request: '',
+  },
 }));
 
 jest.mock('@site/src/hooks/useSubscription');
diff --git a/src/features/Apiexplorer/SubscribeRenderer/index.tsx b/src/features/Apiexplorer/SubscribeRenderer/index.tsx
index f7eedbfbb..3232e48b7 100644
--- a/src/features/Apiexplorer/SubscribeRenderer/index.tsx
+++ b/src/features/Apiexplorer/SubscribeRenderer/index.tsx
@@ -4,6 +4,7 @@ import { Button } from '@deriv/ui';
 import styles from '../RequestJSONBox/RequestJSONBox.module.scss';
 import useAuthContext from '@site/src/hooks/useAuthContext';
 import useSubscription from '@site/src/hooks/useSubscription';
+import useDisableSendRequest from '@site/src/hooks/useDisableSendRequest';
 import LoginDialog from '../LoginDialog';
 import PlaygroundSection from '../RequestResponseRenderer/PlaygroundSection';
 
@@ -19,6 +20,7 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
   auth,
 }: IResponseRendererProps<T>) {
   const { is_logged_in } = useAuthContext();
+  const { disableSendRequest } = useDisableSendRequest();
   const { data, is_loading, subscribe, unsubscribe, error } = useSubscription<T>(name);
   const [response_state, setResponseState] = useState(false);
   const [toggle_modal, setToggleModal] = useState(false);
@@ -51,7 +53,7 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
   return (
     <div>
       <div className={styles.btnWrapper}>
-        <Button color='primary' onClick={handleClick}>
+        <Button color='primary' disabled={disableSendRequest(auth)} onClick={handleClick}>
           Send Request
         </Button>
         <Button color='secondary' onClick={handleClear}>
diff --git a/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx b/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx
index 132c21186..7d3a28526 100644
--- a/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx
+++ b/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx
@@ -23,12 +23,6 @@ jest.mock('@site/src/hooks/useAuthContext');
 
 const mockUseAuthContext = useAuthContext as jest.MockedFunction<() => Partial<IAuthContext>>;
 
-mockUseAuthContext.mockImplementation(() => {
-  return {
-    is_logged_in: false,
-  };
-});
-
 jest.mock('@site/src/hooks/useWs');
 
 const mockuseWS = useWS as jest.MockedFunction<() => Partial<ReturnType<typeof useWS>>>;
@@ -67,113 +61,143 @@ mockUseDynamicImportJSON.mockImplementation(() => ({
 }));
 
 describe('ApiExplorerFeatures', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-    cleanup();
-  });
+  describe('Logged out', () => {
+    beforeEach(() => {
+      mockUseAuthContext.mockImplementation(() => {
+        return {
+          is_logged_in: false,
+          is_authorized: false,
+        };
+      });
+      render(<ApiExplorerFeatures />);
+    });
 
-  it('should render the title', () => {
-    render(<ApiExplorerFeatures />);
+    afterEach(() => {
+      jest.clearAllMocks();
+      cleanup();
+    });
 
-    const title = screen.getByRole('heading', { name: /API Explorer/i });
-    expect(title).toBeInTheDocument();
-  });
+    it('should render the title', () => {
+      const title = screen.getByRole('heading', { name: /API Explorer/i });
+      expect(title).toBeInTheDocument();
+    });
 
-  it('should be able to select from dropdown', async () => {
-    render(<ApiExplorerFeatures />);
+    it('should be able to select from dropdown', async () => {
+      const playground_select = screen.getByText(/select api call/i);
+      await userEvent.click(playground_select);
 
-    const playground_select = await screen.findByText(/select api call/i);
-    await userEvent.click(playground_select);
+      const select_option = screen.getByText(/active symbols/i);
+      await userEvent.click(select_option);
 
-    const select_option = await screen.findByText(/active symbols/i);
-    await userEvent.click(select_option);
+      expect(select_option).not.toBeVisible();
+    });
 
-    expect(select_option).not.toBeVisible();
-  });
+    it('should close the dropdown when clicking outside of it', async () => {
+      const playground_select = screen.getByText(/select api call/i);
+      await userEvent.click(playground_select);
+
+      const select_option = screen.getByText(/active symbols/i);
+      expect(select_option).toBeVisible();
+
+      const page_title = screen.getByText(/api explorer/i);
+      await userEvent.click(page_title);
+
+      expect(select_option).not.toBeVisible();
+    });
+
+    it('should render LoginDialog and it can be closed', async () => {
+      const playground_select = screen.getByText(/select api call/i);
+      await userEvent.click(playground_select);
+
+      const select_option = screen.getByText(/application: get details/i);
+      expect(select_option).toBeVisible();
 
-  it('should close the dropdown when clicking outside of it', async () => {
-    render(<ApiExplorerFeatures />);
+      await userEvent.click(select_option);
 
-    const playground_select = await screen.findByText(/select api call/i);
-    await userEvent.click(playground_select);
+      const send_request = screen.getByText(/send request/i);
+      await userEvent.click(send_request);
 
-    const select_option = await screen.findByText(/active symbols/i);
-    expect(select_option).toBeVisible();
+      const dialog = await screen.findByRole('dialog');
+      expect(dialog).toBeVisible();
 
-    const page_title = await screen.findByText(/api explorer/i);
-    await userEvent.click(page_title);
+      const close_button = screen.getByTestId('close-button');
 
-    expect(select_option).not.toBeVisible();
+      await userEvent.click(close_button);
+      expect(dialog).not.toBeVisible();
+    });
   });
 
-  it('should render LoginDialog and it can be closed', async () => {
-    render(<ApiExplorerFeatures />);
+  describe('Logged in', () => {
+    afterEach(() => {
+      jest.clearAllMocks();
+      cleanup();
+    });
+
+    it('should render the RequestResponseRenderer and can clear it', async () => {
+      mockUseAuthContext.mockImplementation(() => {
+        return {
+          is_logged_in: true,
+          is_authorized: true,
+        };
+      });
 
-    const playground_select = await screen.findByText(/select api call/i);
-    await userEvent.click(playground_select);
+      render(<ApiExplorerFeatures />);
 
-    const select_option = await screen.findByText(/application: get details/i);
-    expect(select_option).toBeVisible();
+      const playground_select = screen.getByText(/select api call/i);
+      await userEvent.click(playground_select);
 
-    await userEvent.click(select_option);
+      const select_option = screen.getByText(/active symbols/i);
+      expect(select_option).toBeVisible();
 
-    const send_request = await screen.findByText(/send request/i);
-    await userEvent.click(send_request);
+      await userEvent.click(select_option);
 
-    const dialog = await screen.findByRole('dialog');
-    expect(dialog).toBeVisible();
+      await act(async () => {
+        const send_request = await screen.findByRole('button', { name: /send request/i });
+        expect(send_request).toBeVisible();
+        await userEvent.click(send_request);
+      });
 
-    const close_button = await screen.findByTestId('close-button');
+      const playground_console = await screen.findByTestId('dt_playground_section');
 
-    await userEvent.click(close_button);
-    expect(dialog).not.toBeVisible();
+      expect(playground_console).toBeVisible();
+
+      const clear_request = screen.getByRole('button', { name: /clear/i });
+      await userEvent.click(clear_request);
+
+      // Once during the send request and once during the clear request
+      expect(mockClear).toHaveBeenCalledTimes(2);
+    });
   });
 
-  it('should render the RequestResponseRenderer and can clear it', async () => {
-    mockUseDynamicImportJSON.mockImplementation(() => ({
-      request_info: {
-        auth_required: 0,
-        auth_scopes: [],
-        description: 'this is a test with `echo_req` description',
-        title: 'this is a test title',
-      },
-      response_info: {
-        description: 'this is a test with `echo_req` description',
-        title: 'this is a test title',
-      },
-      setSelected: jest.fn(),
-      handleSelectChange: jest.fn(),
-      text_data: {
-        name: null,
-        selected_value: 'Select API Call - Version 3',
-        request: '',
-      },
-    }));
-
-    render(<ApiExplorerFeatures />);
-
-    const playground_select = await screen.findByText(/select api call/i);
-    await userEvent.click(playground_select);
-
-    const select_option = await screen.findByText(/active symbols/i);
-    expect(select_option).toBeVisible();
-
-    await userEvent.click(select_option);
-
-    await act(async () => {
-      const send_request = await screen.findByRole('button', { name: /send request/i });
-      expect(send_request).toBeVisible();
-      await userEvent.click(send_request);
+  describe('Disabled send request button', () => {
+    afterEach(() => {
+      jest.clearAllMocks();
+      cleanup();
     });
 
-    const playground_console = await screen.findByTestId('dt_playground_section');
+    it('should not be able to click send request button when unauthorized', async () => {
+      mockUseAuthContext.mockImplementation(() => {
+        return {
+          is_logged_in: true,
+          is_authorized: false,
+        };
+      });
+
+      render(<ApiExplorerFeatures />);
 
-    expect(playground_console).toBeVisible();
+      const playground_select = screen.getByText(/select api call/i);
+      await userEvent.click(playground_select);
 
-    const clear_request = await screen.findByRole('button', { name: /clear/i });
-    await userEvent.click(clear_request);
+      const select_option = screen.getByText(/active symbols/i);
+      expect(select_option).toBeVisible();
 
-    // Once during the send request and once during the clear request
-    expect(mockClear).toHaveBeenCalledTimes(2);
+      await userEvent.click(select_option);
+
+      const send_request = screen.getByRole('button', { name: /send request/i });
+      expect(send_request).toBeVisible();
+      await userEvent.click(send_request);
+
+      expect(mockClear).toHaveBeenCalledTimes(0);
+    });
   });
 });
diff --git a/src/hooks/useDisableSendRequest/index.tsx b/src/hooks/useDisableSendRequest/index.tsx
new file mode 100644
index 000000000..825a1302e
--- /dev/null
+++ b/src/hooks/useDisableSendRequest/index.tsx
@@ -0,0 +1,18 @@
+import { useCallback } from 'react';
+import useAuthContext from '../useAuthContext';
+
+const useDisableSendRequest = () => {
+  const { is_authorized, is_logged_in } = useAuthContext();
+  const disableSendRequest = useCallback(
+    (auth) => {
+      const auth_required = auth === 1;
+      if (!auth_required || !is_logged_in || is_authorized) return false;
+      return true;
+    },
+    [is_authorized, is_logged_in],
+  );
+
+  return { disableSendRequest };
+};
+
+export default useDisableSendRequest;
diff --git a/src/hooks/useSubscription/index.tsx b/src/hooks/useSubscription/index.tsx
index 43dbc82d0..3a8d866de 100644
--- a/src/hooks/useSubscription/index.tsx
+++ b/src/hooks/useSubscription/index.tsx
@@ -11,12 +11,14 @@ const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) =>
   const [is_subscribed, setSubscribed] = useState(false);
   const [error, setError] = useState<unknown>();
   const [data, setData] = useState<TSocketResponseData<T>>();
+  const [full_response, setFullResponse] = useState<TSocketResponse<T>>();
   const [subscriber, setSubscriber] = useState<{ unsubscribe?: VoidFunction }>();
 
   const onData = useCallback(
     (response: TSocketResponse<T>) => {
       const key = response['msg_type'] ?? name;
       setData(response[key] as TSocketResponseData<T>);
+      setFullResponse(full_response);
       setIsLoading(false);
     },
     [name],
@@ -41,7 +43,7 @@ const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) =>
     setSubscribed(false);
   }, [subscriber]);
 
-  return { subscribe, unsubscribe, is_loading, is_subscribed, error, data };
+  return { subscribe, unsubscribe, is_loading, is_subscribed, error, data, full_response };
 };
 
 export default useSubscription;
diff --git a/src/hooks/useWs/index.tsx b/src/hooks/useWs/index.tsx
index cf4d2bdbd..b8ac97aae 100644
--- a/src/hooks/useWs/index.tsx
+++ b/src/hooks/useWs/index.tsx
@@ -1,15 +1,21 @@
 import apiManager from '@site/src/configs/websocket';
-import { TSocketEndpointNames, TSocketResponseData } from '@site/src/configs/websocket/types';
+import {
+  TSocketEndpointNames,
+  TSocketResponse,
+  TSocketResponseData,
+} from '@site/src/configs/websocket/types';
 import { useCallback, useState } from 'react';
 
 const useWS = <T extends TSocketEndpointNames>(name: T) => {
   const [is_loading, setIsLoading] = useState(false);
   const [error, setError] = useState<unknown>();
   const [data, setData] = useState<TSocketResponseData<T>>();
+  const [full_response, setFullResponse] = useState<TSocketResponse<T>>();
 
   const clear = useCallback(() => {
     setError(null);
     setData(null);
+    setFullResponse(null);
   }, []);
 
   const send = useCallback(
@@ -19,6 +25,7 @@ const useWS = <T extends TSocketEndpointNames>(name: T) => {
         const response = await apiManager.augmentedSend(name, data);
         const key = response['msg_type'] ?? name;
         setData(response[key] as TSocketResponseData<T>);
+        setFullResponse(response);
       } catch (e) {
         setError(e);
       } finally {
@@ -28,7 +35,7 @@ const useWS = <T extends TSocketEndpointNames>(name: T) => {
     [name],
   );
 
-  return { send, is_loading, error, data, clear };
+  return { send, full_response, is_loading, error, data, clear };
 };
 
 export default useWS;

From fabd60e0faece5e19e7441bf2c9f32e5029e707b Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Tue, 9 May 2023 14:16:24 +0200
Subject: [PATCH 2/6] chore: adding test coverage

---
 .../__tests__/RequestJsonBox.test.tsx         | 25 ++++++++++++++
 .../__tests__/PlaygroundSection.test.tsx      | 34 +++++++++++++++++--
 .../PlaygroundSection/index.tsx               | 21 +++++++++---
 .../RequestResponseRenderer/index.tsx         |  5 +--
 .../__tests__/SubscribeRenderer.test.tsx      |  4 +++
 .../Apiexplorer/SubscribeRenderer/index.tsx   |  5 +--
 .../__tests__/ApiExplorer.test.tsx            |  4 +++
 7 files changed, 87 insertions(+), 11 deletions(-)

diff --git a/src/features/Apiexplorer/RequestJSONBox/__tests__/RequestJsonBox.test.tsx b/src/features/Apiexplorer/RequestJSONBox/__tests__/RequestJsonBox.test.tsx
index a866f592d..22795d036 100644
--- a/src/features/Apiexplorer/RequestJSONBox/__tests__/RequestJsonBox.test.tsx
+++ b/src/features/Apiexplorer/RequestJSONBox/__tests__/RequestJsonBox.test.tsx
@@ -3,14 +3,39 @@ import '@testing-library/jest-dom';
 import { cleanup, render, screen } from '@testing-library/react';
 import { TSocketEndpointNames } from '@site/src/configs/websocket/types';
 import useAuthContext from '@site/src/hooks/useAuthContext';
+import useSubscription from '@site/src/hooks/useSubscription';
+import useWS from '@site/src/hooks/useWs';
 import { IAuthContext } from '@site/src/contexts/auth/auth.context';
 import userEvent from '@testing-library/user-event';
 import RequestJSONBox from '..';
 
+const fakeHookObject = {
+  clear: jest.fn(),
+  send: jest.fn(),
+  full_response: {
+    tick: 1,
+    echo_req: { tick: 1 },
+  },
+};
+
 jest.mock('@site/src/hooks/useAuthContext');
 
 const mockUseAuthContext = useAuthContext as jest.MockedFunction<() => Partial<IAuthContext>>;
 
+jest.mock('@site/src/hooks/useSubscription');
+
+const mockUseSubscription = useSubscription as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useSubscription>>
+>;
+
+mockUseSubscription.mockImplementation(() => fakeHookObject);
+
+jest.mock('@site/src/hooks/useWs');
+
+const mockuseWS = useWS as jest.MockedFunction<() => Partial<ReturnType<typeof useWS>>>;
+
+mockuseWS.mockImplementation(() => fakeHookObject);
+
 describe('RequestResponseRenderer', () => {
   const mockProps = {
     handleChange: jest.fn(),
diff --git a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/__tests__/PlaygroundSection.test.tsx b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/__tests__/PlaygroundSection.test.tsx
index 898dfa338..2b59184cd 100644
--- a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/__tests__/PlaygroundSection.test.tsx
+++ b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/__tests__/PlaygroundSection.test.tsx
@@ -2,21 +2,49 @@ import React from 'react';
 import PlaygroundSection from '..';
 import { render, screen } from '@testing-library/react';
 
+const fake_full_response = {
+  msg_type: 'test',
+};
+
 describe('PlaygroundSection', () => {
   it('should render the loader', async () => {
-    render(<PlaygroundSection loader response_state={false} data={null} error={null} />);
+    render(
+      <PlaygroundSection
+        loader
+        response_state={false}
+        full_response={fake_full_response}
+        error={null}
+        name=''
+      />,
+    );
     const loader = await screen.findByTestId('circles-loading');
     expect(loader).toBeVisible();
   });
 
   it('should render the PlaygroundConsole', async () => {
-    render(<PlaygroundSection loader={false} response_state={false} data={null} error={null} />);
+    render(
+      <PlaygroundSection
+        loader={false}
+        response_state={false}
+        full_response={fake_full_response}
+        error={null}
+        name=''
+      />,
+    );
     const playground_section = await screen.findByTestId('dt_playground_section');
     expect(playground_section).toBeVisible();
   });
 
   it('should render the ReactJson', async () => {
-    render(<PlaygroundSection loader={false} response_state data={null} error={null} />);
+    render(
+      <PlaygroundSection
+        loader={false}
+        response_state
+        full_response={fake_full_response}
+        error={null}
+        name=''
+      />,
+    );
 
     const playground_section = await screen.findByTestId('dt_playground_section');
     expect(playground_section).toBeVisible();
diff --git a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/index.tsx b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/index.tsx
index 571756b12..63e9321f1 100644
--- a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/index.tsx
+++ b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/index.tsx
@@ -12,18 +12,28 @@ const ReactJson = React.lazy(() => import('react-json-view'));
 type TPlaygroundSection<T extends TSocketEndpointNames> = {
   loader: boolean;
   response_state: boolean;
-  data: TSocketResponseData<T>;
+  full_response: TSocketResponseData<T>;
   error: unknown;
+  name: string;
 };
 
 const PlaygroundSection = <T extends TSocketEndpointNames | TSocketSubscribableEndpointNames>({
   loader,
   response_state,
-  data,
+  full_response,
   error,
+  name,
 }: TPlaygroundSection<T>) => {
   if (loader) return <Loader />;
 
+  const key = full_response['msg_type'] ?? name;
+  const echo_req_json = {
+    echo_req: full_response['echo_req'],
+    msg_type: full_response['msg_type'],
+    req_id: full_response['req_id'],
+  };
+  const main_object_json = { [key]: full_response[key] };
+
   return (
     <div
       id='playground-console'
@@ -34,8 +44,11 @@ const PlaygroundSection = <T extends TSocketEndpointNames | TSocketSubscribableE
         <React.Fragment>
           <Suspense fallback={<Loader />}>
             <div data-testid='dt_json_view'>
-              {data !== null ? (
-                <ReactJson src={{ data }} theme='tube' />
+              {full_response !== null ? (
+                <div className={styles.reactJsonContainer}>
+                  <ReactJson src={echo_req_json} theme='tube' />
+                  <ReactJson src={main_object_json} theme='tube' />
+                </div>
               ) : (
                 <ReactJson src={{ error }} theme='tube' />
               )}
diff --git a/src/features/Apiexplorer/RequestResponseRenderer/index.tsx b/src/features/Apiexplorer/RequestResponseRenderer/index.tsx
index f325274d6..d253c7344 100644
--- a/src/features/Apiexplorer/RequestResponseRenderer/index.tsx
+++ b/src/features/Apiexplorer/RequestResponseRenderer/index.tsx
@@ -21,7 +21,7 @@ function RequestResponseRenderer<T extends TSocketEndpointNames>({
 }: IResponseRendererProps<T>) {
   const { is_logged_in } = useAuthContext();
   const { disableSendRequest } = useDisableSendRequest();
-  const { data, is_loading, send, clear, error } = useWS<T>(name);
+  const { full_response, is_loading, send, clear, error } = useWS<T>(name);
   const [toggle_modal, setToggleModal] = useState(false);
   const [response_state, setResponseState] = useState(false);
 
@@ -66,8 +66,9 @@ function RequestResponseRenderer<T extends TSocketEndpointNames>({
         <PlaygroundSection
           loader={is_loading}
           response_state={response_state}
-          data={data}
+          full_response={full_response}
           error={error}
+          name={name}
         />
       )}
     </div>
diff --git a/src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx b/src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx
index f783a4722..71dda4e1f 100644
--- a/src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx
+++ b/src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx
@@ -55,6 +55,10 @@ mockUseSubscription.mockImplementation(() => ({
   subscribe: mockSubscribe,
   unsubscribe: mockUnsubscribe,
   error: 'random error',
+  full_response: {
+    tick: 1,
+    echo_req: { tick: 1 },
+  },
 }));
 
 const request_data = `{
diff --git a/src/features/Apiexplorer/SubscribeRenderer/index.tsx b/src/features/Apiexplorer/SubscribeRenderer/index.tsx
index 3232e48b7..e938479fe 100644
--- a/src/features/Apiexplorer/SubscribeRenderer/index.tsx
+++ b/src/features/Apiexplorer/SubscribeRenderer/index.tsx
@@ -21,7 +21,7 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
 }: IResponseRendererProps<T>) {
   const { is_logged_in } = useAuthContext();
   const { disableSendRequest } = useDisableSendRequest();
-  const { data, is_loading, subscribe, unsubscribe, error } = useSubscription<T>(name);
+  const { full_response, is_loading, subscribe, unsubscribe, error } = useSubscription<T>(name);
   const [response_state, setResponseState] = useState(false);
   const [toggle_modal, setToggleModal] = useState(false);
 
@@ -66,8 +66,9 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
         <PlaygroundSection
           loader={is_loading}
           response_state={response_state}
-          data={data}
+          full_response={full_response}
           error={error}
+          name={name}
         />
       )}
     </div>
diff --git a/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx b/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx
index 7d3a28526..8eae5326d 100644
--- a/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx
+++ b/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx
@@ -32,6 +32,10 @@ const mockClear = jest.fn();
 mockuseWS.mockImplementation(() => ({
   clear: mockClear,
   send: jest.fn(),
+  full_response: {
+    tick: 1,
+    echo_req: { tick: 1 },
+  },
 }));
 
 jest.mock('@site/src/hooks/useDynamicImportJSON');

From a49f83a47a00aaafec9e464f8b1c1132801c4bc0 Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Tue, 9 May 2023 15:15:36 +0200
Subject: [PATCH 3/6] chore: refactoring component

---
 .../JsonData/JsonData.module.scss             |  7 +++
 .../PlaygroundSection/JsonData/index.tsx      | 45 +++++++++++++++++++
 .../PlaygroundSection/index.tsx               | 20 +--------
 3 files changed, 54 insertions(+), 18 deletions(-)
 create mode 100644 src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/JsonData.module.scss
 create mode 100644 src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx

diff --git a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/JsonData.module.scss b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/JsonData.module.scss
new file mode 100644
index 000000000..11f9c1da5
--- /dev/null
+++ b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/JsonData.module.scss
@@ -0,0 +1,7 @@
+@use 'src/styles/utility' as *;
+
+.reactJsonContainer {
+    display: flex;
+    flex-direction: column;
+    gap: rem(2);
+}
\ No newline at end of file
diff --git a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx
new file mode 100644
index 000000000..a6c02e333
--- /dev/null
+++ b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx
@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+import styles from './JsonData.module.scss';
+import {
+  TSocketResponseData,
+  TSocketEndpointNames,
+  TSocketSubscribableEndpointNames,
+} from '@site/src/configs/websocket/types';
+
+const ReactJson = React.lazy(() => import('react-json-view'));
+
+type TJsonData<T extends TSocketEndpointNames> = {
+  full_response: TSocketResponseData<T>;
+  error: unknown;
+  name: string;
+};
+
+const JsonData = <T extends TSocketEndpointNames | TSocketSubscribableEndpointNames>({
+  full_response,
+  name,
+  error,
+}: TJsonData<T>) => {
+  const getResponse = useCallback((key: string) => full_response[key], [full_response]);
+  const key = getResponse('msg_type') ?? name;
+  const echo_req_json = {
+    echo_req: getResponse('echo_req'),
+    msg_type: getResponse('msg_type'),
+    req_id: getResponse('req_id'),
+  };
+  const main_object_json = { [key]: getResponse(key) };
+
+  return (
+    <React.Fragment>
+      {full_response !== null ? (
+        <div className={styles.reactJsonContainer}>
+          <ReactJson src={echo_req_json} theme='tube' />
+          <ReactJson src={main_object_json} theme='tube' />
+        </div>
+      ) : (
+        <ReactJson src={{ error }} theme='tube' />
+      )}
+    </React.Fragment>
+  );
+};
+
+export default JsonData;
diff --git a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/index.tsx b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/index.tsx
index 63e9321f1..908a34c0d 100644
--- a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/index.tsx
+++ b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/index.tsx
@@ -4,11 +4,10 @@ import {
   TSocketResponseData,
   TSocketSubscribableEndpointNames,
 } from '@site/src/configs/websocket/types';
+import JsonData from './JsonData';
 import Loader from '@site/src/components/Loader';
 import styles from './PlaygroundSection.module.scss';
 
-const ReactJson = React.lazy(() => import('react-json-view'));
-
 type TPlaygroundSection<T extends TSocketEndpointNames> = {
   loader: boolean;
   response_state: boolean;
@@ -26,14 +25,6 @@ const PlaygroundSection = <T extends TSocketEndpointNames | TSocketSubscribableE
 }: TPlaygroundSection<T>) => {
   if (loader) return <Loader />;
 
-  const key = full_response['msg_type'] ?? name;
-  const echo_req_json = {
-    echo_req: full_response['echo_req'],
-    msg_type: full_response['msg_type'],
-    req_id: full_response['req_id'],
-  };
-  const main_object_json = { [key]: full_response[key] };
-
   return (
     <div
       id='playground-console'
@@ -44,14 +35,7 @@ const PlaygroundSection = <T extends TSocketEndpointNames | TSocketSubscribableE
         <React.Fragment>
           <Suspense fallback={<Loader />}>
             <div data-testid='dt_json_view'>
-              {full_response !== null ? (
-                <div className={styles.reactJsonContainer}>
-                  <ReactJson src={echo_req_json} theme='tube' />
-                  <ReactJson src={main_object_json} theme='tube' />
-                </div>
-              ) : (
-                <ReactJson src={{ error }} theme='tube' />
-              )}
+              <JsonData full_response={full_response} name={name} error={error} />
             </div>
           </Suspense>
         </React.Fragment>

From 7cbebfbb8551e2c9c75f3056b16fea5ddac96dde Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Tue, 9 May 2023 16:47:55 +0200
Subject: [PATCH 4/6] chore: fixing errors

---
 .../PlaygroundSection/JsonData/index.tsx      | 12 +++++++--
 .../__tests__/SubscribeRenderer.test.tsx      | 10 ++++++--
 .../Apiexplorer/SubscribeRenderer/index.tsx   | 25 ++++++++++++-------
 src/hooks/useSubscription/index.tsx           |  2 +-
 4 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx
index a6c02e333..1315860cc 100644
--- a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx
+++ b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx
@@ -19,8 +19,16 @@ const JsonData = <T extends TSocketEndpointNames | TSocketSubscribableEndpointNa
   name,
   error,
 }: TJsonData<T>) => {
-  const getResponse = useCallback((key: string) => full_response[key], [full_response]);
-  const key = getResponse('msg_type') ?? name;
+  const getResponse = useCallback(
+    (key: string) => {
+      const response = full_response;
+      const selected_key = response[key] ?? name;
+      if (response !== null) return selected_key;
+    },
+    [full_response],
+  );
+
+  const key = getResponse('msg_type');
   const echo_req_json = {
     echo_req: getResponse('echo_req'),
     msg_type: getResponse('msg_type'),
diff --git a/src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx b/src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx
index 71dda4e1f..c39a930f6 100644
--- a/src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx
+++ b/src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx
@@ -100,13 +100,19 @@ describe('SubscribeRenderer', () => {
     expect(mockUnsubscribe).toBeCalledTimes(1);
   });
 
-  it('should throw an error if incorrect json is being parsed', () => {
+  it('should throw an error if incorrect json is being parsed', async () => {
     const consoleOutput = [];
     const mockedError = (output) => consoleOutput.push(output);
     console.error = mockedError;
 
     render(<SubscribeRenderer name='ticks' auth={1} reqData={'asdawefaewf3232'} />);
 
-    expect(consoleOutput[0]).toEqual('something went wrong when parsing the json data: ');
+    const send_request_button = screen.getByRole('button', { name: 'Send Request' });
+
+    await userEvent.click(send_request_button);
+
+    expect(consoleOutput[0]).toEqual(
+      'Could not parse the JSON data while trying to send the request: ',
+    );
   });
 });
diff --git a/src/features/Apiexplorer/SubscribeRenderer/index.tsx b/src/features/Apiexplorer/SubscribeRenderer/index.tsx
index e938479fe..6d826d588 100644
--- a/src/features/Apiexplorer/SubscribeRenderer/index.tsx
+++ b/src/features/Apiexplorer/SubscribeRenderer/index.tsx
@@ -1,5 +1,8 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { TSocketSubscribableEndpointNames } from '@site/src/configs/websocket/types';
+import {
+  TSocketSubscribableEndpointNames,
+  TSocketRequestProps,
+} from '@site/src/configs/websocket/types';
 import { Button } from '@deriv/ui';
 import styles from '../RequestJSONBox/RequestJSONBox.module.scss';
 import useAuthContext from '@site/src/hooks/useAuthContext';
@@ -31,17 +34,21 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
     }
   }, [error]);
 
-  let json_data;
-  try {
-    json_data = JSON.parse(reqData);
-  } catch (error) {
-    json_data = '';
-    console.error('something went wrong when parsing the json data: ', error);
-  }
+  const parseRequestJSON = () => {
+    let json_data: TSocketRequestProps<T> extends never ? undefined : TSocketRequestProps<T>;
+
+    try {
+      json_data = JSON.parse(reqData);
+    } catch (error) {
+      console.error('Could not parse the JSON data while trying to send the request: ', error);
+    }
+
+    return json_data;
+  };
 
   const handleClick = useCallback(() => {
     unsubscribe();
-    subscribe(json_data);
+    subscribe(parseRequestJSON());
     setResponseState(true);
   }, [reqData, subscribe, unsubscribe]);
 
diff --git a/src/hooks/useSubscription/index.tsx b/src/hooks/useSubscription/index.tsx
index 3a8d866de..09f63f847 100644
--- a/src/hooks/useSubscription/index.tsx
+++ b/src/hooks/useSubscription/index.tsx
@@ -18,7 +18,7 @@ const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) =>
     (response: TSocketResponse<T>) => {
       const key = response['msg_type'] ?? name;
       setData(response[key] as TSocketResponseData<T>);
-      setFullResponse(full_response);
+      setFullResponse(response);
       setIsLoading(false);
     },
     [name],

From c90562a92ea9044fc309652bddfe70e07def1296 Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Tue, 9 May 2023 16:49:39 +0200
Subject: [PATCH 5/6] chore: removing unecessary callback

---
 .../PlaygroundSection/JsonData/index.tsx          | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx
index 1315860cc..db144f744 100644
--- a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx
+++ b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import styles from './JsonData.module.scss';
 import {
   TSocketResponseData,
@@ -19,14 +19,11 @@ const JsonData = <T extends TSocketEndpointNames | TSocketSubscribableEndpointNa
   name,
   error,
 }: TJsonData<T>) => {
-  const getResponse = useCallback(
-    (key: string) => {
-      const response = full_response;
-      const selected_key = response[key] ?? name;
-      if (response !== null) return selected_key;
-    },
-    [full_response],
-  );
+  const getResponse = (key: string) => {
+    const response = full_response;
+    const selected_key = response[key] ?? name;
+    if (response !== null) return selected_key;
+  };
 
   const key = getResponse('msg_type');
   const echo_req_json = {

From a8bfb0953d4acd1fdd2dea9ed5a141a6e5bee525 Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Wed, 10 May 2023 11:27:26 +0200
Subject: [PATCH 6/6] chore: refactoring code

---
 .../PlaygroundSection/JsonData/index.tsx      | 23 ++++---------------
 .../__tests__/PlaygroundSection.test.tsx      | 22 +++---------------
 .../PlaygroundSection/index.tsx               |  4 ++--
 3 files changed, 9 insertions(+), 40 deletions(-)

diff --git a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx
index db144f744..d146c5075 100644
--- a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx
+++ b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx
@@ -1,44 +1,29 @@
 import React from 'react';
 import styles from './JsonData.module.scss';
 import {
-  TSocketResponseData,
   TSocketEndpointNames,
   TSocketSubscribableEndpointNames,
+  TSocketResponse,
 } from '@site/src/configs/websocket/types';
 
 const ReactJson = React.lazy(() => import('react-json-view'));
 
 type TJsonData<T extends TSocketEndpointNames> = {
-  full_response: TSocketResponseData<T>;
+  full_response: TSocketResponse<T>;
   error: unknown;
   name: string;
 };
 
 const JsonData = <T extends TSocketEndpointNames | TSocketSubscribableEndpointNames>({
   full_response,
-  name,
   error,
 }: TJsonData<T>) => {
-  const getResponse = (key: string) => {
-    const response = full_response;
-    const selected_key = response[key] ?? name;
-    if (response !== null) return selected_key;
-  };
-
-  const key = getResponse('msg_type');
-  const echo_req_json = {
-    echo_req: getResponse('echo_req'),
-    msg_type: getResponse('msg_type'),
-    req_id: getResponse('req_id'),
-  };
-  const main_object_json = { [key]: getResponse(key) };
-
   return (
     <React.Fragment>
       {full_response !== null ? (
         <div className={styles.reactJsonContainer}>
-          <ReactJson src={echo_req_json} theme='tube' />
-          <ReactJson src={main_object_json} theme='tube' />
+          <ReactJson src={full_response.echo_req} theme='tube' />
+          <ReactJson src={full_response} theme='tube' />
         </div>
       ) : (
         <ReactJson src={{ error }} theme='tube' />
diff --git a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/__tests__/PlaygroundSection.test.tsx b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/__tests__/PlaygroundSection.test.tsx
index 2b59184cd..d723ffc56 100644
--- a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/__tests__/PlaygroundSection.test.tsx
+++ b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/__tests__/PlaygroundSection.test.tsx
@@ -2,20 +2,10 @@ import React from 'react';
 import PlaygroundSection from '..';
 import { render, screen } from '@testing-library/react';
 
-const fake_full_response = {
-  msg_type: 'test',
-};
-
 describe('PlaygroundSection', () => {
   it('should render the loader', async () => {
     render(
-      <PlaygroundSection
-        loader
-        response_state={false}
-        full_response={fake_full_response}
-        error={null}
-        name=''
-      />,
+      <PlaygroundSection loader response_state={false} full_response={null} error={null} name='' />,
     );
     const loader = await screen.findByTestId('circles-loading');
     expect(loader).toBeVisible();
@@ -26,7 +16,7 @@ describe('PlaygroundSection', () => {
       <PlaygroundSection
         loader={false}
         response_state={false}
-        full_response={fake_full_response}
+        full_response={null}
         error={null}
         name=''
       />,
@@ -37,13 +27,7 @@ describe('PlaygroundSection', () => {
 
   it('should render the ReactJson', async () => {
     render(
-      <PlaygroundSection
-        loader={false}
-        response_state
-        full_response={fake_full_response}
-        error={null}
-        name=''
-      />,
+      <PlaygroundSection loader={false} response_state full_response={null} error={null} name='' />,
     );
 
     const playground_section = await screen.findByTestId('dt_playground_section');
diff --git a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/index.tsx b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/index.tsx
index 908a34c0d..e195f5b4e 100644
--- a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/index.tsx
+++ b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/index.tsx
@@ -1,8 +1,8 @@
 import React, { Suspense } from 'react';
 import {
   TSocketEndpointNames,
-  TSocketResponseData,
   TSocketSubscribableEndpointNames,
+  TSocketResponse,
 } from '@site/src/configs/websocket/types';
 import JsonData from './JsonData';
 import Loader from '@site/src/components/Loader';
@@ -11,7 +11,7 @@ import styles from './PlaygroundSection.module.scss';
 type TPlaygroundSection<T extends TSocketEndpointNames> = {
   loader: boolean;
   response_state: boolean;
-  full_response: TSocketResponseData<T>;
+  full_response: TSocketResponse<T>;
   error: unknown;
   name: string;
 };