2017-03-01 09:23:49 +01:00
|
|
|
const Component = require('react').Component
|
|
|
|
const h = require('react-hyperscript')
|
|
|
|
const inherits = require('util').inherits
|
|
|
|
const extend = require('xtend')
|
|
|
|
const debounce = require('debounce')
|
2017-03-09 00:37:37 +01:00
|
|
|
const copyToClipboard = require('copy-to-clipboard')
|
2017-03-09 00:19:33 +01:00
|
|
|
const ENS = require('ethjs-ens')
|
2017-05-09 20:28:39 +02:00
|
|
|
const networkMap = require('ethjs-ens/lib/network-map.json')
|
2017-03-01 09:23:49 +01:00
|
|
|
const ensRE = /.+\.eth$/
|
|
|
|
|
|
|
|
|
|
|
|
module.exports = EnsInput
|
|
|
|
|
|
|
|
inherits(EnsInput, Component)
|
|
|
|
function EnsInput () {
|
|
|
|
Component.call(this)
|
|
|
|
}
|
|
|
|
|
|
|
|
EnsInput.prototype.render = function () {
|
|
|
|
const props = this.props
|
|
|
|
const opts = extend(props, {
|
2017-03-09 20:31:00 +01:00
|
|
|
list: 'addresses',
|
2017-03-01 09:23:49 +01:00
|
|
|
onChange: () => {
|
2017-06-05 22:00:15 +02:00
|
|
|
this.setState({ ensResolution: '0x0000000000000000000000000000000000000000' })
|
2017-03-01 09:23:49 +01:00
|
|
|
const network = this.props.network
|
2017-05-09 20:28:39 +02:00
|
|
|
const networkHasEnsSupport = getNetworkEnsSupport(network)
|
|
|
|
if (!networkHasEnsSupport) return
|
2017-03-01 09:23:49 +01:00
|
|
|
|
|
|
|
const recipient = document.querySelector('input[name="address"]').value
|
|
|
|
if (recipient.match(ensRE) === null) {
|
|
|
|
return this.setState({
|
|
|
|
loadingEns: false,
|
2017-03-09 00:19:33 +01:00
|
|
|
ensResolution: null,
|
|
|
|
ensFailure: null,
|
2017-03-01 09:23:49 +01:00
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
loadingEns: true,
|
|
|
|
})
|
|
|
|
this.checkName()
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
return h('div', {
|
|
|
|
style: { width: '100%' },
|
|
|
|
}, [
|
|
|
|
h('input.large-input', opts),
|
2017-03-10 18:34:13 +01:00
|
|
|
// The address book functionality.
|
2017-03-14 22:04:52 +01:00
|
|
|
h('datalist#addresses',
|
2017-03-09 20:31:00 +01:00
|
|
|
[
|
2017-03-10 18:34:13 +01:00
|
|
|
// Corresponds to the addresses owned.
|
2017-03-09 20:31:00 +01:00
|
|
|
Object.keys(props.identities).map((key) => {
|
2017-04-27 06:05:45 +02:00
|
|
|
const identity = props.identities[key]
|
2017-03-09 22:07:38 +01:00
|
|
|
return h('option', {
|
|
|
|
value: identity.address,
|
|
|
|
label: identity.name,
|
|
|
|
})
|
2017-03-09 20:31:00 +01:00
|
|
|
}),
|
2017-03-10 18:34:13 +01:00
|
|
|
// Corresponds to previously sent-to addresses.
|
2017-03-10 00:10:27 +01:00
|
|
|
props.addressBook.map((identity) => {
|
|
|
|
return h('option', {
|
|
|
|
value: identity.address,
|
|
|
|
label: identity.name,
|
2017-05-08 01:44:43 +02:00
|
|
|
key: identity.address,
|
2017-03-10 00:10:27 +01:00
|
|
|
})
|
|
|
|
}),
|
2017-03-09 20:31:00 +01:00
|
|
|
]),
|
2017-03-01 09:23:49 +01:00
|
|
|
this.ensIcon(),
|
|
|
|
])
|
|
|
|
}
|
|
|
|
|
|
|
|
EnsInput.prototype.componentDidMount = function () {
|
|
|
|
const network = this.props.network
|
2017-05-09 20:28:39 +02:00
|
|
|
const networkHasEnsSupport = getNetworkEnsSupport(network)
|
2017-03-01 09:23:49 +01:00
|
|
|
|
2017-05-09 20:28:39 +02:00
|
|
|
if (networkHasEnsSupport) {
|
2017-05-08 21:29:08 +02:00
|
|
|
const provider = global.ethereumProvider
|
2017-03-09 00:19:33 +01:00
|
|
|
this.ens = new ENS({ provider, network })
|
2017-03-01 09:23:49 +01:00
|
|
|
this.checkName = debounce(this.lookupEnsName.bind(this), 200)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
EnsInput.prototype.lookupEnsName = function () {
|
2017-03-09 00:19:33 +01:00
|
|
|
const recipient = document.querySelector('input[name="address"]').value
|
|
|
|
const { ensResolution } = this.state
|
|
|
|
|
2017-03-01 09:23:49 +01:00
|
|
|
if (!this.ens) {
|
|
|
|
return this.setState({
|
|
|
|
loadingEns: false,
|
|
|
|
ensFailure: true,
|
|
|
|
hoverText: 'ENS is not supported on your current network.',
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
log.info(`ENS attempting to resolve name: ${recipient}`)
|
2017-03-09 00:19:33 +01:00
|
|
|
this.ens.lookup(recipient.trim())
|
2017-03-01 09:23:49 +01:00
|
|
|
.then((address) => {
|
2017-06-05 20:40:20 +02:00
|
|
|
if (address === '0x0000000000000000000000000000000000000000') throw new Error('No address has been set for this name.')
|
2017-03-09 00:19:33 +01:00
|
|
|
if (address !== ensResolution) {
|
|
|
|
this.setState({
|
|
|
|
loadingEns: false,
|
|
|
|
ensResolution: address,
|
2017-03-10 00:10:27 +01:00
|
|
|
nickname: recipient.trim(),
|
2017-03-09 00:37:37 +01:00
|
|
|
hoverText: address + '\nClick to Copy',
|
2017-06-05 22:00:15 +02:00
|
|
|
ensFailure: false,
|
2017-03-09 00:19:33 +01:00
|
|
|
})
|
|
|
|
}
|
2017-03-01 09:23:49 +01:00
|
|
|
})
|
|
|
|
.catch((reason) => {
|
2017-03-10 00:10:27 +01:00
|
|
|
log.error(reason)
|
2017-03-01 09:23:49 +01:00
|
|
|
return this.setState({
|
|
|
|
loadingEns: false,
|
2017-06-05 21:37:29 +02:00
|
|
|
ensResolution: '0x0000000000000000000000000000000000000000',
|
2017-03-01 09:23:49 +01:00
|
|
|
ensFailure: true,
|
|
|
|
hoverText: reason.message,
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2017-03-09 00:19:33 +01:00
|
|
|
EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) {
|
2017-03-01 09:23:49 +01:00
|
|
|
const state = this.state || {}
|
2017-03-10 00:10:27 +01:00
|
|
|
const ensResolution = state.ensResolution
|
2017-03-10 18:34:13 +01:00
|
|
|
// If an address is sent without a nickname, meaning not from ENS or from
|
|
|
|
// the user's own accounts, a default of a one-space string is used.
|
2017-03-10 00:10:27 +01:00
|
|
|
const nickname = state.nickname || ' '
|
2017-03-09 00:19:33 +01:00
|
|
|
if (ensResolution && this.props.onChange &&
|
|
|
|
ensResolution !== prevState.ensResolution) {
|
2017-03-10 00:10:27 +01:00
|
|
|
this.props.onChange(ensResolution, nickname)
|
2017-03-01 09:23:49 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
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',
|
2017-03-09 00:19:33 +01:00
|
|
|
transform: 'translateY(-6px)',
|
2017-03-01 09:23:49 +01:00
|
|
|
},
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
if (ensFailure) {
|
|
|
|
return h('i.fa.fa-warning.fa-lg.warning')
|
|
|
|
}
|
|
|
|
|
|
|
|
if (ensResolution) {
|
2017-03-09 00:37:37 +01:00
|
|
|
return h('i.fa.fa-check-circle.fa-lg.cursor-pointer', {
|
2017-03-01 09:23:49 +01:00
|
|
|
style: { color: 'green' },
|
2017-03-09 00:37:37 +01:00
|
|
|
onClick: (event) => {
|
|
|
|
event.preventDefault()
|
|
|
|
event.stopPropagation()
|
|
|
|
copyToClipboard(ensResolution)
|
|
|
|
},
|
2017-03-01 09:23:49 +01:00
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
2017-05-09 20:28:39 +02:00
|
|
|
|
2017-05-16 00:22:49 +02:00
|
|
|
function getNetworkEnsSupport (network) {
|
2017-05-09 20:28:39 +02:00
|
|
|
return Boolean(networkMap[network])
|
2017-05-16 00:22:49 +02:00
|
|
|
}
|
|
|
|
|