Refactoring and add translation

i18n/en/code.json

@@ -1118,5 +1118,8 @@
   },
   "The server is currently unable to handle the request due to a temporary overload or maintenance of the server. Please try again later.": {
     "message": "The server is currently unable to handle the request due to a temporary overload or maintenance of the server. Please try again later."
+  },
+  "Copied": {
+    "message": "Copied"
   }
 }

i18n/fr/code.json

@@ -1118,5 +1118,8 @@
   },
   "The server is currently unable to handle the request due to a temporary overload or maintenance of the server. Please try again later.": {
     "message": "Le serveur est actuellement incapable de traiter la requête en raison d'une surcharge temporaire ou d'une maintenance du serveur. Veuillez réessayer plus tard."
+  },
+  "Copied": {
+    "message": "Copié"
   }
 }

src/features/dashboard/components/common-table/cell-copy-text.tsx

@@ -1,32 +1,37 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { LabelPairedCopyLgRegularIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/quill-ui';
+import Translate from '@docusaurus/Translate';
 import styles from './cell-copy-text.module.scss';
 
 const CopyTextCell: React.FC<{
   cell: {
     value: React.ReactNode;
   };
-}> = ({ cell }) => {
-  const [tooltipVisible, setTooltipVisible] = useState(false);
+}> = ({ cell: { value } }) => {
+  const [tooltipVisible, setTooltipVisible] = React.useState(false);
 
-  const handleCopy = () => {
-    navigator.clipboard.writeText(cell.value.toString());
+  const handleCopy = React.useCallback(() => {
+    navigator.clipboard.writeText(value.toString());
     setTooltipVisible(true);
     setTimeout(() => setTooltipVisible(false), 1000);
-  };
+  }, [value]);
 
   return (
     <React.Fragment>
-      {cell.value ? (
+      {value && (
         <div className={styles.copyText} onClick={handleCopy}>
-          <Text>{cell.value}</Text>
+          <Text>{value}</Text>
           <span className={styles.copyTextIcon}>
             <LabelPairedCopyLgRegularIcon />
-            {tooltipVisible && <div className={`${styles.tooltip} ${tooltipVisible ? styles.visible : ''}`}>Copied</div>}
+            {tooltipVisible && (
+              <div className={`${styles.tooltip} ${tooltipVisible ? styles.visible : ''}`}>
+                <Translate>Copied</Translate>
+              </div>
+            )}
           </span>
         </div>
-      ) : ''}
+      )}
     </React.Fragment>
   );
 };