From 6f598570d879f8bb3e42724f7a4f303b5071cb49 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 28 Feb 2017 22:12:31 -0800 Subject: [PATCH 1/4] Fix loading indication for conf-tx view --- ui/app/conf-tx.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 7e93ea29f..07985094c 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -49,7 +49,7 @@ ConfirmTxScreen.prototype.render = function () { var isNotification = isPopupOrNotification() === 'notification' log.info(`rendering a combined ${unconfTxList.length} unconf msg & txs`) - if (unconfTxList.length === 0) return h(Loading) + if (unconfTxList.length === 0) return h(Loading, { isLoading: true }) return ( From 69d4aafc3e8fd62875e5da2c2c6c7b3bdac5bf9f Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 1 Mar 2017 00:23:49 -0800 Subject: [PATCH 2/4] Add ens recognition to send form input Attempts to lookup `.eth` addresses on ENS. Is currently failing. I've written an isolation example of the problem here: https://github.com/flyswatter/ens-test --- package.json | 1 + ui/app/components/ens-input.js | 131 +++++++++++++++++++++++++++++++++ ui/app/send.js | 17 +++-- 3 files changed, 144 insertions(+), 5 deletions(-) create mode 100644 ui/app/components/ens-input.js diff --git a/package.json b/package.json index 1542853ad..5a511cc96 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "eth-query": "^1.0.3", "eth-sig-util": "^1.1.1", "eth-simple-keyring": "^1.1.0", + "ethereum-ens": "^0.5.0", "ethereumjs-tx": "^1.0.0", "ethereumjs-util": "ethereumjs/ethereumjs-util#ac5d0908536b447083ea422b435da27f26615de9", "ethereumjs-wallet": "^0.6.0", diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js new file mode 100644 index 000000000..f5edab9fd --- /dev/null +++ b/ui/app/components/ens-input.js @@ -0,0 +1,131 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const extend = require('xtend') +const debounce = require('debounce') +const ENS = require('ethereum-ens') +const ensRE = /.+\.eth$/ + +const networkResolvers = { + '3': '112234455c3a32fd11230c42e7bccd4a84e02010', +} + +module.exports = EnsInput + +inherits(EnsInput, Component) +function EnsInput () { + Component.call(this) +} + +EnsInput.prototype.render = function () { + const props = this.props + const opts = extend(props, { + onChange: () => { + const network = this.props.network + let resolverAddress = networkResolvers[network] + if (!resolverAddress) return + + const recipient = document.querySelector('input[name="address"]').value + if (recipient.match(ensRE) === null) { + console.dir(recipient) + return this.setState({ + loadingEns: false, + }) + } + + this.setState({ + loadingEns: true, + }) + this.checkName() + }, + }) + + return h('div', { + style: { width: '100%' }, + }, [ + h('input.large-input', opts), + this.ensIcon(), + ]) +} + +EnsInput.prototype.componentDidMount = function () { + const network = this.props.network + let resolverAddress = networkResolvers[network] + + if (resolverAddress) { + this.ens = new ENS(web3, resolverAddress) + this.checkName = debounce(this.lookupEnsName.bind(this), 200) + } +} + +EnsInput.prototype.lookupEnsName = function () { + if (!this.ens) { + return this.setState({ + loadingEns: false, + ensFailure: true, + hoverText: 'ENS is not supported on your current network.', + }) + } + + const recipient = document.querySelector('input[name="address"]').value + log.info(`ENS attempting to resolve name: ${recipient}`) + this.ens.resolver(recipient).addr() + .then((address) => { + this.setState({ + loadingEns: false, + ensResolution: address, + hoverText: address, + }) + }) + .catch((reason) => { + return this.setState({ + loadingEns: false, + ensFailure: true, + hoverText: reason.message, + }) + }) +} + +EnsInput.prototype.componentDidUpdate = function () { + const state = this.state || {} + const { ensResolution } = state + if (ensResolution && this.props.onChange) { + this.props.onChange(ensResolution) + } +} + +EnsInput.prototype.ensIcon = function (recipient) { + const { hoverText } = this.state || {} + return h('span', { + title: hoverText, + style: { + position: 'absolute', + padding: '9px', + transform: 'translatex(-40px)', + }, + }, this.ensIconContents(recipient)) +} + +EnsInput.prototype.ensIconContents = function (recipient) { + const { loadingEns, ensFailure, ensResolution } = this.state || {} + + if (loadingEns) { + return h('img', { + src: 'images/loading.svg', + style: { + width: '30px', + height: '30px', + }, + }) + } + + if (ensFailure) { + return h('i.fa.fa-warning.fa-lg.warning') + } + + if (ensResolution) { + return h('i.fa.fa-check-circle.fa-lg', { + style: { color: 'green' }, + }) + } +} diff --git a/ui/app/send.js b/ui/app/send.js index 581e3afa0..a281a5fcf 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -9,6 +9,7 @@ const numericBalance = require('./util').numericBalance const addressSummary = require('./util').addressSummary const isHex = require('./util').isHex const EthBalance = require('./components/eth-balance') +const EnsInput = require('./components/ens-input') const ethUtil = require('ethereumjs-util') module.exports = connect(mapStateToProps)(SendTransactionScreen) @@ -18,6 +19,7 @@ function mapStateToProps (state) { accounts: state.metamask.accounts, identities: state.metamask.identities, warning: state.appState.warning, + network: state.metamask.network, } result.error = result.warning && result.warning.split('.')[0] @@ -41,6 +43,7 @@ SendTransactionScreen.prototype.render = function () { var address = state.address var account = state.account var identity = state.identity + var network = state.network return ( @@ -145,12 +148,11 @@ SendTransactionScreen.prototype.render = function () { // 'to' field h('section.flex-row.flex-center', [ - h('input.large-input', { + h(EnsInput, { name: 'address', placeholder: 'Recipient Address', - dataset: { - persistentFormId: 'recipient-address', - }, + onChange: this.recipientDidChange.bind(this), + network, }), ]), @@ -220,8 +222,13 @@ SendTransactionScreen.prototype.back = function () { this.props.dispatch(actions.backToAccountDetail(address)) } +SendTransactionScreen.prototype.recipientDidChange = function (recipient) { + this.setState({ recipient }) +} + SendTransactionScreen.prototype.onSubmit = function () { - const recipient = document.querySelector('input[name="address"]').value + const state = this.state || {} + const recipient = state.recipient || document.querySelector('input[name="address"]').value const input = document.querySelector('input[name="amount"]').value const value = util.normalizeEthStringToWei(input) const txData = document.querySelector('input[name="txData"]').value From 42e4a0621b17006a61ebfbe057b51f70091e3d55 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 8 Mar 2017 15:37:37 -0800 Subject: [PATCH 3/4] Add ENS click to copy Also bump ethjs-ens version to get proper error for unregistered names. --- package.json | 2 +- ui/app/components/ens-input.js | 17 ++++++++--------- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index a03f8a38d..96d58fa1b 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "ethereumjs-tx": "^1.0.0", "ethereumjs-util": "ethereumjs/ethereumjs-util#ac5d0908536b447083ea422b435da27f26615de9", "ethereumjs-wallet": "^0.6.0", - "ethjs-ens": "^1.0.1", + "ethjs-ens": "^1.0.2", "express": "^4.14.0", "extension-link-enabler": "^1.0.0", "extensionizer": "^1.0.0", diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js index f018cc632..ffc4eab4a 100644 --- a/ui/app/components/ens-input.js +++ b/ui/app/components/ens-input.js @@ -3,6 +3,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const extend = require('xtend') const debounce = require('debounce') +const copyToClipboard = require('copy-to-clipboard') const ENS = require('ethjs-ens') const ensRE = /.+\.eth$/ @@ -27,7 +28,6 @@ EnsInput.prototype.render = function () { const recipient = document.querySelector('input[name="address"]').value if (recipient.match(ensRE) === null) { - console.dir(recipient) return this.setState({ loadingEns: false, ensResolution: null, @@ -76,20 +76,15 @@ EnsInput.prototype.lookupEnsName = function () { log.info(`ENS attempting to resolve name: ${recipient}`) this.ens.lookup(recipient.trim()) .then((address) => { - console.log('ens called back with ' + address) - if (address !== ensResolution) { this.setState({ loadingEns: false, ensResolution: address, - hoverText: address, + hoverText: address + '\nClick to Copy', }) } }) .catch((reason) => { - console.log('ens threw error: ' + reason.message) - console.trace(reason) - debugger return this.setState({ loadingEns: false, ensFailure: true, @@ -103,7 +98,6 @@ EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) { const { ensResolution } = state if (ensResolution && this.props.onChange && ensResolution !== prevState.ensResolution) { - console.log('Firing on change to parent') this.props.onChange(ensResolution) } } @@ -139,8 +133,13 @@ EnsInput.prototype.ensIconContents = function (recipient) { } if (ensResolution) { - return h('i.fa.fa-check-circle.fa-lg', { + return h('i.fa.fa-check-circle.fa-lg.cursor-pointer', { style: { color: 'green' }, + onClick: (event) => { + event.preventDefault() + event.stopPropagation() + copyToClipboard(ensResolution) + }, }) } } From ea59125ce1219d49fbfa517c0608a4ab2ffb863a Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 8 Mar 2017 15:48:18 -0800 Subject: [PATCH 4/4] Bump changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c0ba9b0b0..0f070d9a9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## Current Master +- Allow sending to ENS names in send form on Ropsten. + ## 3.4.0 2017-3-8 - Add two most recently used custom RPCs to network dropdown menu.