mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
97 lines
2.8 KiB
JavaScript
97 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { useHistory } from 'react-router-dom';
|
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
|
// Components
|
|
import Box from '../../ui/box';
|
|
import Button from '../../ui/button';
|
|
import Popover from '../../ui/popover';
|
|
import Typography from '../../ui/typography';
|
|
// Helpers
|
|
import {
|
|
DISPLAY,
|
|
TEXT_ALIGN,
|
|
TypographyVariant,
|
|
BLOCK_SIZES,
|
|
FONT_WEIGHT,
|
|
JustifyContent,
|
|
TextColor,
|
|
} from '../../../helpers/constants/design-system';
|
|
import { ONBOARDING_UNLOCK_ROUTE } from '../../../helpers/constants/routes';
|
|
|
|
export default function RecoveryPhraseReminder({ onConfirm, hasBackedUp }) {
|
|
const t = useI18nContext();
|
|
const history = useHistory();
|
|
|
|
const handleBackUp = () => {
|
|
history.push(ONBOARDING_UNLOCK_ROUTE);
|
|
};
|
|
|
|
return (
|
|
<Popover centerTitle title={t('recoveryPhraseReminderTitle')}>
|
|
<Box
|
|
paddingRight={4}
|
|
paddingBottom={6}
|
|
paddingLeft={4}
|
|
className="recovery-phrase-reminder"
|
|
>
|
|
<Typography
|
|
color={TextColor.textDefault}
|
|
align={TEXT_ALIGN.CENTER}
|
|
variant={TypographyVariant.paragraph}
|
|
boxProps={{ marginTop: 0, marginBottom: 4 }}
|
|
>
|
|
{t('recoveryPhraseReminderSubText')}
|
|
</Typography>
|
|
<Box marginTop={4} marginBottom={8}>
|
|
<ul className="recovery-phrase-reminder__list">
|
|
<li>
|
|
<Typography
|
|
as="span"
|
|
color={TextColor.textDefault}
|
|
fontWeight={FONT_WEIGHT.BOLD}
|
|
>
|
|
{t('recoveryPhraseReminderItemOne')}
|
|
</Typography>
|
|
</li>
|
|
<li>{t('recoveryPhraseReminderItemTwo')}</li>
|
|
<li>
|
|
{hasBackedUp ? (
|
|
t('recoveryPhraseReminderHasBackedUp')
|
|
) : (
|
|
<>
|
|
{t('recoveryPhraseReminderHasNotBackedUp')}
|
|
<Box display={DISPLAY.INLINE_BLOCK} marginLeft={1}>
|
|
<Button
|
|
type="link"
|
|
onClick={handleBackUp}
|
|
style={{
|
|
fontSize: 'inherit',
|
|
padding: 0,
|
|
}}
|
|
>
|
|
{t('recoveryPhraseReminderBackupStart')}
|
|
</Button>
|
|
</Box>
|
|
</>
|
|
)}
|
|
</li>
|
|
</ul>
|
|
</Box>
|
|
<Box justifyContent={JustifyContent.center}>
|
|
<Box width={BLOCK_SIZES.TWO_FIFTHS}>
|
|
<Button type="primary" onClick={onConfirm}>
|
|
{t('recoveryPhraseReminderConfirm')}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Popover>
|
|
);
|
|
}
|
|
|
|
RecoveryPhraseReminder.propTypes = {
|
|
hasBackedUp: PropTypes.bool.isRequired,
|
|
onConfirm: PropTypes.func.isRequired,
|
|
};
|