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/modals/hold-to-reveal-modal/hold-to-reveal-modal.js
George Marshall 739075662c
Migrating Icon to typescript and deprecating JS component (#18431)
* Migrating Icon to typescript and deprecating JS component

* gw suggestions (#18434)

---------

Co-authored-by: Garrett Bear <gwhisten@gmail.com>
2023-04-04 09:48:04 -07:00

117 lines
3.1 KiB
JavaScript

import PropTypes from 'prop-types';
import React from 'react';
import withModalProps from '../../../../helpers/higher-order-components/with-modal-props';
import Box from '../../../ui/box';
import {
Text,
Button,
BUTTON_TYPES,
ButtonIcon,
} from '../../../component-library';
import { ICON_NAMES } from '../../../component-library/icon/deprecated';
import {
AlignItems,
DISPLAY,
FLEX_DIRECTION,
JustifyContent,
Size,
TextVariant,
} from '../../../../helpers/constants/design-system';
import HoldToRevealButton from '../../hold-to-reveal-button';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
const HoldToRevealModal = ({ onLongPressed, hideModal }) => {
const t = useI18nContext();
const unlock = () => {
onLongPressed();
hideModal();
};
const handleCancel = () => {
hideModal();
};
return (
<Box
className="hold-to-reveal-modal"
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
justifyContent={JustifyContent.flexStart}
padding={6}
>
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
alignItems={AlignItems.center}
justifyContent={JustifyContent.spaceBetween}
marginBottom={6}
>
<Text variant={TextVariant.headingSm}>{t('holdToRevealTitle')}</Text>
<ButtonIcon
className="hold-to-reveal-modal__close"
iconName={ICON_NAMES.CLOSE}
size={Size.SM}
onClick={handleCancel}
ariaLabel={t('close')}
/>
</Box>
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
gap={4}
marginBottom={6}
>
<Text variant={TextVariant.bodyMd}>
{t('holdToRevealContent1', [
<Text
key="hold-to-reveal-2"
variant={TextVariant.bodyMdBold}
as="span"
>
{t('holdToRevealContent2')}
</Text>,
])}
</Text>
<Text variant={TextVariant.bodyMdBold}>
{t('holdToRevealContent3', [
<Text
key="hold-to-reveal-4"
variant={TextVariant.bodyMd}
as="span"
display={DISPLAY.INLINE}
>
{t('holdToRevealContent4')}
</Text>,
<Button
key="hold-to-reveal-5"
type={BUTTON_TYPES.LINK}
size={Size.auto}
href={ZENDESK_URLS.NON_CUSTODIAL_WALLET}
target="_blank"
rel="noopener noreferrer"
>
{t('holdToRevealContent5')}
</Button>,
])}
</Text>
</Box>
<HoldToRevealButton
buttonText={t('holdToReveal')}
onLongPressed={unlock}
marginLeft="auto"
marginRight="auto"
/>
</Box>
);
};
HoldToRevealModal.propTypes = {
// The function to be executed after the hold to reveal long press has been completed
onLongPressed: PropTypes.func.isRequired,
hideModal: PropTypes.func,
};
export default withModalProps(HoldToRevealModal);