From bb63efefe808f6a8009f0935eca9de4637d63e3e Mon Sep 17 00:00:00 2001
From: Sergey Kintsel <sergey.kintsel@trili.tech>
Date: Tue, 12 Sep 2023 11:14:55 +0100
Subject: [PATCH] Disable scrolling when drawer open, but modal isn't

If you open the drawer it should block scrolling of
the elements behind it, but once the dynamic modal opens
it should stop doing it, otherwise it'll block
the modal's scrolling too
---
 src/views/home/AccountListWithDrawer.tsx   | 4 +++-
 src/views/nfts/NftsView.tsx                | 4 +++-
 src/views/settings/BeaconDrawerCard.tsx    | 5 +++--
 src/views/settings/ErrorLogsDrawerCard.tsx | 4 +++-
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/views/home/AccountListWithDrawer.tsx b/src/views/home/AccountListWithDrawer.tsx
index 31ad03c877..2916788ac6 100644
--- a/src/views/home/AccountListWithDrawer.tsx
+++ b/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);
@@ -28,7 +30,7 @@ const AccountListWithDrawer: React.FC = () => {
         }}
       />
       <Drawer
-        blockScrollOnMount={false}
+        blockScrollOnMount={!isDynamicModalOpen}
         isOpen={isOpen}
         placement="right"
         onClose={handleClose}
diff --git a/src/views/nfts/NftsView.tsx b/src/views/nfts/NftsView.tsx
index d8a5309528..49cdfa96d5 100644
--- a/src/views/nfts/NftsView.tsx
+++ b/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,7 +60,7 @@ const NFTsViewBase = () => {
           </Box>
 
           <Drawer
-            blockScrollOnMount={false}
+            blockScrollOnMount={!isDynamicModalOpen}
             placement="right"
             onClose={openNFTsPage}
             size="md"
diff --git a/src/views/settings/BeaconDrawerCard.tsx b/src/views/settings/BeaconDrawerCard.tsx
index 7e61c91a56..94a2fb7dd7 100644
--- a/src/views/settings/BeaconDrawerCard.tsx
+++ b/src/views/settings/BeaconDrawerCard.tsx
@@ -14,15 +14,16 @@ 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
-        blockScrollOnMount={false}
+        blockScrollOnMount={!isDynamicModalOpen}
         isOpen={isOpen}
         placement="right"
         onClose={closeDrawer}
diff --git a/src/views/settings/ErrorLogsDrawerCard.tsx b/src/views/settings/ErrorLogsDrawerCard.tsx
index ed199fcd2f..b5f35db83b 100644
--- a/src/views/settings/ErrorLogsDrawerCard.tsx
+++ b/src/views/settings/ErrorLogsDrawerCard.tsx
@@ -18,9 +18,11 @@ 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();
@@ -30,7 +32,7 @@ const ErrorLogsDrawerCard = () => {
     <>
       <SettingsCardWithDrawerIcon left="ErrorLogs" onClick={onOpen} />
       <Drawer
-        blockScrollOnMount={false}
+        blockScrollOnMount={!isDynamicModalOpen}
         isOpen={isOpen}
         placement="right"
         onClose={handleClose}