Polishing onboarding genuine check states

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

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