create CopyButton component (#756)

Author: nidhi-singh02

components/AddressSvmTable.tsx

@@ -1,5 +1,4 @@
-import copy from "copy-to-clipboard";
-import CopyIcon from "./icons/CopyIcon";
+import CopyButton from "./CopyButton";
 import { StyledTd } from "./Table";
 
 const AddressSvmTable = ({
@@ -34,13 +33,7 @@ const AddressSvmTable = ({
                     {value}
                   </code>
                 )}
-
-                <button
-                  onClick={() => copy(value)}
-                  className="p-1 hover:bg-light dark:hover:bg-dark rounded"
-                >
-                  <CopyIcon className="shrink-0" />
-                </button>
+                <CopyButton value={value} className="ml-2" />
               </StyledTd>
             </tr>
           );

components/CopyAddress.tsx

@@ -1,17 +1,8 @@
-import CopyIcon from "./icons/CopyIcon";
-import { useCopyToClipboard } from "../utils/useCopyToClipboard";
+import CopyButton from "./CopyButton";
 
 const CopyAddress = ({ address, url }: { address: string; url?: string }) => {
-  const { copiedText, copyToClipboard } = useCopyToClipboard();
-  const isCopied = copiedText === address;
-
   return (
-    <div
-      className="-ml-1 inline-flex cursor-pointer items-center px-1 font-mono hover:bg-light hover:text-dark dark:hover:bg-dark dark:hover:text-light"
-      onClick={() => {
-        copyToClipboard(address);
-      }}
-    >
+    <CopyButton value={address} className="-ml-1">
       <span className="mr-2 hidden lg:block">
         {url ? (
           <a href={url} target="_blank" rel="noopener noreferrer">
@@ -30,12 +21,7 @@ const CopyAddress = ({ address, url }: { address: string; url?: string }) => {
           address.slice(0, 6) + "..." + address.slice(-6)
         )}
       </span>
-      {isCopied ? (
-        <span className="text-green-500 text-xs font-bold">✓</span>
-      ) : (
-        <CopyIcon className="shrink-0" />
-      )}
-    </div>
+    </CopyButton>
   );
 };
 

components/CopyButton.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import CopyIcon from "./icons/CopyIcon";
+import { useCopyToClipboard } from "../utils/useCopyToClipboard";
+
+interface CopyButtonProps {
+  value: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const CopyButton = ({ value, className = "", children }: CopyButtonProps) => {
+  const { copiedText, copyToClipboard } = useCopyToClipboard();
+  const isCopied = copiedText === value;
+
+  return (
+    <button
+      type="button"
+      className={`inline-flex items-center cursor-pointer px-1 font-mono hover:bg-light hover:text-dark dark:hover:bg-dark dark:hover:text-light ${className}`}
+      onClick={() => copyToClipboard(value)}
+    >
+      {children && <span className="mr-2">{children}</span>}
+      {isCopied ? (
+        <span className="text-green-500 text-xs font-bold">✓</span>
+      ) : (
+        <CopyIcon className="shrink-0" />
+      )}
+    </button>
+  );
+};
+
+export default CopyButton;

components/SponsoredFeedsTableWithData.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-import CopyIcon from "./icons/CopyIcon";
+import CopyButton from "./CopyButton";
 import { mapValues } from "../utils/ObjectHelpers";
-import { useCopyToClipboard } from "../utils/useCopyToClipboard";
 
 // SponsoredFeed interface has the same structure as defined in deployment yaml/json files
 interface SponsoredFeed {
@@ -93,8 +92,6 @@ export const SponsoredFeedsTable = ({
   feeds,
   networkName,
 }: SponsoredFeedsTableProps) => {
-  const { copiedText, copyToClipboard } = useCopyToClipboard();
-
   // Handle empty feeds
   if (feeds.length === 0) {
     return (
@@ -221,19 +218,7 @@ export const SponsoredFeedsTable = ({
                           <code className="text-xs font-mono text-gray-600 dark:text-gray-400 flex-1 break-all leading-relaxed">
                             {feed.id}
                           </code>
-                          <button
-                            onClick={() => copyToClipboard(feed.id)}
-                            className="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded flex-shrink-0 mt-0.5"
-                            title="Copy Price Feed ID"
-                          >
-                            {copiedText === feed.id ? (
-                              <span className="text-green-500 text-xs font-bold">
-                                ✓
-                              </span>
-                            ) : (
-                              <CopyIcon className="w-3 h-3 text-gray-400" />
-                            )}
-                          </button>
+                          <CopyButton value={feed.id} className="ml-2" />
                         </div>
                       </td>
                       <td className="px-3 py-2 align-top">