diff options
| -rw-r--r-- | CHANGELOG.md | 1 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | ui/app/account-detail.js | 11 | ||||
| -rw-r--r-- | ui/app/accounts/account-list-item.js | 12 | ||||
| -rw-r--r-- | ui/app/components/copyButton.js | 62 | ||||
| -rw-r--r-- | ui/app/components/transaction-list-item.js | 3 | ||||
| -rw-r--r-- | ui/css.js | 1 |
7 files changed, 74 insertions, 17 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 62b59b810..509449375 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Current Master +- Add copy transaction hash button to completed transaction list items. - Unify wording for transaction approve/reject options on notifications and the extension. ## 2.4.5 2016-06-29 diff --git a/package.json b/package.json index cafca2672..efa652730 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "react-dom": "^15.0.2", "react-hyperscript": "^2.2.2", "react-redux": "^4.4.5", + "react-tooltip-component": "^0.3.0", "readable-stream": "^2.1.2", "redux": "^3.0.5", "redux-logger": "^2.3.1", diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 7daa3a4dd..8a17e095a 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -3,7 +3,7 @@ const extend = require('xtend') const Component = require('react').Component const h = require('react-hyperscript') const connect = require('react-redux').connect -const copyToClipboard = require('copy-to-clipboard') +const CopyButton = require('./components/copyButton') const actions = require('./actions') const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const valuesFor = require('./util').valuesFor @@ -105,13 +105,8 @@ AccountDetailScreen.prototype.render = function () { }, }, ethUtil.toChecksumAddress(selected)), - h('img.cursor-pointer.color-orange', { - src: 'images/copy.svg', - title: 'Copy Address', - onClick: () => copyToClipboard(ethUtil.toChecksumAddress(selected)), - style: { - margin: '0px 5px', - }, + h(CopyButton, { + value: ethUtil.toChecksumAddress(selected), }), h('img.cursor-pointer.color-orange', { diff --git a/ui/app/accounts/account-list-item.js b/ui/app/accounts/account-list-item.js index 6bba6e145..1010516e2 100644 --- a/ui/app/accounts/account-list-item.js +++ b/ui/app/accounts/account-list-item.js @@ -4,7 +4,7 @@ const inherits = require('util').inherits const ethUtil = require('ethereumjs-util') const EtherBalance = require('../components/eth-balance') -const copyToClipboard = require('copy-to-clipboard') +const CopyButton = require('../components/copyButton') const Identicon = require('../components/identicon') module.exports = NewComponent @@ -61,14 +61,8 @@ NewComponent.prototype.render = function () { margin: '0 20px', }, }, [ - h('img.cursor-pointer.color-orange', { - title: 'Copy Address', - src: 'images/copy.svg', - onClick: (event) => { - event.stopPropagation() - event.preventDefault() - copyToClipboard(ethUtil.toChecksumAddress(identity.address)) - }, + h(CopyButton, { + value: ethUtil.toChecksumAddress(identity.address), }), ]), ]) diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js new file mode 100644 index 000000000..182d7a670 --- /dev/null +++ b/ui/app/components/copyButton.js @@ -0,0 +1,62 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const copyToClipboard = require('copy-to-clipboard') + +const Tooltip = require('react-tooltip-component') + +module.exports = CopyButton + +inherits(CopyButton, Component) +function CopyButton () { + Component.call(this) +} + +// As parameters, accepts: +// "value", which is the value to copy (mandatory) +// "title", which is the text to show on hover (optional, defaults to 'Copy') +CopyButton.prototype.render = function () { + const props = this.props + const state = this.state || {} + + const value = props.value + const copied = state.copied + + const message = copied ? 'Copied' : props.title || ' Copy ' + + return h('.copy-button', { + style: { + display: 'flex', + alignItems: 'center', + }, + }, [ + + h(Tooltip, { + position: 'top', + title: message, + }, [ + h('i.fa.fa-clipboard.cursor-pointer.color-orange', { + style: { + margin: '5px', + }, + onClick: (event) => { + event.preventDefault() + event.stopPropagation() + copyToClipboard(value) + this.debounceRestore() + }, + }), + ]), + + ]) +} + +CopyButton.prototype.debounceRestore = function() { + + this.setState({ copied: true }) + clearTimeout(this.timeout) + this.timeout = setTimeout(() => { + this.setState({ copied: false }) + }, 850) + +} diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index 82176059f..b1fc0d5f3 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -5,6 +5,7 @@ const inherits = require('util').inherits const EtherBalance = require('./eth-balance') const addressSummary = require('../util').addressSummary const explorerLink = require('../../lib/explorer-link') +const CopyButton = require('./copyButton') const vreme = new (require('vreme')) const TransactionIcon = require('./transaction-list-item-icon') @@ -67,6 +68,8 @@ TransactionListItem.prototype.render = function () { recipientField(txParams, transaction, isTx, isMsg), ]), + transaction.hash ? h(CopyButton, { value: transaction.hash }) : null, + isTx ? h(EtherBalance, { value: txParams.value, }) : h('.flex-column'), @@ -9,6 +9,7 @@ var cssFiles = { 'lib.css': fs.readFileSync(path.join(__dirname, '/app/css/lib.css'), 'utf8'), 'index.css': fs.readFileSync(path.join(__dirname, '/app/css/index.css'), 'utf8'), 'transitions.css': fs.readFileSync(path.join(__dirname, '/app/css/transitions.css'), 'utf8'), + 'react-tooltip-component.css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-tooltip-component', 'dist', 'react-tooltip-component.css'), 'utf8'), } function bundleCss () { |