diff --git a/src/components/EnsureDeviceApp/index.js b/src/components/EnsureDeviceApp/index.js index f765f392..9c8e7920 100644 --- a/src/components/EnsureDeviceApp/index.js +++ b/src/components/EnsureDeviceApp/index.js @@ -11,16 +11,17 @@ import type { State as StoreState } from 'reducers/index' import getAddress from 'commands/getAddress' type OwnProps = { - currency: ?CryptoCurrency, + currency?: ?CryptoCurrency, deviceSelected: ?Device, - withGenuineCheck: boolean, - account: ?Account, + withGenuineCheck?: boolean, + account?: ?Account, onStatusChange?: (DeviceStatus, AppStatus, ?string) => void, - onGenuineCheck: (isGenuine: boolean) => void, + onGenuineCheck?: (isGenuine: boolean) => void, // TODO prefer children function render?: ({ appStatus: AppStatus, - currency: CryptoCurrency, + genuineCheckStatus: GenuineCheckStatus, + currency: ?CryptoCurrency, devices: Device[], deviceSelected: ?Device, deviceStatus: DeviceStatus, @@ -36,10 +37,13 @@ type DeviceStatus = 'unconnected' | 'connected' type AppStatus = 'success' | 'fail' | 'progress' +type GenuineCheckStatus = 'success' | 'fail' | 'progress' + type State = { deviceStatus: DeviceStatus, appStatus: AppStatus, errorMessage: ?string, + genuineCheckStatus: GenuineCheckStatus, } const mapStateToProps = (state: StoreState) => ({ @@ -51,6 +55,7 @@ class EnsureDeviceApp extends PureComponent { appStatus: 'progress', deviceStatus: this.props.deviceSelected ? 'connected' : 'unconnected', errorMessage: null, + genuineCheckStatus: 'progress', } componentDidMount() { @@ -159,7 +164,7 @@ class EnsureDeviceApp extends PureComponent { await sleep(1) if (!this._unmounted) { this.setState({ genuineCheckStatus: 'success' }) - this.props.onGenuineCheck(true) + this.props.onGenuineCheck && this.props.onGenuineCheck(true) } } diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js index f7d8c312..689358d3 100644 --- a/src/components/Onboarding/helperComponents.js +++ b/src/components/Onboarding/helperComponents.js @@ -16,8 +16,6 @@ export const Title = styled(Box).attrs({ })`` export const Description = styled(Box).attrs({ - width: 714, - height: 48, ff: 'Museo Sans|Light', fontSize: 5, lineHeight: 1.5, @@ -25,6 +23,7 @@ export const Description = styled(Box).attrs({ color: 'grey', })` margin: 10px auto 25px; + max-width: 550px; ` export const Inner = styled(Box).attrs({ horizontal: true, diff --git a/src/components/Onboarding/index.js b/src/components/Onboarding/index.js index 5b6ccb3e..1efdff9d 100644 --- a/src/components/Onboarding/index.js +++ b/src/components/Onboarding/index.js @@ -19,8 +19,7 @@ import { } from 'reducers/onboarding' import { getCurrentDevice } from 'reducers/devices' -// TODO: re-write it without auto lock, fixed width of the password modal, not dynamic titles -import { unlock } from 'reducers/application' +// import { unlock } from 'reducers/application' import Box from 'components/base/Box' @@ -31,7 +30,8 @@ import SelectDevice from './steps/SelectDevice' import SelectPIN from './steps/SelectPIN' import WriteSeed from './steps/WriteSeed' import GenuineCheck from './steps/GenuineCheck' -import SetPassword from './steps/SetPassword' +// UNTIL IS NEEDED SET PASSWORD IS COMMENTED OUT +// import SetPassword from './steps/SetPassword' import Analytics from './steps/Analytics' import Finish from './steps/Finish' @@ -41,7 +41,7 @@ const STEPS = { selectPIN: SelectPIN, writeSeed: WriteSeed, genuineCheck: GenuineCheck, - setPassword: SetPassword, + // setPassword: SetPassword, analytics: Analytics, finish: Finish, start: Start, @@ -58,7 +58,7 @@ const mapDispatchToProps = { nextStep, prevStep, jumpStep, - unlock, + // unlock, } type Props = { @@ -80,7 +80,7 @@ export type StepProps = { nextStep: Function, jumpStep: Function, finish: Function, - savePassword: Function, + // savePassword: Function, getDeviceInfo: Function, setGenuineCheckFail: Function, isLedgerNano: Function, @@ -89,15 +89,15 @@ export type StepProps = { class Onboarding extends PureComponent { getDeviceInfo = () => this.props.getCurrentDevice finish = () => this.props.saveSettings({ hasCompletedOnboarding: true }) - savePassword = hash => { - this.props.saveSettings({ - password: { - isEnabled: hash !== undefined, - value: hash, - }, - }) - this.props.unlock() - } + // savePassword = hash => { + // this.props.saveSettings({ + // password: { + // isEnabled: hash !== undefined, + // value: hash, + // }, + // }) + // this.props.unlock() + // } render() { const { hasCompletedOnboarding, onboarding, prevStep, nextStep, jumpStep, t } = this.props @@ -122,7 +122,7 @@ class Onboarding extends PureComponent { nextStep, jumpStep, finish: this.finish, - savePassword: this.savePassword, + // savePassword: this.savePassword, getDeviceInfo: this.getDeviceInfo, } diff --git a/src/components/Onboarding/steps/Analytics.js b/src/components/Onboarding/steps/Analytics.js index 32ed6d1a..f46e1c76 100644 --- a/src/components/Onboarding/steps/Analytics.js +++ b/src/components/Onboarding/steps/Analytics.js @@ -4,7 +4,6 @@ import React from 'react' import styled from 'styled-components' import Box from 'components/base/Box' -import IconAnalytics from 'icons/onboarding/Analytics' import CheckBox from 'components/base/CheckBox' import { Title, Description } from '../helperComponents' import OnboardingFooter from '../OnboardingFooter' @@ -17,25 +16,31 @@ export default (props: StepProps) => { {t('onboarding:analytics.title')} - {t('onboarding:analytics.desc')} - - - - - - - This is a long text, please replace it with the final wording once it’s done. -
- Lorem ipsum dolor amet ledger lorem dolor ipsum amet -
-
- - - - This is a long text, please replace it with the final wording once it’s done. -
- Lorem ipsum dolor amet ledger lorem dolor ipsum amet -
+ {t('onboarding:analytics.desc')} + + + + + + {t('onboarding:analytics.shareDiagnostics.title')} + + {t('onboarding:analytics.shareDiagnostics.desc')} + + + + + + + + + {t('onboarding:analytics.shareDiagnostics.title')} + + {t('onboarding:analytics.shareDiagnostics.desc')} + + + + +
{ export const AnalyticsText = styled(Box).attrs({ ff: 'Open Sans|Regular', - fontSize: 4, + fontSize: 3, textAlign: 'left', color: 'smoke', })` - margin: 10px auto 25px; - padding-left: 10px; + max-width: 450px; +` +export const AnalyticsTitle = styled(Box).attrs({ + ff: 'Open Sans|SemiBold', + fontSize: 4, + textAlign: 'left', +})` + margin-bottom: 5px; ` -const DeviceIcon = styled(Box).attrs({ - alignItems: 'center', - justifyContent: 'center', - color: 'graphite', +const Container = styled(Box).attrs({ + horizontal: true, + p: 5, })` - width: 55px; + max-height: 90px; + width: 620px; ` diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js index 907470d6..4ed6fcb5 100644 --- a/src/components/Onboarding/steps/GenuineCheck.js +++ b/src/components/Onboarding/steps/GenuineCheck.js @@ -118,7 +118,7 @@ class GenuineCheck extends PureComponent { {t('onboarding:genuineCheck.title')} - {t('onboarding:genuineCheck.desc')} + {t('onboarding:genuineCheck.desc')} @@ -291,7 +291,7 @@ const CardWrapper = styled(Card).attrs({ p: 5, })` max-height: 97px; - min-width: 620px; + width: 620px; border: ${p => `1px ${p.isDisabled ? 'dashed' : 'solid'} ${p.theme.colors.fog}`}; pointer-events: ${p => (p.isDisabled ? 'none' : 'auto')}; background-color: ${p => (p.isDisabled ? p.theme.colors.lightGrey : p.theme.colors.white)}; diff --git a/src/components/Onboarding/steps/SelectDevice.js b/src/components/Onboarding/steps/SelectDevice.js index 067ddfb9..9d1012e2 100644 --- a/src/components/Onboarding/steps/SelectDevice.js +++ b/src/components/Onboarding/steps/SelectDevice.js @@ -28,7 +28,7 @@ class SelectDevice extends PureComponent { {t('onboarding:selectDevice.title')} - {t('onboarding:selectDevice.desc')} + {t('onboarding:selectDevice.desc')} { - state = { - isPasswordModalOpened: false, - isPasswordEnabled: false, - } - - handleOpenPasswordModal = () => { - this.setState({ isPasswordModalOpened: true }) - } - handleClosePasswordModal = () => { - this.setState({ isPasswordModalOpened: false }) - } - handleChangePassword = (password: string) => { - window.requestIdleCallback(() => { - setEncryptionKey('accounts', password) - const hash = password ? bcrypt.hashSync(password, 8) : undefined - this.props.savePassword(hash) - }) - } - - handleInputChange = (key: string) => (value: string) => { - this.setState({ [key]: value }) - } - - render() { - const { nextStep, prevStep, t } = this.props - const { isPasswordModalOpened, isPasswordEnabled } = this.state - return ( - - - {t('onboarding:setPassword.title')} - {t('onboarding:setPassword.desc')} - - - - - {/* we might not be able to re-use what we have currently without modifications - the title and descriptions are not dynamic, we might need deffirent size as well */} - {isPasswordModalOpened && ( - - )} - nextStep()} style={{ padding: 15 }}> - - - - - - ) - } -} - -export default SetPassword +// // @flow +// +// import React, { PureComponent } from 'react' +// import bcrypt from 'bcryptjs' +// +// import { setEncryptionKey } from 'helpers/db' +// +// import Box from 'components/base/Box' +// import Button from 'components/base/Button' +// +// import IconSetPassword from 'icons/onboarding/SetPassword' +// import PasswordModal from 'components/SettingsPage/PasswordModal' +// import OnboardingFooter from '../OnboardingFooter' +// +// import type { StepProps } from '..' +// +// import { Title, Description } from '../helperComponents' +// +// type State = { +// isPasswordModalOpened: boolean, +// isPasswordEnabled: boolean, +// } +// +// class SetPassword extends PureComponent { +// state = { +// isPasswordModalOpened: false, +// isPasswordEnabled: false, +// } +// +// handleOpenPasswordModal = () => { +// this.setState({ isPasswordModalOpened: true }) +// } +// handleClosePasswordModal = () => { +// this.setState({ isPasswordModalOpened: false }) +// } +// handleChangePassword = (password: string) => { +// window.requestIdleCallback(() => { +// setEncryptionKey('accounts', password) +// const hash = password ? bcrypt.hashSync(password, 8) : undefined +// this.props.savePassword(hash) +// }) +// } +// +// handleInputChange = (key: string) => (value: string) => { +// this.setState({ [key]: value }) +// } +// +// render() { +// const { nextStep, prevStep, t } = this.props +// const { isPasswordModalOpened, isPasswordEnabled } = this.state +// return ( +// +// +// {t('onboarding:setPassword.title')} +// {t('onboarding:setPassword.desc')} +// +// +// +// +// {/* we might not be able to re-use what we have currently without modifications +// the title and descriptions are not dynamic, we might need deffirent size as well */} +// {isPasswordModalOpened && ( +// +// )} +// nextStep()} style={{ padding: 15 }}> +// +// +// +// +// +// ) +// } +// } +// +// export default SetPassword diff --git a/src/components/Onboarding/steps/WriteSeed.js b/src/components/Onboarding/steps/WriteSeed.js index d7378458..21828931 100644 --- a/src/components/Onboarding/steps/WriteSeed.js +++ b/src/components/Onboarding/steps/WriteSeed.js @@ -60,7 +60,7 @@ export default (props: StepProps) => { {t('onboarding:writeSeed.title')} - {t('onboarding:writeSeed.desc')} + {t('onboarding:writeSeed.desc')} diff --git a/src/components/base/InputPassword/index.js b/src/components/base/InputPassword/index.js index 84bc6656..f7c83865 100644 --- a/src/components/base/InputPassword/index.js +++ b/src/components/base/InputPassword/index.js @@ -106,7 +106,7 @@ class InputPassword extends PureComponent { {withStrength && ( - {[0, 1, 2, 3, 4].map(v => ( + {[0, 1, 2].map(v => (