feat: add tooltip message handling in CopyButton component

Author: ErwanDecoster

src/components/CopyButton.tsx

@@ -12,16 +12,18 @@ const CopyButton = ({
   displayText,
   buttonText,
   tooltipWithText = false,
+  tooltipText = 'Copy',
   className,
 }: {
   textToCopy: string;
   displayText?: string;
   buttonText?: string;
   tooltipWithText?: boolean;
+  tooltipText?: string;
   className?: string;
 }) => {
   const [showTooltip, setShowTooltip] = useState(false);
-  const [tooltipMessage, setTooltipMessage] = useState('Copy');
+  const [tooltipMessage, setTooltipMessage] = useState(tooltipText);
 
   const handleCopy = () => {
     navigator.clipboard.writeText(textToCopy).then(() => {
@@ -35,7 +37,7 @@ const CopyButton = ({
     if (tooltipWithText && displayText) {
       setTooltipMessage(`Copy "${displayText}"`);
     } else {
-      setTooltipMessage('Copy');
+      setTooltipMessage(tooltipText);
     }
     setShowTooltip(true);
   };

src/modules/Tags.tsx

@@ -12,29 +12,31 @@ const Tags = (props: { children: string }) => {
     // If decoding fails, fall back to displaying raw encoded tag
   }
   return (
-    <div>
-      <div className="flex items-center gap-1">
-        {tags ? (
-          tags.length > 0 ? (
-            tags.map((t) => (
-              <span
-                className="inline-flex w-fit rounded-full border px-4 py-2 text-xs uppercase"
-                key={t}
-              >
-                {t}
-              </span>
-            ))
-          ) : (
-            <span className="text-muted-foreground">None</span>
-          )
+    <div className="flex items-center gap-1">
+      {tags ? (
+        tags.length > 0 ? (
+          tags.map((t) => (
+            <span
+              className="inline-flex w-fit rounded-full border px-4 py-2 text-xs uppercase"
+              key={t}
+            >
+              {t}
+            </span>
+          ))
         ) : (
-          <>
-            <span className="hidden md:inline">{raw}</span>
-            <span className="inline md:hidden">{truncateAddress(raw)}</span>
-          </>
-        )}{' '}
-        <CopyButton textToCopy={raw} />
-      </div>
+          <span className="text-muted-foreground">None</span>
+        )
+      ) : (
+        <>
+          <span className="hidden md:inline">{raw}</span>
+          <span className="inline md:hidden">{truncateAddress(raw)}</span>
+        </>
+      )}{' '}
+      <CopyButton
+        className="ml-2"
+        textToCopy={raw}
+        tooltipText="Copy raw tag"
+      />
     </div>
   );
 };