const Component = require('react').Component const PropTypes = require('prop-types') 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 networkMap = require('ethjs-ens/lib/network-map.json') const ensRE = /.+\..+$/ const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' const connect = require('react-redux').connect const ToAutoComplete = require('./send/to-autocomplete').default const log = require('loglevel') const { isValidENSAddress } = require('../util') EnsInput.contextTypes = { t: PropTypes.func, } module.exports = connect()(EnsInput) inherits(EnsInput, Component) function EnsInput () { Component.call(this) } EnsInput.prototype.onChange = function (recipient) { const network = this.props.network const networkHasEnsSupport = getNetworkEnsSupport(network) this.props.onChange({ toAddress: recipient }) if (!networkHasEnsSupport) return if (recipient.match(ensRE) === null) { return this.setState({ loadingEns: false, ensResolution: null, ensFailure: null, toError: null, }) } this.setState({ loadingEns: true, }) this.checkName(recipient) } EnsInput.prototype.render = function () { const props = this.props const opts = extend(props, { list: 'addresses', onChange: this.onChange.bind(this), qrScanner: true, }) return h('div', { style: { width: '100%', position: 'relative' }, }, [ h(ToAutoComplete, { ...opts }), this.ensIcon(), ]) } EnsInput.prototype.componentDidMount = function () { const network = this.props.network const networkHasEnsSupport = getNetworkEnsSupport(network) this.setState({ ensResolution: ZERO_ADDRESS }) if (networkHasEnsSupport) { const provider = global.ethereumProvider this.ens = new ENS({ provider, network }) this.checkName = debounce(this.lookupEnsName.bind(this), 200) } } EnsInput.prototype.lookupEnsName = function (recipient) { const { ensResolution } = this.state log.info(`ENS attempting to resolve name: ${recipient}`) this.ens.lookup(recipient.trim()) .then((address) => { if (address === ZERO_ADDRESS) throw new Error(this.context.t('noAddressForName')) if (address !== ensResolution) { this.setState({ loadingEns: false, ensResolution: address, nickname: recipient.trim(), hoverText: address + '\n' + this.context.t('clickCopy'), ensFailure: false, toError: null, }) } }) .catch((reason) => { const setStateObj = { loadingEns: false, ensResolution: recipient, ensFailure: true, toError: null, } if (isValidENSAddress(recipient) && reason.message === 'ENS name not defined.') { setStateObj.hoverText = this.context.t('ensNameNotFound') setStateObj.toError = 'ensNameNotFound' setStateObj.ensFailure = false } else { log.error(reason) setStateObj.hoverText = reason.message } return this.setState(setStateObj) }) } EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) { const state = this.state || {} const ensResolution = state.ensResolution // 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 (prevProps.network !== this.props.network) { const provider = global.ethereumProvider this.ens = new ENS({ provider, network: this.props.network }) this.onChange(ensResolution) } if (prevState && ensResolution && this.props.onChange && ensResolution !== prevState.ensResolution) { this.props.onChange({ toAddress: ensResolution, nickname, toError: state.toError, toWarning: state.toWarning }) } } EnsInput.prototype.ensIcon = function (recipient) { const { hoverText } = this.state || {} return h('span.#ensIcon', { title: hoverText, style: { position: 'absolute', top: '16px', left: '-25px', }, }, this.ensIconContents(recipient)) } EnsInput.prototype.ensIconContents = function (recipient) { const { loadingEns, ensFailure, ensResolution, toError } = this.state || { ensResolution: ZERO_ADDRESS } if (toError) return if (loadingEns) { return h('img', { src: 'images/loading.svg', style: { width: '30px', height: '30px', transform: 'translateY(-6px)', }, }) } if (ensFailure) { return h('i.fa.fa-warning.fa-lg.warning') } if (ensResolution && (ensResolution !== ZERO_ADDRESS)) { return h('i.fa.fa-check-circle.fa-lg.cursor-pointer', { style: { color: 'green' }, onClick: (event) => { event.preventDefault() event.stopPropagation() copyToClipboard(ensResolution) }, }) } } function getNetworkEnsSupport (network) { return Boolean(networkMap[network]) }