Skip to content

Commit 088bf63

Browse files
thelostone-mcthelostone-mc
committed
fix
1 parent 02a34ba commit 088bf63

File tree

2 files changed

+110
-85
lines changed

2 files changed

+110
-85
lines changed

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

Lines changed: 106 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { InformationCircleIcon } from "@heroicons/react/24/solid";
22
import ReactTooltip from "react-tooltip";
33
import { Link } from "react-router-dom";
44
import { TransactionButton } from "./TransactionButton";
5-
import { getChainById, getTokenByChainIdAndAddress, stringToBlobUrl } from "common";
5+
import { getChainById, getTokenByChainIdAndAddress, getTxBlockExplorerLink, stringToBlobUrl } from "common";
66
import { Hex, formatUnits } from "viem";
77
import { Contribution } from "data-layer";
88
import {
@@ -14,24 +14,62 @@ import {
1414
} from "@chakra-ui/react";
1515
import { useState } from "react";
1616
import moment from "moment";
17+
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid";
1718

1819
export function DonationsTable(props: {
1920
contributions: Contribution[];
2021
activeRound: boolean;
2122
}) {
23+
24+
console.log("CONTRIBUTIONS", props.contributions);
25+
26+
function groupByTransactionHash(contributions: Contribution[]): Record<string, Contribution[]> {
27+
return contributions.reduce((grouped: Record<string, Contribution[]>, donation: Contribution) => {
28+
const { transactionHash } = donation;
29+
if (!grouped[transactionHash]) {
30+
grouped[transactionHash] = [];
31+
}
32+
grouped[transactionHash].push(donation);
33+
return grouped;
34+
}, {});
35+
}
36+
37+
const groupedContributionsByTxHash = groupByTransactionHash(props.contributions);
38+
39+
console.log("groupedContributionsByTxHash", groupedContributionsByTxHash);
40+
2241
return (
2342
<>
2443
{props.contributions.length === 0 ? (
25-
<div className="text-md text-center my-6">
44+
<div className="text-md text-center my-12">
2645
No Donations found
2746
</div>
2847
) : (
2948
<>
30-
<TableHeader />
31-
<RoundsTableWithAccordian
32-
activeRound={props.activeRound}
33-
contributions={props.contributions}
34-
/>
49+
{Object.keys(groupedContributionsByTxHash).map((txHash) => (
50+
<div key={txHash}>
51+
52+
<div className="bg-grey-75 rounded-lg px-3 py-4">
53+
<h1 className="font-medium font-mono text-xl">
54+
<a
55+
target={"_blank"}
56+
href={getTxBlockExplorerLink(
57+
groupedContributionsByTxHash[txHash][0].chainId,
58+
txHash
59+
)}
60+
>
61+
Transaction #{txHash.slice(0, 5) + ".." + txHash.slice(-5)}
62+
<ArrowTopRightOnSquareIcon className="mb-1 h-5 inline ml-2" />
63+
</a>
64+
</h1>
65+
</div>
66+
<TableHeader />
67+
<RoundsTableWithAccordian
68+
activeRound={props.activeRound}
69+
contributions={groupedContributionsByTxHash[txHash]}
70+
/>
71+
</div>
72+
))}
3573
</>
3674
)}
3775
</>
@@ -42,96 +80,84 @@ function RoundsTableWithAccordian(props: {
4280
contributions: Contribution[];
4381
activeRound: boolean;
4482
}) {
45-
const nestedContributionsForRound = props.contributions.reduce(
46-
(acc: Record<string, Contribution[]>, contribution) => {
47-
const roundId = contribution.roundId;
4883

49-
if (!acc[roundId]) {
50-
acc[roundId] = [];
51-
}
52-
acc[roundId].push(contribution);
53-
return acc;
54-
},
55-
{}
56-
);
84+
const contributions = props.contributions;
5785

5886
const [defaultIndex, setDefaultIndex] = useState<
5987
number | number[] | undefined
6088
>(undefined);
6189

62-
for (const key in nestedContributionsForRound) {
63-
return (
64-
<div className="pb-8">
65-
{Object.entries(nestedContributionsForRound).map(
66-
([_roundId, contributionsForRound], _index) => {
67-
const sortedContributions = contributionsForRound
68-
.flat()
69-
.sort(
70-
(a, b) =>
71-
(Number(b.timestamp) || Number.MAX_SAFE_INTEGER) -
72-
(Number(a.timestamp) || Number.MAX_SAFE_INTEGER)
73-
);
90+
return (
91+
<div className="pb-8">
92+
{Object.entries(contributions).map(([txnHash, contributionsForTx]) => {
93+
const sortedContributions = contributions
94+
.sort(
95+
(a, b) => b.amountInUsd - a.amountInUsd // Sort by amountInUsd in descending order
96+
);
97+
98+
console.log("=============")
99+
console.log("txnHash", txnHash)
100+
console.log("SORTED CONTRIBUTIONS", sortedContributions)
101+
74102

75-
return (
76-
<Accordion
77-
className="w-full"
78-
allowMultiple={true}
79-
defaultIndex={defaultIndex}
80-
onChange={(index) => {
81-
setDefaultIndex(index);
82-
}}
83-
>
84-
<AccordionItem
85-
key={key}
86-
isDisabled={sortedContributions.length === 0}
103+
return (
104+
<Accordion
105+
key={txnHash}
106+
className="w-full"
107+
allowMultiple={true}
108+
defaultIndex={defaultIndex}
109+
onChange={(index) => {
110+
setDefaultIndex(index);
111+
}}
112+
>
113+
<AccordionItem
114+
isDisabled={sortedContributions.length === 0}
115+
>
116+
<h2>
117+
<AccordionButton
118+
_expanded={{
119+
bg: "white",
120+
color: "black",
121+
}}
122+
_hover={{ bg: "white", color: "black" }}
123+
_disabled={{ bg: "white", color: "black" }}
87124
>
88-
<h2>
89-
<AccordionButton
90-
_expanded={{
91-
bg: "white",
92-
color: "black",
93-
}}
94-
_hover={{ bg: "white", color: "black" }}
95-
_disabled={{ bg: "white", color: "black" }}
96-
>
97-
<Table
98-
activeRound={props.activeRound}
99-
contributions={sortedContributions}
100-
/>
101-
<AccordionIcon />
102-
</AccordionButton>
103-
</h2>
104-
<AccordionPanel pb={4}>
105-
<InnerTable
106-
activeRound={props.activeRound}
107-
contributions={sortedContributions}
108-
/>
109-
</AccordionPanel>
110-
</AccordionItem>
111-
</Accordion>
112-
);
113-
}
114-
)}
115-
</div>
116-
);
117-
}
125+
<Table
126+
activeRound={props.activeRound}
127+
contributions={sortedContributions}
128+
/>
129+
<AccordionIcon />
130+
</AccordionButton>
131+
</h2>
132+
<AccordionPanel pb={4}>
133+
<InnerTable
134+
activeRound={props.activeRound}
135+
contributions={sortedContributions}
136+
/>
137+
</AccordionPanel>
138+
</AccordionItem>
139+
</Accordion>
140+
);
141+
})}
142+
</div>
143+
);
118144
}
119145

120146
function TableHeader() {
121147
return (
122148
<table className="w-full text-left">
123149
<thead className="font-sans text-lg">
124150
<tr>
125-
<th className="w-2/5">Round</th>
126-
<th className="w-2/5">
151+
<th className="w-2/5 font-medium">Round</th>
152+
<th className="w-2/5 font-medium">
127153
<div className="flex flex-row items-center lg:pr-16">
128154
<div className="py-4">Total Donation</div>
129155
<div className="py-4">
130156
<InformationCircleIcon
131157
data-tip
132158
data-background-color="#0E0333"
133159
data-for="donation-tooltip"
134-
className="inline h-4 w-4 ml-2 mr-3"
160+
className="inline h-5 w-5 ml-2 mb-1"
135161
data-testid={"donation-tooltip"}
136162
/>
137163
<ReactTooltip
@@ -148,7 +174,7 @@ function TableHeader() {
148174
</div>
149175
</div>
150176
</th>
151-
<th className="w-1/5 pl-8">Transaction</th>
177+
<th></th>
152178
</tr>
153179
</thead>
154180
</table>
@@ -249,6 +275,7 @@ function Table(props: {
249275
contributions: Contribution[];
250276
activeRound: boolean;
251277
}) {
278+
252279
const roundInfo = props.contributions[0];
253280
const chainId = roundInfo.chainId;
254281
const chain = getChainById(chainId);
@@ -285,6 +312,8 @@ function Table(props: {
285312
}
286313
});
287314

315+
const txnHash = sortedContributions[0].transactionHash;
316+
288317
return (
289318
<table className="w-full text-left font-sans">
290319
<tbody>
@@ -295,7 +324,7 @@ function Table(props: {
295324
<div className="flex items-center">
296325
{/* Network Icon */}
297326
<img
298-
className="w-4 h-4 mr-2"
327+
className="w-4 h-4 mr-1"
299328
src={chainLogo}
300329
alt="Round Chain Logo"
301330
/>
@@ -323,14 +352,6 @@ function Table(props: {
323352
/ ${totalContributionAmountInUsd.toFixed(2)}
324353
</span>
325354
</td>
326-
<td className="truncate w-1/5 pl-48">
327-
<div>
328-
<TransactionButton
329-
chainId={sortedContributions[0].chainId}
330-
txHash={sortedContributions[0].transactionHash}
331-
/>
332-
</div>
333-
</td>
334355
</tr>
335356
</tbody>
336357
</table>

‎packages/grant-explorer/src/index.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,3 +105,7 @@
105105
background: linear-gradient(0deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.60) 100%), linear-gradient(124deg, #FF9776 17.77%, #5F94BC 35.47%, #25BDCE 59.3%, #DEAB0C 91.61%);
106106
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
107107
}
108+
109+
.chakra-accordion .chakra-accordion__item{
110+
border: 0;
111+
}

0 commit comments

Comments
 (0)