Fix scrolling with drawer open

package.json

@@ -135,6 +135,7 @@
     "react-qrcode-logo": "^2.9.0",
     "react-query": "^3.39.3",
     "react-redux": "8.0.5",
+    "react-remove-scroll": "^2.5.6",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",

src/components/DynamicModal.tsx

@@ -1,5 +1,6 @@
 import { Modal, ModalOverlay, ModalProps, useDisclosure } from "@chakra-ui/react";
 import { createContext, ReactElement, useState } from "react";
+import { RemoveScroll } from "react-remove-scroll";
 
 // this should be used in components as useContext(DynamicModalContext);
 export const DynamicModalContext = createContext<{
@@ -41,12 +42,13 @@ export const useDynamicModal = () => {
         isOpen={isOpen}
         onClose={onClose}
         closeOnOverlayClick={false}
+        blockScrollOnMount={false}
         autoFocus={false}
         size={size}
         isCentered
       >
         <ModalOverlay />
-        {modalContent}
+        <RemoveScroll enabled={isOpen}>{modalContent}</RemoveScroll>
       </Modal>
     ),
   };

src/views/home/AccountListWithDrawer.tsx

@@ -5,12 +5,14 @@ import AccountCard from "../../components/AccountDrawer";
 import { useAllAccounts } from "../../utils/hooks/accountHooks";
 import { AccountsList } from "./AccountsList";
 import { DrawerTopButtons } from "./DrawerTopButtons";
+import { useDynamicModal } from "../../components/DynamicModal";
 
 const AccountListWithDrawer: React.FC = () => {
   const [selected, setSelected] = useState<string | null>(null);
   const allAccounts = useAllAccounts();
 
   const { isOpen, onClose: closeDrawer, onOpen } = useDisclosure();
+  const { isOpen: isDynamicModalOpen } = useDynamicModal();
 
   const handleClose = () => {
     setSelected(null);
@@ -27,7 +29,14 @@ const AccountListWithDrawer: React.FC = () => {
           setSelected(pkh);
         }}
       />
-      <Drawer isOpen={isOpen} placement="right" onClose={handleClose} size="md" autoFocus={false}>
+      <Drawer
+        blockScrollOnMount={!isDynamicModalOpen}
+        isOpen={isOpen}
+        placement="right"
+        onClose={handleClose}
+        size="md"
+        autoFocus={false}
+      >
         <DrawerOverlay />
         <DrawerContent maxW="594px" bg="umami.gray.900">
           <DrawerTopButtons onClose={handleClose} />

src/views/nfts/NftsView.tsx

@@ -10,12 +10,14 @@ import { useAllNfts } from "../../utils/hooks/assetsHooks";
 import { DrawerTopButtons } from "../home/DrawerTopButtons";
 import NFTDrawerCard from "./NFTDrawerCard";
 import NFTGallery from "./NFTGallery";
+import { useDynamicModal } from "../../components/DynamicModal";
 
 const NFTsViewBase = () => {
   const nfts = useAllNfts();
   const { accountsFilter, selectedAccounts } = useAccountsFilter();
   const navigate = useNavigate();
   const { ownerPkh, nftId } = useParams();
+  const { isOpen: isDynamicModalOpen } = useDynamicModal();
 
   const openNFTsPage = useCallback(() => {
     navigate(`/nfts`);
@@ -58,6 +60,7 @@ const NFTsViewBase = () => {
           </Box>
 
           <Drawer
+            blockScrollOnMount={!isDynamicModalOpen}
             placement="right"
             onClose={openNFTsPage}
             size="md"

src/views/settings/BeaconDrawerCard.tsx

@@ -14,14 +14,21 @@ import { SettingsCardWithDrawerIcon } from "../../components/ClickableCard";
 import { useAddPeer } from "../../utils/beacon/beacon";
 import BeaconPeers from "../../utils/beacon/BeaconPeers";
 import { DrawerTopButtons } from "../home/DrawerTopButtons";
+import { useDynamicModal } from "../../components/DynamicModal";
 
 export const BeaconDrawerCard = () => {
   const { isOpen, onClose: closeDrawer, onOpen } = useDisclosure();
-
+  const { isOpen: isDynamicModalOpen } = useDynamicModal();
   return (
     <>
       <SettingsCardWithDrawerIcon left="dApps" onClick={onOpen} />
-      <Drawer isOpen={isOpen} placement="right" onClose={closeDrawer} size="md">
+      <Drawer
+        blockScrollOnMount={!isDynamicModalOpen}
+        isOpen={isOpen}
+        placement="right"
+        onClose={closeDrawer}
+        size="md"
+      >
         <DrawerOverlay />
         <DrawerContent maxW="594px" bg="umami.gray.900">
           <DrawerTopButtons onClose={closeDrawer} />

src/views/settings/ErrorLogsDrawerCard.tsx

@@ -17,9 +17,12 @@ import colors from "../../style/colors";
 import { ErrorContext } from "../../utils/getErrorContext";
 import { useAppSelector } from "../../utils/redux/hooks";
 import { DrawerTopButtons } from "../home/DrawerTopButtons";
+import { nanoid } from "@reduxjs/toolkit";
+import { useDynamicModal } from "../../components/DynamicModal";
 
 const ErrorLogsDrawerCard = () => {
   const { isOpen, onClose: closeDrawer, onOpen } = useDisclosure();
+  const { isOpen: isDynamicModalOpen } = useDynamicModal();
 
   const handleClose = () => {
     closeDrawer();
@@ -28,7 +31,13 @@ const ErrorLogsDrawerCard = () => {
   return (
     <>
       <SettingsCardWithDrawerIcon left="ErrorLogs" onClick={onOpen} />
-      <Drawer isOpen={isOpen} placement="right" onClose={handleClose} size="md">
+      <Drawer
+        blockScrollOnMount={!isDynamicModalOpen}
+        isOpen={isOpen}
+        placement="right"
+        onClose={handleClose}
+        size="md"
+      >
         <DrawerOverlay />
         <DrawerContent maxW="594px" bg="umami.gray.900">
           <DrawerTopButtons onClose={handleClose} />
@@ -56,8 +65,8 @@ const ErrorLogsDrawerBody = () => {
         {/* TODO:Implement delete */}
         {/* <IconAndTextBtn label="Clear All" icon={Trash} textFirst onClick={() => {}} /> */}
       </Flex>
-      {errors.map((error, i) => (
-        <ErrorLogRow errorLog={error} key={error.timestamp} />
+      {errors.map(error => (
+        <ErrorLogRow errorLog={error} key={nanoid()} />
       ))}
     </Flex>
   );

yarn.lock

@@ -20866,7 +20866,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-remove-scroll@npm:^2.5.5":
+"react-remove-scroll@npm:^2.5.5, react-remove-scroll@npm:^2.5.6":
   version: 2.5.6
   resolution: "react-remove-scroll@npm:2.5.6"
   dependencies:
@@ -23798,6 +23798,7 @@ __metadata:
     react-qrcode-logo: ^2.9.0
     react-query: ^3.39.3
     react-redux: 8.0.5
+    react-remove-scroll: ^2.5.6
     react-responsive-carousel: ^3.2.23
     react-router-dom: ^6.15.0
     react-scripts: 5.0.1