Add token selection to the send screen (#6445)

* Move send to pages/

* Fix unit tests

* Finish UI

* Integrate asset dropdown to send actions

* Remove console.log

* Hide asset change during edit

* Enable switch from send token to seand eth

* Enable switching from token to eth when editing

* Fix linter

* Fixing test

* Fix unit tests

* Fix linter

* Fix react warning; remove console.log

* fix flat test

* Add metrics

* Address code review comments

* Consistent spacing between send screen form rows.

* Reduce height of gas buttons on send screen.

* Make send screen gas button height dependent on size of contents.

1 files changed, 105 insertions, 0 deletions

diff --git a/ui/app/pages/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js b/ui/app/pages/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js
new file mode 100644
index 000000000..b92dd4dfe
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js
@@ -0,0 +1,105 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import SendDropdownList from '../send-dropdown-list.component.js'
+
+import AccountListItem from '../../../account-list-item/account-list-item.container'
+
+const propsMethodSpies = {
+  closeDropdown: sinon.spy(),
+  onSelect: sinon.spy(),
+}
+
+sinon.spy(SendDropdownList.prototype, 'getListItemIcon')
+
+describe('SendDropdownList Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<SendDropdownList
+      accounts={[
+        { address: 'mockAccount0' },
+        { address: 'mockAccount1' },
+        { address: 'mockAccount2' },
+      ]}
+      closeDropdown={propsMethodSpies.closeDropdown}
+      onSelect={propsMethodSpies.onSelect}
+      activeAddress={'mockAddress2'}
+    />, { context: { t: str => str + '_t' } })
+  })
+
+  afterEach(() => {
+    propsMethodSpies.closeDropdown.resetHistory()
+    propsMethodSpies.onSelect.resetHistory()
+    SendDropdownList.prototype.getListItemIcon.resetHistory()
+  })
+
+  describe('getListItemIcon', () => {
+    it('should return check icon if the passed addresses are the same', () => {
+      assert.deepEqual(
+        wrapper.instance().getListItemIcon('mockAccount0', 'mockAccount0'),
+        <i className={`fa fa-check fa-lg`} style={ { color: '#02c9b1' } }/>
+      )
+    })
+
+    it('should return null if the passed addresses are different', () => {
+      assert.equal(
+        wrapper.instance().getListItemIcon('mockAccount0', 'mockAccount1'),
+        null
+      )
+    })
+  })
+
+  describe('render', () => {
+    it('should render a single div with two children', () => {
+      assert(wrapper.is('div'))
+      assert.equal(wrapper.children().length, 2)
+    })
+
+    it('should render the children with the correct classes', () => {
+      assert(wrapper.childAt(0).hasClass('send-v2__from-dropdown__close-area'))
+      assert(wrapper.childAt(1).hasClass('send-v2__from-dropdown__list'))
+    })
+
+    it('should call closeDropdown onClick of the send-v2__from-dropdown__close-area', () => {
+      assert.equal(propsMethodSpies.closeDropdown.callCount, 0)
+      wrapper.childAt(0).props().onClick()
+      assert.equal(propsMethodSpies.closeDropdown.callCount, 1)
+    })
+
+    it('should render an AccountListItem for each item in accounts', () => {
+      assert.equal(wrapper.childAt(1).children().length, 3)
+      assert(wrapper.childAt(1).children().every(AccountListItem))
+    })
+
+    it('should pass the correct props to the AccountListItem', () => {
+      wrapper.childAt(1).children().forEach((accountListItem, index) => {
+        const {
+          account,
+          className,
+          handleClick,
+        } = accountListItem.props()
+        assert.deepEqual(account, { address: 'mockAccount' + index })
+        assert.equal(className, 'account-list-item__dropdown')
+        assert.equal(propsMethodSpies.onSelect.callCount, 0)
+        handleClick()
+        assert.equal(propsMethodSpies.onSelect.callCount, 1)
+        assert.deepEqual(propsMethodSpies.onSelect.getCall(0).args[0], { address: 'mockAccount' + index })
+        propsMethodSpies.onSelect.resetHistory()
+        propsMethodSpies.closeDropdown.resetHistory()
+        assert.equal(propsMethodSpies.closeDropdown.callCount, 0)
+        handleClick()
+        assert.equal(propsMethodSpies.closeDropdown.callCount, 1)
+        propsMethodSpies.onSelect.resetHistory()
+        propsMethodSpies.closeDropdown.resetHistory()
+      })
+    })
+
+    it('should call this.getListItemIcon for each AccountListItem', () => {
+      assert.equal(SendDropdownList.prototype.getListItemIcon.callCount, 3)
+      const getListItemIconCalls = SendDropdownList.prototype.getListItemIcon.getCalls()
+      assert(getListItemIconCalls.every(({ args }, index) => args[0] === 'mockAccount' + index))
+    })
+  })
+})