Stats tweaks (#42)

packages/nextjs/app/_components/EcosystemGrants.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import ecosystemGrants from "~~/services/database/ecosystemGrants.json";
 
 const EcosystemGrantsCard = ({
   title,
@@ -16,7 +17,7 @@ const EcosystemGrantsCard = ({
   return (
     <div className="bg-base-100 rounded-2xl min-h-[380px] max-w-[370px] flex flex-col">
       <div className="h-56 w-full bg-gray-400/60 rounded-tl-2xl rounded-tr-2xl relative">
-        <Image src={imageLink} alt={title} layout="fill" className="rounded-tl-2xl rounded-tr-2xl" />
+        <Image src={imageLink} alt={title} fill={true} className="rounded-tl-2xl rounded-tr-2xl" />
         <p className="m-0 absolute bottom-4 left-4 text-2xl md:text-3xl lg:text-4xl font-ppEditorial">{title}</p>
       </div>
       <div className="flex-1 flex flex-col items-start justify-between space-y-4 p-4">
@@ -27,7 +28,7 @@ const EcosystemGrantsCard = ({
         <div className="flex justify-between items-baseline w-full">
           <div className="bg-primary rounded-lg py-1 px-2 text-xs font-bold">
             Amount:
-            <span className="text-sm"> {amountGranted}</span>
+            <span className="text-sm"> {amountGranted} ETH</span>
           </div>
           <a href={twitterLink} target="_blank" className="text-sm underline underline-offset-1">
             Twitter
@@ -48,30 +49,16 @@ export const EcosystemGrants = () => {
         </div>
 
         <div className="flex flex-col flex-wrap items-center md:flex-row md:justify-center md:items-stretch gap-8 px-4 lg:px-0">
-          {/* Jessy's Hacker House */}
-          <EcosystemGrantsCard
-            title="Jessy's Hacker House"
-            description=""
-            imageLink="/assets/jessy-hacker-house.png"
-            amountGranted="1 ETH"
-            twitterLink="https://twitter.com/wehack247"
-          />
-          {/* Solidty By Example */}
-          <EcosystemGrantsCard
-            title="Solidity By Example"
-            description=""
-            imageLink="/assets/solidity-by-example.png"
-            amountGranted="1 ETH"
-            twitterLink="https://twitter.com/ProgrammerSmart"
-          />
-          {/* Winter */}
-          <EcosystemGrantsCard
-            title="W1nt3r"
-            description="Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet."
-            imageLink="/assets/winter.png"
-            amountGranted="1 ETH"
-            twitterLink="https://x.com/w1nt3r_eth"
-          />
+          {ecosystemGrants.grants.map((grant, index) => (
+            <EcosystemGrantsCard
+              key={`${grant.name}_${index}`}
+              title={grant.name}
+              description={grant.description}
+              imageLink={grant.imgLink}
+              amountGranted={grant.amountGranted}
+              twitterLink={grant.twitterLink}
+            />
+          ))}
         </div>
       </div>
     </div>

packages/nextjs/app/_components/GrantsStats.tsx

@@ -1,40 +1,37 @@
 import Image from "next/image";
+import ecosystemGrants from "~~/services/database/ecosystemGrants.json";
 import { getGrantsStats } from "~~/services/database/grants";
 
+const Stat = ({ label, imgLink, value }: { label: string; imgLink: string; value: string | number }) => {
+  return (
+    <div className="flex flex-col gap-2 items-center">
+      <div className="flex gap-2 items-baseline">
+        <Image src={imgLink} alt={label} width={45} height={50} className="w-[30px] lg:w-[50px] lg:h-[50px] mt-1" />
+        <h2 className="text-4xl lg:text-6xl my-0 font-ppEditorial leading-[0.5rem] lg:leading-3">{value}</h2>
+      </div>
+      <p className="text-lg my-0">{label}</p>
+    </div>
+  );
+};
+
 export const GrantsStats = async () => {
   const stats = await getGrantsStats();
+
+  const sum = ecosystemGrants.grants.reduce(
+    (acc, grant) => acc + parseFloat(grant.amountGranted),
+    stats.total_eth_granted,
+  );
+  const totalEthGranted = Number.isInteger(sum) ? sum : sum.toFixed(2);
+
+  const totalGrants = ecosystemGrants.grants.length + stats.total_grants;
+
   return (
     <div className="bg-base-300">
       <div className="container flex flex-col items-center justify-center max-w-[90%] lg:max-w-7xl mx-auto py-12 lg:px-12 gap-6">
-        <div className="flex flex-col gap-8 md:flex-row justify-between items-start lg:w-4/5">
-          <div className="flex flex-col items-center">
-            <div className="flex gap-3 items-start">
-              <Image src="/assets/sparkle.png" alt="diamon icon" width={40} height={40} className="mt-1" />
-              <h2 className="text-4xl lg:text-6xl my-0 font-ppEditorial">{stats.total_completed_grants}</h2>
-            </div>
-            <p className="text-lg my-0">Total Grants</p>
-          </div>
-          <div className="flex flex-col items-center">
-            <div className="flex gap-3 items-start">
-              <Image src="/assets/sparkle.png" alt="diamon icon" width={40} height={40} className="mt-1" />
-              <h2 className="text-4xl lg:text-6xl my-0 font-ppEditorial">{stats.total_grants}</h2>
-            </div>
-            <p className="text-lg my-0">Submissions</p>
-          </div>
-          <div className="flex flex-col items-center">
-            <div className="flex gap-3 items-start">
-              <Image src="/assets/sparkle.png" alt="diamon icon" width={40} height={40} className="mt-1" />
-              <h2 className="text-4xl lg:text-6xl my-0 font-ppEditorial">{stats.total_eth_granted}</h2>
-            </div>
-            <p className="text-lg my-0">ETH Granted</p>
-          </div>
-          <div className="flex flex-col items-center">
-            <div className="flex gap-3 items-start">
-              <Image src="/assets/sparkle.png" alt="diamon icon" width={40} height={40} className="mt-1" />
-              <h2 className="text-4xl lg:text-6xl my-0 font-ppEditorial">{stats.total_active_grants}</h2>
-            </div>
-            <p className="text-lg my-0">Active Grants</p>
-          </div>
+        <div className="flex flex-col gap-8 md:flex-row justify-between items-start md:w-3/5 lg:w-4/5">
+          <Stat label="Total grants" imgLink="/assets/stats-total.png" value={totalGrants} />
+          <Stat label="ETH granted" imgLink="/assets/stats-eth-granted.png" value={totalEthGranted} />
+          <Stat label="Active grants" imgLink="/assets/stats-active.png" value={stats.total_active_grants} />
         </div>
       </div>
     </div>

packages/nextjs/services/database/ecosystemGrants.json

@@ -0,0 +1,25 @@
+{
+  "grants": [
+    {
+      "name": "Jessy's Hacker House",
+      "description": "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.Lorem ipsum dolor sit amet, qui minim labore adipisicing.",
+      "amountGranted": "14",
+      "twitterLink": "https://twitter.com/wehack247",
+      "imgLink": "/assets/jessy-hacker-house.png"
+    },
+    {
+      "name": "Solidity By Example",
+      "description": "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.Lorem ipsum dolor sit amet, qui minim labore adipisicing.",
+      "amountGranted": "1",
+      "twitterLink": "https://twitter.com/ProgrammerSmart",
+      "imgLink": "/assets/solidity-by-example.png"
+    },
+    {
+      "name": "W1nt3r",
+      "description": "Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.",
+      "amountGranted": "1",
+      "twitterLink": "https://x.com/w1nt3r_eth",
+      "imgLink": "/assets/winter.png"
+    }
+  ]
+}

packages/nextjs/services/database/grants.ts

@@ -99,25 +99,22 @@ export const reviewGrant = async (grantId: string, action: ProposalStatusType) =
 };
 
 export const getGrantsStats = async () => {
-  // Summation of askAmount for completed grants: total_eth_granted
-  // Total number of completed grants : total_completed_grants
-  // Total number of submitted grants all grants : total_submitted_grants
-  // Total number of Active grants (approved): total_active_grants
+  // total_eth_granted is the summation of askAmount of all completed grants
+  // total_active_grants is the count of grants with status "approved"
+  // total_grants is the summation of completed and active grants
   try {
-    const copmltedGrants = await getAllCompletedGrants();
-    const total_eth_granted = copmltedGrants.reduce((acc, grant) => acc + grant.askAmount, 0);
-    const total_completed_grants = copmltedGrants.length;
-
-    const allGrantsSnapshot = await grantsCollection.get();
-    const total_grants = allGrantsSnapshot.size;
+    const completedGrants = await getAllCompletedGrants();
+    const total_eth_granted = completedGrants.reduce((acc, grant) => acc + grant.askAmount, 0);
+    const total_completed_grants = completedGrants.length;
 
     const approvedGrantsSnapshot = await grantsCollection.where("status", "==", PROPOSAL_STATUS.APPROVED).get();
     const total_active_grants = approvedGrantsSnapshot.size;
 
+    const total_grants = total_completed_grants + total_active_grants;
+
     return {
       total_grants,
       total_eth_granted,
-      total_completed_grants,
       total_active_grants,
     };
   } catch (error) {