Import AddresBook from exported JSON (#3433)

* Adds error handler in Importer // Import AddressBook #2885

* More robust import #2885

js/src/ui/Actionbar/Import/import.js

@@ -29,6 +29,8 @@ const initialState = {
   show: false,
   validate: false,
   validationBody: null,
+  error: false,
+  errorText: '',
   content: ''
 };
 
@@ -65,7 +67,7 @@ export default class ActionbarImport extends Component {
 
   renderModal () {
     const { title, renderValidation } = this.props;
-    const { show, step } = this.state;
+    const { show, step, error } = this.state;
 
     if (!show) {
       return null;
@@ -73,7 +75,7 @@ export default class ActionbarImport extends Component {
 
     const hasSteps = typeof renderValidation === 'function';
 
-    const steps = hasSteps ? [ 'select a file', 'validate' ] : null;
+    const steps = hasSteps ? [ 'select a file', error ? 'error' : 'validate' ] : null;
 
     return (
       <Modal
@@ -89,7 +91,7 @@ export default class ActionbarImport extends Component {
   }
 
   renderActions () {
-    const { validate } = this.state;
+    const { validate, error } = this.state;
 
     const cancelBtn = (
       <Button
@@ -100,6 +102,10 @@ export default class ActionbarImport extends Component {
       />
     );
 
+    if (error) {
+      return [ cancelBtn ];
+    }
+
     if (validate) {
       const confirmBtn = (
         <Button
@@ -117,7 +123,15 @@ export default class ActionbarImport extends Component {
   }
 
   renderBody () {
-    const { validate } = this.state;
+    const { validate, errorText, error } = this.state;
+
+    if (error) {
+      return (
+        <div>
+          <p>An error occured: { errorText }</p>
+        </div>
+      );
+    }
 
     if (validate) {
       return this.renderValidation();
@@ -169,10 +183,20 @@ export default class ActionbarImport extends Component {
         return this.onCloseModal();
       }
 
+      const validationBody = renderValidation(content);
+
+      if (validationBody && validationBody.error) {
+        return this.setState({
+          step: 1,
+          error: true,
+          errorText: validationBody.error
+        });
+      }
+
       this.setState({
         step: 1,
         validate: true,
-        validationBody: renderValidation(content),
+        validationBody,
         content
       });
     };

js/src/ui/IdentityName/identityName.js

@@ -28,11 +28,12 @@ class IdentityName extends Component {
     tokens: PropTypes.object,
     empty: PropTypes.bool,
     shorten: PropTypes.bool,
-    unknown: PropTypes.bool
+    unknown: PropTypes.bool,
+    name: PropTypes.string
   }
 
   render () {
-    const { address, accountsInfo, tokens, empty, shorten, unknown, className } = this.props;
+    const { address, accountsInfo, tokens, empty, name, shorten, unknown, className } = this.props;
     const account = accountsInfo[address] || tokens[address];
     const hasAccount = account && (!account.meta || !account.meta.deleted);
 
@@ -43,13 +44,14 @@ class IdentityName extends Component {
     const addressFallback = shorten ? this.formatHash(address) : address;
     const fallback = unknown ? defaultName : addressFallback;
     const isUuid = hasAccount && account.name === account.uuid;
-    const name = hasAccount && !isUuid
+    const displayName = (name && name.toUpperCase().trim()) ||
+      (hasAccount && !isUuid
       ? account.name.toUpperCase().trim()
-      : fallback;
+      : fallback);
 
     return (
       <span className={ className }>
-        { name && name.length ? name : fallback }
+        { displayName && displayName.length ? displayName : fallback }
       </span>
     );
   }