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

3 files changed, 18 insertions, 6 deletions

diff --git a/ui/app/pages/send/send-header/send-header.component.js b/ui/app/pages/send/send-header/send-header.component.js
index 76e35494a..5bc76fcd3 100644
--- a/ui/app/pages/send/send-header/send-header.component.js
+++ b/ui/app/pages/send/send-header/send-header.component.js
@@ -24,8 +24,10 @@ export default class SendHeader extends Component {
   render () {
     return (
       <PageContainerHeader
+        className="send__header"
         onClose={() => this.onClose()}
         title={this.context.t(this.props.titleKey)}
+        headerCloseText={this.context.t('cancel')}
       />
     )
   }
diff --git a/ui/app/pages/send/send-header/send-header.selectors.js b/ui/app/pages/send/send-header/send-header.selectors.js
index d7c9d3766..2c0a907d8 100644
--- a/ui/app/pages/send/send-header/send-header.selectors.js
+++ b/ui/app/pages/send/send-header/send-header.selectors.js
@@ -1,6 +1,7 @@
 const {
   getSelectedToken,
   getSendEditingTransactionId,
+  getSendTo,
 } = require('../send.selectors.js')
 
 const selectors = {
@@ -14,6 +15,10 @@ function getTitleKey (state) {
   const isEditing = Boolean(getSendEditingTransactionId(state))
   const isToken = Boolean(getSelectedToken(state))
 
+  if (!getSendTo(state)) {
+    return 'addRecipient'
+  }
+
   if (isEditing) {
     return 'edit'
   } else if (isToken) {
diff --git a/ui/app/pages/send/send-header/tests/send-header-selectors.test.js b/ui/app/pages/send/send-header/tests/send-header-selectors.test.js
index e0c6a3ab3..d22845f84 100644
--- a/ui/app/pages/send/send-header/tests/send-header-selectors.test.js
+++ b/ui/app/pages/send/send-header/tests/send-header-selectors.test.js
@@ -8,39 +8,44 @@ const {
   '../send.selectors': {
     getSelectedToken: (mockState) => mockState.t,
     getSendEditingTransactionId: (mockState) => mockState.e,
+    getSendTo: (mockState) => mockState.to,
   },
 })
 
 describe('send-header selectors', () => {
 
   describe('getTitleKey()', () => {
+    it('should return the correct key when "to" is empty', () => {
+      assert.equal(getTitleKey({ e: 1, t: true, to: '' }), 'addRecipient')
+    })
+
     it('should return the correct key when getSendEditingTransactionId is truthy', () => {
-      assert.equal(getTitleKey({ e: 1, t: true }), 'edit')
+      assert.equal(getTitleKey({ e: 1, t: true, to: '0x123' }), 'edit')
     })
 
     it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => {
-      assert.equal(getTitleKey({ e: null, t: 'abc' }), 'sendTokens')
+      assert.equal(getTitleKey({ e: null, t: 'abc', to: '0x123' }), 'sendTokens')
     })
 
     it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => {
-      assert.equal(getTitleKey({ e: null }), 'sendETH')
+      assert.equal(getTitleKey({ e: null, to: '0x123' }), 'sendETH')
     })
   })
 
   describe('getSubtitleParams()', () => {
     it('should return the correct params when getSendEditingTransactionId is truthy', () => {
-      assert.deepEqual(getSubtitleParams({ e: 1, t: true }), [ 'editingTransaction' ])
+      assert.deepEqual(getSubtitleParams({ e: 1, t: true, to: '0x123' }), [ 'editingTransaction' ])
     })
 
     it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => {
       assert.deepEqual(
-        getSubtitleParams({ e: null, t: { symbol: 'ABC' } }),
+        getSubtitleParams({ e: null, t: { symbol: 'ABC' }, to: '0x123' }),
         [ 'onlySendTokensToAccountAddress', [ 'ABC' ] ]
       )
     })
 
     it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => {
-      assert.deepEqual(getSubtitleParams({ e: null }), [ 'onlySendToEtherAddress' ])
+      assert.deepEqual(getSubtitleParams({ e: null, to: '0x123' }), [ 'onlySendToEtherAddress' ])
     })
   })