adding sentry logs to analytics, splitting select pin and write seed steps

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'

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<StepProps, State> {
   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<StepProps, State> {
   }
   render() {
     const { nextStep, prevStep, t } = this.props
-    const { analyticsToggle, termsConditionsToggle } = this.state
+    const { analyticsToggle, termsConditionsToggle, sentryLogsToggle } = this.state
 
     return (
-      <Box sticky pt={150}>
+      <Box sticky pt={170}>
         <Box grow alignItems="center">
           <Title>{t('onboarding:analytics.title')}</Title>
           <Description>{t('onboarding:analytics.desc')}</Description>
-
           <Box mt={5}>
+            <Container>
+              <Box justify="center" style={{ width: 450 }}>
+                <Box horizontal>
+                  <AnalyticsTitle>{t('onboarding:analytics.sentryLogs.title')}</AnalyticsTitle>
+                </Box>
+                <AnalyticsText>{t('onboarding:analytics.sentryLogs.desc')}</AnalyticsText>
+              </Box>
+              <Box alignItems="center" horizontal mx={5}>
+                <CheckBox isChecked={sentryLogsToggle} onChange={this.handleSentryLogsToggle} />
+              </Box>
+            </Container>
             <Container>
               <Box justify="center" style={{ width: 450 }}>
                 <Box horizontal>
@@ -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,
+})``

src/components/Onboarding/steps/SelectPIN.js

@@ -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: <IconOptionRow>1.</IconOptionRow>,
-      desc: t('onboarding:selectPIN.instructions.ledgerNano.step1'),
-    },
-    {
-      key: 'step2',
-      icon: <IconOptionRow>2.</IconOptionRow>,
-      desc: t('onboarding:selectPIN.instructions.ledgerNano.step2'),
-    },
-    {
-      key: 'step3',
-      icon: <IconOptionRow>3.</IconOptionRow>,
-      desc: t('onboarding:selectPIN.instructions.ledgerNano.step3'),
-    },
-    {
-      key: 'step4',
-      icon: <IconOptionRow>4.</IconOptionRow>,
-      desc: t('onboarding:selectPIN.instructions.ledgerNano.step4'),
-    },
-  ]
-
-  const stepsLedgerBlue = [
-    {
-      key: 'step1',
-      icon: <IconOptionRow>1.</IconOptionRow>,
-      desc: t('onboarding:selectPIN.instructions.ledgerBlue.step1'),
-    },
-    {
-      key: 'step2',
-      icon: <IconOptionRow>2.</IconOptionRow>,
-      desc: t('onboarding:selectPIN.instructions.ledgerBlue.step2'),
-    },
-    {
-      key: 'step3',
-      icon: <IconOptionRow>3.</IconOptionRow>,
-      desc: t('onboarding:selectPIN.instructions.ledgerBlue.step3'),
-    },
-  ]
-  const disclaimerNotes = [
-    {
-      key: 'note1',
-      icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
-      desc: t('onboarding:selectPIN.disclaimer.note1'),
-    },
-    {
-      key: 'note2',
-      icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
-      desc: t('onboarding:selectPIN.disclaimer.note2'),
-    },
-    {
-      key: 'note3',
-      icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
-      desc: t('onboarding:selectPIN.disclaimer.note3'),
-    },
-  ]
-  return (
-    <Box sticky pt={170}>
-      <Box grow alignItems="center">
-        <Title>{t('onboarding:selectPIN.title')}</Title>
-        <Box align="center" mt={7}>
-          {onboarding.isLedgerNano ? (
-            <Fragment>
-              <Inner style={{ width: 700 }}>
-                <Box style={{ width: 260, justifyContent: 'center', alignItems: 'center' }} mt={5}>
-                  <IconLedgerNanoSelectPIN />
-                </Box>
-
-                <Box shrink grow flow={4}>
-                  {stepsLedgerNano.map(step => <OptionRow key={step.key} step={step} />)}
-                </Box>
-              </Inner>
-            </Fragment>
-          ) : (
-            <Fragment>
-              <Inner style={{ width: 700 }}>
-                <Box style={{ width: 260, justifyContent: 'center', alignItems: 'center' }} mt={2}>
-                  <IconLedgerBlueSelectPIN />
-                </Box>
-
-                <Box shrink grow flow={4}>
-                  {stepsLedgerBlue.map(step => <OptionRow key={step.key} step={step} />)}
-                </Box>
-              </Inner>
-            </Fragment>
-          )}
-          <DisclaimerBox mt={6} disclaimerNotes={disclaimerNotes} />
-        </Box>
-      </Box>
-      <OnboardingFooter
-        horizontal
-        align="center"
-        flow={2}
-        t={t}
-        nextStep={nextStep}
-        prevStep={prevStep}
-      />
-    </Box>
-  )
-}

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<Props, *> {
+  render() {
+    const { t } = this.props
+
+    const stepsLedgerBlue = [
+      {
+        key: 'step1',
+        icon: <IconOptionRow>1.</IconOptionRow>,
+        desc: t('onboarding:selectPIN.instructions.ledgerBlue.step1'),
+      },
+      {
+        key: 'step2',
+        icon: <IconOptionRow>2.</IconOptionRow>,
+        desc: t('onboarding:selectPIN.instructions.ledgerBlue.step2'),
+      },
+      {
+        key: 'step3',
+        icon: <IconOptionRow>3.</IconOptionRow>,
+        desc: t('onboarding:selectPIN.instructions.ledgerBlue.step3'),
+      },
+    ]
+
+    const disclaimerNotes = [
+      {
+        key: 'note1',
+        icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
+        desc: t('onboarding:selectPIN.disclaimer.note1'),
+      },
+      {
+        key: 'note2',
+        icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
+        desc: t('onboarding:selectPIN.disclaimer.note2'),
+      },
+      {
+        key: 'note3',
+        icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
+        desc: t('onboarding:selectPIN.disclaimer.note3'),
+      },
+    ]
+
+    return (
+      <Box align="center">
+        <Inner style={{ width: 700 }}>
+          <Box style={{ width: 260, justifyContent: 'center', alignItems: 'center' }} mt={2}>
+            <IconLedgerBlueSelectPIN />
+          </Box>
+          <Box mt={4}>
+            <Box shrink grow flow={4}>
+              {stepsLedgerBlue.map(step => <OptionRow key={step.key} step={step} />)}
+            </Box>
+          </Box>
+        </Inner>
+        <DisclaimerBox mt={6} disclaimerNotes={disclaimerNotes} />
+      </Box>
+    )
+  }
+}
+
+export default translate()(SelectPIN)

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<Props, *> {
+  render() {
+    const { t } = this.props
+
+    const stepsLedgerNano = [
+      {
+        key: 'step1',
+        icon: <IconOptionRow>1.</IconOptionRow>,
+        desc: t('onboarding:selectPIN.instructions.ledgerNano.step1'),
+      },
+      {
+        key: 'step2',
+        icon: <IconOptionRow>2.</IconOptionRow>,
+        desc: t('onboarding:selectPIN.instructions.ledgerNano.step2'),
+      },
+      {
+        key: 'step3',
+        icon: <IconOptionRow>3.</IconOptionRow>,
+        desc: t('onboarding:selectPIN.instructions.ledgerNano.step3'),
+      },
+      {
+        key: 'step4',
+        icon: <IconOptionRow>4.</IconOptionRow>,
+        desc: t('onboarding:selectPIN.instructions.ledgerNano.step4'),
+      },
+    ]
+    const disclaimerNotes = [
+      {
+        key: 'note1',
+        icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
+        desc: t('onboarding:selectPIN.disclaimer.note1'),
+      },
+      {
+        key: 'note2',
+        icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
+        desc: t('onboarding:selectPIN.disclaimer.note2'),
+      },
+      {
+        key: 'note3',
+        icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
+        desc: t('onboarding:selectPIN.disclaimer.note3'),
+      },
+    ]
+
+    return (
+      <Box align="center" mt={3}>
+        <Inner style={{ width: 700 }}>
+          <Box style={{ width: 260, justifyContent: 'center', alignItems: 'center' }} mt={5}>
+            <IconLedgerNanoSelectPIN />
+          </Box>
+          <Box shrink grow flow={4}>
+            {stepsLedgerNano.map(step => <OptionRow key={step.key} step={step} />)}
+          </Box>
+        </Inner>
+        <DisclaimerBox mt={6} disclaimerNotes={disclaimerNotes} />
+      </Box>
+    )
+  }
+}
+
+export default translate()(SelectPINnano)

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 (
+    <Box sticky pt={170}>
+      <Box grow alignItems="center">
+        <Title>{t('onboarding:selectPIN.title')}</Title>
+        <Box align="center" mt={7}>
+          {onboarding.isLedgerNano ? <SelectPINnano /> : <SelectPINblue />}
+        </Box>
+      </Box>
+      <OnboardingFooter horizontal flow={2} t={t} nextStep={nextStep} prevStep={prevStep} />
+    </Box>
+  )
+}

src/components/Onboarding/WriteSeedBlue.js → src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js

@@ -16,7 +16,7 @@ import {
   DisclaimerBox,
   OptionRow,
   Inner,
-} from './helperComponents'
+} from '../../helperComponents'
 
 type Props = {
   t: T,

src/components/Onboarding/WriteSeedNano.js → src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js

@@ -16,7 +16,7 @@ import {
   DisclaimerBox,
   OptionRow,
   Inner,
-} from './helperComponents'
+} from '../../helperComponents'
 
 type Props = {
   t: T,

src/components/Onboarding/WriteSeedRestore.js → src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js

@@ -17,7 +17,7 @@ import {
   DisclaimerBox,
   OptionRow,
   Inner,
-} from './helperComponents'
+} from '../../helperComponents'
 
 type Props = {
   t: T,

src/components/Onboarding/steps/WriteSeed.js → 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

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 {

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