Progress on Onboarding Genuine Check

src/components/GenuineCheckModal/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { PureComponent } from 'react'
+import React, { PureComponent, Fragment } from 'react'
 import { translate } from 'react-i18next'
 
 import type { T } from 'types/common'
@@ -11,14 +11,47 @@ import WorkflowDefault from 'components/Workflow/WorkflowDefault'
 
 type Props = {
   t: T,
-  onGenuineCheck: (isGenuine: boolean) => void,
+  onGenuineCheckPass: () => void,
+  onGenuineCheckFailed: () => void,
+  onGenuineCheckUnavailable: Error => void,
 }
 
 type State = {}
 
+class GenuineCheckStatus extends PureComponent<*> {
+  componentDidMount() {
+    this.sideEffect()
+  }
+  componentDidUpdate() {
+    this.sideEffect()
+  }
+  sideEffect() {
+    const {
+      isGenuine,
+      error,
+      onGenuineCheckPass,
+      onGenuineCheckFailed,
+      onGenuineCheckUnavailable,
+    } = this.props
+    if (isGenuine !== undefined) {
+      if (isGenuine) {
+        onGenuineCheckPass()
+      } else {
+        onGenuineCheckFailed()
+      }
+    } else if (error) {
+      onGenuineCheckUnavailable(error)
+    }
+  }
+  render() {
+    return null
+  }
+}
+
+/* eslint-disable react/no-multi-comp */
 class GenuineCheck extends PureComponent<Props, State> {
   renderBody = ({ onClose }) => {
-    const { t, onGenuineCheck } = this.props
+    const { t, onGenuineCheckPass, onGenuineCheckFailed, onGenuineCheckUnavailable } = this.props
 
     // TODO: use the real devices list. for now we force choosing only
     // the current device because we don't handle multi device in MVP
@@ -28,14 +61,22 @@ class GenuineCheck extends PureComponent<Props, State> {
         <ModalTitle>{t('app:genuinecheck.modal.title')}</ModalTitle>
         <ModalContent>
           <Workflow
-            onGenuineCheck={isGenuine => onGenuineCheck(isGenuine)}
             renderDefault={(device, deviceInfo, isGenuine, errors) => (
-              <WorkflowDefault
-                device={device}
-                deviceInfo={deviceInfo}
-                isGenuine={isGenuine}
-                errors={errors} // TODO: FIX ERRORS
-              />
+              <Fragment>
+                <GenuineCheckStatus
+                  isGenuine={isGenuine}
+                  error={errors.genuineError}
+                  onGenuineCheckPass={onGenuineCheckPass}
+                  onGenuineCheckFailed={onGenuineCheckFailed}
+                  onGenuineCheckUnavailable={onGenuineCheckUnavailable}
+                />
+                <WorkflowDefault
+                  device={device}
+                  deviceInfo={deviceInfo}
+                  isGenuine={isGenuine}
+                  errors={errors} // TODO: FIX ERRORS
+                />
+              </Fragment>
             )}
           />
         </ModalContent>

src/components/Onboarding/steps/GenuineCheck.js

@@ -90,10 +90,28 @@ class GenuineCheck extends PureComponent<StepProps, State> {
   handleCloseGenuineCheckModal = (cb?: Function) =>
     this.setState(state => ({ ...state, isGenuineCheckModalOpened: false }), () => cb && cb())
 
-  handleGenuineCheck = isGenuine => {
+  handleGenuineCheckPass = () => {
     this.handleCloseGenuineCheckModal(() => {
       this.props.updateGenuineCheck({
-        isDeviceGenuine: isGenuine,
+        isDeviceGenuine: true,
+        genuineCheckUnavailable: null,
+      })
+    })
+  }
+  handleGenuineCheckFailed = () => {
+    this.handleCloseGenuineCheckModal(() => {
+      this.props.updateGenuineCheck({
+        isDeviceGenuine: false,
+        genuineCheckUnavailable: null,
+      })
+    })
+  }
+
+  handleGenuineCheckUnavailable = error => {
+    this.handleCloseGenuineCheckModal(() => {
+      this.props.updateGenuineCheck({
+        isDeviceGenuine: false,
+        genuineCheckUnavailable: error,
       })
     })
   }
@@ -219,7 +237,9 @@ class GenuineCheck extends PureComponent<StepProps, State> {
         <GenuineCheckModal
           isOpened={isGenuineCheckModalOpened}
           onClose={this.handleCloseGenuineCheckModal}
-          onGenuineCheck={this.handleGenuineCheck}
+          onGenuineCheckPass={this.handleGenuineCheckPass}
+          onGenuineCheckFailed={this.handleGenuineCheckFailed}
+          onGenuineCheckUnavailable={this.handleGenuineCheckUnavailable}
         />
       </FixedTopContainer>
     )

src/components/Workflow/index.js

@@ -34,11 +34,11 @@ type Props = {
   renderMcuUpdate?: (deviceInfo: DeviceInfo) => Node,
   renderFinalUpdate?: (deviceInfo: DeviceInfo) => Node,
   renderDashboard?: (device: Device, deviceInfo: DeviceInfo, isGenuine: boolean) => Node,
-  onGenuineCheck?: (isGenuine: boolean) => void,
   renderError?: (dashboardError: ?Error, genuineError: ?Error) => Node,
 }
 type State = {}
 
+// In future, move to meri's approach; this code is way too much specific
 class Workflow extends PureComponent<Props, State> {
   render() {
     const {
@@ -47,7 +47,6 @@ class Workflow extends PureComponent<Props, State> {
       renderMcuUpdate,
       renderError,
       renderDefault,
-      onGenuineCheck,
     } = this.props
     return (
       <EnsureDevice>
@@ -74,8 +73,6 @@ class Workflow extends PureComponent<Props, State> {
                   }
 
                   if (isGenuine && deviceInfo && device && !dashboardError && !genuineError) {
-                    if (onGenuineCheck) onGenuineCheck(isGenuine)
-
                     if (renderDashboard) return renderDashboard(device, deviceInfo, isGenuine)
                   }
 

src/reducers/onboarding.js

@@ -23,6 +23,7 @@ export type OnboardingState = {
     recoveryStepPass: boolean,
     isGenuineFail: boolean,
     isDeviceGenuine: boolean,
+    genuineCheckUnavailable: ?Error,
   },
   isLedgerNano: boolean | null,
   flowType: string,
@@ -36,6 +37,7 @@ const state: OnboardingState = {
     recoveryStepPass: false,
     isGenuineFail: false,
     isDeviceGenuine: false,
+    genuineCheckUnavailable: null,
   },
   isLedgerNano: null,
   flowType: '',