Fix DeviceConnect for multi device

src/components/DeviceConnect/index.js

@@ -206,7 +206,7 @@ class DeviceConnect extends PureComponent<Props> {
           {hasMultipleDevices && (
             <ListDevices>
               <Box color="graphite" fontSize={3}>
-                {t('deviceConnect:step1.choose', { devicesCount: devices.length })}
+                {t('deviceConnect:step1.choose', { count: devices.length })}
               </Box>
               <Box flow={2}>
                 {devices.map(d => {

src/components/DeviceMonitNew/index.js

@@ -14,29 +14,28 @@ const mapStateToProps = state => ({
   devices: getDevices(state),
 })
 
-type DeviceStatus =
-  | 'unconnected'
-  | 'connected'
-  | 'appOpened.success'
-  | 'appOpened.fail'
-  | 'appOpened.progress'
+type DeviceStatus = 'unconnected' | 'connected'
+
+type AppStatus = 'success' | 'fail' | 'progress'
 
 type Props = {
   coinType: number,
   devices: Devices,
   deviceSelected: Device | null,
   account?: Account,
-  onStatusChange?: DeviceStatus => void,
+  onStatusChange?: (DeviceStatus, AppStatus) => void,
   render?: Function,
 }
 
 type State = {
-  status: DeviceStatus,
+  deviceStatus: DeviceStatus,
+  appStatus: AppStatus,
 }
 
 class DeviceMonit extends PureComponent<Props, State> {
   state = {
-    status: this.props.deviceSelected ? 'connected' : 'unconnected',
+    appStatus: 'progress',
+    deviceStatus: this.props.deviceSelected ? 'connected' : 'unconnected',
   }
 
   componentDidMount() {
@@ -47,19 +46,18 @@ class DeviceMonit extends PureComponent<Props, State> {
   }
 
   componentWillReceiveProps(nextProps) {
-    const { status } = this.state
+    const { deviceStatus } = this.state
     const { deviceSelected, devices } = this.props
     const { devices: nextDevices, deviceSelected: nextDeviceSelected } = nextProps
 
-    if (status === 'unconnected' && !deviceSelected && nextDeviceSelected) {
-      this.handleStatusChange('connected')
+    if (deviceStatus === 'unconnected' && !deviceSelected && nextDeviceSelected) {
+      this.handleStatusChange('connected', 'progress')
     }
 
-    if (status !== 'unconnected' && devices !== nextDevices) {
+    if (deviceStatus !== 'unconnected' && devices !== nextDevices) {
       const isConnected = nextDevices.find(d => d === nextDeviceSelected)
       if (!isConnected) {
-        this.handleStatusChange('unconnected')
-        clearTimeout(this._timeout)
+        this.handleStatusChange('unconnected', 'progress')
       }
     }
   }
@@ -69,7 +67,7 @@ class DeviceMonit extends PureComponent<Props, State> {
     const { deviceSelected: prevDeviceSelected } = prevProps
 
     if (prevDeviceSelected !== deviceSelected) {
-      this.handleStatusChange('appOpened.progress')
+      this.handleStatusChange('connected', 'progress')
       this._timeout = setTimeout(this.checkAppOpened, 250)
     }
   }
@@ -109,13 +107,15 @@ class DeviceMonit extends PureComponent<Props, State> {
 
   _timeout: any = null
 
-  handleStatusChange = status => {
+  handleStatusChange = (deviceStatus, appStatus) => {
     const { onStatusChange } = this.props
-    this.setState({ status })
-    onStatusChange && onStatusChange(status)
+    clearTimeout(this._timeout)
+    this.setState({ deviceStatus, appStatus })
+    onStatusChange && onStatusChange(deviceStatus, appStatus)
   }
 
   handleMsgEvent = (e, { type, data }) => {
+    const { deviceStatus } = this.state
     const { deviceSelected } = this.props
 
     if (deviceSelected === null) {
@@ -123,26 +123,27 @@ class DeviceMonit extends PureComponent<Props, State> {
     }
 
     if (type === 'wallet.checkIfAppOpened.success' && deviceSelected.path === data.devicePath) {
-      clearTimeout(this._timeout)
-      this.handleStatusChange('appOpened.success')
+      this.handleStatusChange(deviceStatus, 'success')
+      this._timeout = setTimeout(this.checkAppOpened, 1e3)
     }
 
     if (type === 'wallet.checkIfAppOpened.fail' && deviceSelected.path === data.devicePath) {
-      this.handleStatusChange('appOpened.fail')
+      this.handleStatusChange(deviceStatus, 'fail')
       this._timeout = setTimeout(this.checkAppOpened, 1e3)
     }
   }
 
   render() {
     const { coinType, account, devices, deviceSelected, render } = this.props
-    const { status } = this.state
+    const { appStatus, deviceStatus } = this.state
 
     if (render) {
       return render({
+        appStatus,
         coinType: (account && account.coinType) || coinType,
-        status,
         devices,
-        deviceSelected: status === 'connected' ? deviceSelected : null,
+        deviceSelected: deviceStatus === 'connected' ? deviceSelected : null,
+        deviceStatus,
       })
     }
 

src/components/modals/AddAccount/index.js

@@ -67,7 +67,7 @@ type State = {
   deviceSelected: Device | null,
   fetchingCounterValues: boolean,
   selectedAccounts: Array<number>,
-  status: null | string,
+  appStatus: null | string,
   stepIndex: number,
 }
 
@@ -77,7 +77,7 @@ const INITIAL_STATE = {
   deviceSelected: null,
   fetchingCounterValues: false,
   selectedAccounts: [],
-  status: null,
+  appStatus: null,
   stepIndex: 0,
 }
 
@@ -148,8 +148,8 @@ class AddAccountModal extends PureComponent<Props, State> {
     }
 
     if (stepIndex === 1) {
-      const { deviceSelected, status } = this.state
-      return deviceSelected !== null && status === 'appOpened.success'
+      const { deviceSelected, appStatus } = this.state
+      return deviceSelected !== null && appStatus === 'success'
     }
 
     if (stepIndex === 3) {
@@ -225,7 +225,7 @@ class AddAccountModal extends PureComponent<Props, State> {
 
   handleChangeCurrency = (currency: Currency) => this.setState({ currency })
 
-  handleChangeStatus = status => this.setState({ status })
+  handleChangeStatus = (deviceStatus, appStatus) => this.setState({ appStatus })
 
   handleImportAccount = () => {
     const { archivedAccounts, updateAccount } = this.props

src/components/modals/Receive/index.js

@@ -22,9 +22,10 @@ type Props = {
 }
 
 type State = {
+  account: Account | null,
   deviceSelected: Device | null,
+  appStatus: null | string,
   stepIndex: number,
-  account: Account | null,
 }
 
 const GET_STEPS = t => [
@@ -35,10 +36,11 @@ const GET_STEPS = t => [
 const INITIAL_STATE = {
   account: null,
   deviceSelected: null,
+  appStatus: null,
   stepIndex: 0,
 }
 
-class SendModal extends PureComponent<Props, State> {
+class ReceiveModal extends PureComponent<Props, State> {
   state = INITIAL_STATE
 
   _steps = GET_STEPS(this.props.t)
@@ -50,6 +52,11 @@ class SendModal extends PureComponent<Props, State> {
       return acc !== null
     }
 
+    if (stepIndex === 1) {
+      const { deviceSelected, appStatus } = this.state
+      return deviceSelected !== null && appStatus === 'success'
+    }
+
     return false
   }
 
@@ -67,6 +74,8 @@ class SendModal extends PureComponent<Props, State> {
 
   handleChangeAccount = account => this.setState({ account })
 
+  handleChangeStatus = (deviceStatus, appStatus) => this.setState({ appStatus })
+
   renderStep = acc => {
     const { deviceSelected, stepIndex } = this.state
     const { t } = this.props
@@ -85,8 +94,10 @@ class SendModal extends PureComponent<Props, State> {
         onChangeAccount: this.handleChangeAccount,
       }),
       ...props(stepIndex === 1, {
+        accountName: acc ? acc.name : undefined,
         deviceSelected,
         onChangeDevice: this.handleChangeDevice,
+        onStatusChange: this.handleChangeStatus,
       }),
     }
 
@@ -144,4 +155,4 @@ class SendModal extends PureComponent<Props, State> {
   }
 }
 
-export default translate()(SendModal)
+export default translate()(ReceiveModal)

src/components/modals/StepConnectDevice.js

@@ -2,13 +2,15 @@
 
 import React from 'react'
 
-import type { Account, Currency } from '@ledgerhq/currencies/lib/types'
+import type { Account } from '@ledgerhq/wallet-common/lib/types'
+import type { Currency } from '@ledgerhq/currencies/lib/types'
 import type { Device } from 'types/common'
 
 import DeviceConnect from 'components/DeviceConnect'
 import DeviceMonit from 'components/DeviceMonitNew'
 
 type Props = {
+  accountName?: string,
   account?: Account,
   currency?: Currency | null,
   deviceSelected: Device | null,
@@ -22,12 +24,11 @@ const StepConnectDevice = (props: Props) => (
     coinType={props.currency && props.currency.coinType}
     deviceSelected={props.deviceSelected}
     onStatusChange={props.onStatusChange}
-    render={({ coinType, status, devices, deviceSelected }) => (
+    render={({ coinType, appStatus, devices, deviceSelected }) => (
       <DeviceConnect
+        accountName={props.accountName}
         coinType={coinType}
-        appOpened={
-          status === 'appOpened.success' ? 'success' : status === 'appOpened.fail' ? 'fail' : null
-        }
+        appOpened={appStatus === 'success' ? 'success' : appStatus === 'fail' ? 'fail' : null}
         devices={devices}
         deviceSelected={deviceSelected}
         onChangeDevice={props.onChangeDevice}
@@ -38,6 +39,7 @@ const StepConnectDevice = (props: Props) => (
 
 StepConnectDevice.defaultProps = {
   account: undefined,
+  accountName: undefined,
   currency: undefined,
 }
 

static/i18n/en/deviceConnect.yml

@@ -1,6 +1,6 @@
 step1:
   connect: Connect your <0>Ledger device</0> to your computer and enter your <1>PIN code</1> on your device
-  choose: We detected {{devicesCount}} devices connected, please select one:
+  choose_plural: We detected {{count}} devices connected, please select one:
 
 step2:
   open: Open <0>{{appName}}</0> App on your device