Add ens resolution to add contact screen in settings

MetaMask · Jul 25, 2019 · fbb2fa9 · fbb2fa9
1 parent 1418145
commit fbb2fa9
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 18 deletions.
diff --git a/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js
@@ -2,8 +2,10 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import TextField from '../../../../components/ui/text-field'
 import { CONTACT_LIST_ROUTE } from '../../../../helpers/constants/routes'
-import { isValidAddress } from '../../../../helpers/utils/util'
+import { isValidAddress, isValidENSAddress } from '../../../../helpers/utils/util'
+import EnsInput from '../../../../pages/send/send-content/add-recipient/ens-input'
 import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer'
+import debounce from 'lodash.debounce'
 
 export default class AddContact extends PureComponent {
 
@@ -14,18 +16,54 @@ export default class AddContact extends PureComponent {
   static propTypes = {
     addToAddressBook: PropTypes.func,
     history: PropTypes.object,
+    scanQrCode: PropTypes.func,
   }
 
   state = {
     nickname: '',
-    address: '',
+    ethAddress: '',
+    ensAddress: '',
     error: '',
+    ensError: '',
+  }
+
+  constructor (props) {
+    super(props)
+    this.dValidate = debounce(this.validate, 1000)
+  }
+
+  validate = address => {
+    const valid = isValidAddress(address)
+    const validEnsAddress = isValidENSAddress(address)
+    if (valid || validEnsAddress || address === '') {
+      this.setState({ error: '', ethAddress: address })
+    } else {
+      this.setState({ error: 'Invalid Address' })
+    }
+  }
+
+  renderInput () {
+    return (
+      <EnsInput
+        className="send__to-row"
+        scanQrCode={_ => { this.props.scanQrCode() }}
+        onChange={this.dValidate}
+        onPaste={text => this.setState({ ethAddress: text })}
+        onReset={() => this.setState({ ethAddress: '', ensAddress: '' })}
+        updateEnsResolution={address => {
+          this.setState({ ensAddress: address, error: '', ensError: '' })
+        }}
+        updateEnsResolutionError={message => this.setState({ ensError: message })}
+      />
+    )
   }
 
   render () {
     const { t } = this.context
     const { history, addToAddressBook } = this.props
 
+    const errorToRender = this.state.ensError || this.state.error
+
     return (
       <div className="settings-page__content-row address-book__add-contact">
         <div className="address-book__add-contact__content">
@@ -47,26 +85,16 @@ export default class AddContact extends PureComponent {
             <div className="address-book__view-contact__group__label">
               { t('ethereumPublicAddress') }
             </div>
-            <TextField
-              type="text"
-              id="address"
-              value={this.state.newAddress}
-              error={this.state.error}
-              onChange={e => this.setState({ newAddress: e.target.value })}
-              fullWidth
-              margin="dense"
-            />
+            { this.renderInput() }
+            { errorToRender && <div className="address-book__add-contact__error">{errorToRender}</div>}
           </div>
         </div>
         <PageContainerFooter
           cancelText={this.context.t('cancel')}
+          disabled={Boolean(this.state.error)}
           onSubmit={() => {
-            if (isValidAddress(this.state.newAddress)) {
-              addToAddressBook(this.state.newAddress, this.state.newName)
-              history.push(CONTACT_LIST_ROUTE)
-            } else {
-              this.setState({ error: 'invalid address' })
-            }
+            addToAddressBook(this.state.ensAddress || this.state.ethAddress, this.state.newName)
+            history.push(CONTACT_LIST_ROUTE)
           }}
           onCancel={() => {
             history.push(CONTACT_LIST_ROUTE)

diff --git a/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.container.js b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.container.js
@@ -2,11 +2,15 @@ import AddContact from './add-contact.component'
 import { compose } from 'recompose'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
-import { addToAddressBook } from '../../../../store/actions'
+import { addToAddressBook, showQrScanner } from '../../../../store/actions'
+import {
+  CONTACT_ADD_ROUTE,
+} from '../../../../helpers/constants/routes'
 
 const mapDispatchToProps = dispatch => {
   return {
     addToAddressBook: (recipient, nickname) => dispatch(addToAddressBook(recipient, nickname)),
+    scanQrCode: () => dispatch(showQrScanner(CONTACT_ADD_ROUTE)),
   }
 }
 

diff --git a/ui/app/pages/settings/contact-list-tab/index.scss b/ui/app/pages/settings/contact-list-tab/index.scss
@@ -98,6 +98,13 @@
       flex: 1 1 auto;
       height: 100%;
     }
+
+    &__error {
+      font-size: 12px;
+      line-height: 12px;
+      left: 8px;
+      color: $red;
+    }
   }
 
   &__my-accounts-button {