From ec097c8e3473826f29d988bb6e754345f494913e Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Sun, 4 Jun 2017 22:13:28 -0700 Subject: Add copy links to mini tx panels --- ui/app/components/pending-tx.js | 48 ++++++++++++++++++++++++++++++++--------- 1 file changed, 38 insertions(+), 10 deletions(-) (limited to 'ui') 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, { -- cgit From 773b36b0de5613f1f6bda1caba08ee240a14ab32 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Sun, 4 Jun 2017 22:21:37 -0700 Subject: Move address copying into reusable component "copyable" component allows any elements to be wrapped to include: - a tool tip that changes/debounces its label when clicked. - a customizable copyable value. Fixes #1539 --- ui/app/components/copyable.js | 49 +++++++++++++++++++++++++++++++++++++++++ ui/app/components/pending-tx.js | 25 +++++---------------- 2 files changed, 54 insertions(+), 20 deletions(-) create mode 100644 ui/app/components/copyable.js (limited to 'ui') diff --git a/ui/app/components/copyable.js b/ui/app/components/copyable.js new file mode 100644 index 000000000..9b785a77e --- /dev/null +++ b/ui/app/components/copyable.js @@ -0,0 +1,49 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +const Tooltip = require('./tooltip') +const copyToClipboard = require('copy-to-clipboard') + +module.exports = Copyable + +inherits(Copyable, Component) +function Copyable () { + Component.call(this) + this.state = { + copied: false, + } +} + +Copyable.prototype.render = function () { + const props = this.props + const state = this.state + const { value, children } = props + const { copied } = state + + return h(Tooltip, { + title: copied ? 'Copied!' : 'Copy', + position: 'bottom', + style: { + cursor: 'pointer', + }, + }, h('span', { + style: { + cursor: 'pointer', + }, + onClick: (event) => { + event.preventDefault() + event.stopPropagation() + copyToClipboard(value) + this.debounceRestore() + }, + }, children)) +} + +Copyable.prototype.debounceRestore = function () { + this.setState({ copied: true }) + clearTimeout(this.timeout) + this.timeout = setTimeout(() => { + this.setState({ copied: false }) + }, 850) +} diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 4a62746d6..4961db5de 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -9,8 +9,7 @@ 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 Copyable = require('./copyable') const EthBalance = require('./eth-balance') const util = require('../util') const addressSummary = util.addressSummary @@ -96,18 +95,11 @@ PendingTx.prototype.render = function () { }, }, identity.name), - h(Tooltip, { - title: 'Copy address', - position: 'bottom', + h(Copyable, { + value: ethUtil.toChecksumAddress(address), }, [ 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)), @@ -343,18 +335,11 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () { }, }, nameForAddress(txParams.to, props.identities)), - h(Tooltip, { - title: 'Copy address', - position: 'bottom', + h(Copyable, { + value: ethUtil.toChecksumAddress(txParams.to), }, [ 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)), -- cgit From 8dc6aa9c4c4f11e08eee0688c210324b313b710b Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Sun, 4 Jun 2017 22:26:32 -0700 Subject: Remove dead style code --- ui/app/components/copyable.js | 3 --- 1 file changed, 3 deletions(-) (limited to 'ui') diff --git a/ui/app/components/copyable.js b/ui/app/components/copyable.js index 9b785a77e..a4f6f4bc6 100644 --- a/ui/app/components/copyable.js +++ b/ui/app/components/copyable.js @@ -24,9 +24,6 @@ Copyable.prototype.render = function () { return h(Tooltip, { title: copied ? 'Copied!' : 'Copy', position: 'bottom', - style: { - cursor: 'pointer', - }, }, h('span', { style: { cursor: 'pointer', -- cgit