5 files changed, 72 insertions, 17 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 7daa3a4dd..8a17e095a 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -3,7 +3,7 @@ const extend = require('xtend')
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
-const copyToClipboard = require('copy-to-clipboard')
+const CopyButton = require('./components/copyButton')
 const actions = require('./actions')
 const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const valuesFor = require('./util').valuesFor
@@ -105,13 +105,8 @@ AccountDetailScreen.prototype.render = function () {
             },
           }, ethUtil.toChecksumAddress(selected)),
 
-          h('img.cursor-pointer.color-orange', {
-            src: 'images/copy.svg',
-            title: 'Copy Address',
-            onClick: () => copyToClipboard(ethUtil.toChecksumAddress(selected)),
-            style: {
-              margin: '0px 5px',
-            },
+          h(CopyButton, {
+            value: ethUtil.toChecksumAddress(selected),
           }),
 
           h('img.cursor-pointer.color-orange', {
diff --git a/ui/app/accounts/account-list-item.js b/ui/app/accounts/account-list-item.js
index 6bba6e145..1010516e2 100644
--- a/ui/app/accounts/account-list-item.js
+++ b/ui/app/accounts/account-list-item.js
@@ -4,7 +4,7 @@ const inherits = require('util').inherits
 const ethUtil = require('ethereumjs-util')
 
 const EtherBalance = require('../components/eth-balance')
-const copyToClipboard = require('copy-to-clipboard')
+const CopyButton = require('../components/copyButton')
 const Identicon = require('../components/identicon')
 
 module.exports = NewComponent
@@ -61,14 +61,8 @@ NewComponent.prototype.render = function () {
           margin: '0 20px',
         },
       }, [
-        h('img.cursor-pointer.color-orange', {
-          title: 'Copy Address',
-          src: 'images/copy.svg',
-          onClick: (event) => {
-            event.stopPropagation()
-            event.preventDefault()
-            copyToClipboard(ethUtil.toChecksumAddress(identity.address))
-          },
+        h(CopyButton, {
+          value: ethUtil.toChecksumAddress(identity.address),
         }),
       ]),
     ])
diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js
new file mode 100644
index 000000000..182d7a670
--- /dev/null
+++ b/ui/app/components/copyButton.js
@@ -0,0 +1,62 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const copyToClipboard = require('copy-to-clipboard')
+
+const Tooltip = require('react-tooltip-component')
+
+module.exports = CopyButton
+
+inherits(CopyButton, Component)
+function CopyButton () {
+  Component.call(this)
+}
+
+// As parameters, accepts:
+// "value", which is the value to copy (mandatory)
+// "title", which is the text to show on hover (optional, defaults to 'Copy')
+CopyButton.prototype.render = function () {
+  const props = this.props
+  const state = this.state || {}
+
+  const value = props.value
+  const copied = state.copied
+
+  const message = copied ? 'Copied' : props.title || ' Copy '
+
+  return h('.copy-button', {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+  }, [
+
+    h(Tooltip, {
+      position: 'top',
+      title: message,
+    }, [
+      h('i.fa.fa-clipboard.cursor-pointer.color-orange', {
+        style: {
+          margin: '5px',
+        },
+        onClick: (event) => {
+          event.preventDefault()
+          event.stopPropagation()
+          copyToClipboard(value)
+          this.debounceRestore()
+        },
+      }),
+    ]),
+
+  ])
+}
+
+CopyButton.prototype.debounceRestore = function() {
+
+  this.setState({ copied: true })
+  clearTimeout(this.timeout)
+  this.timeout = setTimeout(() => {
+    this.setState({ copied: false })
+  }, 850)
+
+}
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 82176059f..b1fc0d5f3 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -5,6 +5,7 @@ const inherits = require('util').inherits
 const EtherBalance = require('./eth-balance')
 const addressSummary = require('../util').addressSummary
 const explorerLink = require('../../lib/explorer-link')
+const CopyButton = require('./copyButton')
 const vreme = new (require('vreme'))
 
 const TransactionIcon = require('./transaction-list-item-icon')
@@ -67,6 +68,8 @@ TransactionListItem.prototype.render = function () {
         recipientField(txParams, transaction, isTx, isMsg),
       ]),
 
+      transaction.hash ? h(CopyButton, { value: transaction.hash }) : null,
+
       isTx ? h(EtherBalance, {
         value: txParams.value,
       }) : h('.flex-column'),
diff --git a/ui/css.js b/ui/css.js
index f6abb0d7a..01f317acd 100644
--- a/ui/css.js
+++ b/ui/css.js
@@ -9,6 +9,7 @@ var cssFiles = {
   'lib.css': fs.readFileSync(path.join(__dirname, '/app/css/lib.css'), 'utf8'),
   'index.css': fs.readFileSync(path.join(__dirname, '/app/css/index.css'), 'utf8'),
   'transitions.css': fs.readFileSync(path.join(__dirname, '/app/css/transitions.css'), 'utf8'),
+  'react-tooltip-component.css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-tooltip-component', 'dist', 'react-tooltip-component.css'), 'utf8'),
 }
 
 function bundleCss () {