From 9fdc7230c63b4afd432a575649a59977ffab8069 Mon Sep 17 00:00:00 2001
From: Jacob Homanics <homanicsjake@gmail.com>
Date: Wed, 6 Nov 2024 08:37:18 -0600
Subject: [PATCH] added copy functionality to project owner address on
 ViewProjectDetails page. (#3724)

* added copy functionality

* Update package.json
---
 .../src/features/round/CopyToClipboard.tsx    | 41 +++++++++++++++++++
 .../src/features/round/ViewProjectDetails.tsx |  4 +-
 2 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 packages/grant-explorer/src/features/round/CopyToClipboard.tsx

diff --git a/packages/grant-explorer/src/features/round/CopyToClipboard.tsx b/packages/grant-explorer/src/features/round/CopyToClipboard.tsx
new file mode 100644
index 000000000..768ad8ccb
--- /dev/null
+++ b/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;
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails.tsx
index 6c3b5811f..e3f12f080 100644
--- a/packages/grant-explorer/src/features/round/ViewProjectDetails.tsx
+++ b/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}>