Display recent activities

Author: danitome24

packages/nextjs/app/data/mockData.ts

@@ -1,14 +1,13 @@
 "use client";
 
-import { mockTasksHistory } from "./data/mockData";
 import type { NextPage } from "next";
 import { ChildDashboard, ParentDashboard, SectionGrow } from "~~/components/kiddo-perks/";
 import { useIsParent } from "~~/hooks/kiddo-perks";
 
 const Home: NextPage = () => {
   const isParent = useIsParent();
 
-  const dashboardToDisplay = isParent ? <ParentDashboard activities={mockTasksHistory} /> : <ChildDashboard />;
+  const dashboardToDisplay = isParent ? <ParentDashboard /> : <ChildDashboard />;
 
   if (isParent === undefined) {
     return (

packages/nextjs/app/page.tsx

@@ -1,11 +1,6 @@
 import { ChildrenSummary, ContentHeader, PerksSummary, RecentActivitySummary } from "./";
-import { Activity } from "~~/types/kiddoPerks";
 
-type DashboardProps = {
-  activities: Activity[];
-};
-
-export const ParentDashboard = ({ activities }: DashboardProps) => {
+export const ParentDashboard = () => {
   return (
     <div className="px-8 py-16">
       <ContentHeader
@@ -18,7 +13,7 @@ export const ParentDashboard = ({ activities }: DashboardProps) => {
         <PerksSummary />
       </div>
 
-      <RecentActivitySummary activities={activities} />
+      <RecentActivitySummary />
     </div>
   );
 };

packages/nextjs/components/kiddo-perks/ParentDashboard.tsx

@@ -1,11 +1,57 @@
+import { useEffect, useState } from "react";
 import Image from "next/image";
+import { useChildManager, usePerksManager } from "~~/hooks/kiddo-perks";
+import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
 import { Activity } from "~~/types/kiddoPerks";
 
-type RecentActivitySummaryProps = {
-  activities: Activity[];
-};
+export const RecentActivitySummary = () => {
+  const [activities, setActivities] = useState<Activity[]>([]);
+
+  const { perks } = usePerksManager();
+  const { children } = useChildManager();
+
+  const { data: perkRedeemedEvents } = useScaffoldEventHistory({
+    contractName: "KiddoPerks",
+    eventName: "PerkRedeemed",
+    fromBlock: 0n,
+    watch: true,
+    blockData: true,
+    transactionData: true,
+    receiptData: true,
+  });
+
+  const { data: tokenMintedEvents } = useScaffoldEventHistory({
+    contractName: "KiddoPerks",
+    eventName: "TaskCompleted",
+    fromBlock: 0n,
+    watch: true,
+    blockData: true,
+    transactionData: true,
+    receiptData: true,
+  });
+
+  useEffect(() => {
+    const perkRedeemedActivities = (perkRedeemedEvents || []).map(event => ({
+      id: event.transaction?.transactionHash,
+      title: `Perk ${perks.find(perk => perk.id === Number(event.args.perkId))?.title} redeemed by ${
+        children.find(child => child.address === event.args.by)?.name
+      }`,
+      // @ts-ignore
+      blockNumber: Number(event.blockNumber),
+    }));
+
+    const tokenMintedActivities = (tokenMintedEvents || []).map(event => ({
+      id: event.transaction?.transactionHash, // Si tienes un identificador único en el evento, úsalo aquí
+      title: `Task ${event.args.title} was completed by ${
+        children.find(child => child.address === event.args.by)?.name
+      }`,
+      // @ts-ignore
+      blockNumber: Number(event.blockNumber),
+    }));
+
+    setActivities([...perkRedeemedActivities, ...tokenMintedActivities].sort((a, b) => a.blockNumber + b.blockNumber));
+  }, [perkRedeemedEvents, tokenMintedEvents]);
 
-export const RecentActivitySummary = ({ activities }: RecentActivitySummaryProps) => {
   return (
     <section className="mt-6">
       <h2 className="text-lg font-semibold mb-4">Recent Activity Summary</h2>
@@ -22,7 +68,7 @@ export const RecentActivitySummary = ({ activities }: RecentActivitySummaryProps
 
             <div className="ml-4">
               <p className="text-sm ">{activity.title}</p>
-              <p className="text-xs mt-1">2 hours ago</p>
+              <p>{activity.blockNumber}</p>
             </div>
           </li>
         ))}

packages/nextjs/components/kiddo-perks/ParentDashboard/RecentActivitySummary.tsx

@@ -23,8 +23,10 @@ export type Task = {
 };
 
 export type Activity = {
-  id: number;
+  id: string;
   title: string;
+  blockNumber: number;
+  // timestamp: string;
 };
 
 export type CompletedTaskEvent = {