Merge pull request #368 from MetaMask/CopyTxHash

Copy tx hash

3 files changed, 86 insertions, 0 deletions

diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js
new file mode 100644
index 000000000..a01603585
--- /dev/null
+++ b/ui/app/components/copyButton.js
@@ -0,0 +1,61 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const copyToClipboard = require('copy-to-clipboard')
+
+const Tooltip = require('./tooltip')
+
+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, {
+      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/tooltip.js b/ui/app/components/tooltip.js
new file mode 100644
index 000000000..4eab8611e
--- /dev/null
+++ b/ui/app/components/tooltip.js
@@ -0,0 +1,22 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ReactTooltip = require('react-tooltip-component')
+
+module.exports = Tooltip
+
+inherits(Tooltip, Component)
+function Tooltip () {
+  Component.call(this)
+}
+
+Tooltip.prototype.render = function () {
+  const props = this.props
+
+  return h(ReactTooltip, {
+    position: 'left',
+    title: props.title,
+    fixed: false,
+  }, props.children)
+
+}
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'),