diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | ui/app/components/ens-input.js | 131 | ||||
| -rw-r--r-- | ui/app/send.js | 17 |
3 files changed, 144 insertions, 5 deletions
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 |