Merge pull request #1610 from meriadec/devtools-improvement

Ability to import multiple xpubs at once

src/components/DevToolsPage/AccountImporter.js

@@ -1,5 +1,7 @@
 // @flow
 
+/* eslint-disable react/no-multi-comp */
+
 import React, { PureComponent, Fragment } from 'react'
 import invariant from 'invariant'
 import { connect } from 'react-redux'
@@ -9,7 +11,8 @@ import type { Currency, Account } from '@ledgerhq/live-common/lib/types'
 import { decodeAccount } from 'reducers/accounts'
 import { addAccount } from 'actions/accounts'
 
-import FormattedVal from 'components/base/FormattedVal'
+import FakeLink from 'components/base/FakeLink'
+import Ellipsis from 'components/base/Ellipsis'
 import Switch from 'components/base/Switch'
 import Spinner from 'components/base/Spinner'
 import Box, { Card } from 'components/base/Box'
@@ -32,26 +35,40 @@ type Props = {
   addAccount: Account => void,
 }
 
-const INITIAL_STATE = {
+type ImportableAccountType = {
-  status: 'idle',
+  name: string,
-  currency: null,
+  currency: Currency,
-  xpub: '',
+  derivationMode: string,
-  account: null,
+  xpub: string,
-  isSegwit: true,
-  isUnsplit: false,
-  error: null,
 }
 
 type State = {
   status: string,
+
+  importableAccounts: ImportableAccountType[],
+
   currency: ?Currency,
   xpub: string,
-  account: ?Account,
+  name: string,
   isSegwit: boolean,
   isUnsplit: boolean,
+
   error: ?Error,
 }
 
+const INITIAL_STATE = {
+  status: 'idle',
+
+  currency: null,
+  xpub: '',
+  name: 'dev',
+  isSegwit: true,
+  isUnsplit: false,
+
+  error: null,
+  importableAccounts: [],
+}
+
 class AccountImporter extends PureComponent<Props, State> {
   state = INITIAL_STATE
 
@@ -67,18 +84,41 @@ class AccountImporter extends PureComponent<Props, State> {
   onChangeXPUB = xpub => this.setState({ xpub })
   onChangeSegwit = isSegwit => this.setState({ isSegwit })
   onChangeUnsplit = isUnsplit => this.setState({ isUnsplit })
+  onChangeName = name => this.setState({ name })
 
   isValid = () => {
-    const { currency, xpub } = this.state
+    const { currency, xpub, status } = this.state
-    return !!currency && !!xpub
+    return !!currency && !!xpub && status !== 'scanning'
   }
 
   scan = async () => {
-    if (!this.isValid()) return
     this.setState({ status: 'scanning' })
+    const { importableAccounts } = this.state
     try {
-      const { currency, xpub, isSegwit, isUnsplit } = this.state
+      for (let i = 0; i < importableAccounts.length; i++) {
-      invariant(currency, 'no currency')
+        const a = importableAccounts[i]
+        const scanPayload = {
+          seedIdentifier: `dev_${a.xpub}`,
+          currencyId: a.currency.id,
+          xpub: a.xpub,
+          derivationMode: a.derivationMode,
+        }
+        const rawAccount = await scanFromXPUB.send(scanPayload).toPromise()
+        const account = decodeAccount(rawAccount)
+        await this.import({
+          ...account,
+          name: a.name,
+        })
+        this.removeImportableAccount(a)
+      }
+      this.reset()
+    } catch (error) {
+      this.setState({ status: 'error', error })
+    }
+  }
+
+  addToScan = () => {
+    const { xpub, currency, isSegwit, isUnsplit, name } = this.state
     const derivationMode = isSegwit
       ? isUnsplit
         ? 'segwit_unsplit'
@@ -86,37 +126,47 @@ class AccountImporter extends PureComponent<Props, State> {
       : isUnsplit
         ? 'unsplit'
         : ''
-      const rawAccount = await scanFromXPUB
+    const importableAccount = { xpub, currency, derivationMode, name }
-        .send({
+    this.setState(({ importableAccounts }) => ({
-          seedIdentifier: 'dev_tool',
+      importableAccounts: [...importableAccounts, importableAccount],
-          currencyId: currency.id,
+      currency: null,
-          xpub,
+      xpub: '',
-          derivationMode,
+      name: 'dev',
-        })
+      isSegwit: true,
-        .toPromise()
+      isUnsplit: false,
-      const account = decodeAccount(rawAccount)
+    }))
-      this.setState({ status: 'finish', account })
-    } catch (error) {
-      this.setState({ status: 'error', error })
   }
+
+  removeImportableAccount = importableAccount => {
+    this.setState(({ importableAccounts }) => ({
+      importableAccounts: importableAccounts.filter(i => i.xpub !== importableAccount.xpub),
+    }))
   }
 
-  import = async () => {
+  import = async account => {
-    const { account } = this.state
     invariant(account, 'no account')
     await idleCallback()
     this.props.addAccount(account)
-    this.reset()
   }
 
   reset = () => this.setState(INITIAL_STATE)
 
   render() {
-    const { currency, xpub, isSegwit, isUnsplit, status, account, error } = this.state
+    const {
+      currency,
+      xpub,
+      name,
+      isSegwit,
+      isUnsplit,
+      status,
+      error,
+      importableAccounts,
+    } = this.state
     const supportsSplit = !!currency && !!currency.forkedFrom
     return (
+      <Fragment>
         <Card title="Import from xpub" flow={3}>
-        {status === 'idle' ? (
+          {status === 'idle' || status === 'scanning' ? (
             <Fragment>
               <Box flow={1}>
                 <Label>{'currency'}</Label>
@@ -148,50 +198,24 @@ class AccountImporter extends PureComponent<Props, State> {
                   placeholder="xpub"
                   value={xpub}
                   onChange={this.onChangeXPUB}
-                onEnter={this.scan}
+                  onEnter={this.addToScan}
                 />
               </Box>
-            <Box align="flex-end">
+              <Box flow={1}>
-              <Button primary small disabled={!this.isValid()} onClick={this.scan}>
+                <Label>{'name'}</Label>
-                {'scan'}
+                <Input
-              </Button>
+                  placeholder="name"
-            </Box>
+                  value={name}
-          </Fragment>
+                  onChange={this.onChangeName}
-        ) : status === 'scanning' ? (
+                  onEnter={this.addToScan}
-          <Box align="center" justify="center" p={5}>
-            <Spinner size={16} />
-          </Box>
-        ) : status === 'finish' ? (
-          account ? (
-            <Box p={8} align="center" justify="center" flow={5} horizontal>
-              <Box horizontal flow={4} color="graphite" align="center">
-                {currency && <CurrencyCircleIcon size={64} currency={currency} />}
-                <Box>
-                  <Box ff="Museo Sans|Bold">{account.name}</Box>
-                  <FormattedVal
-                    fontSize={2}
-                    alwaysShowSign={false}
-                    color="graphite"
-                    unit={account.unit}
-                    showCode
-                    val={account.balance || 0}
                 />
-                  <Box fontSize={2}>{`${account.operations.length} operation(s)`}</Box>
-                </Box>
               </Box>
-
+              <Box align="flex-end">
-              <Button outline small disabled={!account} onClick={this.import}>
+                <Button primary small disabled={!this.isValid()} onClick={this.addToScan}>
-                {'import'}
+                  {'add to scan'}
-              </Button>
-            </Box>
-          ) : (
-            <Box align="center" justify="center" p={5} flow={4}>
-              <Box>{'No accounts found or wrong xpub'}</Box>
-              <Button primary onClick={this.reset} small autoFocus>
-                {'Reset'}
                 </Button>
               </Box>
-          )
+            </Fragment>
           ) : status === 'error' ? (
             <Box align="center" justify="center" p={5} flow={4}>
               <Box>
@@ -203,6 +227,56 @@ class AccountImporter extends PureComponent<Props, State> {
             </Box>
           ) : null}
         </Card>
+        {!!importableAccounts.length && (
+          <Card flow={2}>
+            {importableAccounts.map((acc, i) => (
+              <ImportableAccount
+                key={acc.xpub}
+                importableAccount={acc}
+                onRemove={this.removeImportableAccount}
+                isLoading={status === 'scanning' && i === 0}
+              >
+                {acc.xpub}
+              </ImportableAccount>
+            ))}
+            {status !== 'scanning' && (
+              <Box mt={4} align="flex-start">
+                <Button primary onClick={this.scan}>
+                  {'Launch scan'}
+                </Button>
+              </Box>
+            )}
+          </Card>
+        )}
+      </Fragment>
+    )
+  }
+}
+
+class ImportableAccount extends PureComponent<{
+  importableAccount: ImportableAccountType,
+  onRemove: ImportableAccountType => void,
+  isLoading: boolean,
+}> {
+  remove = () => {
+    this.props.onRemove(this.props.importableAccount)
+  }
+  render() {
+    const { importableAccount, isLoading } = this.props
+    return (
+      <Box horizontal flow={2} align="center">
+        {isLoading && <Spinner size={16} color="rgba(0, 0, 0, 0.3)" />}
+        <CurrencyCircleIcon currency={importableAccount.currency} size={24} />
+        <Box grow ff="Rubik" fontSize={3}>
+          <Ellipsis>{`[${importableAccount.name}] ${importableAccount.derivationMode ||
+            'default'} ${importableAccount.xpub}`}</Ellipsis>
+        </Box>
+        {!isLoading && (
+          <FakeLink onClick={this.remove} fontSize={3}>
+            {'Remove'}
+          </FakeLink>
+        )}
+      </Box>
     )
   }
 }

src/helpers/libcore.js

@@ -557,14 +557,12 @@ export async function scanAccountsFromXPUB({
   const currency = getCryptoCurrencyById(currencyId)
   const walletName = getWalletName({
     currency,
-    seedIdentifier: 'debug',
+    seedIdentifier,
     derivationMode,
   })
 
   const wallet = await getOrCreateWallet(core, walletName, { currency, derivationMode })
 
-  await wallet.eraseDataSince(new Date(0))
-
   const index = 0
 
   const isSegwit = isSegwitDerivationMode(derivationMode)