Skip to content

Commit 02a34ba

Browse files
thelostone-mcthelostone-mc
committed
minor cleanup
1 parent f4c4050 commit 02a34ba

File tree

6 files changed

+88
-125
lines changed

6 files changed

+88
-125
lines changed

‎packages/grant-explorer/src/features/common/CopyToClipboardButton.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,18 @@ export default function CopyToClipboardButton(props: CopyToClipboardType) {
1414
return (
1515
<Button
1616
type="button"
17-
className={`inline-flex bg-[#FFD9CD] text-black w-30 justify-center font-mono ${
18-
active && "animate-[peachTransition_20s_ease-in]"
19-
} ${props.styles}`}
17+
className={`inline-flex text-black w-30 justify-center text-sm font-semibold bg-white border border-grey-100 ${props.styles}`}
2018
onClick={async () => {
2119
setActive(true);
2220
setTimeout(() => setActive(false), 1000);
2321

2422
await navigator.clipboard.writeText(props.textToCopy);
2523
}}
2624
>
27-
<LinkIcon className={props.iconStyle} aria-hidden="true" />
28-
{active ? "Link Copied" : "Share Profile"}
25+
<LinkIcon className={`mt-1 ${props.iconStyle}`} aria-hidden="true" />
26+
<span className="ml-1">
27+
{active ? "Link Copied" : "Share Profile"}
28+
</span>
2929
</Button>
3030
);
3131
}

‎packages/grant-explorer/src/features/common/StatCard.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
export function StatCard(props: { title: string; value: string | undefined }) {
22
return (
3-
<div className="rounded-2xl bg-[#F7F7F7] font-mono p-4">
3+
<div className="rounded-2xl bg-[#F7F7F7] font-mono px-6 py-7">
44
<div className="text-grey-400 text-4xl">{props.value}</div>
5-
<div className="font-bold text-md pb-4 mt-4">{props.title}</div>
5+
<div className="font-bold text-md mt-6">{props.title}</div>
66
</div>
77
);
88
}

‎packages/grant-explorer/src/features/contributors/DirectDonationsTable.tsx

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,13 @@ export function DirectDonationsTable(props: { contributions: Contribution[] }) {
1212
<>
1313
<TableHeader />
1414
<Table contributions={props.contributions} />
15-
{props.contributions.length === 0 && (
16-
<div className="text-md mt-2 mb-12">
17-
Direct donations made to projects will appear here.
18-
</div>
19-
)}
2015
</>
2116
);
2217
}
2318

2419
function TableHeader() {
2520
return (
26-
<table className="w-full text-left mx-4">
21+
<table className="w-full text-left">
2722
<thead className="font-sans text-lg">
2823
<tr>
2924
<th className="w-2/5">Project</th>
@@ -52,7 +47,7 @@ function TableHeader() {
5247
</div>
5348
</div>
5449
</th>
55-
<th className="w-1/5 pl-8">Transaction Information</th>
50+
<th className="text-right mr-10 w-1/5 pl-8">Transaction</th>
5651
</tr>
5752
</thead>
5853
</table>
@@ -61,7 +56,7 @@ function TableHeader() {
6156

6257
function Table(props: { contributions: Contribution[] }) {
6358
return (
64-
<div className="rounded-lg p-2 py-1">
59+
<div className="rounded-lg py-1">
6560
<div className="overflow-hidden">
6661
<div className="mx-auto">
6762
<div>
@@ -92,29 +87,31 @@ function Table(props: { contributions: Contribution[] }) {
9287
}
9388

9489
return (
95-
<tr key={contribution.id} className="border-b">
96-
<td className="py-4 lg:px-2 w-2/5">
90+
<tr key={contribution.id}>
91+
<td className="py-4 w-2/5">
9792
<div className="flex items-center">
9893
<div className="flex flex-col sm:flex-row">
9994
{/* Link to the project */}
10095
<Link
10196
className={`underline inline-block lg:pr-2 lg:max-w-[300px] max-w-[75px] 2xl:max-w-fit truncate`}
102-
title={contribution.projectId.trim()}
97+
title={contribution.projectId}
10398
to={`/projects/${contribution.projectId}`}
10499
target="_blank"
105100
>
106-
{contribution.projectId.trim()}
101+
{contribution.application?.project?.name ??
102+
`Project Id: ${contribution.projectId.slice(0, 6) + "..." + contribution.projectId.slice(-6)}`
103+
}
107104
</Link>
108105
</div>
109106
</div>
110107
{/* Display contribution timestamp */}
111-
<div className="text-sm text-gray-500">
108+
<div className="text-sm text-gray-500 mt-1">
112109
{timeAgo(Number(contribution.timestamp))}
113110
</div>
114111
</td>
115112
{/* Display donations */}
116113
<td className="py-4 truncate w-2/5 lg:pl-2">
117-
<span className="font-bold">
114+
<span>
118115
{formattedAmount}{" "}
119116
</span>
120117
<span className="text-grey-400">

‎packages/grant-explorer/src/features/contributors/DonationsTable.tsx

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,18 @@ export function DonationsTable(props: {
2121
}) {
2222
return (
2323
<>
24-
<TableHeader />
25-
<RoundsTableWithAccordian
26-
activeRound={props.activeRound}
27-
contributions={props.contributions}
28-
/>
29-
{props.contributions.length === 0 && (
30-
<div className="text-md mt-2 mb-12">
31-
{props.activeRound
32-
? "Donations made during active rounds will appear here."
33-
: "Donations made during past rounds will appear here."}
24+
{props.contributions.length === 0 ? (
25+
<div className="text-md text-center my-6">
26+
No Donations found
3427
</div>
28+
) : (
29+
<>
30+
<TableHeader />
31+
<RoundsTableWithAccordian
32+
activeRound={props.activeRound}
33+
contributions={props.contributions}
34+
/>
35+
</>
3536
)}
3637
</>
3738
);
@@ -118,7 +119,7 @@ function RoundsTableWithAccordian(props: {
118119

119120
function TableHeader() {
120121
return (
121-
<table className="w-full text-left mx-4">
122+
<table className="w-full text-left">
122123
<thead className="font-sans text-lg">
123124
<tr>
124125
<th className="w-2/5">Round</th>
@@ -147,7 +148,7 @@ function TableHeader() {
147148
</div>
148149
</div>
149150
</th>
150-
<th className="w-1/5 pl-8">Transaction Information</th>
151+
<th className="w-1/5 pl-8">Transaction</th>
151152
</tr>
152153
</thead>
153154
</table>
@@ -219,7 +220,7 @@ function InnerTable(props: {
219220
</div>
220221
</div>
221222
{/* Display contribution timestamp */}
222-
<div className="text-sm text-gray-500">
223+
<div className="text-sm text-gray-500 mt-1">
223224
{timeAgo(Number(contribution.timestamp))}
224225
</div>
225226
</td>
@@ -311,7 +312,7 @@ function Table(props: {
311312
</div>
312313
</div>
313314
{/* Display contribution timestamp */}
314-
<div className="text-sm text-gray-500">
315+
<div className="text-sm text-gray-500 mt-1">
315316
{timeAgo(Number(lastUpdated))}
316317
</div>
317318
</td>

‎packages/grant-explorer/src/features/contributors/TransactionButton.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ export function TransactionButton(props: { chainId: number; txHash: string }) {
1111
<Button
1212
type="button"
1313
$variant="external-link"
14-
className="flex flex-row items-center border border-grey-100 rounded-lg text-black font-mono p-2"
14+
className="text-sm flex flex-row items-center border border-grey-100 rounded-lg text-black font-mono p-2"
1515
>
16-
<ArrowTopRightOnSquareIcon className="h-5 inline mx-2" />
17-
<span>View</span>
16+
<ArrowTopRightOnSquareIcon className="h-3 inline mx-2" />
17+
{props.txHash.slice(0, 5) + "..." + props.txHash.slice(-5)}
1818
</Button>
1919
</a>
2020
);

‎packages/grant-explorer/src/features/contributors/ViewContributionHistory.tsx

Lines changed: 52 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ export function ViewContributionHistoryPage() {
2828
const chainIds = getChains().map((chain) => chain.id);
2929

3030
const { data: ensResolvedAddress } = useEnsAddress({
31-
/* If params.address is actually an address, don't resolve the ens address for it*/
3231
name: isAddress(params.address ?? "") ? undefined : params.address,
3332
chainId: 1,
3433
});
@@ -92,7 +91,7 @@ function ViewContributionHistoryFetcher(props: {
9291
} else if (contributionHistory.type === "error") {
9392
console.error("Error", contributionHistory);
9493
return (
95-
<ViewContributionHistoryWithoutDonations
94+
<ViewNoHistory
9695
address={props.address}
9796
addressLogo={addressLogo}
9897
breadCrumbs={breadCrumbs}
@@ -144,66 +143,40 @@ export function ViewContributionHistory(props: {
144143
return [totalDonations, totalUniqueContributions, projects.length];
145144
}, [props.contributions]);
146145

147-
const activeRoundDonations = useMemo(() => {
146+
const filteredDonations = useMemo(() => {
148147
const now = Date.now();
149-
150-
const filteredRoundDonations = props.contributions.data.filter(
151-
(contribution) => {
152-
const formattedRoundEndTime =
153-
Number(
154-
dateToEthereumTimestamp(
155-
new Date(contribution.round.donationsEndTime)
156-
)
157-
) * 1000;
158-
return (
159-
formattedRoundEndTime >= now &&
160-
contribution.round.strategyName !== "allov2.DirectAllocationStrategy"
161-
);
162-
}
163-
);
164-
if (filteredRoundDonations.length === 0) {
165-
return [];
166-
}
167-
return filteredRoundDonations;
168-
}, [props.contributions]);
169-
170-
const pastRoundDonations = useMemo(() => {
171-
const now = Date.now();
172-
173-
const filteredRoundDonations = props.contributions.data.filter(
174-
(contribution) => {
148+
149+
const getFilteredDonations = (type: string) => {
150+
return props.contributions.data.filter((contribution) => {
175151
const formattedRoundEndTime =
176152
Number(
177-
dateToEthereumTimestamp(
178-
new Date(contribution.round.donationsEndTime)
179-
)
153+
dateToEthereumTimestamp(new Date(contribution.round.donationsEndTime))
180154
) * 1000;
181-
return (
182-
formattedRoundEndTime < now &&
183-
contribution.round.strategyName !== "allov2.DirectAllocationStrategy"
184-
);
185-
}
186-
);
187-
if (filteredRoundDonations.length === 0) {
188-
return [];
189-
}
190-
191-
return filteredRoundDonations;
192-
}, [props.contributions]);
193-
194-
const directAllocationDonations = useMemo(() => {
195-
const filteredRoundDonations = props.contributions.data.filter(
196-
(contribution) => {
197-
return (
198-
contribution.round.strategyName === "allov2.DirectAllocationStrategy"
199-
);
200-
}
201-
);
202-
if (filteredRoundDonations.length === 0) {
203-
return [];
204-
}
205-
206-
return filteredRoundDonations;
155+
156+
switch (type) {
157+
case "active":
158+
return (
159+
formattedRoundEndTime >= now &&
160+
contribution.round.strategyName !== "allov2.DirectAllocationStrategy"
161+
);
162+
case "past":
163+
return (
164+
formattedRoundEndTime < now &&
165+
contribution.round.strategyName !== "allov2.DirectAllocationStrategy"
166+
);
167+
case "direct":
168+
return contribution.round.strategyName === "allov2.DirectAllocationStrategy";
169+
default:
170+
return false;
171+
}
172+
});
173+
};
174+
175+
return {
176+
activeRoundDonations: getFilteredDonations("active"),
177+
pastRoundDonations: getFilteredDonations("past"),
178+
directAllocationDonations: getFilteredDonations("direct"),
179+
};
207180
}, [props.contributions]);
208181

209182
return (
@@ -212,10 +185,10 @@ export function ViewContributionHistory(props: {
212185
<Breadcrumb items={props.breadCrumbs} />
213186
</div>
214187
<main>
215-
<div className="border-b pb-2 mb-4 flex flex-row items-center justify-between">
188+
<div className="pb-2 flex flex-row items-center justify-between">
216189
<div className="flex flex-row items-center">
217190
<img
218-
className="w-10 h-10 rounded-full mr-4 mt-2"
191+
className="w-10 h-10 rounded-full mr-4 my-auto"
219192
src={props.addressLogo}
220193
alt="Address Logo"
221194
/>
@@ -229,28 +202,14 @@ export function ViewContributionHistory(props: {
229202
</div>
230203
</div>
231204
<div className="flex justify-between items-center">
232-
{/* todo: removed until site is stable */}
233-
{/* <Button
234-
className="shadow-sm inline-flex border-gray-300 border-2 bg-gradient-to-br from-[#f6d7caff] via-[#bddce8ff] to-[#ebdfa5ff] font-medium py-2 px-4 rounded-md hover:bg-gradient-to-tr text-black w-30 mr-6"
235-
onClick={() =>
236-
window.open(
237-
`https://gg-your-impact.streamlit.app/?address=${props.address}`,
238-
"_blank"
239-
)
240-
}
241-
>
242-
<span className="font-mono text-black text-opacity-100">
243-
Your Gitcoin Grants Impact
244-
</span>
245-
</Button> */}
246205
<CopyToClipboardButton
247206
textToCopy={`${currentOrigin}/#/contributors/${props.address}`}
248-
iconStyle="h-4 w-4 mr-1 mt-1 shadow-sm"
207+
iconStyle="w-3.5 mr-1 mt-1 shadow-sm"
249208
/>
250209
</div>
251210
</div>
252-
<div className="mt-8 mb-2 font-sans italic">
253-
* Please note that your recent transactions may take a short while to
211+
<div className="text-sm text-gray-500 mb-4">
212+
Please note that your recent transactions may take a short while to
254213
reflect in your donation history, as processing times may vary.
255214
</div>
256215
<div className="text-2xl my-6 font-sans">Donation Impact</div>
@@ -274,25 +233,31 @@ export function ViewContributionHistory(props: {
274233
/>
275234
</div>
276235
</div>
277-
<div className="text-2xl my-6">Donation History</div>
278-
<div className="text-lg bg-grey-75 text-black rounded-2xl pl-4 px-1 py-1 mb-2 font-semibold">
236+
<div className="text-2xl mt-6 mb-10">Donation History</div>
237+
<div className="border-black mb-2 px-1 py-1 text-black text-lg border-b font-semibold">
279238
Active Rounds
280239
</div>
281240
<DonationsTable
282-
contributions={activeRoundDonations}
241+
contributions={filteredDonations.activeRoundDonations}
283242
activeRound={true}
284243
/>
285-
<div className="text-lg bg-grey-75 text-black rounded-2xl pl-4 px-1 py-1 mb-2 font-semibold">
244+
<div className="border-black mb-2 px-1 py-1 text-black text-lg border-b font-semibold">
286245
Past Rounds
287246
</div>
288247
<DonationsTable
289-
contributions={pastRoundDonations}
248+
contributions={filteredDonations.pastRoundDonations}
290249
activeRound={false}
291250
/>
292-
<div className="text-lg bg-grey-75 text-black rounded-2xl pl-4 px-1 py-1 mb-2 font-semibold">
293-
Direct Donations
294-
</div>
295-
<DirectDonationsTable contributions={directAllocationDonations} />
251+
{/* Direct Allocation */}
252+
{filteredDonations.directAllocationDonations.length > 0 && (
253+
<>
254+
<div className="border-black mb-2 px-1 py-1 text-black text-lg border-b font-semibold">
255+
Direct Donations
256+
</div>
257+
<DirectDonationsTable contributions={filteredDonations.directAllocationDonations} />
258+
</>
259+
)
260+
}
296261
</main>
297262
<div className="mt-24 mb-11 h-11">
298263
<Footer />
@@ -301,7 +266,7 @@ export function ViewContributionHistory(props: {
301266
);
302267
}
303268

304-
export function ViewContributionHistoryWithoutDonations(props: {
269+
export function ViewNoHistory(props: {
305270
address: string;
306271
addressLogo: string;
307272
ensName?: string;

0 commit comments

Comments
 (0)