From ddebd6b3c28c84cfd08f4498b88f83f6f412cc0a Mon Sep 17 00:00:00 2001
From: Massimiliano Mirra <max@gitcoin.co>
Date: Wed, 3 Jan 2024 19:26:44 +0000
Subject: [PATCH] fix: copy correct url when clicking "share profile" (#2750)

---
 .../features/contributors/DonationsTable.tsx  | 200 +++++++++---------
 .../contributors/ViewContributionHistory.tsx  |   4 +-
 .../ViewContributionHistory.test.tsx          |  11 +-
 3 files changed, 113 insertions(+), 102 deletions(-)

diff --git a/packages/grant-explorer/src/features/contributors/DonationsTable.tsx b/packages/grant-explorer/src/features/contributors/DonationsTable.tsx
index 7126706636..2691d14d16 100644
--- a/packages/grant-explorer/src/features/contributors/DonationsTable.tsx
+++ b/packages/grant-explorer/src/features/contributors/DonationsTable.tsx
@@ -22,116 +22,118 @@ export function DonationsTable(props: {
         className="border-collapse w-full"
         data-testid="donation-history-table"
       >
-        <tr className="text-left text-lg">
-          <th className="py-4 w-1/3 lg:w-1/2 font-medium">Project</th>
-          <th className="flex flex-row py-4 w-1/3 lg:w-1/4 font-medium">
-            <div className="py-4">Donation</div>
-            <div className="py-4">
-              <InformationCircleIcon
-                data-tip
-                data-background-color="#0E0333"
-                data-for="donation-tooltip"
-                className="inline h-4 w-4 ml-2 mr-3"
-                data-testid={"donation-tooltip"}
-              />
-              <ReactTooltip
-                id="donation-tooltip"
-                place="bottom"
-                type="dark"
-                effect="solid"
-              >
-                <p className="text-xs">
-                  The displayed amount in USD reflects <br />
-                  the value at the time of your donation.
-                </p>
-              </ReactTooltip>
-            </div>
-          </th>
-          <th className="py-4 text-right w-1/3 lg:w-1/4 font-medium">
-            Transaction Information
-          </th>
-        </tr>
-        {props.contributions.length > 0 &&
-          props.contributions
-            .map((contributions) => {
-              return contributions.data.map((contribution) => ({
-                ...contribution,
-                chainId: contributions.chainId,
-              }));
-            })
-            .flat()
-            .sort((a, b) => Number(b.timestamp - a.timestamp))
-            .map((contribution) => {
-              const tokenId =
-                contribution.token.toLowerCase() + "-" + contribution.chainId;
-              const token = props.tokens[tokenId];
+        <tbody>
+          <tr className="text-left text-lg">
+            <th className="py-4 w-1/3 lg:w-1/2 font-medium">Project</th>
+            <th className="flex flex-row py-4 w-1/3 lg:w-1/4 font-medium">
+              <div className="py-4">Donation</div>
+              <div className="py-4">
+                <InformationCircleIcon
+                  data-tip
+                  data-background-color="#0E0333"
+                  data-for="donation-tooltip"
+                  className="inline h-4 w-4 ml-2 mr-3"
+                  data-testid={"donation-tooltip"}
+                />
+                <ReactTooltip
+                  id="donation-tooltip"
+                  place="bottom"
+                  type="dark"
+                  effect="solid"
+                >
+                  <p className="text-xs">
+                    The displayed amount in USD reflects <br />
+                    the value at the time of your donation.
+                  </p>
+                </ReactTooltip>
+              </div>
+            </th>
+            <th className="py-4 text-right w-1/3 lg:w-1/4 font-medium">
+              Transaction Information
+            </th>
+          </tr>
+          {props.contributions.length > 0 &&
+            props.contributions
+              .map((contributions) => {
+                return contributions.data.map((contribution) => ({
+                  ...contribution,
+                  chainId: contributions.chainId,
+                }));
+              })
+              .flat()
+              .sort((a, b) => Number(b.timestamp - a.timestamp))
+              .map((contribution) => {
+                const tokenId =
+                  contribution.token.toLowerCase() + "-" + contribution.chainId;
+                const token = props.tokens[tokenId];
 
-              let formattedAmount = "N/A";
+                let formattedAmount = "N/A";
 
-              if (token) {
-                formattedAmount = `${formatUnits(
-                  BigInt(contribution.amount),
-                  token.decimal
-                )} ${token.name}`;
-              }
+                if (token) {
+                  formattedAmount = `${formatUnits(
+                    BigInt(contribution.amount),
+                    token.decimal
+                  )} ${token.name}`;
+                }
 
-              return (
-                <tr key={contribution.id}>
-                  <td className="border-b py-4 pr-2 lg:pr-16 w-1/3 lg:w-1/2">
-                    <div className="flex items-center">
-                      <div className="flex flex-col sm:flex-row">
-                        <div className="flex items-center">
-                          <img
-                            className="w-4 h-4 mr-2"
-                            src={CHAINS[contribution.chainId]?.logo}
-                            alt="Round Chain Logo"
-                          />
+                return (
+                  <tr key={contribution.id}>
+                    <td className="border-b py-4 pr-2 lg:pr-16 w-1/3 lg:w-1/2">
+                      <div className="flex items-center">
+                        <div className="flex flex-col sm:flex-row">
+                          <div className="flex items-center">
+                            <img
+                              className="w-4 h-4 mr-2"
+                              src={CHAINS[contribution.chainId]?.logo}
+                              alt="Round Chain Logo"
+                            />
+                            <Link
+                              className={`underline inline-block lg:pr-2 lg:max-w-[200px] max-w-[75px] 2xl:max-w-fit truncate`}
+                              title={contribution.roundName}
+                              to={`/round/${
+                                contribution.chainId
+                              }/${contribution.roundId.toLowerCase()}`}
+                              target="_blank"
+                            >
+                              {contribution.roundName}
+                            </Link>
+                            <ChevronRightIcon className="h-4 inline lg:mx-2" />
+                          </div>
                           <Link
-                            className={`underline inline-block lg:pr-2 lg:max-w-[200px] max-w-[75px] 2xl:max-w-fit truncate`}
-                            title={contribution.roundName}
+                            className={`underline inline-block lg:pr-2 lg:max-w-[300px] max-w-[75px] 2xl:max-w-fit truncate`}
+                            title={contribution.projectTitle}
                             to={`/round/${
                               contribution.chainId
-                            }/${contribution.roundId.toLowerCase()}`}
+                            }/${contribution.roundId.toLowerCase()}/${contribution.roundId.toLowerCase()}-${
+                              contribution.applicationId
+                            }`}
                             target="_blank"
                           >
-                            {contribution.roundName}
+                            {contribution.projectTitle}
                           </Link>
-                          <ChevronRightIcon className="h-4 inline lg:mx-2" />
                         </div>
-                        <Link
-                          className={`underline inline-block lg:pr-2 lg:max-w-[300px] max-w-[75px] 2xl:max-w-fit truncate`}
-                          title={contribution.projectTitle}
-                          to={`/round/${
-                            contribution.chainId
-                          }/${contribution.roundId.toLowerCase()}/${contribution.roundId.toLowerCase()}-${
-                            contribution.applicationId
-                          }`}
-                          target="_blank"
-                        >
-                          {contribution.projectTitle}
-                        </Link>
                       </div>
-                    </div>
-                    {/* Todo: display contribution timestamp */}
-                    {/* <div className="text-sm text-gray-500">4 mins ago</div> */}
-                  </td>
-                  <td className="border-b py-4 truncate lg:pr-16 w-1/3 lg:w-1/4">
-                    {formattedAmount}
-                    <div className="text-md text-gray-500">
-                      ${contribution.amountUSD.toFixed(2)}
-                    </div>
-                  </td>
-                  <td className="border-b py-4 lg:pr-12 w-1/3 lg:w-1/4">
-                    <div className="flex justify-end">
-                      <TransactionButton
-                        chainId={contribution.chainId}
-                        txHash={contribution.transaction}
-                      />
-                    </div>
-                  </td>
-                </tr>
-              );
-            })}
+                      {/* Todo: display contribution timestamp */}
+                      {/* <div className="text-sm text-gray-500">4 mins ago</div> */}
+                    </td>
+                    <td className="border-b py-4 truncate lg:pr-16 w-1/3 lg:w-1/4">
+                      {formattedAmount}
+                      <div className="text-md text-gray-500">
+                        ${contribution.amountUSD.toFixed(2)}
+                      </div>
+                    </td>
+                    <td className="border-b py-4 lg:pr-12 w-1/3 lg:w-1/4">
+                      <div className="flex justify-end">
+                        <TransactionButton
+                          chainId={contribution.chainId}
+                          txHash={contribution.transaction}
+                        />
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })}
+        </tbody>
       </table>
       {props.contributions.length === 0 && (
         <div className="text-md mt-2 mb-12">
diff --git a/packages/grant-explorer/src/features/contributors/ViewContributionHistory.tsx b/packages/grant-explorer/src/features/contributors/ViewContributionHistory.tsx
index 242d12dcd7..5e3ad99306 100644
--- a/packages/grant-explorer/src/features/contributors/ViewContributionHistory.tsx
+++ b/packages/grant-explorer/src/features/contributors/ViewContributionHistory.tsx
@@ -221,7 +221,7 @@ export function ViewContributionHistory(props: {
             </div>
           </div>
           <CopyToClipboardButton
-            textToCopy={`${currentOrigin}#/contributors/${props.address}`}
+            textToCopy={`${currentOrigin}/#/contributors/${props.address}`}
             styles="text-xs p-2"
             iconStyle="h-4 w-4 mr-1"
           />
@@ -307,7 +307,7 @@ export function ViewContributionHistoryWithoutDonations(props: {
             </div>
           </div>
           <CopyToClipboardButton
-            textToCopy={`${currentOrigin}#/contributors/${props.address}`}
+            textToCopy={`${currentOrigin}/#/contributors/${props.address}`}
             styles="text-xs p-2"
             iconStyle="h-4 w-4 mr-1"
           />
diff --git a/packages/grant-explorer/src/features/contributors/__tests__/ViewContributionHistory.test.tsx b/packages/grant-explorer/src/features/contributors/__tests__/ViewContributionHistory.test.tsx
index 906acdae62..42c5d547a9 100644
--- a/packages/grant-explorer/src/features/contributors/__tests__/ViewContributionHistory.test.tsx
+++ b/packages/grant-explorer/src/features/contributors/__tests__/ViewContributionHistory.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { faker } from "@faker-js/faker";
 import {
   ViewContributionHistory,
@@ -125,6 +125,10 @@ vi.mock("wagmi", async () => {
   };
 });
 
+Object.assign(navigator, {
+  clipboard: { writeText: vi.fn() },
+});
+
 describe("<ViewContributionHistory/>", () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -191,5 +195,10 @@ describe("<ViewContributionHistoryWithoutDonations/>", () => {
       screen.getByText(mockAddress.slice(0, 6) + "..." + mockAddress.slice(-6))
     ).toBeInTheDocument();
     expect(screen.getByText("Share Profile")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText("Share Profile"));
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+      expect.stringMatching("http://localhost:3000/#/contributors/")
+    );
   });
 });