diff --git a/js/src/redux/providers/status.js b/js/src/redux/providers/status.js
index aff453517d7..658f541974b 100644
--- a/js/src/redux/providers/status.js
+++ b/js/src/redux/providers/status.js
@@ -87,7 +87,8 @@ export default class Status {
setTimeout(this._pollStatus, timeout);
};
- if (isConnected !== this._store.getState().nodeStatus.isConnected) {
+ const wasConnected = this._store.getState().nodeStatus.isConnected;
+ if (isConnected !== wasConnected) {
this._fetchEnode();
}
diff --git a/js/src/ui/CopyToClipboard/copyToClipboard.js b/js/src/ui/CopyToClipboard/copyToClipboard.js
new file mode 100644
index 00000000000..3351f2e4063
--- /dev/null
+++ b/js/src/ui/CopyToClipboard/copyToClipboard.js
@@ -0,0 +1,75 @@
+// 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 .
+
+import React, { Component, PropTypes } from 'react';
+import { IconButton } from 'material-ui';
+import Clipboard from 'react-copy-to-clipboard';
+import CopyIcon from 'material-ui/svg-icons/content/content-copy';
+import Theme from '../Theme';
+const { textColor, disabledTextColor } = Theme.flatButton;
+
+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
+ };
+
+ static defaultProps = {
+ className: '',
+ label: 'copy to clipboard',
+ onCopy: () => {},
+ size: 16,
+ cooldown: 1000
+ };
+
+ state = {
+ copied: false
+ };
+
+ render () {
+ const { data, label, size } = this.props;
+ const { copied } = this.state;
+
+ return (
+
+
+
+
+
+ );
+ }
+
+ onCopy = () => {
+ const { cooldown, onCopy } = this.props;
+
+ this.setState({ copied: true });
+ setTimeout(() => {
+ this.setState({ copied: false });
+ }, cooldown);
+
+ onCopy();
+ }
+}
diff --git a/js/src/ui/CopyToClipboard/index.js b/js/src/ui/CopyToClipboard/index.js
new file mode 100644
index 00000000000..182cb680450
--- /dev/null
+++ b/js/src/ui/CopyToClipboard/index.js
@@ -0,0 +1,17 @@
+// 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 .
+
+export default from './CopyToClipboard';
diff --git a/js/src/ui/index.js b/js/src/ui/index.js
index 808dec64af2..c2b63097a07 100644
--- a/js/src/ui/index.js
+++ b/js/src/ui/index.js
@@ -25,6 +25,7 @@ import Button from './Button';
import ConfirmDialog from './ConfirmDialog';
import Container, { Title as ContainerTitle } from './Container';
import ContextProvider from './ContextProvider';
+import CopyToClipboard from './CopyToClipboard';
import Errors from './Errors';
import Form, { AddressSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select } from './Form';
import IdentityIcon from './IdentityIcon';
@@ -53,6 +54,7 @@ export {
Container,
ContainerTitle,
ContextProvider,
+ CopyToClipboard,
Errors,
Form,
FormWrap,
diff --git a/js/src/views/Application/Status/status.css b/js/src/views/Application/Status/status.css
index 3ce33f51bd6..af15d46d598 100644
--- a/js/src/views/Application/Status/status.css
+++ b/js/src/views/Application/Status/status.css
@@ -28,9 +28,13 @@
}
.enode {
- width: 45em;
word-wrap: break-word;
- margin: 0.5em 0 0.25em;
+ margin: 0.5em 0 0.25em 0;
+}
+
+.enode > * {
+ display: inline-block;
+ margin-left: .5em;
}
.block {
diff --git a/js/src/views/Application/Status/status.js b/js/src/views/Application/Status/status.js
index f86d5e4ffe9..7b3c87b89f4 100644
--- a/js/src/views/Application/Status/status.js
+++ b/js/src/views/Application/Status/status.js
@@ -19,6 +19,7 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { BlockStatus } from '../../../ui';
+import CopyToClipboard from '../../../ui/CopyToClipboard';
import styles from './status.css';
@@ -68,9 +69,14 @@ class Status extends Component {
return null;
}
+ const [protocol, rest] = enode.split('://');
+ const [id, host] = rest.split('@');
+ const abbreviated = `${protocol}://${id.slice(0, 3)}…${id.slice(-3)}@${host}`;
+
return (
- { enode }
+
+
{ abbreviated }
);
}