add top donors list

package.json

@@ -108,6 +108,7 @@
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.59.9",
     "autoprefixer": "^10.4.7",
+    "axios": "^1.7.7",
     "eslint": "^8.43.0",
     "eslint-plugin-prettier": "^4.2.1",
     "next": "^14.2.12",

src/components/TopDonors.tsx

@@ -0,0 +1,67 @@
+import axios from "axios";
+import { ethers } from "ethers";
+import type React from "react";
+import { useEffect, useState } from "react";
+import { env } from "~/env.mjs";
+
+interface Donor {
+  address: string;
+  totalAmount: string;
+}
+
+const DONOR_WALLET = env.DONOR_WALLET
+const ETHERSCAN_API_KEY = env.ETHERSCAN_API_KEY
+
+export const TopDonors = () => {
+  const [topDonors, setTopDonors] = useState<Donor[]>([]);
+
+  useEffect(() => {
+    fetchTopDonors();
+  }, []);
+
+  const fetchTopDonors = async () => {
+    try {
+      const response = await axios.get(
+        `https://api.etherscan.io/api?module=account&action=txlist&address=${DONOR_WALLET}&startblock=0&endblock=99999999&sort=desc&apikey=${ETHERSCAN_API_KEY}`,
+      );
+
+      const transactions = response.data.result;
+
+      const donorMap = new Map<string, ethers.BigNumber>();
+
+      for (const tx of transactions) {
+        if (tx.to.toLowerCase() === DONOR_WALLET.toLowerCase()) {
+          const amount = ethers.BigNumber.from(tx.value);
+          const currentTotal = donorMap.get(tx.from) || ethers.BigNumber.from(0);
+          donorMap.set(tx.from, currentTotal.add(amount));
+        }
+      }
+
+      const sortedDonors = Array.from(donorMap.entries())
+        .sort((a, b) => (b[1].gt(a[1]) ? 1 : -1))
+        .slice(0, 5)
+        .map(([address, amount]) => ({
+          address,
+          totalAmount: ethers.utils.formatEther(amount),
+        }));
+
+      setTopDonors(sortedDonors);
+    } catch (error) {
+      console.error("Error fetching top donors:", error);
+    }
+  };
+
+  return (
+    <div className="bg-white shadow-md rounded-lg p-6">
+      <h2 className="text-2xl font-bold mb-4">Top 5 Donors</h2>
+      <ul>
+        {topDonors.map((donor, index) => (
+          <li key={donor.address} className="mb-2">
+            <span className="font-semibold">{index + 1}. </span>
+            {donor.address.slice(0, 6)}...{donor.address.slice(-4)}: {donor.totalAmount} ETH
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

src/env.mjs

@@ -7,6 +7,8 @@ const server = z.object({
   NODE_ENV: z.enum(["development", "test", "production"]),
   STORAGE_ACCESS_KEY: z.string(),
   STORAGE_SECRET_KEY: z.string(),
+  ETHERSCAN_API_KEY: z.string(),
+  DONOR_WALLET: z.string(),
 });
 
 /**
@@ -27,6 +29,8 @@ const processEnv = {
   NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
   STORAGE_ACCESS_KEY: process.env.STORAGE_ACCESS_KEY,
   STORAGE_SECRET_KEY: process.env.STORAGE_SECRET_KEY,
+  ETHERSCAN_API_KEY: process.env.ETHERSCAN_API_KEY,
+  DONOR_WALLET: process.env.DONOR_WALLET
 };
 
 const merged = server.merge(client);