chore: redo donation history page (#3666)

Co-authored-by: Aditya Anand M C <aditya.anandmc@gmail.com>

packages/grant-explorer/src/features/api/round.ts

@@ -1,66 +1,7 @@
 import { ApplicationStatus } from "./types";
-import { useEffect, useState } from "react";
-import { Address, getAddress } from "viem";
-import { Contribution, useDataLayer } from "data-layer";
-import { dateToEthereumTimestamp } from "common";
 
 export type RoundProject = {
  id: string;
  status: ApplicationStatus;
  payoutAddress: string;
 };
-
-export type ContributionHistoryState =
- | { type: "loading" }
- | {
- type: "loaded";
- data: { chainIds: number[]; data: Contribution[] };
- }
- | { type: "error"; error: string };
-
-export const useContributionHistory = (
- chainIds: number[],
- rawAddress: string
-) => {
- const [state, setState] = useState<ContributionHistoryState>({
- type: "loading",
- });
- const dataLayer = useDataLayer();
-
- useEffect(() => {
- const fetchContributions = async () => {
- let address: Address = "0x";
- try {
- address = getAddress(rawAddress.toLowerCase());
- } catch (e) {
- return Promise.resolve({
- chainIds,
- error: "Invalid address",
- data: [],
- });
- }
-
- const contributions = await dataLayer.getDonationsByDonorAddress({
- address,
- chainIds,
- });
-
- setState({
- type: "loaded",
- data: {
- chainIds: chainIds,
- data: contributions.map((contribution) => ({
- ...contribution,
- timestamp: dateToEthereumTimestamp(
- new Date(contribution.timestamp)
- ).toString(),
- })),
- },
- });
- };
-
- fetchContributions();
- }, [chainIds, dataLayer, rawAddress]);
-
- return state;
-};

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

@@ -14,18 +14,18 @@ export default function CopyToClipboardButton(props: CopyToClipboardType) {
  return (
  <Button
  type="button"
- className={`inline-flex bg-[#FFD9CD] text-black w-30 justify-center font-mono ${
- active && "animate-[peachTransition_20s_ease-in]"
- } ${props.styles}`}
+ className={`inline-flex text-black w-30 justify-center text-sm font-semibold bg-white border border-grey-100 ${props.styles}`}
  onClick={async () => {
  setActive(true);
  setTimeout(() => setActive(false), 1000);
 
  await navigator.clipboard.writeText(props.textToCopy);
  }}
  >
- <LinkIcon className={props.iconStyle} aria-hidden="true" />
- {active ? "Link Copied" : "Share Profile"}
+ <LinkIcon className={`mt-1 ${props.iconStyle}`} aria-hidden="true" />
+ <span className="ml-1">
+ {active ? "Link Copied" : "Share Profile"}
+ </span>
  </Button>
  );
 }

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

@@ -1,8 +1,8 @@
 export function StatCard(props: { title: string; value: string | undefined }) {
  return (
- <div className="rounded-2xl bg-[#F7F7F7] font-mono p-4">
+ <div className="rounded-2xl bg-[#F7F7F7] font-mono px-6 py-7">
  <div className="text-grey-400 text-4xl">{props.value}</div>
- <div className="font-bold text-md pb-4 mt-4">{props.title}</div>
+ <div className="font-bold text-md mt-6">{props.title}</div>
  </div>
  );
 }