Merge branch 'main' of github.com:pyth-network/documentation into entropy_update

Author: tejasbadadare

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,14 +1,8 @@
-import copy from "copy-to-clipboard";
-import CopyIcon from "./icons/CopyIcon";
+import CopyButton from "./CopyButton";
 
 const CopyAddress = ({ address, url }: { address: string; url?: string }) => {
   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={() => {
-        copy(address);
-      }}
-    >
+    <CopyButton value={address} className="-ml-1">
       <span className="mr-2 hidden lg:block">
         {url ? (
           <a href={url} target="_blank" rel="noopener noreferrer">
@@ -26,9 +20,8 @@ const CopyAddress = ({ address, url }: { address: string; url?: string }) => {
         ) : (
           address.slice(0, 6) + "..." + address.slice(-6)
         )}
-      </span>{" "}
-      <CopyIcon className="shrink-0" />
-    </div>
+      </span>
+    </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;