CopyToClipboard: show SnackBar

js/src/ui/CopyToClipboard/copyToClipboard.css

@@ -0,0 +1,20 @@
+/* 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/>.
+*/
+
+.data {
+  font-family: monospace;
+}

js/src/ui/CopyToClipboard/copyToClipboard.js

@@ -16,11 +16,15 @@
 
 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,
@@ -56,16 +60,26 @@ export default class CopyToClipboard extends Component {
 
     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>
+          <Snackbar
+            open={ copied }
+            message={
+              <div>copied <code className={ styles.data }>{ data }</code> to clipboard</div>
+            }
+            autoHideDuration={ 2000 }
+            bodyStyle={ { backgroundColor: darkBlack } }
+          />
+          <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>
       </Clipboard>
     );
   }