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}
)}
-
-
+
);
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 (
-
+
);
};
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 (
+
+ );
+};
+
+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 = ({
{feed.id}
-
+
|