From f791f4ef38a5556b85bd603005708e52a10418a4 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Tue, 19 Jun 2018 11:43:23 +0200
Subject: [PATCH 1/2] Polishing onboarding genuine check states

---
 src/components/GenuineCheckModal/index.js     |  5 +---
 .../Onboarding/steps/GenuineCheck.js          | 29 +++++++++++++++++--
 src/components/Workflow/EnsureGenuine.js      |  7 +++--
 src/components/base/FakeLink.js               |  7 +++--
 static/i18n/en/onboarding.yml                 |  1 +
 5 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/components/GenuineCheckModal/index.js b/src/components/GenuineCheckModal/index.js
index 0005afed..8afe0b3b 100644
--- a/src/components/GenuineCheckModal/index.js
+++ b/src/components/GenuineCheckModal/index.js
@@ -19,9 +19,6 @@ type Props = {
 type State = {}
 
 class GenuineCheckStatus extends PureComponent<*> {
-  componentDidMount() {
-    this.sideEffect()
-  }
   componentDidUpdate() {
     this.sideEffect()
   }
@@ -33,7 +30,7 @@ class GenuineCheckStatus extends PureComponent<*> {
       onGenuineCheckFailed,
       onGenuineCheckUnavailable,
     } = this.props
-    if (isGenuine !== undefined) {
+    if (isGenuine !== null) {
       if (isGenuine) {
         onGenuineCheckPass()
       } else {
diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js
index eb03bd63..44bdd1f2 100644
--- a/src/components/Onboarding/steps/GenuineCheck.js
+++ b/src/components/Onboarding/steps/GenuineCheck.js
@@ -11,6 +11,7 @@ import type { T } from 'types/common'
 import { updateGenuineCheck } from 'reducers/onboarding'
 
 import Box from 'components/base/Box'
+import FakeLink from 'components/base/FakeLink'
 import Button from 'components/base/Button'
 import RadioGroup from 'components/base/RadioGroup'
 import GenuineCheckModal from 'components/GenuineCheckModal'
@@ -18,6 +19,7 @@ import GenuineCheckModal from 'components/GenuineCheckModal'
 import IconLedgerNanoError from 'icons/illustrations/LedgerNanoError'
 import IconLedgerBlueError from 'icons/illustrations/LedgerBlueError'
 import IconCheck from 'icons/Check'
+import IconCross from 'icons/Cross'
 
 import {
   Title,
@@ -88,7 +90,15 @@ class GenuineCheck extends PureComponent<StepProps, State> {
 
   handleOpenGenuineCheckModal = () => this.setState({ isGenuineCheckModalOpened: true })
   handleCloseGenuineCheckModal = (cb?: Function) =>
-    this.setState(state => ({ ...state, isGenuineCheckModalOpened: false }), () => cb && cb())
+    this.setState(
+      state => ({ ...state, isGenuineCheckModalOpened: false }),
+      () => {
+        // FIXME: meh
+        if (cb && typeof cb === 'function') {
+          cb()
+        }
+      },
+    )
 
   handleGenuineCheckPass = () => {
     this.handleCloseGenuineCheckModal(() => {
@@ -101,6 +111,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
   handleGenuineCheckFailed = () => {
     this.handleCloseGenuineCheckModal(() => {
       this.props.updateGenuineCheck({
+        isGenuineFail: true,
         isDeviceGenuine: false,
         genuineCheckUnavailable: null,
       })
@@ -211,6 +222,20 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                         {t('onboarding:genuineCheck.isGenuinePassed')}
                       </GenuineSuccessText>
                     </Box>
+                  ) : genuine.genuineCheckUnavailable ? (
+                    <Box horizontal align="center" flow={1} color={colors.alertRed}>
+                      <IconCross size={16} />
+                      <Box ff="Open Sans|Regular" fontSize={4}>
+                        {t('onboarding:genuineCheck.isGenuineUnavailable')}
+                        <FakeLink
+                          color="alertRed"
+                          underline
+                          onClick={this.handleOpenGenuineCheckModal}
+                        >
+                          {t('app:common.retry')}
+                        </FakeLink>
+                      </Box>
+                    </Box>
                   ) : (
                     <Button
                       primary
@@ -301,6 +326,7 @@ export const GenuineSuccessText = styled(Box).attrs({
   ff: 'Open Sans|Regular',
   fontSize: 4,
 })``
+
 export const CardTitle = styled(Box).attrs({
   ff: 'Open Sans|SemiBold',
   fontSize: 4,
@@ -323,7 +349,6 @@ const CardWrapper = styled(Box).attrs({
   background-color: ${p => (p.isDisabled ? p.theme.colors.lightGrey : p.theme.colors.white)};
   opacity: ${p => (p.isDisabled ? 0.7 : 1)};
   &:hover {
-    cursor: pointer;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
   }
 `
diff --git a/src/components/Workflow/EnsureGenuine.js b/src/components/Workflow/EnsureGenuine.js
index edef0e2a..831d60c8 100644
--- a/src/components/Workflow/EnsureGenuine.js
+++ b/src/components/Workflow/EnsureGenuine.js
@@ -61,13 +61,14 @@ class EnsureGenuine extends PureComponent<Props, State> {
         const res = await getIsGenuine
           .send({ devicePath: device.path, targetId: infos.targetId })
           .toPromise()
+        if (this._unmounting) return
         const isGenuine = res === '0000'
-        if ((!this.state.genuine || this.state.error) && isGenuine) {
-          !this._unmounting && this.setState({ genuine: isGenuine, error: null })
+        if (!this.state.genuine || this.state.error) {
+          this.setState({ genuine: isGenuine, error: null })
         }
       } catch (err) {
         if (!isEqual(this.state.error, err)) {
-          !this._unmounting && this.setState({ genuine: false, error: err })
+          this.setState({ genuine: null, error: err })
         }
       }
       this._checking = false
diff --git a/src/components/base/FakeLink.js b/src/components/base/FakeLink.js
index 2344d53c..57e3044c 100644
--- a/src/components/base/FakeLink.js
+++ b/src/components/base/FakeLink.js
@@ -5,14 +5,15 @@ import { darken, lighten } from 'styles/helpers'
 
 export default styled(Box).attrs({
   cursor: 'pointer',
-  color: 'wallet',
+  color: p => p.color || 'wallet',
 })`
+  text-decoration: ${p => (p.underline ? 'underline' : 'none')};
   &:hover {
     text-decoration: underline;
-    color: ${p => lighten(p.theme.colors.wallet, 0.05)};
+    color: ${p => lighten(p.theme.colors[p.color] || p.color || p.theme.colors.wallet, 0.05)};
   }
 
   &:active {
-    color: ${p => darken(p.theme.colors.wallet, 0.1)};
+    color: ${p => darken(p.theme.colors[p.color] || p.color || p.theme.colors.wallet, 0.1)};
   }
 `
diff --git a/static/i18n/en/onboarding.yml b/static/i18n/en/onboarding.yml
index d09f78e2..e4bc7bcf 100644
--- a/static/i18n/en/onboarding.yml
+++ b/static/i18n/en/onboarding.yml
@@ -87,6 +87,7 @@ genuineCheck:
       title: Check if your Ledger device is genuine
       desc: This is a long text, please replace it with the final wording once it’s done. Lorem ipsum dolor amet ledger lorem dolor
   isGenuinePassed: Your Nano S is genuine
+  isGenuineUnavailable: Server problem
   buttons:
     genuineCheck: Genuine check
     contactSupport: Contact Support

From ae84bc84ede7200196e4c174eeae57601ec55731 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Tue, 19 Jun 2018 11:59:19 +0200
Subject: [PATCH 2/2] Make onboarding steps scrollable to handle screen edge
 cases

---
 src/components/Onboarding/helperComponents.js   | 3 +++
 src/components/Onboarding/steps/Analytics.js    | 6 +++---
 src/components/Onboarding/steps/GenuineCheck.js | 5 +++--
 src/components/Onboarding/steps/SelectDevice.js | 6 +++---
 src/components/Onboarding/steps/SetPassword.js  | 5 +++--
 5 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js
index 4f9be4c5..4f33cb11 100644
--- a/src/components/Onboarding/helperComponents.js
+++ b/src/components/Onboarding/helperComponents.js
@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import { radii } from 'styles/theme'
 
 import Box from 'components/base/Box'
+import GrowScroll from 'components/base/GrowScroll'
 import IconSensitiveOperationShield from 'icons/illustrations/SensitiveOperationShield'
 
 // GENERAL
@@ -16,6 +17,8 @@ export const Title = styled(Box).attrs({
   text-align: center;
 `
 
+export const StepContainerInner = styled(GrowScroll).attrs({ pb: 6, align: 'center' })``
+
 export const Description = styled(Box).attrs({
   ff: 'Museo Sans|Light',
   fontSize: 5,
diff --git a/src/components/Onboarding/steps/Analytics.js b/src/components/Onboarding/steps/Analytics.js
index d92720bc..94bdea55 100644
--- a/src/components/Onboarding/steps/Analytics.js
+++ b/src/components/Onboarding/steps/Analytics.js
@@ -6,7 +6,7 @@ import { connect } from 'react-redux'
 import { saveSettings } from 'actions/settings'
 import Box from 'components/base/Box'
 import CheckBox from 'components/base/CheckBox'
-import { Title, Description, FixedTopContainer } from '../helperComponents'
+import { Title, Description, FixedTopContainer, StepContainerInner } from '../helperComponents'
 import OnboardingFooter from '../OnboardingFooter'
 
 import type { StepProps } from '..'
@@ -51,7 +51,7 @@ class Analytics extends PureComponent<StepProps, State> {
 
     return (
       <FixedTopContainer>
-        <Box grow alignItems="center">
+        <StepContainerInner>
           <Title>{t('onboarding:analytics.title')}</Title>
           <Description>{t('onboarding:analytics.desc')}</Description>
           <Box mt={5}>
@@ -74,7 +74,7 @@ class Analytics extends PureComponent<StepProps, State> {
               </Box>
             </Container>
           </Box>
-        </Box>
+        </StepContainerInner>
         <OnboardingFooter
           horizontal
           align="center"
diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js
index 44bdd1f2..41e73502 100644
--- a/src/components/Onboarding/steps/GenuineCheck.js
+++ b/src/components/Onboarding/steps/GenuineCheck.js
@@ -26,6 +26,7 @@ import {
   Description,
   IconOptionRow,
   FixedTopContainer,
+  StepContainerInner,
   OnboardingFooterWrapper,
 } from '../helperComponents'
 
@@ -157,7 +158,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
 
     return (
       <FixedTopContainer>
-        <Box grow alignItems="center">
+        <StepContainerInner>
           <Title>{t('onboarding:genuineCheck.title')}</Title>
           {onboarding.isLedgerNano ? (
             <Description>{t('onboarding:genuineCheck.descNano')}</Description>
@@ -249,7 +250,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
               )}
             </CardWrapper>
           </Box>
-        </Box>
+        </StepContainerInner>
         <OnboardingFooter
           horizontal
           align="center"
diff --git a/src/components/Onboarding/steps/SelectDevice.js b/src/components/Onboarding/steps/SelectDevice.js
index eca85f3e..938ba166 100644
--- a/src/components/Onboarding/steps/SelectDevice.js
+++ b/src/components/Onboarding/steps/SelectDevice.js
@@ -11,7 +11,7 @@ import Box from 'components/base/Box'
 import IconCheckCirle from 'icons/Check'
 import IconLedgerNano from 'icons/illustrations/LedgerNano'
 import IconLedgerBlue from 'icons/illustrations/LedgerBlue'
-import { Title, Inner, FixedTopContainer } from '../helperComponents'
+import { Title, Inner, FixedTopContainer, StepContainerInner } from '../helperComponents'
 import OnboardingFooter from '../OnboardingFooter'
 
 import type { StepProps } from '..'
@@ -35,7 +35,7 @@ class SelectDevice extends PureComponent<StepProps, {}> {
     const { t, onboarding, jumpStep } = this.props
     return (
       <FixedTopContainer>
-        <Box grow alignItems="center">
+        <StepContainerInner>
           <Box mb={5}>
             <Title>{t('onboarding:selectDevice.title')}</Title>
           </Box>
@@ -63,7 +63,7 @@ class SelectDevice extends PureComponent<StepProps, {}> {
               </DeviceContainer>
             </Inner>
           </Box>
-        </Box>
+        </StepContainerInner>
         <OnboardingFooter
           horizontal
           t={t}
diff --git a/src/components/Onboarding/steps/SetPassword.js b/src/components/Onboarding/steps/SetPassword.js
index 7448d050..4c29d764 100644
--- a/src/components/Onboarding/steps/SetPassword.js
+++ b/src/components/Onboarding/steps/SetPassword.js
@@ -20,6 +20,7 @@ import {
   DisclaimerBox,
   FixedTopContainer,
   OnboardingFooterWrapper,
+  StepContainerInner,
 } from '../helperComponents'
 
 type State = {
@@ -96,7 +97,7 @@ class SetPassword extends PureComponent<StepProps, State> {
 
     return (
       <FixedTopContainer>
-        <Box grow alignItems="center">
+        <StepContainerInner>
           <Fragment>
             <Box alignItems="center">
               <Title>{t('onboarding:setPassword.title')}</Title>
@@ -120,7 +121,7 @@ class SetPassword extends PureComponent<StepProps, State> {
               <DisclaimerBox mt={7} disclaimerNotes={disclaimerNotes} />
             </Box>
           </Fragment>
-        </Box>
+        </StepContainerInner>
 
         <OnboardingFooterWrapper>
           <Button padded outlineGrey onClick={() => prevStep()}>