diff --git a/js/src/modals/AddAddress/addAddress.js b/js/src/modals/AddAddress/addAddress.js
index e44cb0b3c..a72158cc7 100644
--- a/js/src/modals/AddAddress/addAddress.js
+++ b/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 (
-
} />
-
+ { this.renderName(address) }
+
+
+
{ uuidText }
{ meta.description }
{ this.renderTxCount() }
+
@@ -89,6 +94,18 @@ export default class Header extends Component {
);
}
+ renderName (address) {
+ const { hideName } = this.props;
+
+ if (hideName) {
+ return null;
+ }
+
+ return (
+
} />
+ );
+ }
+
renderTxCount () {
const { balance, isContract } = this.props;
diff --git a/js/src/views/Address/address.js b/js/src/views/Address/address.js
index c1427b2be..9c39203ba 100644
--- a/js/src/views/Address/address.js
+++ b/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 (
+
+ { this.renderAddAddress(contact, address) }
+ { this.renderEditDialog(contact) }
+ { this.renderActionbar(contact) }
+ { this.renderDelete(contact) }
+
+
+
+
+
+ );
+ }
+
+ renderAddAddress (contact, address) {
+ if (contact) {
+ return null;
+ }
+
+ const { contacts } = this.props;
+ const { showAdd } = this.state;
+
+ if (!showAdd) {
return null;
}
return (
-
- { this.renderEditDialog(contact) }
- { this.renderActionbar(contact) }
-
-
-
-
-
-
+
+ );
+ }
+
+ renderDelete (contact) {
+ if (!contact) {
+ return null;
+ }
+
+ const { showDeleteDialog } = this.state;
+
+ return (
+
);
}
@@ -116,17 +155,27 @@ class Address extends Component {
onClick={ this.showDeleteDialog } />
];
+ const addToBook = (
+
}
+ label='save address'
+ onClick={ this.onOpenAdd }
+ />
+ );
+
return (
+ 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) {