Onboarding V2 Secure Your Wallet view (#12208)
* secure-your-wallet onboarding viewfeature/default_network_editable
Alex Donesky
3 years ago
committed by
GitHub
parent
fc41321470
commit
614228cba7
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,47 @@ |
||||
.secure-your-wallet { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
max-width: 1000px; |
||||
max-height: 1300px; |
||||
|
||||
&__details { |
||||
max-width: 550px; |
||||
} |
||||
|
||||
&__actions { |
||||
button { |
||||
margin: 16px; |
||||
} |
||||
} |
||||
|
||||
&__list { |
||||
list-style: disc inside; |
||||
|
||||
li { |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
|
||||
&__highlighted { |
||||
background-color: $primary-2; |
||||
padding: 12px; |
||||
border-radius: 10px; |
||||
} |
||||
} |
||||
|
||||
.skip-srp-backup-popover { |
||||
width: 365px; |
||||
|
||||
&__checkbox { |
||||
margin: 8px 12px 0 0; |
||||
} |
||||
|
||||
&__footer { |
||||
button { |
||||
width: 140px; |
||||
margin: 0 10px; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,167 @@ |
||||
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, |
||||
} from '../../../helpers/constants/design-system'; |
||||
import ProgressBar 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', |
||||
}; |
||||
|
||||
const defaultLang = subtitles[currentLocale] ? currentLocale : 'en'; |
||||
return ( |
||||
<div className="secure-your-wallet"> |
||||
{showSkipSRPBackupPopover && ( |
||||
<SkipSRPBackup handleClose={() => setShowSkipSRPBackupPopover(false)} /> |
||||
)} |
||||
<ProgressBar stage="SEED_PHRASE_VIDEO" /> |
||||
<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} |
||||
textAlign={TEXT_ALIGN.CENTER} |
||||
marginBottom={6} |
||||
> |
||||
<Typography |
||||
variant={TYPOGRAPHY.H4} |
||||
className="secure-your-wallet__details" |
||||
> |
||||
{t('seedPhraseIntroTitleCopy')} |
||||
</Typography> |
||||
</Box> |
||||
<Box> |
||||
<video controls style={{ borderRadius: '10px' }}> |
||||
<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} |
||||
width="10/12" |
||||
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN} |
||||
className="secure-your-wallet__actions" |
||||
> |
||||
<Button |
||||
type="secondary" |
||||
rounded |
||||
large |
||||
onClick={handleClickNotRecommended} |
||||
> |
||||
{t('seedPhraseIntroNotRecommendedButtonCopy')} |
||||
</Button> |
||||
<Button type="primary" rounded large onClick={handleClickRecommended}> |
||||
{t('seedPhraseIntroRecommendedButtonCopy')} |
||||
</Button> |
||||
</Box> |
||||
<Box marginBottom={4} textAlign={TEXT_ALIGN.CENTER}> |
||||
<Typography |
||||
tag="span" |
||||
variant={TYPOGRAPHY.H4} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
boxProps={{ display: 'block' }} |
||||
> |
||||
{t('seedPhraseIntroSidebarTitleOne')} |
||||
</Typography> |
||||
<Typography tag="span" variant={TYPOGRAPHY.H4}> |
||||
{t('seedPhraseIntroSidebarCopyOne')} |
||||
</Typography> |
||||
</Box> |
||||
<Box marginBottom={4} textAlign={TEXT_ALIGN.CENTER}> |
||||
<Typography |
||||
tag="span" |
||||
variant={TYPOGRAPHY.H4} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
boxProps={{ display: 'block' }} |
||||
> |
||||
{t('seedPhraseIntroSidebarTitleTwo')} |
||||
</Typography> |
||||
<ul className="secure-your-wallet__list"> |
||||
<li>{t('seedPhraseIntroSidebarBulletOne')}</li> |
||||
<li>{t('seedPhraseIntroSidebarBulletTwo')}</li> |
||||
<li>{t('seedPhraseIntroSidebarBulletThree')}</li> |
||||
<li>{t('seedPhraseIntroSidebarBulletFour')}</li> |
||||
</ul> |
||||
</Box> |
||||
<Box marginBottom={6} textAlign={TEXT_ALIGN.CENTER}> |
||||
<Typography |
||||
tag="span" |
||||
variant={TYPOGRAPHY.H4} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
boxProps={{ display: 'block' }} |
||||
> |
||||
{t('seedPhraseIntroSidebarTitleThree')} |
||||
</Typography> |
||||
<Typography tag="span" variant={TYPOGRAPHY.H4}> |
||||
{t('seedPhraseIntroSidebarCopyTwo')} |
||||
</Typography> |
||||
</Box> |
||||
<Box |
||||
className="secure-your-wallet__highlighted" |
||||
marginBottom={2} |
||||
textAlign={TEXT_ALIGN.CENTER} |
||||
> |
||||
<Typography tag="span" variant={TYPOGRAPHY.H4}> |
||||
{t('seedPhraseIntroSidebarCopyThree')} |
||||
</Typography> |
||||
</Box> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,15 @@ |
||||
import React from 'react'; |
||||
import SecureYourWallet from './secure-your-wallet'; |
||||
|
||||
export default { |
||||
title: 'Onboarding - Secure Your Wallet', |
||||
id: __filename, |
||||
}; |
||||
|
||||
export const Base = () => { |
||||
return ( |
||||
<div style={{ maxHeight: '2000px' }}> |
||||
<SecureYourWallet /> |
||||
</div> |
||||
); |
||||
}; |
||||
@ -0,0 +1,59 @@ |
||||
import React from 'react'; |
||||
import { fireEvent } from '@testing-library/react'; |
||||
import configureMockStore from 'redux-mock-store'; |
||||
import reactRouterDom from 'react-router-dom'; |
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers'; |
||||
import { ONBOARDING_COMPLETION_ROUTE } from '../../../helpers/constants/routes'; |
||||
import SecureYourWallet from './secure-your-wallet'; |
||||
|
||||
describe('Secure Your Wallet Onboarding View', () => { |
||||
const useHistoryOriginal = reactRouterDom.useHistory; |
||||
const pushMock = jest.fn(); |
||||
beforeAll(() => { |
||||
jest |
||||
.spyOn(reactRouterDom, 'useHistory') |
||||
.mockImplementation() |
||||
.mockReturnValue({ push: pushMock }); |
||||
}); |
||||
|
||||
afterAll(() => { |
||||
reactRouterDom.useHistory = useHistoryOriginal; |
||||
}); |
||||
|
||||
const mockStore = { |
||||
metamask: { |
||||
provider: { |
||||
type: 'test', |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
const store = configureMockStore()(mockStore); |
||||
it('should show a popover asking the user if they want to skip account security if they click "Remind me later"', () => { |
||||
const { queryAllByText, getByText } = renderWithProvider( |
||||
<SecureYourWallet />, |
||||
store, |
||||
); |
||||
const remindMeLaterButton = getByText('Remind me later (not recommended)'); |
||||
expect(queryAllByText('Skip Account Security?')).toHaveLength(0); |
||||
fireEvent.click(remindMeLaterButton); |
||||
expect(queryAllByText('Skip Account Security?')).toHaveLength(1); |
||||
}); |
||||
|
||||
it('should not be able to click "skip" until "Skip Account Security" terms are agreed to', () => { |
||||
const { getByText, getByTestId } = renderWithProvider( |
||||
<SecureYourWallet />, |
||||
store, |
||||
); |
||||
const remindMeLaterButton = getByText('Remind me later (not recommended)'); |
||||
fireEvent.click(remindMeLaterButton); |
||||
const skipButton = getByText('Skip'); |
||||
fireEvent.click(skipButton); |
||||
expect(pushMock).toHaveBeenCalledTimes(0); |
||||
const checkbox = getByTestId('skip-srp-backup-popover-checkbox'); |
||||
fireEvent.click(checkbox); |
||||
fireEvent.click(skipButton); |
||||
expect(pushMock).toHaveBeenCalledTimes(1); |
||||
expect(pushMock).toHaveBeenCalledWith(ONBOARDING_COMPLETION_ROUTE); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,79 @@ |
||||
import React, { useState } from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { useHistory } from 'react-router-dom'; |
||||
import { useI18nContext } from '../../../hooks/useI18nContext'; |
||||
import Button from '../../../components/ui/button'; |
||||
import Popover from '../../../components/ui/popover'; |
||||
import Box from '../../../components/ui/box'; |
||||
import Typography from '../../../components/ui/typography'; |
||||
import { |
||||
ALIGN_ITEMS, |
||||
FLEX_DIRECTION, |
||||
FONT_WEIGHT, |
||||
JUSTIFY_CONTENT, |
||||
TYPOGRAPHY, |
||||
} from '../../../helpers/constants/design-system'; |
||||
import Checkbox from '../../../components/ui/check-box'; |
||||
import { ONBOARDING_COMPLETION_ROUTE } from '../../../helpers/constants/routes'; |
||||
|
||||
export default function SkipSRPBackup({ handleClose }) { |
||||
const [checked, setChecked] = useState(false); |
||||
const t = useI18nContext(); |
||||
const history = useHistory(); |
||||
return ( |
||||
<Popover |
||||
className="skip-srp-backup-popover" |
||||
footer={ |
||||
<Box |
||||
className="skip-srp-backup-popover__footer" |
||||
justifyContent={JUSTIFY_CONTENT.CENTER} |
||||
alignItems={ALIGN_ITEMS.CENTER} |
||||
> |
||||
<Button onClick={handleClose} type="secondary" rounded> |
||||
{t('goBack')} |
||||
</Button> |
||||
<Button |
||||
disabled={!checked} |
||||
type="primary" |
||||
rounded |
||||
onClick={() => history.push(ONBOARDING_COMPLETION_ROUTE)} |
||||
> |
||||
{t('skip')} |
||||
</Button> |
||||
</Box> |
||||
} |
||||
> |
||||
<Box |
||||
flexDirection={FLEX_DIRECTION.COLUMN} |
||||
alignItems={ALIGN_ITEMS.CENTER} |
||||
justifyContent={JUSTIFY_CONTENT.CENTER} |
||||
margin={4} |
||||
> |
||||
<img src="./images/warning-icon.png" /> |
||||
<Typography variant={TYPOGRAPHY.h3} fontWeight={FONT_WEIGHT.BOLD}> |
||||
{t('skipAccountSecurity')} |
||||
</Typography> |
||||
<Box justifyContent={JUSTIFY_CONTENT.CENTER} margin={3}> |
||||
<Checkbox |
||||
className="skip-srp-backup-popover__checkbox" |
||||
onClick={() => { |
||||
setChecked(!checked); |
||||
}} |
||||
checked={checked} |
||||
dataTestId="skip-srp-backup-popover-checkbox" |
||||
/> |
||||
<Typography |
||||
className="skip-srp-backup-popover__details" |
||||
variant={TYPOGRAPHY.h7} |
||||
> |
||||
{t('skipAccountSecurityDetails')} |
||||
</Typography> |
||||
</Box> |
||||
</Box> |
||||
</Popover> |
||||
); |
||||
} |
||||
|
||||
SkipSRPBackup.propTypes = { |
||||
handleClose: PropTypes.func, |
||||
}; |
||||
Loading…
Reference in new issue