Display existing accounts (disabled)

src/components/modals/ImportAccounts/AccountRow.js

@@ -16,6 +16,7 @@ import IconCheck from 'icons/Check'
 type Props = {
   account: Account,
   isChecked: boolean,
+  isDisabled: boolean,
   onClick: Account => void,
   onAccountUpdate: Account => void,
 }
@@ -69,11 +70,11 @@ export default class AccountRow extends PureComponent<Props, State> {
   _input = null
 
   render() {
-    const { account, isChecked, onClick } = this.props
+    const { account, isChecked, onClick, isDisabled } = this.props
     const { isEditing, accountNameCopy } = this.state
 
     return (
-      <AccountRowContainer onClick={() => onClick(account)}>
+      <AccountRowContainer onClick={() => onClick(account)} isDisabled={isDisabled}>
         <CryptoCurrencyIcon currency={account.currency} size={16} color={account.currency.color} />
         <Box shrink grow ff="Open Sans|SemiBold" color="dark" fontSize={4}>
           {isEditing ? (
@@ -108,7 +109,7 @@ export default class AccountRow extends PureComponent<Props, State> {
           fontSize={4}
           color="grey"
         />
-        <Radio isChecked={isChecked} />
+        <Radio isChecked={isChecked || isDisabled} />
       </AccountRowContainer>
     )
   }
@@ -123,9 +124,12 @@ const AccountRowContainer = styled(Box).attrs({
 })`
   height: 48px;
   border-radius: 4px;
-  cursor: pointer;
+
+  opacity: ${p => (p.isDisabled ? 0.5 : 1)};
+  pointer-events: ${p => (p.isDisabled ? 'none' : 'auto')};
 
   &:hover {
+    cursor: pointer;
     background-color: ${p => darken(p.theme.colors.lightGrey, 0.015)};
   }
 

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

@@ -102,7 +102,7 @@ class StepImport extends PureComponent<StepProps> {
   }
 
   render() {
-    const { scanStatus, err, scannedAccounts, checkedAccountsIds } = this.props
+    const { scanStatus, err, scannedAccounts, checkedAccountsIds, existingAccounts } = this.props
 
     return (
       <Box>
@@ -111,11 +111,14 @@ class StepImport extends PureComponent<StepProps> {
         <Box flow={2}>
           {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 (
               <AccountRow
                 key={account.id}
-                account={account}
+                account={existingAccount || account}
                 isChecked={isChecked}
+                isDisabled={isDisabled}
                 onClick={this.handleToggleAccount}
                 onAccountUpdate={this.handleAccountUpdate}
               />
@@ -153,4 +156,8 @@ class StepImport extends PureComponent<StepProps> {
 
 export default StepImport
 
-export const StepImportFooter = (props: StepProps) => <div>noetuhnoethunot</div>
+export const StepImportFooter = ({ scanStatus, transitionTo, t }: StepProps) => (
+  <Button primary disabled={scanStatus !== 'finished'} onClick={() => transitionTo('finish')}>
+    {t('common:next')}
+  </Button>
+)