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