fix (cherry-pick): Enable Save button on Add Contact page for address input

ui/pages/settings/contact-list-tab/add-contact/add-contact.component.js

@@ -3,15 +3,15 @@ import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
 import TextField from '../../../../components/ui/text-field';
 import { CONTACT_LIST_ROUTE } from '../../../../helpers/constants/routes';
-import { IS_FLASK, isValidDomainName } from '../../../../helpers/utils/util';
+import { isValidDomainName } from '../../../../helpers/utils/util';
 import DomainInput from '../../../confirmations/send/send-content/add-recipient/domain-input';
 import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer';
 import {
   isBurnAddress,
   isValidHexAddress,
 } from '../../../../../shared/modules/hexstring-utils';
 import { INVALID_RECIPIENT_ADDRESS_ERROR } from '../../../confirmations/send/send.constants';
-import { DomainInputResolutionCell } from '../../../../components/multichain/pages/send/components/domain-input-resolution-cell';
+import { DomainInputResolutionCell } from '../../../../components/multichain/pages/send/components';
 
 export default class AddContact extends PureComponent {
   static contextTypes = {
@@ -68,8 +68,10 @@ export default class AddContact extends PureComponent {
       isValidHexAddress(input, { mixedCaseUseChecksum: true });
     const validEnsAddress = isValidDomainName(input);
 
-    if (!IS_FLASK && !validEnsAddress && !valid) {
+    if (!validEnsAddress && !valid) {
       this.setState({ error: INVALID_RECIPIENT_ADDRESS_ERROR });
+    } else {
+      this.setState({ error: null });
     }
   };
 
@@ -104,6 +106,10 @@ export default class AddContact extends PureComponent {
       this.props;
 
     const errorToRender = domainError || this.state.error;
+    const newAddress = this.state.selectedAddress || this.state.input;
+    const validAddress =
+      !isBurnAddress(newAddress) &&
+      isValidHexAddress(newAddress, { mixedCaseUseChecksum: true });
 
     return (
       <div className="settings-page__content-row address-book__add-contact">
@@ -150,7 +156,7 @@ export default class AddContact extends PureComponent {
                     domainName={domainName}
                     onClick={() => {
                       this.setState({
-                        selectedAddress: resolvedAddress,
+                        input: resolvedAddress,
                         newName: this.state.newName || domainName,
                       });
                       this.props.resetDomainResolution();
@@ -171,15 +177,10 @@ export default class AddContact extends PureComponent {
         <PageContainerFooter
           cancelText={this.context.t('cancel')}
           disabled={Boolean(
-            this.state.error ||
-              !this.state.selectedAddress ||
-              !this.state.newName.trim(),
+            this.state.error || !validAddress || !this.state.newName.trim(),
           )}
           onSubmit={async () => {
-            await addToAddressBook(
-              this.state.selectedAddress,
-              this.state.newName,
-            );
+            await addToAddressBook(newAddress, this.state.newName);
             history.push(CONTACT_LIST_ROUTE);
           }}
           onCancel={() => {

ui/pages/settings/contact-list-tab/add-contact/add-contact.test.js

@@ -47,7 +47,7 @@ describe('AddContact component', () => {
     fireEvent.change(input, { target: { value: 'invalid address' } });
     setTimeout(() => {
       expect(getByText('Recipient address is invalid')).toBeInTheDocument();
-    }, 100);
+    }, 600);
   });
 
   it('should get disabled submit button when username field is empty', () => {
@@ -60,4 +60,47 @@ describe('AddContact component', () => {
     const saveButton = getByText('Save');
     expect(saveButton).toBeDisabled();
   });
+
+  it('should enable submit button when input is valid', () => {
+    const store = configureMockStore(middleware)(state);
+    const { getByText, getByTestId } = renderWithProvider(
+      <AddContact {...props} />,
+      store,
+    );
+
+    const nameInput = document.getElementById('nickname');
+    fireEvent.change(nameInput, { target: { value: 'friend' } });
+
+    const addressInput = getByTestId('ens-input');
+    fireEvent.change(addressInput, {
+      target: { value: '0x1234Bf0BBa69C63E2657cF94693cC4A907085678' },
+    });
+
+    const saveButton = getByText('Save');
+    expect(saveButton).not.toBeDisabled();
+  });
+
+  it('should disable submit button when input is not a valid address', () => {
+    const store = configureMockStore(middleware)(state);
+    const { getByText, getByTestId } = renderWithProvider(
+      <AddContact {...props} />,
+      store,
+    );
+
+    const nameInput = document.getElementById('nickname');
+    fireEvent.change(nameInput, { target: { value: 'friend' } });
+
+    const addressInput = getByTestId('ens-input');
+    fireEvent.change(addressInput, {
+      // invalid length
+      target: { value: '0x1234' },
+    });
+    expect(getByText('Save')).toBeDisabled();
+
+    fireEvent.change(addressInput, {
+      // wrong checksum
+      target: { value: '0x1234bf0bba69C63E2657cF94693cC4A907085678' },
+    });
+    expect(getByText('Save')).toBeDisabled();
+  });
 });