From 9c60874e75685e4c2e010908e57b6636fd4deed2 Mon Sep 17 00:00:00 2001
From: Sergey Kintsel <sergey.kintsel@trili.tech>
Date: Sun, 1 Oct 2023 23:53:32 +0100
Subject: [PATCH] Fix account drawer closure on esc

---
 src/views/home/AccountListWithDrawer.tsx | 32 +++++++++++++-----------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/views/home/AccountListWithDrawer.tsx b/src/views/home/AccountListWithDrawer.tsx
index 2916788ac6..469c19a61f 100644
--- a/src/views/home/AccountListWithDrawer.tsx
+++ b/src/views/home/AccountListWithDrawer.tsx
@@ -1,11 +1,12 @@
 import { useDisclosure } from "@chakra-ui/hooks";
 import { Drawer, DrawerBody, DrawerContent, DrawerOverlay } from "@chakra-ui/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import AccountCard from "../../components/AccountDrawer";
 import { useAllAccounts } from "../../utils/hooks/accountHooks";
 import { AccountsList } from "./AccountsList";
 import { DrawerTopButtons } from "./DrawerTopButtons";
 import { useDynamicModal } from "../../components/DynamicModal";
+import colors from "../../style/colors";
 
 const AccountListWithDrawer: React.FC = () => {
   const [selected, setSelected] = useState<string | null>(null);
@@ -14,32 +15,33 @@ const AccountListWithDrawer: React.FC = () => {
   const { isOpen, onClose: closeDrawer, onOpen } = useDisclosure();
   const { isOpen: isDynamicModalOpen } = useDynamicModal();
 
-  const handleClose = () => {
-    setSelected(null);
-    closeDrawer();
-  };
+  // For some reason the drawer doesn't close on esc for this particular component
+  // Until we figure out why, we'll have this crutch
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        closeDrawer();
+      }
+    };
+    document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [closeDrawer]);
 
   const account = allAccounts.find(account => account.address.pkh === selected);
   return (
     <>
-      <AccountsList
-        onOpen={onOpen}
-        selected={selected}
-        onSelect={pkh => {
-          setSelected(pkh);
-        }}
-      />
+      <AccountsList onOpen={onOpen} selected={selected} onSelect={setSelected} />
       <Drawer
         blockScrollOnMount={!isDynamicModalOpen}
         isOpen={isOpen}
         placement="right"
-        onClose={handleClose}
+        onClose={closeDrawer}
         size="md"
         autoFocus={false}
       >
         <DrawerOverlay />
-        <DrawerContent maxW="594px" bg="umami.gray.900">
-          <DrawerTopButtons onClose={handleClose} />
+        <DrawerContent maxW="594px" bg={colors.gray[900]}>
+          <DrawerTopButtons onClose={closeDrawer} />
           <DrawerBody>{account && <AccountCard account={account} />}</DrawerBody>
         </DrawerContent>
       </Drawer>