diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index b46f715bc..4a62746d6 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -9,6 +9,8 @@ const BN = ethUtil.BN const hexToBn = require('../../../app/scripts/lib/hex-to-bn') const MiniAccountPanel = require('./mini-account-panel') +const Tooltip = require('./tooltip') +const copyToClipboard = require('copy-to-clipboard') const EthBalance = require('./eth-balance') const util = require('../util') const addressSummary = util.addressSummary @@ -93,11 +95,23 @@ PendingTx.prototype.render = function () { fontFamily: 'Montserrat Bold, Montserrat, sans-serif', }, }, identity.name), - h('span.font-small', { - style: { - fontFamily: 'Montserrat Light, Montserrat, sans-serif', - }, - }, addressSummary(address, 6, 4, false)), + + h(Tooltip, { + title: 'Copy address', + position: 'bottom', + }, [ + h('span.font-small', { + onClick: (event) => { + event.preventDefault() + event.stopPropagation() + copyToClipboard(ethUtil.toChecksumAddress(address)) + }, + style: { + cursor: 'pointer', + fontFamily: 'Montserrat Light, Montserrat, sans-serif', + }, + }, addressSummary(address, 6, 4, false)), + ]), h('span.font-small', { style: { @@ -322,16 +336,30 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () { imageSeed: txParams.to, picOrder: 'left', }, [ + h('span.font-small', { style: { fontFamily: 'Montserrat Bold, Montserrat, sans-serif', }, }, nameForAddress(txParams.to, props.identities)), - h('span.font-small', { - style: { - fontFamily: 'Montserrat Light, Montserrat, sans-serif', - }, - }, addressSummary(txParams.to, 6, 4, false)), + + h(Tooltip, { + title: 'Copy address', + position: 'bottom', + }, [ + h('span.font-small', { + onClick: (event) => { + event.preventDefault() + event.stopPropagation() + copyToClipboard(ethUtil.toChecksumAddress(txParams.to)) + }, + style: { + cursor: 'pointer', + fontFamily: 'Montserrat Light, Montserrat, sans-serif', + }, + }, addressSummary(txParams.to, 6, 4, false)), + ]), + ]) } else { return h(MiniAccountPanel, {