Add accounts: handle cta wording and unselect all

src/components/MainSideBar.js

@@ -17,10 +17,13 @@ import type { UpdateStatus } from 'reducers/update'
 
 import { MODAL_RECEIVE, MODAL_SEND } from 'config/constants'
 
+import { rgba } from 'styles/helpers'
+
 import { accountsSelector } from 'reducers/accounts'
 import { openModal } from 'reducers/modals'
 import { getUpdateStatus } from 'reducers/update'
 
+import Tooltip from 'components/base/Tooltip'
 import { SideBarList } from 'components/base/SideBar'
 import Box, { Tabbable } from 'components/base/Box'
 import Space from 'components/base/Space'
@@ -140,9 +143,11 @@ class MainSideBar extends PureComponent<Props> {
           scroll
           title={t('sidebar:accounts')}
           titleRight={
+            <Tooltip render={() => t('importAccounts:title')}>
               <PlusWrapper onClick={() => openModal('importAccounts')}>
                 <IconCirclePlus size={16} />
               </PlusWrapper>
+            </Tooltip>
           }
           items={accountsItems}
           emptyText={t('emptyState:sidebar.text')}
@@ -157,15 +162,15 @@ const PlusWrapper = styled(Tabbable).attrs({
   cursor: 'pointer',
   borderRadius: 1,
 })`
-  opacity: 0.4;
+  color: ${p => p.theme.colors.smoke};
   &:hover {
-    opacity: 1;
+    color: ${p => p.theme.colors.dark};
   }
 
-  border: 1px dashed rgba(0, 0, 0, 0);
+  border: 1px solid transparent;
   &:focus {
-    border: 1px dashed rgba(0, 0, 0, 0.2);
     outline: none;
+    border-color: ${p => rgba(p.theme.colors.wallet, 0.3)};
   }
 `
 

src/components/modals/ImportAccounts/AccountRow.js

@@ -17,7 +17,7 @@ import IconCheck from 'icons/Check'
 type Props = {
   account: Account,
   isChecked: boolean,
-  isDisabled: boolean,
+  isDisabled?: boolean,
   onClick: Account => void,
   onAccountUpdate: Account => void,
 }
@@ -110,7 +110,7 @@ export default class AccountRow extends PureComponent<Props, State> {
           fontSize={4}
           color="grey"
         />
-        <Radio isChecked={isChecked || isDisabled} />
+        <Radio isChecked={isChecked || !!isDisabled} />
       </AccountRowContainer>
     )
   }

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

@@ -50,13 +50,15 @@ class StepImport extends PureComponent<StepProps> {
 
       this.scanSubscription = bridge.scanAccountsOnDevice(currency, devicePath, {
         next: account => {
-          const { scannedAccounts, checkedAccountsIds } = this.props
+          const { scannedAccounts, checkedAccountsIds, existingAccounts } = this.props
           const hasAlreadyBeenScanned = !!scannedAccounts.find(a => account.id === a.id)
+          const hasAlreadyBeenImported = !!existingAccounts.find(a => account.id === a.id)
+          const isNewAccount = account.operations.length === 0
           if (!hasAlreadyBeenScanned) {
             setState({
               scannedAccounts: [...scannedAccounts, account],
               checkedAccountsIds:
-                account.operations.length > 0
+                !hasAlreadyBeenImported && !isNewAccount
                   ? uniq([...checkedAccountsIds, account.id])
                   : checkedAccountsIds,
             })
@@ -111,15 +113,17 @@ class StepImport extends PureComponent<StepProps> {
     })
   }
 
-  handleToggleSelectAll = () => {
+  handleSelectAll = () => {
     const { scannedAccounts, setState } = this.props
     setState({
       checkedAccountsIds: scannedAccounts.filter(a => a.operations.length > 0).map(a => a.id),
     })
   }
 
+  handleUnselectAll = () => this.props.setState({ checkedAccountsIds: [] })
+
   render() {
-    const { scanStatus, err, scannedAccounts, checkedAccountsIds, existingAccounts } = this.props
+    const { scanStatus, err, scannedAccounts, checkedAccountsIds, existingAccounts, t } = this.props
 
     const importableAccounts = scannedAccounts.filter(acc => {
       if (acc.operations.length <= 0) {
@@ -135,11 +139,18 @@ class StepImport extends PureComponent<StepProps> {
       return existingAccounts.find(a => a.id === acc.id) === undefined
     })
 
+    const isAllSelected = scannedAccounts.filter(acc => acc.operations.length > 0).every(acc => {
+      const isChecked = !!checkedAccountsIds.find(id => acc.id === id)
+      const isImported = !!existingAccounts.find(a => acc.id === a.id)
+      return isChecked || isImported
+    })
+
     return (
       <Box>
         {err && <Box shrink>{err.message}</Box>}
 
         <Box flow={5}>
+          {(!!importableAccounts.length || scanStatus === 'scanning') && (
             <Box>
               {!!importableAccounts.length && (
                 <Box horizontal mb={3} align="center">
@@ -149,10 +160,18 @@ class StepImport extends PureComponent<StepProps> {
                     fontSize={2}
                     style={{ textTransform: 'uppercase' }}
                   >
-                  {`Account(s) to import (${importableAccounts.length})`}
+                    {t('importAccounts:accountToImportSubtitle', {
+                      count: importableAccounts.length,
+                    })}
                   </Box>
-                <FakeLink ml="auto" onClick={this.handleToggleSelectAll} fontSize={3}>
+                  <FakeLink
-                  {'Select all'}
+                    ml="auto"
+                    onClick={isAllSelected ? this.handleUnselectAll : this.handleSelectAll}
+                    fontSize={3}
+                  >
+                    {isAllSelected
+                      ? t('importAccounts:unselectAll')
+                      : t('importAccounts:selectAll')}
                   </FakeLink>
                 </Box>
               )}
@@ -181,6 +200,8 @@ class StepImport extends PureComponent<StepProps> {
                 )}
               </Box>
             </Box>
+          )}
+
           {creatableAccounts.length > 0 && (
             <Box>
               <Box horizontal mb={3} align="center">
@@ -190,7 +211,7 @@ class StepImport extends PureComponent<StepProps> {
                   fontSize={2}
                   style={{ textTransform: 'uppercase' }}
                 >
-                  {'Create account'}
+                  {t('importAccounts:createNewAccount')}
                 </Box>
               </Box>
               <AccountRow
@@ -210,7 +231,7 @@ class StepImport extends PureComponent<StepProps> {
             <Button small outline onClick={this.handleRetry}>
               <Box horizontal flow={2} align="center">
                 <IconExchange size={13} />
-                <span>{'retry sync'}</span>
+                <span>{t('importAccounts:retrySync')}</span>
               </Box>
             </Button>
           )}
@@ -233,12 +254,44 @@ export const LoadingRow = styled(Box).attrs({
   border: 1px dashed ${p => p.theme.colors.fog};
 `
 
-export const StepImportFooter = ({ scanStatus, onClickImport, checkedAccountsIds }: StepProps) => (
+export const StepImportFooter = ({
+  scanStatus,
+  onClickImport,
+  checkedAccountsIds,
+  scannedAccounts,
+  t,
+}: StepProps) => {
+  const willCreateAccount = checkedAccountsIds.some(id => {
+    const account = scannedAccounts.find(a => a.id === id)
+    return account && account.operations.length === 0
+  })
+
+  const willImportAccounts = checkedAccountsIds.some(id => {
+    const account = scannedAccounts.find(a => a.id === id)
+    return account && account.operations.length > 0
+  })
+
+  const importedAccountsCount = checkedAccountsIds.filter(id => {
+    const account = scannedAccounts.find(acc => acc.id === id)
+    return account && account.operations.length > 0
+  }).length
+
+  const ctaWording =
+    willCreateAccount && willImportAccounts
+      ? `${t('importAccounts:cta.create')} / ${t('importAccounts:cta.import', {
+          count: importedAccountsCount,
+        })}`
+      : willCreateAccount
+        ? t('importAccounts:cta.create')
+        : t('importAccounts:cta.import', { count: importedAccountsCount })
+
+  return (
     <Button
       primary
       disabled={scanStatus !== 'finished' || checkedAccountsIds.length === 0}
       onClick={() => onClickImport()}
     >
-    {'Import accounts'}
+      {ctaWording}
     </Button>
-)
+  )
+}

static/i18n/en/importAccounts.yml

@@ -4,3 +4,13 @@ breadcrumb:
   connectDevice: Connect device
   import: Import
   finish: End
+accountToImportSubtitle: Account to import
+accountToImportSubtitle_plural: 'Accounts to import ({{count}})'
+selectAll: Select all
+unselectAll: Unselect all
+createNewAccount: Create new account
+retrySync: Retry sync
+cta:
+  create: 'Create account'
+  import: 'Import account'
+  import_plural: 'Import accounts'