added a dynamic leaderboard which updates every 10 seconds

src/routes/leaderboard/TransactonInFeed.tsx

@@ -1,7 +1,7 @@
-// TopEarner.tsx
-import React from "react";
+// TransactionInFeed.tsx
+import React, { useState, useEffect } from "react";
 import { Box, HStack, Flex, Text } from "@chakra-ui/react";
-import { formatTimestamp, getUsername, rewardMessage } from "./helpers"; // Adjust the import path accordingly
+import { formatTimestamp, getUsername, rewardMessage } from "./helpers";
 import { ArrowIcon, UserIcon } from "@/components/icons";
 import { TransactionType } from "./types";
 
@@ -12,7 +12,59 @@ interface TransactionInFeedProps {
 
 export const TransactionInFeed: React.FC<TransactionInFeedProps> = React.memo(
   ({ tx, index }) => {
+    const [timeAgo, setTimeAgo] = useState<string | undefined>();
+
     const isClaim = tx.Claim !== undefined;
+
+    useEffect(() => {
+      let intervalId: NodeJS.Timeout | undefined;
+
+      const updateTimeAgo = () => {
+        const formattedTime = formatTimestamp(tx);
+        setTimeAgo(formattedTime);
+
+        // Check if the time difference is now >= 60 seconds
+        const timestamp = tx.Claim
+          ? tx.Claim.timestamp
+          : tx.Transfer?.timestamp;
+        if (!timestamp) return;
+
+        const timestampInMs = timestamp / 1e6;
+        const now = Date.now();
+        const diffMs = now - timestampInMs;
+        const diffSeconds = Math.floor(diffMs / 1000);
+
+        if (diffSeconds >= 60 && intervalId) {
+          clearInterval(intervalId);
+          intervalId = undefined;
+        }
+      };
+
+      updateTimeAgo(); // Initial call
+
+      // Set up interval if the transaction is less than 60 seconds old
+      const timestamp = tx.Claim ? tx.Claim.timestamp : tx.Transfer?.timestamp;
+      if (!timestamp) return;
+
+      const timestampInMs = timestamp / 1e6;
+      const now = Date.now();
+      const diffMs = now - timestampInMs;
+      const diffSeconds = Math.floor(diffMs / 1000);
+
+      if (diffSeconds < 60) {
+        intervalId = setInterval(updateTimeAgo, 1000);
+      } else {
+        setTimeAgo(formatTimestamp(tx)); // Set initial timeAgo for older transactions
+      }
+
+      // Clean up the interval when the component unmounts
+      return () => {
+        if (intervalId) {
+          clearInterval(intervalId);
+        }
+      };
+    }, [tx]);
+
     return (
       <Box
         key={index}
@@ -56,7 +108,7 @@ export const TransactionInFeed: React.FC<TransactionInFeedProps> = React.memo(
             </Text>
             <ArrowIcon color="white" width={20} />
             <Text fontWeight="700" color="brand.600">
-              {formatTimestamp(tx)}
+              {timeAgo}
             </Text>
           </HStack>
 

src/routes/leaderboard/helpers.ts

@@ -14,6 +14,7 @@ export const formatTimestamp = (
   if (!timestamp) return;
 
   const timestampInMs = timestamp / 1e6;
+
   return timeAgoShort(new Date(timestampInMs));
 };
 

src/routes/leaderboard/leaderboard.tsx

@@ -1,4 +1,3 @@
-// Leaderboard.tsx
 import { useState, useEffect } from "react";
 import { Box, VStack, Flex, Spinner } from "@chakra-ui/react";
 import eventHelperInstance from "@/lib/event";
@@ -14,6 +13,7 @@ export default function Leaderboard() {
   const [isErr, setIsErr] = useState(false);
 
   useEffect(() => {
+    // Function to fetch leaderboard data
     const fetchLeaderboardData = async () => {
       try {
         const data = await eventHelperInstance.viewCall({
@@ -34,7 +34,14 @@ export default function Leaderboard() {
       }
     };
 
+    // Initial fetch
     fetchLeaderboardData();
+
+    // Set up interval to refetch every 10 seconds
+    const intervalId = setInterval(fetchLeaderboardData, 10000); // 10000 ms = 10 seconds
+
+    // Cleanup function to clear the interval when the component is unmounted
+    return () => clearInterval(intervalId);
   }, []);
 
   if (isErr) {