Merge branch 'master' into jg-external-dapps

js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "0.2.38",
+  "version": "0.2.42",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",

js/src/dapps/basiccoin/AddressSelect/addressSelect.css

@@ -21,3 +21,7 @@
 .iconMenu option {
   padding-left: 30px;
 }
+
+.menu {
+  display: none;
+}

js/src/dapps/tokenreg/Actions/Register/register.js

@@ -21,7 +21,7 @@ import { Dialog, FlatButton } from 'material-ui';
 import AccountSelector from '../../Accounts/AccountSelector';
 import InputText from '../../Inputs/Text';
 
-import { TOKEN_ADDRESS_TYPE, TLA_TYPE, UINT_TYPE, STRING_TYPE } from '../../Inputs/validation';
+import { TOKEN_ADDRESS_TYPE, TLA_TYPE, DECIMAL_TYPE, STRING_TYPE } from '../../Inputs/validation';
 
 import styles from '../actions.css';
 
@@ -41,11 +41,11 @@ const initState = {
       floatingLabelText: 'Token TLA',
       hintText: 'The token short name (3 characters)'
     },
-    base: {
+    decimals: {
       ...defaultField,
-      type: UINT_TYPE,
-      floatingLabelText: 'Token Base',
-      hintText: 'The token precision'
+      type: DECIMAL_TYPE,
+      floatingLabelText: 'Token Decimals',
+      hintText: 'The number of decimals (0-18)'
     },
     name: {
       ...defaultField,

js/src/dapps/tokenreg/Actions/actions.js

@@ -47,7 +47,8 @@ export const registerToken = (tokenData) => (dispatch, getState) => {
   const contractInstance = state.status.contract.instance;
   const fee = state.status.contract.fee;
 
-  const { address, base, name, tla } = tokenData;
+  const { address, decimals, name, tla } = tokenData;
+  const base = Math.pow(10, decimals);
 
   dispatch(setRegisterSending(true));
 

js/src/dapps/tokenreg/Inputs/validation.js

@@ -32,6 +32,7 @@ export const SIMPLE_TOKEN_ADDRESS_TYPE = 'SIMPLE_TOKEN_ADDRESS_TYPE';
 export const TLA_TYPE = 'TLA_TYPE';
 export const SIMPLE_TLA_TYPE = 'SIMPLE_TLA_TYPE';
 export const UINT_TYPE = 'UINT_TYPE';
+export const DECIMAL_TYPE = 'DECIMAL_TYPE';
 export const STRING_TYPE = 'STRING_TYPE';
 export const HEX_TYPE = 'HEX_TYPE';
 export const URL_TYPE = 'URL_TYPE';
@@ -39,6 +40,7 @@ export const URL_TYPE = 'URL_TYPE';
 export const ERRORS = {
   invalidTLA: 'The TLA should be 3 characters long',
   invalidUint: 'Please enter a non-negative integer',
+  invalidDecimal: 'Please enter a value between 0 and 18',
   invalidString: 'Please enter at least a character',
   invalidAccount: 'Please select an account to transact with',
   invalidRecipient: 'Please select an account to send to',
@@ -152,6 +154,21 @@ const validateUint = (uint) => {
   };
 };
 
+const validateDecimal = (decimal) => {
+  if (!/^\d+$/.test(decimal) || parseInt(decimal) < 0 || parseInt(decimal) > 18) {
+    return {
+      error: ERRORS.invalidDecimal,
+      valid: false
+    };
+  }
+
+  return {
+    value: parseInt(decimal),
+    error: null,
+    valid: true
+  };
+};
+
 const validateString = (string) => {
   if (string.toString().length === 0) {
     return {
@@ -204,6 +221,7 @@ export const validate = (value, type, contract) => {
   if (type === TLA_TYPE) return validateTLA(value, contract);
   if (type === SIMPLE_TLA_TYPE) return validateTLA(value, contract, true);
   if (type === UINT_TYPE) return validateUint(value);
+  if (type === DECIMAL_TYPE) return validateDecimal(value);
   if (type === STRING_TYPE) return validateString(value);
   if (type === HEX_TYPE) return validateHex(value);
   if (type === URL_TYPE) return validateURL(value);

js/src/dapps/tokenreg/Tokens/Token/token.js

@@ -152,8 +152,8 @@ export default class Token extends Component {
     if (!base || base < 0) return null;
     return (
       <Chip
-        value={ base.toString() }
-        label='Base' />
+        value={ Math.log10(base).toString() }
+        label='Decimals' />
     );
   }
 

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/CopyToClipboard/copyToClipboard.css

@@ -0,0 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.wrapper {
+  display: inline-block;
+}
+
+.data {
+  font-family: monospace;
+}

js/src/ui/CopyToClipboard/copyToClipboard.js

@@ -16,15 +16,18 @@
 
 import React, { Component, PropTypes } from 'react';
 import { IconButton } from 'material-ui';
+import Snackbar from 'material-ui/Snackbar';
 import Clipboard from 'react-copy-to-clipboard';
 import CopyIcon from 'material-ui/svg-icons/content/content-copy';
 import Theme from '../Theme';
+import { darkBlack } from 'material-ui/styles/colors';
 const { textColor, disabledTextColor } = Theme.flatButton;
 
+import styles from './copyToClipboard.css';
+
 export default class CopyToClipboard extends Component {
   static propTypes = {
     data: PropTypes.string.isRequired,
-    label: PropTypes.string,
     onCopy: PropTypes.func,
     size: PropTypes.number, // in px
     cooldown: PropTypes.number // in ms
@@ -32,32 +35,46 @@ export default class CopyToClipboard extends Component {
 
   static defaultProps = {
     className: '',
-    label: 'copy to clipboard',
     onCopy: () => {},
     size: 16,
     cooldown: 1000
   };
 
   state = {
-    copied: false
+    copied: false,
+    timeout: null
   };
 
+  componentWillUnmount () {
+    const { timeoutId } = this.state;
+    if (timeoutId) {
+      window.clearTimeout(timeoutId);
+    }
+  }
+
   render () {
-    const { data, label, size } = this.props;
+    const { data, size } = this.props;
     const { copied } = this.state;
 
     return (
       <Clipboard onCopy={ this.onCopy } text={ data }>
-        <IconButton
-          tooltip={ copied ? 'done!' : label }
-          disableTouchRipple
-          tooltipPosition={ 'top-right' }
-          tooltipStyles={ { marginTop: `-${size / 4}px` } }
-          style={ { width: size, height: size, padding: '0' } }
-          iconStyle={ { width: size, height: size } }
-        >
-          <CopyIcon color={ copied ? disabledTextColor : textColor } />
-        </IconButton>
+        <div className={ styles.wrapper }>
+          <Snackbar
+            open={ copied }
+            message={
+              <div>copied <code className={ styles.data }>{ data }</code> to clipboard</div>
+            }
+            autoHideDuration={ 2000 }
+            bodyStyle={ { backgroundColor: darkBlack } }
+          />
+          <IconButton
+            disableTouchRipple
+            style={ { width: size, height: size, padding: '0' } }
+            iconStyle={ { width: size, height: size } }
+          >
+            <CopyIcon color={ copied ? disabledTextColor : textColor } />
+          </IconButton>
+        </div>
       </Clipboard>
     );
   }
@@ -65,11 +82,12 @@ export default class CopyToClipboard extends Component {
   onCopy = () => {
     const { cooldown, onCopy } = this.props;
 
-    this.setState({ copied: true });
-    setTimeout(() => {
-      this.setState({ copied: false });
-    }, cooldown);
-
+    this.setState({
+      copied: true,
+      timeout: setTimeout(() => {
+        this.setState({ copied: false, timeout: null });
+      }, cooldown)
+    });
     onCopy();
   }
 }

js/src/ui/Form/AutoComplete/autocomplete.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import keycode from 'keycode';
 import { MenuItem, AutoComplete as MUIAutoComplete } from 'material-ui';
 import { PopoverAnimationVertical } from 'material-ui/Popover';
 
@@ -40,7 +41,8 @@ export default class AutoComplete extends Component {
   state = {
     lastChangedValue: undefined,
     entry: null,
-    open: false
+    open: false,
+    fakeBlur: false
   }
 
   render () {
@@ -67,6 +69,9 @@ export default class AutoComplete extends Component {
         fullWidth
         floatingLabelFixed
         dataSource={ this.getDataSource() }
+        menuProps={ { maxHeight: 400 } }
+        ref='muiAutocomplete'
+        onKeyDown={ this.onKeyDown }
       />
     );
   }
@@ -91,6 +96,30 @@ export default class AutoComplete extends Component {
     }));
   }
 
+  onKeyDown = (event) => {
+    const { muiAutocomplete } = this.refs;
+
+    switch (keycode(event)) {
+      case 'down':
+        const { menu } = muiAutocomplete.refs;
+        menu.handleKeyDown(event);
+        this.setState({ fakeBlur: true });
+        break;
+
+      case 'enter':
+      case 'tab':
+        event.preventDefault();
+        event.stopPropagation();
+        event.which = 'useless';
+
+        const e = new CustomEvent('down');
+        e.which = 40;
+
+        muiAutocomplete.handleKeyDown(e);
+        break;
+    }
+  }
+
   onChange = (item, idx) => {
     if (idx === -1) {
       return;
@@ -108,17 +137,22 @@ export default class AutoComplete extends Component {
     this.setState({ entry, open: false });
   }
 
-  onBlur = () => {
+  onBlur = (event) => {
     const { onUpdateInput } = this.props;
 
-    // TODO: Handle blur gracefully where we use onUpdateInput (currently replaces input
+    // TODO: Handle blur gracefully where we use onUpdateInput (currently replaces
     // input where text is allowed with the last selected value from the dropdown)
     if (!onUpdateInput) {
       window.setTimeout(() => {
-        const { entry } = this.state;
+        const { entry, fakeBlur } = this.state;
+
+        if (fakeBlur) {
+          this.setState({ fakeBlur: false });
+          return;
+        }
 
         this.handleOnChange(entry);
-      }, 100);
+      }, 200);
     }
   }
 

js/src/ui/Form/Input/input.css

@@ -24,8 +24,4 @@
 
 .copy {
   margin-right: 0.5em;
-
-  svg {
-    transition: all .5s ease-in-out;
-  }
 }

js/src/ui/Form/Input/input.js

@@ -15,11 +15,9 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { TextField } from 'material-ui';
 
-import CopyToClipboard from 'react-copy-to-clipboard';
-import CopyIcon from 'material-ui/svg-icons/content/content-copy';
-import { TextField, IconButton } from 'material-ui';
-import { lightWhite, fullWhite } from 'material-ui/styles/colors';
+import CopyToClipboard from '../../CopyToClipboard';
 
 import styles from './input.css';
 
@@ -77,9 +75,7 @@ export default class Input extends Component {
   }
 
   state = {
-    value: this.props.value || '',
-    timeoutId: null,
-    copied: false
+    value: this.props.value || ''
   }
 
   componentWillReceiveProps (newProps) {
@@ -88,14 +84,6 @@ export default class Input extends Component {
     }
   }
 
-  componentWillUnmount () {
-    const { timeoutId } = this.state;
-
-    if (timeoutId) {
-      window.clearTimeout(timeoutId);
-    }
-  }
-
   render () {
     const { value } = this.state;
     const { children, className, hideUnderline, disabled, error, label, hint, multiLine, rows, type } = this.props;
@@ -151,7 +139,7 @@ export default class Input extends Component {
 
   renderCopyButton () {
     const { allowCopy, hideUnderline, label, hint, floatCopy } = this.props;
-    const { copied, value } = this.state;
+    const { value } = this.state;
 
     if (!allowCopy) {
       return null;
@@ -165,8 +153,6 @@ export default class Input extends Component {
       ? allowCopy
       : value;
 
-    const scale = copied ? 'scale(1.15)' : 'scale(1)';
-
     if (hideUnderline && !label) {
       style.marginBottom = 2;
     } else if (label && !hint) {
@@ -184,49 +170,11 @@ export default class Input extends Component {
 
     return (
       <div className={ styles.copy } style={ style }>
-        <CopyToClipboard
-          onCopy={ this.handleCopy }
-          text={ text } >
-          <IconButton
-            tooltip={ `${copied ? 'Copied' : 'Copy'} to clipboard` }
-            tooltipPosition='bottom-right'
-            style={ {
-              width: 16,
-              height: 16,
-              padding: 0
-            } }
-            iconStyle={ {
-              width: 16,
-              height: 16,
-              transform: scale
-            } }
-            tooltipStyles={ {
-              top: 16
-            } }
-          >
-            <CopyIcon
-              color={ copied ? lightWhite : fullWhite }
-            />
-          </IconButton>
-        </CopyToClipboard>
+        <CopyToClipboard data={ text } />
       </div>
     );
   }
 
-  handleCopy = () => {
-    if (this.state.timeoutId) {
-      window.clearTimeout(this.state.timeoutId);
-    }
-
-    this.setState({ copied: true }, () => {
-      const timeoutId = window.setTimeout(() => {
-        this.setState({ copied: false });
-      }, 500);
-
-      this.setState({ timeoutId });
-    });
-  }
-
   onChange = (event, value) => {
     this.setValue(value);
 

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>
     );
   }

js/src/views/Account/Header/header.css

@@ -43,6 +43,6 @@
 }
 
 .address {
-  white-space: nowrap;
-  font-family: monospace;
+  display: inline-block;
+  margin-left: .5em;
 }

js/src/views/Account/Header/header.js

@@ -15,13 +15,9 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import IconButton from 'material-ui/IconButton';
-import Snackbar from 'material-ui/Snackbar';
-import CopyIcon from 'material-ui/svg-icons/content/content-copy';
-import { lightWhite, fullWhite, darkBlack } from 'material-ui/styles/colors';
 
 import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags } from '../../../ui';
+import CopyToClipboard from '../../../ui/CopyToClipboard';
 
 import styles from './header.css';
 
@@ -37,8 +33,7 @@ export default class Header extends Component {
   }
 
   state = {
-    name: null,
-    addressCopied: false
+    name: null
   }
 
   componentWillMount () {
@@ -51,7 +46,6 @@ export default class Header extends Component {
 
   render () {
     const { account, balance } = this.props;
-    const { addressCopied } = this.state;
     const { address, meta, uuid } = account;
 
     if (!account) {
@@ -64,50 +58,14 @@ export default class Header extends Component {
 
     return (
       <div>
-
-        <Snackbar
-          open={ addressCopied }
-          message={
-            <span>
-              Address
-              <span className={ styles.address }> { address } </span>
-              copied to clipboard
-            </span>
-          }
-          autoHideDuration={ 4000 }
-          onRequestClose={ this.handleCopyAddressClose }
-          bodyStyle={ {
-            backgroundColor: darkBlack
-          } }
-        />
-
         <Container>
           <IdentityIcon
             address={ address } />
           <div className={ styles.floatleft }>
             <ContainerTitle title={ <IdentityName address={ address } unknown /> } />
             <div className={ styles.addressline }>
-              <CopyToClipboard
-                onCopy={ this.handleCopyAddress }
-                text={ address } >
-                <IconButton
-                  tooltip='Copy address to clipboard'
-                  tooltipPosition='top-center'
-                  style={ {
-                    width: 32,
-                    height: 16,
-                    padding: 0
-                  } }
-                  iconStyle={ {
-                    width: 16,
-                    height: 16
-                  } }>
-                  <CopyIcon
-                    color={ addressCopied ? lightWhite : fullWhite }
-                  />
-                </IconButton>
-              </CopyToClipboard>
-              <span>{ address } </span>
+              <CopyToClipboard data={ address } />
+              <div className={ styles.address }>{ address }</div>
             </div>
             { uuidText }
             <div className={ styles.infoline }>
@@ -157,14 +115,6 @@ export default class Header extends Component {
     });
   }
 
-  handleCopyAddress = () => {
-    this.setState({ addressCopied: true });
-  }
-
-  handleCopyAddressClose = () => {
-    this.setState({ addressCopied: false });
-  }
-
   setName () {
     const { account } = this.props;
 

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,66 @@ class Addresses extends Component {
     );
   }
 
+  renderValidation = (content) => {
+    const error = {
+      error: 'The provided file is invalid...'
+    };
+
+    try {
+      const addresses = JSON.parse(content);
+
+      if (!addresses || Object.keys(addresses).length === 0) {
+        return error;
+      }
+
+      const body = Object
+        .values(addresses)
+        .filter((account) => account && account.address)
+        .map((account, index) => (
+          <Summary
+            key={ index }
+            account={ account }
+            name={ account.name }
+            noLink
+          />
+        ));
+
+      return (
+        <div>
+          { body }
+        </div>
+      );
+    } catch (e) { return error; }
+  }
+
+  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));