diff --git a/src/components/modals/ImportAccounts/steps/03-step-import.js b/src/components/modals/ImportAccounts/steps/03-step-import.js index 0841d37c..960304b3 100644 --- a/src/components/modals/ImportAccounts/steps/03-step-import.js +++ b/src/components/modals/ImportAccounts/steps/03-step-import.js @@ -1,7 +1,9 @@ // @flow import React, { PureComponent } from 'react' +import styled from 'styled-components' import type { Account } from '@ledgerhq/live-common/lib/types' +import uniq from 'lodash/uniq' import { getBridgeForCurrency } from 'bridge' @@ -48,10 +50,16 @@ class StepImport extends PureComponent { this.scanSubscription = bridge.scanAccountsOnDevice(currency, devicePath, { next: account => { - const { scannedAccounts } = this.props + const { scannedAccounts, checkedAccountsIds } = this.props const hasAlreadyBeenScanned = !!scannedAccounts.find(a => account.id === a.id) if (!hasAlreadyBeenScanned) { - setState({ scannedAccounts: [...scannedAccounts, account] }) + setState({ + scannedAccounts: [...scannedAccounts, account], + checkedAccountsIds: + account.operations.length > 0 + ? uniq([...checkedAccountsIds, account.id]) + : checkedAccountsIds, + }) } }, complete: () => setState({ scanStatus: 'finished' }), @@ -105,57 +113,100 @@ class StepImport extends PureComponent { handleToggleSelectAll = () => { const { scannedAccounts, setState } = this.props - setState({ checkedAccountsIds: scannedAccounts.map(a => a.id) }) + setState({ + checkedAccountsIds: scannedAccounts.filter(a => a.operations.length > 0).map(a => a.id), + }) } render() { const { scanStatus, err, scannedAccounts, checkedAccountsIds, existingAccounts } = this.props + const importableAccounts = scannedAccounts.filter(acc => { + if (acc.operations.length <= 0) { + return false + } + return existingAccounts.find(a => a.id === acc.id) === undefined + }) + + const creatableAccounts = scannedAccounts.filter(acc => { + if (acc.operations.length > 0) { + return false + } + return existingAccounts.find(a => a.id === acc.id) === undefined + }) + return ( {err && {err.message}} - {!!scannedAccounts.length && ( - - - {'Select all'} - + + + {!!importableAccounts.length && ( + + + {`Account(s) to import (${importableAccounts.length})`} + + + {'Select all'} + + + )} + + + {importableAccounts.map(account => { + const isChecked = checkedAccountsIds.find(id => id === account.id) !== undefined + const existingAccount = existingAccounts.find(a => a.id === account.id) + const isDisabled = existingAccount !== undefined + return ( + + ) + })} + + {scanStatus === 'scanning' && ( + + + + )} + - )} - - - {scannedAccounts.map(account => { - const isChecked = checkedAccountsIds.find(id => id === account.id) !== undefined - const existingAccount = existingAccounts.find(a => a.id === account.id) - const isDisabled = existingAccount !== undefined - return ( + {creatableAccounts.length > 0 && ( + + + + {'Create account'} + + id === creatableAccounts[0].id) !== undefined + } onClick={this.handleToggleAccount} onAccountUpdate={this.handleAccountUpdate} /> - ) - })} - {scanStatus === 'scanning' && ( - - )} - {['error', 'finished'].includes(scanStatus) && ( + {['error'].includes(scanStatus) && (