mobile friendly

2025-02-11 17:55:49 +00:00 · 2024-09-12 05:01:36 +03:00 · 2024-09-12 05:01:36 +03:00 · 99f2ae1885
commit 99f2ae1885
parent 9cb1a977e0
26 changed files with 1185 additions and 903 deletions
--- a/public/content-script.js
+++ b/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({
--- a/src/App.tsx
+++ b/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,
@ -67,7 +69,7 @@ import { Spacer } from "./common/Spacer";
 import { Loader } from "./components/Loader";
 import { PasswordField, ErrorText } from "./components";
 import { ChatGroup } from "./components/Chat/ChatGroup";
-import { Group, requestQueueMemberNames } from "./components/Group/Group";
+import { Group,  requestQueueMemberNames } from "./components/Group/Group";
 import { TaskManger } from "./components/TaskManager/TaskManger";
 import { useModal } from "./common/useModal";
 import { LoadingButton } from "@mui/lab";
@ -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,8 +1123,224 @@ function App() {
    }
  };

+  const renderProfile = ()=> {
+    return (
+      <AuthenticatedContainer sx={{ width:"350px", display:  'flex' }}>
+      {isMobile && (
+             <Box sx={{
+              padding: '10px',
+              display: 'flex',
+              justifyContent: 'flex-end'
+          }}><CloseIcon onClick={()=> {
+              setIsOpenDrawerProfile(false)
+          }} sx={{
+              cursor: 'pointer',
+              color: 'white'
+          }} /></Box>
+        )}
+          
+      <AuthenticatedContainerInnerLeft>
+      <Spacer height="48px" />
+
+      {authenticatedMode === "ltc" ? (
+        <>
+          <img src={ltcLogo} />
+          <Spacer height="32px" />
+          <CopyToClipboard text={rawWallet?.ltcAddress}>
+            <AddressBox>
+              {rawWallet?.ltcAddress?.slice(0, 6)}...
+              {rawWallet?.ltcAddress?.slice(-4)} <img src={Copy} />
+            </AddressBox>
+          </CopyToClipboard>
+          <Spacer height="10px" />
+          {ltcBalanceLoading && (
+            <CircularProgress color="success" size={16} />
+          )}
+          {!isNaN(+ltcBalance) && !ltcBalanceLoading && (
+            <Box
+              sx={{
+                gap: "10px",
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              <TextP
+                sx={{
+                  textAlign: "center",
+                  lineHeight: "24px",
+                  fontSize: "20px",
+                  fontWeight: 700,
+                }}
+              >
+                {ltcBalance} LTC
+              </TextP>
+              <RefreshIcon
+                onClick={getLtcBalanceFunc}
+                sx={{
+                  fontSize: "16px",
+                  color: "white",
+                  cursor: "pointer",
+                }}
+              />
+            </Box>
+          )}
+        </>
+      ) : (
+        <>
+          <img src={Logo2} />
+          <Spacer height="32px" />
+          <TextP
+            sx={{
+              textAlign: "center",
+              lineHeight: "24px",
+              fontSize: "20px",
+            }}
+          >
+            {userInfo?.name}
+          </TextP>
+          <Spacer height="10px" />
+          <CopyToClipboard text={rawWallet?.address0}>
+            <AddressBox>
+              {rawWallet?.address0?.slice(0, 6)}...
+              {rawWallet?.address0?.slice(-4)} <img src={Copy} />
+            </AddressBox>
+          </CopyToClipboard>
+          <Spacer height="10px" />
+          {qortBalanceLoading && (
+            <CircularProgress color="success" size={16} />
+          )}
+          {!qortBalanceLoading && balance >= 0 && (
+            <Box
+              sx={{
+                gap: "10px",
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              <TextP
+                sx={{
+                  textAlign: "center",
+                  lineHeight: "24px",
+                  fontSize: "20px",
+                  fontWeight: 700,
+                }}
+              >
+                {balance?.toFixed(2)} QORT
+              </TextP>
+              <RefreshIcon
+                onClick={getBalanceFunc}
+                sx={{
+                  fontSize: "16px",
+                  color: "white",
+                  cursor: "pointer",
+                }}
+              />
+            </Box>
+          )}
+
+          <Spacer height="35px" />
+          {userInfo && !userInfo?.name && (
+            <TextP
+              ref={registerNamePopoverRef}
+              sx={{
+                textAlign: "center",
+                lineHeight: 1.2,
+                fontSize: "16px",
+                fontWeight: 500,
+                cursor: "pointer",
+                marginTop: "10px",
+                color: "red",
+                textDecoration: "underline",
+              }}
+              onClick={() => {
+                setOpenRegisterName(true);
+              }}
+            >
+              REGISTER NAME
+            </TextP>
+          )}
+          <Spacer height="20px" />
+          <CustomButton
+            onClick={() => {
+              setExtstate("send-qort");
+            }}
+          >
+            Transfer QORT
+          </CustomButton>
+        </>
+      )}
+      <TextP
+        sx={{
+          textAlign: "center",
+          lineHeight: "24px",
+          fontSize: "12px",
+          fontWeight: 500,
+          cursor: "pointer",
+          marginTop: "10px",
+          textDecoration: "underline",
+        }}
+        onClick={() => {
+          chrome.tabs.create({ url: "https://www.qort.trade" });
+        }}
+      >
+        Get QORT at qort.trade
+      </TextP>
+    </AuthenticatedContainerInnerLeft>
+    <AuthenticatedContainerInnerRight>
+      <Spacer height="20px" />
+      <img
+        onClick={() => {
+          setExtstate("download-wallet");
+        }}
+        src={Download}
+        style={{
+          cursor: "pointer",
+        }}
+      />
+      <Spacer height="20px" />
+      <img
+        src={Logout}
+        onClick={logoutFunc}
+        style={{
+          cursor: "pointer",
+        }}
+      />
+      <Spacer height="20px" />
+      {authenticatedMode === "qort" && (
+        <img
+          onClick={() => {
+            setAuthenticatedMode("ltc");
+          }}
+          src={ltcLogo}
+          style={{
+            cursor: "pointer",
+            width: "20px",
+            height: "auto",
+          }}
+        />
+      )}
+      {authenticatedMode === "ltc" && (
+        <img
+          onClick={() => {
+            setAuthenticatedMode("qort");
+          }}
+          src={qortLogo}
+          style={{
+            cursor: "pointer",
+            width: "20px",
+            height: "auto",
+          }}
+        />
+      )}
+    </AuthenticatedContainerInnerRight>
+    </AuthenticatedContainer>
+    )
+  }
+
  return (
-    <AppContainer>
+    <AppContainer sx={{
+      height: isMobile ? '100%' : '100vh'
+    }}>
      {/* {extState === 'group' && (
        <Group myAddress={userInfo?.address} />
      )} */}
@ -1230,7 +1493,7 @@ function App() {
                          onClick={() => {
                            const valueToSet = !confirmUseOfLocal
                            const payload = valueToSet ? apiKey : null
-                            chrome.runtime.sendMessage(
+                            chrome?.runtime?.sendMessage(
                              { action: "setApiKey", payload },
                              (response) => {
                                if (response) {
@ -1266,7 +1529,7 @@ function App() {
      {/* {extState !== "not-authenticated" && (
        <button onClick={logoutFunc}>logout</button>
      )} */}
-      {extState === "authenticated" && isMainWindow && (
+      {extState === "authenticated"  && (
        <MyContext.Provider
          value={{
            txList,
@ -1283,8 +1546,9 @@ function App() {
          <Box
            sx={{
              width: "100vw",
-              height: "100vh",
+              height: isMobile ? '100%' : "100vh",
              display: "flex",
+              flexDirection: isMobile ? 'column' : 'row'
            }}
          >
            <Group
@ -1293,203 +1557,11 @@ function App() {
              myAddress={userInfo?.address}
              isFocused={isFocused}
              isMain={isMain}
+              isOpenDrawerProfile={isOpenDrawerProfile}
+               setIsOpenDrawerProfile={setIsOpenDrawerProfile}
            />
-            <AuthenticatedContainer sx={{ width: "350px" }}>
-              <AuthenticatedContainerInnerLeft>
-                <Spacer height="48px" />
-
-                {authenticatedMode === "ltc" ? (
-                  <>
-                    <img src={ltcLogo} />
-                    <Spacer height="32px" />
-                    <CopyToClipboard text={rawWallet?.ltcAddress}>
-                      <AddressBox>
-                        {rawWallet?.ltcAddress?.slice(0, 6)}...
-                        {rawWallet?.ltcAddress?.slice(-4)} <img src={Copy} />
-                      </AddressBox>
-                    </CopyToClipboard>
-                    <Spacer height="10px" />
-                    {ltcBalanceLoading && (
-                      <CircularProgress color="success" size={16} />
-                    )}
-                    {!isNaN(+ltcBalance) && !ltcBalanceLoading && (
-                      <Box
-                        sx={{
-                          gap: "10px",
-                          display: "flex",
-                          alignItems: "center",
-                        }}
-                      >
-                        <TextP
-                          sx={{
-                            textAlign: "center",
-                            lineHeight: "24px",
-                            fontSize: "20px",
-                            fontWeight: 700,
-                          }}
-                        >
-                          {ltcBalance} LTC
-                        </TextP>
-                        <RefreshIcon
-                          onClick={getLtcBalanceFunc}
-                          sx={{
-                            fontSize: "16px",
-                            color: "white",
-                            cursor: "pointer",
-                          }}
-                        />
-                      </Box>
-                    )}
-                  </>
-                ) : (
-                  <>
-                    <img src={Logo2} />
-                    <Spacer height="32px" />
-                    <TextP
-                      sx={{
-                        textAlign: "center",
-                        lineHeight: "24px",
-                        fontSize: "20px",
-                      }}
-                    >
-                      {userInfo?.name}
-                    </TextP>
-                    <Spacer height="10px" />
-                    <CopyToClipboard text={rawWallet?.address0}>
-                      <AddressBox>
-                        {rawWallet?.address0?.slice(0, 6)}...
-                        {rawWallet?.address0?.slice(-4)} <img src={Copy} />
-                      </AddressBox>
-                    </CopyToClipboard>
-                    <Spacer height="10px" />
-                    {qortBalanceLoading && (
-                      <CircularProgress color="success" size={16} />
-                    )}
-                    {!qortBalanceLoading && balance >= 0 && (
-                      <Box
-                        sx={{
-                          gap: "10px",
-                          display: "flex",
-                          alignItems: "center",
-                        }}
-                      >
-                        <TextP
-                          sx={{
-                            textAlign: "center",
-                            lineHeight: "24px",
-                            fontSize: "20px",
-                            fontWeight: 700,
-                          }}
-                        >
-                          {balance?.toFixed(2)} QORT
-                        </TextP>
-                        <RefreshIcon
-                          onClick={getBalanceFunc}
-                          sx={{
-                            fontSize: "16px",
-                            color: "white",
-                            cursor: "pointer",
-                          }}
-                        />
-                      </Box>
-                    )}
-
-                    <Spacer height="35px" />
-                    {userInfo && !userInfo?.name && (
-                      <TextP
-                        ref={registerNamePopoverRef}
-                        sx={{
-                          textAlign: "center",
-                          lineHeight: 1.2,
-                          fontSize: "16px",
-                          fontWeight: 500,
-                          cursor: "pointer",
-                          marginTop: "10px",
-                          color: "red",
-                          textDecoration: "underline",
-                        }}
-                        onClick={() => {
-                          setOpenRegisterName(true);
-                        }}
-                      >
-                        REGISTER NAME
-                      </TextP>
-                    )}
-                    <Spacer height="20px" />
-                    <CustomButton
-                      onClick={() => {
-                        setExtstate("send-qort");
-                      }}
-                    >
-                      Transfer QORT
-                    </CustomButton>
-                  </>
-                )}
-                <TextP
-                  sx={{
-                    textAlign: "center",
-                    lineHeight: "24px",
-                    fontSize: "12px",
-                    fontWeight: 500,
-                    cursor: "pointer",
-                    marginTop: "10px",
-                    textDecoration: "underline",
-                  }}
-                  onClick={() => {
-                    chrome.tabs.create({ url: "https://www.qort.trade" });
-                  }}
-                >
-                  Get QORT at qort.trade
-                </TextP>
-              </AuthenticatedContainerInnerLeft>
-              <AuthenticatedContainerInnerRight>
-                <Spacer height="20px" />
-                <img
-                  onClick={() => {
-                    setExtstate("download-wallet");
-                  }}
-                  src={Download}
-                  style={{
-                    cursor: "pointer",
-                  }}
-                />
-                <Spacer height="20px" />
-                <img
-                  src={Logout}
-                  onClick={logoutFunc}
-                  style={{
-                    cursor: "pointer",
-                  }}
-                />
-                <Spacer height="20px" />
-                {authenticatedMode === "qort" && (
-                  <img
-                    onClick={() => {
-                      setAuthenticatedMode("ltc");
-                    }}
-                    src={ltcLogo}
-                    style={{
-                      cursor: "pointer",
-                      width: "20px",
-                      height: "auto",
-                    }}
-                  />
-                )}
-                {authenticatedMode === "ltc" && (
-                  <img
-                    onClick={() => {
-                      setAuthenticatedMode("qort");
-                    }}
-                    src={qortLogo}
-                    style={{
-                      cursor: "pointer",
-                      width: "20px",
-                      height: "auto",
-                    }}
-                  />
-                )}
-              </AuthenticatedContainerInnerRight>
-            </AuthenticatedContainer>
+            {!isMobile && renderProfile()}
+           
          </Box>
          <Box
            sx={{
@ -2316,6 +2388,7 @@ function App() {
        info={infoSnack}
        setInfo={setInfoSnack}
      />
+         <DrawerComponent open={isOpenDrawerProfile} setOpen={setIsOpenDrawerProfile} >{renderProfile()}</DrawerComponent>
    </AppContainer>
  );
 }
--- a/src/background.ts
+++ b/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") {
--- a/src/components/Chat/AnnouncementDiscussion.tsx
+++ b/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%",
--- a/src/components/Chat/ChatDirect.tsx
+++ b/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(),
--- a/src/components/Chat/ChatGroup.tsx
+++ b/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%',
--- a/src/components/Chat/CreateCommonSecret.tsx
+++ b/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 ? (
--- a/src/components/Chat/GroupAnnouncements.tsx
+++ b/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%",
--- a/src/components/Chat/GroupForum.tsx
+++ b/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%",
--- a/src/components/Drawer/Drawer.tsx
+++ b/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>
+  );
+}
--- a/src/components/Group/AddGroup.tsx
+++ b/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: {
--- a/src/components/Group/AddGroupList.tsx
+++ b/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: {
--- a/src/components/Group/Forum/GroupMail.tsx
+++ b/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){
--- a/src/components/Group/Forum/NewThread.tsx
+++ b/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: {
--- a/src/components/Group/Forum/ReusableModal.tsx
+++ b/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,
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
--- a/src/components/Group/InviteMember.tsx
+++ b/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: {
--- a/src/components/Group/ListOfBans.tsx
+++ b/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) => {
--- a/src/components/Group/ListOfInvites.tsx
+++ b/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) => {
--- a/src/components/Group/ListOfJoinRequests.tsx
+++ b/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,
--- a/src/components/Group/ListOfMembers.tsx
+++ b/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: {
--- a/src/components/Group/ListOfThreadPostsWatched.tsx
+++ b/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: {
--- a/src/components/Group/ManageMembers.tsx
+++ b/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: {
--- a/src/components/Group/UserListOfInvites.tsx
+++ b/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) => {
        
--- a/src/components/Group/WebsocketActive.tsx
+++ b/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,
--- a/src/index.css
+++ b/src/index.css
@ -80,4 +80,8 @@ body {

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