From b58a9bd2028e5719f4b3b8ed3a9088f4145fb6e5 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Sat, 16 Feb 2019 20:30:02 -0800
Subject: 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                      |  6 +++++
 .../transaction-list-item-details/index.scss       |  5 ++++
 ...transaction-list-item-details.component.test.js |  4 +--
 .../transaction-list-item-details.component.js     | 29 ++++++++++++++++++++++
 4 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 662ab8548..b6d27b7ea 100644
--- a/app/_locales/en/messages.json
+++ b/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"
   },
diff --git a/ui/app/components/transaction-list-item-details/index.scss b/ui/app/components/transaction-list-item-details/index.scss
index 2e3a06f84..7cb253e4e 100644
--- a/ui/app/components/transaction-list-item-details/index.scss
+++ b/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 {
diff --git a/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js b/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
index 62fc64db9..5b55beeb4 100644
--- a/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
+++ b/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)
   })
 })
diff --git a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
index cc2c45290..eaf1166f0 100644
--- a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
+++ b/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"
-- 
cgit