abbreviated enode, CopyToClipboard component (#3131)

* show abbreviated enode

* CopyToClipboard component

* CopyToClipboard: improved styling

* put CopyToClipboard into enode status

* Rename CopyToClipboard.js to copyToClipboard.js

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

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 <http://www.gnu.org/licenses/>.
+
+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 (
+      <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>
+      </Clipboard>
+    );
+  }
+
+  onCopy = () => {
+    const { cooldown, onCopy } = this.props;
+
+    this.setState({ copied: true });
+    setTimeout(() => {
+      this.setState({ copied: false });
+    }, cooldown);
+
+    onCopy();
+  }
+}

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 <http://www.gnu.org/licenses/>.
+
+export default from './CopyToClipboard';

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,

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 {

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 (
       <div className={ styles.enode }>
-        { enode }
+        <CopyToClipboard data={ enode } />
+        <div>{ abbreviated }</div>
       </div>
     );
   }