Finalize the import, add accounts to reducer, finish step

src/components/modals/ImportAccounts/index.js

@@ -11,6 +11,8 @@ import type { T, Device } from 'types/common'
 
 import { getCurrentDevice } from 'reducers/devices'
 import { getAccounts } from 'reducers/accounts'
+import { addAccount } from 'actions/accounts'
+import { closeModal } from 'reducers/modals'
 
 import Modal, { ModalContent, ModalTitle, ModalFooter, ModalBody } from 'components/base/Modal'
 import Box from 'components/base/Box'
@@ -50,9 +52,9 @@ const createSteps = ({ t }: { t: T }) => [
     id: 'finish',
     label: t('importAccounts:breadcrumb.finish'),
     component: StepFinish,
-    footer: StepChooseCurrencyFooter,
+    footer: null,
     onBack: null,
-    hideFooter: false,
+    hideFooter: true,
   },
 ]
 
@@ -85,6 +87,8 @@ export type StepProps = {
   isAppOpened: boolean,
   transitionTo: StepId => void,
   setState: any => void,
+  onClickImport: void => void,
+  onCloseModal: void => void,
 
   // scan process
   scannedAccounts: Account[],
@@ -99,6 +103,11 @@ const mapStateToProps = state => ({
   existingAccounts: getAccounts(state),
 })
 
+const mapDispatchToProps = {
+  addAccount,
+  closeModal,
+}
+
 const INITIAL_STATE = {
   stepId: 'chooseCurrency',
   isAppOpened: false,
@@ -121,6 +130,26 @@ class ImportAccounts extends PureComponent<Props, State> {
     this.setState(nextState)
   }
 
+  handleClickImport = async () => {
+    const { addAccount } = this.props
+    const { scannedAccounts, checkedAccountsIds } = this.state
+    const accountsIdsMap = checkedAccountsIds.reduce((acc, cur) => {
+      acc[cur] = true
+      return acc
+    }, {})
+    const accountsToImport = scannedAccounts.filter(account => accountsIdsMap[account.id] === true)
+    for (let i = 0; i < accountsToImport.length; i++) {
+      await idleCallback()
+      addAccount(accountsToImport[i])
+    }
+    this.transitionTo('finish')
+  }
+
+  handleCloseModal = () => {
+    const { closeModal } = this.props
+    closeModal('importAccounts')
+  }
+
   render() {
     const { t, currentDevice, existingAccounts } = this.props
     const {
@@ -152,6 +181,8 @@ class ImportAccounts extends PureComponent<Props, State> {
       scanStatus,
       err,
       isAppOpened,
+      onClickImport: this.handleClickImport,
+      onCloseModal: this.handleCloseModal,
       transitionTo: this.transitionTo,
       setState: (...args) => this.setState(...args),
     }
@@ -182,4 +213,8 @@ class ImportAccounts extends PureComponent<Props, State> {
   }
 }
 
-export default compose(connect(mapStateToProps), translate())(ImportAccounts)
+export default compose(connect(mapStateToProps, mapDispatchToProps), translate())(ImportAccounts)
+
+function idleCallback() {
+  return new Promise(resolve => window.requestIdleCallback(resolve))
+}

src/components/modals/ImportAccounts/steps/03-step-import.js

@@ -141,7 +141,7 @@ class StepImport extends PureComponent<StepProps> {
 
         <Box horizontal mt={2}>
           {['error', 'finished'].includes(scanStatus) && (
-            <Button small outline onClick={this.handleRetry}>
+            <Button ml="auto" small outline onClick={this.handleRetry}>
               <Box horizontal flow={2} align="center">
                 <IconExchange size={13} />
                 <span>{'retry'}</span>
@@ -156,8 +156,12 @@ class StepImport extends PureComponent<StepProps> {
 
 export default StepImport
 
-export const StepImportFooter = ({ scanStatus, transitionTo, t }: StepProps) => (
-  <Button primary disabled={scanStatus !== 'finished'} onClick={() => transitionTo('finish')}>
-    {t('common:next')}
+export const StepImportFooter = ({ scanStatus, onClickImport, checkedAccountsIds }: StepProps) => (
+  <Button
+    primary
+    disabled={scanStatus !== 'finished' || checkedAccountsIds.length === 0}
+    onClick={() => onClickImport()}
+  >
+    {'Import accounts'}
   </Button>
 )

src/components/modals/ImportAccounts/steps/04-step-finish.js

@@ -3,9 +3,21 @@
 import React from 'react'
 
 import Box from 'components/base/Box'
+import Button from 'components/base/Button'
+import IconCheckCircle from 'icons/CheckCircle'
 
-function StepFinish() {
-  return <Box>{'StepFinish'}</Box>
+function StepFinish({ onCloseModal }: StepProps) {
+  return (
+    <Box align="center" py={6}>
+      <Box color="positiveGreen" mb={4}>
+        <IconCheckCircle size={40} />
+      </Box>
+      <Box mb={4}>{'Great success!'}</Box>
+      <Button primary onClick={onCloseModal}>
+        {'Close'}
+      </Button>
+    </Box>
+  )
 }
 
 export default StepFinish

src/helpers/libcore.js

@@ -136,7 +136,8 @@ async function scanNextAccount(props: {
     ? await wallet.getAccount(accountIndex)
     : await core.createAccount(wallet, hwApp)
 
-  if (!hasBeenScanned) {
+  const shouldSyncAccount = true // TODO: let's sync everytime. maybe in the future we can optimize.
+  if (shouldSyncAccount) {
     await core.syncAccount(njsAccount)
   }
 
@@ -214,16 +215,6 @@ async function buildAccountRaw({
   // $FlowFixMe
   ops: NJSOperation[],
 }): Promise<AccountRaw> {
-  /*
-  const balanceByDay = ops.length
-    ? await getBalanceByDaySinceOperation({
-        njsAccount,
-        njsOperation: ops[0],
-        core,
-      })
-    : {}
-    */
-
   const njsBalance = await njsAccount.getBalance()
   const balance = njsBalance.toLong()
 
@@ -269,7 +260,7 @@ async function buildAccountRaw({
     freshAddressPath,
     balance,
     blockHeight,
-    archived: true,
+    archived: false,
     index: accountIndex,
     operations,
     pendingOperations: [],
@@ -318,48 +309,3 @@ function buildOperationRaw({
     date: op.getDate().toISOString(),
   }
 }
-
-/*
-async function getBalanceByDaySinceOperation({
-  njsAccount,
-  njsOperation,
-  core,
-}: {
-  njsAccount: NJSAccount,
-  njsOperation: NJSOperation,
-  core: Object,
-}) {
-  const startDate = njsOperation.getDate()
-  // set end date to tomorrow
-  const endDate = new Date()
-  endDate.setDate(endDate.getDate() + 1)
-  const njsBalanceHistory = await njsAccount.getBalanceHistory(
-    startDate.toISOString(),
-    endDate.toISOString(),
-    core.TIME_PERIODS.DAY,
-  )
-  let i = 0
-  const res = {}
-  while (!areSameDay(startDate, endDate)) {
-    const dateSQLFormatted = startDate.toISOString().substr(0, 10)
-    const balanceDay = njsBalanceHistory[i]
-    if (balanceDay) {
-      res[dateSQLFormatted] = njsBalanceHistory[i].toLong()
-    } else {
-      console.warn(`No balance for day ${dateSQLFormatted}. This is a bug.`) // eslint-disable-line no-console
-    }
-    startDate.setDate(startDate.getDate() + 1)
-    i++
-  }
-
-  return res
-}
-
-function areSameDay(date1: Date, date2: Date): boolean {
-  return (
-    date1.getFullYear() === date2.getFullYear() &&
-    date1.getMonth() === date2.getMonth() &&
-    date1.getDate() === date2.getDate()
-  )
-}
-*/

static/i18n/en/importAccounts.yml

@@ -3,4 +3,4 @@ breadcrumb:
   informations: Informations
   connectDevice: Connect device
   import: Import
-  finish: Confirm
+  finish: End