Add tooltip to confirm the copy action

package.json

@@ -23,6 +23,7 @@
     "@radixdlt/radix-dapp-toolkit": "^2.0.0",
     "@reduxjs/toolkit": "^2.0.1",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tippyjs/react": "^4.2.6",
     "@types/mdx": "^2.0.10",
     "@types/node": "20.3.3",
     "@types/react": "18.2.14",

src/app/components/CopyIcon.tsx

@@ -1,33 +1,49 @@
+import { useState } from "react";
+import { useAppDispatch } from "../hooks";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { MdContentCopy } from "react-icons/md";
 import { setCopied } from "../state/priceChartSlice";
-import { DexterToast } from "components/DexterToaster";
-import { useAppDispatch } from "../hooks";
+import Tippy from "@tippyjs/react";
+import "tippy.js/dist/tippy.css";
+import "tippy.js/dist/svg-arrow.css";
 
 interface CopyIconProps {
   targetUrl: string;
 }
 
 export function CopyIcon({ targetUrl }: CopyIconProps) {
   const dispatch = useAppDispatch();
+  const [visible, setVisible] = useState(false);
 
   const handleCopy = () => {
     dispatch(setCopied(true));
-    DexterToast.success("Copied!");
+    setVisible(true);
 
     setTimeout(() => {
+      setVisible(false);
       dispatch(setCopied(false));
-    }, 2000);
+    }, 700);
   };
 
   return (
     <>
-      <CopyToClipboard text={targetUrl} onCopy={handleCopy}>
-        <MdContentCopy
-          className="cursor-pointer text-base"
-          title="Copy to clipboard"
-        />
-      </CopyToClipboard>
+      <Tippy
+        content={<span>Copied!</span>}
+        visible={visible}
+        onClickOutside={() => setVisible(false)}
+        arrow={true}
+        theme="custom"
+      >
+        <div>
+          <CopyToClipboard text={targetUrl} onCopy={handleCopy}>
+            <MdContentCopy
+              className="cursor-pointer text-base"
+              title="Copy to clipboard"
+              onClick={() => setVisible(true)}
+            />
+          </CopyToClipboard>
+        </div>
+      </Tippy>
     </>
   );
 }

src/app/styles/globals.css

@@ -122,9 +122,9 @@ input[type="number"]::-ms-clear {
 
 /**
  * GRID AREA CSS: Utilizes global CSS classes for grid areas.
- * Justification: TailwindCSS lacks a readable method for implementing 
- * grid-template-areas. Therefore, all grid area-related styles are 
- * centralized in global CSS to maintain separation from 
+ * Justification: TailwindCSS lacks a readable method for implementing
+ * grid-template-areas. Therefore, all grid area-related styles are
+ * centralized in global CSS to maintain separation from
  * component-specific styles.
  */
 .grid-container {
@@ -239,3 +239,8 @@ input[type="number"]::-ms-clear {
 .account-history table thead tr th:last-child {
   padding-right: 16px;
 }
+
+/* css for tooltip */
+.tippy-box[data-theme~="custom"] {
+  @apply text-dexter-green bg-base-100;
+}