feat: close account selection modal when the modal overlay is clicked (#2473)

Author: alecat88

apps/web/src/components/AccountCard/AccountCard.tsx

@@ -28,7 +28,9 @@ export const AccountCard = () => {
         background={color("100")}
         account={currentAccount}
         id="account-tile"
-        onClick={() => openWith(<AccountSelectorModal />, { canBeOverridden: true })}
+        onClick={() =>
+          openWith(<AccountSelectorModal />, { canBeOverridden: true, closeOnOverlayClick: true })
+        }
       >
         <IconButton
           alignSelf="center"

packages/components/src/components/DynamicDisclosure/DynamicDisclosure.tsx

@@ -24,6 +24,7 @@ interface DynamicDisclosureContextType {
     props?: ThemingProps & {
       onClose?: () => void | Promise<void>;
       closeOnEsc?: boolean;
+      closeOnOverlayClick?: boolean;
       canBeOverridden?: boolean;
     }
   ) => Promise<void>;
@@ -67,6 +68,7 @@ type DisclosureStackItem = {
   props: ThemingProps & {
     onClose: () => void | Promise<void>;
     closeOnEsc?: boolean;
+    closeOnOverlayClick?: boolean;
     canBeOverridden?: boolean; // protects WalletConnect and Beacon modals from being overriden
   };
   formValues: Record<string, any>;
@@ -93,6 +95,7 @@ export const useDynamicDisclosure = () => {
     props: ThemingProps & {
       onClose?: () => void | Promise<void>;
       closeOnEsc?: boolean;
+      closeOnOverlayClick?: boolean;
       canBeOverridden?: boolean;
     } = {}
   ) => {
@@ -152,21 +155,22 @@ export const useDynamicDisclosure = () => {
     hasPrevious: stackRef.current.length > 1,
     allFormValues,
     canBeOverridden: !!currentItem?.props.canBeOverridden,
+    closeOnOverlayClick: !!currentItem?.props.closeOnOverlayClick,
   };
 };
 
 export const useDynamicModal = () => {
   const disclosure = useDynamicDisclosure();
 
-  const { isOpen, props, content, onClose } = disclosure;
+  const { isOpen, props, content, onClose, closeOnOverlayClick } = disclosure;
 
   return {
     ...disclosure,
     content: (
       <Modal
         autoFocus={false}
         blockScrollOnMount={false}
-        closeOnOverlayClick={false}
+        closeOnOverlayClick={closeOnOverlayClick}
         isCentered
         isOpen={isOpen}
         motionPreset="slideInBottom"