diff --git a/src/components/modals/ImportAccounts/index.js b/src/components/modals/ImportAccounts/index.js index b5bf0190..20ec0566 100644 --- a/src/components/modals/ImportAccounts/index.js +++ b/src/components/modals/ImportAccounts/index.js @@ -75,7 +75,6 @@ type State = { stepId: StepId, isAppOpened: boolean, currency: ?Currency, - scannedAccounts: [], } const mapStateToProps = state => ({ @@ -86,7 +85,6 @@ const INITIAL_STATE = { stepId: 'chooseCurrency', isAppOpened: false, currency: null, - scannedAccounts: [], } class ImportAccounts extends PureComponent { diff --git a/src/components/modals/ImportAccounts/steps/03-step-import.js b/src/components/modals/ImportAccounts/steps/03-step-import.js index 6e60d287..086bb5f5 100644 --- a/src/components/modals/ImportAccounts/steps/03-step-import.js +++ b/src/components/modals/ImportAccounts/steps/03-step-import.js @@ -1,15 +1,107 @@ // @flow import React, { PureComponent } from 'react' +import styled from 'styled-components' + +import type { Account } from '@ledgerhq/live-common/lib/types' + +import { getBridgeForCurrency } from 'bridge' import Box from 'components/base/Box' +import Button from 'components/base/Button' import type { StepProps } from '../index' -class StepImport extends PureComponent { +type Status = 'scanning' | 'error' | 'finished' + +type State = { + status: Status, + err: ?Error, + scannedAccounts: Account[], +} + +const INITIAL_STATE = { + status: 'scanning', + err: null, + scannedAccounts: [], +} + +class StepImport extends PureComponent { + state = INITIAL_STATE + + componentDidMount() { + console.log(`starting import...`) + this.startScanAccountsDevice() + } + + componentWillUnmount() { + console.log(`stopping import...`) + } + + startScanAccountsDevice() { + const { currency } = this.props + + if (!currency) { + throw new Error('No currency to scan') + } + + const bridge = getBridgeForCurrency(currency) + + // TODO: use the real device + const devicePath = '' + + this.scanSubscription = bridge.scanAccountsOnDevice(currency, devicePath, { + next: account => { + const { scannedAccounts } = this.state + const hasAlreadyBeenScanned = !!scannedAccounts.find(a => account.id === a.id) + if (!hasAlreadyBeenScanned) { + this.setState({ scannedAccounts: [...scannedAccounts, account] }) + } + }, + complete: () => { + this.setState({ status: 'finished' }) + }, + error: err => this.setState({ status: 'error', err }), + }) + } + + handleRetry = () => { + this.setState(INITIAL_STATE) + this.startScanAccountsDevice() + } + render() { - return step import + const { status, err, scannedAccounts } = this.state + + return ( + + {status === 'scanning' && {'Scanning in progress...'}} + {status === 'finished' && {'Finished'}} + {['error', 'finished'].includes(status) && ( + + )} + {err && {err.toString()}} + + + {scannedAccounts.map(account => )} + + + ) } } +const AccountsList = styled(Box).attrs({ + flow: 2, +})`` + +const AccountRowContainer = styled(Box).attrs({ + horizontal: true, +})`` + +const AccountRow = ({ account }: { account: Account }) => ( + {account.name} +) + export default StepImport