Browse Source

update reset hard modal and add ledger blue text to genuine check

master
Anastasia Poupeney 7 years ago
parent
commit
e013682fcd
  1. 21
      src/components/IsUnlocked.js
  2. 7
      src/components/Onboarding/steps/GenuineCheck.js
  3. 9
      src/components/base/Modal/ConfirmModal.js
  4. 16
      src/icons/TriangleWarning.js
  5. 7
      static/i18n/en/app.yml
  6. 3
      static/i18n/en/onboarding.yml

21
src/components/IsUnlocked.js

@ -11,7 +11,7 @@ import { translate } from 'react-i18next'
import type { SettingsState as Settings } from 'reducers/settings' import type { SettingsState as Settings } from 'reducers/settings'
import type { T } from 'types/common' import type { T } from 'types/common'
import IconLockScreen from 'icons/LockScreen' import IconLockScreen from 'icons/LockScreen'
import IconTriangleWarning from 'icons/TriangleWarning'
import get from 'lodash/get' import get from 'lodash/get'
import { setEncryptionKey } from 'helpers/db' import { setEncryptionKey } from 'helpers/db'
@ -138,7 +138,13 @@ class IsUnlocked extends Component<Props, State> {
this.setState({ isHardResetting: false }) this.setState({ isHardResetting: false })
} }
} }
hardResetIconRender = () => {
return (
<IconWrapperCircle color="alertRed">
<IconTriangleWarning width={23} height={21} />
</IconWrapperCircle>
)
}
render() { render() {
const { inputValue, incorrectPassword, isHardResetting, isHardResetModalOpened } = this.state const { inputValue, incorrectPassword, isHardResetting, isHardResetModalOpened } = this.state
const { isLocked, t } = this.props const { isLocked, t } = this.props
@ -182,8 +188,8 @@ class IsUnlocked extends Component<Props, State> {
onReject={this.handleCloseHardResetModal} onReject={this.handleCloseHardResetModal}
onConfirm={this.handleHardReset} onConfirm={this.handleHardReset}
title={t('app:settings.hardResetModal.title')} title={t('app:settings.hardResetModal.title')}
subTitle={t('app:settings.hardResetModal.subTitle')}
desc={t('app:settings.hardResetModal.desc')} desc={t('app:settings.hardResetModal.desc')}
renderIcon={this.hardResetIconRender}
/> />
</Box> </Box>
) )
@ -204,3 +210,12 @@ export default compose(
), ),
translate(), translate(),
)(IsUnlocked) )(IsUnlocked)
const IconWrapperCircle = styled(Box).attrs({})`
width: 50px;
height: 50px;
border-radius: 50%;
background: #ea2e4919;
text-align: -webkit-center;
justify-content: center;
`

7
src/components/Onboarding/steps/GenuineCheck.js

@ -129,7 +129,12 @@ class GenuineCheck extends PureComponent<StepProps, State> {
<FixedTopContainer> <FixedTopContainer>
<Box grow alignItems="center"> <Box grow alignItems="center">
<Title>{t('onboarding:genuineCheck.title')}</Title> <Title>{t('onboarding:genuineCheck.title')}</Title>
<Description>{t('onboarding:genuineCheck.desc')}</Description> {onboarding.isLedgerNano ? (
<Description>{t('onboarding:genuineCheck.descNano')}</Description>
) : (
<Description>{t('onboarding:genuineCheck.descBlue')}</Description>
)}
<Box mt={5}> <Box mt={5}>
<CardWrapper> <CardWrapper>
<Box justify="center"> <Box justify="center">

9
src/components/base/Modal/ConfirmModal.js

@ -14,8 +14,9 @@ type Props = {
isOpened: boolean, isOpened: boolean,
isDanger: boolean, isDanger: boolean,
title: string, title: string,
subTitle: string, subTitle?: string,
desc: string, desc: string,
renderIcon?: Function,
confirmText?: string, confirmText?: string,
cancelText?: string, cancelText?: string,
onReject: Function, onReject: Function,
@ -37,6 +38,7 @@ class ConfirmModal extends PureComponent<Props> {
onReject, onReject,
onConfirm, onConfirm,
isLoading, isLoading,
renderIcon,
t, t,
...props ...props
} = this.props } = this.props
@ -57,6 +59,11 @@ class ConfirmModal extends PureComponent<Props> {
{subTitle} {subTitle}
</Box> </Box>
)} )}
{renderIcon && (
<Box justifyContent="center" alignItems="center" mt={4} mb={3}>
{renderIcon()}
</Box>
)}
<Box ff="Open Sans" color="smoke" fontSize={4} textAlign="center"> <Box ff="Open Sans" color="smoke" fontSize={4} textAlign="center">
{desc} {desc}
</Box> </Box>

16
src/icons/TriangleWarning.js

@ -0,0 +1,16 @@
// @flow
import React from 'react'
const path = (
<path
fill="currentColor"
d="M6.217 2.188a2.085 2.085 0 0 1 3.566 0l5.653 9.437a2.083 2.083 0 0 1-1.79 3.125h-11.3A2.083 2.083 0 0 1 .57 11.615l5.647-9.427zm1.285.773l-5.64 9.414a.583.583 0 0 0 .491.875h11.285a.583.583 0 0 0 .505-.865L8.5 2.962a.583.583 0 0 0-.997-.001zM7.25 6a.75.75 0 0 1 1.5 0v2.667a.75.75 0 0 1-1.5 0V6zm1.5 5a.75.75 0 1 1-1.5 0v-.01a.75.75 0 1 1 1.5 0V11z"
/>
)
export default ({ height, width, ...p }: { height: number, width: number }) => (
<svg viewBox="0 0 19 17" height={height} width={width} {...p}>
{path}
</svg>
)

7
static/i18n/en/app.yml

@ -119,7 +119,7 @@ exchange:
coinmama: 'Coinmama is a financial service that makes it fast, safe and fun to buy digital currency, anywhere in the world.' coinmama: 'Coinmama is a financial service that makes it fast, safe and fun to buy digital currency, anywhere in the world.'
genuinecheck: genuinecheck:
modal: modal:
title: Genuine check, bro title: Genuine check
addAccounts: addAccounts:
title: Add accounts title: Add accounts
breadcrumb: breadcrumb:
@ -307,9 +307,8 @@ settings:
terms: Terms and Privacy policy terms: Terms and Privacy policy
termsDesc: Lorem ipsum dolor sit amet termsDesc: Lorem ipsum dolor sit amet
hardResetModal: hardResetModal:
title: Hard reset title: Reset Ledger Live
subTitle: Are you sure houston? desc: Resetting will erase all Ledger Live data stored on your computer, including your profile, accounts, transaction history and application settings. The keys to access your crypto assets in the blockchain remain secure on your Ledger device.
desc: Lorem ipsum dolor sit amet
softResetModal: softResetModal:
title: Clean application cache title: Clean application cache
subTitle: Are you sure houston? subTitle: Are you sure houston?

3
static/i18n/en/onboarding.yml

@ -74,7 +74,8 @@ writeSeed:
note4: Never use a device supplied with a recovery phrase and/or a PIN code. note4: Never use a device supplied with a recovery phrase and/or a PIN code.
genuineCheck: genuineCheck:
title: Final security check title: Final security check
desc: Your Ledger Nano S should now display Your device is now ready. Before getting started, please confirm that descNano: Your Ledger Nano S should now display Your device is now ready. Before getting started, please confirm that
descBlue: Your Ledger Blue should now display Your device is now ready. Before getting started, please confirm that
steps: steps:
step1: step1:
title: Did you choose your PIN code by yourself? title: Did you choose your PIN code by yourself?

Loading…
Cancel
Save