From 37b60741590c98c85773d3139c2156aeabcbfe42 Mon Sep 17 00:00:00 2001 From: Anastasia Poupeney Date: Tue, 5 Jun 2018 14:39:23 +0200 Subject: [PATCH] adding sentry logs to analytics, splitting select pin and write seed steps --- src/components/Onboarding/index.js | 4 +- src/components/Onboarding/steps/Analytics.js | 32 +++-- src/components/Onboarding/steps/SelectPIN.js | 120 ------------------ .../steps/SelectPIN/SelectPINblue.js | 77 +++++++++++ .../steps/SelectPIN/SelectPINnano.js | 79 ++++++++++++ .../Onboarding/steps/SelectPIN/index.js | 28 ++++ .../{ => steps/WriteSeed}/WriteSeedBlue.js | 2 +- .../{ => steps/WriteSeed}/WriteSeedNano.js | 2 +- .../{ => steps/WriteSeed}/WriteSeedRestore.js | 2 +- .../{WriteSeed.js => WriteSeed/index.js} | 10 +- src/reducers/settings.js | 2 + static/i18n/en/onboarding.yml | 3 + 12 files changed, 222 insertions(+), 139 deletions(-) delete mode 100644 src/components/Onboarding/steps/SelectPIN.js create mode 100644 src/components/Onboarding/steps/SelectPIN/SelectPINblue.js create mode 100644 src/components/Onboarding/steps/SelectPIN/SelectPINnano.js create mode 100644 src/components/Onboarding/steps/SelectPIN/index.js rename src/components/Onboarding/{ => steps/WriteSeed}/WriteSeedBlue.js (98%) rename src/components/Onboarding/{ => steps/WriteSeed}/WriteSeedNano.js (98%) rename src/components/Onboarding/{ => steps/WriteSeed}/WriteSeedRestore.js (98%) rename src/components/Onboarding/steps/{WriteSeed.js => WriteSeed/index.js} (73%) diff --git a/src/components/Onboarding/index.js b/src/components/Onboarding/index.js index 5541437d..0e417533 100644 --- a/src/components/Onboarding/index.js +++ b/src/components/Onboarding/index.js @@ -28,8 +28,8 @@ import Start from './steps/Start' import InitStep from './steps/Init' import OnboardingBreadcrumb from './OnboardingBreadcrumb' import SelectDevice from './steps/SelectDevice' -import SelectPIN from './steps/SelectPIN' -import WriteSeed from './steps/WriteSeed' +import SelectPIN from './steps/SelectPIN/index' +import WriteSeed from './steps/WriteSeed/index' import GenuineCheck from './steps/GenuineCheck' // UNTIL IS NEEDED SET PASSWORD IS COMMENTED OUT // import SetPassword from './steps/SetPassword' diff --git a/src/components/Onboarding/steps/Analytics.js b/src/components/Onboarding/steps/Analytics.js index 5eeb2b46..c9067844 100644 --- a/src/components/Onboarding/steps/Analytics.js +++ b/src/components/Onboarding/steps/Analytics.js @@ -17,13 +17,20 @@ const mapDispatchToProps = { saveSettings } type State = { analyticsToggle: boolean, termsConditionsToggle: boolean, + sentryLogsToggle: boolean, } class Analytics extends PureComponent { state = { analyticsToggle: false, termsConditionsToggle: false, + sentryLogsToggle: false, + } + handleSentryLogsToggle = (isChecked: boolean) => { + this.setState({ sentryLogsToggle: !this.state.sentryLogsToggle }) + this.props.saveSettings({ + sentryLogs: isChecked, + }) } - handleAnalyticsToggle = (isChecked: boolean) => { this.setState({ analyticsToggle: !this.state.analyticsToggle }) this.props.saveSettings({ @@ -35,15 +42,25 @@ class Analytics extends PureComponent { } render() { const { nextStep, prevStep, t } = this.props - const { analyticsToggle, termsConditionsToggle } = this.state + const { analyticsToggle, termsConditionsToggle, sentryLogsToggle } = this.state return ( - + {t('onboarding:analytics.title')} {t('onboarding:analytics.desc')} - + + + + {t('onboarding:analytics.sentryLogs.title')} + + {t('onboarding:analytics.sentryLogs.desc')} + + + + + @@ -101,8 +118,5 @@ export const AnalyticsTitle = styled(Box).attrs({ ` const Container = styled(Box).attrs({ horizontal: true, - p: 5, -})` - max-height: 90px; - width: 620px; -` + p: 3, +})`` diff --git a/src/components/Onboarding/steps/SelectPIN.js b/src/components/Onboarding/steps/SelectPIN.js deleted file mode 100644 index d43c1cc6..00000000 --- a/src/components/Onboarding/steps/SelectPIN.js +++ /dev/null @@ -1,120 +0,0 @@ -// @flow - -import React, { Fragment } from 'react' - -import Box from 'components/base/Box' -import { colors } from 'styles/theme' - -import IconLedgerNanoSelectPIN from 'icons/illustrations/LedgerNanoSelectPIN' -import IconLedgerBlueSelectPIN from 'icons/illustrations/LedgerBlueSelectPIN' -import IconChevronRight from 'icons/ChevronRight' - -import { Title, Inner, OptionRow, IconOptionRow, DisclaimerBox } from '../helperComponents' -import OnboardingFooter from '../OnboardingFooter' - -import type { StepProps } from '..' - -// TODO: adjust for different wording based on the flow type when we have wording -export default (props: StepProps) => { - const { nextStep, prevStep, t, onboarding } = props - const stepsLedgerNano = [ - { - key: 'step1', - icon: 1., - desc: t('onboarding:selectPIN.instructions.ledgerNano.step1'), - }, - { - key: 'step2', - icon: 2., - desc: t('onboarding:selectPIN.instructions.ledgerNano.step2'), - }, - { - key: 'step3', - icon: 3., - desc: t('onboarding:selectPIN.instructions.ledgerNano.step3'), - }, - { - key: 'step4', - icon: 4., - desc: t('onboarding:selectPIN.instructions.ledgerNano.step4'), - }, - ] - - const stepsLedgerBlue = [ - { - key: 'step1', - icon: 1., - desc: t('onboarding:selectPIN.instructions.ledgerBlue.step1'), - }, - { - key: 'step2', - icon: 2., - desc: t('onboarding:selectPIN.instructions.ledgerBlue.step2'), - }, - { - key: 'step3', - icon: 3., - desc: t('onboarding:selectPIN.instructions.ledgerBlue.step3'), - }, - ] - const disclaimerNotes = [ - { - key: 'note1', - icon: , - desc: t('onboarding:selectPIN.disclaimer.note1'), - }, - { - key: 'note2', - icon: , - desc: t('onboarding:selectPIN.disclaimer.note2'), - }, - { - key: 'note3', - icon: , - desc: t('onboarding:selectPIN.disclaimer.note3'), - }, - ] - return ( - - - {t('onboarding:selectPIN.title')} - - {onboarding.isLedgerNano ? ( - - - - - - - - {stepsLedgerNano.map(step => )} - - - - ) : ( - - - - - - - - {stepsLedgerBlue.map(step => )} - - - - )} - - - - - - ) -} diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js new file mode 100644 index 00000000..e0e19c83 --- /dev/null +++ b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js @@ -0,0 +1,77 @@ +// @flow +import React, { PureComponent } from 'react' +import { translate } from 'react-i18next' +import { colors } from 'styles/theme' + +import Box from 'components/base/Box' + +import type { T } from 'types/common' +import IconLedgerBlueSelectPIN from 'icons/illustrations/LedgerBlueSelectPIN' + +import IconChevronRight from 'icons/ChevronRight' + +import { IconOptionRow, DisclaimerBox, OptionRow, Inner } from '../../helperComponents' + +type Props = { + t: T, +} + +class SelectPIN extends PureComponent { + render() { + const { t } = this.props + + const stepsLedgerBlue = [ + { + key: 'step1', + icon: 1., + desc: t('onboarding:selectPIN.instructions.ledgerBlue.step1'), + }, + { + key: 'step2', + icon: 2., + desc: t('onboarding:selectPIN.instructions.ledgerBlue.step2'), + }, + { + key: 'step3', + icon: 3., + desc: t('onboarding:selectPIN.instructions.ledgerBlue.step3'), + }, + ] + + const disclaimerNotes = [ + { + key: 'note1', + icon: , + desc: t('onboarding:selectPIN.disclaimer.note1'), + }, + { + key: 'note2', + icon: , + desc: t('onboarding:selectPIN.disclaimer.note2'), + }, + { + key: 'note3', + icon: , + desc: t('onboarding:selectPIN.disclaimer.note3'), + }, + ] + + return ( + + + + + + + + {stepsLedgerBlue.map(step => )} + + + + + + ) + } +} + +export default translate()(SelectPIN) diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js b/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js new file mode 100644 index 00000000..dfe794c3 --- /dev/null +++ b/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js @@ -0,0 +1,79 @@ +// @flow +import React, { PureComponent } from 'react' +import { translate } from 'react-i18next' +import { colors } from 'styles/theme' + +import Box from 'components/base/Box' + +import type { T } from 'types/common' +import IconLedgerNanoSelectPIN from 'icons/illustrations/LedgerNanoSelectPIN' + +import IconChevronRight from 'icons/ChevronRight' + +import { IconOptionRow, DisclaimerBox, OptionRow, Inner } from '../../helperComponents' + +type Props = { + t: T, +} + +class SelectPINnano extends PureComponent { + render() { + const { t } = this.props + + const stepsLedgerNano = [ + { + key: 'step1', + icon: 1., + desc: t('onboarding:selectPIN.instructions.ledgerNano.step1'), + }, + { + key: 'step2', + icon: 2., + desc: t('onboarding:selectPIN.instructions.ledgerNano.step2'), + }, + { + key: 'step3', + icon: 3., + desc: t('onboarding:selectPIN.instructions.ledgerNano.step3'), + }, + { + key: 'step4', + icon: 4., + desc: t('onboarding:selectPIN.instructions.ledgerNano.step4'), + }, + ] + const disclaimerNotes = [ + { + key: 'note1', + icon: , + desc: t('onboarding:selectPIN.disclaimer.note1'), + }, + { + key: 'note2', + icon: , + desc: t('onboarding:selectPIN.disclaimer.note2'), + }, + { + key: 'note3', + icon: , + desc: t('onboarding:selectPIN.disclaimer.note3'), + }, + ] + + return ( + + + + + + + {stepsLedgerNano.map(step => )} + + + + + ) + } +} + +export default translate()(SelectPINnano) diff --git a/src/components/Onboarding/steps/SelectPIN/index.js b/src/components/Onboarding/steps/SelectPIN/index.js new file mode 100644 index 00000000..276de841 --- /dev/null +++ b/src/components/Onboarding/steps/SelectPIN/index.js @@ -0,0 +1,28 @@ +// @flow + +import React from 'react' + +import Box from 'components/base/Box' + +import { Title } from '../../helperComponents' +import OnboardingFooter from '../../OnboardingFooter' +import SelectPINnano from './SelectPINnano' +import SelectPINblue from './SelectPINblue' + +import type { StepProps } from '../..' + +export default (props: StepProps) => { + const { nextStep, prevStep, t, onboarding } = props + + return ( + + + {t('onboarding:selectPIN.title')} + + {onboarding.isLedgerNano ? : } + + + + + ) +} diff --git a/src/components/Onboarding/WriteSeedBlue.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js similarity index 98% rename from src/components/Onboarding/WriteSeedBlue.js rename to src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js index 702138fa..976da167 100644 --- a/src/components/Onboarding/WriteSeedBlue.js +++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js @@ -16,7 +16,7 @@ import { DisclaimerBox, OptionRow, Inner, -} from './helperComponents' +} from '../../helperComponents' type Props = { t: T, diff --git a/src/components/Onboarding/WriteSeedNano.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js similarity index 98% rename from src/components/Onboarding/WriteSeedNano.js rename to src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js index f3443126..250e6cd4 100644 --- a/src/components/Onboarding/WriteSeedNano.js +++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js @@ -16,7 +16,7 @@ import { DisclaimerBox, OptionRow, Inner, -} from './helperComponents' +} from '../../helperComponents' type Props = { t: T, diff --git a/src/components/Onboarding/WriteSeedRestore.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js similarity index 98% rename from src/components/Onboarding/WriteSeedRestore.js rename to src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js index e99a2b16..207312ff 100644 --- a/src/components/Onboarding/WriteSeedRestore.js +++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js @@ -17,7 +17,7 @@ import { DisclaimerBox, OptionRow, Inner, -} from './helperComponents' +} from '../../helperComponents' type Props = { t: T, diff --git a/src/components/Onboarding/steps/WriteSeed.js b/src/components/Onboarding/steps/WriteSeed/index.js similarity index 73% rename from src/components/Onboarding/steps/WriteSeed.js rename to src/components/Onboarding/steps/WriteSeed/index.js index 936efb30..df9264eb 100644 --- a/src/components/Onboarding/steps/WriteSeed.js +++ b/src/components/Onboarding/steps/WriteSeed/index.js @@ -4,13 +4,13 @@ import React from 'react' import Box from 'components/base/Box' -import OnboardingFooter from '../OnboardingFooter' +import OnboardingFooter from '../../OnboardingFooter' -import WriteSeedNano from '../WriteSeedNano' -import WriteSeedBlue from '../WriteSeedBlue' -import WriteSeedRestore from '../WriteSeedRestore' +import WriteSeedNano from './WriteSeedNano' +import WriteSeedBlue from './WriteSeedBlue' +import WriteSeedRestore from './WriteSeedRestore' -import type { StepProps } from '..' +import type { StepProps } from '../..' export default (props: StepProps) => { const { nextStep, prevStep, t, onboarding } = props diff --git a/src/reducers/settings.js b/src/reducers/settings.js index 8a44a97d..633e719c 100644 --- a/src/reducers/settings.js +++ b/src/reducers/settings.js @@ -32,6 +32,7 @@ export type SettingsState = { region: string, developerMode: boolean, shareAnalytics: boolean, + sentryLogs: boolean, } /* have to check if available for all OS */ @@ -66,6 +67,7 @@ const INITIAL_STATE: SettingsState = { developerMode: !!process.env.__DEV__, loaded: false, shareAnalytics: false, + sentryLogs: false, } function asCryptoCurrency(c: Currency): ?CryptoCurrency { diff --git a/static/i18n/en/onboarding.yml b/static/i18n/en/onboarding.yml index fb1f300b..35baff43 100644 --- a/static/i18n/en/onboarding.yml +++ b/static/i18n/en/onboarding.yml @@ -99,6 +99,9 @@ analytics: termsConditions: title: Terms and Conditions desc: Please accept terms and conditions to proceed + sentryLogs: + title: Sentry Logs + desc: Help Ledger improve its products and services by automatically sending diagnostics and usage data. finish: title: This is the title of the screen. 1 line is the maximum 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