[BX-832] Dismiss Alert prompts by clicking blurred background area

src/design-system/components/Alert/Alert.tsx

@@ -38,7 +38,7 @@ export const Alert = () => {
   if (!visible) return null;
 
   return (
-    <Prompt zIndex={zIndexes.ALERT} show={visible}>
+    <Prompt zIndex={zIndexes.ALERT} show={visible} handleClose={onClose}>
       <Box padding="20px">
         <Stack space="20px">
           <Box style={{ wordBreak: 'break-all' }}>

src/design-system/components/Prompt/Prompt.tsx

@@ -19,6 +19,7 @@ export const Prompt = ({
   scrimBackground,
   backdropFilter,
   zIndex,
+  handleClose,
 }: {
   show: boolean;
   children: ReactNode;
@@ -27,6 +28,7 @@ export const Prompt = ({
   scrimBackground?: boolean;
   backdropFilter?: BackdropFilter;
   zIndex?: number;
+  handleClose?: () => void;
 }) => {
   const emphasizedShort = animatedRouteTransitionConfig['emphasizedShort'];
   const deceleratedShort = animatedRouteTransitionConfig['deceleratedShort'];
@@ -76,6 +78,7 @@ export const Prompt = ({
           backdropFilter={backdropFilter ?? 'blur(12px)'}
           background="scrim"
           padding={padding}
+          onClick={() => handleClose?.()}
         >
           <Rows alignVertical="center">
             <Row height="content">
@@ -86,6 +89,9 @@ export const Prompt = ({
                 }}
               >
                 <Box
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
                   as={motion.div}
                   initial={{ opacity: 0, scale: 1.1 }}
                   animate={{ opacity: 1, scale: 1 }}

src/entries/popup/pages/send/ContactPrompt.tsx

@@ -210,6 +210,7 @@ export const ContactPrompt = ({
   address,
   action,
   onSaveContactAction,
+  handleClose,
 }: {
   show: boolean;
   address: Address;
@@ -220,13 +221,14 @@ export const ContactPrompt = ({
       action: ContactAction;
     }>
   >;
+  handleClose: () => void;
 }) => {
   const { data: ensAvatar } = useENSAvatar({ addressOrName: address });
   const { data: dominantColor } = useDominantColor({
     imageUrl: ensAvatar ?? undefined,
   });
   return (
-    <Prompt show={show}>
+    <Prompt show={show} handleClose={handleClose}>
       <Box padding="12px">
         <AccentColorProvider color={dominantColor || globalColors.blue50}>
           {action === 'save' || action === 'edit' ? (

src/entries/popup/pages/send/index.tsx

@@ -375,6 +375,9 @@ export function Send() {
         show={contactSaveAction?.show}
         action={contactSaveAction?.action}
         onSaveContactAction={setSaveContactAction}
+        handleClose={() =>
+          setSaveContactAction({ show: false, action: 'save' })
+        }
       />
       <AccentColorProviderWrapper color={assetAccentColor}>
         <ReviewSheet

src/entries/popup/pages/settings/privacy/confirmPasswordPrompt.tsx

@@ -63,7 +63,7 @@ export const ConfirmPasswordPrompt = ({
   }, []);
 
   return (
-    <Prompt show={show}>
+    <Prompt handleClose={handleClose} show={show}>
       <Box padding="12px">
         <Rows space="24px">
           <Row>

src/entries/popup/pages/settings/privacy/walletsAndKeys/newWalletPrompt.tsx

@@ -68,7 +68,7 @@ export const NewWalletPrompt = ({
   );
 
   return (
-    <Prompt show={show}>
+    <Prompt show={show} handleClose={onClose}>
       <Box padding="12px">
         <Rows space="24px">
           <Row>

src/entries/popup/pages/walletSwitcher/removeWalletPrompt.tsx

@@ -87,7 +87,7 @@ export const RemoveWalletPrompt = ({
   };
 
   return (
-    <Prompt show={show}>
+    <Prompt show={show} handleClose={onClose}>
       <Box padding="12px">
         <Rows space="24px">
           <Row>

src/entries/popup/pages/walletSwitcher/renameWalletPrompt.tsx

@@ -101,7 +101,7 @@ export const RenameWalletPrompt = ({
   onClose: () => void;
   account?: Address;
 }) => (
-  <Prompt show={!!account}>
+  <Prompt show={!!account} handleClose={onClose}>
     {account && <RenameWallet account={account} onClose={onClose} />}
   </Prompt>
 );