diff options
Diffstat (limited to 'ui/app/components/ens-input.js')
-rw-r--r-- | ui/app/components/ens-input.js | 48 |
1 files changed, 24 insertions, 24 deletions
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js index facf29d97..6553053f7 100644 --- a/ui/app/components/ens-input.js +++ b/ui/app/components/ens-input.js @@ -5,11 +5,10 @@ const extend = require('xtend') const debounce = require('debounce') const copyToClipboard = require('copy-to-clipboard') const ENS = require('ethjs-ens') -const ensRE = /.+\.eth$/ +const networkMap = require('ethjs-ens/lib/network-map.json') +const ensRE = /.+\..+$/ +const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' -const networkResolvers = { - '3': '112234455c3a32fd11230c42e7bccd4a84e02010', -} module.exports = EnsInput @@ -24,8 +23,8 @@ EnsInput.prototype.render = function () { list: 'addresses', onChange: () => { const network = this.props.network - let resolverAddress = networkResolvers[network] - if (!resolverAddress) return + const networkHasEnsSupport = getNetworkEnsSupport(network) + if (!networkHasEnsSupport) return const recipient = document.querySelector('input[name="address"]').value if (recipient.match(ensRE) === null) { @@ -42,20 +41,20 @@ EnsInput.prototype.render = function () { this.checkName() }, }) - return h('div', { style: { width: '100%' }, }, [ - h('input.large-input', opts), + h('input.large-input.send-screen-input', opts), // The address book functionality. h('datalist#addresses', [ // Corresponds to the addresses owned. Object.keys(props.identities).map((key) => { - let identity = props.identities[key] + const identity = props.identities[key] return h('option', { value: identity.address, label: identity.name, + key: identity.address, }) }), // Corresponds to previously sent-to addresses. @@ -63,6 +62,7 @@ EnsInput.prototype.render = function () { return h('option', { value: identity.address, label: identity.name, + key: identity.address, }) }), ]), @@ -72,10 +72,11 @@ EnsInput.prototype.render = function () { EnsInput.prototype.componentDidMount = function () { const network = this.props.network - let resolverAddress = networkResolvers[network] + const networkHasEnsSupport = getNetworkEnsSupport(network) + this.setState({ ensResolution: ZERO_ADDRESS }) - if (resolverAddress) { - const provider = web3.currentProvider + if (networkHasEnsSupport) { + const provider = global.ethereumProvider this.ens = new ENS({ provider, network }) this.checkName = debounce(this.lookupEnsName.bind(this), 200) } @@ -85,23 +86,17 @@ EnsInput.prototype.lookupEnsName = function () { const recipient = document.querySelector('input[name="address"]').value const { ensResolution } = this.state - 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}`) this.ens.lookup(recipient.trim()) .then((address) => { + if (address === ZERO_ADDRESS) throw new Error('No address has been set for this name.') if (address !== ensResolution) { this.setState({ loadingEns: false, ensResolution: address, nickname: recipient.trim(), hoverText: address + '\nClick to Copy', + ensFailure: false, }) } }) @@ -109,6 +104,7 @@ EnsInput.prototype.lookupEnsName = function () { log.error(reason) return this.setState({ loadingEns: false, + ensResolution: ZERO_ADDRESS, ensFailure: true, hoverText: reason.message, }) @@ -121,7 +117,7 @@ EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) { // 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. const nickname = state.nickname || ' ' - if (ensResolution && this.props.onChange && + if (prevState && ensResolution && this.props.onChange && ensResolution !== prevState.ensResolution) { this.props.onChange(ensResolution, nickname) } @@ -129,7 +125,7 @@ EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) { EnsInput.prototype.ensIcon = function (recipient) { const { hoverText } = this.state || {} - return h('span', { + return h('span.#ensIcon', { title: hoverText, style: { position: 'absolute', @@ -140,7 +136,7 @@ EnsInput.prototype.ensIcon = function (recipient) { } EnsInput.prototype.ensIconContents = function (recipient) { - const { loadingEns, ensFailure, ensResolution } = this.state || {} + const { loadingEns, ensFailure, ensResolution } = this.state || { ensResolution: ZERO_ADDRESS} if (loadingEns) { return h('img', { @@ -157,7 +153,7 @@ EnsInput.prototype.ensIconContents = function (recipient) { return h('i.fa.fa-warning.fa-lg.warning') } - if (ensResolution) { + if (ensResolution && (ensResolution !== ZERO_ADDRESS)) { return h('i.fa.fa-check-circle.fa-lg.cursor-pointer', { style: { color: 'green' }, onClick: (event) => { @@ -168,3 +164,7 @@ EnsInput.prototype.ensIconContents = function (recipient) { }) } } + +function getNetworkEnsSupport (network) { + return Boolean(networkMap[network]) +} |