diff options
| -rw-r--r-- | CHANGELOG.md | 1 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | ui/app/account-detail.js | 45 | ||||
| -rw-r--r-- | ui/app/accounts/account-list-item.js | 12 | ||||
| -rw-r--r-- | ui/app/app.js | 26 | ||||
| -rw-r--r-- | ui/app/components/copyButton.js | 61 | ||||
| -rw-r--r-- | ui/app/components/tooltip.js | 22 | ||||
| -rw-r--r-- | ui/app/components/transaction-list-item.js | 3 | ||||
| -rw-r--r-- | ui/css.js | 1 |
9 files changed, 131 insertions, 41 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 22405a731..36e186245 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - Added a network indicator mark in dropdown menu - Added network name next to network indicator +- 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..02a807dbb 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 @@ -14,6 +14,7 @@ const TransactionList = require('./components/transaction-list') const ExportAccountView = require('./components/account-export') const ethUtil = require('ethereumjs-util') const EditableLabel = require('./components/editable-label') +const Tooltip = require('./components/tooltip') module.exports = connect(mapStateToProps)(AccountDetailScreen) @@ -105,28 +106,32 @@ 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', { - src: 'images/key-32.png', + h(Tooltip, { title: 'Export Private Key', - onClick: () => this.requestAccountExport(selected), - style: { - margin: '0px 5px', - width: '20px', - height: '20px', - position: 'relative', - top: '3px', - right: '4px', - }, - }), + }, [ + h('div', { + style: { + margin: '5px', + }, + }, [ + h('img.cursor-pointer.color-orange', { + src: 'images/key-32.png', + onClick: () => this.requestAccountExport(selected), + style: { + margin: '0px 5px', + width: '20px', + height: '20px', + position: 'relative', + top: '3px', + right: '4px', + }, + }), + ]), + ]), ]), 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/app.js b/ui/app/app.js index a79666f58..938caffd9 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -26,6 +26,7 @@ const SandwichExpando = require('sandwich-expando') const MenuDroppo = require('menu-droppo') const DropMenuItem = require('./components/drop-menu-item') const NetworkIndicator = require('./components/network') +const Tooltip = require('./components/tooltip') module.exports = connect(mapStateToProps)(App) @@ -152,18 +153,19 @@ App.prototype.renderAppBar = function () { }, [ // small accounts nav - h('img.cursor-pointer.color-orange', { - src: 'images/switch_acc.svg', - style: { - width: '23.5px', - marginRight: '8px', - }, - title: 'Switch Accounts', - onClick: (event) => { - event.stopPropagation() - this.props.dispatch(actions.showAccountsPage()) - }, - }), + h(Tooltip, { title: 'Switch Accounts' }, [ + h('img.cursor-pointer.color-orange', { + src: 'images/switch_acc.svg', + style: { + width: '23.5px', + marginRight: '8px', + }, + onClick: (event) => { + event.stopPropagation() + this.props.dispatch(actions.showAccountsPage()) + }, + }), + ]), // hamburger h(SandwichExpando, { diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js new file mode 100644 index 000000000..a01603585 --- /dev/null +++ b/ui/app/components/copyButton.js @@ -0,0 +1,61 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const copyToClipboard = require('copy-to-clipboard') + +const Tooltip = require('./tooltip') + +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, { + 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/tooltip.js b/ui/app/components/tooltip.js new file mode 100644 index 000000000..4eab8611e --- /dev/null +++ b/ui/app/components/tooltip.js @@ -0,0 +1,22 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const ReactTooltip = require('react-tooltip-component') + +module.exports = Tooltip + +inherits(Tooltip, Component) +function Tooltip () { + Component.call(this) +} + +Tooltip.prototype.render = function () { + const props = this.props + + return h(ReactTooltip, { + position: 'left', + title: props.title, + fixed: false, + }, props.children) + +} 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 () { |