diff --git a/packages/ui/src/components/library/CloseButton.tsx b/packages/ui/src/components/library/CloseButton.tsx
new file mode 100644
index 00000000..b1f83b2d
--- /dev/null
+++ b/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) => (
+
+
+
+)
+
+export const IconButtonStyled = styled(IconButton)`
+ position: absolute;
+ right: 0.5rem;
+ top: 0.5rem;
+`
diff --git a/packages/ui/src/components/modals/ChangeMultisig.tsx b/packages/ui/src/components/modals/ChangeMultisig.tsx
index c3c6cfde..ee86892a 100644
--- a/packages/ui/src/components/modals/ChangeMultisig.tsx
+++ b/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 && }
Change multisig
void
@@ -50,9 +51,9 @@ const EditNames = ({ onClose, className }: Props) => {
fullWidth
maxWidth={'sm'}
open
- onClose={onClose}
className={className}
>
+
Edit names
diff --git a/packages/ui/src/components/modals/ProposalSigning.tsx b/packages/ui/src/components/modals/ProposalSigning.tsx
index 2eef3d0d..a2ed8638 100644
--- a/packages/ui/src/components/modals/ProposalSigning.tsx
+++ b/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}
>
+
Transaction signing
diff --git a/packages/ui/src/components/modals/Send.tsx b/packages/ui/src/components/modals/Send.tsx
index cae68780..3b66e4e1 100644
--- a/packages/ui/src/components/modals/Send.tsx
+++ b/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}
>
+
Send tx