Add Copy Tx ID button to transaction-list-item-details (#6146)

* Add Copy Tx ID button to transaction-list-item-details

* Move justCopied toggle timeout inside setState callback

app/_locales/en/messages.json

@@ -305,6 +305,12 @@
   "copyAddress": {
     "message": "Copy address to clipboard"
   },
+  "copyTransactionId": {
+    "message": "Copy Transaction ID"
+  },
+  "copiedTransactionId": {
+    "message": "Copied Transaction ID"
+  },
   "copyToClipboard": {
     "message": "Copy to clipboard"
   },

ui/app/components/transaction-list-item-details/index.scss

@@ -22,6 +22,11 @@
     &:not(:last-child) {
       margin-right: 8px;
     }
+
+    &__copy-icon {
+      width: 10px;
+      height: 10px;
+    }
   }
 
   &__sender-to-recipient-container {

ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js

@@ -37,7 +37,7 @@ describe('TransactionListItemDetails Component', () => {
     )
 
     assert.ok(wrapper.hasClass('transaction-list-item-details'))
-    assert.equal(wrapper.find(Button).length, 1)
+    assert.equal(wrapper.find(Button).length, 2)
     assert.equal(wrapper.find(SenderToRecipient).length, 1)
     assert.equal(wrapper.find(TransactionBreakdown).length, 1)
     assert.equal(wrapper.find(TransactionActivityLog).length, 1)
@@ -76,6 +76,6 @@ describe('TransactionListItemDetails Component', () => {
     )
 
     assert.ok(wrapper.hasClass('transaction-list-item-details'))
-    assert.equal(wrapper.find(Button).length, 2)
+    assert.equal(wrapper.find(Button).length, 3)
   })
 })

ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import copyToClipboard from 'copy-to-clipboard'
 import SenderToRecipient from '../sender-to-recipient'
 import { FLAT_VARIANT } from '../sender-to-recipient/sender-to-recipient.constants'
 import TransactionActivityLog from '../transaction-activity-log'
@@ -21,6 +22,10 @@ export default class TransactionListItemDetails extends PureComponent {
     transactionGroup: PropTypes.object,
   }
 
+  state = {
+    justCopied: false,
+  }
+
   handleEtherscanClick = () => {
     const { transactionGroup: { primaryTransaction } } = this.props
     const { hash, metamaskNetworkId } = primaryTransaction
@@ -45,8 +50,20 @@ export default class TransactionListItemDetails extends PureComponent {
     onRetry(id)
   }
 
+  handleCopyTxId = () => {
+    const { transactionGroup} = this.props
+    const { primaryTransaction: transaction } = transactionGroup
+    const { hash } = transaction
+
+    this.setState({ justCopied: true }, () => {
+      copyToClipboard(hash)
+      setTimeout(() => this.setState({ justCopied: false }), 1000)
+    })
+  }
+
   render () {
     const { t } = this.context
+    const { justCopied } = this.state
     const { transactionGroup, showCancel, showRetry, onCancel, onRetry } = this.props
     const { primaryTransaction: transaction } = transactionGroup
     const { txParams: { to, from } = {} } = transaction
@@ -78,6 +95,18 @@ export default class TransactionListItemDetails extends PureComponent {
                 </Button>
               )
             }
+            <Tooltip title={justCopied ? t('copiedTransactionId') : t('copyTransactionId')}>
+              <Button
+                type="raised"
+                onClick={this.handleCopyTxId}
+                className="transaction-list-item-details__header-button"
+              >
+                <img
+                  className="transaction-list-item-details__header-button__copy-icon"
+                  src="/images/copy-to-clipboard.svg"
+                />
+              </Button>
+            </Tooltip>
             <Tooltip title={t('viewOnEtherscan')}>
               <Button
                 type="raised"