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