added qr code

package-lock.json

@@ -45,6 +45,7 @@
         "react-dropzone": "^14.2.3",
         "react-infinite-scroller": "^1.2.6",
         "react-intersection-observer": "^9.13.0",
+        "react-qr-code": "^2.0.15",
         "react-quill": "^2.0.0",
         "react-redux": "^9.1.2",
         "react-virtualized": "^9.22.5",
@@ -6766,6 +6767,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/qr.js": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
+      "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ=="
+    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -6930,6 +6936,18 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "node_modules/react-qr-code": {
+      "version": "2.0.15",
+      "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.15.tgz",
+      "integrity": "sha512-MkZcjEXqVKqXEIMVE0mbcGgDpkfSdd8zhuzXEl9QzYeNcw8Hq2oVIzDLWuZN2PQBwM5PWjc2S31K8Q1UbcFMfw==",
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "qr.js": "0.0.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-quill": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz",

package.json

@@ -49,6 +49,7 @@
     "react-dropzone": "^14.2.3",
     "react-infinite-scroller": "^1.2.6",
     "react-intersection-observer": "^9.13.0",
+    "react-qr-code": "^2.0.15",
     "react-quill": "^2.0.0",
     "react-redux": "^9.1.2",
     "react-virtualized": "^9.22.5",

src/App.tsx

@@ -86,6 +86,7 @@ import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from "./utils/ev
 import { requestQueueCommentCount, requestQueuePublishedAccouncements } from "./components/Chat/GroupAnnouncements";
 import { requestQueueGroupJoinRequests } from "./components/Group/GroupJoinRequests";
 import { DrawerComponent } from "./components/Drawer/Drawer";
+import { LitecoinQRCode } from "./components/LitecoinQRCode";
 
 type extStates =
   | "not-authenticated"
@@ -1253,6 +1254,7 @@ function App() {
               />
             </Box>
           )}
+          <LitecoinQRCode ltcAddress={rawWallet?.ltcAddress} />
         </>
       ) : (
         <>

src/components/Group/Group.tsx

@@ -1770,7 +1770,7 @@ export const Group = ({
           width: isMobile ? "100%" : "380px",
           flexDirection: "column",
           alignItems: "flex-start",
-          height: isMobile ? "calc(100% - 45px)" : "100%",
+          height: isMobile ? `calc(${rootHeight} - 45px)` : "100%",
           background: !isMobile && 'var(--bg-primary)',
           borderRadius: !isMobile && '0px 15px 15px 0px'
         }}
@@ -2302,7 +2302,7 @@ export const Group = ({
               </Box>
             </>
           )}
-          {selectedGroup && (
+          {selectedGroup && mobileViewMode !== 'groups' && (
             <>
             {!isMobile && selectedGroup && (
         

src/components/LitecoinQRCode.tsx

@@ -0,0 +1,36 @@
+
+import React from 'react';
+import QRCode from 'react-qr-code';
+import { TextP } from '../App-styles';
+import { Box } from '@mui/material';
+
+export const LitecoinQRCode = ({ ltcAddress }) => {
+  return (
+    <Box sx={{
+      display: 'flex',
+      gap: '10px',
+      width: '100%',
+      alignItems: 'center',
+      flexDirection: 'column',
+      marginTop: '20px'
+    }}>
+      <TextP
+                sx={{
+                  textAlign: "center",
+                  lineHeight: 1.2,
+                  fontSize: "16px",
+                  fontWeight: 500,
+                }}
+              >
+                Your LTC address
+              </TextP>
+      <QRCode 
+        value={ltcAddress}  // Your LTC address here
+        size={180}          // Adjust size as needed
+        level="M"           // Error correction level (L, M, Q, H)
+        bgColor="#FFFFFF"   // Background color (white)
+        fgColor="#000000"   // Foreground color (black)
+      />
+    </Box>
+  );
+};

src/index.css

@@ -74,7 +74,6 @@ body {
 ::-webkit-scrollbar {
   width: 16px;
   height: 10px;
-  background-color: #232428;
 }
 
 ::-webkit-scrollbar-thumb {