Move address copying into reusable component

"copyable" component allows any elements to be wrapped to include:

- a tool tip that changes/debounces its label when clicked.
- a customizable copyable value.

Fixes #1539

2 files changed, 54 insertions, 20 deletions

diff --git a/ui/app/components/copyable.js b/ui/app/components/copyable.js
new file mode 100644
index 000000000..9b785a77e
--- /dev/null
+++ b/ui/app/components/copyable.js
@@ -0,0 +1,49 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const Tooltip = require('./tooltip')
+const copyToClipboard = require('copy-to-clipboard')
+
+module.exports = Copyable
+
+inherits(Copyable, Component)
+function Copyable () {
+  Component.call(this)
+  this.state = {
+    copied: false,
+  }
+}
+
+Copyable.prototype.render = function () {
+  const props = this.props
+  const state = this.state
+  const { value, children } = props
+  const { copied } = state
+
+  return h(Tooltip, {
+    title: copied ? 'Copied!' : 'Copy',
+    position: 'bottom',
+    style: {
+      cursor: 'pointer',
+    },
+  }, h('span', {
+    style: {
+      cursor: 'pointer',
+    },
+    onClick: (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      copyToClipboard(value)
+      this.debounceRestore()
+    },
+  }, children))
+}
+
+Copyable.prototype.debounceRestore = function () {
+  this.setState({ copied: true })
+  clearTimeout(this.timeout)
+  this.timeout = setTimeout(() => {
+    this.setState({ copied: false })
+  }, 850)
+}
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 4a62746d6..4961db5de 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -9,8 +9,7 @@ const BN = ethUtil.BN
 const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
 
 const MiniAccountPanel = require('./mini-account-panel')
-const Tooltip = require('./tooltip')
-const copyToClipboard = require('copy-to-clipboard')
+const Copyable = require('./copyable')
 const EthBalance = require('./eth-balance')
 const util = require('../util')
 const addressSummary = util.addressSummary
@@ -96,18 +95,11 @@ PendingTx.prototype.render = function () {
                 },
               }, identity.name),
 
-              h(Tooltip, {
-                title: 'Copy address',
-                position: 'bottom',
+              h(Copyable, {
+                value: ethUtil.toChecksumAddress(address),
               }, [
                 h('span.font-small', {
-                  onClick: (event) => {
-                    event.preventDefault()
-                    event.stopPropagation()
-                    copyToClipboard(ethUtil.toChecksumAddress(address))
-                  },
                   style: {
-                    cursor: 'pointer',
                     fontFamily: 'Montserrat Light, Montserrat, sans-serif',
                   },
                 }, addressSummary(address, 6, 4, false)),
@@ -343,18 +335,11 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
         },
       }, nameForAddress(txParams.to, props.identities)),
 
-      h(Tooltip, {
-        title: 'Copy address',
-        position: 'bottom',
+      h(Copyable, {
+        value: ethUtil.toChecksumAddress(txParams.to),
       }, [
         h('span.font-small', {
-          onClick: (event) => {
-            event.preventDefault()
-            event.stopPropagation()
-            copyToClipboard(ethUtil.toChecksumAddress(txParams.to))
-          },
           style: {
-            cursor: 'pointer',
             fontFamily: 'Montserrat Light, Montserrat, sans-serif',
           },
         }, addressSummary(txParams.to, 6, 4, false)),