Skip to content

Commit

Permalink
fix: copy correct url when clicking "share profile" (#2750)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bard
bard authored Jan 3, 2024
1 parent bba0b70 commit ddebd6b
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 102 deletions.
200 changes: 101 additions & 99 deletions packages/grant-explorer/src/features/contributors/DonationsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions packages/grant-explorer/src/features/contributors/ViewContributionHistory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
Expand Down Expand Up @@ -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"
/>
Expand Down
11 changes: 10 additions & 1 deletion packages/grant-explorer/src/features/contributors/__tests__/ViewContributionHistory.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -125,6 +125,10 @@ vi.mock("wagmi", async () => {
};
});

Object.assign(navigator, {
clipboard: { writeText: vi.fn() },
});

describe("<ViewContributionHistory/>", () => {
beforeEach(() => {
vi.clearAllMocks();
Expand Down Expand Up @@ -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/")
);
});
});

5 comments on commit ddebd6b

@vercel
Copy link

@vercel vercel bot commented on ddebd6b Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

manager – ./packages/round-manager

grants-stack-round-manager.vercel.app
manager-grants-stack.vercel.app
manager-git-main-grants-stack.vercel.app
manager.gitcoin.co

@vercel
Copy link

@vercel vercel bot commented on ddebd6b Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

manager-staging – ./packages/round-manager

manager-staging-git-main-grants-stack.vercel.app
grants-stack-manager-staging.vercel.app
manager-staging-grants-stack.vercel.app

@vercel
Copy link

@vercel vercel bot commented on ddebd6b Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

builder-staging – ./packages/builder

builder-staging-grants-stack.vercel.app
grants-stack-builder-staging.vercel.app
builder-staging-git-main-grants-stack.vercel.app

@vercel
Copy link

@vercel vercel bot commented on ddebd6b Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

builder – ./packages/builder

builder-grants-stack.vercel.app
builder.gitcoin.co
builder-kappa-one.vercel.app
builder-git-main-grants-stack.vercel.app

@vercel
Copy link

@vercel vercel bot commented on ddebd6b Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

explorer-staging – ./packages/grant-explorer

explorer-staging-git-main-grants-stack.vercel.app
explorer-staging-grants-stack.vercel.app
grants-stack-explorer-staging.vercel.app

Please sign in to comment.