1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js
jainex cde910faec
Replacing deprecated components in ConfirmationWarningModal (#20416)
* Replacing deprecated components in ConfirmationWarningModal

* Layout and semantic html updates to align with design system conventions

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
2023-08-15 14:57:34 -07:00

121 lines
3.0 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { useI18nContext } from '../../../hooks/useI18nContext';
import {
Display,
FlexDirection,
FontWeight,
TextVariant,
AlignItems,
IconColor,
TextAlign,
} from '../../../helpers/constants/design-system';
import {
Box,
Button,
BUTTON_SIZES,
BUTTON_VARIANT,
Icon,
IconName,
IconSize,
Modal,
ModalContent,
ModalHeader,
ModalOverlay,
Text,
} from '../../component-library';
const ConfirmationWarningModal = ({ onSubmit, onCancel }) => {
const t = useI18nContext();
return (
<Modal
isOpen
onClose={onCancel}
className="confirmation-warning-modal__content"
>
<ModalOverlay />
<ModalContent>
<ModalHeader
childrenWrapperProps={{
display: Display.Flex,
flexDirection: FlexDirection.Column,
alignItems: AlignItems.center,
gap: 4,
}}
>
<Icon
name={IconName.Danger}
color={IconColor.errorDefault}
size={IconSize.Xl}
/>
<Text
variant={TextVariant.headingSm}
as="h4"
fontWeight={FontWeight.Bold}
textAlign={TextAlign.Center}
>
{t('addEthereumChainWarningModalTitle')}
</Text>
</ModalHeader>
<Box marginBottom={4}>
<Text marginTop={4} variant={TextVariant.bodySm}>
{t('addEthereumChainWarningModalHeader', [
<strong key="part-2">
{t('addEthereumChainWarningModalHeaderPartTwo')}
</strong>,
])}
</Text>
<Text marginTop={4} variant={TextVariant.bodySm}>
{t('addEthereumChainWarningModalListHeader')}
</Text>
<ul>
<Text as="li" marginTop={2} variant={TextVariant.bodySm}>
{t('addEthereumChainWarningModalListPointOne')}
</Text>
<Text as="li" marginTop={2} variant={TextVariant.bodySm}>
{t('addEthereumChainWarningModalListPointTwo')}
</Text>
<Text as="li" marginTop={2} variant={TextVariant.bodySm}>
{t('addEthereumChainWarningModalListPointThree')}
</Text>
</ul>
</Box>
<Box display={Display.Flex} gap={4}>
<Button
variant={BUTTON_VARIANT.SECONDARY}
onClick={onCancel}
block
size={BUTTON_SIZES.LG}
>
{t('reject')}
</Button>
<Button
variant={BUTTON_VARIANT.PRIMARY}
onClick={onSubmit}
danger
block
size={BUTTON_SIZES.LG}
>
{t('approveButtonText')}
</Button>
</Box>
</ModalContent>
</Modal>
);
};
ConfirmationWarningModal.propTypes = {
/**
* Function that approves collection
*/
onSubmit: PropTypes.func,
/**
* Function that rejects collection
*/
onCancel: PropTypes.func,
};
export default ConfirmationWarningModal;