Merge pull request #327 from paritytech/luke-138-prevent-import-when-…

…account-already-loaded

fix: Relates to #138. Prevents user from importing account that is already in account list

packages/fether-react/src/Accounts/CreateAccount/AccountImportOptions/AccountImportOptions.js

@@ -4,9 +4,14 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React, { Component } from 'react';
-import { Card, Form as FetherForm } from 'fether-ui';
+import { addressShort, Card, Form as FetherForm } from 'fether-ui';
+import { accounts$, withoutLoading } from '@parity/light.js';
+import light from '@parity/light.js-react';
 import { inject, observer } from 'mobx-react';
 
+@light({
+  accounts: () => accounts$().pipe(withoutLoading())
+})
 @inject('createAccountStore')
 @observer
 class AccountImportOptions extends Component {
@@ -32,30 +37,45 @@ class AccountImportOptions extends Component {
   handleSubmitPhrase = async () => {
     const phrase = this.state.phrase.trim();
     const {
+      createAccountStore,
       createAccountStore: { setPhrase }
     } = this.props;
 
     this.setState({ isLoading: true, phrase });
+
     try {
       await setPhrase(phrase);
+
+      if (this.hasExistingAddressForImport(createAccountStore.address)) {
+        return;
+      }
+
       this.handleNextStep();
-    } catch (e) {
+    } catch (error) {
       this.setState({
         isLoading: false,
         error:
           'The passphrase was not recognized. Please verify that you entered your passphrase correctly.'
       });
+      console.error(error);
     }
   };
 
   handleChangeFile = async jsonString => {
     const {
+      createAccountStore,
       createAccountStore: { setJsonString }
     } = this.props;
 
     this.setState({ isLoading: true });
+
     try {
       await setJsonString(jsonString);
+
+      if (this.hasExistingAddressForImport(createAccountStore.address)) {
+        return;
+      }
+
       this.handleNextStep();
     } catch (error) {
       this.setState({
@@ -67,6 +87,22 @@ class AccountImportOptions extends Component {
     }
   };
 
+  hasExistingAddressForImport = addressForImport => {
+    const { accounts } = this.props;
+    const isExistingAddress = accounts
+      .map(address => address && address.toLowerCase())
+      .includes(addressForImport.toLowerCase());
+
+    if (isExistingAddress) {
+      this.setState({
+        isLoading: false,
+        error: `Account ${addressShort(addressForImport)} already listed`
+      });
+    }
+
+    return isExistingAddress;
+  };
+
   render () {
     const {
       history,

packages/fether-ui/src/AddressShort/AddressShort.js

@@ -6,12 +6,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { addressShort } from '../utils/addressShort';
+
 export const AddressShort = ({ address, as: T = 'span', ...otherProps }) => (
-  <T {...otherProps}>
-    {address.slice(0, 6)}
-    ..
-    {address.slice(-4)}
-  </T>
+  <T {...otherProps}>{addressShort(address)}</T>
 );
 
 AddressShort.propTypes = {

packages/fether-ui/src/index.js

@@ -11,3 +11,4 @@ export * from './Form';
 export * from './Header';
 export * from './Placeholder';
 export * from './TokenCard';
+export * from './utils';

packages/fether-ui/src/utils/addressShort.js

@@ -0,0 +1,7 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+export const addressShort = address =>
+  address ? `${address.slice(0, 6)}..${address.slice(-4)}` : '';

packages/fether-ui/src/utils/index.js

@@ -0,0 +1,6 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+export * from './addressShort';