Address book send plus contact list (#6914)

* Style Send Header

* Move Send to-row to send view and restyle

* Add "Recents" group to select recipient view

* Rename SendToRow to AddRecipient

* Basic UI and Layout

* New ENSInput component

* wip - fuzzy search for input

* small refactor

* Add Dialog

* contact list initial

* initial error on invalid address

* clean up edit

* Click to open modal

* Create AddToAddressBookModal component

* Modal styling and layout

* modal i18n

* Add to Addressbook

* ens wip

* ens wip

* ENS Resolution

* Reset input

* Send to explicit address

* Happy Path Complete

* Add back error checking

* Reset send-to when emptying input

* Add back warning object

* Fix linter

* Fix unit test #1 - fix import paths

* Remove dead tests

* One more to go

* Fix all unit tests

* add unit test for reducers and actions

* test rendering AddRecipient

* Add tests for dialog boxes in AddRecipient

* Add test for validating

* Fix linter

* Fix e2e tests

* Token send e2e fix

* Style View Contact

* Style edit-contact

* Fix e2e

* Fix from-import-beta-ui e2e spec

* Make section header say "add recipient” by default

* Auto-focus add recipient input

* Update placeholder text

* Update input title font size

* Auto advance to next step if user paste a valid address

* Ellipsify address when recipient is selected

* Fix app header background color on desktop

* Give each form row a margin of 16px

* Use .container/.component naming pattern for ens-input

* Auto-focus on input when add to addressbook modal is opened; Save on Enter

* Fix and add unit test

* Fix selectors name in e2e tests

* Correct e2e test token amount for address-book-send changes

* Adds e2e test for editing a transaction

* Delete test/integration/lib/send-new-ui.js

* Add tests for amount max button and high value error on send screen to test/e2e/metamask-ui.spec.js

* lint and revert to address as object keys

* add chainId based on current network to address book entry

* fix test

* only display contacts for the current network

* Improve ENS message when not found on current network

* Add error to indicate when network does not support ENS

* bump gaba

* address book, resolve comments

* Move contact-list to its own component

* De-duplicate getaddressbook selector and refactor name selection logic in contact-list-tab/

* Use contact-list component in contact-list-tab.component (i.e. in settings)

* Improve/fix settings headers for popup and browser views

* Lint fixes related to address book updates

* Add 'My accounts' page to settings address book

* Update add new contact button in settings to match floating circular design

* Improve styles of view contact page

* Improve styles and labels of the add-contact.component

* Further lint fixes related to address book updates

* Update unit tests as per address book updates

* Ensure that contact list groups are sorted alphabetically

* Refactor settings component to use a container for connection to redux; allow display of addressbook name in settings header

* Decouple ens-input.component from send context

* Add ens resolution to add contact screen in settings

* Switching networks when an ens address is shown on send form removes the ens address.

* Resolve send screen search for ensAddress to matching address book entry if it exists

* Show resolved ens icon and address if exists (settings: add-contact.component)

* Make the displayed and copied address in view-contact.component the checksummed address

* Default alias state prop in AddToAddressBookModal to empty string

* Use keyCode to detect enter key in AddToAddressBookModal

* Ensure add-contact component properly updates after QR code detection

* Fix display of all recents after clicking 'Load More' in contact list

* Fix send screen contact searching after network switching

* Code cleanup related to address book changes

* Update unit tests for address book changes

* Update ENS name not found on network message

* Add ens registration error message

* Cancel on edit mode takes user back to view screen

* Adds support for memo to settings contact list view and edit screens

* Modify designs of edit and view contact in popup environment

* Update settings content list UX to show split columns in fullscreen and proper internal navigation

* Correct background address book API usages in UI

4 files changed, 112 insertions, 19 deletions

diff --git a/ui/app/pages/send/tests/send-component.test.js b/ui/app/pages/send/tests/send-component.test.js
index 81955cc1d..5b7cafed5 100644
--- a/ui/app/pages/send/tests/send-component.test.js
+++ b/ui/app/pages/send/tests/send-component.test.js
@@ -5,8 +5,9 @@ import { shallow } from 'enzyme'
 import sinon from 'sinon'
 import timeout from '../../../../lib/test-timeout'
 
+import AddRecipient from '../send-content/add-recipient/add-recipient.container'
 import SendHeader from '../send-header/send-header.container'
-import SendContent from '../send-content/send-content.component'
+import SendContent from '../send-content/send-content.container'
 import SendFooter from '../send-footer/send-footer.container'
 
 const mockBasicGasEstimates = {
@@ -20,6 +21,7 @@ const propsMethodSpies = {
   resetSendState: sinon.spy(),
   fetchBasicGasEstimates: sinon.stub().returns(Promise.resolve(mockBasicGasEstimates)),
   fetchGasEstimates: sinon.spy(),
+  updateToNicknameIfNecessary: sinon.spy(),
 }
 const utilsMethodStubs = {
   getAmountErrorObject: sinon.stub().returns({ amount: 'mockAmountError' }),
@@ -63,6 +65,7 @@ describe('Send Component', function () {
       updateSendErrors={propsMethodSpies.updateSendErrors}
       updateSendTokenBalance={propsMethodSpies.updateSendTokenBalance}
       resetSendState={propsMethodSpies.resetSendState}
+      updateToNicknameIfNecessary={propsMethodSpies.updateToNicknameIfNecessary}
     />)
   })
 
@@ -332,13 +335,18 @@ describe('Send Component', function () {
       assert.equal(wrapper.find('.page-container').length, 1)
     })
 
-    it('should render SendHeader, SendContent and SendFooter', () => {
+    it('should render SendHeader and AddRecipient', () => {
       assert.equal(wrapper.find(SendHeader).length, 1)
-      assert.equal(wrapper.find(SendContent).length, 1)
-      assert.equal(wrapper.find(SendFooter).length, 1)
+      assert.equal(wrapper.find(AddRecipient).length, 1)
     })
 
     it('should pass the history prop to SendHeader and SendFooter', () => {
+      wrapper.setProps({
+        to: '0x80F061544cC398520615B5d3e7A3BedD70cd4510',
+      })
+      assert.equal(wrapper.find(SendHeader).length, 1)
+      assert.equal(wrapper.find(SendContent).length, 1)
+      assert.equal(wrapper.find(SendFooter).length, 1)
       assert.deepEqual(
         wrapper.find(SendFooter).props(),
         {
@@ -348,7 +356,93 @@ describe('Send Component', function () {
     })
 
     it('should pass showHexData to SendContent', () => {
+      wrapper.setProps({
+        to: '0x80F061544cC398520615B5d3e7A3BedD70cd4510',
+      })
       assert.equal(wrapper.find(SendContent).props().showHexData, true)
     })
   })
+
+  describe('validate when input change', () => {
+    let clock
+
+    beforeEach(() => {
+      clock = sinon.useFakeTimers()
+    })
+
+    afterEach(() => {
+      clock.restore()
+    })
+
+    it('should validate when input changes', () => {
+      const instance = wrapper.instance()
+      instance.onRecipientInputChange('0x80F061544cC398520615B5d3e7A3BedD70cd4510')
+
+      assert.deepEqual(instance.state, {
+        query: '0x80F061544cC398520615B5d3e7A3BedD70cd4510',
+        toError: null,
+        toWarning: null,
+      })
+    })
+
+    it('should validate when input changes and has error', () => {
+      const instance = wrapper.instance()
+      instance.onRecipientInputChange('0x80F061544cC398520615B5d3e7a3BedD70cd4510')
+
+      clock.tick(1001)
+      assert.deepEqual(instance.state, {
+        query: '0x80F061544cC398520615B5d3e7a3BedD70cd4510',
+        toError: 'invalidAddressRecipient',
+        toWarning: null,
+      })
+    })
+
+    it('should validate when input changes and has error', () => {
+      wrapper.setProps({ network: 'bad' })
+      const instance = wrapper.instance()
+      instance.onRecipientInputChange('0x80F061544cC398520615B5d3e7a3BedD70cd4510')
+
+      clock.tick(1001)
+      assert.deepEqual(instance.state, {
+        query: '0x80F061544cC398520615B5d3e7a3BedD70cd4510',
+        toError: 'invalidAddressRecipientNotEthNetwork',
+        toWarning: null,
+      })
+    })
+
+    it('should synchronously validate when input changes to ""', () => {
+      wrapper.setProps({ network: 'bad' })
+      const instance = wrapper.instance()
+      instance.onRecipientInputChange('0x80F061544cC398520615B5d3e7a3BedD70cd4510')
+
+      clock.tick(1001)
+      assert.deepEqual(instance.state, {
+        query: '0x80F061544cC398520615B5d3e7a3BedD70cd4510',
+        toError: 'invalidAddressRecipientNotEthNetwork',
+        toWarning: null,
+      })
+
+      instance.onRecipientInputChange('')
+      assert.deepEqual(instance.state, {
+        query: '',
+        toError: '',
+        toWarning: '',
+      })
+    })
+
+    it('should warn when send to a known token contract address', () => {
+      wrapper.setProps({
+        selectedToken: '0x888',
+      })
+      const instance = wrapper.instance()
+      instance.onRecipientInputChange('0x13cb85823f78Cff38f0B0E90D3e975b8CB3AAd64')
+
+      clock.tick(1001)
+      assert.deepEqual(instance.state, {
+        query: '0x13cb85823f78Cff38f0B0E90D3e975b8CB3AAd64',
+        toError: null,
+        toWarning: 'knownAddressRecipient',
+      })
+    })
+  })
 })
diff --git a/ui/app/pages/send/tests/send-container.test.js b/ui/app/pages/send/tests/send-container.test.js
index 131c42f59..f4142bc2d 100644
--- a/ui/app/pages/send/tests/send-container.test.js
+++ b/ui/app/pages/send/tests/send-container.test.js
@@ -41,12 +41,19 @@ proxyquire('../send.container.js', {
     getSendHexDataFeatureFlagState: (s) => `mockSendHexDataFeatureFlagState:${s}`,
     getSendAmount: (s) => `mockAmount:${s}`,
     getSendTo: (s) => `mockTo:${s}`,
+    getSendToNickname: (s) => `mockToNickname:${s}`,
     getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`,
     getSendFromObject: (s) => `mockFrom:${s}`,
     getTokenBalance: (s) => `mockTokenBalance:${s}`,
     getQrCodeData: (s) => `mockQrCodeData:${s}`,
+    getSendEnsResolution: (s) => `mockSendEnsResolution:${s}`,
+    getSendEnsResolutionError: (s) => `mockSendEnsResolutionError:${s}`,
+  },
+  './send-content/add-recipient/add-recipient.selectors': {
+    getTokens: s => `mockTokens:${s}`,
   },
   '../../selectors/selectors': {
+    getAddressBook: (s) => `mockAddressBook:${s}`,
     getSelectedAddress: (s) => `mockSelectedAddress:${s}`,
   },
   '../../store/actions': actionSpies,
@@ -83,6 +90,11 @@ describe('send container', () => {
         tokenContract: 'mockTokenContract:mockState',
         tokenToFiatRate: 'mockTokenToFiatRate:mockState',
         qrCodeData: 'mockQrCodeData:mockState',
+        tokens: 'mockTokens:mockState',
+        ensResolution: 'mockSendEnsResolution:mockState',
+        ensResolutionError: 'mockSendEnsResolutionError:mockState',
+        toNickname: 'mockToNickname:mockState',
+        addressBook: 'mockAddressBook:mockState',
       })
     })
 
diff --git a/ui/app/pages/send/tests/send-selectors-test-data.js b/ui/app/pages/send/tests/send-selectors-test-data.js
index cff26a191..54a494b63 100644
--- a/ui/app/pages/send/tests/send-selectors-test-data.js
+++ b/ui/app/pages/send/tests/send-selectors-test-data.js
@@ -60,6 +60,7 @@ module.exports = {
       {
         'address': '0x06195827297c7a80a443b6894d3bdb8824b43896',
         'name': 'Address Book Account 1',
+        'chainId': '3',
       },
     ],
     'tokens': [
diff --git a/ui/app/pages/send/tests/send-selectors.test.js b/ui/app/pages/send/tests/send-selectors.test.js
index ccc126795..e199aa97e 100644
--- a/ui/app/pages/send/tests/send-selectors.test.js
+++ b/ui/app/pages/send/tests/send-selectors.test.js
@@ -4,7 +4,6 @@ import selectors from '../send.selectors.js'
 const {
   accountsWithSendEtherInfoSelector,
   // autoAddToBetaUI,
-  getAddressBook,
   getBlockGasLimit,
   getAmountConversionRate,
   getConversionRate,
@@ -103,20 +102,6 @@ describe('send selectors', () => {
   //   })
   // })
 
-  describe('getAddressBook()', () => {
-    it('should return the address book', () => {
-      assert.deepEqual(
-        getAddressBook(mockState),
-        [
-          {
-            address: '0x06195827297c7a80a443b6894d3bdb8824b43896',
-            name: 'Address Book Account 1',
-          },
-        ],
-      )
-    })
-  })
-
   describe('getAmountConversionRate()', () => {
     it('should return the token conversion rate if a token is selected', () => {
       assert.equal(
@@ -511,6 +496,7 @@ describe('send selectors', () => {
           {
             address: '0x06195827297c7a80a443b6894d3bdb8824b43896',
             name: 'Address Book Account 1',
+            chainId: '3',
           },
         ]
       )