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
This commit is contained in:
parent
6f598570d8
commit
69d4aafc3e
|
@ -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",
|
||||
|
|
|
@ -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' },
|
||||
})
|
||||
}
|
||||
}
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue