From fbff6e025af36564d5e815d725e600bb3a8ec803 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrimjain@Agrim-Jains-Mac-FQ22G9XXP9-Standard.local>
Date: Fri, 17 May 2024 11:52:37 +0400
Subject: [PATCH 01/14] token key popup

---
 .../ApiTokenForm/CreateTokenField/index.tsx   | 13 +++++++++--
 .../TokenCreationDialogSuccess/index.tsx      | 20 ++++++++++++++---
 .../token-creation-dialog-sucess.module.scss  | 22 ++++++++++++++++++-
 3 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
index ac38aef27..a4a14e59d 100644
--- a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
+++ b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
@@ -36,14 +36,18 @@ const CreateTokenField = ({
 }: TCreateTokenField) => {
   const { tokens } = useApiToken();
   const [input_value, setInputValue] = useState('');
+  const [lastInputValue, setLastInputValue] = useState('');
   const numberOfTokens = tokens.length;
 
   useEffect(() => {
     if (form_is_cleared) {
+      setLastInputValue(input_value);
       setInputValue('');
       setFormIsCleared(false);
     }
-  }, [form_is_cleared]);
+  }, [form_is_cleared, input_value, setFormIsCleared]);
+
+  const inputToPass = form_is_cleared ? lastInputValue : input_value;
   const getTokenNames = useMemo(() => {
     const token_names = [];
     for (const token_object of tokens) {
@@ -87,7 +91,12 @@ const CreateTokenField = ({
             {...register}
             placeholder=''
           />
-          {is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
+          {is_toggle && (
+            <TokenCreationDialogSuccess
+              setToggleModal={setToggleModal}
+              inputTokenName={inputToPass}
+            />
+          )}
           <label
             htmlFor='playground-request'
             className={styles.inlineLabel}
diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
index 1a97049e7..204253c8e 100644
--- a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
+++ b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
@@ -1,14 +1,18 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Button, Modal } from '@deriv/ui';
 import styles from './token-creation-dialog-sucess.module.scss';
+import useApiToken from '@site/src/hooks/useApiToken';
 
 type ITokenCreationDialogSuccessProps = {
   setToggleModal: React.Dispatch<React.SetStateAction<boolean>>;
+  inputTokenName: string;
 };
 
 export const TokenCreationDialogSuccess = ({
   setToggleModal,
 }: ITokenCreationDialogSuccessProps) => {
+  const { tokens } = useApiToken();
+
   const onOpenChange = useCallback(
     (open: boolean) => {
       if (!open) {
@@ -17,24 +21,34 @@ export const TokenCreationDialogSuccess = ({
     },
     [setToggleModal],
   );
+
   const handleToggle = () => {
     setToggleModal(false);
   };
 
+  const latestToken = tokens && tokens.length > 0 ? tokens[0] : null;
+
   return (
     <Modal defaultOpen onOpenChange={onOpenChange}>
       <Modal.Portal>
         <div className='modal-overlay'>
           <Modal.Overlay />
           <Modal.PageContent
-            title={'Token created successfully'}
+            title={'Token created successfully!'}
             has_close_button
             className={styles.wrapper}
           >
             <div className={styles.modal}>
-              <p>Your API token is ready to be used.</p>
+              <p>
+                Please save this token key. For security reasons, it can&apos;t be viewed or copied
+                again. If you lose this key, you&apos;ll need to generate a new token.
+              </p>
             </div>
 
+            <span className={styles.textField}>
+              {latestToken && latestToken?.scopes?.includes('admin') && latestToken.token}
+            </span>
+
             <div className={styles.buttonWrapper}>
               <Button color='primary' onClick={handleToggle} className={styles.btn}>
                 OK
diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
index 4967bf3fd..e60405ae3 100644
--- a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
+++ b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
@@ -1,7 +1,8 @@
 @use 'src/styles/utility' as *;
 
 .wrapper {
-  width: rem(44);
+  width: rem(44.8);
+  text-align: center;
 }
 
 .modal {
@@ -11,11 +12,28 @@
   padding: rem(0.8) rem(2.4) 0;
   font-size: rem(1.4);
   line-height: rem(2);
+  text-align: left;
   @media (max-width: 992px) {
     padding: 0 0 0 rem(1.6);
   }
 }
 
+.textField {
+  display: flex;
+  height: 56px;
+  width: 400px;
+  padding: 0px 16px;
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 16px;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  border-radius: 8px;
+  border: 1px solid var(--core-color-opacity-black-100, rgba(0, 0, 0, 0.08));
+  background: var(--core-color-solid-slate-50, #fff);
+}
+
 .buttonWrapper {
   display: flex;
   justify-content: flex-end;
@@ -25,5 +43,7 @@
   .btn {
     padding: rem(1) rem(1.6);
     border-radius: rem(1.5);
+    align-items: center;
+    margin-right: 170px;
   }
 }

From ac9fbd91c791c2495bcbfd96b809943ca7440c49 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrimjain@Agrim-Jains-Mac-FQ22G9XXP9-Standard.local>
Date: Mon, 20 May 2024 15:35:07 +0400
Subject: [PATCH 02/14] removing copy functionality from table

---
 .../components/ApiTokenTable/table.token.cell.tsx     | 11 +----------
 .../Dialogs/TokenCreationDialogSuccess/index.tsx      |  7 +++----
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/src/features/dashboard/components/ApiTokenTable/table.token.cell.tsx b/src/features/dashboard/components/ApiTokenTable/table.token.cell.tsx
index 9c0d9acee..276c433ed 100644
--- a/src/features/dashboard/components/ApiTokenTable/table.token.cell.tsx
+++ b/src/features/dashboard/components/ApiTokenTable/table.token.cell.tsx
@@ -24,16 +24,7 @@ const ApiTokenCell = ({ cell }: React.PropsWithChildren<CellProps<TTokenType, st
 
   return (
     <div data-testid={'token-cell'} className={styles.token_cell}>
-      <div>{is_hiding_token ? <HiddenToken /> : cell.value}</div>
-      <CopyButton has_admin={has_admin_scope} value={token} />
-      <button
-        onClick={() => setIsHidingToken(!is_hiding_token)}
-        className={styles.eye_button}
-        data-testid='eye-button'
-        style={{
-          backgroundImage: is_hiding_token ? 'url(/img/eye_closed.svg)' : 'url(/img/eye_open.svg)',
-        }}
-      />
+      <div>{cell.value}</div>
     </div>
   );
 };
diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
index 204253c8e..ff894cd36 100644
--- a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
+++ b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
@@ -26,7 +26,8 @@ export const TokenCreationDialogSuccess = ({
     setToggleModal(false);
   };
 
-  const latestToken = tokens && tokens.length > 0 ? tokens[0] : null;
+  const latestTokenLength = tokens && tokens.length - 1;
+  const latestToken = tokens && tokens.length > 0 ? tokens[latestTokenLength].token : null;
 
   return (
     <Modal defaultOpen onOpenChange={onOpenChange}>
@@ -45,9 +46,7 @@ export const TokenCreationDialogSuccess = ({
               </p>
             </div>
 
-            <span className={styles.textField}>
-              {latestToken && latestToken?.scopes?.includes('admin') && latestToken.token}
-            </span>
+            <span className={styles.textField}>{latestToken && latestToken}</span>
 
             <div className={styles.buttonWrapper}>
               <Button color='primary' onClick={handleToggle} className={styles.btn}>

From d7fd125031a12e74579662596806ea215ffef063 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrimjain@Agrim-Jains-Mac-FQ22G9XXP9-Standard.local>
Date: Mon, 20 May 2024 15:44:37 +0400
Subject: [PATCH 03/14] styling of the token in the token table

---
 .../ApiTokenTable/token-cell.module.scss      | 87 +++----------------
 1 file changed, 12 insertions(+), 75 deletions(-)

diff --git a/src/features/dashboard/components/ApiTokenTable/token-cell.module.scss b/src/features/dashboard/components/ApiTokenTable/token-cell.module.scss
index 1e37be36f..c220f6e6d 100644
--- a/src/features/dashboard/components/ApiTokenTable/token-cell.module.scss
+++ b/src/features/dashboard/components/ApiTokenTable/token-cell.module.scss
@@ -1,82 +1,19 @@
 @use 'src/styles/utility' as *;
 
 .hidden_container {
-    display: flex;
-    gap: rem(0.45);
-    .hidden_character {
-        width: rem(0.5);
-        height: rem(0.5);
-        border-radius: 100%;
-        background-color: var(--ifm-color-emphasis-900);
-    }
+  display: flex;
+  gap: rem(0.45);
+  .hidden_character {
+    width: rem(0.5);
+    height: rem(0.5);
+    border-radius: 100%;
+    background-color: var(--ifm-color-emphasis-900);
+  }
 }
 
 .token_cell {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: rem(1);
-    button {
-        position: relative;
-        min-width: rem(1.5);
-        min-height: rem(1.5);
-        background-repeat: no-repeat;
-        background-position: center;
-        background-color: var(--colors-greyLight200);
-        border: 1px solid var(--colors-greyLight400);
-        border-radius: 100%;
-        padding: rem(0.3);
-        &.copy_button {
-            cursor: copy;
-            background-image: url(/img/copy.svg);
-        }
-        &:hover {
-            &::after {
-                content: '';
-                text-align: center;
-                position: absolute;
-                display: inline-block;
-                border-radius: 4px;
-                padding: rem(1);
-                color: var(--ifm-color-emphasis-100);
-                background-color: var(--ifm-color-emphasis-700);
-                font-size: var(--fontSizes-3xs);
-                top: calc(-50% - 20px);
-                left: 50%;
-                min-width: 100px;
-                transform: translate(-50%, -50%);
-            }
-            &::before {
-                content: '';
-                position: absolute;
-                width: 0; 
-                height: 0; 
-                border-left: rem(0.7) solid transparent;
-                border-right: rem(0.7) solid transparent;
-                border-top: rem(0.7) solid var(--ifm-color-emphasis-700);
-                top: calc(-50% + 2px);
-                transform: translate(-50%, -50%);
-                left: 50%;
-            }
-        }
-        &.eye_button {
-            cursor: pointer;
-            &:hover::after {
-                content: 'Hide this token';
-            }
-        }
-        &.copy_button {
-            &:hover::after {
-                content: 'Copy this token';
-            }
-            &.is_copying {
-                background-image: url(/img/check.svg);
-                background-color: var(--ifm-color-primary-lightest);
-                border: 1px solid var(--ifm-color-primary);
-                &:hover::after {
-                    content: 'Token copied!';
-                }
-            }
-        }
-    }
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  gap: 0.625rem;
 }

From bd9849d8cb04b800d929ff62149d4633dc4c8013 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrimjain@Agrim-Jains-Mac-FQ22G9XXP9-Standard.local>
Date: Wed, 22 May 2024 10:15:36 +0400
Subject: [PATCH 04/14] complete functionality and design

---
 package-lock.json                             | 10 +++
 package.json                                  |  1 +
 src/contexts/api-token/api-token.context.tsx  |  2 +
 src/contexts/api-token/api-token.provider.tsx | 13 +++-
 .../ApiTokenForm/CreateTokenField/index.tsx   | 10 +--
 .../ApiTokenTable/CopyButton/index.tsx        |  8 ++-
 .../ApiTokenTable/token-cell.module.scss      |  4 ++
 .../TokenCreationDialogSuccess/index.tsx      | 31 +++++++---
 .../token-creation-dialog-sucess.module.scss  | 62 +++++++++++--------
 .../dashboard/hooks/useCreateToken/index.tsx  |  5 +-
 10 files changed, 96 insertions(+), 50 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fed36c2fa..ef457198f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@deriv/deriv-api": "^1.0.11",
+        "@deriv/quill-icons": "^1.22.9",
         "@deriv/ui": "^0.1.0",
         "@docusaurus/core": "^2.4.0",
         "@docusaurus/plugin-client-redirects": "^2.4.0",
@@ -2632,6 +2633,15 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "node_modules/@deriv/quill-icons": {
+      "version": "1.22.9",
+      "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.22.9.tgz",
+      "integrity": "sha512-NadugHtisMc7BKYiEMaFcvLuhKjGEYvo0hQdNBewCZzHTXijY0NJx34G+f9pcsYvsCIBn36dFavVs+zVKTBCQg==",
+      "peerDependencies": {
+        "react": ">= 16",
+        "react-dom": ">= 16"
+      }
+    },
     "node_modules/@deriv/ui": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@deriv/ui/-/ui-0.1.0.tgz",
diff --git a/package.json b/package.json
index 546d18e96..7b8615c40 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@deriv/deriv-api": "^1.0.11",
+    "@deriv/quill-icons": "^1.22.9",
     "@deriv/ui": "^0.1.0",
     "@docusaurus/core": "^2.4.0",
     "@docusaurus/plugin-client-redirects": "^2.4.0",
diff --git a/src/contexts/api-token/api-token.context.tsx b/src/contexts/api-token/api-token.context.tsx
index 9d55e38fc..994aa766a 100644
--- a/src/contexts/api-token/api-token.context.tsx
+++ b/src/contexts/api-token/api-token.context.tsx
@@ -6,6 +6,8 @@ export interface IApiTokenContext {
   isLoadingTokens: boolean;
   currentToken: TTokenType;
   updateCurrentToken: (token: TTokenType) => void;
+  lastTokenDisplayName: string;
+  setLastTokenDisplayName: (name: string) => void;
 }
 
 export const ApiTokenContext = React.createContext<IApiTokenContext | null>(null);
diff --git a/src/contexts/api-token/api-token.provider.tsx b/src/contexts/api-token/api-token.provider.tsx
index 19db6a81b..3ac9b34e3 100644
--- a/src/contexts/api-token/api-token.provider.tsx
+++ b/src/contexts/api-token/api-token.provider.tsx
@@ -11,6 +11,7 @@ type TTokenProviderProps = {
 const ApiTokenProvider = ({ children }: TTokenProviderProps) => {
   const [tokens, setTokens] = useState<TTokensArrayType>([]);
   const [currentToken, setCurrentToken] = useState<TTokenType>();
+  const [lastTokenDisplayName, setLastTokenDisplayName] = useState<string>('');
 
   const { send: getAllTokens, data, is_loading } = useWS('api_token');
   const { is_authorized } = useAuthContext();
@@ -46,8 +47,18 @@ const ApiTokenProvider = ({ children }: TTokenProviderProps) => {
       currentToken,
       updateCurrentToken,
       updateTokens,
+      lastTokenDisplayName,
+      setLastTokenDisplayName,
     };
-  }, [currentToken, is_loading, tokens, updateCurrentToken, updateTokens]);
+  }, [
+    currentToken,
+    is_loading,
+    tokens,
+    updateCurrentToken,
+    updateTokens,
+    lastTokenDisplayName,
+    setLastTokenDisplayName,
+  ]);
 
   return <ApiTokenContext.Provider value={contextValue}>{children}</ApiTokenContext.Provider>;
 };
diff --git a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
index a4a14e59d..a3667c315 100644
--- a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
+++ b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
@@ -36,18 +36,15 @@ const CreateTokenField = ({
 }: TCreateTokenField) => {
   const { tokens } = useApiToken();
   const [input_value, setInputValue] = useState('');
-  const [lastInputValue, setLastInputValue] = useState('');
   const numberOfTokens = tokens.length;
 
   useEffect(() => {
     if (form_is_cleared) {
-      setLastInputValue(input_value);
       setInputValue('');
       setFormIsCleared(false);
     }
   }, [form_is_cleared, input_value, setFormIsCleared]);
 
-  const inputToPass = form_is_cleared ? lastInputValue : input_value;
   const getTokenNames = useMemo(() => {
     const token_names = [];
     for (const token_object of tokens) {
@@ -91,12 +88,7 @@ const CreateTokenField = ({
             {...register}
             placeholder=''
           />
-          {is_toggle && (
-            <TokenCreationDialogSuccess
-              setToggleModal={setToggleModal}
-              inputTokenName={inputToPass}
-            />
-          )}
+          {is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
           <label
             htmlFor='playground-request'
             className={styles.inlineLabel}
diff --git a/src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx b/src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx
index 6ab218ede..818514611 100644
--- a/src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx
+++ b/src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import CopyTokenDialog from '../CopyTokenDialog';
 import styles from '../token-cell.module.scss';
+import { StandaloneCopyRegularIcon } from '@deriv/quill-icons';
 
 type TCopyButton = {
   value: string;
@@ -28,12 +29,15 @@ const CopyButton = ({ value, has_admin = false }: TCopyButton) => {
 
   return (
     <React.Fragment>
-      <button
+      <StandaloneCopyRegularIcon
+        fill='#000000'
+        iconSize='sm'
         onClick={() => {
           has_admin ? setToggleModal(!toggle_modal) : copyToken();
         }}
-        className={`${styles.copy_button} ${is_copying}`}
+        className={styles.copy_button}
       />
+
       {toggle_modal && <CopyTokenDialog setToggleModal={setToggleModal} copyToken={copyToken} />}
     </React.Fragment>
   );
diff --git a/src/features/dashboard/components/ApiTokenTable/token-cell.module.scss b/src/features/dashboard/components/ApiTokenTable/token-cell.module.scss
index c220f6e6d..bdbad085f 100644
--- a/src/features/dashboard/components/ApiTokenTable/token-cell.module.scss
+++ b/src/features/dashboard/components/ApiTokenTable/token-cell.module.scss
@@ -11,6 +11,10 @@
   }
 }
 
+.copy_button {
+  cursor: pointer;
+}
+
 .token_cell {
   display: flex;
   justify-content: left;
diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
index ff894cd36..d7da5554e 100644
--- a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
+++ b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
@@ -1,17 +1,19 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Button, Modal } from '@deriv/ui';
 import styles from './token-creation-dialog-sucess.module.scss';
 import useApiToken from '@site/src/hooks/useApiToken';
+import CopyButton from '../../ApiTokenTable/CopyButton';
 
 type ITokenCreationDialogSuccessProps = {
   setToggleModal: React.Dispatch<React.SetStateAction<boolean>>;
-  inputTokenName: string;
 };
 
 export const TokenCreationDialogSuccess = ({
   setToggleModal,
 }: ITokenCreationDialogSuccessProps) => {
-  const { tokens } = useApiToken();
+  const { tokens, lastTokenDisplayName } = useApiToken();
+  const [latestToken, setLatestToken] = useState('');
+  // const has_admin_scope = cell.row?.original?.scopes?.includes('admin');
 
   const onOpenChange = useCallback(
     (open: boolean) => {
@@ -26,8 +28,15 @@ export const TokenCreationDialogSuccess = ({
     setToggleModal(false);
   };
 
-  const latestTokenLength = tokens && tokens.length - 1;
-  const latestToken = tokens && tokens.length > 0 ? tokens[latestTokenLength].token : null;
+  useEffect(() => {
+    if (tokens.length > 0) {
+      tokens.forEach((token) => {
+        if (token.display_name.toLowerCase() === lastTokenDisplayName.toLowerCase()) {
+          setLatestToken(token.token);
+        }
+      });
+    }
+  }, [tokens, lastTokenDisplayName]);
 
   return (
     <Modal defaultOpen onOpenChange={onOpenChange}>
@@ -45,10 +54,14 @@ export const TokenCreationDialogSuccess = ({
                 again. If you lose this key, you&apos;ll need to generate a new token.
               </p>
             </div>
-
-            <span className={styles.textField}>{latestToken && latestToken}</span>
-
-            <div className={styles.buttonWrapper}>
+            <div className={styles.button_wrapper}>
+              <div className={styles.textField}>
+                <div>
+                  <div className={styles.key}>Key</div>
+                  {latestToken}
+                </div>
+                <CopyButton value={latestToken} has_admin={false} />
+              </div>
               <Button color='primary' onClick={handleToggle} className={styles.btn}>
                 OK
               </Button>
diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
index e60405ae3..df80aab9a 100644
--- a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
+++ b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
@@ -1,18 +1,21 @@
 @use 'src/styles/utility' as *;
 
 .wrapper {
-  width: rem(44.8);
-  text-align: center;
+  width: rem(53);
+  padding: rem(3.2) !important;
+  text-align: center !important;
 }
 
 .modal {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: rem(0.8) rem(2.4) 0;
-  font-size: rem(1.4);
-  line-height: rem(2);
-  text-align: left;
+  color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72));
+  font-family: 'IBM Plex Sans';
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  margin-top: 32px;
+  line-height: 24px;
+  margin-bottom: 16px;
+  text-align: left !important;
   @media (max-width: 992px) {
     padding: 0 0 0 rem(1.6);
   }
@@ -20,30 +23,35 @@
 
 .textField {
   display: flex;
-  height: 56px;
-  width: 400px;
-  padding: 0px 16px;
-  margin-left: 20px;
-  margin-right: 20px;
-  margin-top: 16px;
+  justify-content: space-between;
   align-items: center;
-  gap: 8px;
-  align-self: stretch;
+  width: 268px;
+  text-align: left !important;
+  gap: 4px;
   border-radius: 8px;
+  padding: 4px 16px;
   border: 1px solid var(--core-color-opacity-black-100, rgba(0, 0, 0, 0.08));
   background: var(--core-color-solid-slate-50, #fff);
 }
 
-.buttonWrapper {
+.key {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+}
+.button_wrapper {
+  gap: 24px;
   display: flex;
-  justify-content: flex-end;
-  padding: rem(2.4);
-  gap: rem(0.8);
+}
 
-  .btn {
-    padding: rem(1) rem(1.6);
-    border-radius: rem(1.5);
-    align-items: center;
-    margin-right: 170px;
-  }
+.btn {
+  display: block;
+  width: 156px !important;
+  height: 48px;
+  padding: 0px 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 16px !important;
+  background: var(--core-color-solid-coral-700, #ff444f);
 }
diff --git a/src/features/dashboard/hooks/useCreateToken/index.tsx b/src/features/dashboard/hooks/useCreateToken/index.tsx
index 9b142090d..69d718e06 100644
--- a/src/features/dashboard/hooks/useCreateToken/index.tsx
+++ b/src/features/dashboard/hooks/useCreateToken/index.tsx
@@ -7,15 +7,16 @@ import { TTokenType } from '@site/src/types';
 const useCreateToken = () => {
   const { send, data, is_loading, error } = useWS('api_token');
   const { is_authorized } = useAuthContext();
-  const { updateTokens } = useApiToken();
+  const { updateTokens, setLastTokenDisplayName } = useApiToken();
 
   const createToken = useCallback(
     (tokenName: string, scopes: TTokenType['scopes']) => {
       if (is_authorized) {
         send({ new_token: tokenName, new_token_scopes: scopes });
+        setLastTokenDisplayName(tokenName);
       }
     },
-    [is_authorized, send],
+    [is_authorized, send, setLastTokenDisplayName],
   );
 
   useEffect(() => {

From a02ed599e89095ef35cf42674d16e5a5c1b5f4a4 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrimjain@Agrim-Jains-Mac-FQ22G9XXP9-Standard.local>
Date: Thu, 23 May 2024 11:17:35 +0400
Subject: [PATCH 05/14] styling change

---
 .../TokenCreationDialogSuccess/index.tsx      | 22 ++++------
 .../token-creation-dialog-sucess.module.scss  | 42 +++++++++++++------
 2 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
index d7da5554e..502c78cc4 100644
--- a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
+++ b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
@@ -13,7 +13,6 @@ export const TokenCreationDialogSuccess = ({
 }: ITokenCreationDialogSuccessProps) => {
   const { tokens, lastTokenDisplayName } = useApiToken();
   const [latestToken, setLatestToken] = useState('');
-  // const has_admin_scope = cell.row?.original?.scopes?.includes('admin');
 
   const onOpenChange = useCallback(
     (open: boolean) => {
@@ -43,25 +42,22 @@ export const TokenCreationDialogSuccess = ({
       <Modal.Portal>
         <div className='modal-overlay'>
           <Modal.Overlay />
-          <Modal.PageContent
-            title={'Token created successfully!'}
-            has_close_button
-            className={styles.wrapper}
-          >
+          <Modal.PageContent className={styles.wrapper}>
+            <div className={styles.title}>Token created successfully!</div>
             <div className={styles.modal}>
               <p>
                 Please save this token key. For security reasons, it can&apos;t be viewed or copied
                 again. If you lose this key, you&apos;ll need to generate a new token.
               </p>
             </div>
-            <div className={styles.button_wrapper}>
-              <div className={styles.textField}>
-                <div>
-                  <div className={styles.key}>Key</div>
-                  {latestToken}
-                </div>
-                <CopyButton value={latestToken} has_admin={false} />
+            <div className={styles.textField}>
+              <div>
+                <div className={styles.key}>Key</div>
+                {latestToken}
               </div>
+              <CopyButton value={latestToken} has_admin={false} />
+            </div>
+            <div className={styles.button_wrapper}>
               <Button color='primary' onClick={handleToggle} className={styles.btn}>
                 OK
               </Button>
diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
index df80aab9a..1513d45a2 100644
--- a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
+++ b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
@@ -1,9 +1,22 @@
 @use 'src/styles/utility' as *;
 
 .wrapper {
-  width: rem(53);
-  padding: rem(3.2) !important;
-  text-align: center !important;
+  width: rem(51.2);
+  height: rem(36);
+  padding: 0px 32px 32px 32px !important;
+  margin-left: rem(10) !important;
+}
+
+.title {
+  color: var(--core-color-solid-slate-1400, #000);
+  text-align: center;
+  font-family: 'IBM Plex Sans';
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+  top: 0px;
+  padding: 0px 0px !important;
 }
 
 .modal {
@@ -15,18 +28,18 @@
   margin-top: 32px;
   line-height: 24px;
   margin-bottom: 16px;
-  text-align: left !important;
-  @media (max-width: 992px) {
-    padding: 0 0 0 rem(1.6);
-  }
+  text-align: left;
+  // @media (max-width: 992px) {
+  //   padding: 0 0 0 rem(1.6);
+  // }
 }
 
 .textField {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 268px;
-  text-align: left !important;
+  width: 448px;
+  text-align: left;
   gap: 4px;
   border-radius: 8px;
   padding: 4px 16px;
@@ -40,18 +53,21 @@
   line-height: 18px;
 }
 .button_wrapper {
-  gap: 24px;
+  width: 100%;
+  align-items: center !important;
   display: flex;
+  padding-top: 48px;
 }
 
 .btn {
-  display: block;
-  width: 156px !important;
-  height: 48px;
+  display: flex;
+  width: 124px !important;
+  height: 24px;
   padding: 0px 16px;
   justify-content: center;
   align-items: center;
   gap: 8px;
   border-radius: 16px !important;
   background: var(--core-color-solid-coral-700, #ff444f);
+  margin-left: 150px;
 }

From a6f543c07c2ddce62d6bfff1eb8061b3c4e02a12 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrimjain@Agrim-Jains-Mac-FQ22G9XXP9-Standard.local>
Date: Mon, 27 May 2024 11:03:09 +0400
Subject: [PATCH 06/14] styling changes

---
 .../components/ApiTokenForm/CreateTokenField/index.tsx    | 2 +-
 .../components/ApiTokenTable/CopyButton/index.tsx         | 2 +-
 .../token-creation-dialog-sucess.module.scss              | 8 ++++++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
index a3667c315..e8b1b4b43 100644
--- a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
+++ b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
@@ -43,7 +43,7 @@ const CreateTokenField = ({
       setInputValue('');
       setFormIsCleared(false);
     }
-  }, [form_is_cleared, input_value, setFormIsCleared]);
+  }, [form_is_cleared]);
 
   const getTokenNames = useMemo(() => {
     const token_names = [];
diff --git a/src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx b/src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx
index 818514611..b38c36603 100644
--- a/src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx
+++ b/src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx
@@ -30,7 +30,7 @@ const CopyButton = ({ value, has_admin = false }: TCopyButton) => {
   return (
     <React.Fragment>
       <StandaloneCopyRegularIcon
-        fill='#000000'
+        fill='var(--component-textIcon-normal-prominent)'
         iconSize='sm'
         onClick={() => {
           has_admin ? setToggleModal(!toggle_modal) : copyToken();
diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
index 1513d45a2..1efa770cc 100644
--- a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
+++ b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
@@ -4,7 +4,6 @@
   width: rem(51.2);
   height: rem(36);
   padding: 0px 32px 32px 32px !important;
-  margin-left: rem(10) !important;
 }
 
 .title {
@@ -20,6 +19,11 @@
 }
 
 .modal {
+  position: relative;
+  z-index: 310;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
   color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72));
   font-family: 'IBM Plex Sans';
   font-size: 16px;
@@ -38,7 +42,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 448px;
+  max-width: 448px;
   text-align: left;
   gap: 4px;
   border-radius: 8px;

From 702b5dfbfef2c901d77f38c26eb3169807da8786 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrimjain@Agrim-Jains-Mac-FQ22G9XXP9-Standard.local>
Date: Fri, 31 May 2024 10:44:14 +0400
Subject: [PATCH 07/14] fixing test and fixing button

---
 .../__tests__/api-token.form.test.tsx         |  5 +-
 .../CopyButton/__tests__/CopyButton.test.tsx  | 20 +-----
 .../ApiTokenTable/CopyButton/index.tsx        |  2 +
 .../ApiTokenTable/table.token.cell.tsx        |  1 -
 .../token-creation-dialog-success.test.tsx    | 67 +++++++++++++------
 .../token-creation-dialog-sucess.module.scss  |  8 +--
 .../components/Table/__tests__/Table.test.tsx |  7 --
 .../hooks/__tests__/useCreateToken.test.tsx   |  5 ++
 8 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx b/src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx
index 448f07d91..7756a05c4 100644
--- a/src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx
+++ b/src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx
@@ -77,6 +77,7 @@ describe('Home Page', () => {
             valid_for_ip: '',
           },
         ],
+        lastTokenDisplayName: '',
       }));
 
       render(<ApiTokenForm />);
@@ -201,7 +202,9 @@ describe('Home Page', () => {
       const submitButton = screen.getByRole('button', { name: /Create/i });
       await userEvent.click(submitButton);
 
-      const modal = screen.getByText('Your API token is ready to be used.');
+      const modal = screen.getByText(
+        "Please save this token key. For security reasons, it can't be viewed or copied again. If you lose this key, you'll need to generate a new token.",
+      );
       expect(modal).toBeVisible();
     });
 
diff --git a/src/features/dashboard/components/ApiTokenTable/CopyButton/__tests__/CopyButton.test.tsx b/src/features/dashboard/components/ApiTokenTable/CopyButton/__tests__/CopyButton.test.tsx
index b0f1435f9..27364019f 100644
--- a/src/features/dashboard/components/ApiTokenTable/CopyButton/__tests__/CopyButton.test.tsx
+++ b/src/features/dashboard/components/ApiTokenTable/CopyButton/__tests__/CopyButton.test.tsx
@@ -17,7 +17,7 @@ describe('CopyButton', () => {
   it('should render the CopyButton', () => {
     render(<CopyButton value='testvalue' has_admin />);
 
-    const copy_button = screen.getByRole('button');
+    const copy_button = screen.getByRole('button', { name: 'copy_button' });
     expect(copy_button).toBeInTheDocument();
   });
 
@@ -68,22 +68,4 @@ describe('CopyButton', () => {
 
     expect(modal).not.toBeInTheDocument();
   });
-
-  it('should show a green check for 2 seconds when copied', async () => {
-    const user = userEvent.setup({ delay: null });
-    jest.useFakeTimers();
-
-    render(<CopyButton value='testvalue' />);
-
-    const copy_button = screen.getByRole('button');
-    await user.click(copy_button);
-
-    expect(copy_button.classList.contains('is_copying')).toBe(true);
-
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    expect(copy_button.classList.contains('is_copying')).toBe(false);
-  });
 });
diff --git a/src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx b/src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx
index b38c36603..2e018779f 100644
--- a/src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx
+++ b/src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx
@@ -36,6 +36,8 @@ const CopyButton = ({ value, has_admin = false }: TCopyButton) => {
           has_admin ? setToggleModal(!toggle_modal) : copyToken();
         }}
         className={styles.copy_button}
+        role='button'
+        aria-label='copy_button'
       />
 
       {toggle_modal && <CopyTokenDialog setToggleModal={setToggleModal} copyToken={copyToken} />}
diff --git a/src/features/dashboard/components/ApiTokenTable/table.token.cell.tsx b/src/features/dashboard/components/ApiTokenTable/table.token.cell.tsx
index 276c433ed..ce3d8fa39 100644
--- a/src/features/dashboard/components/ApiTokenTable/table.token.cell.tsx
+++ b/src/features/dashboard/components/ApiTokenTable/table.token.cell.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { TTokenType } from '@site/src/types';
 import { CellProps } from 'react-table';
 import styles from './token-cell.module.scss';
-import CopyButton from './CopyButton';
 
 const ApiTokenCell = ({ cell }: React.PropsWithChildren<CellProps<TTokenType, string>>) => {
   const [is_hiding_token, setIsHidingToken] = useState(true);
diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/__tests__/token-creation-dialog-success.test.tsx b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/__tests__/token-creation-dialog-success.test.tsx
index c1da86b36..15d433f69 100644
--- a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/__tests__/token-creation-dialog-success.test.tsx
+++ b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/__tests__/token-creation-dialog-success.test.tsx
@@ -1,21 +1,59 @@
 import React from 'react';
 import TokenCreationDialogSuccess from '..';
-import { screen, render } from '@testing-library/react';
+import { screen, render, cleanup } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import useApiToken from '@site/src/hooks/useApiToken';
+
+jest.mock('@site/src/hooks/useApiToken');
+
+const mockUseApiToken = useApiToken as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useApiToken>>
+>;
 
 describe('Token Creation Dialog', () => {
-  it('Should display correct title on the modal', () => {
+  beforeEach(() => {
+    mockUseApiToken.mockImplementation(() => ({
+      tokens: [
+        {
+          display_name: 'testtoken1',
+          last_used: '',
+          scopes: ['read', 'trade', 'payments', 'admin'],
+          token: 'asdf1234',
+          valid_for_ip: '',
+        },
+        {
+          display_name: 'testtoken2',
+          last_used: '',
+          scopes: ['read', 'trade', 'payments', 'admin'],
+          token: 'asdf1235',
+          valid_for_ip: '',
+        },
+      ],
+      lastTokenDisplayName: 'agrim',
+    }));
+
     render(<TokenCreationDialogSuccess setToggleModal={jest.fn()} />);
+  });
 
-    const title = screen.getByText(/Token created successfully/i);
-    expect(title).toHaveTextContent('Token created successfully');
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
   });
 
-  it('Should display correct content on the modal', () => {
-    render(<TokenCreationDialogSuccess setToggleModal={jest.fn()} />);
+  it('Should display correct title on the modal', () => {
+    const title = screen.getAllByText(/Token created successfully!/i);
+    expect(title).toHaveLength(1);
+    expect(title[0]).toHaveTextContent('Token created successfully!');
+  });
 
-    const textContent = screen.getByText(/Your API token is ready to be used./i);
-    expect(textContent).toHaveTextContent('Your API token is ready to be used.');
+  it('Should display correct content on the modal', () => {
+    const textContent = screen.getAllByText(
+      /Please save this token key. For security reasons, it can't be viewed or copied again. If you lose this key, you'll need to generate a new token./i,
+    );
+    expect(textContent).toHaveLength(1);
+    expect(textContent[0]).toHaveTextContent(
+      /Please save this token key. For security reasons, it can't be viewed or copied again. If you lose this key, you'll need to generate a new token./i,
+    );
   });
 
   it('Should close the modal on OK button click', async () => {
@@ -30,17 +68,4 @@ describe('Token Creation Dialog', () => {
 
     expect(mockOnClose).toHaveBeenCalledTimes(1);
   });
-
-  it('Should close the modal on cross button click', async () => {
-    const mockOnClose = jest.fn();
-
-    render(<TokenCreationDialogSuccess setToggleModal={mockOnClose} />);
-    const modal = screen.getByText('Your API token is ready to be used.');
-
-    const crossButton = screen.getByTestId('close-button');
-    await userEvent.click(crossButton);
-
-    expect(modal).not.toBeInTheDocument();
-    expect(mockOnClose).toHaveBeenCalled();
-  });
 });
diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
index 1efa770cc..27e5203dc 100644
--- a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
+++ b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
@@ -33,9 +33,6 @@
   line-height: 24px;
   margin-bottom: 16px;
   text-align: left;
-  // @media (max-width: 992px) {
-  //   padding: 0 0 0 rem(1.6);
-  // }
 }
 
 .textField {
@@ -58,9 +55,9 @@
 }
 .button_wrapper {
   width: 100%;
-  align-items: center !important;
   display: flex;
   padding-top: 48px;
+  justify-content: center;
 }
 
 .btn {
@@ -68,10 +65,7 @@
   width: 124px !important;
   height: 24px;
   padding: 0px 16px;
-  justify-content: center;
-  align-items: center;
   gap: 8px;
   border-radius: 16px !important;
   background: var(--core-color-solid-coral-700, #ff444f);
-  margin-left: 150px;
 }
diff --git a/src/features/dashboard/components/Table/__tests__/Table.test.tsx b/src/features/dashboard/components/Table/__tests__/Table.test.tsx
index 53310f415..78798d456 100644
--- a/src/features/dashboard/components/Table/__tests__/Table.test.tsx
+++ b/src/features/dashboard/components/Table/__tests__/Table.test.tsx
@@ -80,13 +80,6 @@ describe('Table', () => {
   });
 
   it('Should render token cells properly', () => {
-    const eyeButtons = screen.getAllByTestId('eye-button');
-    expect(eyeButtons[0]).toBeInTheDocument();
-
-    eyeButtons.forEach((button) => {
-      fireEvent.click(button);
-    });
-
     const tokenCells = screen.getAllByTestId('token-cell');
     expect(tokenCells.length).toBe(2);
 
diff --git a/src/features/dashboard/hooks/__tests__/useCreateToken.test.tsx b/src/features/dashboard/hooks/__tests__/useCreateToken.test.tsx
index 9696055d1..7f5655af1 100644
--- a/src/features/dashboard/hooks/__tests__/useCreateToken.test.tsx
+++ b/src/features/dashboard/hooks/__tests__/useCreateToken.test.tsx
@@ -38,9 +38,12 @@ const mockUpdateTokens = jest.fn().mockImplementation((updatedTokens) => {
   tokens = updatedTokens;
 });
 
+const mockSetLastTokenDisplayName = jest.fn();
+
 mockUseApiToken.mockImplementation(() => ({
   tokens,
   updateTokens: mockUpdateTokens,
+  setLastTokenDisplayName: mockSetLastTokenDisplayName,
 }));
 
 describe('Use Create Token', () => {
@@ -84,6 +87,7 @@ describe('Use Create Token', () => {
             valid_for_ip: '',
           },
         ],
+        setlastTokenDisplayName: '',
       },
       echo_req: {
         api_token: 1,
@@ -97,6 +101,7 @@ describe('Use Create Token', () => {
 
     await waitForNextUpdate();
 
+    expect(mockSetLastTokenDisplayName).toHaveBeenCalledWith('test');
     expect(mockUpdateTokens).toHaveBeenCalledTimes(1);
     expect(mockUpdateTokens).toHaveBeenCalledWith([
       {

From a69d7b99c14d13dd5d4bc529c7cd23d0a2159d80 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrimjain@Agrim-Jains-Mac-FQ22G9XXP9-Standard.local>
Date: Mon, 3 Jun 2024 16:14:52 +0400
Subject: [PATCH 08/14] resolve conflict

---
 .../components/Dialogs/TokenCreationDialogSuccess/index.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
index 539d8a81f..502c78cc4 100644
--- a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
+++ b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
@@ -45,7 +45,7 @@ export const TokenCreationDialogSuccess = ({
           <Modal.PageContent className={styles.wrapper}>
             <div className={styles.title}>Token created successfully!</div>
             <div className={styles.modal}>
-              <p data-testid='submit-text'>
+              <p>
                 Please save this token key. For security reasons, it can&apos;t be viewed or copied
                 again. If you lose this key, you&apos;ll need to generate a new token.
               </p>

From 10f65be4ad9e46287e6f0e54303785d966081d16 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrimjain@Agrim-Jains-Mac-FQ22G9XXP9-Standard.local>
Date: Tue, 4 Jun 2024 09:33:09 +0400
Subject: [PATCH 09/14] test coverage

---
 .../token-creation-dialog-success.test.tsx    | 37 +++++++++++++++----
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/__tests__/token-creation-dialog-success.test.tsx b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/__tests__/token-creation-dialog-success.test.tsx
index 1b247fa29..f9ff4b13b 100644
--- a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/__tests__/token-creation-dialog-success.test.tsx
+++ b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/__tests__/token-creation-dialog-success.test.tsx
@@ -11,7 +11,13 @@ const mockUseApiToken = useApiToken as jest.MockedFunction<
 >;
 
 describe('Token Creation Dialog', () => {
+  let setToggleModalMock: jest.Mock;
+  let setLatestTokenMock: jest.Mock;
+
   beforeEach(() => {
+    setToggleModalMock = jest.fn();
+    setLatestTokenMock = jest.fn();
+
     mockUseApiToken.mockImplementation(() => ({
       tokens: [
         {
@@ -29,10 +35,11 @@ describe('Token Creation Dialog', () => {
           valid_for_ip: '',
         },
       ],
-      lastTokenDisplayName: 'agrim',
+      lastTokenDisplayName: 'testtoken2',
+      setLatestToken: setLatestTokenMock,
     }));
 
-    render(<TokenCreationDialogSuccess setToggleModal={jest.fn()} />);
+    render(<TokenCreationDialogSuccess setToggleModal={setToggleModalMock} />);
   });
 
   afterEach(() => {
@@ -56,17 +63,33 @@ describe('Token Creation Dialog', () => {
     );
   });
 
-  it('Should close the modal on OK button click', async () => {
-    const mockOnClose = jest.fn();
-
-    render(<TokenCreationDialogSuccess setToggleModal={mockOnClose} />);
+  it('Should set latest token correctly', () => {
+    act(() => {
+      const tokens = mockUseApiToken().tokens;
+      const lastTokenDisplayName = mockUseApiToken().lastTokenDisplayName;
+      tokens.forEach((token) => {
+        if (token.display_name.toLowerCase() === lastTokenDisplayName.toLowerCase()) {
+          setLatestTokenMock(token.token);
+        }
+      });
+    });
+    expect(setLatestTokenMock).toHaveBeenCalledWith('asdf1235');
+  });
 
+  it('Should close the modal on OK button click', async () => {
     const okButton = screen.getByRole('button', { name: /OK/i });
     expect(okButton).toBeInTheDocument();
     await act(async () => {
       await userEvent.click(okButton);
     });
+    expect(setToggleModalMock).toHaveBeenCalledTimes(1);
+  });
 
-    expect(mockOnClose).toHaveBeenCalledTimes(1);
+  it('Should call onOpenChange when the modal is closed', async () => {
+    act(() => {
+      const onOpenChange = setToggleModalMock;
+      onOpenChange(false);
+    });
+    expect(setToggleModalMock).toHaveBeenCalledWith(false);
   });
 });

From 46f8b2a26f63807a1808ae698d9fabfa8c09b2e0 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrimjain@Agrim-Jains-Mac-FQ22G9XXP9-Standard.local>
Date: Tue, 4 Jun 2024 10:39:20 +0400
Subject: [PATCH 10/14] test

---
 .vscode/settings.json                                 |  3 +--
 .../ApiTokenForm/__tests__/api-token.form.test.tsx    | 11 -----------
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3976734e0..8c167a488 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,5 @@
 {
   "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "editor.formatOnSave": true
 }
diff --git a/src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx b/src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx
index 48dc01283..6bbff31e3 100644
--- a/src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx
+++ b/src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx
@@ -208,17 +208,6 @@ describe('Home Page', () => {
 
       expect(mockCreateToken).not.toHaveBeenCalled();
     });
-    it('Should open success dialog when token is created  ', async () => {
-      const nameInput = screen.getByRole('textbox');
-      await act(async () => {
-        await userEvent.type(nameInput, 'test create token');
-      });
-
-      const submitButton = screen.getByRole('button', { name: /Create/i });
-      await act(async () => {
-        await userEvent.click(submitButton);
-      });
-    });
 
     it('Should have create button disabled in case of empty input or error message', async () => {
       const submitButton = screen.getByRole('button', { name: /Create/i });

From 83b84a5a515e0844aa815055fee3cb8bf8048410 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrimjain@Agrim-Jains-Mac-FQ22G9XXP9-Standard.local>
Date: Wed, 5 Jun 2024 13:14:26 +0400
Subject: [PATCH 11/14] copy button fix

---
 .../CopyButton/__tests__/CopyButton.test.tsx  | 23 +++++++-
 .../ApiTokenTable/CopyButton/index.tsx        |  9 +---
 .../ApiTokenTable/token-cell.module.scss      | 52 ++++++++++++++++++-
 static/img/copy.svg                           |  4 +-
 4 files changed, 77 insertions(+), 11 deletions(-)

diff --git a/src/features/dashboard/components/ApiTokenTable/CopyButton/__tests__/CopyButton.test.tsx b/src/features/dashboard/components/ApiTokenTable/CopyButton/__tests__/CopyButton.test.tsx
index cca3f6b14..56409815c 100644
--- a/src/features/dashboard/components/ApiTokenTable/CopyButton/__tests__/CopyButton.test.tsx
+++ b/src/features/dashboard/components/ApiTokenTable/CopyButton/__tests__/CopyButton.test.tsx
@@ -14,9 +14,9 @@ describe('CopyButton', () => {
   jest.spyOn(navigator.clipboard, 'writeText');
 
   it('should render the CopyButton', () => {
-    render(<CopyButton value='testvalue' has_admin />);
+    render(<CopyButton value='testvalue' has_admin={false} />);
 
-    const copy_button = screen.getByRole('button', { name: 'copy_button' });
+    const copy_button = screen.getByRole('button');
     expect(copy_button).toBeInTheDocument();
   });
 
@@ -79,4 +79,23 @@ describe('CopyButton', () => {
 
     expect(modal).not.toBeInTheDocument();
   });
+  it('should show a green check for 2 seconds when copied', async () => {
+    const user = userEvent.setup({ delay: null });
+    jest.useFakeTimers();
+
+    render(<CopyButton value='testvalue' />);
+
+    const copy_button = screen.getByRole('button');
+    await act(async () => {
+      await user.click(copy_button);
+    });
+
+    expect(copy_button.classList.contains('is_copying')).toBe(true);
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(copy_button.classList.contains('is_copying')).toBe(false);
+  });
 });
diff --git a/src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx b/src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx
index 2e018779f..1d35c430f 100644
--- a/src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx
+++ b/src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx
@@ -29,17 +29,12 @@ const CopyButton = ({ value, has_admin = false }: TCopyButton) => {
 
   return (
     <React.Fragment>
-      <StandaloneCopyRegularIcon
-        fill='var(--component-textIcon-normal-prominent)'
-        iconSize='sm'
+      <button
         onClick={() => {
           has_admin ? setToggleModal(!toggle_modal) : copyToken();
         }}
-        className={styles.copy_button}
-        role='button'
-        aria-label='copy_button'
+        className={`${styles.copy_button} ${is_copying}`}
       />
-
       {toggle_modal && <CopyTokenDialog setToggleModal={setToggleModal} copyToken={copyToken} />}
     </React.Fragment>
   );
diff --git a/src/features/dashboard/components/ApiTokenTable/token-cell.module.scss b/src/features/dashboard/components/ApiTokenTable/token-cell.module.scss
index bdbad085f..499e94292 100644
--- a/src/features/dashboard/components/ApiTokenTable/token-cell.module.scss
+++ b/src/features/dashboard/components/ApiTokenTable/token-cell.module.scss
@@ -12,7 +12,57 @@
 }
 
 .copy_button {
-  cursor: pointer;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  width: rem(2.4);
+  height: rem(2.4);
+  cursor: copy;
+  background-image: url(/img/copy.svg);
+  &:hover {
+    &::after {
+      content: 'Copy this token';
+      text-align: center;
+      position: absolute;
+      display: inline-block;
+      border-radius: 4px;
+      padding: rem(1);
+      color: var(--ifm-color-emphasis-100);
+      background-color: var(--ifm-color-emphasis-700);
+      font-size: var(--fontSizes-3xs);
+      top: calc(50% - 15px);
+      min-width: 100px;
+      transform: translate(-50%, -50%);
+      @media (max-width: 425px) {
+        top: calc(50% + 5px);
+      }
+    }
+    &::before {
+      content: 'Token copied!';
+      text-align: center;
+      position: absolute;
+      display: inline-block;
+      border-radius: 4px;
+      padding: rem(1);
+      color: var(--ifm-color-emphasis-100);
+      background-color: var(--ifm-color-emphasis-700);
+      font-size: var(--fontSizes-3xs);
+      top: calc(50% - 15px);
+      min-width: 100px;
+      transform: translate(-50%, -50%);
+      @media (max-width: 425px) {
+        top: calc(50% + 5px);
+      }
+    }
+  }
+  &.is_copying {
+    background-image: url(/img/check.svg);
+    border-radius: 100%;
+    background-color: var(--ifm-color-primary-lightest);
+    border: 1px solid var(--ifm-color-primary);
+    &:hover::after {
+      content: 'Token copied!';
+    }
+  }
 }
 
 .token_cell {
diff --git a/static/img/copy.svg b/static/img/copy.svg
index 0b99f2503..03cb6c4f2 100644
--- a/static/img/copy.svg
+++ b/static/img/copy.svg
@@ -1 +1,3 @@
-<svg width="13" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M.33 4.5A1.5 1.5 0 0 1 1.83 3h6a1.5 1.5 0 0 1 1.5 1.5v8a1.5 1.5 0 0 1-1.5 1.5h-6a1.5 1.5 0 0 1-1.5-1.5v-8Zm1.5-.5a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-6Z" fill="#333"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.33 6.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5ZM2.33 8.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5ZM2.33 10.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Z" fill="#333"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.33 1.5A1.5 1.5 0 0 1 4.83 0h6a1.5 1.5 0 0 1 1.5 1.5v8a1.5 1.5 0 0 1-1.5 1.5h-1.5v-1h1.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0-.5.5V3h-1V1.5Z" fill="#333"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 15C17.5312 15 18 14.5625 18 14V7.625C18 7.5 17.9375 7.375 17.8438 7.28125L15.7188 5.15625C15.625 5.0625 15.5 5 15.375 5H12C11.4375 5 11 5.46875 11 6V14C11 14.5625 11.4375 15 12 15H17ZM18.5312 6.5625C18.8125 6.84375 19 7.25 19 7.625V14C19 15.125 18.0938 16 17 16H12C10.875 16 10 15.125 10 14V6C10 4.90625 10.875 4 12 4H15.375C15.75 4 16.1562 4.1875 16.4375 4.46875L18.5312 6.5625ZM7 8H9V9H7C6.4375 9 6 9.46875 6 10V18C6 18.5625 6.4375 19 7 19H12C12.5312 19 13 18.5625 13 18V17H14V18C14 19.125 13.0938 20 12 20H7C5.875 20 5 19.125 5 18V10C5 8.90625 5.875 8 7 8Z" fill="black" fill-opacity="0.72"/>
+</svg>

From 30134627918ee74c52781dab23d729ea3ecec10e Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrimjain@Agrim-Jains-Mac-FQ22G9XXP9-Standard.local>
Date: Thu, 6 Jun 2024 09:31:54 +0400
Subject: [PATCH 12/14] update PR


From 5e6f28948e88d382dec583d3343849b8c92eb4b5 Mon Sep 17 00:00:00 2001
From: shafin-deriv <shafin@regentmarkets.com>
Date: Wed, 19 Jun 2024 18:46:49 +0800
Subject: [PATCH 13/14] chore: add missing translations

---
 i18n/en/code.json                             | 150 +++++++++++
 package-lock.json                             | 234 ++++++++++--------
 src/components/Header/index.tsx               |   7 +-
 .../RequestResponseRenderer/index.tsx         |   5 +-
 src/features/Home/ApiFeatures/ApiFeatures.tsx |   7 +-
 src/features/Home/Benefits/Benefits.tsx       |  51 +++-
 .../ApiTokenForm/CreateTokenField/index.tsx   |  12 +-
 .../ApiTokenForm/api-token.form.tsx           |  12 +-
 .../components/ApiTokenTable/index.tsx        |  21 +-
 .../dashboard/components/AppForm/index.tsx    |  30 +--
 .../dashboard/components/AppsTable/index.tsx  |  11 +-
 .../components/RestrictionsAppname/index.tsx  |  17 +-
 .../TokenNameRestrictions.tsx                 |  20 +-
 src/features/dashboard/types.ts               |  44 +++-
 14 files changed, 439 insertions(+), 182 deletions(-)

diff --git a/i18n/en/code.json b/i18n/en/code.json
index 73e9b4006..9d89ad73c 100644
--- a/i18n/en/code.json
+++ b/i18n/en/code.json
@@ -669,5 +669,155 @@
   "theme.tags.tagsPageTitle": {
     "message": "Tags",
     "description": "The title of the tag list page"
+  },
+  "Deriv website": {
+    "message": "Deriv website"
+  },
+  "Who we are": {
+    "message": "Who we are"
+  },
+  "Contact us": {
+    "message": "Contact us"
+  },
+  "Only alphanumeric characters with spaces and underscores are allowed. (Example: my_application)": {
+    "message": "Only alphanumeric characters with spaces and underscores are allowed. (Example: my_application)"
+  },
+  "The name cannot contain “Binary”, “Deriv”, or similar words.": {
+    "message": "The name cannot contain “Binary”, “Deriv”, or similar words."
+  },
+  "Your website URL cannot exceed 255 characters.": {
+    "message": "Your website URL cannot exceed 255 characters."
+  },
+  "Enter a valid URL. (Example: https://www.[YourDomainName].com)": {
+    "message": "Enter a valid URL. (Example: https://www.[YourDomainName].com)"
+  },
+  "Your markup value cannot be more than 4 characters.": {
+    "message": "Your markup value cannot be more than 4 characters."
+  },
+  "Your markup value must be equal to or above 0.00 and no more than 3.00.": {
+    "message": "Your markup value must be equal to or above 0.00 and no more than 3.00."
+  },
+  "Using Deriv API to build a trading app with features like real-time pricing charts available on Dtrader.": {
+    "message": "Using Deriv API to build a trading app with features like real-time pricing charts available on Dtrader."
+  },
+  "Benefits of using Deriv API": {
+    "message": "Benefits of using Deriv API"
+  },
+  "Automation": {
+    "message": "Automation"
+  },
+  "Easy integration": {
+    "message": "Easy integration"
+  },
+  "Fast execution": {
+    "message": "Fast execution"
+  },
+  "A trading app created using Deriv API shown on a laptop.": {
+    "message": "A trading app created using Deriv API shown on a laptop."
+  },
+  "Personalise your trading": {
+    "message": "Personalise your trading"
+  },
+  "Personalise 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.": {
+    "message": "Personalise 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."
+  },
+  "Build a business and earn more": {
+    "message": "Build a business and earn more"
+  },
+  "Create your own trading apps by taking advantage of the power of Deriv's trading services. Share your apps with fellow traders or customers, and get a chance to earn more or build your own business.": {
+    "message": "Create your own trading apps by taking advantage of the power of Deriv's trading services. Share your apps with fellow traders or customers, and get a chance to earn more or build your own business."
+  },
+  "Name": {
+    "message": "Name"
+  },
+  "Token": {
+    "message": "Token"
+  },
+  "Scopes": {
+    "message": "Scopes"
+  },
+  "Last Used": {
+    "message": "Last Used"
+  },
+  "Valid for IP": {
+    "message": "Valid for IP"
+  },
+  "Update Application": {
+    "message": "Update Application"
+  },
+  "Register Application": {
+    "message": "Register Application"
+  },
+  "Your account": {
+    "message": "Your account"
+  },
+  "Choose your API token with the admin scope": {
+    "message": "Choose your API token with the admin scope"
+  },
+  "Application Name": {
+    "message": "Application Name"
+  },
+  "Application ID": {
+    "message": "Application ID"
+  },
+  "Redirect URL": {
+    "message": "Redirect URL"
+  },
+  "Actions": {
+    "message": "Actions"
+  },
+  "Only alphanumeric characters with spaces and underscores are allowed.": {
+    "message": "Only alphanumeric characters with spaces and underscores are allowed."
+  },
+  "The name can contain up to 48 characters.": {
+    "message": "The name can contain up to 48 characters."
+  },
+  "Duplicate token names aren’t allowed.": {
+    "message": "Duplicate token names aren’t allowed."
+  },
+  "Only alphanumeric characters with spaces and underscores are allowed": {
+    "message": "Only alphanumeric characters with spaces and underscores are allowed"
+  },
+  "Only 2-32 characters are allowed": {
+    "message": "Only 2-32 characters are allowed"
+  },
+  "No duplicate token names are allowed for the same account.": {
+    "message": "No duplicate token names are allowed for the same account."
+  },
+  "No keywords \"deriv\" or \"binary\" or words that look similar, e.g. \"_binary_\" or \"d3eriv\" are allowed.": {
+    "message": "No keywords \"deriv\" or \"binary\" or words that look similar, e.g. \"_binary_\" or \"d3eriv\" are allowed."
+  },
+  "Name your token and click on Create to generate your token.": {
+    "message": "Name your token and click on Create to generate your token."
+  },
+  "Token name (You've created {numberOfTokens} out of 30 tokens)": {
+    "message": "Token name (You've created {numberOfTokens} out of 30 tokens)"
+  },
+  "Create": {
+    "message": "Create"
+  },
+  "theme.docs.DocCard.categoryDescription.plurals": {
+    "message": "1 item|{count} items",
+    "description": "The default description for a category card in the generated index about how many items this category includes"
+  },
+  "theme.admonition.warning": {
+    "message": "warning",
+    "description": "The default label used for the Warning admonition (:::warning)"
+  },
+  "theme.DocSidebarItem.expandCategoryAriaLabel": {
+    "message": "Expand sidebar category '{label}'",
+    "description": "The ARIA label to expand the sidebar category"
+  },
+  "theme.DocSidebarItem.collapseCategoryAriaLabel": {
+    "message": "Collapse sidebar category '{label}'",
+    "description": "The ARIA label to collapse the sidebar category"
+  },
+  "theme.unlistedContent.title": {
+    "message": "Unlisted page",
+    "description": "The unlisted content banner title"
+  },
+  "theme.unlistedContent.message": {
+    "message": "This page is unlisted. Search engines will not index it, and only users having a direct link can access it.",
+    "description": "The unlisted content banner message"
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 56f4af95c..b62e6b6ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2573,9 +2573,9 @@
       }
     },
     "node_modules/@deriv/api-types": {
-      "version": "1.0.809",
-      "resolved": "https://registry.npmjs.org/@deriv/api-types/-/api-types-1.0.809.tgz",
-      "integrity": "sha512-V6vM69/Nhwy76SK1htva7ld+xGQqR/UY5uyIIw4vPElbjfsqje9dsYz55jTdyh6H2HNEd7mRJv9ZXlqPaYMoaQ==",
+      "version": "1.0.908",
+      "resolved": "https://registry.npmjs.org/@deriv/api-types/-/api-types-1.0.908.tgz",
+      "integrity": "sha512-YjnUGV3pZ0LpHhXwGfHdJRps0HrqEGM5m1bHyQ8jyTGqmteIY59IiQiVwtcRugUObj1AxQ6Hmh1ktmrbwYqfZg==",
       "dev": true
     },
     "node_modules/@deriv/deriv-api": {
@@ -2589,9 +2589,9 @@
       }
     },
     "node_modules/@deriv/quill-icons": {
-      "version": "1.22.10",
-      "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.22.10.tgz",
-      "integrity": "sha512-BtyMfKln7iBcTcERiaj3t8ADMplCOfE3J184Asaa/9RnE42e5JtehkYw78lwinYTBTzr1sL5tK0GRNlziFNRKw==",
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.22.11.tgz",
+      "integrity": "sha512-51xz0lJGovQ/J58QNkuk+7pMIx6r1XoWu4UN91J9Tj1gHpXxBSM2SstuMR44FBygUWUw6VRBSUVWNSgvDCtUHw==",
       "peerDependencies": {
         "react": ">= 16",
         "react-dom": ">= 16"
@@ -4828,9 +4828,9 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.15.19",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.19.tgz",
-      "integrity": "sha512-tCHSi/Tomez9ERynFhZRvFO6n9ATyrPs+2N80DMDzp6xDVirbBjEwhPcE+x7Lj+nwYw0SqFkOxyvMP0irnm55w==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.20.tgz",
+      "integrity": "sha512-DoL2ppgldL16utL8nNyj/P12f8mCNdx/Hb/AJnX9rLY4b52hCMIx1kH83pbXQ6uMy6n54M3StmEbvSGoj2OFuA==",
       "peer": true,
       "funding": {
         "type": "opencollective",
@@ -4838,17 +4838,17 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.15.19",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.19.tgz",
-      "integrity": "sha512-lp5xQBbcRuxNtjpWU0BWZgIrv2XLUz4RJ0RqFXBdESIsKoGCQZ6P3wwU5ZPuj5TjssNiKv9AlM+vHopRxZhvVQ==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.20.tgz",
+      "integrity": "sha512-tVq3l4qoXx/NxUgIx/x3lZiPn/5xDbdTE8VrLczNpfblLYZzlrbxA7kb9mI8NoBF6+w9WE9IrxWnKK5KlPI2bg==",
       "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@mui/base": "5.0.0-beta.40",
-        "@mui/core-downloads-tracker": "^5.15.19",
-        "@mui/system": "^5.15.15",
+        "@mui/core-downloads-tracker": "^5.15.20",
+        "@mui/system": "^5.15.20",
         "@mui/types": "^7.2.14",
-        "@mui/utils": "^5.15.14",
+        "@mui/utils": "^5.15.20",
         "@types/react-transition-group": "^4.4.10",
         "clsx": "^2.1.0",
         "csstype": "^3.1.3",
@@ -4892,13 +4892,13 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.15.14",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz",
-      "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.20.tgz",
+      "integrity": "sha512-BK8F94AIqSrnaPYXf2KAOjGZJgWfvqAVQ2gVR3EryvQFtuBnG6RwodxrCvd3B48VuMy6Wsk897+lQMUxJyk+6g==",
       "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
-        "@mui/utils": "^5.15.14",
+        "@mui/utils": "^5.15.20",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -4951,16 +4951,16 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.15.15",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz",
-      "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.20.tgz",
+      "integrity": "sha512-LoMq4IlAAhxzL2VNUDBTQxAb4chnBe8JvRINVNDiMtHE2PiPOoHlhOPutSxEbaL5mkECPVWSv6p8JEV+uykwIA==",
       "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
-        "@mui/private-theming": "^5.15.14",
+        "@mui/private-theming": "^5.15.20",
         "@mui/styled-engine": "^5.15.14",
         "@mui/types": "^7.2.14",
-        "@mui/utils": "^5.15.14",
+        "@mui/utils": "^5.15.20",
         "clsx": "^2.1.0",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -5014,9 +5014,9 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.15.14",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz",
-      "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.20.tgz",
+      "integrity": "sha512-mAbYx0sovrnpAu1zHc3MDIhPqL8RPVC5W5xcO1b7PiSCJPtckIZmBkp8hefamAvUiAV8gpfMOM6Zb+eSisbI2A==",
       "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
@@ -7900,9 +7900,9 @@
       }
     },
     "node_modules/acorn-globals/node_modules/acorn": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
-      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
+      "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -7920,9 +7920,23 @@
       }
     },
     "node_modules/acorn-walk": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
-      "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.3.tgz",
+      "integrity": "sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==",
+      "dependencies": {
+        "acorn": "^8.11.0"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-walk/node_modules/acorn": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
+      "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
       "engines": {
         "node": ">=0.4.0"
       }
@@ -8024,9 +8038,9 @@
       }
     },
     "node_modules/algoliasearch-helper": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.21.0.tgz",
-      "integrity": "sha512-hjVOrL15I3Y3K8xG0icwG1/tWE+MocqBrhW6uVBWpU+/kVEMK0BnM2xdssj6mZM61eJ4iRxHR0djEI3ENOpR8w==",
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.22.0.tgz",
+      "integrity": "sha512-ZIVcE0929m2g00GuMiRWpemsGW3589qYxIcQonB7ms4B/KoeS94OiqPRMJ9hGoL23SlYJOmMNjZyXSoItDXO1w==",
       "dependencies": {
         "@algolia/events": "^4.0.1"
       },
@@ -9044,9 +9058,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001632",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001632.tgz",
-      "integrity": "sha512-udx3o7yHJfUxMLkGohMlVHCvFvWmirKh9JAH/d7WOLPetlH+LTL5cocMZ0t7oZx/mdlOWXti97xLZWc8uURRHg==",
+      "version": "1.0.30001636",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz",
+      "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==",
       "funding": [
         {
           "type": "opencollective",
@@ -11047,9 +11061,9 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.798",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.798.tgz",
-      "integrity": "sha512-by9J2CiM9KPGj9qfp5U4FcPSbXJG7FNzqnYaY4WLzX+v2PHieVGmnsA4dxfpGE3QEC7JofpPZmn7Vn1B9NR2+Q=="
+      "version": "1.4.806",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.806.tgz",
+      "integrity": "sha512-nkoEX2QIB8kwCOtvtgwhXWy2IHVcOLQZu9Qo36uaGB835mdX/h8uLRlosL6QIhLVUnAiicXRW00PwaPZC74Nrg=="
     },
     "node_modules/emittery": {
       "version": "0.13.1",
@@ -11468,16 +11482,16 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.34.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.2.tgz",
-      "integrity": "sha512-2HCmrU+/JNigDN6tg55cRDKCQWicYAPB38JGSFDQt95jDm8rrvSUo7YPkOIm5l6ts1j1zCvysNcasvfTMQzUOw==",
+      "version": "7.34.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.3.tgz",
+      "integrity": "sha512-aoW4MV891jkUulwDApQbPYTVZmeuSyFrudpbTAQuj5Fv8VL+o6df2xIGpw8B0hPjAaih1/Fb0om9grCdyFYemA==",
       "dev": true,
       "dependencies": {
         "array-includes": "^3.1.8",
         "array.prototype.findlast": "^1.2.5",
         "array.prototype.flatmap": "^1.3.2",
         "array.prototype.toreversed": "^1.1.2",
-        "array.prototype.tosorted": "^1.1.3",
+        "array.prototype.tosorted": "^1.1.4",
         "doctrine": "^2.1.0",
         "es-iterator-helpers": "^1.0.19",
         "estraverse": "^5.3.0",
@@ -11737,9 +11751,9 @@
       }
     },
     "node_modules/espree/node_modules/acorn": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
-      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
+      "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
       "devOptional": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -12381,9 +12395,9 @@
       }
     },
     "node_modules/foreground-child": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
-      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
+      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
       "dependencies": {
         "cross-spawn": "^7.0.0",
         "signal-exit": "^4.0.1"
@@ -13214,9 +13228,9 @@
       }
     },
     "node_modules/hast-util-raw": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.0.3.tgz",
-      "integrity": "sha512-ICWvVOF2fq4+7CMmtCPD5CM4QKjPbHpPotE6+8tDooV0ZuyJVUzHsrNX+O5NaRbieTf0F7FfeBOMAwi6Td0+yQ==",
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.0.4.tgz",
+      "integrity": "sha512-LHE65TD2YiNsHD3YuXcKPHXPLuYh/gjp12mOfU8jxSrm1f/yJpsb0F/KKljS6U9LJoP0Ux+tCe8iJ2AsPzTdgA==",
       "dependencies": {
         "@types/hast": "^3.0.0",
         "@types/unist": "^3.0.0",
@@ -16754,9 +16768,9 @@
       }
     },
     "node_modules/jsdom/node_modules/acorn": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
-      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
+      "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -16939,9 +16953,9 @@
       }
     },
     "node_modules/launch-editor": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.6.1.tgz",
-      "integrity": "sha512-eB/uXmFVpY4zezmGp5XtU21kwo7GBbKB+EQ+UZeWtGb9yAM5xt/Evk+lYH3eRNAtId+ej4u7TYPFZ07w4s7rRw==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.8.0.tgz",
+      "integrity": "sha512-vJranOAJrI/llyWGRQqiDM+adrw+k83fvmmx3+nV47g3+36xM15jE+zyZ6Ffel02+xSvuM0b2GDRosXZkbb6wA==",
       "dependencies": {
         "picocolors": "^1.0.0",
         "shell-quote": "^1.8.1"
@@ -18807,9 +18821,9 @@
       ]
     },
     "node_modules/micromark-extension-mdxjs/node_modules/acorn": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
-      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
+      "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -20364,6 +20378,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
+      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw=="
+    },
     "node_modules/package-json/node_modules/semver": {
       "version": "7.6.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
@@ -21834,9 +21853,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.51.5",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.5.tgz",
-      "integrity": "sha512-J2ILT5gWx1XUIJRETiA7M19iXHlG74+6O3KApzvqB/w8S5NQR7AbU8HVZrMALdmDgWpRPYiZJl0zx8Z4L2mP6Q==",
+      "version": "7.52.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.52.0.tgz",
+      "integrity": "sha512-mJX506Xc6mirzLsmXUJyqlAI3Kj9Ph2RhplYhUVffeOQSnubK2uVqBFOBJmvKikvbFV91pxVXmDiR+QMF19x6A==",
       "engines": {
         "node": ">=12.22.0"
       },
@@ -21845,7 +21864,7 @@
         "url": "https://opencollective.com/react-hook-form"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17 || ^18"
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
     "node_modules/react-is": {
@@ -22787,9 +22806,9 @@
       }
     },
     "node_modules/rfdc": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.1.tgz",
-      "integrity": "sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
       "dev": true
     },
     "node_modules/rimraf": {
@@ -22919,9 +22938,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sass": {
-      "version": "1.77.4",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.4.tgz",
-      "integrity": "sha512-vcF3Ckow6g939GMA4PeU7b2K/9FALXk2KF9J87txdHzXbUF9XRQRwSxcAs/fGaTnJeBFd7UoV22j3lzMLdM0Pw==",
+      "version": "1.77.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz",
+      "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==",
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -24019,14 +24038,15 @@
       }
     },
     "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz",
-      "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.2.tgz",
+      "integrity": "sha512-GwMlUF6PkPo3Gk21UxkCohOv0PLcIXVtKyLlpEI28R/cO/4eNOdmLk3CMW1wROV/WR/EsZOWAfBbBOqYvs88/w==",
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^3.1.2",
         "minimatch": "^9.0.4",
         "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
         "path-scurry": "^1.11.1"
       },
       "bin": {
@@ -24280,9 +24300,9 @@
       }
     },
     "node_modules/terser/node_modules/acorn": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
-      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
+      "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -24530,9 +24550,9 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
     "node_modules/ts-jest": {
-      "version": "29.1.4",
-      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.4.tgz",
-      "integrity": "sha512-YiHwDhSvCiItoAgsKtoLFCuakDzDsJ1DLDnSouTaTmdOcOwIkSzbLXduaQ6M5DRVhuZC/NYaaZ/mtHbWMv/S6Q==",
+      "version": "29.1.5",
+      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.5.tgz",
+      "integrity": "sha512-UuClSYxM7byvvYfyWdFI+/2UxMmwNyJb0NPkZPQE2hew3RurV7l7zURgOHAd/1I1ZdPpe3GUsXNXAcN8TFKSIg==",
       "dependencies": {
         "bs-logger": "0.x",
         "fast-json-stable-stringify": "2.x",
@@ -24638,9 +24658,9 @@
       }
     },
     "node_modules/ts-node/node_modules/acorn": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
-      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
+      "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
       "devOptional": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -25465,9 +25485,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.91.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
-      "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+      "version": "5.92.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.92.0.tgz",
+      "integrity": "sha512-Bsw2X39MYIgxouNATyVpCNVWBCuUwDgWtN78g6lSdPJRLaQ/PUVm/oXcaRAyY/sMFoKFQrsPeqvTizWtq7QPCA==",
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
@@ -25475,10 +25495,10 @@
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.0",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -25536,9 +25556,9 @@
       }
     },
     "node_modules/webpack-bundle-analyzer/node_modules/acorn": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
-      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
+      "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -25555,9 +25575,9 @@
       }
     },
     "node_modules/webpack-bundle-analyzer/node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
       "engines": {
         "node": ">=8.3.0"
       },
@@ -25684,9 +25704,9 @@
       }
     },
     "node_modules/webpack/node_modules/acorn": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
-      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
+      "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -25694,10 +25714,10 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/webpack/node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+    "node_modules/webpack/node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "peerDependencies": {
         "acorn": "^8"
       }
@@ -26159,9 +26179,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
       "engines": {
         "node": ">=10.0.0"
       },
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 8eecfff46..2e6761e12 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import styles from './Header.module.scss';
 import Link from '@docusaurus/Link';
 import RenderOfficialContents from '../RenderOfficialContents';
+import Translate from '@docusaurus/Translate';
 
 export const Header = () => {
   useEffect(() => {
@@ -18,13 +19,13 @@ export const Header = () => {
         <div className={styles.NavtopContainer}>
           <div className={styles.Subnav}>
             <Link to={'https://deriv.com/'} className={styles.SubnavItems}>
-              Deriv website
+              <Translate>Deriv website</Translate>
             </Link>
             <Link to='https://deriv.com/who-we-are' className={styles.SubnavItems}>
-              Who we are
+              <Translate>Who we are</Translate>
             </Link>
             <Link to='https://deriv.com/contact-us' className={styles.SubnavItems}>
-              Contact us
+              <Translate>Contact us</Translate>
             </Link>
           </div>
         </div>
diff --git a/src/features/Apiexplorer/RequestResponseRenderer/index.tsx b/src/features/Apiexplorer/RequestResponseRenderer/index.tsx
index 73988158e..3840c9a9f 100644
--- a/src/features/Apiexplorer/RequestResponseRenderer/index.tsx
+++ b/src/features/Apiexplorer/RequestResponseRenderer/index.tsx
@@ -8,6 +8,7 @@ import PlaygroundSection from './PlaygroundSection';
 import LoginDialog from '../LoginDialog';
 import styles from '../RequestJSONBox/RequestJSONBox.module.scss';
 import { ValidDialog } from '../ValidDialog';
+import Translate from '@docusaurus/Translate';
 
 export interface IResponseRendererProps<T extends TSocketEndpointNames> {
   name: T;
@@ -62,10 +63,10 @@ function RequestResponseRenderer<T extends TSocketEndpointNames>({
           disabled={disableSendRequest(auth) || reqData === ''}
           onClick={handleClick}
         >
-          Send Request
+          <Translate>Send Request</Translate>
         </Button>
         <Button color='secondary' disabled={reqData === ''} onClick={handleClear}>
-          Clear
+          <Translate>Clear</Translate>
         </Button>
       </div>
       {!is_not_valid ? (
diff --git a/src/features/Home/ApiFeatures/ApiFeatures.tsx b/src/features/Home/ApiFeatures/ApiFeatures.tsx
index ab1c4cb04..348070fd0 100644
--- a/src/features/Home/ApiFeatures/ApiFeatures.tsx
+++ b/src/features/Home/ApiFeatures/ApiFeatures.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text } from '@deriv/ui';
 import styles from './ApiFeatures.module.scss';
-import Translate from '@docusaurus/Translate';
+import Translate, { translate } from '@docusaurus/Translate';
 
 export const ApiFeatures = () => {
   return (
@@ -66,7 +66,10 @@ export const ApiFeatures = () => {
         src='/img/api-featutes.png'
         className={styles.ApiFeaturesImage}
         data-testid='api-features-img'
-        alt='Using Deriv API to build a trading app with features like real-time pricing charts available on Dtrader.'
+        alt={translate({
+          message:
+            'Using Deriv API to build a trading app with features like real-time pricing charts available on Dtrader.',
+        })}
       />
     </article>
   );
diff --git a/src/features/Home/Benefits/Benefits.tsx b/src/features/Home/Benefits/Benefits.tsx
index 4a0c6a6e4..603016173 100644
--- 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, { translate } from '@docusaurus/Translate';
 
 type TBenefitsIcon = {
   icon: string;
@@ -40,28 +41,50 @@ 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' />
-          <BenefitsIcon icon='integration' text='Easy integration' alt='integration' />
-          <BenefitsIcon icon='execution' text='Fast execution' alt='execution' />
+          <BenefitsIcon
+            icon='automation'
+            text={translate({
+              message: 'Automation',
+            })}
+            alt='automation'
+          />
+          <BenefitsIcon
+            icon='integration'
+            text={translate({
+              message: 'Easy integration',
+            })}
+            alt='integration'
+          />
+          <BenefitsIcon
+            icon='execution'
+            text={translate({
+              message: 'Fast execution',
+            })}
+            alt='execution'
+          />
         </section>
       </header>
       <section className={styles.BenefitsInformation}>
         <article className={styles.InformationContainer}>
           <ImageContainer
             image='personalisation'
-            alt='A trading app created using Deriv API shown on a laptop.'
+            alt={translate({
+              message: 'A trading app created using Deriv API shown on a laptop.',
+            })}
           />
           <section className={styles.InformationContent}>
             <Text as='h3' className={styles.headingSize}>
-              Personalise your trading
+              <Translate>Personalise your trading</Translate>
             </Text>
             <Text type='subtitle-2' as='p'>
-              Personalise 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>
+                Personalise 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>
@@ -72,12 +95,14 @@ export const Benefits = () => {
           />
           <section className={styles.InformationContent}>
             <Text as='h3' className={styles.headingSize}>
-              Build a business and earn more
+              <Translate>Build a business and earn more</Translate>
             </Text>
             <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/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
index e8b1b4b43..8422c2f05 100644
--- a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
+++ b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
@@ -5,6 +5,7 @@ import useApiToken from '@site/src/hooks/useApiToken';
 import { FieldErrorsImpl, UseFormRegisterReturn } from 'react-hook-form';
 import CustomErrors from './CustomErrors';
 import TokenCreationDialogSuccess from '../../Dialogs/TokenCreationDialogSuccess';
+import Translate, { translate } from '@docusaurus/Translate';
 
 type TCreateTokenField = {
   register: UseFormRegisterReturn;
@@ -72,7 +73,7 @@ const CreateTokenField = ({
       <div className={styles.step_title}>
         <div className={`${styles.second_step} ${styles.step}`}>
           <Text as={'p'} type={'paragraph-1'} data-testid={'second-step-title'}>
-            Name your token and click on Create to generate your token.
+            <Translate>Name your token and click on Create to generate your token.</Translate>
           </Text>
         </div>
       </div>
@@ -94,11 +95,16 @@ const CreateTokenField = ({
             className={styles.inlineLabel}
             data-testid='token-count-label'
           >
-            Token name (You&apos;ve created <b>{numberOfTokens}</b> out of 30 tokens )
+            {translate(
+              {
+                message: "Token name (You've created {numberOfTokens} out of 30 tokens)",
+              },
+              { numberOfTokens },
+            )}
           </label>
         </div>
         <Button disabled={disable_button} type='submit'>
-          Create
+          <Translate>Create</Translate>
         </Button>
       </div>
       {errors && errors.name && (
diff --git a/src/features/dashboard/components/ApiTokenForm/api-token.form.tsx b/src/features/dashboard/components/ApiTokenForm/api-token.form.tsx
index d81757575..3da24aed7 100644
--- a/src/features/dashboard/components/ApiTokenForm/api-token.form.tsx
+++ b/src/features/dashboard/components/ApiTokenForm/api-token.form.tsx
@@ -10,7 +10,7 @@ import * as yup from 'yup';
 import styles from './api-token.form.module.scss';
 import TokenNameRestrictions from '../TokenNameRestrictions/TokenNameRestrictions';
 import CreateTokenField from './CreateTokenField';
-import Translate from '@docusaurus/Translate';
+import Translate, { translate } from '@docusaurus/Translate';
 
 const schema = yup
   .object({
@@ -24,14 +24,18 @@ const schema = yup
       .min(2, 'Your token name must be atleast 2 characters long.')
       .max(32, 'Only up to 32 characters are allowed.')
       .matches(/^(?=.*[a-zA-Z0-9])[a-zA-Z0-9_ ]*$/, {
-        message:
-          'Only alphanumeric characters with spaces and underscores are allowed. (Example: my_application)',
+        message: translate({
+          message:
+            'Only alphanumeric characters with spaces and underscores are allowed. (Example: my_application)',
+        }),
         excludeEmptyString: true,
       })
       .matches(
         /^(?!.*deriv|.*d3r1v|.*der1v|.*d3riv|.*b1nary|.*binary|.*b1n4ry|.*bin4ry|.*blnary|.*b\|nary).*$/i,
         {
-          message: 'The name cannot contain “Binary”, “Deriv”, or similar words.',
+          message: translate({
+            message: 'The name cannot contain “Binary”, “Deriv”, or similar words.',
+          }),
           excludeEmptyString: true,
         },
       ),
diff --git a/src/features/dashboard/components/ApiTokenTable/index.tsx b/src/features/dashboard/components/ApiTokenTable/index.tsx
index e4d3407c1..bf6662b2e 100644
--- a/src/features/dashboard/components/ApiTokenTable/index.tsx
+++ b/src/features/dashboard/components/ApiTokenTable/index.tsx
@@ -8,31 +8,42 @@ import ApiTokenCell from './table.token.cell';
 import ApiLastUsedCell from './table.lastused.cell';
 import ScopesCell from '../Table/scopes.cell';
 import Table from '../Table';
+import { translate } from '@docusaurus/Translate';
 
 export type TTokenColumn = Column<TTokenType>;
 
 const tableColumns: TTokenColumn[] = [
   {
-    Header: 'Name',
+    Header: translate({
+      message: 'Name',
+    }),
     accessor: 'display_name',
   },
   {
-    Header: 'Token',
+    Header: translate({
+      message: 'Token',
+    }),
     accessor: 'token',
     Cell: ApiTokenCell,
   },
   {
-    Header: 'Scopes',
+    Header: translate({
+      message: 'Scopes',
+    }),
     accessor: 'scopes',
     Cell: ScopesCell,
   },
   {
-    Header: 'Last Used',
+    Header: translate({
+      message: 'Last Used',
+    }),
     accessor: 'last_used',
     Cell: ApiLastUsedCell,
   },
   {
-    Header: 'Valid for IP',
+    Header: translate({
+      message: 'Valid for IP',
+    }),
     accessor: 'valid_for_ip',
   },
 ];
diff --git a/src/features/dashboard/components/AppForm/index.tsx b/src/features/dashboard/components/AppForm/index.tsx
index e64c05287..590b22501 100644
--- a/src/features/dashboard/components/AppForm/index.tsx
+++ b/src/features/dashboard/components/AppForm/index.tsx
@@ -16,7 +16,7 @@ import clsx from 'clsx';
 import useAppManager from '@site/src/hooks/useAppManager';
 import useWS from '@site/src/hooks/useWs';
 import RestrictionsAppname from '../RestrictionsAppname';
-import Translate from '@docusaurus/Translate';
+import Translate, { translate } from '@docusaurus/Translate';
 
 type TAppFormProps = {
   initialValues?: Partial<IRegisterAppForm>;
@@ -112,7 +112,9 @@ const AppForm = ({
           }}
           size='large'
         >
-          {is_update_mode ? 'Update Application' : 'Register Application'}
+          {is_update_mode
+            ? translate({ message: 'Update Application' })
+            : translate({ message: 'Register Application' })}
         </Button>
         {is_update_mode && cancelButton()}
       </div>
@@ -140,7 +142,7 @@ const AppForm = ({
                 <React.Fragment>
                   <div data-testid='select-account'>
                     <CustomSelectDropdown
-                      label='Your account'
+                      label={translate({ message: 'Your account' })}
                       value={currentLoginAccount && currentLoginAccount.name}
                       register={register('currency_account')}
                       is_error={!accountHasAdminToken()}
@@ -157,7 +159,7 @@ const AppForm = ({
                     data-testid='select-token'
                   >
                     <CustomSelectDropdown
-                      label='Choose your API token with the admin scope'
+                      label={translate({ message: 'Choose your API token with the admin scope' })}
                       value={admin_token}
                       register={register('api_token')}
                       data-testid='select-token'
@@ -326,9 +328,7 @@ const AppForm = ({
                 <div className={styles.customCheckboxWrapper}>
                   <CustomCheckbox name='read' id='read-scope' register={register('read')}>
                     <label htmlFor='read-scope'>
-                      <b>
-                        <Translate>Read</Translate>
-                      </b>
+                      <b>Read</b>
                       <Translate>
                         : You&apos;ll have full access to your clients&apos; information.
                       </Translate>
@@ -338,9 +338,7 @@ const AppForm = ({
                 <div className={styles.customCheckboxWrapper}>
                   <CustomCheckbox name='trade' id='trade-scope' register={register('trade')}>
                     <label htmlFor='trade-scope'>
-                      <b>
-                        <Translate>Trade</Translate>
-                      </b>
+                      <b>Trade</b>
                       <Translate>
                         : You&apos;ll be able to buy and sell contracts on your clients&apos;
                         behalf.
@@ -355,9 +353,7 @@ const AppForm = ({
                     register={register('trading_information')}
                   >
                     <label htmlFor='trading_information-scope'>
-                      <b>
-                        <Translate>Trading information</Translate>
-                      </b>
+                      <b>Trading information</b>
                       <Translate>
                         : You&lsquo;ll be able to view your clients&rsquo; trading information,
                         including their account balance.
@@ -372,9 +368,7 @@ const AppForm = ({
                     register={register('payments')}
                   >
                     <label htmlFor='payments-scope'>
-                      <b>
-                        <Translate>Payments</Translate>
-                      </b>
+                      <b>Payments</b>
                       <Translate>
                         : You&lsquo;ll be able to perform deposits and withdrawals on your
                         clients&rsquo; behalf.
@@ -385,9 +379,7 @@ const AppForm = ({
                 <div className={`${styles.customCheckboxWrapper} mb-0`}>
                   <CustomCheckbox name='admin' id='admin-scope' register={register('admin')}>
                     <label htmlFor='admin-scope'>
-                      <b>
-                        <Translate>Admin</Translate>
-                      </b>
+                      <b>Admin</b>
                       <Translate>
                         : Full account access, including the access to manage security tokens.
                       </Translate>
diff --git a/src/features/dashboard/components/AppsTable/index.tsx b/src/features/dashboard/components/AppsTable/index.tsx
index 125524c72..38af8f93c 100644
--- a/src/features/dashboard/components/AppsTable/index.tsx
+++ b/src/features/dashboard/components/AppsTable/index.tsx
@@ -7,29 +7,30 @@ import UpdateAppDialog from '../Dialogs/UpdateAppDialog';
 import Table from '../Table';
 import ScopesCell from '../Table/scopes.cell';
 import AppActionsCell from './app-actions.cell';
+import { translate } from '@docusaurus/Translate';
 
 export type TAppColumn = Column<ApplicationObject>;
 
 const appTableColumns: TAppColumn[] = [
   {
-    Header: 'Application Name',
+    Header: translate({ message: 'Application Name' }),
     accessor: 'name',
   },
   {
-    Header: 'Application ID',
+    Header: translate({ message: 'Application ID' }),
     accessor: 'app_id',
   },
   {
-    Header: 'Scopes',
+    Header: translate({ message: 'Scopes' }),
     accessor: 'scopes',
     Cell: ScopesCell,
   },
   {
-    Header: 'Redirect URL',
+    Header: translate({ message: 'Redirect URL' }),
     accessor: 'redirect_uri',
   },
   {
-    Header: 'Actions',
+    Header: translate({ message: 'Actions' }),
     id: 'actions',
     accessor: (originalRow) => originalRow.app_id,
     Cell: AppActionsCell,
diff --git a/src/features/dashboard/components/RestrictionsAppname/index.tsx b/src/features/dashboard/components/RestrictionsAppname/index.tsx
index 3beb76768..a00ea380b 100644
--- a/src/features/dashboard/components/RestrictionsAppname/index.tsx
+++ b/src/features/dashboard/components/RestrictionsAppname/index.tsx
@@ -1,13 +1,22 @@
 import React from 'react';
 import styles from './RestrictionsAppname.module.scss';
+import Translate from '@docusaurus/Translate';
 
 const RestrictionsAppname = () => {
   return (
     <ul className={styles.restrictions}>
-      <li>Only alphanumeric characters with spaces and underscores are allowed.</li>
-      <li>The name can contain up to 48 characters.</li>
-      <li>Duplicate token names aren’t allowed.</li>
-      <li>The name cannot contain “Binary”, “Deriv”, or similar words.</li>
+      <li>
+        <Translate>Only alphanumeric characters with spaces and underscores are allowed.</Translate>
+      </li>
+      <li>
+        <Translate>The name can contain up to 48 characters.</Translate>
+      </li>
+      <li>
+        <Translate>Duplicate token names aren’t allowed.</Translate>
+      </li>
+      <li>
+        <Translate>The name cannot contain “Binary”, “Deriv”, or similar words.</Translate>
+      </li>
     </ul>
   );
 };
diff --git a/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.tsx b/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.tsx
index 478bf4d4f..7cfa938c8 100644
--- a/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.tsx
+++ b/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.tsx
@@ -1,16 +1,24 @@
 import React from 'react';
 import styles from './TokenNameRestrictions.module.scss';
+import Translate, { translate } from '@docusaurus/Translate';
 
 const TokenNameRestrictions = () => {
   return (
     <ul className={styles.tokenrestrictions}>
-      <li>Only alphanumeric characters with spaces and underscores are allowed.</li>
-      <li>Only 2-32 characters are allowed</li>
-      <li>No duplicate token names are allowed for the same account.</li>
       <li>
-        {
-          'No keywords "deriv" or "binary" or words that look similar, e.g. "_binary_" or "d3eriv" are allowed.'
-        }
+        <Translate>Only alphanumeric characters with spaces and underscores are allowed</Translate>
+      </li>
+      <li>
+        <Translate>Only 2-32 characters are allowed</Translate>
+      </li>
+      <li>
+        <Translate>No duplicate token names are allowed for the same account.</Translate>
+      </li>
+      <li>
+        {translate({
+          message:
+            'No keywords "deriv" or "binary" or words that look similar, e.g. "_binary_" or "d3eriv" are allowed.',
+        })}
       </li>
     </ul>
   );
diff --git a/src/features/dashboard/types.ts b/src/features/dashboard/types.ts
index 553629bfe..179a6d2bc 100644
--- a/src/features/dashboard/types.ts
+++ b/src/features/dashboard/types.ts
@@ -1,3 +1,4 @@
+import { translate } from '@docusaurus/Translate';
 import * as yup from 'yup';
 
 const markupPercentageRegex = /^((([0-2]\.([0-9]([0-9])?)?))||([3]\.([0]([0])?)?)||([0-3]))$/;
@@ -9,14 +10,18 @@ const base_schema = {
     .required('Enter your app name.')
     .max(48, 'Your app name cannot exceed 48 characters.')
     .matches(/^(?=.*[a-zA-Z0-9])[a-zA-Z0-9_ ]*$/, {
-      message:
-        'Only alphanumeric characters with spaces and underscores are allowed. (Example: my_application)',
+      message: translate({
+        message:
+          'Only alphanumeric characters with spaces and underscores are allowed. (Example: my_application)',
+      }),
       excludeEmptyString: true,
     })
     .matches(
       /^(?!.*deriv|.*d3r1v|.*der1v|.*d3riv|.*b1nary|.*binary|.*b1n4ry|.*bin4ry|.*blnary|.*b\|nary).*$/i,
       {
-        message: 'The name cannot contain “Binary”, “Deriv”, or similar words.',
+        message: translate({
+          message: 'The name cannot contain “Binary”, “Deriv”, or similar words.',
+        }),
         excludeEmptyString: true,
       },
     ),
@@ -27,26 +32,47 @@ const base_schema = {
   admin: yup.boolean(),
   redirect_uri: yup
     .string()
-    .max(255, 'Your website URL cannot exceed 255 characters.')
+    .max(
+      255,
+      translate({
+        message: 'Your website URL cannot exceed 255 characters.',
+      }),
+    )
     .notRequired()
     .matches(urlRegex, {
-      message: 'Enter a valid URL. (Example: https://www.[YourDomainName].com)',
+      message: translate({
+        message: 'Enter a valid URL. (Example: https://www.[YourDomainName].com)',
+      }),
       excludeEmptyString: true,
     }),
   verification_uri: yup
     .string()
-    .max(255, 'Your website URL cannot exceed 255 characters.')
+    .max(
+      255,
+      translate({
+        message: 'Your website URL cannot exceed 255 characters.',
+      }),
+    )
     .notRequired()
     .matches(urlRegex, {
-      message: 'Enter a valid URL. (Example: https://www.[YourDomainName].com)',
+      message: translate({
+        message: 'Enter a valid URL. (Example: https://www.[YourDomainName].com)',
+      }),
       excludeEmptyString: true,
     }),
   app_markup_percentage: yup
     .string()
-    .max(4, 'Your markup value cannot be more than 4 characters.')
+    .max(
+      4,
+      translate({
+        message: 'Your markup value cannot be more than 4 characters.',
+      }),
+    )
     .matches(
       markupPercentageRegex,
-      'Your markup value must be equal to or above 0.00 and no more than 3.00.',
+      translate({
+        message: 'Your markup value must be equal to or above 0.00 and no more than 3.00.',
+      }),
     ),
   app_id: yup.number(),
 };

From 471af739c9fb47a3fc29c7b4f59041122f9a8a72 Mon Sep 17 00:00:00 2001
From: shafin-deriv <shafin@regentmarkets.com>
Date: Wed, 19 Jun 2024 19:05:17 +0800
Subject: [PATCH 14/14] fix: test case

---
 .../components/TokenNameRestrictions/TokenNameRestrictions.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.tsx b/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.tsx
index 7cfa938c8..12ea3ea2c 100644
--- a/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.tsx
+++ b/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.tsx
@@ -6,7 +6,7 @@ const TokenNameRestrictions = () => {
   return (
     <ul className={styles.tokenrestrictions}>
       <li>
-        <Translate>Only alphanumeric characters with spaces and underscores are allowed</Translate>
+        <Translate>Only alphanumeric characters with spaces and underscores are allowed.</Translate>
       </li>
       <li>
         <Translate>Only 2-32 characters are allowed</Translate>