update

src/components/LatestTransactions/LatestTransactions.jsx

@@ -26,7 +26,8 @@ import {
 import rbtLogoOutline from "../../assets/images/rubix-filled.svg";
 import { HiOutlineRefresh } from "react-icons/hi";
 
-export const rotate = keyframes`
+// Define the keyframes
+const rotate = keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -48,6 +49,9 @@ const LatestTransactions = () => {
   const [currentPage, setCurrentPage] = useState(1); // Tracks the current page
   const [pageSize, setPageSize] = useState(10); // Number of items per page
   const [totalItems, setTotalItems] = useState(null); // Total items in the dataset
+  const [lastRefreshedTime, setLastRefreshedTime] = useState(new Date()); // Store the last refresh time
+  const [relativeRefreshTime, setRelativeRefreshTime] = useState("Just now"); 
+
 
   const {
     data: transCount,
@@ -95,13 +99,36 @@ const LatestTransactions = () => {
       });
   }
 
-
   const handleRefreshClick = () => {
     setIsRotating(true); // Start rotation
-    // Simulate any refresh logic here
+    transAllRefetch();
     setTimeout(() => {
-      setIsRotating(false); // Stop rotation after 3 seconds
-    }, 3000); // 3 seconds = 3000ms
+      setIsRotating(false); // Stop rotation after 500ms
+    }, 500);
+    setLastRefreshedTime(new Date()); // Set the new refresh time
+    setRelativeRefreshTime("Just now"); // Reset relative time to "Just now"
+  };
+
+  useEffect(() => {
+    // Update relative time every minute
+    const intervalId = setInterval(() => {
+      updateRelativeTime();
+    }, 60000); // 60 seconds = 60000ms
+
+    return () => clearInterval(intervalId); // Cleanup the interval on unmount
+  }, [lastRefreshedTime]);
+
+  const updateRelativeTime = () => {
+    const now = new Date();
+    const timeDiff = Math.floor((now - lastRefreshedTime) / 60000); // Difference in minutes
+
+    if (timeDiff < 1) {
+      setRelativeRefreshTime("Just now");
+    } else if (timeDiff === 1) {
+      setRelativeRefreshTime("1 minute ago");
+    } else {
+      setRelativeRefreshTime(`${timeDiff} minutes ago`);
+    }
   };
   return (
     <Container
@@ -127,21 +154,27 @@ const LatestTransactions = () => {
         <Box
           as="span"
           cursor={"pointer"}
-          bg={"#434147"}
           position={"absolute"}
           right={0}
-          rounded={"md"}
           m={1.5}
-          p={1.5}
-
-        onClick={handleRefreshClick} // Trigger the rotation when clicked
+          display={'flex'}
+          alignItems={'center'}
+          gap={2}
+          onClick={handleRefreshClick} // Trigger the rotation when clicked
         >
-          <HiOutlineRefresh
-          style={{
-            animation: true
-              ? `${rotate} 1s linear infinite` // Apply the rotation animation
-              : "none",
-          }}
+          <Text as={'span'} fontSize={'xs'} color={colorMode==="light"?'#fff':"#7B7B7B"}>Last refresh {relativeRefreshTime} </Text>
+          <Icon
+
+bg={colorMode==="light"?'#fff':"#434147"}
+p={1.5}
+boxSize={7}
+rounded={"full"}
+            as={HiOutlineRefresh}
+            animation={
+              isRotating || isTransAllLoading
+                ? `${rotate} 1s linear infinite`
+                : "none"
+            }
           />
         </Box>
       </Grid>
@@ -352,7 +385,7 @@ const LatestTransactions = () => {
                       alignItems={"center"}
                       color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                     >
-                      <Image src={rbtLogoOutline} />
+                      <Image w={4} src={rbtLogoOutline} />
                       {amount}
                     </Text>
                   </Box>