Add modal dismissal (#230)

Co-authored-by: Andrew Snaith <[email protected]>
Co-authored-by: Thibaut Sardan <[email protected]>

packages/ui/src/components/library/CloseButton.tsx

@@ -0,0 +1,23 @@
+import { IconButton, styled } from '@mui/material'
+import { Close as CloseIcon } from '@mui/icons-material'
+
+interface Props {
+  onClose: () => void
+}
+
+export const CloseButton = ({ onClose }: Props) => (
+  <IconButtonStyled
+    size="small"
+    aria-label="close"
+    color="inherit"
+    onClick={onClose}
+  >
+    <CloseIcon fontSize="small" />
+  </IconButtonStyled>
+)
+
+export const IconButtonStyled = styled(IconButton)`
+  position: absolute;
+  right: 0.5rem;
+  top: 0.5rem;
+`

packages/ui/src/components/modals/ChangeMultisig.tsx

@@ -22,6 +22,7 @@ import { useMultisigProposalNeededFunds } from '../../hooks/useMultisigProposalN
 import { ErrorOutline as ErrorOutlineIcon } from '@mui/icons-material'
 import { useGetSubscanLinks } from '../../hooks/useSubscanLink'
 import { Button } from '../library'
+import { CloseButton } from '../library/CloseButton'
 
 interface Props {
   onClose: () => void
@@ -222,17 +223,6 @@ const ChangeMultisig = ({ onClose, className }: Props) => {
     [getMultisigByAddress]
   )
 
-  const handleClose = useCallback(
-    (_: any, reason: 'backdropClick' | 'escapeKeyDown') => {
-      // Prevent closing unless the calls aren't made yet.
-      // a dedicated close button is present for this step
-      if (!isCallStep) {
-        onClose()
-      }
-    },
-    [isCallStep, onClose]
-  )
-
   const onErrorCallback = useCallback((errorMessage?: string) => {
     !!errorMessage && setCallError(errorMessage)
   }, [])
@@ -356,9 +346,9 @@ const ChangeMultisig = ({ onClose, className }: Props) => {
       fullWidth
       maxWidth={'sm'}
       open
-      onClose={handleClose}
       className={className}
     >
+      {!isCallStep && <CloseButton onClose={onClose} />}
       <DialogTitle>Change multisig</DialogTitle>
       <DialogContent
         className="generalContainer"

packages/ui/src/components/modals/EditNames.tsx

@@ -6,6 +6,7 @@ import { useMultiProxy } from '../../contexts/MultiProxyContext'
 import { AccountNames, useAccountNames } from '../../contexts/AccountNamesContext'
 import AccountEditName, { OnChangeArgs } from '../AccountEditName'
 import { renderMultisigHeading } from '../../pages/multisigHelpers'
+import { CloseButton } from '../library/CloseButton'
 
 interface Props {
   onClose: () => void
@@ -50,9 +51,9 @@ const EditNames = ({ onClose, className }: Props) => {
       fullWidth
       maxWidth={'sm'}
       open
-      onClose={onClose}
       className={className}
     >
+      <CloseButton onClose={onClose} />
       <DialogTitle>Edit names</DialogTitle>
       <DialogContent className="generalContainer">
         <Grid container>

packages/ui/src/components/modals/ProposalSigning.tsx

@@ -16,6 +16,7 @@ import { HexString, MultisigStorageInfo } from '../../types'
 import { useGetSubscanLinks } from '../../hooks/useSubscanLink'
 import { getDisplayArgs, getExtrinsicName } from '../../utils'
 import { useCallInfoFromCallData } from '../../hooks/useCallInfoFromCallData'
+import { CloseButton } from '../library/CloseButton'
 
 interface Props {
   onClose: () => void
@@ -237,9 +238,9 @@ const ProposalSigning = ({
       fullWidth
       maxWidth={'md'}
       open
-      onClose={onClose}
       className={className}
     >
+      <CloseButton onClose={onClose} />
       <DialogTitle>Transaction signing</DialogTitle>
       <DialogContent>
         <Grid container>

packages/ui/src/components/modals/Send.tsx

@@ -27,6 +27,7 @@ import { useMultisigProposalNeededFunds } from '../../hooks/useMultisigProposalN
 import { useCheckBalance } from '../../hooks/useCheckBalance'
 import { useGetSubscanLinks } from '../../hooks/useSubscanLink'
 import FromCallData from '../EasySetup/FromCallData'
+import { CloseButton } from '../library/CloseButton'
 
 const SEND_TOKEN_MENU = 'Send tokens'
 const FROM_CALL_DATA_MENU = 'From call data'
@@ -276,9 +277,9 @@ const Send = ({ onClose, className, onSuccess, onFinalized }: Props) => {
       fullWidth
       maxWidth={'md'}
       open
-      onClose={onClose}
       className={className}
     >
+      <CloseButton onClose={onClose} />
       <DialogTitle>Send tx</DialogTitle>
       <DialogContent className="generalContainer">
         <Grid container>