chore: translate added to text

binary-com · Jun 1, 2023 · de5dc9b · de5dc9b
1 parent 4d2234a
commit de5dc9b
Show file tree

Hide file tree

Showing 21 changed files with 245 additions and 102 deletions.
diff --git a/src/features/Apiexplorer/Dropdown/DropdownList/index.tsx b/src/features/Apiexplorer/Dropdown/DropdownList/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { playground_requests } from '@site/src/utils/playground_requests';
 import clsx from 'clsx';
 import styles from './DropdownList.module.scss';
+import Translate from '@docusaurus/Translate';
 
 type TDropdownList = {
   selected: string;
@@ -35,10 +36,14 @@ const DropdownList = ({
       />
       <div className={styles.dropdownList}>
         <div className={styles.dropdownSelect}>
-          <span>Select API Call - Version 3</span>
+          <span>
+            <Translate>Select API Call - Version 3</Translate>
+          </span>
         </div>
         <div className={styles.dropdownStart}>
-          <span>ALL CALLS</span>
+          <span>
+            <Translate>ALL CALLS</Translate>
+          </span>
         </div>
         {playground_requests
           .filter((option) => {

diff --git a/src/features/Apiexplorer/LoginDialog/index.tsx b/src/features/Apiexplorer/LoginDialog/index.tsx
@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { Modal, Button } from '@deriv/ui';
 import useLoginUrl from '@site/src/hooks/useLoginUrl';
 import styles from './LoginDialog.module.scss';
+import Translate from '@docusaurus/Translate';
 
 type TLoginDialog = {
   setToggleModal: React.Dispatch<React.SetStateAction<boolean>>;
@@ -34,13 +35,15 @@ export const LoginDialog = ({ setToggleModal }: TLoginDialog) => {
             has_close_button
             className={styles.wrapper}
           >
-            <div className={styles.modal}>Log in or sign up to continue.</div>
+            <div className={styles.modal}>
+              <Translate>Log in or sign up to continue.</Translate>
+            </div>
             <div className={styles.buttonWrapper}>
               <Button color='tertiary' onClick={handleSignUp} className={styles.btn}>
-                Sign up
+                <Translate>Sign up</Translate>
               </Button>
               <Button color='primary' onClick={handleClick} className={styles.btn}>
-                Log in
+                <Translate>Log in</Translate>
               </Button>
             </div>
           </Modal.PageContent>

diff --git a/src/features/Apiexplorer/SubscribeRenderer/index.tsx b/src/features/Apiexplorer/SubscribeRenderer/index.tsx
@@ -11,6 +11,7 @@ import useDisableSendRequest from '@site/src/hooks/useDisableSendRequest';
 import LoginDialog from '../LoginDialog';
 import PlaygroundSection from '../RequestResponseRenderer/PlaygroundSection';
 import ValidDialog from '../ValidDialog';
+import Translate from '@docusaurus/Translate';
 
 export interface IResponseRendererProps<T extends TSocketSubscribableEndpointNames> {
   name: T;
@@ -60,10 +61,10 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
     <div>
       <div className={styles.btnWrapper}>
         <Button color='primary' disabled={disableSendRequest(auth)} onClick={handleClick}>
-          Send Request
+          <Translate>Send Request</Translate>
         </Button>
         <Button color='secondary' onClick={handleClear}>
-          Clear
+          <Translate>Clear</Translate>
         </Button>
       </div>
       {is_valid ? (

diff --git a/src/features/Apiexplorer/ValidDialog/index.tsx b/src/features/Apiexplorer/ValidDialog/index.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { Modal } from '@deriv/ui';
 import styles from '../LoginDialog/LoginDialog.module.scss';
+import Translate from '@docusaurus/Translate';
 
 type TValidDialog = {
   setIsValid: React.Dispatch<React.SetStateAction<boolean>>;
@@ -28,8 +29,10 @@ export const ValidDialog = ({ setIsValid, setToggleModal }: TValidDialog) => {
             className={styles.validwrapper}
           >
             <div className={styles.validmodal}>
-              Your JSON object is invalid. Please make sure you provide the correct syntax for your
-              JSON object.
+              <Translate>
+                Your JSON object is invalid. Please make sure you provide the correct syntax for
+                your JSON object.
+              </Translate>
             </div>
           </Modal.PageContent>
         </div>

diff --git a/src/features/Auth/Login/Login.tsx b/src/features/Auth/Login/Login.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import styles from './Login.module.scss';
 import useLoginUrl from '@site/src/hooks/useLoginUrl';
 import Footer from '@site/src/components/Footer';
+import Translate from '@docusaurus/Translate';
 
 export const Login = () => {
   const { getUrl } = useLoginUrl();
@@ -16,10 +17,12 @@ export const Login = () => {
         <div className={styles.loginsection}>
           <div className={styles.loginImage} role='image' />
           <Text type='paragraph-1' as={'h1'} align='center' bold role='heading'>
-            Log in to your Deriv account to get the API token and start using our API.
+            <Translate>
+              Log in to your Deriv account to get the API token and start using our API.
+            </Translate>
           </Text>
           <Button color='primary' onClick={handleClick}>
-            Log In
+            <Translate>Log In</Translate>
           </Button>
         </div>
         <div className={styles.footer}>

diff --git a/src/features/Endpoint/Endpoint.tsx b/src/features/Endpoint/Endpoint.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import { Button, Text } from '@deriv/ui';
 import styles from './Endpoint.module.scss';
+import Translate from '@docusaurus/Translate';
 
 const default_endpoint = {
   app_id: '35014',
@@ -45,7 +46,7 @@ const EndPoint = () => {
       <form onSubmit={handleSubmit(onSubmit)} aria-label='form'>
         <div className={styles.pageContent}>
           <Text type='heading-2' as={'h2'} align='center' bold role='heading'>
-            Change API endpoint
+            <Translate>Change API endpoint</Translate>
           </Text>
           <div className={styles.content}>
             <div className={styles.customTextInput} id='custom-text-input'>
@@ -66,7 +67,9 @@ const EndPoint = () => {
                   className={styles.textInput}
                   required
                 />
-                <label className={styles.inlineLabel}>Server URL</label>
+                <label className={styles.inlineLabel}>
+                  <Translate>Server URL</Translate>
+                </label>
                 {errors.server_url && (
                   <div data-testid='server_error' className={styles.errorMessage}>
                     {errors.server_url.message}
@@ -90,7 +93,9 @@ const EndPoint = () => {
                   placeholder='e.g. 9999'
                   required
                 />
-                <label className={styles.inlineLabel}>App ID</label>
+                <label className={styles.inlineLabel}>
+                  <Translate>App ID </Translate>
+                </label>
                 {errors.app_id && (
                   <div data-testid='app_id_error' className={styles.errorMessage}>
                     {errors.app_id.message}
@@ -99,12 +104,14 @@ const EndPoint = () => {
               </div>
             </div>
             <div className={styles.currentUrl}>
-              <span className={styles.urlLabel}>Connected to :</span>
+              <span className={styles.urlLabel}>
+                <Translate>Connected to :</Translate>
+              </span>
               <div className={styles.urlLink}>{current_url}</div>
             </div>
             <div className={styles.buttons}>
               <Button type='submit' color='primary' disabled={Object.keys(errors).length > 0}>
-                Submit
+                <Translate>Submit</Translate>
               </Button>
               <span style={{ marginLeft: '1.6rem' }} />
               <Button
@@ -113,7 +120,7 @@ const EndPoint = () => {
                 onClick={onResetClicked}
                 className={styles.resetButton}
               >
-                Reset to original settings
+                <Translate>Reset to original settings</Translate>
               </Button>
             </div>
           </div>

diff --git a/src/features/Home/ApiFeatures/ApiFeatures.tsx b/src/features/Home/ApiFeatures/ApiFeatures.tsx
@@ -1,17 +1,20 @@
 import React from 'react';
 import { Text } from '@deriv/ui';
 import styles from './ApiFeatures.module.scss';
+import Translate from '@docusaurus/Translate';
 export const ApiFeatures = () => {
   return (
     <article className={styles.FeaturesContainer} data-testid='api-features'>
       <section className={styles.FeatureText}>
         <header>
           <Text type='heading-2' as={'h2'} bold aria-level={1}>
-            Deriv API features
+            <Translate> Deriv API features</Translate>
           </Text>
           <Text type='paragraph-1' className={styles.FeatureParagraph} role='definition'>
-            Deriv API gives you full access to all the trading functionalities of DTrader and allows
-            you to build your own comprehensive trading systems and analysis tools.
+            <Translate>
+              Deriv API gives you full access to all the trading functionalities of DTrader and
+              allows you to build your own comprehensive trading systems and analysis tools.
+            </Translate>
           </Text>
           <Text type='paragraph-1' className={styles.FeatureParagraph} role={'note'}>
             {"With our API, you'll be able to:"}
@@ -21,23 +24,31 @@ export const ApiFeatures = () => {
           <ul className={styles.FeatureList}>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
-              <div className={styles.FeatureContent}>Trade digital options and multipliers</div>
+              <div className={styles.FeatureContent}>
+                <Translate>Trade digital options and multipliers</Translate>
+              </div>
             </li>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
-              <div className={styles.FeatureContent}>Monitor real-time pricing</div>
+              <div className={styles.FeatureContent}>
+                <Translate>Monitor real-time pricing</Translate>
+              </div>
             </li>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
-              <div className={styles.FeatureContent}>Buy/sell contracts</div>
+              <div className={styles.FeatureContent}>
+                <Translate>Buy/sell contracts</Translate>
+              </div>
             </li>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
               <div className={styles.FeatureContent}>{"Manage user's accounts"}</div>
             </li>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
-              <div className={styles.FeatureContent}>Monitor existing contracts</div>
+              <div className={styles.FeatureContent}>
+                <Translate>Monitor existing contracts</Translate>
+              </div>
             </li>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>

diff --git a/src/features/Home/Benefits/Benefits.tsx b/src/features/Home/Benefits/Benefits.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text } from '@deriv/ui';
 import styles from './Benefits.module.scss';
+import Translate from '@docusaurus/Translate';
 
 type TBenefitsIcon = {
   icon: string;
@@ -40,7 +41,7 @@ export const Benefits = () => {
     <article data-testid='benefits' className={styles.BenefitsContainer}>
       <header>
         <Text type='heading-2' as={'h2'} align='center' bold className={styles.Heading}>
-          Benefits of using Deriv API
+          <Translate> Benefits of using Deriv API</Translate>
         </Text>
         <section className={styles.BenefitsIcons}>
           <BenefitsIcon icon='automation' text='Automation' alt='automation' />
@@ -52,11 +53,15 @@ export const Benefits = () => {
         <article className={styles.InformationContainer}>
           <ImageContainer image='personalisation' alt='personalisation' />
           <section className={styles.InformationContent}>
-            <h1>Personalize your trading</h1>
+            <h1>
+              <Translate>Personalize your trading</Translate>
+            </h1>
             <Text type='subtitle-2' as='p'>
-              Personalize your trading apps to match your needs. Create charts and views the way you
-              like them. Develop your trading app using any common programming language and extend
-              your trading opportunities.
+              <Translate>
+                Personalize your trading apps to match your needs. Create charts and views the way
+                you like them. Develop your trading app using any common programming language and
+                extend your trading opportunities.
+              </Translate>
             </Text>
           </section>
         </article>
@@ -65,9 +70,11 @@ export const Benefits = () => {
           <section className={styles.InformationContent}>
             <h1>Build a business and earn more</h1>
             <Text type='subtitle-2' as='p'>
-              Create your own trading apps by taking advantage of the power of Deriv&apos;s trading
-              services. Share your apps with fellow traders or customers, and get a chance to earn
-              more or build your own business.
+              <Translate>
+                Create your own trading apps by taking advantage of the power of Deriv&apos;s
+                trading services. Share your apps with fellow traders or customers, and get a chance
+                to earn more or build your own business.
+              </Translate>
             </Text>
           </section>
         </article>

diff --git a/src/features/Home/Carousel/Carousel.tsx b/src/features/Home/Carousel/Carousel.tsx
@@ -6,13 +6,14 @@ import NextButton from './NextButton';
 import PrevButton from './PrevButton';
 import styles from './Carousel.module.scss';
 import './swiper-custom.scss';
+import Translate from '@docusaurus/Translate';
 
 export const Carousel = () => {
   return (
     <article data-testid='carousel-component' className={`${styles.carouselComponent} carousel`}>
       <header>
         <Text type='heading-2' as='h1' align='center' bold className={styles.carouselHeading}>
-          See what our clients say
+          <Translate> See what our clients say </Translate>
         </Text>
       </header>
       <section className={styles.carouselContainer}>

diff --git a/src/features/Home/ClientLibraries/ClientLibraries.tsx b/src/features/Home/ClientLibraries/ClientLibraries.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text } from '@deriv/ui';
 import styles from './ClientLibraries.module.scss';
+import Translate from '@docusaurus/Translate';
 
 export const ClientLibraries = () => {
   return (
@@ -17,11 +18,13 @@ export const ClientLibraries = () => {
           aria-level={1}
           className={styles.Heading}
         >
-          Comprehensive all-in-one <br /> client library
+          <Translate>Comprehensive all-in-one</Translate>
+          <br /> <Translate>client library</Translate>
         </Text>
         <p className={styles.SubText}>
-          Simplify your development processes and get your app up and running <br />
-          faster with the client library of your choice.
+          <Translate>Simplify your development processes and get your app up and running</Translate>
+          <br />
+          <Translate> faster with the client library of your choice.</Translate>
         </p>
         <nav className={styles.LibraryLogo}>
           <div className={styles.LogoAndLink}>
@@ -32,7 +35,9 @@ export const ClientLibraries = () => {
               target='_blank'
             >
               <img src='/img/js.svg'></img>
-              <label>Go to the JavaScript library</label>
+              <label>
+                <Translate>Go to the JavaScript library</Translate>
+              </label>
               <img className={styles.LibraryChevron} src='/img/library-chevron.svg' />
             </a>
           </div>
@@ -44,7 +49,9 @@ export const ClientLibraries = () => {
               target='_blank'
             >
               <img src='/img/py.svg'></img>
-              <label>Go to the Python library</label>
+              <label>
+                <Translate>Go to the Python library</Translate>
+              </label>
               <img className={styles.LibraryChevron} src='/img/library-chevron.svg' />
             </a>
           </div>
@@ -56,7 +63,9 @@ export const ClientLibraries = () => {
               target='_blank'
             >
               <img src='/img/flutter.svg'></img>
-              <label>Go to the Flutter library</label>
+              <label>
+                <Translate>Go to the Flutter library</Translate>
+              </label>
               <img className={styles.LibraryChevron} src='/img/library-chevron.svg' />
             </a>
           </div>