Merge pull request #57 from shafin-deriv/shafin/DAPI-578/chore-add-mi…

…ssing-translation

chore: add missing translations

docs/intro.md

@@ -51,21 +51,21 @@ Our Documentation is divided in several sections:
 </RenderOfficialContents>
 
 <RenderOfficialContents>
-    Have a look at the <a href='/docs/category/core-concepts'>Core concepts</a> pages and take your
+    Have a look at the <a href='category/core-concepts'>Core concepts</a> pages and take your
     time to read through it. These concepts will help you get familiar with our WebSocket server api
     and how to use it more efficiently. They are not related to any of our frameworks or libraries.
 </RenderOfficialContents>
 
 <RenderOfficialContents>
-    When you read through the <a href='/docs/category/core-concepts'>Core concepts</a> page, you can
+    When you read through the <a href='category/core-concepts'>Core concepts</a> page, you can
     start choosing your implementation approach based on the language, framework or library you want
     to use in your application.
 </RenderOfficialContents>
 
 <h4>Code Examples</h4>
 
 If you want to know how you can implement our API within your code, then we suggest to have a look
-at our <a href='/docs/category/code-examples'>Code examples</a>. These code examples come in
+at our <a href='category/code-examples'>Code examples</a>. These code examples come in
 `CodeSandboxes`. This allows you to easily fork the code examples and experiment with them for
 personal use. For now we only have JavaScript code examples, but, we plan to add more examples
 that are created with different languages, frameworks and libraries in the near future.
@@ -76,7 +76,7 @@ that are created with different languages, frameworks and libraries in the near
 
 <RenderOfficialContents>
     When using our code examples, we also suggest to have a look at our{' '}
-    <a href='/docs/category/languages'>Languages</a> section. Here, we describe in detail how you
+    <a href='category/languages'>Languages</a> section. Here, we describe in detail how you
     can setup your personal project properly to make use of our API. This will surely come helpful
     when you try to integrate some of our code examples in your own project.
 </RenderOfficialContents>
@@ -88,7 +88,7 @@ that are created with different languages, frameworks and libraries in the near
 <RenderOfficialContents>
     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{' '}
-    <a href='/docs/category/guides'>Guides</a> that can assist you with that.
+    <a href='category/guides'>Guides</a> that can assist you with that.
 </RenderOfficialContents>
 
 <RenderOfficialContents>
@@ -98,5 +98,5 @@ that are created with different languages, frameworks and libraries in the near
 <RenderOfficialContents>
     If you want to know more about the essentials that are needed to setup your own application,
     then have a look at the{' '}
-    <a href='/docs/setting-up-a-deriv-application'>Setting up a Deriv application</a> section.
+    <a href='setting-up-a-deriv-application'>Setting up a Deriv application</a> section.
 </RenderOfficialContents>

docs/setting-up-a-deriv-application.md

@@ -16,9 +16,9 @@ description: A step-by-step guide on creating your Deriv API token and building
 
 #### Deriv account
 
-If you don't have a Deriv account yet, you can easily create one by visiting our signup page or using the <a href="/api-explorer#new_account_virtual" target="_blank" rel="noopener noreferrer">new_account_virtual</a> API call. It's completely free. And if you have an account already, please log in using your account details. To avoid any accidental loss of funds during testing, we recommend using your demo account instead of a real account.
+If you don't have a Deriv account yet, you can easily create one by visiting our signup page or using the <a href="api-explorer#new_account_virtual" target="_blank" rel="noopener noreferrer">new_account_virtual</a> API call. It's completely free. And if you have an account already, please log in using your account details. To avoid any accidental loss of funds during testing, we recommend using your demo account instead of a real account.
 
-To earn markup, get a Deriv real account to receive your monthly earnings. You can also create a real account using <a href="/api-explorer#new_account_real" target="_blank" rel="noopener noreferrer">new_account_real</a> or <a href="/api-explorer#new_account_maltainvest" target="_blank" rel="noopener noreferrer">new_account_maltainvest</a> API calls.
+To earn markup, get a Deriv real account to receive your monthly earnings. You can also create a real account using <a href="api-explorer#new_account_real" target="_blank" rel="noopener noreferrer">new_account_real</a> or <a href="api-explorer#new_account_maltainvest" target="_blank" rel="noopener noreferrer">new_account_maltainvest</a> API calls.
 
 :::caution
 To create Deriv applications, you'll need an API token with the Admin scope for the account you wish to use for your application.
@@ -34,7 +34,7 @@ To create a new API token, follow these steps:
 2. Provide a name for your token
 3. Click **Create**
 
-Alternatively, you can create an API token via the <a href="/api-explorer#api_token" target="_blank" rel="noopener noreferrer">api_token</a> API call.
+Alternatively, you can create an API token via the <a href="api-explorer#api_token" target="_blank" rel="noopener noreferrer">api_token</a> API call.
 
 :::caution
 You need a token with the `Admin` scope to create an application.

src/components/Footer/index.tsx

@@ -40,6 +40,12 @@ const Footer = () => {
           <Translate>if you have any questions.</Translate>
         </Text>
       </section>
+
+      {/* This script is only for enabling crowdin in context tool. Should be removed once translation is ready! */}
+      <script type='text/javascript'>
+        var _jipt = []; _jipt.push([`project`, `deriv-api-documentation`]);
+      </script>
+      <script type='text/javascript' src='//cdn.crowdin.com/jipt/jipt.js'></script>
     </footer>
   );
 };

src/configs/websocket/index.ts

@@ -8,6 +8,7 @@ import {
 } from './types';
 import { Observable } from 'rxjs';
 import { getIsBrowser, getServerConfig } from '@site/src/utils';
+import { getCurrentLanguage } from '@site/src/utils/language-utils';
 
 export type TDerivApi = {
   send: (...requestData: unknown[]) => Promise<unknown>;
@@ -38,7 +39,9 @@ export class ApiManager {
   public init() {
     if (!this.socket) {
       const { serverUrl, appId } = getServerConfig();
-      this.socket = new WebSocket(`wss://${serverUrl}/websockets/v3?app_id=${appId}`);
+      this.socket = new WebSocket(
+        `wss://${serverUrl}/websockets/v3?app_id=${appId}&l=${getCurrentLanguage()}`,
+      );
     }
     this.derivApi = new DerivAPIBasic({ connection: this.socket });
     this.registerKeepAlive();

src/features/Endpoint/Endpoint.tsx

@@ -5,6 +5,7 @@ import { getAppId } from '@site/src/utils';
 import { DEFAULT_WS_SERVER } from '@site/src/utils/constants';
 import styles from './Endpoint.module.scss';
 import Translate, { translate } from '@docusaurus/Translate';
+import { getCurrentLanguage } from '@site/src/utils/language-utils';
 
 interface IEndpointFormValues {
   app_id: string;
@@ -44,7 +45,7 @@ const EndPoint = () => {
 
   const server_url = localStorage.getItem('config.server_url') ?? default_endpoint.server_url;
   const app_id = localStorage.getItem('config.app_id') ?? default_endpoint.app_id;
-  const current_url = `wss://${server_url}/websockets/v3?app_id=${app_id}&l=EN&brand=deriv`;
+  const current_url = `wss://${server_url}/websockets/v3?app_id=${app_id}&l=${getCurrentLanguage()}&brand=deriv`;
 
   return (
     <React.Fragment>

src/features/dashboard/components/Dialogs/RegisterAppDialogError/index.tsx

@@ -19,7 +19,7 @@ export const RegisterAppDialogError = ({ error, onClose }: TRegisterAppDialogErr
   const actionButtons: TModalActionButton[] = [
     {
       id: 1,
-      text: 'Got it',
+      text: translate({ message: 'Got it' }),
       color: 'secondary',
       onClick: () => {
         onClose();

src/pages/auth.tsx

@@ -3,7 +3,7 @@ import Layout from '@theme/Layout';
 import { Login } from '../features/Auth/Login/Login';
 import useAuthParams from '../hooks/useAuthParams';
 import { useEffect } from 'react';
-import { Redirect, useLocation } from '@docusaurus/router';
+import { useLocation } from '@docusaurus/router';
 import useAuthContext from '../hooks/useAuthContext';
 
 export default function Auth(): JSX.Element {

src/utils/language-utils.ts

@@ -0,0 +1,9 @@
+export const locales = ['en', 'fr'];
+
+export const getCurrentLanguage = () => {
+  const path = window.location.pathname;
+  const currentLocale = locales.find(
+    (locale) => path.startsWith(`/${locale}/`) || path === `/${locale}`,
+  );
+  return currentLocale ?? 'en';
+};