m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

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

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

* Move justCopied toggle timeout inside setState callback
This commit is contained in:
Chi Kei Chan 2019-02-16 20:30:02 -08:00 committed by Whymarrh Whitby
parent ce48d1f49c
commit b58a9bd202
4 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/_locales/en/messages.json
View File

@ -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"
},

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

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

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

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

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

@ -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"