Merge branch 'master' into markupvalue

Author: sanjam-deriv

docs/_intro_backup.md

@@ -9,8 +9,7 @@ tags:
 keywords:
   - deriv
   - api
-  - getting
-  - started
+  - getting started
 description: Getting started with Deriv API
 ---
 

docs/core-concepts/api-calls-anatomy/index.md

@@ -15,13 +15,14 @@ keywords:
   - anatomy
 description: Deriv API calls' anatomy
 ---
+
 ## Subscribe and send
 
 All API calls have a send functionality for making a request and receiving a response. Certain API calls also offer a subscribe functionality allowing for updates to be sent to your application when new information becomes available.
 
 ### Subscribe
 
-Several API calls provide the `subscribe` functionality. When you subscribe to an API call, you will receive a continuous stream of data of this particular API call.
+Several API calls provide the `subscribe` functionality. When you subscribe to an API call, you will receive a continuous stream from data of this particular API call.
 
 Some of these API calls automatically subscribe (e.g. [ticks](https://api.deriv.com/api-explorer#ticks)) and some have an optional `subscribe` field. If you pass `1` to the `subscribe` field, the subscription will start and the server will continue to send the requested data until you unsubscribe by calling the `Forget` or `Forget all` API calls.
 
@@ -43,7 +44,6 @@ If you want to stop the message stream created by `subscribe`, you will have to
 For more information on the `Forget` API call, have a look at [Forget](https://api.deriv.com/api-explorer#forget) and [Forget All](https://api.deriv.com/api-explorer#forget_all) in the API explorer.
 :::
 
-
 ## Request data
 
 To make it easier for you to handle the request and response flow of your WebSocket connection, each Deriv WebSocket API call follows a standardised structure. You can use it for caching, validation, request, and response synchronisation.
@@ -84,7 +84,7 @@ Whatever you pass to this field will be returned back to you inside a `response`
 
 #### The `req_id` field
 
-You may need to `tag` your requests and pass them through our `WebSocket` calls. You can do so by passing a `number` to this field. it can be helpful when you need to map `requests` to `responses`.
+You may need to `tag` your requests and pass them through our `WebSocket` calls. You can do so by passing a `number` to this field. It can be helpful when you need to map `requests` to `responses`.
 
 :::caution
 To learn about additional optional fields specific to each API call, please refer to our [API Explorer](https://api.deriv.com/api-explorer).

docs/core-concepts/authorization-authentication/index.md

@@ -12,6 +12,7 @@ keywords:
   - deriv-authorisation
 description: Deriv API authorisation and authentication
 ---
+
 Without authorisation and authentication you'll only get access to roughly half of our API calls and features. For example, in order to buy contracts or utilise the `Copy Trading` features, your users must be authenticated and authorised by our **OAuth** provider and **WebSocket Server**.
 
 ## Before we start
@@ -20,12 +21,12 @@ Please make sure you have all the requirements mentioned below to continue.
 
 ### Requirements
 
-1. Deriv account 
+1. Deriv account
 2. Deriv API token with the appropriate access level
-3. Deriv app ID 
+3. Deriv app ID
 
 :::note
-Please refer to [Setting up a Deriv application](docs/setting-up-a-deriv-application.md) for detailed instructions how to create a Deriv API token and application.
+Please refer to [Setting up a Deriv application](docs/setting-up-a-deriv-application.md) for detailed instructions on how to create a Deriv API token and application.
 :::
 
 ### API token
@@ -84,14 +85,17 @@ const user_accounts = [
   },
 ];
 ```
-To authorise the user based on the user's **selected** account, call the [authorize](https://api.deriv.com/api-explorer#authorize)  API call with the user's **selected** account **session token**:
+
+To authorise the user based on the user's **selected** account, call the [authorize](https://api.deriv.com/api-explorer#authorize) API call with the user's **selected** account **session token**:
+
 ```js
 {
   "authorize": "a1-f7pnteezo4jzhpxclctizt27hyeot"
 }
 ```
 
 The response for the `authorize` call would be an object as below:
+
 ```js
 {
     "account_list": [
@@ -145,4 +149,5 @@ The response for the `authorize` call would be an object as below:
     "user_id": 12345678
   }
 ```
+
 Now, the user is authorised, and you can use Deriv API calls on behalf of the account.

docs/core-concepts/websocket/index.md

@@ -83,12 +83,12 @@ WebSockets are an essential client-server communication tool. To benefit the mos
 
 Use WebSockets in the following cases:
 
-1. ‍When you're developing a real-time web application. 
-  The most customary use of WebSocket is in real-time application development wherein it assists in a continual display of data at the client end. As the back-end server sends back this data continuously, a WebSocket allows uninterrupted pushing or transmitting of this data in the already open connection. The use of WebSockets makes such data transmission quick and leverages the application's performance.
-2. For trading websites, such as Deriv. 
-  Here, WebSocket assist in data handling that is impelled by the deployed back-end server to the client.
+1. ‍When you're developing a real-time web application.
+   The most customary use of WebSocket is in real-time application development wherein it assists in a continual display of data at the client end. As the back-end server sends back this data continuously, a WebSocket allows uninterrupted pushing or transmitting of this data in the already open connection. The use of WebSockets makes such data transmission quick and leverages the application's performance.
+2. For trading websites, such as Deriv.
+   Here, WebSocket assists in data handling that is impelled by the deployed back-end server to the client.
 3. ‍When creating a chat application.
-  Chat application developers call out WebSockets for help in operations like a one-time exchange and publishing/broadcasting messages. As the same WebSocket connection is used for sending/receiving messages, communication becomes easy and quick.
+   Chat application developers call out WebSockets for help in operations like a one-time exchange and publishing/broadcasting messages. As the same WebSocket connection is used for sending/receiving messages, communication becomes easy and quick.
 
 Now that we've established where WebSockets should be used, let's see where it is best to avoid them. This will help you steer clear of unnecessary operational hassles.
 

docs/intro.md

@@ -6,17 +6,13 @@ sidebar_label: Introduction
 sidebar_position: 0
 tags:
   - introduction
-  - getting
-  - started
-  - quick
-  - start
+  - getting started
+  - quick startup
 keywords:
   - deriv
   - api
-  - getting
-  - started
-  - quick
-  - start
+  - getting started
+  - quick startup
 description: Getting started with Deriv API
 ---
 
@@ -49,4 +45,5 @@ When using our code examples, we also suggest to have a look at our [Languages](
 If you want to know for example how you can `monetize your application` or how to create a `secure way for users to log in` to your application, then we provide a handful of [Guides](/docs/category/guides) that can assist you with that.
 
 #### Setting up a Deriv application
+
 If you want to know more about the essentials that are needed to setup your own application, then have a look at the [Setting up a Deriv application](/docs/setting-up-a-deriv-application) section.

docusaurus.config.js

@@ -99,6 +99,7 @@ const config = {
             label: 'API Explorer',
           },
           { to: 'https://tech.deriv.com/', label: 'Blog', position: 'left' },
+          { to: 'https://hackerone.com/deriv?type=team', label: 'Bug bounty', position: 'left' },
           {
             type: 'custom-navbar-separator',
             position: 'right',

examples/keep_alive/index.js

@@ -5,7 +5,7 @@ const connection = new WebSocket(`wss://ws.binaryws.com/websockets/v3?app_id=${a
 
 const api = new DerivAPIBasic({ connection });
 
-const keepAlive = () => {
+const proposal = () => {
   api.subscribe({
     proposal: 1,
     subscribe: 1,
@@ -18,17 +18,21 @@ const keepAlive = () => {
     symbol: 'R_100',
     barrier: '+0.1',
   });
-  /*
-   * Send a ping ever 30 seconds to keep the connection alive, needs to use the same
-   * websocket connection as the one you want to maintain.
-   */
 };
 
-const keepAliveRes = async (res) => {
+// Send a ping every 30 seconds to keep the connection alive
+// Needs to use the same websocket connection as the one you want to maintain.
+const ping = () => {
+  setInterval(() => {
+    api.ping();
+  }, 30000);
+};
+
+const wsResponse = async (res) => {
   const data = JSON.parse(res.data);
   if (data.error !== undefined) {
     console.log('Error: %s ', data.error.message);
-    connection.removeEventListener('message', keepAliveRes, false);
+    connection.removeEventListener('message', wsResponse, false);
     await api.disconnect();
   } else if (data.msg_type === 'proposal') {
     console.log('Details: %s', data.proposal.longcode);
@@ -40,14 +44,15 @@ const keepAliveRes = async (res) => {
   }
 };
 
-const checkSignal = async () => {
-  await keepAlive();
-  connection.addEventListener('message', keepAliveRes);
+const checkSignal = () => {
+  proposal();
+  ping();
+  connection.addEventListener('message', wsResponse);
 };
 
 const endCall = () => {
-  connection.removeEventListener('message', keepAliveRes, false);
-  keepAlive().unsubscribe();
+  connection.removeEventListener('message', wsResponse, false);
+  proposal().unsubscribe();
 };
 
 const keep_alive_button = document.querySelector('#keep_alive');

src/components/ApiTokenNavbarItem/api_token_switcher.module.scss

@@ -42,7 +42,7 @@
         width: rem(1.2);
         height: rem(1.2);
         transform: rotate(0deg);
-        transition: transform .2s;
+        transition: transform 0.2s;
       }
       &:hover {
         text-decoration: none;
@@ -75,7 +75,7 @@
       width: rem(1.5);
       height: rem(1.5);
       transform: rotate(0deg);
-      transition: transform .2s ease-in-out;
+      transition: transform 0.2s ease-in-out;
     }
     &.active::after {
       transform: rotate(-180deg);
@@ -115,6 +115,8 @@
       display: flex;
       flex-direction: column;
       gap: rem(0.8);
+      overflow-y: scroll;
+      max-height: rem(40);
     }
     @media (max-width: 1200px) {
       position: fixed;

src/components/Header/__tests__/Header.test.tsx

@@ -2,6 +2,12 @@ import React from 'react';
 import { Header } from '..';
 import { render, screen } from '@testing-library/react';
 
+beforeAll(() => {
+  const script_tag = document.createElement('div');
+  script_tag.setAttribute('id', '__docusaurus');
+  document.body.appendChild(script_tag);
+});
+
 describe('Header', () => {
   it('should be able to render the header with links', () => {
     render(<Header />);

src/components/Header/index.tsx

@@ -1,7 +1,15 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styles from './Header.module.scss';
 import Link from '@docusaurus/Link';
 export const Header = () => {
+  useEffect(() => {
+    const s = document.createElement('script');
+    s.src =
+      'https://survey.survicate.com/workspaces/83b651f6b3eca1ab4551d95760fe5deb/web_surveys.js';
+    s.async = true;
+    const e = document.getElementById('__docusaurus');
+    e.parentNode.insertBefore(s, e);
+  }, []);
   return (
     <div className={styles.Navtop}>
       <div className={styles.NavtopContainer}>