From 8c850b40be2ab673dd6c069cdefe2b8b3e6017fd Mon Sep 17 00:00:00 2001
From: muhammad-ahmed <muhammad.ahmed@regentmarkets.com>
Date: Tue, 14 Jan 2025 13:36:57 +0800
Subject: [PATCH 1/4] ahmed/DAPI-817/chore-add-visual-effect-on-copy

---
 .../common-table/cell-copy-text.module.scss   | 24 +++++++++++++++++++
 .../common-table/cell-copy-text.tsx           | 22 +++++++++--------
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/features/dashboard/components/common-table/cell-copy-text.module.scss b/src/features/dashboard/components/common-table/cell-copy-text.module.scss
index 993e4a5f..7ab44611 100644
--- a/src/features/dashboard/components/common-table/cell-copy-text.module.scss
+++ b/src/features/dashboard/components/common-table/cell-copy-text.module.scss
@@ -14,4 +14,28 @@
 .copyTextIcon {
   margin-left: 8px;
   margin-top: 4px;
+  position: relative; /* Add this to make it a positioning context for the tooltip */
+}
+
+.tooltip {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.75);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+  top: 100%; /* Position it right below the icon */
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 8px; /* Add some space between icon and tooltip */
+  z-index: 1000;
+  white-space: nowrap;
+  font-size: 12px;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.tooltip.visible {
+  opacity: 1;
+  visibility: visible;
 }
diff --git a/src/features/dashboard/components/common-table/cell-copy-text.tsx b/src/features/dashboard/components/common-table/cell-copy-text.tsx
index a2bc8f52..5eced141 100644
--- a/src/features/dashboard/components/common-table/cell-copy-text.tsx
+++ b/src/features/dashboard/components/common-table/cell-copy-text.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { LabelPairedCopyLgRegularIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/quill-ui';
 import styles from './cell-copy-text.module.scss';
@@ -8,23 +8,25 @@ const CopyTextCell: React.FC<{
     value: React.ReactNode;
   };
 }> = ({ cell }) => {
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(cell.value.toString());
+    setTooltipVisible(true);
+    setTimeout(() => setTooltipVisible(false), 1000);
+  };
+
   return (
     <React.Fragment>
       {cell.value ? (
-        <div
-          className={styles.copyText}
-          onClick={() => {
-            navigator.clipboard.writeText(cell.value.toString());
-          }}
-        >
+        <div className={styles.copyText} onClick={handleCopy}>
           <Text>{cell.value}</Text>
           <span className={styles.copyTextIcon}>
             <LabelPairedCopyLgRegularIcon />
+            {tooltipVisible && <div className={`${styles.tooltip} ${tooltipVisible ? styles.visible : ''}`}>Copied</div>}
           </span>
         </div>
-      ) : (
-        ''
-      )}
+      ) : ''}
     </React.Fragment>
   );
 };

From 1a9d2a4fda2a3211805284afee2f0e2c9f2376a4 Mon Sep 17 00:00:00 2001
From: muhammad-ahmed <muhammad.ahmed@regentmarkets.com>
Date: Tue, 14 Jan 2025 13:43:10 +0800
Subject: [PATCH 2/4] remove comment on styling

---
 .../components/common-table/cell-copy-text.module.scss      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/dashboard/components/common-table/cell-copy-text.module.scss b/src/features/dashboard/components/common-table/cell-copy-text.module.scss
index 7ab44611..6331fc0f 100644
--- a/src/features/dashboard/components/common-table/cell-copy-text.module.scss
+++ b/src/features/dashboard/components/common-table/cell-copy-text.module.scss
@@ -14,7 +14,7 @@
 .copyTextIcon {
   margin-left: 8px;
   margin-top: 4px;
-  position: relative; /* Add this to make it a positioning context for the tooltip */
+  position: relative;
 }
 
 .tooltip {
@@ -23,10 +23,10 @@
   color: white;
   padding: 5px 10px;
   border-radius: 4px;
-  top: 100%; /* Position it right below the icon */
+  top: 100%;
   left: 50%;
   transform: translateX(-50%);
-  margin-top: 8px; /* Add some space between icon and tooltip */
+  margin-top: 8px;
   z-index: 1000;
   white-space: nowrap;
   font-size: 12px;

From 390010ec9891123e1f589619fff969d6ed4e20bd Mon Sep 17 00:00:00 2001
From: muhammad-ahmed <muhammad.ahmed@regentmarkets.com>
Date: Tue, 14 Jan 2025 13:52:55 +0800
Subject: [PATCH 3/4] Refactoring and add translation

---
 i18n/en/code.json                             |  3 +++
 i18n/fr/code.json                             |  3 +++
 .../common-table/cell-copy-text.tsx           | 25 +++++++++++--------
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/i18n/en/code.json b/i18n/en/code.json
index de0955e3..924533d2 100644
--- a/i18n/en/code.json
+++ b/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"
   }
 }
diff --git a/i18n/fr/code.json b/i18n/fr/code.json
index 4e66c8e9..80308d40 100644
--- a/i18n/fr/code.json
+++ b/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é"
   }
 }
diff --git a/src/features/dashboard/components/common-table/cell-copy-text.tsx b/src/features/dashboard/components/common-table/cell-copy-text.tsx
index 5eced141..4ea1c1ad 100644
--- a/src/features/dashboard/components/common-table/cell-copy-text.tsx
+++ b/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>
   );
 };

From 64f05db13d12f9902a68c670a5470b88c4996ab2 Mon Sep 17 00:00:00 2001
From: muhammad-ahmed <muhammad.ahmed@regentmarkets.com>
Date: Thu, 16 Jan 2025 12:37:16 +0800
Subject: [PATCH 4/4] Update tooltip design

---
 .../common-table/cell-copy-text.module.scss          | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/features/dashboard/components/common-table/cell-copy-text.module.scss b/src/features/dashboard/components/common-table/cell-copy-text.module.scss
index 6331fc0f..e8eaeda8 100644
--- a/src/features/dashboard/components/common-table/cell-copy-text.module.scss
+++ b/src/features/dashboard/components/common-table/cell-copy-text.module.scss
@@ -26,13 +26,23 @@
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
-  margin-top: 8px;
   z-index: 1000;
   white-space: nowrap;
   font-size: 12px;
   transition: opacity 0.3s ease, visibility 0.3s ease;
   opacity: 0;
   visibility: hidden;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0 6px 6px;
+    border-style: solid;
+    border-color: transparent transparent rgba(0, 0, 0, 0.75);
+  }
 }
 
 .tooltip.visible {