Skip to content

Commit

Permalink
feat(backup): scam mitigation copy for recovery phrase
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheLeoB
TheLeoB committed Jan 27, 2021
1 parent a1edc9e commit 48ac6a5
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 51 deletions.
17 changes: 11 additions & 6 deletions packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts
View file
Expand Up @@ -1016,10 +1016,14 @@ type MessagesType = {
'modals.qrcode.scan': 'Scan QR Code'
'modals.qrcode.title': 'Request'
'modals.qrcode.tooltip': 'Ask the sender to scan this QR code with their bitcoin wallet.'
'modals.recoveryphrase.backupyourwallet.backupnow': 'Backup Now'
'modals.recoveryphrase.backupyourwallet.content.one': 'Your backup phrase will allow you to recover your crypto if you lose access to your wallet.'
'modals.recoveryphrase.backupyourwallet.content.two': 'Please write down these 12 words in order and keep them somwhere safe. Never share it with anyone. Your backup phrase is the key to recovering your crypto if you ever lose your password.'
'modals.recoveryphrase.backupyourwallet.header': 'Backup Your Wallet'
'modals.recoveryphrase.backupyourwallet.viewphrase': 'View Recovery Phrase'
'modals.recoveryphrase.backupyourwallet.content.subheader': "In crypto, when you hold the private keys, you're in control of the funds in your Private Key Wallet. The downside is that WHOEVER holds your private keys can control your Private Key Wallet."
'modals.recoveryphrase.backupyourwallet.content.youmust': 'So you must:'
'modals.recoveryphrase.backupyourwallet.content.one': '1. Write down the 12 word phrase on the next screen in the exact order it appears.'
'modals.recoveryphrase.backupyourwallet.content.two': '2. Keep it safe, ideally on a securely stored piece of paper (in other words, not a digital copy).'
'modals.recoveryphrase.backupyourwallet.content.three': '3. NEVER share your backup phrase with anyone.'
'modals.recoveryphrase.backupyourwallet.content.warning1': 'Warning: If someone has your backup phrase they will have access to your Private Key Wallet and can withdraw funds.'
'modals.recoveryphrase.backupyourwallet.content.warning2': 'Blockchain.com will never as to view or receive your recovery phrase.'
'modals.recoveryphrase.backupyourwallet.later': 'Do This Later'
'modals.recoveryphrase.confirmwords.body': 'Please enter the words that match the numbers you see below.'
'modals.recoveryphrase.confirmwords.button': 'Confirm'
Expand Down Expand Up @@ -2148,9 +2152,10 @@ type MessagesType = {
'scenes.securitysettings.advanced.walletpassword.weakpassword': 'Your password is too weak'
'scenes.securitysettings.advancedsettings.walletaccesstor.settings.allow': 'Allow'
'scenes.securitysettings.advancedsettings.walletaccesstor.settings.block': 'Block'
'scenes.securitysettings.basicsecurity.recoveryphrase.description': 'Your backup phrase contains all of the private keys within your wallet. Please write these 12 words down, in order, and keep them somewhere safe offline. This phrase gives you (or anyone who has it) a way to restore your wallet and access your funds.'
'scenes.securitysettings.basicsecurity.recoveryphrase.description2': 'In the event that you lose your password or our service is unavailable, this will be your safety net.'
'scenes.securitysettings.basicsecurity.recoveryphrase.description': 'Your Secret Recovery Phrase is needed to recover your wallet in case the password is lost. Please write these 12 words down, in order, and keep them somewhere safe offline. The secret recovery phrase gives you (or anyone who has it) a way to restore your wallet and access your funds. In the event that you lose your password or our service is unavailable, this will be your safety net.'
'scenes.securitysettings.basicsecurity.recoveryphrase.title': 'Backup Phrase'
'scenes.securitysettings.basicsecurity.seceretphrase.title': 'Secret Private Key Recovery Phrase'
'scenes.securitysettings.basicsecurity.recoveryphrase.warning': 'Never share your secret phrase with anyone. Blockchain.com will never ask you for this information.'
'scenes.securitysettings.basicsecurity.twostepverification.description': 'Your browser will be remembered for a short period of time, allowing you to login again without having to re-authenticate.'
'scenes.securitysettings.basicsecurity.twostepverification.description2': 'Disable this to require full authentication every time you login. This will not affect your current browser until you delete all cookies.'
'scenes.securitysettings.basicsecurity.twostepverification.disabled': 'Disabled'
Expand Down
114 changes: 78 additions & 36 deletions ...chain-wallet-v4-frontend/src/modals/Settings/RecoveryPhrase/RecoveryPhraseIntro/index.tsx
View file
@@ -1,7 +1,6 @@
import { Button, Image, Text } from 'blockchain-info-components'
import { Button, Text } from 'blockchain-info-components'
import { FlyoutWrapper } from 'components/Flyout'
import { FormattedMessage } from 'react-intl'
import { mediaHeight } from 'services/ResponsiveService'
import { Props } from '../index'
import React, { PureComponent } from 'react'
import styled from 'styled-components'
Expand All @@ -18,11 +17,6 @@ const Header = styled.div`
align-items: center;
margin-bottom: 40px;
`

const ContentContainer = styled.div`
margin-bottom: 50px;
`

const ButtonWrapper = styled(FlyoutWrapper)`
padding-top: 0px;
display: flex;
Expand All @@ -34,16 +28,18 @@ const ButtonWrapper = styled(FlyoutWrapper)`
margin-bottom: 15px;
}
`

const ImageContainer = styled.div`
width: 100%;
justify-content: center;
const WarningContent = styled.div`
display: flex;
margin-top: 48px;
`
const WarningCircle = styled.div<{ color: string; size: string }>`
display: flex;
${mediaHeight.small`
img {
max-width: 180px;
}
`};
justify-content: center;
align-items: center;
min-width: ${props => props.size};
height: ${props => props.size};
border-radius: ${props => props.size};
background: ${props => props.theme[props.color]};
`

class RecoveryPhraseIntro extends PureComponent<Props> {
Expand All @@ -55,32 +51,78 @@ class RecoveryPhraseIntro extends PureComponent<Props> {
<Wrapper>
<FlyoutWrapper>
<Header>
<Text color='grey600' size='20px' weight={600}>
<Text color='grey900' size='24px' weight={600}>
<FormattedMessage
id='modals.recoveryphrase.backupyourwallet.header'
defaultMessage='Backup Your Wallet'
id='scenes.securitysettings.basicsecurity.seceretphrase.title'
defaultMessage='Secret Private Key Recovery Phrase'
/>
</Text>
</Header>
<ContentContainer>
<Text color='grey600' weight={500}>
<FormattedMessage
id='modals.recoveryphrase.backupyourwallet.content.one'
defaultMessage='Your backup phrase will allow you to recover your crypto if you lose access to your wallet.'
/>
</Text>
<Text color='grey600' weight={500} style={{ marginTop: '30px' }}>

<Text color='grey600' size='14px' weight={500}>
<FormattedMessage
id='modals.recoveryphrase.backupyourwallet.content.subheader'
defaultMessage="In crypto, when you hold the private keys, you're in control of the funds in your Private Key Wallet. The downside is that WHOEVER holds your private keys can control your Private Key Wallet."
/>
</Text>
<Text
color='grey600'
size='14px'
weight={500}
style={{ marginTop: '25px' }}
lineHeight='1.5'
>
<FormattedMessage
id='modals.recoveryphrase.backupyourwallet.content.youmust'
defaultMessage='So you must:'
/>
</Text>
<Text color='grey600' size='14px' weight={500} lineHeight='1.5'>
<FormattedMessage
id='modals.recoveryphrase.backupyourwallet.content.one'
defaultMessage='1. Write down the 12 word phrase on the next screen in the exact order it appears.'
/>
</Text>
<Text color='grey600' size='14px' weight={500} lineHeight='1.5'>
<FormattedMessage
id='modals.recoveryphrase.backupyourwallet.content.two'
defaultMessage='2. Keep it safe, ideally on a securely stored piece of paper (in other words, not a digital copy).'
/>
</Text>
<Text color='grey600' size='14px' weight={500} lineHeight='1.5'>
<FormattedMessage
id='modals.recoveryphrase.backupyourwallet.content.three'
defaultMessage='3. NEVER share your backup phrase with anyone.'
/>
</Text>
<Text
color='grey900'
size='14px'
weight={600}
style={{ marginTop: '25px' }}
lineHeight='1.5'
>
<FormattedMessage
id='modals.recoveryphrase.backupyourwallet.content.warning1'
defaultMessage='Warning: If someone has your backup phrase they will have access to your Private Key Wallet and can withdraw funds.'
/>
</Text>
<WarningContent>
<WarningCircle color='red100' size='35px'>
<WarningCircle color='red400' size='20px'>
<Text color='white' size='14px' weight={600}>
!
</Text>
</WarningCircle>
</WarningCircle>
<Text color='error' weight={600} style={{ marginLeft: '30px' }}>
<FormattedMessage
id='modals.recoveryphrase.backupyourwallet.content.two'
defaultMessage='Please write down these 12 words in order and keep them somwhere safe. Never share it with anyone. Your backup phrase is the key to recovering your crypto if you ever lose your password.'
id='modals.recoveryphrase.backupyourwallet.content.warning2'
defaultMessage='Blockchain.com will never as to view or receive your recovery phrase.'
/>
</Text>
</ContentContainer>
<ImageContainer>
<Image name='recover-padlock' width='375px' />
</ImageContainer>
</WarningContent>
</FlyoutWrapper>

<ButtonWrapper>
<Button
capitalize
Expand All @@ -92,8 +134,8 @@ class RecoveryPhraseIntro extends PureComponent<Props> {
size='16px'
>
<FormattedMessage
id='modals.recoveryphrase.backupyourwallet.backupnow'
defaultMessage='Backup Now'
id='modals.recoveryphrase.backupyourwallet.viewphrase'
defaultMessage='View Recovery Phrase'
/>
</Button>
<Button
Expand Down
13 changes: 4 additions & 9 deletions ...llet-v4-frontend/src/scenes/SecurityCenter/BasicSecurity/WalletRecoveryPhrase/template.js
View file
Expand Up @@ -99,28 +99,23 @@ const WalletRecoveryPhrase = props => {
<SecuritySummary>
<SecurityHeader greyOut={isMnemonicVerified}>
<FormattedMessage
id='scenes.securitysettings.basicsecurity.recoveryphrase.title'
defaultMessage='Backup Phrase'
id='scenes.securitysettings.basicsecurity.seceretphrase.title'
defaultMessage='Secret Private Key Recovery Phrase'
/>
</SecurityHeader>
<SecurityDescription greyOut={isMnemonicVerified}>
<span>
<FormattedMessage
id='scenes.securitysettings.basicsecurity.recoveryphrase.description'
defaultMessage='Your backup phrase contains all of the private keys within your wallet. Please write these 12 words down, in order, and keep them somewhere safe offline. This phrase gives you (or anyone who has it) a way to restore your wallet and access your funds.'
/>
<span>&nbsp;</span>
<FormattedMessage
id='scenes.securitysettings.basicsecurity.recoveryphrase.description2'
defaultMessage='In the event that you lose your password or our service is unavailable, this will be your safety net.'
defaultMessage='Your Secret Recovery Phrase is needed to recover your wallet in case the password is lost. Please write these 12 words down, in order, and keep them somewhere safe offline. The secret recovery phrase gives you (or anyone who has it) a way to restore your wallet and access your funds. In the event that you lose your password or our service is unavailable, this will be your safety net.'
/>
</span>
</SecurityDescription>
<WarningText>
<Text size='14px' weight={500} color='error'>
<FormattedMessage
id='scenes.securitysettings.basicsecurity.recoveryphrase.warning'
defaultMessage=' Never share this backup phrase with anyone! Blockchain.com will never ask you for this information.'
defaultMessage='Never share your secret phrase with anyone. Blockchain.com will never ask you for this information.'
/>
</Text>
</WarningText>
Expand Down

0 comments on commit 48ac6a5

Please sign in to comment.