aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/ens-input.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/ens-input.js')
-rw-r--r--ui/app/components/ens-input.js131
1 files changed, 131 insertions, 0 deletions
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
new file mode 100644
index 000000000..f5edab9fd
--- /dev/null
+++ b/ui/app/components/ens-input.js
@@ -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' },
+ })
+ }
+}