feat: show alert before closing transaction flow

src/components/safe-apps/AppFrame/index.tsx

@@ -130,7 +130,6 @@ const AppFrame = ({ appUrl, allowedFeaturesList }: AppFrameProps): ReactElement
       if (signOffChain) {
         setTxFlow(
           <SignMessageFlow
-            onClose={() => setTxFlow(undefined)}
             logoUri={safeAppFromManifest?.iconUrl || ''}
             name={safeAppFromManifest?.name || ''}
             message={message}

src/components/safe-messages/SignMsgButton/index.tsx

@@ -20,7 +20,7 @@ const SignMsgButton = ({ msg, compact = false }: { msg: SafeMessage; compact?: b
 
   const onClick = (e: SyntheticEvent) => {
     e.stopPropagation()
-    setTxFlow(<SignMessageFlow onClose={() => setTxFlow(undefined)} {...msg} />)
+    setTxFlow(<SignMessageFlow {...msg} />)
   }
 
   const isDisabled = !isSignable || isPending

src/components/tx-flow/common/TxFlowExitWarning/index.tsx

@@ -0,0 +1,48 @@
+import { DialogContent, DialogContentText, DialogActions, Button, SvgIcon } from '@mui/material'
+import type { ReactElement } from 'react'
+
+import ModalDialog from '@/components/common/ModalDialog'
+import AlertIcon from '@/public/images/notifications/alert.svg'
+import { useDarkMode } from '@/hooks/useDarkMode'
+
+export const TxFlowExitWarning = ({
+  open,
+  onCancel,
+  onClose,
+}: {
+  open: boolean
+  onCancel: () => void
+  onClose: () => void
+}): ReactElement => {
+  const isDarkMode = useDarkMode()
+  return (
+    <ModalDialog
+      open={open}
+      onClose={onCancel}
+      dialogTitle={
+        <>
+          <SvgIcon
+            component={AlertIcon}
+            inheritViewBox
+            fontSize="inherit"
+            color="error"
+            sx={{ verticalAlign: 'middle', mr: '12px' }}
+          />{' '}
+          Are you sure?
+        </>
+      }
+    >
+      <DialogContent sx={{ p: 'var(--space-3) !important' }}>
+        <DialogContentText color={isDarkMode ? undefined : 'primary'}>
+          Closing this window will discard your current progress.
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions sx={{ padding: 'var(--space-2) var(--space-3) !important' }}>
+        <Button onClick={onCancel}>Back to editing</Button>
+        <Button variant="contained" onClick={onClose}>
+          Leave
+        </Button>
+      </DialogActions>
+    </ModalDialog>
+  )
+}

src/components/tx-flow/flows/SignMessage/SignMessage.test.tsx

@@ -99,7 +99,6 @@ describe('SignMessage', () => {
           logoUri="www.fake.com/test.png"
           name="Test App"
           message={hexlify(toUtf8Bytes(EXAMPLE_MESSAGE))}
-          onClose={jest.fn}
         />,
       )
 
@@ -108,27 +107,15 @@ describe('SignMessage', () => {
 
     it('displays the SafeMessage message', () => {
       const { getByText } = render(
-        <SignMessage
-          logoUri="www.fake.com/test.png"
-          name="Test App"
-          message={EXAMPLE_MESSAGE}
-          requestId="123"
-          onClose={jest.fn}
-        />,
+        <SignMessage logoUri="www.fake.com/test.png" name="Test App" message={EXAMPLE_MESSAGE} requestId="123" />,
       )
 
       expect(getByText('0xaa05af77f274774b8bdc7b61d98bc40da523dc2821fdea555f4d6aa413199bcc')).toBeInTheDocument()
     })
 
     it('generates the SafeMessage hash if not provided', () => {
       const { getByText } = render(
-        <SignMessage
-          logoUri="www.fake.com/test.png"
-          name="Test App"
-          message={EXAMPLE_MESSAGE}
-          requestId="123"
-          onClose={jest.fn}
-        />,
+        <SignMessage logoUri="www.fake.com/test.png" name="Test App" message={EXAMPLE_MESSAGE} requestId="123" />,
       )
 
       expect(getByText('0x73d0948ac608c5d00a6dd26dd396cce79b459307ea365f5a5bd5d3119c2d9708')).toBeInTheDocument()
@@ -176,13 +163,7 @@ describe('SignMessage', () => {
 
     it('renders the message', () => {
       const { getByText } = render(
-        <SignMessage
-          requestId="123"
-          logoUri="www.fake.com/test.png"
-          name="Test App"
-          message={EXAMPLE_MESSAGE}
-          onClose={jest.fn}
-        />,
+        <SignMessage requestId="123" logoUri="www.fake.com/test.png" name="Test App" message={EXAMPLE_MESSAGE} />,
       )
 
       Object.keys(EXAMPLE_MESSAGE.message).forEach((key) => {
@@ -194,27 +175,15 @@ describe('SignMessage', () => {
 
     it('displays the SafeMessage message', () => {
       const { getByText } = render(
-        <SignMessage
-          logoUri="www.fake.com/test.png"
-          name="Test App"
-          message={EXAMPLE_MESSAGE}
-          requestId="123"
-          onClose={jest.fn}
-        />,
+        <SignMessage logoUri="www.fake.com/test.png" name="Test App" message={EXAMPLE_MESSAGE} requestId="123" />,
       )
 
       expect(getByText('0xd5ffe9f6faa9cc9294673fb161b1c7b3e0c98241e90a38fc6c451941f577fb19')).toBeInTheDocument()
     })
 
     it('generates the SafeMessage hash if not provided', () => {
       const { getByText } = render(
-        <SignMessage
-          logoUri="www.fake.com/test.png"
-          name="Test App"
-          message={EXAMPLE_MESSAGE}
-          requestId="123"
-          onClose={jest.fn}
-        />,
+        <SignMessage logoUri="www.fake.com/test.png" name="Test App" message={EXAMPLE_MESSAGE} requestId="123" />,
       )
 
       expect(getByText('0x10c926c4f417e445de3fddc7ad8c864f81b9c81881b88eba646015de10d21613')).toBeInTheDocument()
@@ -233,7 +202,6 @@ describe('SignMessage', () => {
         name="Test App"
         message="Hello world!"
         requestId="123"
-        onClose={jest.fn}
         safeAppId={25}
       />,
     )
@@ -300,13 +268,7 @@ describe('SignMessage', () => {
     jest.spyOn(useSafeMessages, 'useSafeMessage').mockReturnValue(msg)
 
     const { getByText } = render(
-      <SignMessage
-        logoUri="www.fake.com/test.png"
-        name="Test App"
-        message={messageText}
-        requestId="123"
-        onClose={jest.fn}
-      />,
+      <SignMessage logoUri="www.fake.com/test.png" name="Test App" message={messageText} requestId="123" />,
     )
 
     await act(async () => {
@@ -348,7 +310,6 @@ describe('SignMessage', () => {
         name="Test App"
         message="Hello world!"
         requestId="123"
-        onClose={jest.fn}
         safeAppId={25}
       />,
     )
@@ -370,7 +331,6 @@ describe('SignMessage', () => {
         name="Test App"
         message="Hello world!"
         requestId="123"
-        onClose={jest.fn}
         safeAppId={25}
       />,
     )
@@ -396,7 +356,6 @@ describe('SignMessage', () => {
         name="Test App"
         message="Hello world!"
         requestId="123"
-        onClose={jest.fn}
         safeAppId={25}
       />,
     )
@@ -445,13 +404,7 @@ describe('SignMessage', () => {
     jest.spyOn(useSafeMessages, 'useSafeMessage').mockReturnValue(msg)
 
     const { getByText } = render(
-      <SignMessage
-        logoUri="www.fake.com/test.png"
-        name="Test App"
-        message={messageText}
-        requestId="123"
-        onClose={jest.fn}
-      />,
+      <SignMessage logoUri="www.fake.com/test.png" name="Test App" message={messageText} requestId="123" />,
     )
 
     await waitFor(() => {
@@ -484,7 +437,6 @@ describe('SignMessage', () => {
         name="Test App"
         message="Hello world!"
         requestId="123"
-        onClose={jest.fn}
         safeAppId={25}
       />,
     )
@@ -526,7 +478,6 @@ describe('SignMessage', () => {
         name="Test App"
         message="Hello world!"
         requestId="123"
-        onClose={jest.fn}
         safeAppId={25}
       />,
     )

src/components/tx-flow/flows/SignMessage/SignMessage.tsx

@@ -1,19 +1,6 @@
-import {
-  Grid,
-  DialogActions,
-  Button,
-  Box,
-  Typography,
-  DialogContent,
-  SvgIcon,
-  Dialog,
-  DialogTitle,
-  DialogContentText,
-  CardContent,
-  CardActions,
-} from '@mui/material'
+import { Grid, Button, Box, Typography, SvgIcon, CardContent, CardActions } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import { useCallback, useState } from 'react'
+import { useContext } from 'react'
 import { SafeMessageListItemType, SafeMessageStatus } from '@safe-global/safe-gateway-typescript-sdk'
 import type { ReactElement } from 'react'
 import type { SafeMessage } from '@safe-global/safe-gateway-typescript-sdk'
@@ -27,7 +14,7 @@ import ErrorMessage from '@/components/tx/ErrorMessage'
 import useWallet from '@/hooks/wallets/useWallet'
 import { useSafeMessage } from '@/hooks/messages/useSafeMessages'
 import useOnboard, { switchWallet } from '@/hooks/wallets/useOnboard'
-
+import { TxModalContext } from '@/components/tx-flow'
 import CopyButton from '@/components/common/CopyButton'
 import { WrongChainWarning } from '@/components/tx/WrongChainWarning'
 import MsgSigners from '@/components/safe-messages/MsgSigners'
@@ -129,39 +116,7 @@ const AlreadySignedByOwnerMessage = ({ hasSigned }: { hasSigned: boolean }) => {
   )
 }
 
-const ConfirmationDialog = ({
-  open,
-  onCancel,
-  onClose,
-}: {
-  open: boolean
-  onCancel: () => void
-  onClose: () => void
-}) => (
-  <Dialog
-    open={open}
-    onClose={onClose}
-    aria-labelledby="alert-dialog-title"
-    aria-describedby="alert-dialog-description"
-  >
-    <DialogTitle id="alert-dialog-title">Cancel message signing request</DialogTitle>
-    <DialogContent>
-      <DialogContentText id="alert-dialog-description">
-        <Typography variant="body2">If you close this modal, the signing request will be aborted.</Typography>
-      </DialogContentText>
-    </DialogContent>
-    <DialogActions>
-      <Button onClick={onCancel}>Cancel</Button>
-      <Button variant="contained" onClick={onClose} autoFocus>
-        Abort signing
-      </Button>
-    </DialogActions>
-  </Dialog>
-)
-
-type BaseProps = {
-  onClose: () => void
-} & Pick<SafeMessage, 'logoUri' | 'name' | 'message'>
+type BaseProps = Pick<SafeMessage, 'logoUri' | 'name' | 'message'>
 
 // Custom Safe Apps do not have a `safeAppId`
 export type ProposeProps = BaseProps & {
@@ -175,9 +130,9 @@ export type ConfirmProps = BaseProps & {
   requestId?: RequestId
 }
 
-const SignMessage = ({ onClose, message, safeAppId, requestId }: ProposeProps | ConfirmProps): ReactElement => {
+const SignMessage = ({ message, safeAppId, requestId }: ProposeProps | ConfirmProps): ReactElement => {
   // Hooks & variables
-  const [showCloseTooltip, setShowCloseTooltip] = useState<boolean>(false)
+  const { setTxFlow } = useContext(TxModalContext)
   const { palette } = useTheme()
   const { safe } = useSafeInfo()
   const isOwner = useIsSafeOwner()
@@ -200,18 +155,9 @@ const SignMessage = ({ onClose, message, safeAppId, requestId }: ProposeProps |
     safeMessageHash,
     requestId,
     safeAppId,
-    onClose,
+    () => setTxFlow(undefined),
   )
 
-  const handleClose = useCallback(() => {
-    if (requestId && (!ongoingMessage || ongoingMessage.status === SafeMessageStatus.NEEDS_CONFIRMATION)) {
-      // If we are in a Safe app modal we want to keep the modal open
-      setShowCloseTooltip(true)
-    } else {
-      onClose()
-    }
-  }, [onClose, ongoingMessage, requestId])
-
   return (
     <>
       <TxCard>
@@ -255,15 +201,11 @@ const SignMessage = ({ onClose, message, safeAppId, requestId }: ProposeProps |
       <TxCard>
         <CardActions>
           <Box display="flex" justifyContent="space-between" width="100%">
-            {/* TODO: Remove this Cancel button once we can figure out how to move the logic outside */}
-            <Button onClick={handleClose}>Cancel</Button>
-
             <Button variant="contained" color="primary" onClick={onSign} disabled={isDisabled}>
               Sign
             </Button>
           </Box>
         </CardActions>
-        <ConfirmationDialog open={showCloseTooltip} onCancel={() => setShowCloseTooltip(false)} onClose={onClose} />
       </TxCard>
     </>
   )