1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js
2022-07-31 13:26:40 -05:00

178 lines
5.3 KiB
JavaScript

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';
import { useSelector } from 'react-redux';
import Box from '../../../components/ui/box';
import Button from '../../../components/ui/button';
import Typography from '../../../components/ui/typography';
import {
TEXT_ALIGN,
TYPOGRAPHY,
JUSTIFY_CONTENT,
FONT_WEIGHT,
DISPLAY,
} from '../../../helpers/constants/design-system';
import {
ThreeStepProgressBar,
threeStepStages,
} from '../../../components/app/step-progress-bar';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { ONBOARDING_REVIEW_SRP_ROUTE } from '../../../helpers/constants/routes';
import { getCurrentLocale } from '../../../ducks/metamask/metamask';
import SkipSRPBackup from './skip-srp-backup-popover';
export default function SecureYourWallet() {
const history = useHistory();
const t = useI18nContext();
const currentLocale = useSelector(getCurrentLocale);
const [showSkipSRPBackupPopover, setShowSkipSRPBackupPopover] =
useState(false);
const handleClickRecommended = () => {
history.push(ONBOARDING_REVIEW_SRP_ROUTE);
};
const handleClickNotRecommended = () => {
setShowSkipSRPBackupPopover(true);
};
const subtitles = {
en: 'English',
es: 'Spanish',
hi: 'Hindi',
id: 'Indonesian',
ja: 'Japanese',
ko: 'Korean',
pt: 'Portuguese',
ru: 'Russian',
tl: 'Tagalog',
vi: 'Vietnamese',
de: 'German',
el: 'Greek',
fr: 'French',
tr: 'Turkish',
zh: 'Chinese - China',
};
const defaultLang = subtitles[currentLocale] ? currentLocale : 'en';
return (
<div className="secure-your-wallet">
{showSkipSRPBackupPopover && (
<SkipSRPBackup handleClose={() => setShowSkipSRPBackupPopover(false)} />
)}
<ThreeStepProgressBar
stage={threeStepStages.RECOVERY_PHRASE_VIDEO}
marginBottom={4}
/>
<Box
justifyContent={JUSTIFY_CONTENT.CENTER}
textAlign={TEXT_ALIGN.CENTER}
marginBottom={4}
>
<Typography variant={TYPOGRAPHY.H2} fontWeight={FONT_WEIGHT.BOLD}>
{t('seedPhraseIntroTitle')}
</Typography>
</Box>
<Box justifyContent={JUSTIFY_CONTENT.CENTER} marginBottom={6}>
<Typography
variant={TYPOGRAPHY.H4}
className="secure-your-wallet__details"
>
{t('seedPhraseIntroTitleCopy')}
</Typography>
</Box>
<Box>
<video className="secure-your-wallet__video" controls>
<source
type="video/webm"
src="./images/videos/recovery-onboarding/video.webm"
/>
{Object.keys(subtitles).map((key) => {
return (
<track
default={Boolean(key === defaultLang)}
srcLang={key}
label={subtitles[key]}
key={`${key}-subtitles`}
kind="subtitles"
src={`./images/videos/recovery-onboarding/subtitles/${key}.vtt`}
/>
);
})}
</video>
</Box>
<Box
margin={8}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
className="secure-your-wallet__actions"
>
<Button
data-testid="secure-wallet-later"
type="secondary"
rounded
large
onClick={handleClickNotRecommended}
>
{t('seedPhraseIntroNotRecommendedButtonCopy')}
</Button>
<Button
data-testid="secure-wallet-recommended"
type="primary"
rounded
large
onClick={handleClickRecommended}
>
{t('seedPhraseIntroRecommendedButtonCopy')}
</Button>
</Box>
<Box className="secure-your-wallet__desc">
<Box marginBottom={4}>
<Typography
tag="p"
variant={TYPOGRAPHY.H4}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ display: DISPLAY.BLOCK }}
>
{t('seedPhraseIntroSidebarTitleOne')}
</Typography>
<Typography tag="p" variant={TYPOGRAPHY.H4}>
{t('seedPhraseIntroSidebarCopyOne')}
</Typography>
</Box>
<Box marginBottom={4}>
<Typography
tag="p"
variant={TYPOGRAPHY.H4}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ display: DISPLAY.BLOCK }}
>
{t('seedPhraseIntroSidebarTitleTwo')}
</Typography>
<ul className="secure-your-wallet__list">
<li>{t('seedPhraseIntroSidebarBulletOne')}</li>
<li>{t('seedPhraseIntroSidebarBulletThree')}</li>
<li>{t('seedPhraseIntroSidebarBulletFour')}</li>
</ul>
</Box>
<Box marginBottom={6}>
<Typography
tag="p"
variant={TYPOGRAPHY.H4}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ display: DISPLAY.BLOCK }}
>
{t('seedPhraseIntroSidebarTitleThree')}
</Typography>
<Typography tag="p" variant={TYPOGRAPHY.H4}>
{t('seedPhraseIntroSidebarCopyTwo')}
</Typography>
</Box>
<Box className="secure-your-wallet__highlighted" marginBottom={2}>
<Typography tag="p" variant={TYPOGRAPHY.H4}>
{t('seedPhraseIntroSidebarCopyThree')}
</Typography>
</Box>
</Box>
</div>
);
}