Merge pull request #6606 from industral/issue-5524

Improve ENS Address Input
feature/default_network_editable
Thomas Huang 6 years ago committed by GitHub
commit cb584a6ce5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 14
      ui/app/components/app/ens-input.js
  2. 38
      ui/app/css/itcss/components/send.scss
  3. 21
      ui/app/pages/send/to-autocomplete/to-autocomplete.js

@ -41,12 +41,15 @@ EnsInput.prototype.onChange = function (recipient) {
ensResolution: null,
ensFailure: null,
toError: null,
recipient,
})
}
this.setState({
loadingEns: true,
recipient,
})
this.checkName(recipient)
}
@ -56,6 +59,7 @@ EnsInput.prototype.render = function () {
list: 'addresses',
onChange: this.onChange.bind(this),
qrScanner: true,
recipient: (this.state || {}).recipient,
})
return h('div', {
style: { width: '100%', position: 'relative' },
@ -79,19 +83,21 @@ EnsInput.prototype.componentDidMount = function () {
EnsInput.prototype.lookupEnsName = function (recipient) {
const { ensResolution } = this.state
recipient = recipient.trim()
log.info(`ENS attempting to resolve name: ${recipient}`)
this.ens.lookup(recipient.trim())
this.ens.lookup(recipient)
.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(),
nickname: recipient,
hoverText: address + '\n' + this.context.t('clickCopy'),
ensFailure: false,
toError: null,
recipient,
})
}
})
@ -101,11 +107,11 @@ EnsInput.prototype.lookupEnsName = function (recipient) {
ensResolution: recipient,
ensFailure: true,
toError: null,
recipient: 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
@ -128,7 +134,7 @@ EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) {
}
if (prevState && ensResolution && this.props.onChange &&
ensResolution !== prevState.ensResolution) {
this.props.onChange({ toAddress: ensResolution, nickname, toError: state.toError, toWarning: state.toWarning })
this.props.onChange({ toAddress: ensResolution, recipient: state.recipient, nickname, toError: state.toError, toWarning: state.toWarning })
}
}

@ -763,7 +763,43 @@
}
}
&__to-autocomplete, &__memo-text-area, &__hex-data {
&__to-autocomplete {
display: flex;
flex-direction: column;
z-index: 1025;
position: relative;
height: 54px;
width: 100%;
border: 1px solid $alto;
border-radius: 4px;
background-color: $white;
color: $tundora;
padding: 0 10px;
font-family: Roboto;
line-height: 21px;
&__input {
font-size: 16px;
height: 100%;
border: none;
}
&__resolved {
font-size: 12px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
height: 30px;
cursor: pointer;
+ .send-v2__to-autocomplete__qr-code {
top: 2px;
right: 0;
}
}
}
&__memo-text-area, &__hex-data {
&__input {
z-index: 1025;
position: relative;

@ -1,6 +1,7 @@
const Component = require('react').Component
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const copyToClipboard = require('copy-to-clipboard')
const inherits = require('util').inherits
const AccountListItem = require('../account-list-item/account-list-item.component').default
const connect = require('react-redux').connect
@ -93,24 +94,34 @@ ToAutoComplete.prototype.componentDidUpdate = function (nextProps) {
ToAutoComplete.prototype.render = function () {
const {
to,
recipient,
dropdownOpen,
onChange,
inError,
qrScanner,
} = this.props
return h('div.send-v2__to-autocomplete', {}, [
const isRecipientToDiff = recipient && recipient !== to
return h('div.send-v2__to-autocomplete', {style: {
borderColor: inError ? 'red' : null,
}}, [
h(`input.send-v2__to-autocomplete__input${qrScanner ? '.with-qr' : ''}`, {
placeholder: this.context.t('recipientAddress'),
className: inError ? `send-v2__error-border` : '',
value: to,
value: recipient,
onChange: event => onChange(event.target.value),
onFocus: event => this.handleInputEvent(event),
style: {
borderColor: inError ? 'red' : null,
},
}),
isRecipientToDiff && h(Tooltip, {title: this.context.t('copyToClipboard')},
h('div.send-v2__to-autocomplete__resolved', {
onClick: (event) => {
event.preventDefault()
event.stopPropagation()
copyToClipboard(to)
},
}, to)),
qrScanner && h(Tooltip, {
title: this.context.t('scanQrCode'),
position: 'bottom',

Loading…
Cancel
Save