mobile friendly

public/content-script.js

@@ -23,7 +23,7 @@ document.addEventListener('qortalExtensionRequests', async (event) => {
       }));
       return
     }
-    chrome.runtime.sendMessage({ action: "userInfo" }, (response) => {
+    chrome?.runtime?.sendMessage({ action: "userInfo" }, (response) => {
       if (response.error) {
         document.dispatchEvent(new CustomEvent('qortalExtensionResponses', {
           detail: { type: "USER_INFO", data: {
@@ -38,7 +38,7 @@ document.addEventListener('qortalExtensionRequests', async (event) => {
       }
     });
   } else if (type === 'REQUEST_IS_INSTALLED') {
-    chrome.runtime.sendMessage({ action: "version" }, (response) => {
+    chrome?.runtime?.sendMessage({ action: "version" }, (response) => {
       if (response.error) {
         console.error("Error:", response.error);
       } else {
@@ -51,7 +51,7 @@ document.addEventListener('qortalExtensionRequests', async (event) => {
   } else if (type === 'REQUEST_CONNECTION') {
     console.log('REQUEST_CONNECTION')
     const hostname = window.location.hostname
-    chrome.runtime.sendMessage({ action: "connection", payload: {
+    chrome?.runtime?.sendMessage({ action: "connection", payload: {
       hostname
     }, timeout }, (response) => {
       if (response.error) {
@@ -75,7 +75,7 @@ document.addEventListener('qortalExtensionRequests', async (event) => {
       return
     }
 
-    chrome.runtime.sendMessage({ action: "oauth", payload: {
+    chrome?.runtime?.sendMessage({ action: "oauth", payload: {
       nodeBaseUrl: payload.nodeBaseUrl,
       senderAddress: payload.senderAddress,
       senderPublicKey: payload.senderPublicKey, timestamp: payload.timestamp
@@ -105,7 +105,7 @@ document.addEventListener('qortalExtensionRequests', async (event) => {
       return
     }
 
-    chrome.runtime.sendMessage({ action: "buyOrder", payload: {
+    chrome?.runtime?.sendMessage({ action: "buyOrder", payload: {
       qortalAtAddress: payload.qortalAtAddress,
       hostname
       
@@ -136,7 +136,7 @@ document.addEventListener('qortalExtensionRequests', async (event) => {
       }));
       return
     }
-    chrome.runtime.sendMessage({ action: "ltcBalance", payload: {
+    chrome?.runtime?.sendMessage({ action: "ltcBalance", payload: {
       hostname
     },  timeout }, (response) => {
       
@@ -164,7 +164,7 @@ document.addEventListener('qortalExtensionRequests', async (event) => {
       }));
       return
     }
-    chrome.runtime.sendMessage({ action: "authentication", payload: {
+    chrome?.runtime?.sendMessage({ action: "authentication", payload: {
       hostname
     },  timeout }, (response) => {
       if (response.error) {
@@ -191,7 +191,7 @@ document.addEventListener('qortalExtensionRequests', async (event) => {
       }));
       return
     }
-    chrome.runtime.sendMessage({ action: "sendQort", payload: {
+    chrome?.runtime?.sendMessage({ action: "sendQort", payload: {
       hostname,
       amount: payload.amount,
       description: payload.description,
@@ -221,7 +221,7 @@ document.addEventListener('qortalExtensionRequests', async (event) => {
       }));
       return
     }
-    chrome.runtime.sendMessage({ action: "closePopup" }, (response) => {
+    chrome?.runtime?.sendMessage({ action: "closePopup" }, (response) => {
       if (response.error) {
         
         document.dispatchEvent(new CustomEvent('qortalExtensionResponses', {
@@ -241,7 +241,7 @@ document.addEventListener('qortalExtensionRequests', async (event) => {
 });
 
 
-chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
+chrome.runtime?.onMessage.addListener(function(message, sender, sendResponse) {
   if (message.type === "LOGOUT") {
       // Notify the web page
       window.postMessage({

src/App.tsx

@@ -41,6 +41,8 @@ import Logout from "./assets/svgs/Logout.svg";
 import Return from "./assets/svgs/Return.svg";
 import Success from "./assets/svgs/Success.svg";
 import Info from "./assets/svgs/Info.svg";
+import CloseIcon from '@mui/icons-material/Close';
+
 import {
   createAccount,
   generateRandomSentence,
@@ -83,6 +85,7 @@ import {
 import { executeEvent } from "./utils/events";
 import { requestQueueCommentCount, requestQueuePublishedAccouncements } from "./components/Chat/GroupAnnouncements";
 import { requestQueueGroupJoinRequests } from "./components/Group/GroupJoinRequests";
+import { DrawerComponent } from "./components/Drawer/Drawer";
 
 type extStates =
   | "not-authenticated"
@@ -126,6 +129,28 @@ const defaultValues: MyContextInterface = {
     message: "",
   },
 };
+export let isMobile = false
+
+const isMobileDevice = () => {
+  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+  
+  if (/android/i.test(userAgent)) {
+    return true; // Android device
+  }
+
+  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+    return true; // iOS device
+  }
+
+  return false;
+};
+
+if (isMobileDevice()) {
+  isMobile = true
+  console.log("Running on a mobile device");
+} else {
+  console.log("Running on a desktop");
+}
 
 export const allQueues = {
   requestQueueCommentCount: requestQueueCommentCount,
@@ -160,7 +185,7 @@ export const clearAllQueues = () => {
 
 export const pauseAllQueues = () => {
   controlAllQueues('pause');
-  chrome.runtime.sendMessage(
+  chrome?.runtime?.sendMessage(
     {
       action: "pauseAllQueues",
       payload: {
@@ -171,7 +196,7 @@ export const pauseAllQueues = () => {
 } 
 export const resumeAllQueues = () => {
   controlAllQueues('resume');
-  chrome.runtime.sendMessage(
+  chrome?.runtime?.sendMessage(
     {
       action: "resumeAllQueues",
       payload: {
@@ -266,11 +291,33 @@ function App() {
   const [openAdvancedSettings, setOpenAdvancedSettings] = useState(false);
   const [useLocalNode, setUseLocalNode] = useState(false);
   const [confirmUseOfLocal, setConfirmUseOfLocal] = useState(false);
-
+  const [isOpenDrawerProfile, setIsOpenDrawerProfile] = useState(false);
   const [apiKey, setApiKey] = useState("");
 
   useEffect(() => {
-    chrome.runtime.sendMessage({ action: "getApiKey" }, (response) => {
+    if(!isMobile) return
+    // Function to set the height of the app to the viewport height
+    const resetHeight = () => {
+      const height = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+      // Set the height to the root element (usually #root)
+      document.getElementById('root').style.height = height + "px";
+    };
+
+    // Set the initial height
+    resetHeight();
+
+    // Add event listeners for resize and visualViewport changes
+    window.addEventListener('resize', resetHeight);
+    window.visualViewport?.addEventListener('resize', resetHeight);
+
+    // Clean up the event listeners when the component unmounts
+    return () => {
+      window.removeEventListener('resize', resetHeight);
+      window.visualViewport?.removeEventListener('resize', resetHeight);
+    };
+  }, []);
+  useEffect(() => {
+    chrome?.runtime?.sendMessage({ action: "getApiKey" }, (response) => {
       if (response) {
        
         globalApiKey = response;
@@ -405,7 +452,7 @@ function App() {
   };
 
   const storeWalletInfo = (wallet: any) => {
-    chrome.runtime.sendMessage(
+    chrome?.runtime?.sendMessage(
       { action: "storeWalletInfo", wallet },
       (response) => {
         if (response) {
@@ -427,7 +474,7 @@ function App() {
 
   const getBalanceFunc = () => {
     setQortBalanceLoading(true);
-    chrome.runtime.sendMessage({ action: "balance" }, (response) => {
+    chrome?.runtime?.sendMessage({ action: "balance" }, (response) => {
       if (!response?.error && !isNaN(+response)) {
         setBalance(response);
       }
@@ -436,7 +483,7 @@ function App() {
   };
   const getLtcBalanceFunc = () => {
     setLtcBalanceLoading(true);
-    chrome.runtime.sendMessage({ action: "ltcBalance" }, (response) => {
+    chrome?.runtime?.sendMessage({ action: "ltcBalance" }, (response) => {
       if (!response?.error && !isNaN(+response)) {
         setLtcBalance(response);
       }
@@ -459,7 +506,7 @@ function App() {
       return;
     }
     setIsLoading(true);
-    chrome.runtime.sendMessage(
+    chrome?.runtime?.sendMessage(
       {
         action: "sendCoin",
         payload: {
@@ -487,7 +534,7 @@ function App() {
 
   useEffect(() => {
     // Listen for messages from the background script
-    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    chrome.runtime?.onMessage.addListener((message, sender, sendResponse) => {
       // Check if the message is to update the state
       if (
         message.action === "UPDATE_STATE_CONFIRM_SEND_QORT" &&
@@ -563,7 +610,7 @@ function App() {
   //param = isDecline
   const confirmPayment = (isDecline: boolean) => {
     if (isDecline) {
-      chrome.runtime.sendMessage(
+      chrome?.runtime?.sendMessage(
         {
           action: "sendQortConfirmation",
           payload: {
@@ -586,7 +633,7 @@ function App() {
     }
 
     setIsLoading(true);
-    chrome.runtime.sendMessage(
+    chrome?.runtime?.sendMessage(
       {
         action: "sendQortConfirmation",
         payload: {
@@ -613,7 +660,7 @@ function App() {
 
   const confirmBuyOrder = (isDecline: boolean) => {
     if (isDecline) {
-      chrome.runtime.sendMessage(
+      chrome?.runtime?.sendMessage(
         {
           action: "buyOrderConfirmation",
           payload: {
@@ -630,7 +677,7 @@ function App() {
     }
 
     setIsLoading(true);
-    chrome.runtime.sendMessage(
+    chrome?.runtime?.sendMessage(
       {
         action: "buyOrderConfirmation",
         payload: {
@@ -657,7 +704,7 @@ function App() {
     hostname: string,
     interactionId: string
   ) => {
-    chrome.runtime.sendMessage(
+    chrome?.runtime?.sendMessage(
       {
         action: "responseToConnectionRequest",
         payload: { isOkay, hostname, interactionId },
@@ -679,7 +726,7 @@ function App() {
   useEffect(() => {
     try {
       setIsLoading(true);
-      chrome.runtime.sendMessage({ action: "getWalletInfo" }, (response) => {
+      chrome?.runtime?.sendMessage({ action: "getWalletInfo" }, (response) => {
         if (response && response?.walletInfo) {
           setRawWallet(response?.walletInfo);
           if (
@@ -708,7 +755,7 @@ function App() {
           }, 10000);
         });
       }
-      chrome.runtime.sendMessage({ action: "userInfo" }, (response) => {
+      chrome?.runtime?.sendMessage({ action: "userInfo" }, (response) => {
         if (response && !response.error) {
           setUserInfo(response);
         }
@@ -799,7 +846,7 @@ function App() {
         crypto.kdfThreads,
         () => {}
       );
-      chrome.runtime.sendMessage(
+      chrome?.runtime?.sendMessage(
         {
           action: "decryptWallet",
           payload: {
@@ -814,7 +861,7 @@ function App() {
               wallet,
               qortAddress: wallet.address0,
             });
-            chrome.runtime.sendMessage({ action: "userInfo" }, (response2) => {
+            chrome?.runtime?.sendMessage({ action: "userInfo" }, (response2) => {
               setIsLoading(false);
               if (response2 && !response2.error) {
                 setUserInfo(response);
@@ -835,7 +882,7 @@ function App() {
 
   const logoutFunc = () => {
     try {
-      chrome.runtime.sendMessage({ action: "logout" }, (response) => {
+      chrome?.runtime?.sendMessage({ action: "logout" }, (response) => {
         if (response) {
           resetAllStates();
           executeEvent("logout-event", {});
@@ -898,7 +945,7 @@ function App() {
           res();
         }, 250);
       });
-      chrome.runtime.sendMessage(
+      chrome?.runtime?.sendMessage(
         {
           action: "decryptWallet",
           payload: {
@@ -911,14 +958,14 @@ function App() {
             setAuthenticatePassword("");
             setExtstate("authenticated");
             setWalletToBeDecryptedError("");
-            chrome.runtime.sendMessage({ action: "userInfo" }, (response) => {
+            chrome?.runtime?.sendMessage({ action: "userInfo" }, (response) => {
               setIsLoading(false);
               if (response && !response.error) {
                 setUserInfo(response);
               }
             });
             getBalanceFunc();
-            chrome.runtime.sendMessage(
+            chrome?.runtime?.sendMessage(
               { action: "getWalletInfo" },
               (response) => {
                 if (response && response?.walletInfo) {
@@ -1023,7 +1070,7 @@ function App() {
       });
       setIsLoadingRegisterName(true);
       new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "registerName",
             payload: {
@@ -1076,225 +1123,22 @@ function App() {
     }
   };
 
+  const renderProfile = ()=> {
     return (
-    <AppContainer>
+      <AuthenticatedContainer sx={{ width:"350px", display:  'flex' }}>
-      {/* {extState === 'group' && (
+      {isMobile && (
-        <Group myAddress={userInfo?.address} />
+             <Box sx={{
-      )} */}
+              padding: '10px',
-
+              display: 'flex',
-      {extState === "not-authenticated" && (
+              justifyContent: 'flex-end'
-        <>
+          }}><CloseIcon onClick={()=> {
-          <Spacer height="48px" />
+              setIsOpenDrawerProfile(false)
-          <div
+          }} sx={{
-            className="image-container"
-            style={{
-              width: "136px",
-              height: "154px",
-            }}
-          >
-            <img src={Logo1} className="base-image" />
-            <img src={Logo1Dark} className="hover-image" />
-          </div>
-          <Spacer height="38px" />
-          <TextP
-            sx={{
-              textAlign: "center",
-              lineHeight: "15px",
-            }}
-          >
-            WELCOME TO <TextItalic>YOUR</TextItalic> <br></br>
-            <TextSpan> QORTAL WALLET</TextSpan>
-          </TextP>
-          <Spacer height="38px" />
-          <Box
-            sx={{
-              display: "flex",
-              gap: "10px",
-              alignItems: "center",
-              marginLeft: "28px",
-            }}
-          >
-            <CustomButton {...getRootProps()}>
-              <input {...getInputProps()} />
-              Authenticate
-            </CustomButton>
-            <Tooltip
-              title="Authenticate by importing your Qortal JSON file"
-              arrow
-            >
-              <img src={Info} />
-            </Tooltip>
-          </Box>
-
-          <Spacer height="6px" />
-          <Box
-            sx={{
-              display: "flex",
-              gap: "10px",
-              alignItems: "center",
-              marginLeft: "28px",
-            }}
-          >
-            <CustomButton
-              onClick={() => {
-                setExtstate("create-wallet");
-              }}
-            >
-              Create account
-            </CustomButton>
-
-            <img
-              src={Info}
-              style={{
-                visibility: "hidden",
-              }}
-            />
-          </Box>
-          {hasLocalNode && (
-            <>
-              <Spacer height="15px" />
-              <Box
-                sx={{
-                  display: "flex",
-                  gap: "10px",
-                  alignItems: "center",
-                  flexDirection: "column",
-                }}
-              >
-                
-                  <Typography
-                  sx={{
               cursor: 'pointer',
-                    fontSize: '14px'
+              color: 'white'
-                  }}
+          }} /></Box>
-                    onClick={() => {
-                      setOpenAdvancedSettings(true);
-                    }}
-                  >
-                    Advanced settings
-                  </Typography>
-             
-                {openAdvancedSettings && (
-                  <>
-                  <Box
-                sx={{
-                  display: "flex",
-                  gap: "10px",
-                  alignItems: "center",
-                  justifyContent: 'center',
-                  width: '100%'
-                }}
-              >
-                    <Checkbox
-                      edge="start"
-                      checked={useLocalNode}
-                      tabIndex={-1}
-                      disableRipple
-                      onChange={(event) => {
-                        setUseLocalNode(event.target.checked);
-                      }}
-                      disabled={confirmUseOfLocal}
-                      sx={{
-                        "&.Mui-checked": {
-                          color: "white", // Customize the color when checked
-                        },
-                        "& .MuiSvgIcon-root": {
-                          color: "white",
-                        },
-                      }}
-                    />
-
-                    <Typography>Use local node</Typography>
-                    </Box>
-                    {useLocalNode && (
-                      <>
-                        <Button disabled={confirmUseOfLocal} variant="contained" component="label">
-                          Select apiKey.txt
-                          <input
-                            type="file"
-                            accept=".txt"
-                            hidden
-                            onChange={handleFileChangeApiKey} // File input handler
-                          />
-                        </Button>
-                        <Spacer height="5px" />
-                        <Typography
-                          sx={{
-                            fontSize: "12px",
-                          }}
-                        >
-                          {apiKey}
-                        </Typography>
-                        <Spacer height="5px" />
-                        <Button
-                          onClick={() => {
-                            const valueToSet = !confirmUseOfLocal
-                            const payload = valueToSet ? apiKey : null
-                            chrome.runtime.sendMessage(
-                              { action: "setApiKey", payload },
-                              (response) => {
-                                if (response) {
-                                  globalApiKey = payload;
-                               
-                                  setConfirmUseOfLocal(valueToSet)
-                                  if(!globalApiKey){
-                                    setUseLocalNode(false)
-                                    setOpenAdvancedSettings(false)
-                                    setApiKey('')
-                                  }
-                                }
-                              }
-                            );
-                          }}
-                          variant="contained"
-                          sx={{
-                            color: "white",
-                          }}
-                        >
-                          {!confirmUseOfLocal ? 'Confirm use of local node' : 'Switch back to gateway'}
-                          
-                        </Button>
-                      </>
         )}
-                  </>
+          
-                )}
-              </Box>
-            </>
-          )}
-        </>
-      )}
-      {/* {extState !== "not-authenticated" && (
-        <button onClick={logoutFunc}>logout</button>
-      )} */}
-      {extState === "authenticated" && isMainWindow && (
-        <MyContext.Provider
-          value={{
-            txList,
-            setTxList,
-            memberGroups,
-            setMemberGroups,
-            isShow,
-            onCancel,
-            onOk,
-            show,
-            message,
-          }}
-        >
-          <Box
-            sx={{
-              width: "100vw",
-              height: "100vh",
-              display: "flex",
-            }}
-          >
-            <Group
-              balance={balance}
-              userInfo={userInfo}
-              myAddress={userInfo?.address}
-              isFocused={isFocused}
-              isMain={isMain}
-            />
-            <AuthenticatedContainer sx={{ width: "350px" }}>
       <AuthenticatedContainerInnerLeft>
       <Spacer height="48px" />
 
@@ -1490,6 +1334,234 @@ function App() {
       )}
     </AuthenticatedContainerInnerRight>
     </AuthenticatedContainer>
+    )
+  }
+
+  return (
+    <AppContainer sx={{
+      height: isMobile ? '100%' : '100vh'
+    }}>
+      {/* {extState === 'group' && (
+        <Group myAddress={userInfo?.address} />
+      )} */}
+
+      {extState === "not-authenticated" && (
+        <>
+          <Spacer height="48px" />
+          <div
+            className="image-container"
+            style={{
+              width: "136px",
+              height: "154px",
+            }}
+          >
+            <img src={Logo1} className="base-image" />
+            <img src={Logo1Dark} className="hover-image" />
+          </div>
+          <Spacer height="38px" />
+          <TextP
+            sx={{
+              textAlign: "center",
+              lineHeight: "15px",
+            }}
+          >
+            WELCOME TO <TextItalic>YOUR</TextItalic> <br></br>
+            <TextSpan> QORTAL WALLET</TextSpan>
+          </TextP>
+          <Spacer height="38px" />
+          <Box
+            sx={{
+              display: "flex",
+              gap: "10px",
+              alignItems: "center",
+              marginLeft: "28px",
+            }}
+          >
+            <CustomButton {...getRootProps()}>
+              <input {...getInputProps()} />
+              Authenticate
+            </CustomButton>
+            <Tooltip
+              title="Authenticate by importing your Qortal JSON file"
+              arrow
+            >
+              <img src={Info} />
+            </Tooltip>
+          </Box>
+
+          <Spacer height="6px" />
+          <Box
+            sx={{
+              display: "flex",
+              gap: "10px",
+              alignItems: "center",
+              marginLeft: "28px",
+            }}
+          >
+            <CustomButton
+              onClick={() => {
+                setExtstate("create-wallet");
+              }}
+            >
+              Create account
+            </CustomButton>
+
+            <img
+              src={Info}
+              style={{
+                visibility: "hidden",
+              }}
+            />
+          </Box>
+          {hasLocalNode && (
+            <>
+              <Spacer height="15px" />
+              <Box
+                sx={{
+                  display: "flex",
+                  gap: "10px",
+                  alignItems: "center",
+                  flexDirection: "column",
+                }}
+              >
+                
+                  <Typography
+                  sx={{
+                    cursor: 'pointer',
+                    fontSize: '14px'
+                  }}
+                    onClick={() => {
+                      setOpenAdvancedSettings(true);
+                    }}
+                  >
+                    Advanced settings
+                  </Typography>
+             
+                {openAdvancedSettings && (
+                  <>
+                  <Box
+                sx={{
+                  display: "flex",
+                  gap: "10px",
+                  alignItems: "center",
+                  justifyContent: 'center',
+                  width: '100%'
+                }}
+              >
+                    <Checkbox
+                      edge="start"
+                      checked={useLocalNode}
+                      tabIndex={-1}
+                      disableRipple
+                      onChange={(event) => {
+                        setUseLocalNode(event.target.checked);
+                      }}
+                      disabled={confirmUseOfLocal}
+                      sx={{
+                        "&.Mui-checked": {
+                          color: "white", // Customize the color when checked
+                        },
+                        "& .MuiSvgIcon-root": {
+                          color: "white",
+                        },
+                      }}
+                    />
+
+                    <Typography>Use local node</Typography>
+                    </Box>
+                    {useLocalNode && (
+                      <>
+                        <Button disabled={confirmUseOfLocal} variant="contained" component="label">
+                          Select apiKey.txt
+                          <input
+                            type="file"
+                            accept=".txt"
+                            hidden
+                            onChange={handleFileChangeApiKey} // File input handler
+                          />
+                        </Button>
+                        <Spacer height="5px" />
+                        <Typography
+                          sx={{
+                            fontSize: "12px",
+                          }}
+                        >
+                          {apiKey}
+                        </Typography>
+                        <Spacer height="5px" />
+                        <Button
+                          onClick={() => {
+                            const valueToSet = !confirmUseOfLocal
+                            const payload = valueToSet ? apiKey : null
+                            chrome?.runtime?.sendMessage(
+                              { action: "setApiKey", payload },
+                              (response) => {
+                                if (response) {
+                                  globalApiKey = payload;
+                               
+                                  setConfirmUseOfLocal(valueToSet)
+                                  if(!globalApiKey){
+                                    setUseLocalNode(false)
+                                    setOpenAdvancedSettings(false)
+                                    setApiKey('')
+                                  }
+                                }
+                              }
+                            );
+                          }}
+                          variant="contained"
+                          sx={{
+                            color: "white",
+                          }}
+                        >
+                          {!confirmUseOfLocal ? 'Confirm use of local node' : 'Switch back to gateway'}
+                          
+                        </Button>
+                      </>
+                    )}
+                  </>
+                )}
+              </Box>
+            </>
+          )}
+        </>
+      )}
+      {/* {extState !== "not-authenticated" && (
+        <button onClick={logoutFunc}>logout</button>
+      )} */}
+      {extState === "authenticated"  && (
+        <MyContext.Provider
+          value={{
+            txList,
+            setTxList,
+            memberGroups,
+            setMemberGroups,
+            isShow,
+            onCancel,
+            onOk,
+            show,
+            message,
+          }}
+        >
+          <Box
+            sx={{
+              width: "100vw",
+              height: isMobile ? '100%' : "100vh",
+              display: "flex",
+              flexDirection: isMobile ? 'column' : 'row'
+            }}
+          >
+            <Group
+              balance={balance}
+              userInfo={userInfo}
+              myAddress={userInfo?.address}
+              isFocused={isFocused}
+              isMain={isMain}
+              isOpenDrawerProfile={isOpenDrawerProfile}
+               setIsOpenDrawerProfile={setIsOpenDrawerProfile}
+            />
+            {!isMobile && renderProfile()}
+           
           </Box>
           <Box
             sx={{
@@ -2316,6 +2388,7 @@ function App() {
         info={infoSnack}
         setInfo={setInfoSnack}
       />
+         <DrawerComponent open={isOpenDrawerProfile} setOpen={setIsOpenDrawerProfile} >{renderProfile()}</DrawerComponent>
     </AppContainer>
   );
 }

src/background.ts

@@ -2341,7 +2341,7 @@ if (res?.[key]) {
   throw new Error("No Chatheads saved");
 }
 }
-chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+chrome?.runtime?.onMessage.addListener((request, sender, sendResponse) => {
   if (request) {
     switch (request.action) {
       case "version":
@@ -3581,7 +3581,7 @@ const restoreWindowBounds = (callback) => {
   });
 };
 
-chrome.action.onClicked.addListener((tab) => {
+chrome.action?.onClicked?.addListener((tab) => {
   const popupUrl = chrome.runtime.getURL("index.html?main=true");
   chrome.windows.getAll(
     { populate: true, windowTypes: ["popup"] },
@@ -3716,7 +3716,7 @@ const checkActiveChatsForNotifications = async ()=> {
     
   }
 }
-chrome.notifications.onClicked.addListener( (notificationId) => {
+chrome.notifications?.onClicked?.addListener( (notificationId) => {
  
   const popupUrl = chrome.runtime.getURL("index.html?main=true");
   const isDirect = notificationId.includes('_type=direct_');
@@ -3839,14 +3839,14 @@ chrome.notifications.onClicked.addListener( (notificationId) => {
 });
 
 // Reconnect when service worker wakes up
-chrome.runtime.onStartup.addListener(() => {
+chrome.runtime?.onStartup.addListener(() => {
   console.log("Service worker started up, reconnecting WebSocket...");
   // initWebsocketMessageGroup();
   // listenForNewGroupAnnouncements()
   // listenForThreadUpdates()
 });
 
-chrome.runtime.onInstalled.addListener((details) => {
+chrome.runtime?.onInstalled.addListener((details) => {
   if (details.reason === chrome.runtime.OnInstalledReason.INSTALL) {
     console.log('Extension Installed');
     // Perform tasks that should only happen on extension installation
@@ -3866,14 +3866,14 @@ chrome.runtime.onInstalled.addListener((details) => {
 });
 
 // Check if the alarm already exists before creating it
-chrome.alarms.get("checkForNotifications", (existingAlarm) => {
+chrome.alarms?.get("checkForNotifications", (existingAlarm) => {
   if (!existingAlarm) {
     // If the alarm does not exist, create it
     chrome.alarms.create("checkForNotifications", { periodInMinutes: 4 });
   }
 });
 
-chrome.alarms.onAlarm.addListener(async (alarm) => {
+chrome.alarms?.onAlarm.addListener(async (alarm) => {
  try {
 
   if (alarm.name === "checkForNotifications") {

src/components/Chat/AnnouncementDiscussion.tsx

@@ -10,7 +10,7 @@ import { decryptPublishes, getTempPublish, saveTempPublish } from "./GroupAnnoun
 import { AnnouncementList } from "./AnnouncementList";
 import { Spacer } from "../../common/Spacer";
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import { getBaseApiReact, pauseAllQueues, resumeAllQueues } from "../../App";
+import { getBaseApiReact, isMobile, pauseAllQueues, resumeAllQueues } from "../../App";
 
 const tempKey = 'accouncement-comment'
 
@@ -66,7 +66,7 @@ export const AnnouncementDiscussion = ({
       if (!selectedAnnouncement) return;
     
       return new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "publishGroupEncryptedResource",
             payload: {
@@ -245,7 +245,7 @@ export const AnnouncementDiscussion = ({
   return (
     <div
       style={{
-        height: "100vh",
+        height: isMobile ? '100%' : "100vh",
         display: "flex",
         flexDirection: "column",
         width: "100%",

src/components/Chat/ChatDirect.tsx

@@ -40,7 +40,7 @@ export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDi
     const decryptMessages = (encryptedMessages: any[])=> {
       try {
         return new Promise((res, rej)=> {
-          chrome.runtime.sendMessage({ action: "decryptDirect", payload: {
+          chrome?.runtime?.sendMessage({ action: "decryptDirect", payload: {
             data: encryptedMessages,
             involvingAddress: selectedDirect?.address
         }}, (response) => {
@@ -146,7 +146,7 @@ const sendChatDirect = async ({ chatReference = undefined, messageText}: any)=>
  
     if(!directTo) return
     return new Promise((res, rej)=> {
-      chrome.runtime.sendMessage({ action: "sendChatDirect", payload: {
+      chrome?.runtime?.sendMessage({ action: "sendChatDirect", payload: {
         directTo,  chatReference, messageText
     }}, async (response) => {
     
@@ -167,7 +167,7 @@ const sendChatDirect = async ({ chatReference = undefined, messageText}: any)=>
               "senderName": myName
           })
           setNewChat(null)
-          chrome.runtime.sendMessage({
+          chrome?.runtime?.sendMessage({
             action: "addTimestampEnterChat",
             payload: {
               timestamp: Date.now(),

src/components/Chat/ChatGroup.tsx

@@ -10,7 +10,7 @@ import Tiptap from './TipTap'
 import { CustomButton } from '../../App-styles'
 import CircularProgress from '@mui/material/CircularProgress';
 import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar'
-import { getBaseApiReactSocket, pauseAllQueues, resumeAllQueues } from '../../App'
+import { getBaseApiReactSocket, isMobile, pauseAllQueues, resumeAllQueues } from '../../App'
 import { CustomizedSnackbars } from '../Snackbar/Snackbar'
 import { PUBLIC_NOTIFICATION_CODE_FIRST_SECRET_KEY } from '../../constants/codes'
 import { useMessageQueue } from '../../MessageQueueContext'
@@ -85,7 +85,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
           return
         }
         return new Promise((res, rej)=> {
-          chrome.runtime.sendMessage({ action: "decryptSingle", payload: {
+          chrome?.runtime?.sendMessage({ action: "decryptSingle", payload: {
             data: encryptedMessages,
             secretKeyObject: secretKey
         }}, (response) => {
@@ -233,7 +233,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
   const encryptChatMessage = async (data: string, secretKeyObject: any)=> {
     try {
       return new Promise((res, rej)=> {
-        chrome.runtime.sendMessage({ action: "encryptSingle", payload: {
+        chrome?.runtime?.sendMessage({ action: "encryptSingle", payload: {
           data,
           secretKeyObject
       }}, (response) => {
@@ -252,7 +252,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
 const sendChatGroup = async ({groupId, typeMessage = undefined, chatReference = undefined, messageText}: any)=> {
   try {
     return new Promise((res, rej)=> {
-      chrome.runtime.sendMessage({ action: "sendChatGroup", payload: {
+      chrome?.runtime?.sendMessage({ action: "sendChatGroup", payload: {
         groupId, typeMessage, chatReference, messageText
     }}, (response) => {
     
@@ -336,7 +336,7 @@ const clearEditorContent = () => {
   
   return (
     <div style={{
-      height: '100vh',
+      height: isMobile ? '100%' : '100vh',
       display: 'flex',
       flexDirection: 'column',
       width: '100%',

src/components/Chat/CreateCommonSecret.tsx

@@ -107,7 +107,7 @@ export const CreateCommonSecret = ({groupId, secretKey, isOwner,  myAddress, sec
           const secretKeyToSend = !secretKey2 ? null : secretKey2
        
  
-            chrome.runtime.sendMessage({ action: "encryptAndPublishSymmetricKeyGroupChat", payload: {
+            chrome?.runtime?.sendMessage({ action: "encryptAndPublishSymmetricKeyGroupChat", payload: {
                 groupId: groupId,
                 previousData: secretKeyToSend
             } }, (response) => {
@@ -142,7 +142,7 @@ export const CreateCommonSecret = ({groupId, secretKey, isOwner,  myAddress, sec
       flexDirection: 'column',
       gap: '25px',
       maxWidth: '350px',
-      background: '#4444'
+      background: '#444444'
     }}>
       <LoadingButton loading={isLoading} loadingPosition="start" color="warning" variant='contained' onClick={createCommonSecret}>Re-encyrpt key</LoadingButton>
       {noSecretKey ? (

src/components/Chat/GroupAnnouncements.tsx

@@ -28,7 +28,7 @@ const uid = new ShortUniqueId({ length: 8 });
 import CampaignIcon from '@mui/icons-material/Campaign';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { AnnouncementDiscussion } from "./AnnouncementDiscussion";
-import { MyContext, getBaseApiReact, pauseAllQueues, resumeAllQueues } from "../../App";
+import { MyContext, getBaseApiReact, isMobile, pauseAllQueues, resumeAllQueues } from "../../App";
 import { RequestQueueWithPromise } from "../../utils/queue/queue";
 import { CustomizedSnackbars } from "../Snackbar/Snackbar";
 
@@ -39,7 +39,7 @@ export const saveTempPublish = async ({ data, key }: any) => {
    
       
   return new Promise((res, rej) => {
-    chrome.runtime.sendMessage(
+    chrome?.runtime?.sendMessage(
       {
         action: "saveTempPublish",
         payload: {
@@ -62,7 +62,7 @@ export const getTempPublish = async () => {
    
       
   return new Promise((res, rej) => {
-    chrome.runtime.sendMessage(
+    chrome?.runtime?.sendMessage(
       {
         action: "getTempPublish",
         payload: {
@@ -81,7 +81,7 @@ export const getTempPublish = async () => {
 export const decryptPublishes = async (encryptedMessages: any[], secretKey) => {
   try {
     return await new Promise((res, rej) => {
-      chrome.runtime.sendMessage(
+      chrome?.runtime?.sendMessage(
         {
           action: "decryptSingleForPublishes",
           payload: {
@@ -182,7 +182,7 @@ export const GroupAnnouncements = ({
   const encryptChatMessage = async (data: string, secretKeyObject: any) => {
     try {
       return new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "encryptSingle",
             payload: {
@@ -206,7 +206,7 @@ export const GroupAnnouncements = ({
    
       
       return new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "publishGroupEncryptedResource",
             payload: {
@@ -460,7 +460,7 @@ export const GroupAnnouncements = ({
     return (
       <div
       style={{
-        height: "100vh",
+        height: isMobile ? '100%' : "100vh",
         display: "flex",
         flexDirection: "column",
         width: "100%",
@@ -479,7 +479,7 @@ export const GroupAnnouncements = ({
   return (
     <div
       style={{
-        height: "100vh",
+        height: isMobile ? '100%' :  "100vh",
         display: "flex",
         flexDirection: "column",
         width: "100%",

src/components/Chat/GroupForum.tsx

@@ -6,6 +6,7 @@ import React, {
   useState,
 } from "react";
 import { GroupMail } from "../Group/Forum/GroupMail";
+import { isMobile } from "../../App";
 
 
 
@@ -35,7 +36,7 @@ export const GroupForum = ({
   return (
     <div
     style={{
-      height: "100vh",
+      height: isMobile ? '100%' : "100vh",
       display: "flex",
       flexDirection: "column",
       width: "100%",

src/components/Drawer/Drawer.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Drawer from '@mui/material/Drawer';
+import Button from '@mui/material/Button';
+import List from '@mui/material/List';
+import Divider from '@mui/material/Divider';
+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 InboxIcon from '@mui/icons-material/MoveToInbox';
+import MailIcon from '@mui/icons-material/Mail';
+import CloseIcon from '@mui/icons-material/Close';
+export const DrawerComponent = ({open, setOpen, children}) => {
+
+  const toggleDrawer = (newOpen: boolean) => () => {
+    setOpen(newOpen);
+  };
+
+ 
+  return (
+    <div>
+      <Drawer open={open} onClose={toggleDrawer(false)}>
+      <Box sx={{ width: 400, height: '100%' }} role="presentation">
+     
+      {children}
+    </Box>
+      </Drawer>
+    </div>
+  );
+}

src/components/Group/AddGroup.tsx

@@ -103,7 +103,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
       })
 
      await new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "createGroup",
             payload: {

src/components/Group/AddGroupList.tsx

@@ -108,7 +108,7 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
           })
       setIsLoading(true);
       await new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "joinGroup",
             payload: {

src/components/Group/Forum/GroupMail.tsx

@@ -123,7 +123,7 @@ export const GroupMail = ({
   const updateThreadActivity = async ({threadId, qortalName, groupId, thread}) => {
     try {
       await new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "updateThreadActivity",
             payload: {
@@ -656,6 +656,11 @@ export const GroupMail = ({
               thread?.threadData?.createdAt < hasViewedRecent?.timestamp;
             return (
               <SingleThreadParent
+              sx={{
+                flexWrap: 'wrap',
+                gap: '15px',
+                height: 'auto'
+              }}
                 onClick={() => {
                   setCurrentThread(thread);
                   if(thread?.threadId && thread?.threadData?.name){

src/components/Group/Forum/NewThread.tsx

@@ -94,7 +94,7 @@ export const publishGroupEncryptedResource = async ({
   identifier,
 }) => {
   return new Promise((res, rej) => {
-    chrome.runtime.sendMessage(
+    chrome?.runtime?.sendMessage(
       {
         action: "publishGroupEncryptedResource",
         payload: {
@@ -117,7 +117,7 @@ export const publishGroupEncryptedResource = async ({
 export const encryptSingleFunc = async (data: string, secretKeyObject: any) => {
   try {
     return new Promise((res, rej) => {
-      chrome.runtime.sendMessage(
+      chrome?.runtime?.sendMessage(
         {
           action: "encryptSingle",
           payload: {

src/components/Group/Forum/ReusableModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Box, Modal, useTheme } from '@mui/material'
+import { isMobile } from '../../../App'
 
 interface MyModalProps {
   open: boolean
@@ -40,7 +41,7 @@ export const ReusableModal: React.FC<MyModalProps> = ({
           top: '50%',
           left: '50%',
           transform: 'translate(-50%, -50%)',
-          width: '75%',
+          width: isMobile ? '95%' : '75%',
           bgcolor: theme.palette.primary.main,
           boxShadow: 24,
           p: 4,

src/components/Group/InviteMember.tsx

@@ -26,7 +26,7 @@ export const InviteMember = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
       setIsLoadingInvite(true)
       if (!expiryTime || !value) return;
       new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "inviteToGroup",
             payload: {

src/components/Group/ListOfBans.tsx

@@ -74,7 +74,7 @@ export const ListOfBans = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
       })
       setIsLoadingUnban(true)
       new Promise((res, rej)=> {
-          chrome.runtime.sendMessage({ action: "cancelBan", payload: {
+          chrome?.runtime?.sendMessage({ action: "cancelBan", payload: {
               groupId,
               qortalAddress: address,
         }}, (response) => {

src/components/Group/ListOfInvites.tsx

@@ -75,7 +75,7 @@ export const ListOfInvites = ({ groupId, setInfoSnack, setOpenSnack, show }) =>
       })
       setIsLoadingCancelInvite(true)
       await new Promise((res, rej)=> {
-          chrome.runtime.sendMessage({ action: "cancelInvitationToGroup", payload: {
+          chrome?.runtime?.sendMessage({ action: "cancelInvitationToGroup", payload: {
               groupId,
               qortalAddress: address,
         }}, (response) => {

src/components/Group/ListOfJoinRequests.tsx

@@ -74,7 +74,7 @@ export const ListOfJoinRequests = ({ groupId, setInfoSnack, setOpenSnack, show }
       })
       setIsLoadingAccept(true)
       await new Promise((res, rej)=> {
-          chrome.runtime.sendMessage({ action: "inviteToGroup", payload: {
+          chrome?.runtime?.sendMessage({ action: "inviteToGroup", payload: {
             groupId,
             qortalAddress: address,
             inviteTime: 10800,

src/components/Group/ListOfMembers.tsx

@@ -63,7 +63,7 @@ const ListOfMembers = ({
 
       setIsLoadingKick(true);
       new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "kickFromGroup",
             payload: {
@@ -107,7 +107,7 @@ const ListOfMembers = ({
       });
       setIsLoadingBan(true);
       await new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "banFromGroup",
             payload: {
@@ -153,7 +153,7 @@ const ListOfMembers = ({
       });
       setIsLoadingMakeAdmin(true);
       await new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "makeAdmin",
             payload: {
@@ -198,7 +198,7 @@ const ListOfMembers = ({
       });
       setIsLoadingRemoveAdmin(true);
       await new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "removeAdmin",
             payload: {

src/components/Group/ListOfThreadPostsWatched.tsx

@@ -23,7 +23,7 @@ export const ListOfThreadPostsWatched = () => {
   const getPosts = async ()=> {
     try {
       await new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "getThreadActivity",
             payload: {

src/components/Group/ManageMembers.tsx

@@ -77,7 +77,7 @@ export const ManageMembers = ({
       })
 
       await new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "leaveGroup",
             payload: {

src/components/Group/UserListOfInvites.tsx

@@ -85,7 +85,7 @@ export const UserListOfInvites = ({myAddress, setInfoSnack, setOpenSnack}) => {
         setIsLoading(true);
 
         await new Promise((res, rej)=> {
-            chrome.runtime.sendMessage({ action: "joinGroup", payload: {
+            chrome?.runtime?.sendMessage({ action: "joinGroup", payload: {
                 groupId,
           }}, (response) => {
         

src/components/Group/WebsocketActive.tsx

@@ -74,7 +74,7 @@ export const WebSocketActive = ({ myAddress, setIsLoadingGroups }) => {
               ).sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
 
            
-              chrome.runtime.sendMessage({
+              chrome?.runtime?.sendMessage({
                 action: 'handleActiveGroupDataFromSocket',
                 payload: {
                   groups: sortedGroups,

src/index.css

@@ -81,3 +81,7 @@ body {
 .group-list::-webkit-scrollbar-thumb:hover {
   background-color: whitesmoke;
 }
+
+html, body {
+  overscroll-behavior:none !important;
+}