diff options
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" |