Adding recovery phrase video to onboarding process (#10717)
* Adding recovery phrase video to onboarding process Adding english subtitles * Support textAlign in Box, converting sidebar to Boxfeature/default_network_editable
ryanml
4 years ago
committed by
GitHub
parent
57be0e49d1
commit
9e918b6026
@ -0,0 +1,116 @@ |
||||
WEBVTT |
||||
|
||||
1 |
||||
00:00:00.780 --> 00:00:04.580 |
||||
MetaMask is a new way to connect |
||||
to sites and applications. |
||||
|
||||
2 |
||||
00:00:04.580 --> 00:00:08.860 |
||||
On traditional websites, a central database |
||||
or bank is responsible for controlling and |
||||
|
||||
3 |
||||
00:00:08.860 --> 00:00:10.179 |
||||
recovering your accounts. |
||||
|
||||
4 |
||||
00:00:10.179 --> 00:00:15.050 |
||||
But on MetaMask, all of the power belongs |
||||
to the holder of a master key. |
||||
|
||||
5 |
||||
00:00:15.050 --> 00:00:18.460 |
||||
Whoever holds the key, controls the accounts. |
||||
|
||||
6 |
||||
00:00:18.460 --> 00:00:21.110 |
||||
Your secret recovery phrase |
||||
is your "master key". |
||||
|
||||
7 |
||||
00:00:21.110 --> 00:00:26.070 |
||||
It's a series of 12 words that are generated |
||||
when you first set up MetaMask, which allow |
||||
|
||||
8 |
||||
00:00:26.070 --> 00:00:30.120 |
||||
you to recover your wallet and funds if you |
||||
ever lose access. |
||||
|
||||
9 |
||||
00:00:30.120 --> 00:00:33.451 |
||||
It's important that you secure |
||||
your wallet by keeping your |
||||
|
||||
10 |
||||
00:00:33.451 --> 00:00:37.510 |
||||
secret recovery phrase |
||||
very safe, and very secret. |
||||
|
||||
11 |
||||
00:00:37.510 --> 00:00:41.429 |
||||
If anyone gets access to it, they will have |
||||
the "master key" to your wallet and can |
||||
|
||||
12 |
||||
00:00:41.429 --> 00:00:45.190 |
||||
freely access and take all of your funds. |
||||
|
||||
13 |
||||
00:00:45.190 --> 00:00:50.109 |
||||
To secure your MetaMask wallet you'll want |
||||
to safely save your secret recovery phrase. |
||||
|
||||
14 |
||||
00:00:50.109 --> 00:00:54.930 |
||||
You can write it down, hide it somewhere, |
||||
put it in a safe deposit box |
||||
|
||||
15 |
||||
00:00:54.930 --> 00:00:57.729 |
||||
or use a secure password manager. |
||||
|
||||
16 |
||||
00:00:57.729 --> 00:01:01.050 |
||||
Some users even engrave their |
||||
phrase onto a metal plate! |
||||
|
||||
17 |
||||
00:01:01.050 --> 00:01:04.440 |
||||
Nobody, not even the team |
||||
at MetaMask, can help you |
||||
|
||||
18 |
||||
00:01:04.440 --> 00:01:07.820 |
||||
recover your wallet if you lose |
||||
your secret recovery phrase. |
||||
|
||||
19 |
||||
00:01:07.820 --> 00:01:12.072 |
||||
If you haven't written down your secret recovery |
||||
phrase and stored it somewhere safe, |
||||
|
||||
20 |
||||
00:01:12.072 --> 00:01:15.492 |
||||
do it now. We'll wait. |
||||
|
||||
21 |
||||
00:01:15.500 --> 00:01:20.780 |
||||
And remember, never share your secret recovery |
||||
phrase with anyone: not even us. |
||||
|
||||
22 |
||||
00:01:20.780 --> 00:01:24.910 |
||||
If anyone ever asks you for it, |
||||
they're trying to scam you. |
||||
|
||||
23 |
||||
00:01:24.910 --> 00:01:26.250 |
||||
That's it! |
||||
|
||||
24 |
||||
00:01:26.250 --> 00:01:31.020 |
||||
Now you know what a secret recovery phrase |
||||
is and how to keep your wallet safe and secure. |
||||
|
||||
Binary file not shown.
@ -0,0 +1 @@ |
||||
export { default } from './seed-phrase-intro.component'; |
||||
@ -0,0 +1,44 @@ |
||||
.seed-phrase-intro { |
||||
&__sections { |
||||
display: flex; |
||||
|
||||
@media screen and (min-width: $break-large) { |
||||
flex-direction: row; |
||||
} |
||||
|
||||
@media screen and (max-width: 970px) { |
||||
flex-direction: column; |
||||
} |
||||
} |
||||
|
||||
&__left { |
||||
flex: 3; |
||||
min-width: 0; |
||||
} |
||||
|
||||
&__right { |
||||
flex: 1; |
||||
min-width: 0; |
||||
|
||||
@media screen and (max-width: 970px) { |
||||
margin-top: 24px; |
||||
} |
||||
} |
||||
|
||||
video { |
||||
border-radius: 8px; |
||||
|
||||
@media screen and (max-width: 970px) { |
||||
width: 95%; |
||||
} |
||||
} |
||||
|
||||
&__copy { |
||||
max-width: 696px; |
||||
} |
||||
|
||||
&__sidebar_list { |
||||
list-style: disc; |
||||
padding-left: 20px; |
||||
} |
||||
} |
||||
@ -0,0 +1,121 @@ |
||||
import React from 'react'; |
||||
import { useHistory } from 'react-router-dom'; |
||||
import { useI18nContext } from '../../../../hooks/useI18nContext'; |
||||
// Components
|
||||
import Box from '../../../../components/ui/box'; |
||||
import Button from '../../../../components/ui/button'; |
||||
import Typography from '../../../../components/ui/typography'; |
||||
import { |
||||
BLOCK_SIZES, |
||||
COLORS, |
||||
TYPOGRAPHY, |
||||
FONT_WEIGHT, |
||||
SIZES, |
||||
BORDER_STYLE, |
||||
} from '../../../../helpers/constants/design-system'; |
||||
// Routes
|
||||
import { INITIALIZE_SEED_PHRASE_ROUTE } from '../../../../helpers/constants/routes'; |
||||
|
||||
export default function SeedPhraseIntro() { |
||||
const t = useI18nContext(); |
||||
const history = useHistory(); |
||||
|
||||
const handleNextStep = () => { |
||||
history.push(INITIALIZE_SEED_PHRASE_ROUTE); |
||||
}; |
||||
|
||||
return ( |
||||
<div className="seed-phrase-intro"> |
||||
<div className="seed-phrase-intro__sections"> |
||||
<div className="seed-phrase-intro__left"> |
||||
<Typography |
||||
color={COLORS.BLACK} |
||||
variant={TYPOGRAPHY.H1} |
||||
boxProps={{ marginTop: 0, marginBottom: 4 }} |
||||
> |
||||
{t('seedPhraseIntroTitle')} |
||||
</Typography> |
||||
<Typography |
||||
color={COLORS.BLACK} |
||||
boxProps={{ marginBottom: 4 }} |
||||
variant={TYPOGRAPHY.Paragraph} |
||||
className="seed-phrase-intro__copy" |
||||
> |
||||
{t('seedPhraseIntroTitleCopy')} |
||||
</Typography> |
||||
<Box marginBottom={4}> |
||||
<video controls> |
||||
<source |
||||
type="video/webm" |
||||
src="./images/videos/recovery-onboarding/video.webm" |
||||
/> |
||||
<track |
||||
default |
||||
srcLang="en" |
||||
label="English" |
||||
kind="subtitles" |
||||
src="./images/videos/recovery-onboarding/subtitles-en.vtt" |
||||
/> |
||||
</video> |
||||
</Box> |
||||
<Box width={BLOCK_SIZES.ONE_THIRD}> |
||||
<Button type="primary" onClick={handleNextStep}> |
||||
{t('next')} |
||||
</Button> |
||||
</Box> |
||||
</div> |
||||
<div className="seed-phrase-intro__right"> |
||||
<Box |
||||
padding={4} |
||||
borderWidth={1} |
||||
borderRadius={SIZES.MD} |
||||
borderColor={COLORS.UI2} |
||||
borderStyle={BORDER_STYLE.SOLID} |
||||
> |
||||
<Box marginBottom={4}> |
||||
<Typography |
||||
tag="span" |
||||
color={COLORS.BLACK} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
boxProps={{ display: 'block' }} |
||||
> |
||||
{t('seedPhraseIntroSidebarTitleOne')} |
||||
</Typography> |
||||
<span>{t('seedPhraseIntroSidebarCopyOne')}</span> |
||||
</Box> |
||||
<Box marginBottom={4}> |
||||
<Typography |
||||
tag="span" |
||||
color={COLORS.BLACK} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
boxProps={{ display: 'block' }} |
||||
> |
||||
{t('seedPhraseIntroSidebarTitleTwo')} |
||||
</Typography> |
||||
<ul className="seed-phrase-intro__sidebar_list"> |
||||
<li>{t('seedPhraseIntroSidebarBulletOne')}</li> |
||||
<li>{t('seedPhraseIntroSidebarBulletTwo')}</li> |
||||
<li>{t('seedPhraseIntroSidebarBulletThree')}</li> |
||||
<li>{t('seedPhraseIntroSidebarBulletFour')}</li> |
||||
</ul> |
||||
</Box> |
||||
<Box marginBottom={4}> |
||||
<Typography |
||||
tag="span" |
||||
color={COLORS.BLACK} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
boxProps={{ display: 'block' }} |
||||
> |
||||
{t('seedPhraseIntroSidebarTitleThree')} |
||||
</Typography> |
||||
<span>{t('seedPhraseIntroSidebarCopyTwo')}</span> |
||||
</Box> |
||||
<Box marginBottom={4}> |
||||
<span>{t('seedPhraseIntroSidebarCopyThree')}</span> |
||||
</Box> |
||||
</Box> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue