See addresses outside address book + Save them

js/src/modals/AddAddress/addAddress.js

@@ -28,6 +28,7 @@ export default class AddAddress extends Component {
 
   static propTypes = {
     contacts: PropTypes.object.isRequired,
+    address: PropTypes.string,
     onClose: PropTypes.func
   };
 
@@ -39,6 +40,12 @@ export default class AddAddress extends Component {
     description: ''
   };
 
+  componentWillMount () {
+    if (this.props.address) {
+      this.onEditAddress(null, this.props.address);
+    }
+  }
+
   render () {
     return (
       <Modal
@@ -77,6 +84,8 @@ export default class AddAddress extends Component {
           hint='the network address for the entry'
           error={ addressError }
           value={ address }
+          disabled={ !!this.props.address }
+          allowCopy={ false }
           onChange={ this.onEditAddress } />
         <Input
           label='address name'

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

@@ -31,6 +31,10 @@
 .infoline,
 .uuidline {
   line-height: 1.618em;
+
+  &.bigaddress {
+    font-size: 1.25em;
+  }
 }
 
 .infoline,

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

@@ -32,18 +32,20 @@ export default class Header extends Component {
     balance: PropTypes.object,
     className: PropTypes.string,
     children: PropTypes.node,
-    isContract: PropTypes.bool
+    isContract: PropTypes.bool,
+    hideName: PropTypes.bool
   };
 
   static defaultProps = {
     className: '',
     children: null,
-    isContract: false
+    isContract: false,
+    hideName: false
   };
 
   render () {
     const { api } = this.context;
-    const { account, balance, className, children } = this.props;
+    const { account, balance, className, children, hideName } = this.props;
     const { address, meta, uuid } = account;
 
     if (!account) {
@@ -60,17 +62,20 @@ export default class Header extends Component {
           <IdentityIcon
             address={ address } />
           <div className={ styles.floatleft }>
-            <ContainerTitle title={ <IdentityName address={ address } unknown /> } />
-            <div className={ styles.addressline }>
+            { this.renderName(address) }
+
+            <div className={ [ hideName ? styles.bigaddress : '', styles.addressline ].join(' ') }>
               <CopyToClipboard data={ address } />
               <div className={ styles.address }>{ address }</div>
             </div>
+
             { uuidText }
             <div className={ styles.infoline }>
               { meta.description }
             </div>
             { this.renderTxCount() }
           </div>
+
           <div className={ styles.tags }>
             <Tags tags={ meta.tags } />
           </div>
@@ -89,6 +94,18 @@ export default class Header extends Component {
     );
   }
 
+  renderName (address) {
+    const { hideName } = this.props;
+
+    if (hideName) {
+      return null;
+    }
+
+    return (
+      <ContainerTitle title={ <IdentityName address={ address } unknown /> } />
+    );
+  }
+
   renderTxCount () {
     const { balance, isContract } = this.props;
 

js/src/views/Address/address.js

@@ -19,8 +19,9 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import ActionDelete from 'material-ui/svg-icons/action/delete';
 import ContentCreate from 'material-ui/svg-icons/content/create';
+import ContentAdd from 'material-ui/svg-icons/content/add';
 
-import { EditMeta } from '~/modals';
+import { EditMeta, AddAddress } from '~/modals';
 import { Actionbar, Button, Page } from '~/ui';
 
 import Header from '../Account/Header';
@@ -32,7 +33,7 @@ class Address extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired,
     router: PropTypes.object.isRequired
-  }
+  };
 
   static propTypes = {
     setVisibleAccounts: PropTypes.func.isRequired,
@@ -40,12 +41,13 @@ class Address extends Component {
     contacts: PropTypes.object,
     balances: PropTypes.object,
     params: PropTypes.object
-  }
+  };
 
   state = {
     showDeleteDialog: false,
-    showEditDialog: false
-  }
+    showEditDialog: false,
+    showAdd: false
+  };
 
   componentDidMount () {
     this.setVisibleAccounts();
@@ -73,32 +75,69 @@ class Address extends Component {
   render () {
     const { contacts, balances } = this.props;
     const { address } = this.props.params;
-    const { showDeleteDialog } = this.state;
+
+    if (Object.keys(contacts).length === 0) {
+      return null;
+    }
 
     const contact = (contacts || {})[address];
     const balance = (balances || {})[address];
 
-    if (!contact) {
+    return (
+      <div>
+        { this.renderAddAddress(contact, address) }
+        { this.renderEditDialog(contact) }
+        { this.renderActionbar(contact) }
+        { this.renderDelete(contact) }
+        <Page>
+          <Header
+            account={ contact || { address, meta: {} } }
+            balance={ balance }
+            hideName={ !contact }
+          />
+          <Transactions
+            address={ address }
+          />
+        </Page>
+      </div>
+    );
+  }
+
+  renderAddAddress (contact, address) {
+    if (contact) {
+      return null;
+    }
+
+    const { contacts } = this.props;
+    const { showAdd } = this.state;
+
+    if (!showAdd) {
       return null;
     }
 
     return (
-      <div>
-        { this.renderEditDialog(contact) }
-        { this.renderActionbar(contact) }
-        <Delete
-          account={ contact }
-          visible={ showDeleteDialog }
-          route='/addresses'
-          onClose={ this.closeDeleteDialog } />
-        <Page>
-          <Header
-            account={ contact }
-            balance={ balance } />
-          <Transactions
-            address={ address } />
-        </Page>
-      </div>
+      <AddAddress
+        contacts={ contacts }
+        onClose={ this.onCloseAdd }
+        address={ address }
+      />
+    );
+  }
+
+  renderDelete (contact) {
+    if (!contact) {
+      return null;
+    }
+
+    const { showDeleteDialog } = this.state;
+
+    return (
+      <Delete
+        account={ contact }
+        visible={ showDeleteDialog }
+        route='/addresses'
+        onClose={ this.closeDeleteDialog }
+      />
     );
   }
 
@@ -116,17 +155,27 @@ class Address extends Component {
         onClick={ this.showDeleteDialog } />
     ];
 
+    const addToBook = (
+      <Button
+        key='newAddress'
+        icon={ <ContentAdd /> }
+        label='save address'
+        onClick={ this.onOpenAdd }
+      />
+    );
+
     return (
       <Actionbar
         title='Address Information'
-        buttons={ !contact ? [] : buttons } />
+        buttons={ !contact ? [ addToBook ] : buttons }
+      />
     );
   }
 
   renderEditDialog (contact) {
     const { showEditDialog } = this.state;
 
-    if (!showEditDialog) {
+    if (!contact || !showEditDialog) {
       return null;
     }
 
@@ -151,6 +200,16 @@ class Address extends Component {
   showDeleteDialog = () => {
     this.setState({ showDeleteDialog: true });
   }
+
+  onOpenAdd = () => {
+    this.setState({
+      showAdd: true
+    });
+  }
+
+  onCloseAdd = () => {
+    this.setState({ showAdd: false });
+  }
 }
 
 function mapStateToProps (state) {