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, 91 insertions, 0 deletions

diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js
new file mode 100644
index 000000000..9baf327c1
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js
@@ -0,0 +1,91 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper'
+import EnsInput from '../../../../components/app/ens-input'
+import { getToErrorObject, getToWarningObject } from './send-to-row.utils.js'
+
+export default class SendToRow extends Component {
+
+  static propTypes = {
+    closeToDropdown: PropTypes.func,
+    hasHexData: PropTypes.bool.isRequired,
+    inError: PropTypes.bool,
+    inWarning: PropTypes.bool,
+    network: PropTypes.string,
+    openToDropdown: PropTypes.func,
+    selectedToken: PropTypes.object,
+    to: PropTypes.string,
+    toAccounts: PropTypes.array,
+    toDropdownOpen: PropTypes.bool,
+    tokens: PropTypes.array,
+    updateGas: PropTypes.func,
+    updateSendTo: PropTypes.func,
+    updateSendToError: PropTypes.func,
+    updateSendToWarning: PropTypes.func,
+    scanQrCode: PropTypes.func,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  handleToChange (to, nickname = '', toError, toWarning, network) {
+    const { hasHexData, updateSendTo, updateSendToError, updateGas, tokens, selectedToken, updateSendToWarning } = this.props
+    const toErrorObject = getToErrorObject(to, toError, hasHexData, tokens, selectedToken, network)
+    const toWarningObject = getToWarningObject(to, toWarning, tokens, selectedToken)
+    updateSendTo(to, nickname)
+    updateSendToError(toErrorObject)
+    updateSendToWarning(toWarningObject)
+    if (toErrorObject.to === null) {
+      updateGas({ to })
+    }
+  }
+
+  render () {
+    const {
+      closeToDropdown,
+      inError,
+      inWarning,
+      network,
+      openToDropdown,
+      to,
+      toAccounts,
+      toDropdownOpen,
+    } = this.props
+
+    return (
+      <SendRowWrapper
+        errorType={'to'}
+        label={`${this.context.t('to')}: `}
+        showError={inError}
+        showWarning={inWarning}
+        warningType={'to'}
+        >
+        <EnsInput
+          scanQrCode={_ => {
+            this.context.metricsEvent({
+              eventOpts: {
+                category: 'Transactions',
+                action: 'Edit Screen',
+                name: 'Used QR scanner',
+              },
+            })
+            this.props.scanQrCode()
+          }}
+          accounts={toAccounts}
+          closeDropdown={() => closeToDropdown()}
+          dropdownOpen={toDropdownOpen}
+          inError={inError}
+          name={'address'}
+          network={network}
+          onChange={({ toAddress, nickname, toError, toWarning }) => this.handleToChange(toAddress, nickname, toError, toWarning, this.props.network)}
+          openDropdown={() => openToDropdown()}
+          placeholder={this.context.t('recipientAddress')}
+          to={to}
+        />
+      </SendRowWrapper>
+    )
+  }
+
+}