diff options
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/app/components/ens-input.js | 145 | ||||
| -rw-r--r-- | ui/app/conf-tx.js | 2 | ||||
| -rw-r--r-- | ui/app/send.js | 17 |
3 files changed, 158 insertions, 6 deletions
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js new file mode 100644 index 000000000..ffc4eab4a --- /dev/null +++ b/ui/app/components/ens-input.js @@ -0,0 +1,145 @@ +const Component = require('react').Component +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 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) { + return this.setState({ + loadingEns: false, + ensResolution: null, + ensFailure: null, + }) + } + + 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) { + const provider = web3.currentProvider + this.ens = new ENS({ provider, network }) + this.checkName = debounce(this.lookupEnsName.bind(this), 200) + } +} + +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 !== ensResolution) { + this.setState({ + loadingEns: false, + ensResolution: address, + hoverText: address + '\nClick to Copy', + }) + } + }) + .catch((reason) => { + return this.setState({ + loadingEns: false, + ensFailure: true, + hoverText: reason.message, + }) + }) +} + +EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) { + const state = this.state || {} + const { ensResolution } = state + if (ensResolution && this.props.onChange && + ensResolution !== prevState.ensResolution) { + 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', + transform: 'translateY(-6px)', + }, + }) + } + + if (ensFailure) { + return h('i.fa.fa-warning.fa-lg.warning') + } + + if (ensResolution) { + return h('i.fa.fa-check-circle.fa-lg.cursor-pointer', { + style: { color: 'green' }, + onClick: (event) => { + event.preventDefault() + event.stopPropagation() + copyToClipboard(ensResolution) + }, + }) + } +} diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 7e93ea29f..07985094c 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -49,7 +49,7 @@ ConfirmTxScreen.prototype.render = function () { var isNotification = isPopupOrNotification() === 'notification' log.info(`rendering a combined ${unconfTxList.length} unconf msg & txs`) - if (unconfTxList.length === 0) return h(Loading) + if (unconfTxList.length === 0) return h(Loading, { isLoading: true }) return ( diff --git a/ui/app/send.js b/ui/app/send.js index 581e3afa0..a281a5fcf 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -9,6 +9,7 @@ const numericBalance = require('./util').numericBalance const addressSummary = require('./util').addressSummary const isHex = require('./util').isHex const EthBalance = require('./components/eth-balance') +const EnsInput = require('./components/ens-input') const ethUtil = require('ethereumjs-util') module.exports = connect(mapStateToProps)(SendTransactionScreen) @@ -18,6 +19,7 @@ function mapStateToProps (state) { accounts: state.metamask.accounts, identities: state.metamask.identities, warning: state.appState.warning, + network: state.metamask.network, } result.error = result.warning && result.warning.split('.')[0] @@ -41,6 +43,7 @@ SendTransactionScreen.prototype.render = function () { var address = state.address var account = state.account var identity = state.identity + var network = state.network return ( @@ -145,12 +148,11 @@ SendTransactionScreen.prototype.render = function () { // 'to' field h('section.flex-row.flex-center', [ - h('input.large-input', { + h(EnsInput, { name: 'address', placeholder: 'Recipient Address', - dataset: { - persistentFormId: 'recipient-address', - }, + onChange: this.recipientDidChange.bind(this), + network, }), ]), @@ -220,8 +222,13 @@ SendTransactionScreen.prototype.back = function () { this.props.dispatch(actions.backToAccountDetail(address)) } +SendTransactionScreen.prototype.recipientDidChange = function (recipient) { + this.setState({ recipient }) +} + SendTransactionScreen.prototype.onSubmit = function () { - const recipient = document.querySelector('input[name="address"]').value + const state = this.state || {} + const recipient = state.recipient || document.querySelector('input[name="address"]').value const input = document.querySelector('input[name="amount"]').value const value = util.normalizeEthStringToWei(input) const txData = document.querySelector('input[name="txData"]').value |