Merge pull request #613 from meriadec/onboarding-polishes

Onboarding polishes

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 {

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,

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"

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,12 +19,14 @@ 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,
   Description,
   IconOptionRow,
   FixedTopContainer,
+  StepContainerInner,
   OnboardingFooterWrapper,
 } from '../helperComponents'
 
@@ -88,7 +91,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 +112,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
   handleGenuineCheckFailed = () => {
     this.handleCloseGenuineCheckModal(() => {
       this.props.updateGenuineCheck({
+        isGenuineFail: true,
         isDeviceGenuine: false,
         genuineCheckUnavailable: null,
       })
@@ -146,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>
@@ -211,6 +223,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
@@ -224,7 +250,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
               )}
             </CardWrapper>
           </Box>
-        </Box>
+        </StepContainerInner>
         <OnboardingFooter
           horizontal
           align="center"
@@ -301,6 +327,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 +350,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);
   }
 `

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}

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()}>

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

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)};
   }
 `

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