Merge pull request #368 from MetaMask/CopyTxHash

Copy tx hash

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Current Master
 
+- Add copy transaction hash button to completed transaction list items.
 - Unify wording for transaction approve/reject options on notifications and the extension.
 
 ## 2.4.5 2016-06-29

package.json

@@ -54,6 +54,7 @@
     "react-dom": "^15.0.2",
     "react-hyperscript": "^2.2.2",
     "react-redux": "^4.4.5",
+    "react-tooltip-component": "^0.3.0",
     "readable-stream": "^2.1.2",
     "redux": "^3.0.5",
     "redux-logger": "^2.3.1",

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
@@ -14,6 +14,7 @@ const TransactionList = require('./components/transaction-list')
 const ExportAccountView = require('./components/account-export')
 const ethUtil = require('ethereumjs-util')
 const EditableLabel = require('./components/editable-label')
+const Tooltip = require('./components/tooltip')
 
 module.exports = connect(mapStateToProps)(AccountDetailScreen)
 
@@ -105,28 +106,32 @@ 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', {
-            src: 'images/key-32.png',
+          h(Tooltip, {
             title: 'Export Private Key',
-            onClick: () => this.requestAccountExport(selected),
-            style: {
-              margin: '0px 5px',
-              width: '20px',
-              height: '20px',
-              position: 'relative',
-              top: '3px',
-              right: '4px',
-            },
-          }),
+          }, [
+            h('div', {
+              style: {
+                margin: '5px',
+              },
+            }, [
+              h('img.cursor-pointer.color-orange', {
+                src: 'images/key-32.png',
+                onClick: () => this.requestAccountExport(selected),
+                style: {
+                  margin: '0px 5px',
+                  width: '20px',
+                  height: '20px',
+                  position: 'relative',
+                  top: '3px',
+                  right: '4px',
+                },
+              }),
+            ]),
+          ]),
 
         ]),
 

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),
         }),
       ]),
     ])

ui/app/app.js

@@ -26,6 +26,7 @@ const SandwichExpando = require('sandwich-expando')
 const MenuDroppo = require('menu-droppo')
 const DropMenuItem = require('./components/drop-menu-item')
 const NetworkIndicator = require('./components/network')
+const Tooltip = require('./components/tooltip')
 
 module.exports = connect(mapStateToProps)(App)
 
@@ -152,18 +153,19 @@ App.prototype.renderAppBar = function () {
         }, [
 
           // small accounts nav
-          h('img.cursor-pointer.color-orange', {
-            src: 'images/switch_acc.svg',
-            style: {
-              width: '23.5px',
-              marginRight: '8px',
-            },
-            title: 'Switch Accounts',
-            onClick: (event) => {
-              event.stopPropagation()
-              this.props.dispatch(actions.showAccountsPage())
-            },
-          }),
+          h(Tooltip, { title: 'Switch Accounts' }, [
+            h('img.cursor-pointer.color-orange', {
+              src: 'images/switch_acc.svg',
+              style: {
+                width: '23.5px',
+                marginRight: '8px',
+              },
+              onClick: (event) => {
+                event.stopPropagation()
+                this.props.dispatch(actions.showAccountsPage())
+              },
+            }),
+          ]),
 
           // hamburger
           h(SandwichExpando, {

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)
+
+}

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)
+
+}

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'),

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 () {