add recipient address copy to manager (#3796)

* add recipient copy to manager

* fix lockfile

Author: MasterHW

.env.example

@@ -30,7 +30,7 @@ REACT_APP_PASSPORT_API_COMMUNITY_ID_AVALANCHE=0000
 ##Indexer & Data Layer - DEFAULTS SUFFICIENT
 # URL of the indexer. http://localhost:8080 for local indexer
 REACT_APP_INDEXER_V1_API_URL=https://grants-stack-indexer-v2.gitcoin.co
-REACT_APP_INDEXER_V2_API_URL=http://gitcoin-data-layer-staging-lb-242619440.us-east-2.elb.amazonaws.com/v1
+REACT_APP_INDEXER_V2_API_URL=https://beta.indexer.gitcoin.co/v1
 
 # Search API URL where the Data Layer should point to
 REACT_APP_GRANTS_STACK_SEARCH_API_BASE_URL=https://d2n9vtjeq685yt.cloudfront.net

packages/common/package.json

@@ -28,6 +28,7 @@
     "@wagmi/chains": "^1.8.0",
     "abitype": "^0.10.3",
     "classnames": "^2.3.2",
+    "@heroicons/react": "^2.0.13",
     "data-layer": "workspace:*",
     "dompurify": "^2.4.3",
     "eslint-config-gitcoin": "workspace:*",

packages/grant-explorer/src/assets/icons/ethereum-icon.svg renamed to packages/common/src/assets/ethereum-icon.svg

@@ -3,7 +3,7 @@ import {
   CheckCircleIcon,
   DocumentDuplicateIcon,
 } from "@heroicons/react/24/outline";
-import { truncate } from "../common/utils/truncate";
+import { truncate } from "./truncate";
 import { isAddress } from "viem";
 
 const CopyToClipboard = ({ text }: { text: string | undefined }) => {

packages/grant-explorer/src/features/round/CopyToClipboard.tsx renamed to packages/common/src/components/CopyToClipboard.tsx

@@ -26,7 +26,7 @@ import { useAccount, useEnsName } from "wagmi";
 import DefaultLogoImage from "../../assets/default_logo.png";
 import { ReactComponent as GithubIcon } from "../../assets/github-logo.svg";
 import { ReactComponent as TwitterIcon } from "../../assets/twitter-logo.svg";
-import { ReactComponent as EthereumIcon } from "../../assets/icons/ethereum-icon.svg";
+import { ReactComponent as EthereumIcon } from "common/src/assets/ethereum-icon.svg";
 import { ReactComponent as GlobeIcon } from "../../assets/icons/globe-icon.svg";
 import { useRoundById } from "../../context/RoundContext";
 import { CartProject, GrantApplicationFormAnswer, Project } from "../api/types";
@@ -56,7 +56,7 @@ import {
   useApplication,
 } from "../projects/hooks/useApplication";
 import { PassportWidget } from "../common/PassportWidget";
-import CopyToClipboard from "./CopyToClipboard";
+import CopyToClipboard from "common/src/components/CopyToClipboard";
 
 const CalendarIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (

packages/grant-explorer/src/features/common/utils/truncate.ts renamed to packages/common/src/components/truncate.ts

@@ -7,7 +7,7 @@ import {
   setWindowDimensions,
 } from "../../../test-utils";
 import ViewProjectDetails from "../ViewProjectDetails";
-import { truncate } from "../../common/utils/truncate";
+import { truncate } from "common/src/components/truncate";
 import { formatDateWithOrdinal } from "common";
 import { useApplication } from "../../projects/hooks/useApplication";
 import { beforeEach, expect, Mock } from "vitest";

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

@@ -19,5 +19,5 @@
     "types": ["vitest/globals", "@testing-library/jest-dom"],
     "incremental": true
   },
-  "include": ["src"]
+  "include": ["src", "../common/src/components/CopyToClipboard.tsx", "../common/src/components/truncate.ts"]
 }

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

@@ -52,6 +52,9 @@ import {
   isDirectRound,
   ApplicationOpenDateRange,
 } from "./ViewRoundPage";
+import CopyToClipboard from "common/src/components/CopyToClipboard";
+import { ReactComponent as EthereumIcon } from "common/src/assets/ethereum-icon.svg";
+import { useEnsName } from "wagmi";
 
 import {
   CalendarIcon,
@@ -135,6 +138,9 @@ export default function ViewApplicationPage() {
     contractUpdatingStatus == ProgressStatus.IN_PROGRESS ||
     indexingStatus == ProgressStatus.IN_PROGRESS;
 
+  const recipient = application?.recipient;
+  // @ts-expect-error Temp until viem (could also cast recipient as Address or update the type)
+  const ens = useEnsName({ address: recipient, enabled: Boolean(recipient) });
   const progressSteps: ProgressStep[] = [
     {
       name: "Updating",
@@ -806,6 +812,16 @@ export default function ViewApplicationPage() {
                         : "-"}
                     </span>
                   </span>
+                  {/* Application wallet address */}
+                  <span
+                    className="flex flex-row items-center"
+                    data-testid="application-recipient"
+                  >
+                    <EthereumIcon className="h-4 w-4 mr-2 text-grey-400" />
+                    <span className="text-sm text-grey-400">
+                      <CopyToClipboard text={ens.data || recipient} />
+                    </span>
+                  </span>
                 </div>
                 <hr className="my-6" />
                 {/* Description */}