From 60cb0d54e5bb13d3cb4d1c8c035247b16090ca03 Mon Sep 17 00:00:00 2001
From: nidhi-singh02 <nidhi2894@gmail.com>
Date: Mon, 21 Jul 2025 12:02:42 +0530
Subject: [PATCH] create CopyButton component

---
 components/AddressSvmTable.tsx             | 11 ++------
 components/CopyAddress.tsx                 | 20 +++-----------
 components/CopyButton.tsx                  | 31 ++++++++++++++++++++++
 components/SponsoredFeedsTableWithData.tsx | 19 ++-----------
 4 files changed, 38 insertions(+), 43 deletions(-)
 create mode 100644 components/CopyButton.tsx

diff --git a/components/AddressSvmTable.tsx b/components/AddressSvmTable.tsx
index 6cae3cb8..e1bad612 100644
--- a/components/AddressSvmTable.tsx
+++ b/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>
           );
diff --git a/components/CopyAddress.tsx b/components/CopyAddress.tsx
index 773bbb0e..4fd516b3 100644
--- a/components/CopyAddress.tsx
+++ b/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>
   );
 };
 
diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx
new file mode 100644
index 00000000..fbb71e84
--- /dev/null
+++ b/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;
diff --git a/components/SponsoredFeedsTableWithData.tsx b/components/SponsoredFeedsTableWithData.tsx
index 663638b7..ef065425 100644
--- a/components/SponsoredFeedsTableWithData.tsx
+++ b/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 {
@@ -92,8 +91,6 @@ export const SponsoredFeedsTable = ({
   feeds,
   networkName,
 }: SponsoredFeedsTableProps) => {
-  const { copiedText, copyToClipboard } = useCopyToClipboard();
-
   // Handle empty feeds
   if (feeds.length === 0) {
     return (
@@ -186,19 +183,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">