added copy functionality to project owner address on ViewProjectDetai…

…ls page. (#3724)

* added copy functionality

* Update package.json

packages/grant-explorer/src/features/round/CopyToClipboard.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import {
+  CheckCircleIcon,
+  DocumentDuplicateIcon,
+} from "@heroicons/react/24/outline";
+import { truncate } from "../common/utils/truncate";
+import { isAddress } from "viem";
+
+const CopyToClipboard = ({ text }: { text: string | undefined }) => {
+  const [copied, setCopied] = useState(false);
+  const copyText = () => {
+    navigator.clipboard
+      .writeText(text || "")
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 3000);
+      })
+      .catch((error) => {
+        console.error("Failed to copy text: ", error);
+      });
+  };
+
+  return (
+    <div onClick={copyText} className="flex" style={{ cursor: "pointer" }}>
+      {isAddress(text || "") ? truncate(text) : text}
+      {copied ? (
+        <CheckCircleIcon
+          aria-hidden="true"
+          className="ml-1 w-5 text-blue-500"
+        />
+      ) : (
+        <DocumentDuplicateIcon
+          aria-hidden="true"
+          className="ml-1 w-5 text-blue-500"
+        />
+      )}
+    </div>
+  );
+};
+
+export default CopyToClipboard;

packages/grant-explorer/src/features/round/ViewProjectDetails.tsx

@@ -44,13 +44,13 @@ import { useOSO } from "../api/oso";
 import { CheckIcon, ShoppingCartIcon } from "@heroicons/react/24/outline";
 import { Application, useDataLayer } from "data-layer";
 import { DefaultLayout } from "../common/DefaultLayout";
-import { truncate } from "../common/utils/truncate";
 import {
   mapApplicationToProject,
   mapApplicationToRound,
   useApplication,
 } from "../projects/hooks/useApplication";
 import { PassportWidget } from "../common/PassportWidget";
+import CopyToClipboard from "./CopyToClipboard";
 
 const CalendarIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
@@ -370,7 +370,7 @@ function ProjectLinks({ project }: { project?: Project }) {
       }`}
     >
       <ProjectLink icon={EthereumIcon}>
-        {ens.data || truncate(recipient)}
+        <CopyToClipboard text={ens.data || recipient} />
       </ProjectLink>
       <ProjectLink icon={CalendarIcon}>{createdOn}</ProjectLink>
       <ProjectLink url={website} icon={GlobeIcon}>