added recent qmails in home

src/background.ts

@@ -1683,6 +1683,54 @@ async function sendChat({ qortAddress, recipientPublicKey, message }) {
   return _response;
 }
 
+export async function addEnteredQmailTimestampFunc() {
+  const wallet = await getSaveWallet();
+  const address = wallet.address0;
+  const key = `qmail-entered-timestamp-${address}`;
+  
+  return new Promise((resolve, reject) => {
+    chrome.storage.local.set({ [key]: Date.now() }, () => {
+      if (chrome.runtime.lastError) {
+        reject(new Error(chrome.runtime.lastError.message || "Error saving data"));
+      } else {
+        resolve(true);
+      }
+    });
+  });
+}
+
+// Function to retrieve the timestamp from Chrome's local storage
+export async function getEnteredQmailTimestampFunc() {
+  const wallet = await getSaveWallet();
+  const address = wallet.address0;
+  const key = `qmail-entered-timestamp-${address}`;
+  
+  return new Promise((resolve, reject) => {
+    chrome.storage.local.get([key], (result) => {
+      if (chrome.runtime.lastError) {
+        reject(new Error(chrome.runtime.lastError.message || "Error retrieving data"));
+      } else {
+        const timestamp = result[key];
+        resolve(timestamp || null);
+      }
+    });
+  });
+}
+
+ async function addEnteredQmailTimestamp() {
+
+    const response = await addEnteredQmailTimestampFunc();
+
+    return response
+}
+ async function getEnteredQmailTimestamp() {
+  
+    const response = await getEnteredQmailTimestampFunc();
+
+   return {timestamp: response}
+  
+}
+
 async function sendChatGroup({
   groupId,
   typeMessage,
@@ -4428,6 +4476,28 @@ chrome?.runtime?.onMessage.addListener((request, sender, sendResponse) => {
         break;
       }
 
+      case "addEnteredQmailTimestamp": {     
+        addEnteredQmailTimestamp()
+          .then((res) => {
+            sendResponse(res);
+          })
+          .catch((error) => {
+            sendResponse({ error: error?.message });
+          });
+
+        break;
+      }
+      case "getEnteredQmailTimestamp": {     
+        getEnteredQmailTimestamp()
+          .then((res) => {
+            sendResponse(res);
+          })
+          .catch((error) => {
+            sendResponse({ error: error?.message });
+          });
+
+        break;
+      }
       case "logout":
         {
           try {

src/components/Apps/useQortalMessageListener.tsx

@@ -424,6 +424,20 @@ isDOMContentLoaded: false
       event?.data?.action === 'QDN_RESOURCE_DISPLAYED'){
         const pathUrl = event?.data?.path != null ? (event?.data?.path.startsWith('/') ? '' : '/') + event?.data?.path : null
         setPath(pathUrl)
+        if(appName.toLowerCase() === 'q-mail'){
+          
+          chrome?.runtime?.sendMessage(
+            {
+              action: "addEnteredQmailTimestamp",
+              payload: {
+               
+              },
+            },
+            (response) => {
+             // response
+            }
+          );
+        }
       } else if(event?.data?.action === 'NAVIGATION_HISTORY'){
         if(event?.data?.payload?.isDOMContentLoaded){
           setHistory((prev)=> {

src/components/Chat/ChatGroup.tsx

@@ -370,7 +370,6 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
           }
       }
       socketRef.current.onerror = (e) => {
-        console.error('WebSocket error:', error);
         clearTimeout(groupSocketTimeoutRef.current);
         clearTimeout(timeoutIdRef.current);
         if (socketRef.current) {

src/components/Group/Home.tsx

@@ -84,6 +84,7 @@ export const Home = ({
             myAddress={myAddress}
             name={userInfo?.name}
             hasGroups={groups?.length !== 0}
+            userInfo={userInfo}
           />
           <ListOfThreadPostsWatched />
 

src/components/Group/HomeDesktop.tsx

@@ -80,6 +80,7 @@ export const HomeDesktop = ({
             myAddress={myAddress}
             name={userInfo?.name}
             hasGroups={groups?.length !== 0}
+            userInfo={userInfo}
           />
           </Box>
           <Box sx={{

src/components/Group/QMailMessages.tsx

@@ -0,0 +1,250 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import moment from 'moment'
+import { Box, Typography } from "@mui/material";
+import { Spacer } from "../../common/Spacer";
+import { getBaseApiReact, isMobile } from "../../App";
+import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
+import MailIcon from '@mui/icons-material/Mail';
+import MailOutlineIcon from '@mui/icons-material/MailOutline';
+import { executeEvent } from '../../utils/events';
+import { CustomLoader } from '../../common/CustomLoader';
+const isLessThanOneWeekOld = (timestamp) => {
+  // Current time in milliseconds
+  const now = Date.now();
+  
+  // One week ago in milliseconds (7 days * 24 hours * 60 minutes * 60 seconds * 1000 milliseconds)
+  const oneWeekAgo = now - (7 * 24 * 60 * 60 * 1000);
+  
+  // Check if the timestamp is newer than one week ago
+  return timestamp > oneWeekAgo;
+};
+export function formatEmailDate(timestamp: number) {
+    const date = moment(timestamp);
+    const now = moment();
+
+    if (date.isSame(now, 'day')) {
+        // If the email was received today, show the time
+        return date.format('h:mm A');
+    } else if (date.isSame(now, 'year')) {
+        // If the email was received this year, show the month and day
+        return date.format('MMM D');
+    } else {
+        // For older emails, show the full date
+        return date.format('MMM D, YYYY');
+    }
+}
+export const QMailMessages = ({userName, userAddress}) => {
+    const [mails, setMails] = useState([])
+    const [lastEnteredTimestamp, setLastEnteredTimestamp] = useState(null)
+    const [loading, setLoading] = useState(true)
+
+    console.log('lastEnteredTimestamp', lastEnteredTimestamp)
+    const getMails = useCallback(async () => {
+        try {
+          setLoading(true)
+            const query = `qortal_qmail_${userName.slice(
+                0,
+                20
+            )}_${userAddress.slice(-6)}_mail_`
+          const response = await fetch(`${getBaseApiReact()}/arbitrary/resources/search?service=MAIL_PRIVATE&query=${query}&limit=10&includemetadata=false&offset=0&reverse=true&excludeblocked=true&mode=ALL`);
+          const mailData = await response.json();
+  
+          
+          setMails(mailData);
+        } catch (error) {
+          console.error(error);
+        } finally {
+          setLoading(false)
+
+        }
+      }, [])
+
+      const getTimestamp = async () => {
+        try {
+          return new Promise((res, rej) => {
+            chrome?.runtime?.sendMessage(
+              {
+                action: "getEnteredQmailTimestamp",
+                payload: {},
+              },
+              (response) => {
+                if (!response?.error) {
+                  setLastEnteredTimestamp(response?.timestamp)
+                }
+              
+              }
+            );
+
+          });
+        } catch (error) {}
+      };
+    
+      useEffect(() => {
+        getTimestamp()
+            if(!userName || !userAddress) return
+          getMails();
+
+          const interval = setInterval(() => {
+            getTimestamp()
+            getMails();
+          }, 300000);
+      
+          return () => clearInterval(interval);
+         
+      }, [getMails, userName, userAddress]);
+
+    
+
+      console.log('mails', mails)
+  return (
+    <Box
+    sx={{
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+    }}
+  >
+      
+    <Box
+      sx={{
+        width: "322px",
+        display: "flex",
+        flexDirection: "column",
+        padding: "0px 20px",
+      }}
+    >
+      <Typography
+        sx={{
+          fontSize: "13px",
+          fontWeight: 600,
+        }}
+      >
+        Latest Q-Mails
+      </Typography>
+      <Spacer height="10px" />
+    </Box>
+
+    <Box
+      sx={{
+        width: "322px",
+        height: isMobile ? "165px" : "250px",
+        display: "flex",
+        flexDirection: "column",
+        bgcolor: "background.paper",
+        padding: "20px",
+        borderRadius: "19px",
+        overflow: 'auto'
+      }}
+    >
+       {loading && mails.length === 0 && (
+          <Box
+            sx={{
+              width: "100%",
+              display: "flex",
+              justifyContent: "center",
+            }}
+          >
+            <CustomLoader />
+          </Box>
+        )}
+        {!loading && mails.length === 0 && (
+          <Box
+            sx={{
+              width: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: 'center',
+              height: '100%',
+           
+            }}
+          >
+            <Typography
+              sx={{
+                fontSize: "11px",
+                fontWeight: 400,
+                color: 'rgba(255, 255, 255, 0.2)'
+              }}
+            >
+              Nothing to display
+            </Typography>
+          </Box>
+        )}
+   
+         <List sx={{ width: "100%", maxWidth: 360 }}>
+            {mails?.map((mail)=> {
+                return (
+                    <ListItem
+       
+                    disablePadding
+                    sx={{
+                      marginBottom: '20px'
+                    }}
+                    onClick={()=> {
+                        executeEvent("addTab", { data: { service: 'APP', name: 'q-mail' } });
+                        executeEvent("open-apps-mode", { });
+                    }}
+                  >
+                    <ListItemButton
+                      sx={{
+                        padding: "0px",
+                      }}
+                      disableRipple
+                      role={undefined}
+                      dense
+                    >
+                      <ListItemText
+                        sx={{
+                          "& .MuiTypography-root": {
+                            fontSize: "13px",
+                            fontWeight: 400,
+                          },
+                        }}
+                        primary={`From: ${mail?.name}`}
+                        secondary={`${formatEmailDate(mail?.created)}`}
+                      />
+                      <ListItemIcon
+                        sx={{
+                          justifyContent: "flex-end",
+                        }}
+                      >
+                        {!lastEnteredTimestamp && isLessThanOneWeekOld(mail?.created) ? (
+                          <MailIcon sx={{
+                            color: 'var(--unread)'
+                        }} />
+                        ) : !lastEnteredTimestamp ? (
+                          <MailOutlineIcon sx={{
+                            color: 'white'
+                        }} />
+                        ): lastEnteredTimestamp < mail?.created ? (
+                          <MailIcon sx={{
+                            color: 'var(--unread)'
+                        }} />
+                        ) :       (
+                          <MailOutlineIcon sx={{
+                            color: 'white'
+                        }} />
+                        )          
+                      }
+                       
+                       
+                     
+                      </ListItemIcon>
+                    </ListItemButton>
+                  </ListItem>
+                )
+            })}
+        
+       
+       </List>
+    
+     
+    </Box>
+  </Box>
+  )
+}

src/components/Group/ThingsToDoInitial.tsx

@@ -11,8 +11,9 @@ import InfoIcon from "@mui/icons-material/Info";
 import { Box, Typography } from "@mui/material";
 import { Spacer } from "../../common/Spacer";
 import { isMobile } from "../../App";
+import { QMailMessages } from "./QMailMessages";
 
-export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => {
+export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance, userInfo }) => {
   const [checked1, setChecked1] = React.useState(false);
   const [checked2, setChecked2] = React.useState(false);
   const [checked3, setChecked3] = React.useState(false);
@@ -47,6 +48,23 @@ export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => {
     if (name) setChecked2(true);
   }, [name]);
 
+
+  const isLoaded = React.useMemo(()=> {
+    if(balance !== null &&  userInfo !== null) return true
+  return false
+}, [balance, userInfo])
+
+const hasDoneNameAndBalanceAndIsLoaded = React.useMemo(()=> {
+  if(isLoaded && checked1 && checked2) return true
+return false
+}, [checked1, isLoaded, checked2])
+
+if(hasDoneNameAndBalanceAndIsLoaded){
+return (
+ <QMailMessages userAddress={userInfo?.address} userName={userInfo?.name} />
+);
+}
+
   return (
     <Box
       sx={{
@@ -70,7 +88,8 @@ export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => {
             fontWeight: 600,
           }}
         >
-          Getting Started:
+                           {!isLoaded ? 'Loading...' : 'Getting Started' }
+
         </Typography>
         <Spacer height="10px" />
       </Box>