Adds error handler in Importer // Import AddressBook #2885

js/src/views/Accounts/Summary/summary.js

@@ -22,22 +22,28 @@ import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags, I
 export default class Summary extends Component {
   static contextTypes = {
     api: React.PropTypes.object
-  }
+  };
 
   static propTypes = {
     account: PropTypes.object.isRequired,
-    balance: PropTypes.object.isRequired,
+    balance: PropTypes.object,
     link: PropTypes.string,
+    name: PropTypes.string,
+    noLink: PropTypes.bool,
     children: PropTypes.node,
     handleAddSearchToken: PropTypes.func
-  }
+  };
+
+  static defaultProps = {
+    noLink: false
+  };
 
   state = {
     name: 'Unnamed'
-  }
+  };
 
   render () {
-    const { account, balance, children, link, handleAddSearchToken } = this.props;
+    const { account, children, handleAddSearchToken } = this.props;
     const { tags } = account.meta;
 
     if (!account) {
@@ -45,7 +51,6 @@ export default class Summary extends Component {
     }
 
     const { address } = account;
-    const viewLink = `/${link || 'account'}/${address}`;
 
     const addressComponent = (
       <Input
@@ -62,12 +67,45 @@ export default class Summary extends Component {
         <IdentityIcon
           address={ address } />
         <ContainerTitle
-          title={ <Link to={ viewLink }>{ <IdentityName address={ address } unknown /> }</Link> }
+          title={ this.renderLink() }
           byline={ addressComponent } />
-        <Balance
-          balance={ balance } />
+
+        { this.renderBalance() }
         { children }
       </Container>
     );
   }
+
+  renderLink () {
+    const { link, noLink, account, name } = this.props;
+
+    const { address } = account;
+    const viewLink = `/${link || 'account'}/${address}`;
+
+    const content = (
+      <IdentityName address={ address } name={ name } unknown />
+    );
+
+    if (noLink) {
+      return content;
+    }
+
+    return (
+      <Link to={ viewLink }>
+        { content }
+      </Link>
+    );
+  }
+
+  renderBalance () {
+    const { balance } = this.props;
+
+    if (!balance) {
+      return null;
+    }
+
+    return (
+      <Balance balance={ balance } />
+    );
+  }
 }

js/src/views/Addresses/addresses.js

@@ -21,8 +21,9 @@ import ContentAdd from 'material-ui/svg-icons/content/add';
 import { uniq } from 'lodash';
 
 import List from '../Accounts/List';
+import Summary from '../Accounts/Summary';
 import { AddAddress } from '../../modals';
-import { Actionbar, ActionbarExport, ActionbarSearch, ActionbarSort, Button, Page } from '../../ui';
+import { Actionbar, ActionbarExport, ActionbarImport, ActionbarSearch, ActionbarSort, Button, Page } from '../../ui';
 
 import styles from './addresses.css';
 
@@ -107,6 +108,12 @@ class Addresses extends Component {
         content={ contacts }
         filename='addressbook.json' />,
 
+      <ActionbarImport
+        key='importAddressbook'
+        onConfirm={ this.onImport }
+        renderValidation={ this.renderValidation }
+      />,
+
       this.renderSearchButton(),
       this.renderSortButton()
     ];
@@ -134,6 +141,61 @@ class Addresses extends Component {
     );
   }
 
+  renderValidation = (content) => {
+    let addresses;
+
+    try {
+      addresses = JSON.parse(content);
+    } catch (e) {
+      return {
+        error: 'The provided file is invalid...'
+      };
+    }
+
+    const body = Object.values(addresses).map((address, index) => (
+      <Summary
+        key={ index }
+        account={ address }
+        name={ address.name }
+        noLink
+      />
+    ));
+
+    return (
+      <div>
+        { body }
+      </div>
+    );
+  }
+
+  onImport = (content) => {
+    try {
+      const addresses = JSON.parse(content);
+
+      Object.values(addresses).forEach((account) => {
+        this.onAddAccount(account);
+      });
+    } catch (e) {
+      console.error('onImport', content, e);
+    }
+  }
+
+  onAddAccount = (account) => {
+    const { api } = this.context;
+    const { address, name, meta } = account;
+
+    Promise.all([
+      api.parity.setAccountName(address, name),
+      api.parity.setAccountMeta(address, {
+        ...meta,
+        timestamp: Date.now(),
+        deleted: false
+      })
+    ]).catch((error) => {
+      console.error('onAddAccount', error);
+    });
+  }
+
   onAddSearchToken = (token) => {
     const { searchTokens } = this.state;
     const newSearchTokens = uniq([].concat(searchTokens, token));