path: root/ui/app/components/ens-input.js

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' },
    })
  }
}