From fb092aaef40850d3a0e9e891966d37e26169830d Mon Sep 17 00:00:00 2001
From: Ostap Piatkovskyi <44294945+ost-ptk@users.noreply.github.com>
Date: Thu, 16 Nov 2023 15:29:45 +0200
Subject: [PATCH] fixed issue with an open modal window (#848)

Co-authored-by: ost-ptk <ostap@make.services>
Co-authored-by: Vynnyk Dmytro <simbiatoff@gmail.com>
---
 .../components/account-list/account-list.tsx  |  7 +++-
 .../account-popover/account-popover.tsx       | 42 +++++++++++++------
 src/libs/ui/components/modal/modal.tsx        |  4 +-
 3 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/libs/ui/components/account-list/account-list.tsx b/src/libs/ui/components/account-list/account-list.tsx
index 44db661d3..dd1f85a64 100644
--- a/src/libs/ui/components/account-list/account-list.tsx
+++ b/src/libs/ui/components/account-list/account-list.tsx
@@ -61,7 +61,7 @@ const ButtonContainer = styled(CenteredFlexRow)`
 `;
 
 interface AccountListProps {
-  closeModal: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  closeModal: (e: React.MouseEvent) => void;
 }
 
 export const AccountList = ({ closeModal }: AccountListProps) => {
@@ -143,7 +143,10 @@ export const AccountList = ({ closeModal }: AccountListProps) => {
                   />
                 </AccountNameWithHashListItemContainer>
               </ListItemClickableContainer>
-              <AccountActionsMenuPopover account={account} />
+              <AccountActionsMenuPopover
+                account={account}
+                onClick={closeModal}
+              />
             </AlignedFlexRow>
             {isConnected && (
               <ConnectionStatusBadgeContainer>
diff --git a/src/libs/ui/components/account-popover/account-popover.tsx b/src/libs/ui/components/account-popover/account-popover.tsx
index 960f83d2f..d8cc3182e 100644
--- a/src/libs/ui/components/account-popover/account-popover.tsx
+++ b/src/libs/ui/components/account-popover/account-popover.tsx
@@ -17,9 +17,11 @@ import { Account } from '@background/redux/vault/types';
 
 interface AccountActionsMenuPopoverProps {
   account: Account;
+  onClick?: (e: React.MouseEvent) => void;
 }
 export const AccountActionsMenuPopover = ({
-  account
+  account,
+  onClick
 }: AccountActionsMenuPopoverProps) => {
   const navigate = useTypedNavigate();
   const { t } = useTranslation();
@@ -40,9 +42,13 @@ export const AccountActionsMenuPopover = ({
           {connectedAccountNames.includes(account.name) ? (
             <PopoverLink
               variant="contentAction"
-              onClick={e => {
-                closePopover(e);
+              onClick={event => {
+                closePopover(event);
                 activeOrigin && disconnectAccount(account.name, activeOrigin);
+
+                if (onClick) {
+                  onClick(event);
+                }
               }}
             >
               <SvgIcon
@@ -57,13 +63,17 @@ export const AccountActionsMenuPopover = ({
           ) : (
             <PopoverLink
               variant="contentAction"
-              onClick={() =>
+              onClick={event => {
                 navigate(
                   isAnyAccountConnected
                     ? `${RouterPath.ConnectAnotherAccount}/${account.name}`
                     : RouterPath.NoConnectedAccount
-                )
-              }
+                );
+
+                if (onClick) {
+                  onClick(event);
+                }
+              }}
             >
               <SvgIcon
                 src="assets/icons/link.svg"
@@ -77,11 +87,15 @@ export const AccountActionsMenuPopover = ({
           )}
           <PopoverLink
             variant="contentAction"
-            onClick={() =>
+            onClick={event => {
               navigate(
                 RouterPath.RenameAccount.replace(':accountName', account.name)
-              )
-            }
+              );
+
+              if (onClick) {
+                onClick(event);
+              }
+            }}
           >
             <SvgIcon
               src="assets/icons/edit.svg"
@@ -109,11 +123,15 @@ export const AccountActionsMenuPopover = ({
           </PopoverLink>
           <PopoverLink
             variant="contentAction"
-            onClick={() =>
+            onClick={event => {
               navigate(
                 RouterPath.AccountSettings.replace(':accountName', account.name)
-              )
-            }
+              );
+
+              if (onClick) {
+                onClick(event);
+              }
+            }}
           >
             <SvgIcon
               src="assets/icons/settings.svg"
diff --git a/src/libs/ui/components/modal/modal.tsx b/src/libs/ui/components/modal/modal.tsx
index 03214b238..46fdc775e 100644
--- a/src/libs/ui/components/modal/modal.tsx
+++ b/src/libs/ui/components/modal/modal.tsx
@@ -32,7 +32,7 @@ interface RenderChildrenProps {
 }
 
 interface RenderContentProps {
-  closeModal: (e: MouseEvent<HTMLDivElement>) => void;
+  closeModal: (e: MouseEvent) => void;
 }
 
 export interface ModalProps extends BaseProps {
@@ -52,7 +52,7 @@ export const Modal = ({ children, renderContent, placement }: ModalProps) => {
     }
   });
 
-  const closeModal = (e: MouseEvent<HTMLDivElement>) => {
+  const closeModal = (e: MouseEvent) => {
     e.stopPropagation();
     setIsOpen(false);
   };