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

diff --git a/ui/app/pages/send/send-footer/send-footer.container.js b/ui/app/pages/send/send-footer/send-footer.container.js
new file mode 100644
index 000000000..68f4dc7c3
--- /dev/null
+++ b/ui/app/pages/send/send-footer/send-footer.container.js
@@ -0,0 +1,120 @@
+import { connect } from 'react-redux'
+import ethUtil from 'ethereumjs-util'
+import {
+  addToAddressBook,
+  clearSend,
+  signTokenTx,
+  signTx,
+  updateTransaction,
+} from '../../../store/actions'
+import SendFooter from './send-footer.component'
+import {
+  getGasLimit,
+  getGasPrice,
+  getGasTotal,
+  getSelectedToken,
+  getSendAmount,
+  getSendEditingTransactionId,
+  getSendFromObject,
+  getSendTo,
+  getSendToAccounts,
+  getSendHexData,
+  getTokenBalance,
+  getUnapprovedTxs,
+  getSendErrors,
+} from '../send.selectors'
+import {
+  isSendFormInError,
+} from './send-footer.selectors'
+import {
+  addressIsNew,
+  constructTxParams,
+  constructUpdatedTx,
+} from './send-footer.utils'
+import {
+  getRenderableEstimateDataForSmallButtonsFromGWEI,
+  getDefaultActiveButtonIndex,
+} from '../../../selectors/custom-gas'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendFooter)
+
+function mapStateToProps (state) {
+  const gasButtonInfo = getRenderableEstimateDataForSmallButtonsFromGWEI(state)
+  const gasPrice = getGasPrice(state)
+  const activeButtonIndex = getDefaultActiveButtonIndex(gasButtonInfo, gasPrice)
+  const gasChangedLabel = activeButtonIndex >= 0
+    ? gasButtonInfo[activeButtonIndex].labelKey
+    : 'custom'
+
+  return {
+    amount: getSendAmount(state),
+    data: getSendHexData(state),
+    editingTransactionId: getSendEditingTransactionId(state),
+    from: getSendFromObject(state),
+    gasLimit: getGasLimit(state),
+    gasPrice: getGasPrice(state),
+    gasTotal: getGasTotal(state),
+    inError: isSendFormInError(state),
+    selectedToken: getSelectedToken(state),
+    to: getSendTo(state),
+    toAccounts: getSendToAccounts(state),
+    tokenBalance: getTokenBalance(state),
+    unapprovedTxs: getUnapprovedTxs(state),
+    sendErrors: getSendErrors(state),
+    gasChangedLabel,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    clearSend: () => dispatch(clearSend()),
+    sign: ({ selectedToken, to, amount, from, gas, gasPrice, data }) => {
+      const txParams = constructTxParams({
+        amount,
+        data,
+        from,
+        gas,
+        gasPrice,
+        selectedToken,
+        to,
+      })
+
+      selectedToken
+        ? dispatch(signTokenTx(selectedToken.address, to, amount, txParams))
+        : dispatch(signTx(txParams))
+    },
+    update: ({
+      amount,
+      data,
+      editingTransactionId,
+      from,
+      gas,
+      gasPrice,
+      selectedToken,
+      to,
+      unapprovedTxs,
+    }) => {
+      const editingTx = constructUpdatedTx({
+        amount,
+        data,
+        editingTransactionId,
+        from,
+        gas,
+        gasPrice,
+        selectedToken,
+        to,
+        unapprovedTxs,
+      })
+
+      return dispatch(updateTransaction(editingTx))
+    },
+
+    addToAddressBookIfNew: (newAddress, toAccounts, nickname = '') => {
+      const hexPrefixedAddress = ethUtil.addHexPrefix(newAddress)
+      if (addressIsNew(toAccounts, hexPrefixedAddress)) {
+        // TODO: nickname, i.e. addToAddressBook(recipient, nickname)
+        dispatch(addToAddressBook(hexPrefixedAddress, nickname))
+      }
+    },
+  }
+}