From 931aaeb7003f175374a06eb949cd47a12ebc8bbf Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Wed, 17 Apr 2019 12:15:13 -0700
Subject: 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.
---
 app/_locales/en/messages.json                      |   6 +
 test/integration/lib/send-new-ui.js                |   4 +-
 ui/app/components/app/customize-gas-modal/index.js |   6 +-
 ui/app/components/app/ens-input.js                 |   2 +-
 .../gas-modal-page-container.container.js          |   2 +-
 .../gas-price-button-group/index.scss              |   6 +-
 .../customize-gas/customize-gas.component.js       |   2 +-
 ui/app/components/app/send/README.md               |   0
 .../account-list-item/account-list-item-README.md  |   0
 .../account-list-item.component.js                 | 108 ----
 .../account-list-item.container.js                 |  27 -
 .../components/app/send/account-list-item/index.js |   1 -
 .../tests/account-list-item-component.test.js      | 148 -----
 .../tests/account-list-item-container.test.js      |  73 ---
 ui/app/components/app/send/index.js                |   1 -
 ui/app/components/app/send/send-content/index.js   |   1 -
 .../send/send-content/send-amount-row/README.md    |   0
 .../amount-max-button.component.js                 |  65 --
 .../amount-max-button.container.js                 |  40 --
 .../amount-max-button.selectors.js                 |   9 -
 .../amount-max-button/amount-max-button.utils.js   |  29 -
 .../send-amount-row/amount-max-button/index.js     |   1 -
 .../tests/amount-max-button-component.test.js      |  89 ---
 .../tests/amount-max-button-container.test.js      |  91 ---
 .../tests/amount-max-button-selectors.test.js      |  22 -
 .../tests/amount-max-button-utils.test.js          |  27 -
 .../app/send/send-content/send-amount-row/index.js |   1 -
 .../send-amount-row/send-amount-row.component.js   | 119 ----
 .../send-amount-row/send-amount-row.container.js   |  54 --
 .../send-amount-row/send-amount-row.scss           |   0
 .../send-amount-row/send-amount-row.selectors.js   |   9 -
 .../tests/send-amount-row-component.test.js        | 187 ------
 .../tests/send-amount-row-container.test.js        | 125 ----
 .../tests/send-amount-row-selectors.test.js        |  34 -
 .../send/send-content/send-content.component.js    |  41 --
 .../send/send-content/send-dropdown-list/index.js  |   1 -
 .../send-dropdown-list.component.js                |  52 --
 .../tests/send-dropdown-list-component.test.js     | 105 ----
 .../app/send/send-content/send-from-row/index.js   |   1 -
 .../send-from-row/send-from-row.component.js       |  27 -
 .../send-from-row/send-from-row.container.js       |  11 -
 .../send-from-row/send-from-row.selectors.js       |   9 -
 .../tests/send-from-row-component.test.js          |  31 -
 .../tests/send-from-row-container.test.js          |  26 -
 .../tests/send-from-row-selectors.test.js          |  20 -
 .../app/send/send-content/send-gas-row/README.md   |   0
 .../gas-fee-display/gas-fee-display.component.js   |  57 --
 .../send-gas-row/gas-fee-display/index.js          |   1 -
 .../test/gas-fee-display.component.test.js         |  61 --
 .../app/send/send-content/send-gas-row/index.js    |   1 -
 .../send-gas-row/send-gas-row.component.js         | 131 ----
 .../send-gas-row/send-gas-row.container.js         | 118 ----
 .../send-content/send-gas-row/send-gas-row.scss    |   0
 .../send-gas-row/send-gas-row.selectors.js         |  19 -
 .../tests/send-gas-row-component.test.js           | 104 ---
 .../tests/send-gas-row-container.test.js           | 200 ------
 .../tests/send-gas-row-selectors.test.js           |  62 --
 .../send/send-content/send-hex-data-row/index.js   |   1 -
 .../send-hex-data-row.component.js                 |  42 --
 .../send-hex-data-row.container.js                 |  21 -
 .../send/send-content/send-row-wrapper/index.js    |   1 -
 .../send-row-error-message/index.js                |   1 -
 .../send-row-error-message-README.md               |   0
 .../send-row-error-message.component.js            |  27 -
 .../send-row-error-message.container.js            |  12 -
 .../send-row-error-message.scss                    |   0
 .../tests/send-row-error-message-component.test.js |  28 -
 .../tests/send-row-error-message-container.test.js |  28 -
 .../send-row-warning-message/index.js              |   1 -
 .../send-row-warning-message.component.js          |  27 -
 .../send-row-warning-message.container.js          |  12 -
 .../send-row-warning-message.scss                  |   0
 .../send-row-warning-message-component.test.js     |  28 -
 .../send-row-warning-message-container.test.js     |  28 -
 .../send-row-wrapper/send-row-wrapper-README.md    |   0
 .../send-row-wrapper/send-row-wrapper.component.js |  48 --
 .../send-row-wrapper/send-row-wrapper.scss         |   0
 .../tests/send-row-wrapper-component.test.js       |  79 ---
 .../app/send/send-content/send-to-row/index.js     |   1 -
 .../send-content/send-to-row/send-to-row-README.md |   0
 .../send-to-row/send-to-row.component.js           |  91 ---
 .../send-to-row/send-to-row.container.js           |  54 --
 .../send-to-row/send-to-row.selectors.js           |  24 -
 .../send-content/send-to-row/send-to-row.utils.js  |  36 --
 .../tests/send-to-row-component.test.js            | 166 -----
 .../tests/send-to-row-container.test.js            | 134 ----
 .../tests/send-to-row-selectors.test.js            |  59 --
 .../send-to-row/tests/send-to-row-utils.test.js    | 107 ----
 .../tests/send-content-component.test.js           |  50 --
 ui/app/components/app/send/send-footer/README.md   |   0
 ui/app/components/app/send/send-footer/index.js    |   1 -
 .../app/send/send-footer/send-footer.component.js  | 142 -----
 .../app/send/send-footer/send-footer.container.js  | 120 ----
 .../app/send/send-footer/send-footer.scss          |   0
 .../app/send/send-footer/send-footer.selectors.js  |  11 -
 .../app/send/send-footer/send-footer.utils.js      |  87 ---
 .../tests/send-footer-component.test.js            | 233 -------
 .../tests/send-footer-container.test.js            | 205 ------
 .../tests/send-footer-selectors.test.js            |  24 -
 .../send-footer/tests/send-footer-utils.test.js    | 234 -------
 ui/app/components/app/send/send-header/README.md   |   0
 ui/app/components/app/send/send-header/index.js    |   1 -
 .../app/send/send-header/send-header.component.js  |  34 -
 .../app/send/send-header/send-header.container.js  |  19 -
 .../app/send/send-header/send-header.selectors.js  |  37 --
 .../tests/send-header-component.test.js            |  70 ---
 .../tests/send-header-container.test.js            |  59 --
 .../tests/send-header-selectors.test.js            |  47 --
 ui/app/components/app/send/send.component.js       | 218 -------
 ui/app/components/app/send/send.constants.js       |  61 --
 ui/app/components/app/send/send.container.js       | 115 ----
 ui/app/components/app/send/send.scss               |   0
 ui/app/components/app/send/send.selectors.js       | 283 ---------
 ui/app/components/app/send/send.utils.js           | 332 ----------
 .../app/send/tests/send-component.test.js          | 354 -----------
 .../app/send/tests/send-container.test.js          | 177 ------
 .../app/send/tests/send-selectors-test-data.js     | 231 -------
 .../app/send/tests/send-selectors.test.js          | 696 ---------------------
 .../components/app/send/tests/send-utils.test.js   | 527 ----------------
 .../app/send/to-autocomplete.component.js          | 141 -----
 .../components/app/send/to-autocomplete/index.js   |   1 -
 .../app/send/to-autocomplete/to-autocomplete.js    | 129 ----
 .../transaction-list-item.container.js             |   2 +-
 .../account-dropdown-mini.component.js             |   2 +-
 .../tests/account-dropdown-mini.component.test.js  |   2 +-
 .../ui/unit-input/unit-input.component.js          |   2 +-
 ui/app/css/itcss/components/send.scss              | 104 ++-
 ui/app/ducks/metamask/metamask.js                  |  19 +-
 .../confirm-transaction-base.component.js          |   2 +-
 .../confirm-transaction-base.container.js          |   4 +-
 ui/app/pages/home/home.container.js                |   2 +-
 ui/app/pages/routes/index.js                       |   2 +-
 ui/app/pages/send/README.md                        |   0
 .../account-list-item/account-list-item-README.md  |   0
 .../account-list-item.component.js                 | 108 ++++
 .../account-list-item.container.js                 |  27 +
 ui/app/pages/send/account-list-item/index.js       |   1 +
 .../tests/account-list-item-component.test.js      | 148 +++++
 .../tests/account-list-item-container.test.js      |  73 +++
 ui/app/pages/send/index.js                         |   1 +
 ui/app/pages/send/send-content/index.js            |   1 +
 .../send/send-content/send-amount-row/README.md    |   0
 .../amount-max-button.component.js                 |  65 ++
 .../amount-max-button.container.js                 |  40 ++
 .../amount-max-button.selectors.js                 |   9 +
 .../amount-max-button/amount-max-button.utils.js   |  29 +
 .../send-amount-row/amount-max-button/index.js     |   1 +
 .../tests/amount-max-button-component.test.js      |  89 +++
 .../tests/amount-max-button-container.test.js      |  91 +++
 .../tests/amount-max-button-selectors.test.js      |  22 +
 .../tests/amount-max-button-utils.test.js          |  27 +
 .../send/send-content/send-amount-row/index.js     |   1 +
 .../send-amount-row/send-amount-row.component.js   | 119 ++++
 .../send-amount-row/send-amount-row.container.js   |  54 ++
 .../send-amount-row/send-amount-row.scss           |   0
 .../send-amount-row/send-amount-row.selectors.js   |   9 +
 .../tests/send-amount-row-component.test.js        | 187 ++++++
 .../tests/send-amount-row-container.test.js        | 125 ++++
 .../tests/send-amount-row-selectors.test.js        |  34 +
 .../send/send-content/send-asset-row/index.js      |   1 +
 .../send-asset-row/send-asset-row.component.js     | 152 +++++
 .../send-asset-row/send-asset-row.container.js     |  21 +
 .../send/send-content/send-content.component.js    |  43 ++
 .../send/send-content/send-dropdown-list/index.js  |   1 +
 .../send-dropdown-list.component.js                |  52 ++
 .../tests/send-dropdown-list-component.test.js     | 105 ++++
 .../pages/send/send-content/send-from-row/index.js |   1 +
 .../send-from-row/send-from-row.component.js       |  27 +
 .../send-from-row/send-from-row.container.js       |  11 +
 .../send-from-row/send-from-row.selectors.js       |   9 +
 .../tests/send-from-row-component.test.js          |  31 +
 .../tests/send-from-row-container.test.js          |  26 +
 .../tests/send-from-row-selectors.test.js          |  20 +
 .../pages/send/send-content/send-gas-row/README.md |   0
 .../gas-fee-display/gas-fee-display.component.js   |  57 ++
 .../send-gas-row/gas-fee-display/index.js          |   1 +
 .../test/gas-fee-display.component.test.js         |  61 ++
 .../pages/send/send-content/send-gas-row/index.js  |   1 +
 .../send-gas-row/send-gas-row.component.js         | 131 ++++
 .../send-gas-row/send-gas-row.container.js         | 118 ++++
 .../send-content/send-gas-row/send-gas-row.scss    |   0
 .../send-gas-row/send-gas-row.selectors.js         |  19 +
 .../tests/send-gas-row-component.test.js           | 104 +++
 .../tests/send-gas-row-container.test.js           | 200 ++++++
 .../tests/send-gas-row-selectors.test.js           |  62 ++
 .../send/send-content/send-hex-data-row/index.js   |   1 +
 .../send-hex-data-row.component.js                 |  42 ++
 .../send-hex-data-row.container.js                 |  21 +
 .../send/send-content/send-row-wrapper/index.js    |   1 +
 .../send-row-error-message/index.js                |   1 +
 .../send-row-error-message-README.md               |   0
 .../send-row-error-message.component.js            |  27 +
 .../send-row-error-message.container.js            |  12 +
 .../send-row-error-message.scss                    |   0
 .../tests/send-row-error-message-component.test.js |  28 +
 .../tests/send-row-error-message-container.test.js |  28 +
 .../send-row-warning-message/index.js              |   1 +
 .../send-row-warning-message.component.js          |  27 +
 .../send-row-warning-message.container.js          |  12 +
 .../send-row-warning-message.scss                  |   0
 .../send-row-warning-message-component.test.js     |  28 +
 .../send-row-warning-message-container.test.js     |  28 +
 .../send-row-wrapper/send-row-wrapper-README.md    |   0
 .../send-row-wrapper/send-row-wrapper.component.js |  48 ++
 .../send-row-wrapper/send-row-wrapper.scss         |   0
 .../tests/send-row-wrapper-component.test.js       |  79 +++
 .../pages/send/send-content/send-to-row/index.js   |   1 +
 .../send-content/send-to-row/send-to-row-README.md |   0
 .../send-to-row/send-to-row.component.js           |  91 +++
 .../send-to-row/send-to-row.container.js           |  54 ++
 .../send-to-row/send-to-row.selectors.js           |  24 +
 .../send-content/send-to-row/send-to-row.utils.js  |  36 ++
 .../tests/send-to-row-component.test.js            | 166 +++++
 .../tests/send-to-row-container.test.js            | 134 ++++
 .../tests/send-to-row-selectors.test.js            |  59 ++
 .../send-to-row/tests/send-to-row-utils.test.js    | 107 ++++
 .../tests/send-content-component.test.js           |  53 ++
 ui/app/pages/send/send-footer/README.md            |   0
 ui/app/pages/send/send-footer/index.js             |   1 +
 .../send/send-footer/send-footer.component.js      | 142 +++++
 .../send/send-footer/send-footer.container.js      | 120 ++++
 ui/app/pages/send/send-footer/send-footer.scss     |   0
 .../send/send-footer/send-footer.selectors.js      |  11 +
 ui/app/pages/send/send-footer/send-footer.utils.js |  88 +++
 .../tests/send-footer-component.test.js            | 233 +++++++
 .../tests/send-footer-container.test.js            | 205 ++++++
 .../tests/send-footer-selectors.test.js            |  24 +
 .../send-footer/tests/send-footer-utils.test.js    | 233 +++++++
 ui/app/pages/send/send-header/README.md            |   0
 ui/app/pages/send/send-header/index.js             |   1 +
 .../send/send-header/send-header.component.js      |  34 +
 .../send/send-header/send-header.container.js      |  19 +
 .../send/send-header/send-header.selectors.js      |  37 ++
 .../tests/send-header-component.test.js            |  70 +++
 .../tests/send-header-container.test.js            |  59 ++
 .../tests/send-header-selectors.test.js            |  47 ++
 ui/app/pages/send/send.component.js                | 230 +++++++
 ui/app/pages/send/send.constants.js                |  61 ++
 ui/app/pages/send/send.container.js                | 115 ++++
 ui/app/pages/send/send.scss                        |   0
 ui/app/pages/send/send.selectors.js                | 283 +++++++++
 ui/app/pages/send/send.utils.js                    | 332 ++++++++++
 ui/app/pages/send/tests/send-component.test.js     | 354 +++++++++++
 ui/app/pages/send/tests/send-container.test.js     | 177 ++++++
 .../pages/send/tests/send-selectors-test-data.js   | 231 +++++++
 ui/app/pages/send/tests/send-selectors.test.js     | 696 +++++++++++++++++++++
 ui/app/pages/send/tests/send-utils.test.js         | 527 ++++++++++++++++
 ui/app/pages/send/to-autocomplete.component.js     | 141 +++++
 ui/app/pages/send/to-autocomplete/index.js         |   1 +
 .../pages/send/to-autocomplete/to-autocomplete.js  | 129 ++++
 ui/app/selectors/custom-gas.js                     |   2 +-
 ui/app/store/actions.js                            |   2 +-
 252 files changed, 8371 insertions(+), 8061 deletions(-)
 delete mode 100644 ui/app/components/app/send/README.md
 delete mode 100644 ui/app/components/app/send/account-list-item/account-list-item-README.md
 delete mode 100644 ui/app/components/app/send/account-list-item/account-list-item.component.js
 delete mode 100644 ui/app/components/app/send/account-list-item/account-list-item.container.js
 delete mode 100644 ui/app/components/app/send/account-list-item/index.js
 delete mode 100644 ui/app/components/app/send/account-list-item/tests/account-list-item-component.test.js
 delete mode 100644 ui/app/components/app/send/account-list-item/tests/account-list-item-container.test.js
 delete mode 100644 ui/app/components/app/send/index.js
 delete mode 100644 ui/app/components/app/send/send-content/index.js
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/README.md
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/amount-max-button/index.js
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/index.js
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/send-amount-row.component.js
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/send-amount-row.container.js
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/send-amount-row.scss
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/send-amount-row.selectors.js
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-container.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-content.component.js
 delete mode 100644 ui/app/components/app/send/send-content/send-dropdown-list/index.js
 delete mode 100644 ui/app/components/app/send/send-content/send-dropdown-list/send-dropdown-list.component.js
 delete mode 100644 ui/app/components/app/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-from-row/index.js
 delete mode 100644 ui/app/components/app/send/send-content/send-from-row/send-from-row.component.js
 delete mode 100644 ui/app/components/app/send/send-content/send-from-row/send-from-row.container.js
 delete mode 100644 ui/app/components/app/send/send-content/send-from-row/send-from-row.selectors.js
 delete mode 100644 ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-component.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-container.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-selectors.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-gas-row/README.md
 delete mode 100644 ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
 delete mode 100644 ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/index.js
 delete mode 100644 ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-gas-row/index.js
 delete mode 100644 ui/app/components/app/send/send-content/send-gas-row/send-gas-row.component.js
 delete mode 100644 ui/app/components/app/send/send-content/send-gas-row/send-gas-row.container.js
 delete mode 100644 ui/app/components/app/send/send-content/send-gas-row/send-gas-row.scss
 delete mode 100644 ui/app/components/app/send/send-content/send-gas-row/send-gas-row.selectors.js
 delete mode 100644 ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-hex-data-row/index.js
 delete mode 100644 ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.component.js
 delete mode 100644 ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.container.js
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/index.js
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/index.js
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/index.js
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper-README.md
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.component.js
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.scss
 delete mode 100644 ui/app/components/app/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-to-row/index.js
 delete mode 100644 ui/app/components/app/send/send-content/send-to-row/send-to-row-README.md
 delete mode 100644 ui/app/components/app/send/send-content/send-to-row/send-to-row.component.js
 delete mode 100644 ui/app/components/app/send/send-content/send-to-row/send-to-row.container.js
 delete mode 100644 ui/app/components/app/send/send-content/send-to-row/send-to-row.selectors.js
 delete mode 100644 ui/app/components/app/send/send-content/send-to-row/send-to-row.utils.js
 delete mode 100644 ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-component.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-container.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-selectors.test.js
 delete mode 100644 ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-utils.test.js
 delete mode 100644 ui/app/components/app/send/send-content/tests/send-content-component.test.js
 delete mode 100644 ui/app/components/app/send/send-footer/README.md
 delete mode 100644 ui/app/components/app/send/send-footer/index.js
 delete mode 100644 ui/app/components/app/send/send-footer/send-footer.component.js
 delete mode 100644 ui/app/components/app/send/send-footer/send-footer.container.js
 delete mode 100644 ui/app/components/app/send/send-footer/send-footer.scss
 delete mode 100644 ui/app/components/app/send/send-footer/send-footer.selectors.js
 delete mode 100644 ui/app/components/app/send/send-footer/send-footer.utils.js
 delete mode 100644 ui/app/components/app/send/send-footer/tests/send-footer-component.test.js
 delete mode 100644 ui/app/components/app/send/send-footer/tests/send-footer-container.test.js
 delete mode 100644 ui/app/components/app/send/send-footer/tests/send-footer-selectors.test.js
 delete mode 100644 ui/app/components/app/send/send-footer/tests/send-footer-utils.test.js
 delete mode 100644 ui/app/components/app/send/send-header/README.md
 delete mode 100644 ui/app/components/app/send/send-header/index.js
 delete mode 100644 ui/app/components/app/send/send-header/send-header.component.js
 delete mode 100644 ui/app/components/app/send/send-header/send-header.container.js
 delete mode 100644 ui/app/components/app/send/send-header/send-header.selectors.js
 delete mode 100644 ui/app/components/app/send/send-header/tests/send-header-component.test.js
 delete mode 100644 ui/app/components/app/send/send-header/tests/send-header-container.test.js
 delete mode 100644 ui/app/components/app/send/send-header/tests/send-header-selectors.test.js
 delete mode 100644 ui/app/components/app/send/send.component.js
 delete mode 100644 ui/app/components/app/send/send.constants.js
 delete mode 100644 ui/app/components/app/send/send.container.js
 delete mode 100644 ui/app/components/app/send/send.scss
 delete mode 100644 ui/app/components/app/send/send.selectors.js
 delete mode 100644 ui/app/components/app/send/send.utils.js
 delete mode 100644 ui/app/components/app/send/tests/send-component.test.js
 delete mode 100644 ui/app/components/app/send/tests/send-container.test.js
 delete mode 100644 ui/app/components/app/send/tests/send-selectors-test-data.js
 delete mode 100644 ui/app/components/app/send/tests/send-selectors.test.js
 delete mode 100644 ui/app/components/app/send/tests/send-utils.test.js
 delete mode 100644 ui/app/components/app/send/to-autocomplete.component.js
 delete mode 100644 ui/app/components/app/send/to-autocomplete/index.js
 delete mode 100644 ui/app/components/app/send/to-autocomplete/to-autocomplete.js
 create mode 100644 ui/app/pages/send/README.md
 create mode 100644 ui/app/pages/send/account-list-item/account-list-item-README.md
 create mode 100644 ui/app/pages/send/account-list-item/account-list-item.component.js
 create mode 100644 ui/app/pages/send/account-list-item/account-list-item.container.js
 create mode 100644 ui/app/pages/send/account-list-item/index.js
 create mode 100644 ui/app/pages/send/account-list-item/tests/account-list-item-component.test.js
 create mode 100644 ui/app/pages/send/account-list-item/tests/account-list-item-container.test.js
 create mode 100644 ui/app/pages/send/index.js
 create mode 100644 ui/app/pages/send/send-content/index.js
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/README.md
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/amount-max-button/index.js
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/index.js
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/send-amount-row.component.js
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/send-amount-row.container.js
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/send-amount-row.scss
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/send-amount-row.selectors.js
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-container.test.js
 create mode 100644 ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js
 create mode 100644 ui/app/pages/send/send-content/send-asset-row/index.js
 create mode 100644 ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js
 create mode 100644 ui/app/pages/send/send-content/send-asset-row/send-asset-row.container.js
 create mode 100644 ui/app/pages/send/send-content/send-content.component.js
 create mode 100644 ui/app/pages/send/send-content/send-dropdown-list/index.js
 create mode 100644 ui/app/pages/send/send-content/send-dropdown-list/send-dropdown-list.component.js
 create mode 100644 ui/app/pages/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js
 create mode 100644 ui/app/pages/send/send-content/send-from-row/index.js
 create mode 100644 ui/app/pages/send/send-content/send-from-row/send-from-row.component.js
 create mode 100644 ui/app/pages/send/send-content/send-from-row/send-from-row.container.js
 create mode 100644 ui/app/pages/send/send-content/send-from-row/send-from-row.selectors.js
 create mode 100644 ui/app/pages/send/send-content/send-from-row/tests/send-from-row-component.test.js
 create mode 100644 ui/app/pages/send/send-content/send-from-row/tests/send-from-row-container.test.js
 create mode 100644 ui/app/pages/send/send-content/send-from-row/tests/send-from-row-selectors.test.js
 create mode 100644 ui/app/pages/send/send-content/send-gas-row/README.md
 create mode 100644 ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
 create mode 100644 ui/app/pages/send/send-content/send-gas-row/gas-fee-display/index.js
 create mode 100644 ui/app/pages/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
 create mode 100644 ui/app/pages/send/send-content/send-gas-row/index.js
 create mode 100644 ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js
 create mode 100644 ui/app/pages/send/send-content/send-gas-row/send-gas-row.container.js
 create mode 100644 ui/app/pages/send/send-content/send-gas-row/send-gas-row.scss
 create mode 100644 ui/app/pages/send/send-content/send-gas-row/send-gas-row.selectors.js
 create mode 100644 ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
 create mode 100644 ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
 create mode 100644 ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
 create mode 100644 ui/app/pages/send/send-content/send-hex-data-row/index.js
 create mode 100644 ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js
 create mode 100644 ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.container.js
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/index.js
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/index.js
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/index.js
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper-README.md
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.component.js
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.scss
 create mode 100644 ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
 create mode 100644 ui/app/pages/send/send-content/send-to-row/index.js
 create mode 100644 ui/app/pages/send/send-content/send-to-row/send-to-row-README.md
 create mode 100644 ui/app/pages/send/send-content/send-to-row/send-to-row.component.js
 create mode 100644 ui/app/pages/send/send-content/send-to-row/send-to-row.container.js
 create mode 100644 ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js
 create mode 100644 ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js
 create mode 100644 ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js
 create mode 100644 ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js
 create mode 100644 ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js
 create mode 100644 ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js
 create mode 100644 ui/app/pages/send/send-content/tests/send-content-component.test.js
 create mode 100644 ui/app/pages/send/send-footer/README.md
 create mode 100644 ui/app/pages/send/send-footer/index.js
 create mode 100644 ui/app/pages/send/send-footer/send-footer.component.js
 create mode 100644 ui/app/pages/send/send-footer/send-footer.container.js
 create mode 100644 ui/app/pages/send/send-footer/send-footer.scss
 create mode 100644 ui/app/pages/send/send-footer/send-footer.selectors.js
 create mode 100644 ui/app/pages/send/send-footer/send-footer.utils.js
 create mode 100644 ui/app/pages/send/send-footer/tests/send-footer-component.test.js
 create mode 100644 ui/app/pages/send/send-footer/tests/send-footer-container.test.js
 create mode 100644 ui/app/pages/send/send-footer/tests/send-footer-selectors.test.js
 create mode 100644 ui/app/pages/send/send-footer/tests/send-footer-utils.test.js
 create mode 100644 ui/app/pages/send/send-header/README.md
 create mode 100644 ui/app/pages/send/send-header/index.js
 create mode 100644 ui/app/pages/send/send-header/send-header.component.js
 create mode 100644 ui/app/pages/send/send-header/send-header.container.js
 create mode 100644 ui/app/pages/send/send-header/send-header.selectors.js
 create mode 100644 ui/app/pages/send/send-header/tests/send-header-component.test.js
 create mode 100644 ui/app/pages/send/send-header/tests/send-header-container.test.js
 create mode 100644 ui/app/pages/send/send-header/tests/send-header-selectors.test.js
 create mode 100644 ui/app/pages/send/send.component.js
 create mode 100644 ui/app/pages/send/send.constants.js
 create mode 100644 ui/app/pages/send/send.container.js
 create mode 100644 ui/app/pages/send/send.scss
 create mode 100644 ui/app/pages/send/send.selectors.js
 create mode 100644 ui/app/pages/send/send.utils.js
 create mode 100644 ui/app/pages/send/tests/send-component.test.js
 create mode 100644 ui/app/pages/send/tests/send-container.test.js
 create mode 100644 ui/app/pages/send/tests/send-selectors-test-data.js
 create mode 100644 ui/app/pages/send/tests/send-selectors.test.js
 create mode 100644 ui/app/pages/send/tests/send-utils.test.js
 create mode 100644 ui/app/pages/send/to-autocomplete.component.js
 create mode 100644 ui/app/pages/send/to-autocomplete/index.js
 create mode 100644 ui/app/pages/send/to-autocomplete/to-autocomplete.js

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index b0cd1ca8b..184507cbb 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -139,6 +139,9 @@
   "approved": {
     "message": "Approved"
   },
+  "asset": {
+    "message": "Asset"
+  },
   "attemptingConnect": {
     "message": "Attempting to connect to blockchain."
   },
@@ -1351,6 +1354,9 @@
   "selectAnAccountHelp": {
     "message": "Select the account to view in MetaMask"
   },
+  "selectAnAsset": {
+    "message": "Select an Asset"
+  },
   "selectAHigherGasFee": {
     "message": "Select a higher gas fee to accelerate the processing of your transaction.*"
   },
diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js
index ce470fc02..d4c14392f 100644
--- a/test/integration/lib/send-new-ui.js
+++ b/test/integration/lib/send-new-ui.js
@@ -72,7 +72,7 @@ async function runSendFlowTest (assert, done) {
   const sendToAccountAddress = sendToFieldInput.val()
   assert.equal(sendToAccountAddress, '0x2f8D4a878cFA04A6E60D46362f5644DeAb66572D', 'send to dropdown selects the correct address')
 
-  const sendAmountField = await queryAsync($, '.send-v2__form-row:eq(2)')
+  const sendAmountField = await queryAsync($, '.send-v2__form-row:eq(3)')
   sendAmountField.find('.unit-input')[0].click()
 
   const sendAmountFieldInput = await findAsync(sendAmountField, '.unit-input__input')
@@ -115,7 +115,7 @@ async function runSendFlowTest (assert, done) {
   sendToFieldInputInEdit[0].focus()
   sendToFieldInputInEdit.val('0xd85a4b6a394794842887b8284293d69163007bbb')
 
-  const sendAmountFieldInEdit = await queryAsync($, '.send-v2__form-row:eq(2)')
+  const sendAmountFieldInEdit = await queryAsync($, '.send-v2__form-row:eq(3)')
   sendAmountFieldInEdit.find('.unit-input')[0].click()
 
   const sendAmountFieldInputInEdit = sendAmountFieldInEdit.find('.unit-input__input')
diff --git a/ui/app/components/app/customize-gas-modal/index.js b/ui/app/components/app/customize-gas-modal/index.js
index 4434b8c25..1f9436810 100644
--- a/ui/app/components/app/customize-gas-modal/index.js
+++ b/ui/app/components/app/customize-gas-modal/index.js
@@ -18,11 +18,11 @@ const {
   MIN_GAS_PRICE_DEC,
   MIN_GAS_LIMIT_DEC,
   MIN_GAS_PRICE_GWEI,
-} = require('../send/send.constants')
+} = require('../../../pages/send/send.constants')
 
 const {
   isBalanceSufficient,
-} = require('../send/send.utils')
+} = require('../../../pages/send/send.utils')
 
 const {
   conversionUtil,
@@ -47,7 +47,7 @@ const {
 const {
   getGasPrice,
   getGasLimit,
-} = require('../send/send.selectors')
+} = require('../../../pages/send/send.selectors')
 
 function mapStateToProps (state) {
   const selectedToken = getSelectedToken(state)
diff --git a/ui/app/components/app/ens-input.js b/ui/app/components/app/ens-input.js
index 274058a1b..424c5061e 100644
--- a/ui/app/components/app/ens-input.js
+++ b/ui/app/components/app/ens-input.js
@@ -10,7 +10,7 @@ const networkMap = require('ethjs-ens/lib/network-map.json')
 const ensRE = /.+\..+$/
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
 const connect = require('react-redux').connect
-const ToAutoComplete = require('./send/to-autocomplete').default
+const ToAutoComplete = require('../../pages/send/to-autocomplete').default
 const log = require('loglevel')
 const { isValidENSAddress } = require('../../helpers/utils/util')
 
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
index d541056f4..0e7e30347 100644
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -63,7 +63,7 @@ import {
 import {
   calcGasTotal,
   isBalanceSufficient,
-} from '../../send/send.utils'
+} from '../../../../pages/send/send.utils'
 import { addHexPrefix } from 'ethereumjs-util'
 import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price-chart.utils'
 
diff --git a/ui/app/components/app/gas-customization/gas-price-button-group/index.scss b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss
index cb2f3ecf1..0b48995e2 100644
--- a/ui/app/components/app/gas-customization/gas-price-button-group/index.scss
+++ b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss
@@ -99,15 +99,13 @@
   }
 
   &__loading-container {
-    height: 78px;
+    height: 54px;
   }
 
   .button-group__button, .button-group__button--active {
-    height: 78px;
     background: white;
     color: $scorpion;
-    padding-top: 9px;
-    padding-left: 8.5px;
+    padding: 2px 8.5px 4px 8.5px;
 
     @media screen and (max-width: $break-small) {
       padding-left: 4px;
diff --git a/ui/app/components/app/modals/customize-gas/customize-gas.component.js b/ui/app/components/app/modals/customize-gas/customize-gas.component.js
index 178f45729..387da2f79 100644
--- a/ui/app/components/app/modals/customize-gas/customize-gas.component.js
+++ b/ui/app/components/app/modals/customize-gas/customize-gas.component.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import BigNumber from 'bignumber.js'
 import GasModalCard from '../../customize-gas-modal/gas-modal-card'
-import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants'
+import { MIN_GAS_PRICE_GWEI } from '../../../../pages/send/send.constants'
 import Button from '../../../ui/button'
 
 import {
diff --git a/ui/app/components/app/send/README.md b/ui/app/components/app/send/README.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/components/app/send/account-list-item/account-list-item-README.md b/ui/app/components/app/send/account-list-item/account-list-item-README.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/components/app/send/account-list-item/account-list-item.component.js b/ui/app/components/app/send/account-list-item/account-list-item.component.js
deleted file mode 100644
index 18e77b4f9..000000000
--- a/ui/app/components/app/send/account-list-item/account-list-item.component.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { checksumAddress } from '../../../../helpers/utils/util'
-import Identicon from '../../../ui/identicon'
-import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display'
-import { PRIMARY, SECONDARY } from '../../../../helpers/constants/common'
-import Tooltip from '../../../ui/tooltip-v2'
-
-export default class AccountListItem extends Component {
-
-  static propTypes = {
-    account: PropTypes.object,
-    className: PropTypes.string,
-    conversionRate: PropTypes.number,
-    currentCurrency: PropTypes.string,
-    displayAddress: PropTypes.bool,
-    displayBalance: PropTypes.bool,
-    handleClick: PropTypes.func,
-    icon: PropTypes.node,
-    balanceIsCached: PropTypes.bool,
-    showFiat: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    showFiat: true,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  render () {
-    const {
-      account,
-      className,
-      displayAddress = false,
-      displayBalance = true,
-      handleClick,
-      icon = null,
-      balanceIsCached,
-      showFiat,
-    } = this.props
-
-    const { name, address, balance } = account || {}
-
-    return (<div
-      className={`account-list-item ${className}`}
-      onClick={() => handleClick && handleClick({ name, address, balance })}
-    >
-
-      <div className="account-list-item__top-row">
-        <Identicon
-          address={address}
-          className="account-list-item__identicon"
-          diameter={18}
-        />
-
-        <div className="account-list-item__account-name">{ name || address }</div>
-
-        {icon && <div className="account-list-item__icon">{ icon }</div>}
-
-      </div>
-
-      {displayAddress && name && <div className="account-list-item__account-address">
-        { checksumAddress(address) }
-      </div>}
-
-      {
-        displayBalance && (
-          <Tooltip
-            position="left"
-            title={this.context.t('balanceOutdated')}
-            disabled={!balanceIsCached}
-            style={{
-              left: '-20px !important',
-            }}
-          >
-            <div className={classnames('account-list-item__account-balances', {
-              'account-list-item__cached-balances': balanceIsCached,
-            })}>
-              <div className="account-list-item__primary-cached-container">
-                <UserPreferencedCurrencyDisplay
-                  type={PRIMARY}
-                  value={balance}
-                  hideTitle={true}
-                />
-                {
-                  balanceIsCached ? <span className="account-list-item__cached-star">*</span> : null
-                }
-              </div>
-              {
-                showFiat && (
-                  <UserPreferencedCurrencyDisplay
-                    type={SECONDARY}
-                    value={balance}
-                    hideTitle={true}
-                  />
-                )
-              }
-            </div>
-          </Tooltip>
-        )
-      }
-
-    </div>)
-  }
-}
diff --git a/ui/app/components/app/send/account-list-item/account-list-item.container.js b/ui/app/components/app/send/account-list-item/account-list-item.container.js
deleted file mode 100644
index bc9a60f49..000000000
--- a/ui/app/components/app/send/account-list-item/account-list-item.container.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { connect } from 'react-redux'
-import {
-    getConversionRate,
-    getCurrentCurrency,
-    getNativeCurrency,
-} from '../send.selectors.js'
-import {
-  getIsMainnet,
-  isBalanceCached,
-  preferencesSelector,
-} from '../../../../selectors/selectors'
-import AccountListItem from './account-list-item.component'
-
-export default connect(mapStateToProps)(AccountListItem)
-
-function mapStateToProps (state) {
-  const { showFiatInTestnets } = preferencesSelector(state)
-  const isMainnet = getIsMainnet(state)
-
-  return {
-    conversionRate: getConversionRate(state),
-    currentCurrency: getCurrentCurrency(state),
-    nativeCurrency: getNativeCurrency(state),
-    balanceIsCached: isBalanceCached(state),
-    showFiat: (isMainnet || !!showFiatInTestnets),
-  }
-}
diff --git a/ui/app/components/app/send/account-list-item/index.js b/ui/app/components/app/send/account-list-item/index.js
deleted file mode 100644
index 907485cf7..000000000
--- a/ui/app/components/app/send/account-list-item/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './account-list-item.container'
diff --git a/ui/app/components/app/send/account-list-item/tests/account-list-item-component.test.js b/ui/app/components/app/send/account-list-item/tests/account-list-item-component.test.js
deleted file mode 100644
index 5df9f77d6..000000000
--- a/ui/app/components/app/send/account-list-item/tests/account-list-item-component.test.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import sinon from 'sinon'
-import proxyquire from 'proxyquire'
-import Identicon from '../../../../ui/identicon'
-import UserPreferencedCurrencyDisplay from '../../../user-preferenced-currency-display'
-
-const utilsMethodStubs = {
-  checksumAddress: sinon.stub().returns('mockCheckSumAddress'),
-}
-
-const AccountListItem = proxyquire('../account-list-item.component.js', {
-  '../../../../helpers/utils/util': utilsMethodStubs,
-}).default
-
-
-const propsMethodSpies = {
-  handleClick: sinon.spy(),
-}
-
-describe('AccountListItem Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<AccountListItem
-      account={ { address: 'mockAddress', name: 'mockName', balance: 'mockBalance' } }
-      className={'mockClassName'}
-      conversionRate={4}
-      currentCurrency={'mockCurrentyCurrency'}
-      nativeCurrency={'ETH'}
-      displayAddress={false}
-      displayBalance={false}
-      handleClick={propsMethodSpies.handleClick}
-      icon={<i className="mockIcon" />}
-    />, { context: { t: str => str + '_t' } })
-  })
-
-  afterEach(() => {
-    propsMethodSpies.handleClick.resetHistory()
-  })
-
-  describe('render', () => {
-    it('should render a div with the passed className', () => {
-      assert.equal(wrapper.find('.mockClassName').length, 1)
-      assert(wrapper.find('.mockClassName').is('div'))
-      assert(wrapper.find('.mockClassName').hasClass('account-list-item'))
-    })
-
-    it('should call handleClick with the expected props when the root div is clicked', () => {
-      const { onClick } = wrapper.find('.mockClassName').props()
-      assert.equal(propsMethodSpies.handleClick.callCount, 0)
-      onClick()
-      assert.equal(propsMethodSpies.handleClick.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.handleClick.getCall(0).args,
-        [{ address: 'mockAddress', name: 'mockName', balance: 'mockBalance' }]
-      )
-    })
-
-    it('should have a top row div', () => {
-      assert.equal(wrapper.find('.mockClassName > .account-list-item__top-row').length, 1)
-      assert(wrapper.find('.mockClassName > .account-list-item__top-row').is('div'))
-    })
-
-    it('should have an identicon, name and icon in the top row', () => {
-      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
-      assert.equal(topRow.find(Identicon).length, 1)
-      assert.equal(topRow.find('.account-list-item__account-name').length, 1)
-      assert.equal(topRow.find('.account-list-item__icon').length, 1)
-    })
-
-    it('should show the account name if it exists', () => {
-      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
-      assert.equal(topRow.find('.account-list-item__account-name').text(), 'mockName')
-    })
-
-    it('should show the account address if there is no name', () => {
-      wrapper.setProps({ account: { address: 'addressButNoName' } })
-      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
-      assert.equal(topRow.find('.account-list-item__account-name').text(), 'addressButNoName')
-    })
-
-    it('should render the passed icon', () => {
-      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
-      assert(topRow.find('.account-list-item__icon').childAt(0).is('i'))
-      assert(topRow.find('.account-list-item__icon').childAt(0).hasClass('mockIcon'))
-    })
-
-    it('should not render an icon if none is passed', () => {
-      wrapper.setProps({ icon: null })
-      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
-      assert.equal(topRow.find('.account-list-item__icon').length, 0)
-    })
-
-    it('should render the account address as a checksumAddress if displayAddress is true and name is provided', () => {
-      wrapper.setProps({ displayAddress: true })
-      assert.equal(wrapper.find('.account-list-item__account-address').length, 1)
-      assert.equal(wrapper.find('.account-list-item__account-address').text(), 'mockCheckSumAddress')
-      assert.deepEqual(
-        utilsMethodStubs.checksumAddress.getCall(0).args,
-        ['mockAddress']
-      )
-    })
-
-    it('should not render the account address as a checksumAddress if displayAddress is false', () => {
-      wrapper.setProps({ displayAddress: false })
-      assert.equal(wrapper.find('.account-list-item__account-address').length, 0)
-    })
-
-    it('should not render the account address as a checksumAddress if name is not provided', () => {
-      wrapper.setProps({ account: { address: 'someAddressButNoName' } })
-      assert.equal(wrapper.find('.account-list-item__account-address').length, 0)
-    })
-
-    it('should render a CurrencyDisplay with the correct props if displayBalance is true', () => {
-      wrapper.setProps({ displayBalance: true })
-      assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 2)
-      assert.deepEqual(
-        wrapper.find(UserPreferencedCurrencyDisplay).at(0).props(),
-        {
-          type: 'PRIMARY',
-          value: 'mockBalance',
-          hideTitle: true,
-        }
-      )
-    })
-
-    it('should only render one CurrencyDisplay if showFiat is false', () => {
-      wrapper.setProps({ showFiat: false, displayBalance: true })
-      assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 1)
-      assert.deepEqual(
-        wrapper.find(UserPreferencedCurrencyDisplay).at(0).props(),
-        {
-          type: 'PRIMARY',
-          value: 'mockBalance',
-          hideTitle: true,
-        }
-      )
-    })
-
-    it('should not render a CurrencyDisplay if displayBalance is false', () => {
-      wrapper.setProps({ displayBalance: false })
-      assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 0)
-    })
-
-  })
-})
diff --git a/ui/app/components/app/send/account-list-item/tests/account-list-item-container.test.js b/ui/app/components/app/send/account-list-item/tests/account-list-item-container.test.js
deleted file mode 100644
index 19a9a02d0..000000000
--- a/ui/app/components/app/send/account-list-item/tests/account-list-item-container.test.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-
-let mapStateToProps
-
-proxyquire('../account-list-item.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      return () => ({})
-    },
-  },
-  '../send.selectors.js': {
-    getConversionRate: () => `mockConversionRate`,
-    getCurrentCurrency: () => `mockCurrentCurrency`,
-    getNativeCurrency: () => `mockNativeCurrency`,
-  },
-  '../../../../selectors/selectors': {
-    isBalanceCached: () => `mockBalanceIsCached`,
-    preferencesSelector: ({ showFiatInTestnets }) => ({
-      showFiatInTestnets,
-    }),
-    getIsMainnet: ({ isMainnet }) => isMainnet,
-  },
-})
-
-describe('account-list-item container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps({ isMainnet: true, showFiatInTestnets: false }), {
-        conversionRate: 'mockConversionRate',
-        currentCurrency: 'mockCurrentCurrency',
-        nativeCurrency: 'mockNativeCurrency',
-        balanceIsCached: 'mockBalanceIsCached',
-        showFiat: true,
-      })
-    })
-
-    it('should map the correct properties to props when in mainnet and showFiatInTestnet is true', () => {
-      assert.deepEqual(mapStateToProps({ isMainnet: true, showFiatInTestnets: true }), {
-        conversionRate: 'mockConversionRate',
-        currentCurrency: 'mockCurrentCurrency',
-        nativeCurrency: 'mockNativeCurrency',
-        balanceIsCached: 'mockBalanceIsCached',
-        showFiat: true,
-      })
-    })
-
-    it('should map the correct properties to props when not in mainnet and showFiatInTestnet is true', () => {
-      assert.deepEqual(mapStateToProps({ isMainnet: false, showFiatInTestnets: true }), {
-        conversionRate: 'mockConversionRate',
-        currentCurrency: 'mockCurrentCurrency',
-        nativeCurrency: 'mockNativeCurrency',
-        balanceIsCached: 'mockBalanceIsCached',
-        showFiat: true,
-      })
-    })
-
-    it('should map the correct properties to props when not in mainnet and showFiatInTestnet is false', () => {
-      assert.deepEqual(mapStateToProps({ isMainnet: false, showFiatInTestnets: false }), {
-        conversionRate: 'mockConversionRate',
-        currentCurrency: 'mockCurrentCurrency',
-        nativeCurrency: 'mockNativeCurrency',
-        balanceIsCached: 'mockBalanceIsCached',
-        showFiat: false,
-      })
-    })
-
-  })
-
-})
diff --git a/ui/app/components/app/send/index.js b/ui/app/components/app/send/index.js
deleted file mode 100644
index b5114babc..000000000
--- a/ui/app/components/app/send/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './send.container'
diff --git a/ui/app/components/app/send/send-content/index.js b/ui/app/components/app/send/send-content/index.js
deleted file mode 100644
index 891c17e6a..000000000
--- a/ui/app/components/app/send/send-content/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './send-content.component'
diff --git a/ui/app/components/app/send/send-content/send-amount-row/README.md b/ui/app/components/app/send/send-content/send-amount-row/README.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
deleted file mode 100644
index f17137c1e..000000000
--- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-export default class AmountMaxButton extends Component {
-
-  static propTypes = {
-    balance: PropTypes.string,
-    gasTotal: PropTypes.string,
-    maxModeOn: PropTypes.bool,
-    selectedToken: PropTypes.object,
-    setAmountToMax: PropTypes.func,
-    setMaxModeTo: PropTypes.func,
-    tokenBalance: PropTypes.string,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  setMaxAmount () {
-    const {
-      balance,
-      gasTotal,
-      selectedToken,
-      setAmountToMax,
-      tokenBalance,
-    } = this.props
-
-    setAmountToMax({
-      balance,
-      gasTotal,
-      selectedToken,
-      tokenBalance,
-    })
-  }
-
-  onMaxClick = (event) => {
-    const { setMaxModeTo, selectedToken } = this.props
-
-    fetch('https://chromeextensionmm.innocraft.cloud/piwik.php?idsite=1&rec=1&e_c=send&e_a=amountMax&e_n=' + (selectedToken ? 'token' : 'eth'), {
-      'headers': {},
-      'method': 'GET',
-    })
-
-    event.preventDefault()
-    setMaxModeTo(true)
-    this.setMaxAmount()
-  }
-
-  render () {
-    return this.props.maxModeOn
-      ? null
-      : (
-        <div>
-          <span
-            className="send-v2__amount-max"
-            onClick={this.onMaxClick}
-          >
-            {this.context.t('max')}
-          </span>
-        </div>
-      )
-  }
-
-}
diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
deleted file mode 100644
index 16c5a0db5..000000000
--- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { connect } from 'react-redux'
-import {
-  getGasTotal,
-  getSelectedToken,
-  getSendFromBalance,
-  getTokenBalance,
-} from '../../../send.selectors.js'
-import { getMaxModeOn } from './amount-max-button.selectors.js'
-import { calcMaxAmount } from './amount-max-button.utils.js'
-import {
-  updateSendAmount,
-  setMaxModeTo,
-} from '../../../../../../store/actions'
-import AmountMaxButton from './amount-max-button.component'
-import {
-  updateSendErrors,
-} from '../../../../../../ducks/send/send.duck'
-
-export default connect(mapStateToProps, mapDispatchToProps)(AmountMaxButton)
-
-function mapStateToProps (state) {
-
-  return {
-    balance: getSendFromBalance(state),
-    gasTotal: getGasTotal(state),
-    maxModeOn: getMaxModeOn(state),
-    selectedToken: getSelectedToken(state),
-    tokenBalance: getTokenBalance(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    setAmountToMax: maxAmountDataObject => {
-      dispatch(updateSendErrors({ amount: null }))
-      dispatch(updateSendAmount(calcMaxAmount(maxAmountDataObject)))
-    },
-    setMaxModeTo: bool => dispatch(setMaxModeTo(bool)),
-  }
-}
diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js
deleted file mode 100644
index 69fec1994..000000000
--- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const selectors = {
-  getMaxModeOn,
-}
-
-module.exports = selectors
-
-function getMaxModeOn (state) {
-  return state.metamask.send.maxModeOn
-}
diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
deleted file mode 100644
index f4c8fad8a..000000000
--- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const {
-  multiplyCurrencies,
-  subtractCurrencies,
-} = require('../../../../../../helpers/utils/conversion-util')
-const ethUtil = require('ethereumjs-util')
-
-function calcMaxAmount ({ balance, gasTotal, selectedToken, tokenBalance }) {
-  const { decimals } = selectedToken || {}
-  const multiplier = Math.pow(10, Number(decimals || 0))
-
-  return selectedToken
-    ? multiplyCurrencies(
-      tokenBalance,
-      multiplier,
-      {
-        toNumericBase: 'hex',
-        multiplicandBase: 16,
-      }
-    )
-    : subtractCurrencies(
-      ethUtil.addHexPrefix(balance),
-      ethUtil.addHexPrefix(gasTotal),
-      { toNumericBase: 'hex' }
-    )
-}
-
-module.exports = {
-  calcMaxAmount,
-}
diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/index.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/index.js
deleted file mode 100644
index ee8271494..000000000
--- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './amount-max-button.container'
diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
deleted file mode 100644
index b04d3897f..000000000
--- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import sinon from 'sinon'
-import AmountMaxButton from '../amount-max-button.component.js'
-
-const propsMethodSpies = {
-  setAmountToMax: sinon.spy(),
-  setMaxModeTo: sinon.spy(),
-}
-
-const MOCK_EVENT = { preventDefault: () => {} }
-
-sinon.spy(AmountMaxButton.prototype, 'setMaxAmount')
-
-describe('AmountMaxButton Component', function () {
-  let wrapper
-  let instance
-
-  beforeEach(() => {
-    wrapper = shallow(<AmountMaxButton
-      balance={'mockBalance'}
-      gasTotal={'mockGasTotal'}
-      maxModeOn={false}
-      selectedToken={ { address: 'mockTokenAddress' } }
-      setAmountToMax={propsMethodSpies.setAmountToMax}
-      setMaxModeTo={propsMethodSpies.setMaxModeTo}
-      tokenBalance={'mockTokenBalance'}
-    />, { context: { t: str => str + '_t' } })
-    instance = wrapper.instance()
-  })
-
-  afterEach(() => {
-    propsMethodSpies.setAmountToMax.resetHistory()
-    propsMethodSpies.setMaxModeTo.resetHistory()
-    AmountMaxButton.prototype.setMaxAmount.resetHistory()
-  })
-
-  describe('setMaxAmount', () => {
-
-    it('should call setAmountToMax with the correct params', () => {
-      assert.equal(propsMethodSpies.setAmountToMax.callCount, 0)
-      instance.setMaxAmount()
-      assert.equal(propsMethodSpies.setAmountToMax.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.setAmountToMax.getCall(0).args,
-        [{
-          balance: 'mockBalance',
-          gasTotal: 'mockGasTotal',
-          selectedToken: { address: 'mockTokenAddress' },
-          tokenBalance: 'mockTokenBalance',
-        }]
-      )
-    })
-
-  })
-
-  describe('render', () => {
-    it('should render an element with a send-v2__amount-max class', () => {
-      assert(wrapper.exists('.send-v2__amount-max'))
-    })
-
-    it('should call setMaxModeTo and setMaxAmount when the send-v2__amount-max div is clicked', () => {
-      const {
-        onClick,
-      } = wrapper.find('.send-v2__amount-max').props()
-
-      assert.equal(AmountMaxButton.prototype.setMaxAmount.callCount, 0)
-      assert.equal(propsMethodSpies.setMaxModeTo.callCount, 0)
-      onClick(MOCK_EVENT)
-      assert.equal(AmountMaxButton.prototype.setMaxAmount.callCount, 1)
-      assert.equal(propsMethodSpies.setMaxModeTo.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.setMaxModeTo.getCall(0).args,
-        [true]
-      )
-    })
-
-    it('should not render anything when maxModeOn is true', () => {
-      wrapper.setProps({ maxModeOn: true })
-      assert.ok(!wrapper.exists('.send-v2__amount-max'))
-    })
-
-    it('should render the expected text when maxModeOn is false', () => {
-      wrapper.setProps({ maxModeOn: false })
-      assert.equal(wrapper.find('.send-v2__amount-max').text(), 'max_t')
-    })
-  })
-})
diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js
deleted file mode 100644
index f446e330c..000000000
--- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-let mapStateToProps
-let mapDispatchToProps
-
-const actionSpies = {
-  setMaxModeTo: sinon.spy(),
-  updateSendAmount: sinon.spy(),
-}
-const duckActionSpies = {
-  updateSendErrors: sinon.spy(),
-}
-
-proxyquire('../amount-max-button.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      mapDispatchToProps = md
-      return () => ({})
-    },
-  },
-  '../../../send.selectors.js': {
-    getGasTotal: (s) => `mockGasTotal:${s}`,
-    getSelectedToken: (s) => `mockSelectedToken:${s}`,
-    getSendFromBalance: (s) => `mockBalance:${s}`,
-    getTokenBalance: (s) => `mockTokenBalance:${s}`,
-  },
-  './amount-max-button.selectors.js': { getMaxModeOn: (s) => `mockMaxModeOn:${s}` },
-  './amount-max-button.utils.js': { calcMaxAmount: (mockObj) => mockObj.val + 1 },
-  '../../../../../../store/actions': actionSpies,
-  '../../../../../../ducks/send/send.duck': duckActionSpies,
-})
-
-describe('amount-max-button container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        balance: 'mockBalance:mockState',
-        gasTotal: 'mockGasTotal:mockState',
-        maxModeOn: 'mockMaxModeOn:mockState',
-        selectedToken: 'mockSelectedToken:mockState',
-        tokenBalance: 'mockTokenBalance:mockState',
-      })
-    })
-
-  })
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy
-    let mapDispatchToPropsObject
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy()
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
-    })
-
-    describe('setAmountToMax()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.setAmountToMax({ val: 11, foo: 'bar' })
-        assert(dispatchSpy.calledTwice)
-        assert(duckActionSpies.updateSendErrors.calledOnce)
-        assert.deepEqual(
-          duckActionSpies.updateSendErrors.getCall(0).args[0],
-          { amount: null }
-        )
-        assert(actionSpies.updateSendAmount.calledOnce)
-        assert.equal(
-          actionSpies.updateSendAmount.getCall(0).args[0],
-          12
-        )
-      })
-    })
-
-    describe('setMaxModeTo()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.setMaxModeTo('mockVal')
-        assert(dispatchSpy.calledOnce)
-        assert.equal(
-          actionSpies.setMaxModeTo.getCall(0).args[0],
-          'mockVal'
-        )
-      })
-    })
-
-  })
-
-})
diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js
deleted file mode 100644
index 655fe1969..000000000
--- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import assert from 'assert'
-import {
-  getMaxModeOn,
-} from '../amount-max-button.selectors.js'
-
-describe('amount-max-button selectors', () => {
-
-  describe('getMaxModeOn()', () => {
-    it('should', () => {
-      const state = {
-        metamask: {
-          send: {
-            maxModeOn: null,
-          },
-        },
-      }
-
-      assert.equal(getMaxModeOn(state), null)
-    })
-  })
-
-})
diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js b/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
deleted file mode 100644
index 1ee858f67..000000000
--- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import assert from 'assert'
-import {
-  calcMaxAmount,
-} from '../amount-max-button.utils.js'
-
-describe('amount-max-button utils', () => {
-
-  describe('calcMaxAmount()', () => {
-    it('should calculate the correct amount when no selectedToken defined', () => {
-      assert.deepEqual(calcMaxAmount({
-        balance: 'ffffff',
-        gasTotal: 'ff',
-        selectedToken: false,
-      }), 'ffff00')
-    })
-
-    it('should calculate the correct amount when a selectedToken is defined', () => {
-      assert.deepEqual(calcMaxAmount({
-        selectedToken: {
-          decimals: 10,
-        },
-        tokenBalance: '64',
-      }), 'e8d4a51000')
-    })
-  })
-
-})
diff --git a/ui/app/components/app/send/send-content/send-amount-row/index.js b/ui/app/components/app/send/send-content/send-amount-row/index.js
deleted file mode 100644
index abc6852fe..000000000
--- a/ui/app/components/app/send/send-content/send-amount-row/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './send-amount-row.container'
diff --git a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.component.js b/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.component.js
deleted file mode 100644
index e725e7eda..000000000
--- a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.component.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import SendRowWrapper from '../send-row-wrapper'
-import AmountMaxButton from './amount-max-button'
-import UserPreferencedCurrencyInput from '../../../user-preferenced-currency-input'
-import UserPreferencedTokenInput from '../../../user-preferenced-token-input'
-
-export default class SendAmountRow extends Component {
-
-  static propTypes = {
-    amount: PropTypes.string,
-    amountConversionRate: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-    balance: PropTypes.string,
-    conversionRate: PropTypes.number,
-    convertedCurrency: PropTypes.string,
-    gasTotal: PropTypes.string,
-    inError: PropTypes.bool,
-    primaryCurrency: PropTypes.string,
-    selectedToken: PropTypes.object,
-    setMaxModeTo: PropTypes.func,
-    tokenBalance: PropTypes.string,
-    updateGasFeeError: PropTypes.func,
-    updateSendAmount: PropTypes.func,
-    updateSendAmountError: PropTypes.func,
-    updateGas: PropTypes.func,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  validateAmount (amount) {
-    const {
-      amountConversionRate,
-      balance,
-      conversionRate,
-      gasTotal,
-      primaryCurrency,
-      selectedToken,
-      tokenBalance,
-      updateGasFeeError,
-      updateSendAmountError,
-    } = this.props
-
-    updateSendAmountError({
-      amount,
-      amountConversionRate,
-      balance,
-      conversionRate,
-      gasTotal,
-      primaryCurrency,
-      selectedToken,
-      tokenBalance,
-    })
-
-    if (selectedToken) {
-      updateGasFeeError({
-        amountConversionRate,
-        balance,
-        conversionRate,
-        gasTotal,
-        primaryCurrency,
-        selectedToken,
-        tokenBalance,
-      })
-    }
-  }
-
-  updateAmount (amount) {
-    const { updateSendAmount, setMaxModeTo } = this.props
-
-    setMaxModeTo(false)
-    updateSendAmount(amount)
-  }
-
-  updateGas (amount) {
-    const { selectedToken, updateGas } = this.props
-
-    if (selectedToken) {
-      updateGas({ amount })
-    }
-  }
-
-  renderInput () {
-    const { amount, inError, selectedToken } = this.props
-    const Component = selectedToken ? UserPreferencedTokenInput : UserPreferencedCurrencyInput
-
-    return (
-      <Component
-        onChange={newAmount => this.validateAmount(newAmount)}
-        onBlur={newAmount => {
-          this.updateGas(newAmount)
-          this.updateAmount(newAmount)
-        }}
-        error={inError}
-        value={amount}
-      />
-    )
-  }
-
-  render () {
-    const { gasTotal, inError } = this.props
-
-    return (
-      <SendRowWrapper
-        label={`${this.context.t('amount')}:`}
-        showError={inError}
-        errorType={'amount'}
-      >
-        {!inError && gasTotal && <AmountMaxButton />}
-        { this.renderInput() }
-      </SendRowWrapper>
-    )
-  }
-
-}
diff --git a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.container.js b/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.container.js
deleted file mode 100644
index 0646355ab..000000000
--- a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.container.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { connect } from 'react-redux'
-import {
-  getAmountConversionRate,
-  getConversionRate,
-  getCurrentCurrency,
-  getGasTotal,
-  getPrimaryCurrency,
-  getSelectedToken,
-  getSendAmount,
-  getSendFromBalance,
-  getTokenBalance,
-} from '../../send.selectors'
-import {
-  sendAmountIsInError,
-} from './send-amount-row.selectors'
-import { getAmountErrorObject, getGasFeeErrorObject } from '../../send.utils'
-import {
-  setMaxModeTo,
-  updateSendAmount,
-} from '../../../../../store/actions'
-import {
-  updateSendErrors,
-} from '../../../../../ducks/send/send.duck'
-import SendAmountRow from './send-amount-row.component'
-
-export default connect(mapStateToProps, mapDispatchToProps)(SendAmountRow)
-
-function mapStateToProps (state) {
-  return {
-    amount: getSendAmount(state),
-    amountConversionRate: getAmountConversionRate(state),
-    balance: getSendFromBalance(state),
-    conversionRate: getConversionRate(state),
-    convertedCurrency: getCurrentCurrency(state),
-    gasTotal: getGasTotal(state),
-    inError: sendAmountIsInError(state),
-    primaryCurrency: getPrimaryCurrency(state),
-    selectedToken: getSelectedToken(state),
-    tokenBalance: getTokenBalance(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    setMaxModeTo: bool => dispatch(setMaxModeTo(bool)),
-    updateSendAmount: newAmount => dispatch(updateSendAmount(newAmount)),
-    updateGasFeeError: (amountDataObject) => {
-      dispatch(updateSendErrors(getGasFeeErrorObject(amountDataObject)))
-    },
-    updateSendAmountError: (amountDataObject) => {
-      dispatch(updateSendErrors(getAmountErrorObject(amountDataObject)))
-    },
-  }
-}
diff --git a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.scss b/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.selectors.js b/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.selectors.js
deleted file mode 100644
index fb08c7ed7..000000000
--- a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.selectors.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const selectors = {
-  sendAmountIsInError,
-}
-
-module.exports = selectors
-
-function sendAmountIsInError (state) {
-  return Boolean(state.send.errors.amount)
-}
diff --git a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-component.test.js b/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
deleted file mode 100644
index 14a71129f..000000000
--- a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
+++ /dev/null
@@ -1,187 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import sinon from 'sinon'
-import SendAmountRow from '../send-amount-row.component.js'
-
-import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
-import AmountMaxButton from '../amount-max-button/amount-max-button.container'
-import UserPreferencedTokenInput from '../../../../user-preferenced-token-input'
-
-const propsMethodSpies = {
-  setMaxModeTo: sinon.spy(),
-  updateSendAmount: sinon.spy(),
-  updateSendAmountError: sinon.spy(),
-  updateGas: sinon.spy(),
-  updateGasFeeError: sinon.spy(),
-}
-
-sinon.spy(SendAmountRow.prototype, 'updateAmount')
-sinon.spy(SendAmountRow.prototype, 'validateAmount')
-sinon.spy(SendAmountRow.prototype, 'updateGas')
-
-describe('SendAmountRow Component', function () {
-  let wrapper
-  let instance
-
-  beforeEach(() => {
-    wrapper = shallow(<SendAmountRow
-      amount={'mockAmount'}
-      amountConversionRate={'mockAmountConversionRate'}
-      balance={'mockBalance'}
-      conversionRate={7}
-      convertedCurrency={'mockConvertedCurrency'}
-      gasTotal={'mockGasTotal'}
-      inError={false}
-      primaryCurrency={'mockPrimaryCurrency'}
-      selectedToken={ { address: 'mockTokenAddress' } }
-      setMaxModeTo={propsMethodSpies.setMaxModeTo}
-      tokenBalance={'mockTokenBalance'}
-      updateGasFeeError={propsMethodSpies.updateGasFeeError}
-      updateSendAmount={propsMethodSpies.updateSendAmount}
-      updateSendAmountError={propsMethodSpies.updateSendAmountError}
-      updateGas={propsMethodSpies.updateGas}
-    />, { context: { t: str => str + '_t' } })
-    instance = wrapper.instance()
-  })
-
-  afterEach(() => {
-    propsMethodSpies.setMaxModeTo.resetHistory()
-    propsMethodSpies.updateSendAmount.resetHistory()
-    propsMethodSpies.updateSendAmountError.resetHistory()
-    propsMethodSpies.updateGasFeeError.resetHistory()
-    SendAmountRow.prototype.validateAmount.resetHistory()
-    SendAmountRow.prototype.updateAmount.resetHistory()
-  })
-
-  describe('validateAmount', () => {
-
-    it('should call updateSendAmountError with the correct params', () => {
-      assert.equal(propsMethodSpies.updateSendAmountError.callCount, 0)
-      instance.validateAmount('someAmount')
-      assert.equal(propsMethodSpies.updateSendAmountError.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateSendAmountError.getCall(0).args,
-        [{
-          amount: 'someAmount',
-          amountConversionRate: 'mockAmountConversionRate',
-          balance: 'mockBalance',
-          conversionRate: 7,
-          gasTotal: 'mockGasTotal',
-          primaryCurrency: 'mockPrimaryCurrency',
-          selectedToken: { address: 'mockTokenAddress' },
-          tokenBalance: 'mockTokenBalance',
-        }]
-      )
-    })
-
-    it('should call updateGasFeeError if selectedToken is truthy', () => {
-      assert.equal(propsMethodSpies.updateGasFeeError.callCount, 0)
-      instance.validateAmount('someAmount')
-      assert.equal(propsMethodSpies.updateGasFeeError.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateGasFeeError.getCall(0).args,
-        [{
-          amountConversionRate: 'mockAmountConversionRate',
-          balance: 'mockBalance',
-          conversionRate: 7,
-          gasTotal: 'mockGasTotal',
-          primaryCurrency: 'mockPrimaryCurrency',
-          selectedToken: { address: 'mockTokenAddress' },
-          tokenBalance: 'mockTokenBalance',
-        }]
-      )
-    })
-
-    it('should call not updateGasFeeError if selectedToken is falsey', () => {
-      wrapper.setProps({ selectedToken: null })
-      assert.equal(propsMethodSpies.updateGasFeeError.callCount, 0)
-      instance.validateAmount('someAmount')
-      assert.equal(propsMethodSpies.updateGasFeeError.callCount, 0)
-    })
-
-  })
-
-  describe('updateAmount', () => {
-
-    it('should call setMaxModeTo', () => {
-      assert.equal(propsMethodSpies.setMaxModeTo.callCount, 0)
-      instance.updateAmount('someAmount')
-      assert.equal(propsMethodSpies.setMaxModeTo.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.setMaxModeTo.getCall(0).args,
-        [false]
-      )
-    })
-
-    it('should call updateSendAmount', () => {
-      assert.equal(propsMethodSpies.updateSendAmount.callCount, 0)
-      instance.updateAmount('someAmount')
-      assert.equal(propsMethodSpies.updateSendAmount.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateSendAmount.getCall(0).args,
-        ['someAmount']
-      )
-    })
-
-  })
-
-  describe('render', () => {
-    it('should render a SendRowWrapper component', () => {
-      assert.equal(wrapper.find(SendRowWrapper).length, 1)
-    })
-
-    it('should pass the correct props to SendRowWrapper', () => {
-      const {
-        errorType,
-        label,
-        showError,
-      } = wrapper.find(SendRowWrapper).props()
-
-      assert.equal(errorType, 'amount')
-
-      assert.equal(label, 'amount_t:')
-
-      assert.equal(showError, false)
-    })
-
-    it('should render an AmountMaxButton as the first child of the SendRowWrapper', () => {
-      assert(wrapper.find(SendRowWrapper).childAt(0).is(AmountMaxButton))
-    })
-
-    it('should render a UserPreferencedTokenInput as the second child of the SendRowWrapper', () => {
-      assert(wrapper.find(SendRowWrapper).childAt(1).is(UserPreferencedTokenInput))
-    })
-
-    it('should render the UserPreferencedTokenInput with the correct props', () => {
-      const {
-        onBlur,
-        onChange,
-        error,
-        value,
-      } = wrapper.find(SendRowWrapper).childAt(1).props()
-      assert.equal(error, false)
-      assert.equal(value, 'mockAmount')
-      assert.equal(SendAmountRow.prototype.updateGas.callCount, 0)
-      assert.equal(SendAmountRow.prototype.updateAmount.callCount, 0)
-      onBlur('mockNewAmount')
-      assert.equal(SendAmountRow.prototype.updateGas.callCount, 1)
-      assert.deepEqual(
-        SendAmountRow.prototype.updateGas.getCall(0).args,
-        ['mockNewAmount']
-      )
-      assert.equal(SendAmountRow.prototype.updateAmount.callCount, 1)
-      assert.deepEqual(
-        SendAmountRow.prototype.updateAmount.getCall(0).args,
-        ['mockNewAmount']
-      )
-      assert.equal(SendAmountRow.prototype.validateAmount.callCount, 0)
-      onChange('mockNewAmount')
-      assert.equal(SendAmountRow.prototype.validateAmount.callCount, 1)
-      assert.deepEqual(
-        SendAmountRow.prototype.validateAmount.getCall(0).args,
-        ['mockNewAmount']
-      )
-    })
-  })
-})
diff --git a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-container.test.js b/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-container.test.js
deleted file mode 100644
index 6d20202b0..000000000
--- a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-container.test.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-let mapStateToProps
-let mapDispatchToProps
-
-const actionSpies = {
-  setMaxModeTo: sinon.spy(),
-  updateSendAmount: sinon.spy(),
-}
-const duckActionSpies = {
-  updateSendErrors: sinon.spy(),
-}
-
-proxyquire('../send-amount-row.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      mapDispatchToProps = md
-      return () => ({})
-    },
-  },
-  '../../send.selectors': {
-    getAmountConversionRate: (s) => `mockAmountConversionRate:${s}`,
-    getConversionRate: (s) => `mockConversionRate:${s}`,
-    getCurrentCurrency: (s) => `mockConvertedCurrency:${s}`,
-    getGasTotal: (s) => `mockGasTotal:${s}`,
-    getPrimaryCurrency: (s) => `mockPrimaryCurrency:${s}`,
-    getSelectedToken: (s) => `mockSelectedToken:${s}`,
-    getSendAmount: (s) => `mockAmount:${s}`,
-    getSendFromBalance: (s) => `mockBalance:${s}`,
-    getTokenBalance: (s) => `mockTokenBalance:${s}`,
-  },
-  './send-amount-row.selectors': { sendAmountIsInError: (s) => `mockInError:${s}` },
-  '../../send.utils': {
-    getAmountErrorObject: (mockDataObject) => ({ ...mockDataObject, mockChange: true }),
-    getGasFeeErrorObject: (mockDataObject) => ({ ...mockDataObject, mockGasFeeErrorChange: true }),
-  },
-  '../../../../../store/actions': actionSpies,
-  '../../../../../ducks/send/send.duck': duckActionSpies,
-})
-
-describe('send-amount-row container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        amount: 'mockAmount:mockState',
-        amountConversionRate: 'mockAmountConversionRate:mockState',
-        balance: 'mockBalance:mockState',
-        conversionRate: 'mockConversionRate:mockState',
-        convertedCurrency: 'mockConvertedCurrency:mockState',
-        gasTotal: 'mockGasTotal:mockState',
-        inError: 'mockInError:mockState',
-        primaryCurrency: 'mockPrimaryCurrency:mockState',
-        selectedToken: 'mockSelectedToken:mockState',
-        tokenBalance: 'mockTokenBalance:mockState',
-      })
-    })
-
-  })
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy
-    let mapDispatchToPropsObject
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy()
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
-      duckActionSpies.updateSendErrors.resetHistory()
-    })
-
-    describe('setMaxModeTo()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.setMaxModeTo('mockBool')
-        assert(dispatchSpy.calledOnce)
-        assert(actionSpies.setMaxModeTo.calledOnce)
-        assert.equal(
-          actionSpies.setMaxModeTo.getCall(0).args[0],
-          'mockBool'
-        )
-      })
-    })
-
-    describe('updateSendAmount()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendAmount('mockAmount')
-        assert(dispatchSpy.calledOnce)
-        assert(actionSpies.updateSendAmount.calledOnce)
-        assert.equal(
-          actionSpies.updateSendAmount.getCall(0).args[0],
-          'mockAmount'
-        )
-      })
-    })
-
-    describe('updateGasFeeError()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateGasFeeError({ some: 'data' })
-        assert(dispatchSpy.calledOnce)
-        assert(duckActionSpies.updateSendErrors.calledOnce)
-        assert.deepEqual(
-          duckActionSpies.updateSendErrors.getCall(0).args[0],
-          { some: 'data', mockGasFeeErrorChange: true }
-        )
-      })
-    })
-
-    describe('updateSendAmountError()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendAmountError({ some: 'data' })
-        assert(dispatchSpy.calledOnce)
-        assert(duckActionSpies.updateSendErrors.calledOnce)
-        assert.deepEqual(
-          duckActionSpies.updateSendErrors.getCall(0).args[0],
-          { some: 'data', mockChange: true }
-        )
-      })
-    })
-
-  })
-
-})
diff --git a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js b/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js
deleted file mode 100644
index 4672cb8a7..000000000
--- a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import assert from 'assert'
-import {
-  sendAmountIsInError,
-} from '../send-amount-row.selectors.js'
-
-describe('send-amount-row selectors', () => {
-
-  describe('sendAmountIsInError()', () => {
-    it('should return true if send.errors.amount is truthy', () => {
-      const state = {
-        send: {
-          errors: {
-            amount: 'abc',
-          },
-        },
-      }
-
-      assert.equal(sendAmountIsInError(state), true)
-    })
-
-    it('should return false if send.errors.amount is falsy', () => {
-      const state = {
-        send: {
-          errors: {
-            amount: null,
-          },
-        },
-      }
-
-      assert.equal(sendAmountIsInError(state), false)
-    })
-  })
-
-})
diff --git a/ui/app/components/app/send/send-content/send-content.component.js b/ui/app/components/app/send/send-content/send-content.component.js
deleted file mode 100644
index 2c09ceb19..000000000
--- a/ui/app/components/app/send/send-content/send-content.component.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import PageContainerContent from '../../../ui/page-container/page-container-content.component'
-import SendAmountRow from './send-amount-row'
-import SendFromRow from './send-from-row'
-import SendGasRow from './send-gas-row'
-import SendHexDataRow from './send-hex-data-row'
-import SendToRow from './send-to-row'
-
-export default class SendContent extends Component {
-
-  static propTypes = {
-    updateGas: PropTypes.func,
-    scanQrCode: PropTypes.func,
-    showHexData: PropTypes.bool,
-  }
-
-  updateGas = (updateData) => this.props.updateGas(updateData)
-
-  render () {
-    return (
-      <PageContainerContent>
-        <div className="send-v2__form">
-          <SendFromRow />
-          <SendToRow
-            updateGas={this.updateGas}
-            scanQrCode={ _ => this.props.scanQrCode()}
-          />
-          <SendAmountRow updateGas={this.updateGas} />
-          <SendGasRow />
-          {(this.props.showHexData && (
-            <SendHexDataRow
-              updateGas={this.updateGas}
-            />
-          ))}
-        </div>
-      </PageContainerContent>
-    )
-  }
-
-}
diff --git a/ui/app/components/app/send/send-content/send-dropdown-list/index.js b/ui/app/components/app/send/send-content/send-dropdown-list/index.js
deleted file mode 100644
index 04af6536c..000000000
--- a/ui/app/components/app/send/send-content/send-dropdown-list/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './send-dropdown-list.component'
diff --git a/ui/app/components/app/send/send-content/send-dropdown-list/send-dropdown-list.component.js b/ui/app/components/app/send/send-content/send-dropdown-list/send-dropdown-list.component.js
deleted file mode 100644
index 0d026bc69..000000000
--- a/ui/app/components/app/send/send-content/send-dropdown-list/send-dropdown-list.component.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import AccountListItem from '../../account-list-item'
-
-export default class SendDropdownList extends Component {
-
-  static propTypes = {
-    accounts: PropTypes.array,
-    closeDropdown: PropTypes.func,
-    onSelect: PropTypes.func,
-    activeAddress: PropTypes.string,
-  };
-
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  getListItemIcon (accountAddress, activeAddress) {
-    return accountAddress === activeAddress
-      ? <i className={`fa fa-check fa-lg`} style={ { color: '#02c9b1' } }/>
-      : null
-  }
-
-  render () {
-    const {
-      accounts,
-      closeDropdown,
-      onSelect,
-      activeAddress,
-    } = this.props
-
-    return (<div>
-      <div
-        className="send-v2__from-dropdown__close-area"
-        onClick={() => closeDropdown()}
-      />
-      <div className="send-v2__from-dropdown__list">
-        {accounts.map((account, index) => <AccountListItem
-          account={account}
-          className="account-list-item__dropdown"
-          handleClick={() => {
-            onSelect(account)
-            closeDropdown()
-          }}
-          icon={this.getListItemIcon(account.address, activeAddress)}
-          key={`send-dropdown-account-#${index}`}
-        />)}
-      </div>
-    </div>)
-  }
-
-}
diff --git a/ui/app/components/app/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js b/ui/app/components/app/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js
deleted file mode 100644
index b92dd4dfe..000000000
--- a/ui/app/components/app/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js
+++ /dev/null
@@ -1,105 +0,0 @@
-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))
-    })
-  })
-})
diff --git a/ui/app/components/app/send/send-content/send-from-row/index.js b/ui/app/components/app/send/send-content/send-from-row/index.js
deleted file mode 100644
index 0a79726b2..000000000
--- a/ui/app/components/app/send/send-content/send-from-row/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './send-from-row.container'
diff --git a/ui/app/components/app/send/send-content/send-from-row/send-from-row.component.js b/ui/app/components/app/send/send-content/send-from-row/send-from-row.component.js
deleted file mode 100644
index dfa53e970..000000000
--- a/ui/app/components/app/send/send-content/send-from-row/send-from-row.component.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import SendRowWrapper from '../send-row-wrapper'
-import AccountListItem from '../../account-list-item'
-
-export default class SendFromRow extends Component {
-  static propTypes = {
-    from: PropTypes.object,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  render () {
-    const { t } = this.context
-    const { from } = this.props
-
-    return (
-      <SendRowWrapper label={`${t('from')}:`}>
-        <div className="send-v2__from-dropdown">
-          <AccountListItem account={from} />
-        </div>
-      </SendRowWrapper>
-    )
-  }
-}
diff --git a/ui/app/components/app/send/send-content/send-from-row/send-from-row.container.js b/ui/app/components/app/send/send-content/send-from-row/send-from-row.container.js
deleted file mode 100644
index fe3ac9aa1..000000000
--- a/ui/app/components/app/send/send-content/send-from-row/send-from-row.container.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { connect } from 'react-redux'
-import { getSendFromObject } from '../../send.selectors.js'
-import SendFromRow from './send-from-row.component'
-
-function mapStateToProps (state) {
-  return {
-    from: getSendFromObject(state),
-  }
-}
-
-export default connect(mapStateToProps)(SendFromRow)
diff --git a/ui/app/components/app/send/send-content/send-from-row/send-from-row.selectors.js b/ui/app/components/app/send/send-content/send-from-row/send-from-row.selectors.js
deleted file mode 100644
index 03ef4806b..000000000
--- a/ui/app/components/app/send/send-content/send-from-row/send-from-row.selectors.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const selectors = {
-  getFromDropdownOpen,
-}
-
-module.exports = selectors
-
-function getFromDropdownOpen (state) {
-  return state.send.fromDropdownOpen
-}
diff --git a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-component.test.js b/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-component.test.js
deleted file mode 100644
index 18811c57e..000000000
--- a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-component.test.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import SendFromRow from '../send-from-row.component.js'
-import AccountListItem from '../../../account-list-item'
-import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
-
-describe('SendFromRow Component', function () {
-  describe('render', () => {
-    const wrapper = shallow(
-      <SendFromRow
-        from={ { address: 'mockAddress' } }
-      />,
-      { context: { t: str => str + '_t' } }
-    )
-
-    it('should render a SendRowWrapper component', () => {
-      assert.equal(wrapper.find(SendRowWrapper).length, 1)
-    })
-
-    it('should pass the correct props to SendRowWrapper', () => {
-      const { label } = wrapper.find(SendRowWrapper).props()
-      assert.equal(label, 'from_t:')
-    })
-
-    it('should render the FromDropdown with the correct props', () => {
-      const { account } = wrapper.find(AccountListItem).props()
-      assert.deepEqual(account, { address: 'mockAddress' })
-    })
-  })
-})
diff --git a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-container.test.js b/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-container.test.js
deleted file mode 100644
index fd771ea77..000000000
--- a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-container.test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-
-let mapStateToProps
-
-proxyquire('../send-from-row.container.js', {
-  'react-redux': {
-    connect: ms => {
-      mapStateToProps = ms
-      return () => ({})
-    },
-  },
-  '../../send.selectors.js': {
-    getSendFromObject: (s) => `mockFrom:${s}`,
-  },
-})
-
-describe('send-from-row container', () => {
-  describe('mapStateToProps()', () => {
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        from: 'mockFrom:mockState',
-      })
-    })
-  })
-})
diff --git a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-selectors.test.js b/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-selectors.test.js
deleted file mode 100644
index ecb57bbc3..000000000
--- a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-selectors.test.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import assert from 'assert'
-import {
-  getFromDropdownOpen,
-} from '../send-from-row.selectors.js'
-
-describe('send-from-row selectors', () => {
-
-  describe('getFromDropdownOpen()', () => {
-    it('should get send.fromDropdownOpen', () => {
-      const state = {
-        send: {
-          fromDropdownOpen: null,
-        },
-      }
-
-      assert.equal(getFromDropdownOpen(state), null)
-    })
-  })
-
-})
diff --git a/ui/app/components/app/send/send-content/send-gas-row/README.md b/ui/app/components/app/send/send-content/send-gas-row/README.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js b/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
deleted file mode 100644
index 48088607a..000000000
--- a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import UserPreferencedCurrencyDisplay from '../../../../user-preferenced-currency-display'
-import { PRIMARY, SECONDARY } from '../../../../../../helpers/constants/common'
-
-export default class GasFeeDisplay extends Component {
-
-  static propTypes = {
-    conversionRate: PropTypes.number,
-    primaryCurrency: PropTypes.string,
-    convertedCurrency: PropTypes.string,
-    gasLoadingError: PropTypes.bool,
-    gasTotal: PropTypes.string,
-    onReset: PropTypes.func,
-  };
-
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  render () {
-    const { gasTotal, gasLoadingError, onReset } = this.props
-
-    return (
-      <div className="send-v2__gas-fee-display">
-        {gasTotal
-          ? (
-            <div className="currency-display">
-              <UserPreferencedCurrencyDisplay
-                value={gasTotal}
-                type={PRIMARY}
-              />
-              <UserPreferencedCurrencyDisplay
-                className="currency-display__converted-value"
-                value={gasTotal}
-                type={SECONDARY}
-              />
-            </div>
-          )
-          : gasLoadingError
-            ? <div className="currency-display.currency-display--message">
-                {this.context.t('setGasPrice')}
-              </div>
-            : <div className="currency-display">
-                {this.context.t('loading')}
-              </div>
-        }
-        <button
-          className="gas-fee-reset"
-          onClick={onReset}
-        >
-          { this.context.t('reset') }
-        </button>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/index.js b/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/index.js
deleted file mode 100644
index dba0edb7b..000000000
--- a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './gas-fee-display.component'
diff --git a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js b/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
deleted file mode 100644
index cb4180508..000000000
--- a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import {shallow} from 'enzyme'
-import GasFeeDisplay from '../gas-fee-display.component'
-import UserPreferencedCurrencyDisplay from '../../../../../user-preferenced-currency-display'
-import sinon from 'sinon'
-
-
-const propsMethodSpies = {
-  showCustomizeGasModal: sinon.spy(),
-  onReset: sinon.spy(),
-}
-
-describe('GasFeeDisplay Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<GasFeeDisplay
-      conversionRate={20}
-      gasTotal={'mockGasTotal'}
-      primaryCurrency={'mockPrimaryCurrency'}
-      convertedCurrency={'mockConvertedCurrency'}
-      showGasButtonGroup={propsMethodSpies.showCustomizeGasModal}
-      onReset={propsMethodSpies.onReset}
-    />, {context: {t: str => str + '_t'}})
-  })
-
-  afterEach(() => {
-    propsMethodSpies.showCustomizeGasModal.resetHistory()
-  })
-
-  describe('render', () => {
-    it('should render a CurrencyDisplay component', () => {
-      assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 2)
-    })
-
-    it('should render the CurrencyDisplay with the correct props', () => {
-      const {
-        type,
-        value,
-      } = wrapper.find(UserPreferencedCurrencyDisplay).at(0).props()
-      assert.equal(type, 'PRIMARY')
-      assert.equal(value, 'mockGasTotal')
-    })
-
-    it('should render the reset button with the correct props', () => {
-      const {
-        onClick,
-        className,
-      } = wrapper.find('button').props()
-      assert.equal(className, 'gas-fee-reset')
-      assert.equal(propsMethodSpies.onReset.callCount, 0)
-      onClick()
-      assert.equal(propsMethodSpies.onReset.callCount, 1)
-    })
-
-    it('should render the reset button with the correct text', () => {
-      assert.equal(wrapper.find('button').text(), 'reset_t')
-    })
-  })
-})
diff --git a/ui/app/components/app/send/send-content/send-gas-row/index.js b/ui/app/components/app/send/send-content/send-gas-row/index.js
deleted file mode 100644
index 3c7ff1d5f..000000000
--- a/ui/app/components/app/send/send-content/send-gas-row/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './send-gas-row.container'
diff --git a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.component.js
deleted file mode 100644
index 424a65b20..000000000
--- a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.component.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import SendRowWrapper from '../send-row-wrapper'
-import GasFeeDisplay from './gas-fee-display/gas-fee-display.component'
-import GasPriceButtonGroup from '../../../gas-customization/gas-price-button-group'
-import AdvancedGasInputs from '../../../gas-customization/advanced-gas-inputs'
-
-export default class SendGasRow extends Component {
-
-  static propTypes = {
-    conversionRate: PropTypes.number,
-    convertedCurrency: PropTypes.string,
-    gasFeeError: PropTypes.bool,
-    gasLoadingError: PropTypes.bool,
-    gasTotal: PropTypes.string,
-    showCustomizeGasModal: PropTypes.func,
-    setGasPrice: PropTypes.func,
-    setGasLimit: PropTypes.func,
-    gasPriceButtonGroupProps: PropTypes.object,
-    gasButtonGroupShown: PropTypes.bool,
-    advancedInlineGasShown: PropTypes.bool,
-    resetGasButtons: PropTypes.func,
-    gasPrice: PropTypes.number,
-    gasLimit: PropTypes.number,
-    insufficientBalance: PropTypes.bool,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  };
-
-  renderAdvancedOptionsButton () {
-    const { metricsEvent } = this.context
-    const { showCustomizeGasModal } = this.props
-    return <div className="advanced-gas-options-btn" onClick={() => {
-      metricsEvent({
-        eventOpts: {
-          category: 'Transactions',
-          action: 'Edit Screen',
-          name: 'Clicked "Advanced Options"',
-        },
-      })
-      showCustomizeGasModal()
-    }}>
-      { this.context.t('advancedOptions') }
-    </div>
-  }
-
-  renderContent () {
-    const {
-      conversionRate,
-      convertedCurrency,
-      gasLoadingError,
-      gasTotal,
-      showCustomizeGasModal,
-      gasPriceButtonGroupProps,
-      gasButtonGroupShown,
-      advancedInlineGasShown,
-      resetGasButtons,
-      setGasPrice,
-      setGasLimit,
-      gasPrice,
-      gasLimit,
-      insufficientBalance,
-    } = this.props
-    const { metricsEvent } = this.context
-
-    const gasPriceButtonGroup = <div>
-        <GasPriceButtonGroup
-          className="gas-price-button-group--small"
-          showCheck={false}
-          {...gasPriceButtonGroupProps}
-          handleGasPriceSelection={(...args) => {
-            metricsEvent({
-              eventOpts: {
-                category: 'Transactions',
-                action: 'Edit Screen',
-                name: 'Changed Gas Button',
-              },
-            })
-            gasPriceButtonGroupProps.handleGasPriceSelection(...args)
-          }}
-        />
-        { this.renderAdvancedOptionsButton() }
-      </div>
-    const gasFeeDisplay = <GasFeeDisplay
-      conversionRate={conversionRate}
-      convertedCurrency={convertedCurrency}
-      gasLoadingError={gasLoadingError}
-      gasTotal={gasTotal}
-      onReset={resetGasButtons}
-      onClick={() => showCustomizeGasModal()}
-    />
-    const advancedGasInputs = <div>
-      <AdvancedGasInputs
-        updateCustomGasPrice={newGasPrice => setGasPrice(newGasPrice, gasLimit)}
-        updateCustomGasLimit={newGasLimit => setGasLimit(newGasLimit, gasPrice)}
-        customGasPrice={gasPrice}
-        customGasLimit={gasLimit}
-        insufficientBalance={insufficientBalance}
-        customPriceIsSafe={true}
-        isSpeedUp={false}
-      />
-      { this.renderAdvancedOptionsButton() }
-     </div>
-
-    if (advancedInlineGasShown) {
-      return advancedGasInputs
-    } else if (gasButtonGroupShown) {
-      return gasPriceButtonGroup
-    } else {
-      return gasFeeDisplay
-    }
-  }
-
-  render () {
-    const { gasFeeError } = this.props
-
-    return (
-      <SendRowWrapper
-        label={`${this.context.t('transactionFee')}:`}
-        showError={gasFeeError}
-        errorType={'gasFee'}
-      >
-        { this.renderContent() }
-      </SendRowWrapper>
-    )
-  }
-
-}
diff --git a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.container.js b/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.container.js
deleted file mode 100644
index f81670c02..000000000
--- a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.container.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import { connect } from 'react-redux'
-import {
-  getConversionRate,
-  getCurrentCurrency,
-  getGasTotal,
-  getGasPrice,
-  getGasLimit,
-  getSendAmount,
-} from '../../send.selectors.js'
-import {
-  isBalanceSufficient,
-  calcGasTotal,
-} from '../../send.utils.js'
-import {
-  getBasicGasEstimateLoadingStatus,
-  getRenderableEstimateDataForSmallButtonsFromGWEI,
-  getDefaultActiveButtonIndex,
-} from '../../../../../selectors/custom-gas'
-import {
-  showGasButtonGroup,
-} from '../../../../../ducks/send/send.duck'
-import {
-  resetCustomData,
-  setCustomGasPrice,
-  setCustomGasLimit,
-} from '../../../../../ducks/gas/gas.duck'
-import { getGasLoadingError, gasFeeIsInError, getGasButtonGroupShown } from './send-gas-row.selectors.js'
-import { showModal, setGasPrice, setGasLimit, setGasTotal } from '../../../../../store/actions'
-import { getAdvancedInlineGasShown, getCurrentEthBalance, getSelectedToken } from '../../../../../selectors/selectors'
-import SendGasRow from './send-gas-row.component'
-
-export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(SendGasRow)
-
-function mapStateToProps (state) {
-  const gasButtonInfo = getRenderableEstimateDataForSmallButtonsFromGWEI(state)
-  const gasPrice = getGasPrice(state)
-  const gasLimit = getGasLimit(state)
-  const activeButtonIndex = getDefaultActiveButtonIndex(gasButtonInfo, gasPrice)
-
-  const gasTotal = getGasTotal(state)
-  const conversionRate = getConversionRate(state)
-  const balance = getCurrentEthBalance(state)
-
-  const insufficientBalance = !isBalanceSufficient({
-    amount: getSelectedToken(state) ? '0x0' : getSendAmount(state),
-    gasTotal,
-    balance,
-    conversionRate,
-  })
-
-  return {
-    conversionRate,
-    convertedCurrency: getCurrentCurrency(state),
-    gasTotal,
-    gasFeeError: gasFeeIsInError(state),
-    gasLoadingError: getGasLoadingError(state),
-    gasPriceButtonGroupProps: {
-      buttonDataLoading: getBasicGasEstimateLoadingStatus(state),
-      defaultActiveButtonIndex: 1,
-      newActiveButtonIndex: activeButtonIndex > -1 ? activeButtonIndex : null,
-      gasButtonInfo,
-    },
-    gasButtonGroupShown: getGasButtonGroupShown(state),
-    advancedInlineGasShown: getAdvancedInlineGasShown(state),
-    gasPrice,
-    gasLimit,
-    insufficientBalance,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    showCustomizeGasModal: () => dispatch(showModal({ name: 'CUSTOMIZE_GAS', hideBasic: true })),
-    setGasPrice: (newPrice, gasLimit) => {
-      dispatch(setGasPrice(newPrice))
-      dispatch(setCustomGasPrice(newPrice))
-      if (gasLimit) {
-        dispatch(setGasTotal(calcGasTotal(gasLimit, newPrice)))
-      }
-    },
-    setGasLimit: (newLimit, gasPrice) => {
-      dispatch(setGasLimit(newLimit))
-      dispatch(setCustomGasLimit(newLimit))
-      if (gasPrice) {
-        dispatch(setGasTotal(calcGasTotal(newLimit, gasPrice)))
-      }
-    },
-    showGasButtonGroup: () => dispatch(showGasButtonGroup()),
-    resetCustomData: () => dispatch(resetCustomData()),
-  }
-}
-
-function mergeProps (stateProps, dispatchProps, ownProps) {
-  const { gasPriceButtonGroupProps } = stateProps
-  const { gasButtonInfo } = gasPriceButtonGroupProps
-  const {
-    setGasPrice: dispatchSetGasPrice,
-    showGasButtonGroup: dispatchShowGasButtonGroup,
-    resetCustomData: dispatchResetCustomData,
-    ...otherDispatchProps
-  } = dispatchProps
-
-  return {
-    ...stateProps,
-    ...otherDispatchProps,
-    ...ownProps,
-    gasPriceButtonGroupProps: {
-      ...gasPriceButtonGroupProps,
-      handleGasPriceSelection: dispatchSetGasPrice,
-    },
-    resetGasButtons: () => {
-      dispatchResetCustomData()
-      dispatchSetGasPrice(gasButtonInfo[1].priceInHexWei)
-      dispatchShowGasButtonGroup()
-    },
-    setGasPrice: dispatchSetGasPrice,
-  }
-}
diff --git a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.scss b/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.selectors.js b/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.selectors.js
deleted file mode 100644
index 79c838543..000000000
--- a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.selectors.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const selectors = {
-  gasFeeIsInError,
-  getGasLoadingError,
-  getGasButtonGroupShown,
-}
-
-module.exports = selectors
-
-function getGasLoadingError (state) {
-  return state.send.errors.gasLoading
-}
-
-function gasFeeIsInError (state) {
-  return Boolean(state.send.errors.gasFee)
-}
-
-function getGasButtonGroupShown (state) {
-  return state.send.gasButtonGroupShown
-}
diff --git a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-component.test.js b/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
deleted file mode 100644
index 08f26854e..000000000
--- a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import sinon from 'sinon'
-import SendGasRow from '../send-gas-row.component.js'
-
-import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
-import GasFeeDisplay from '../gas-fee-display/gas-fee-display.component'
-import GasPriceButtonGroup from '../../../../gas-customization/gas-price-button-group'
-
-const propsMethodSpies = {
-  showCustomizeGasModal: sinon.spy(),
-  resetGasButtons: sinon.spy(),
-}
-
-describe('SendGasRow Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<SendGasRow
-      conversionRate={20}
-      convertedCurrency={'mockConvertedCurrency'}
-      gasFeeError={'mockGasFeeError'}
-      gasLoadingError={false}
-      gasTotal={'mockGasTotal'}
-      gasButtonGroupShown={false}
-      showCustomizeGasModal={propsMethodSpies.showCustomizeGasModal}
-      resetGasButtons={propsMethodSpies.resetGasButtons}
-      gasPriceButtonGroupProps={{
-        someGasPriceButtonGroupProp: 'foo',
-        anotherGasPriceButtonGroupProp: 'bar',
-      }}
-    />, { context: { t: str => str + '_t', metricsEvent: () => ({}) } })
-  })
-
-  afterEach(() => {
-    propsMethodSpies.resetGasButtons.resetHistory()
-  })
-
-  describe('render', () => {
-    it('should render a SendRowWrapper component', () => {
-      assert.equal(wrapper.find(SendRowWrapper).length, 1)
-    })
-
-    it('should pass the correct props to SendRowWrapper', () => {
-      const {
-        label,
-        showError,
-        errorType,
-      } = wrapper.find(SendRowWrapper).props()
-
-      assert.equal(label, 'transactionFee_t:')
-      assert.equal(showError, 'mockGasFeeError')
-      assert.equal(errorType, 'gasFee')
-    })
-
-    it('should render a GasFeeDisplay as a child of the SendRowWrapper', () => {
-      assert(wrapper.find(SendRowWrapper).childAt(0).is(GasFeeDisplay))
-    })
-
-    it('should render the GasFeeDisplay with the correct props', () => {
-      const {
-        conversionRate,
-        convertedCurrency,
-        gasLoadingError,
-        gasTotal,
-        onReset,
-      } = wrapper.find(SendRowWrapper).childAt(0).props()
-      assert.equal(conversionRate, 20)
-      assert.equal(convertedCurrency, 'mockConvertedCurrency')
-      assert.equal(gasLoadingError, false)
-      assert.equal(gasTotal, 'mockGasTotal')
-      assert.equal(propsMethodSpies.resetGasButtons.callCount, 0)
-      onReset()
-      assert.equal(propsMethodSpies.resetGasButtons.callCount, 1)
-    })
-
-    it('should render the GasPriceButtonGroup if gasButtonGroupShown is true', () => {
-      wrapper.setProps({ gasButtonGroupShown: true })
-      const rendered = wrapper.find(SendRowWrapper).childAt(0)
-      assert.equal(rendered.children().length, 2)
-
-      const gasPriceButtonGroup = rendered.childAt(0)
-      assert(gasPriceButtonGroup.is(GasPriceButtonGroup))
-      assert(gasPriceButtonGroup.hasClass('gas-price-button-group--small'))
-      assert.equal(gasPriceButtonGroup.props().showCheck, false)
-      assert.equal(gasPriceButtonGroup.props().someGasPriceButtonGroupProp, 'foo')
-      assert.equal(gasPriceButtonGroup.props().anotherGasPriceButtonGroupProp, 'bar')
-    })
-
-    it('should render an advanced options button if gasButtonGroupShown is true', () => {
-      wrapper.setProps({ gasButtonGroupShown: true })
-      const rendered = wrapper.find(SendRowWrapper).childAt(0)
-      assert.equal(rendered.children().length, 2)
-
-      const advancedOptionsButton = rendered.childAt(1)
-      assert.equal(advancedOptionsButton.text(), 'advancedOptions_t')
-
-      assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 0)
-      advancedOptionsButton.props().onClick()
-      assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 1)
-    })
-  })
-})
diff --git a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-container.test.js b/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
deleted file mode 100644
index d1f753639..000000000
--- a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
+++ /dev/null
@@ -1,200 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-let mapStateToProps
-let mapDispatchToProps
-let mergeProps
-
-const actionSpies = {
-  showModal: sinon.spy(),
-  setGasPrice: sinon.spy(),
-  setGasTotal: sinon.spy(),
-  setGasLimit: sinon.spy(),
-}
-
-const sendDuckSpies = {
-  showGasButtonGroup: sinon.spy(),
-}
-
-const gasDuckSpies = {
-  resetCustomData: sinon.spy(),
-  setCustomGasPrice: sinon.spy(),
-  setCustomGasLimit: sinon.spy(),
-}
-
-proxyquire('../send-gas-row.container.js', {
-  'react-redux': {
-    connect: (ms, md, mp) => {
-      mapStateToProps = ms
-      mapDispatchToProps = md
-      mergeProps = mp
-      return () => ({})
-    },
-  },
-  '../../../../../selectors/selectors': {
-    getCurrentEthBalance: (s) => `mockCurrentEthBalance:${s}`,
-    getAdvancedInlineGasShown: (s) => `mockAdvancedInlineGasShown:${s}`,
-    getSelectedToken: () => false,
-  },
-  '../../send.selectors.js': {
-    getConversionRate: (s) => `mockConversionRate:${s}`,
-    getCurrentCurrency: (s) => `mockConvertedCurrency:${s}`,
-    getGasTotal: (s) => `mockGasTotal:${s}`,
-    getGasPrice: (s) => `mockGasPrice:${s}`,
-    getGasLimit: (s) => `mockGasLimit:${s}`,
-    getSendAmount: (s) => `mockSendAmount:${s}`,
-  },
-  '../../send.utils.js': {
-    isBalanceSufficient: ({
-      amount,
-      gasTotal,
-      balance,
-      conversionRate,
-    }) => `${amount}:${gasTotal}:${balance}:${conversionRate}`,
-    calcGasTotal: (gasLimit, gasPrice) => gasLimit + gasPrice,
-  },
-  './send-gas-row.selectors.js': {
-    getGasLoadingError: (s) => `mockGasLoadingError:${s}`,
-    gasFeeIsInError: (s) => `mockGasFeeError:${s}`,
-    getGasButtonGroupShown: (s) => `mockGetGasButtonGroupShown:${s}`,
-  },
-  '../../../../../store/actions': actionSpies,
-  '../../../../../selectors/custom-gas': {
-    getBasicGasEstimateLoadingStatus: (s) => `mockBasicGasEstimateLoadingStatus:${s}`,
-    getRenderableEstimateDataForSmallButtonsFromGWEI: (s) => `mockGasButtonInfo:${s}`,
-    getDefaultActiveButtonIndex: (gasButtonInfo, gasPrice) => gasButtonInfo.length + gasPrice.length,
-  },
-  '../../../../../ducks/send/send.duck': sendDuckSpies,
-  '../../../../../ducks/gas/gas.duck': gasDuckSpies,
-})
-
-describe('send-gas-row container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        conversionRate: 'mockConversionRate:mockState',
-        convertedCurrency: 'mockConvertedCurrency:mockState',
-        gasTotal: 'mockGasTotal:mockState',
-        gasFeeError: 'mockGasFeeError:mockState',
-        gasLoadingError: 'mockGasLoadingError:mockState',
-        gasPriceButtonGroupProps: {
-          buttonDataLoading: `mockBasicGasEstimateLoadingStatus:mockState`,
-          defaultActiveButtonIndex: 1,
-          newActiveButtonIndex: 49,
-          gasButtonInfo: `mockGasButtonInfo:mockState`,
-        },
-        gasButtonGroupShown: `mockGetGasButtonGroupShown:mockState`,
-        advancedInlineGasShown: 'mockAdvancedInlineGasShown:mockState',
-        gasLimit: 'mockGasLimit:mockState',
-        gasPrice: 'mockGasPrice:mockState',
-        insufficientBalance: false,
-      })
-    })
-
-  })
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy
-    let mapDispatchToPropsObject
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy()
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
-      actionSpies.setGasTotal.resetHistory()
-    })
-
-    describe('showCustomizeGasModal()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.showCustomizeGasModal()
-        assert(dispatchSpy.calledOnce)
-        assert.deepEqual(
-          actionSpies.showModal.getCall(0).args[0],
-          { name: 'CUSTOMIZE_GAS', hideBasic: true }
-        )
-      })
-    })
-
-    describe('setGasPrice()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.setGasPrice('mockNewPrice', 'mockLimit')
-        assert(dispatchSpy.calledThrice)
-        assert(actionSpies.setGasPrice.calledOnce)
-        assert.equal(actionSpies.setGasPrice.getCall(0).args[0], 'mockNewPrice')
-        assert.equal(gasDuckSpies.setCustomGasPrice.getCall(0).args[0], 'mockNewPrice')
-        assert(actionSpies.setGasTotal.calledOnce)
-        assert.equal(actionSpies.setGasTotal.getCall(0).args[0], 'mockLimitmockNewPrice')
-      })
-    })
-
-    describe('setGasLimit()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.setGasLimit('mockNewLimit', 'mockPrice')
-        assert(dispatchSpy.calledThrice)
-        assert(actionSpies.setGasLimit.calledOnce)
-        assert.equal(actionSpies.setGasLimit.getCall(0).args[0], 'mockNewLimit')
-        assert.equal(gasDuckSpies.setCustomGasLimit.getCall(0).args[0], 'mockNewLimit')
-        assert(actionSpies.setGasTotal.calledOnce)
-        assert.equal(actionSpies.setGasTotal.getCall(0).args[0], 'mockNewLimitmockPrice')
-      })
-    })
-
-    describe('showGasButtonGroup()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.showGasButtonGroup()
-        assert(dispatchSpy.calledOnce)
-        assert(sendDuckSpies.showGasButtonGroup.calledOnce)
-      })
-    })
-
-    describe('resetCustomData()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.resetCustomData()
-        assert(dispatchSpy.calledOnce)
-        assert(gasDuckSpies.resetCustomData.calledOnce)
-      })
-    })
-
-  })
-
-  describe('mergeProps', () => {
-    let stateProps
-    let dispatchProps
-    let ownProps
-
-    beforeEach(() => {
-      stateProps = {
-        gasPriceButtonGroupProps: {
-          someGasPriceButtonGroupProp: 'foo',
-          anotherGasPriceButtonGroupProp: 'bar',
-        },
-        someOtherStateProp: 'baz',
-      }
-      dispatchProps = {
-        setGasPrice: sinon.spy(),
-        someOtherDispatchProp: sinon.spy(),
-      }
-      ownProps = { someOwnProp: 123 }
-    })
-
-    it('should return the expected props when isConfirm is true', () => {
-      const result = mergeProps(stateProps, dispatchProps, ownProps)
-
-      assert.equal(result.someOtherStateProp, 'baz')
-      assert.equal(result.gasPriceButtonGroupProps.someGasPriceButtonGroupProp, 'foo')
-      assert.equal(result.gasPriceButtonGroupProps.anotherGasPriceButtonGroupProp, 'bar')
-      assert.equal(result.someOwnProp, 123)
-
-      assert.equal(dispatchProps.setGasPrice.callCount, 0)
-      result.gasPriceButtonGroupProps.handleGasPriceSelection()
-      assert.equal(dispatchProps.setGasPrice.callCount, 1)
-
-      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 0)
-      result.someOtherDispatchProp()
-      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 1)
-    })
-  })
-
-})
diff --git a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js b/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
deleted file mode 100644
index bd3c9a257..000000000
--- a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import assert from 'assert'
-import {
-  gasFeeIsInError,
-  getGasLoadingError,
-  getGasButtonGroupShown,
-} from '../send-gas-row.selectors.js'
-
-describe('send-gas-row selectors', () => {
-
-  describe('getGasLoadingError()', () => {
-    it('should return send.errors.gasLoading', () => {
-      const state = {
-        send: {
-          errors: {
-            gasLoading: 'abc',
-          },
-        },
-      }
-
-      assert.equal(getGasLoadingError(state), 'abc')
-    })
-  })
-
-  describe('gasFeeIsInError()', () => {
-    it('should return true if send.errors.gasFee is truthy', () => {
-      const state = {
-        send: {
-          errors: {
-            gasFee: 'def',
-          },
-        },
-      }
-
-      assert.equal(gasFeeIsInError(state), true)
-    })
-
-    it('should return false send.errors.gasFee is falsely', () => {
-      const state = {
-        send: {
-          errors: {
-            gasFee: null,
-          },
-        },
-      }
-
-      assert.equal(gasFeeIsInError(state), false)
-    })
-  })
-
-  describe('getGasButtonGroupShown()', () => {
-    it('should return send.gasButtonGroupShown', () => {
-      const state = {
-        send: {
-          gasButtonGroupShown: 'foobar',
-        },
-      }
-
-      assert.equal(getGasButtonGroupShown(state), 'foobar')
-    })
-  })
-
-})
diff --git a/ui/app/components/app/send/send-content/send-hex-data-row/index.js b/ui/app/components/app/send/send-content/send-hex-data-row/index.js
deleted file mode 100644
index 08c341067..000000000
--- a/ui/app/components/app/send/send-content/send-hex-data-row/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './send-hex-data-row.container'
diff --git a/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.component.js b/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.component.js
deleted file mode 100644
index 62a74a77b..000000000
--- a/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.component.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import SendRowWrapper from '../send-row-wrapper'
-
-export default class SendHexDataRow extends Component {
-  static propTypes = {
-    data: PropTypes.string,
-    inError: PropTypes.bool,
-    updateSendHexData: PropTypes.func.isRequired,
-    updateGas: PropTypes.func.isRequired,
-  };
-
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  onInput = (event) => {
-    const {updateSendHexData, updateGas} = this.props
-    const data = event.target.value.replace(/\n/g, '') || null
-    updateSendHexData(data)
-    updateGas({ data })
-  }
-
-  render () {
-    const {inError} = this.props
-    const {t} = this.context
-
-    return (
-      <SendRowWrapper
-        label={`${t('hexData')}:`}
-        showError={inError}
-        errorType={'amount'}
-      >
-        <textarea
-          onInput={this.onInput}
-          placeholder="Optional"
-          className="send-v2__hex-data__input"
-        />
-      </SendRowWrapper>
-    )
-  }
-}
diff --git a/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.container.js b/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.container.js
deleted file mode 100644
index 76c929d08..000000000
--- a/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.container.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { connect } from 'react-redux'
-import {
-  updateSendHexData,
-} from '../../../../../store/actions'
-import SendHexDataRow from './send-hex-data-row.component'
-
-export default connect(mapStateToProps, mapDispatchToProps)(SendHexDataRow)
-
-function mapStateToProps (state) {
-  return {
-    data: state.metamask.send.data,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    updateSendHexData (data) {
-      return dispatch(updateSendHexData(data))
-    },
-  }
-}
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/index.js b/ui/app/components/app/send/send-content/send-row-wrapper/index.js
deleted file mode 100644
index d17545dcc..000000000
--- a/ui/app/components/app/send/send-content/send-row-wrapper/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './send-row-wrapper.component'
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/index.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/index.js
deleted file mode 100644
index c00617f83..000000000
--- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './send-row-error-message.container'
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js
deleted file mode 100644
index 61bc7bab7..000000000
--- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-export default class SendRowErrorMessage extends Component {
-
-  static propTypes = {
-    errors: PropTypes.object,
-    errorType: PropTypes.string,
-  };
-
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  render () {
-    const { errors, errorType } = this.props
-
-    const errorMessage = errors[errorType]
-
-    return (
-      errorMessage
-        ? <div className="send-v2__error">{this.context.t(errorMessage)}</div>
-        : null
-    )
-  }
-
-}
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js
deleted file mode 100644
index 59622047f..000000000
--- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { connect } from 'react-redux'
-import { getSendErrors } from '../../../send.selectors'
-import SendRowErrorMessage from './send-row-error-message.component'
-
-export default connect(mapStateToProps)(SendRowErrorMessage)
-
-function mapStateToProps (state, ownProps) {
-  return {
-    errors: getSendErrors(state),
-    errorType: ownProps.errorType,
-  }
-}
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js
deleted file mode 100644
index 2304a43d2..000000000
--- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import SendRowErrorMessage from '../send-row-error-message.component.js'
-
-describe('SendRowErrorMessage Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<SendRowErrorMessage
-      errors={{ error1: 'abc', error2: 'def' }}
-      errorType={'error3'}
-    />, { context: { t: str => str + '_t' } })
-  })
-
-  describe('render', () => {
-    it('should render null if the passed errors do not contain an error of errorType', () => {
-      assert.equal(wrapper.find('.send-v2__error').length, 0)
-      assert.equal(wrapper.html(), null)
-    })
-
-    it('should render an error message if the passed errors contain an error of errorType', () => {
-      wrapper.setProps({ errors: { error1: 'abc', error2: 'def', error3: 'xyz' } })
-      assert.equal(wrapper.find('.send-v2__error').length, 1)
-      assert.equal(wrapper.find('.send-v2__error').text(), 'xyz_t')
-    })
-  })
-})
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js
deleted file mode 100644
index eecff165d..000000000
--- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-
-let mapStateToProps
-
-proxyquire('../send-row-error-message.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      return () => ({})
-    },
-  },
-  '../../../send.selectors': { getSendErrors: (s) => `mockErrors:${s}` },
-})
-
-describe('send-row-error-message container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState', { errorType: 'someType' }), {
-        errors: 'mockErrors:mockState',
-        errorType: 'someType' })
-    })
-
-  })
-
-})
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/index.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/index.js
deleted file mode 100644
index fd4d19ef7..000000000
--- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './send-row-warning-message.container'
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js
deleted file mode 100644
index f1caa8f99..000000000
--- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-export default class SendRowWarningMessage extends Component {
-
-  static propTypes = {
-    warnings: PropTypes.object,
-    warningType: PropTypes.string,
-  };
-
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  render () {
-    const { warnings, warningType } = this.props
-
-    const warningMessage = warningType in warnings && warnings[warningType]
-
-    return (
-        warningMessage
-        ? <div className="send-v2__warning">{this.context.t(warningMessage)}</div>
-        : null
-    )
-  }
-
-}
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js
deleted file mode 100644
index 7df14fd96..000000000
--- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { connect } from 'react-redux'
-import { getSendWarnings } from '../../../send.selectors'
-import SendRowWarningMessage from './send-row-warning-message.component'
-
-export default connect(mapStateToProps)(SendRowWarningMessage)
-
-function mapStateToProps (state, ownProps) {
-  return {
-    warnings: getSendWarnings(state),
-    warningType: ownProps.warningType,
-  }
-}
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js
deleted file mode 100644
index bd803d833..000000000
--- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import SendRowWarningMessage from '../send-row-warning-message.component.js'
-
-describe('SendRowWarningMessage Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<SendRowWarningMessage
-      warnings={{ warning1: 'abc', warning2: 'def' }}
-      warningType={'warning3'}
-    />, { context: { t: str => str + '_t' } })
-  })
-
-  describe('render', () => {
-    it('should render null if the passed warnings do not contain a warning of warningType', () => {
-      assert.equal(wrapper.find('.send-v2__warning').length, 0)
-      assert.equal(wrapper.html(), null)
-    })
-
-    it('should render a warning message if the passed warnings contain a warning of warningType', () => {
-      wrapper.setProps({ warnings: { warning1: 'abc', warning2: 'def', warning3: 'xyz' } })
-      assert.equal(wrapper.find('.send-v2__warning').length, 1)
-      assert.equal(wrapper.find('.send-v2__warning').text(), 'xyz_t')
-    })
-  })
-})
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js
deleted file mode 100644
index 225bf056c..000000000
--- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-
-let mapStateToProps
-
-proxyquire('../send-row-warning-message.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      return () => ({})
-    },
-  },
-  '../../../send.selectors': { getSendWarnings: (s) => `mockWarnings:${s}` },
-})
-
-describe('send-row-warning-message container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState', { warningType: 'someType' }), {
-        warnings: 'mockWarnings:mockState',
-        warningType: 'someType' })
-    })
-
-  })
-
-})
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper-README.md b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper-README.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.component.js b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.component.js
deleted file mode 100644
index 94309bd96..000000000
--- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.component.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import SendRowErrorMessage from './send-row-error-message'
-import SendRowWarningMessage from './send-row-warning-message'
-
-export default class SendRowWrapper extends Component {
-
-  static propTypes = {
-    children: PropTypes.node,
-    errorType: PropTypes.string,
-    label: PropTypes.string,
-    showError: PropTypes.bool,
-    showWarning: PropTypes.bool,
-    warningType: PropTypes.string,
-  };
-
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  render () {
-    const {
-      children,
-      errorType = '',
-      label,
-      showError = false,
-      showWarning = false,
-      warningType = '',
-    } = this.props
-    const formField = Array.isArray(children) ? children[1] || children[0] : children
-    const customLabelContent = children.length > 1 ? children[0] : null
-
-    return (
-      <div className="send-v2__form-row">
-        <div className="send-v2__form-label">
-          {label}
-          {showError && <SendRowErrorMessage errorType={errorType}/>}
-          {!showError && showWarning && <SendRowWarningMessage warningType={warningType} />}
-          {customLabelContent}
-        </div>
-        <div className="send-v2__form-field">
-          {formField}
-        </div>
-      </div>
-    )
-  }
-
-}
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.scss b/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js b/ui/app/components/app/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
deleted file mode 100644
index 30280e1d0..000000000
--- a/ui/app/components/app/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import SendRowWrapper from '../send-row-wrapper.component.js'
-
-import SendRowErrorMessage from '../send-row-error-message/send-row-error-message.container'
-
-describe('SendContent Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<SendRowWrapper
-      errorType={'mockErrorType'}
-      label={'mockLabel'}
-      showError={false}
-    >
-      <span>Mock Form Field</span>
-    </SendRowWrapper>)
-  })
-
-  describe('render', () => {
-    it('should render a div with a send-v2__form-row class', () => {
-      assert.equal(wrapper.find('div.send-v2__form-row').length, 1)
-    })
-
-    it('should render two children of the root div, with send-v2_form label and field classes', () => {
-      assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').length, 1)
-      assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').length, 1)
-    })
-
-    it('should render the label as a child of the send-v2__form-label', () => {
-      assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(0).text(), 'mockLabel')
-    })
-
-    it('should render its first child as a child of the send-v2__form-field', () => {
-      assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').childAt(0).text(), 'Mock Form Field')
-    })
-
-    it('should not render a SendRowErrorMessage if showError is false', () => {
-      assert.equal(wrapper.find(SendRowErrorMessage).length, 0)
-    })
-
-    it('should render a SendRowErrorMessage with and errorType props if showError is true', () => {
-      wrapper.setProps({showError: true})
-      assert.equal(wrapper.find(SendRowErrorMessage).length, 1)
-
-      const expectedSendRowErrorMessage = wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(1)
-      assert(expectedSendRowErrorMessage.is(SendRowErrorMessage))
-      assert.deepEqual(
-        expectedSendRowErrorMessage.props(),
-        { errorType: 'mockErrorType' }
-      )
-    })
-
-    it('should render its second child as a child of the send-v2__form-field, if it has two children', () => {
-      wrapper = shallow(<SendRowWrapper
-      errorType={'mockErrorType'}
-      label={'mockLabel'}
-      showError={false}
-    >
-      <span>Mock Custom Label Content</span>
-      <span>Mock Form Field</span>
-    </SendRowWrapper>)
-      assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').childAt(0).text(), 'Mock Form Field')
-    })
-
-    it('should render its first child as the last child of the send-v2__form-label, if it has two children', () => {
-      wrapper = shallow(<SendRowWrapper
-      errorType={'mockErrorType'}
-      label={'mockLabel'}
-      showError={false}
-    >
-      <span>Mock Custom Label Content</span>
-      <span>Mock Form Field</span>
-    </SendRowWrapper>)
-      assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(1).text(), 'Mock Custom Label Content')
-    })
-  })
-})
diff --git a/ui/app/components/app/send/send-content/send-to-row/index.js b/ui/app/components/app/send/send-content/send-to-row/index.js
deleted file mode 100644
index 121f15148..000000000
--- a/ui/app/components/app/send/send-content/send-to-row/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './send-to-row.container'
diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row-README.md b/ui/app/components/app/send/send-content/send-to-row/send-to-row-README.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row.component.js b/ui/app/components/app/send/send-content/send-to-row/send-to-row.component.js
deleted file mode 100644
index e8a55cb2a..000000000
--- a/ui/app/components/app/send/send-content/send-to-row/send-to-row.component.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import SendRowWrapper from '../send-row-wrapper'
-import EnsInput from '../../../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>
-    )
-  }
-
-}
diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row.container.js b/ui/app/components/app/send/send-content/send-to-row/send-to-row.container.js
deleted file mode 100644
index 30865d295..000000000
--- a/ui/app/components/app/send/send-content/send-to-row/send-to-row.container.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { connect } from 'react-redux'
-import {
-    getCurrentNetwork,
-    getSelectedToken,
-    getSendTo,
-    getSendToAccounts,
-    getSendHexData,
-} from '../../send.selectors.js'
-import {
-    getToDropdownOpen,
-    getTokens,
-    sendToIsInError,
-    sendToIsInWarning,
-} from './send-to-row.selectors.js'
-import {
-    updateSendTo,
-} from '../../../../../store/actions'
-import {
-  updateSendErrors,
-  updateSendWarnings,
-  openToDropdown,
-  closeToDropdown,
-} from '../../../../../ducks/send/send.duck'
-import SendToRow from './send-to-row.component'
-
-export default connect(mapStateToProps, mapDispatchToProps)(SendToRow)
-
-function mapStateToProps (state) {
-  return {
-    hasHexData: Boolean(getSendHexData(state)),
-    inError: sendToIsInError(state),
-    inWarning: sendToIsInWarning(state),
-    network: getCurrentNetwork(state),
-    selectedToken: getSelectedToken(state),
-    to: getSendTo(state),
-    toAccounts: getSendToAccounts(state),
-    toDropdownOpen: getToDropdownOpen(state),
-    tokens: getTokens(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    closeToDropdown: () => dispatch(closeToDropdown()),
-    openToDropdown: () => dispatch(openToDropdown()),
-    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
-    updateSendToError: (toErrorObject) => {
-        dispatch(updateSendErrors(toErrorObject))
-    },
-    updateSendToWarning: (toWarningObject) => {
-      dispatch(updateSendWarnings(toWarningObject))
-  },
-  }
-}
diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row.selectors.js b/ui/app/components/app/send/send-content/send-to-row/send-to-row.selectors.js
deleted file mode 100644
index a6160d335..000000000
--- a/ui/app/components/app/send/send-content/send-to-row/send-to-row.selectors.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const selectors = {
-  getToDropdownOpen,
-  getTokens,
-  sendToIsInError,
-  sendToIsInWarning,
-}
-
-module.exports = selectors
-
-function getToDropdownOpen (state) {
-  return state.send.toDropdownOpen
-}
-
-function sendToIsInError (state) {
-    return Boolean(state.send.errors.to)
-}
-
-function sendToIsInWarning (state) {
-  return Boolean(state.send.warnings.to)
-}
-
-function getTokens (state) {
-  return state.metamask.tokens
-}
diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row.utils.js b/ui/app/components/app/send/send-content/send-to-row/send-to-row.utils.js
deleted file mode 100644
index 60e75d34c..000000000
--- a/ui/app/components/app/send/send-content/send-to-row/send-to-row.utils.js
+++ /dev/null
@@ -1,36 +0,0 @@
-const {
-  REQUIRED_ERROR,
-  INVALID_RECIPIENT_ADDRESS_ERROR,
-  KNOWN_RECIPIENT_ADDRESS_ERROR,
-  INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR,
-} = require('../../send.constants')
-const { isValidAddress, isEthNetwork } = require('../../../../../helpers/utils/util')
-import { checkExistingAddresses } from '../../../../../pages/add-token/util'
-
-const ethUtil = require('ethereumjs-util')
-const contractMap = require('eth-contract-metadata')
-
-function getToErrorObject (to, toError = null, hasHexData = false, tokens = [], selectedToken = null, network) {
-  if (!to) {
-    if (!hasHexData) {
-      toError = REQUIRED_ERROR
-    }
-  } else if (!isValidAddress(to, network) && !toError) {
-    toError = isEthNetwork(network) ? INVALID_RECIPIENT_ADDRESS_ERROR : INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR
-  } else if (selectedToken && (ethUtil.toChecksumAddress(to) in contractMap || checkExistingAddresses(to, tokens))) {
-    toError = KNOWN_RECIPIENT_ADDRESS_ERROR
-  }
-  return { to: toError }
-}
-
-function getToWarningObject (to, toWarning = null, tokens = [], selectedToken = null) {
-  if (selectedToken && (ethUtil.toChecksumAddress(to) in contractMap || checkExistingAddresses(to, tokens))) {
-    toWarning = KNOWN_RECIPIENT_ADDRESS_ERROR
-  }
-  return { to: toWarning }
-}
-
-module.exports = {
-  getToErrorObject,
-  getToWarningObject,
-}
diff --git a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-component.test.js b/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-component.test.js
deleted file mode 100644
index d4d054057..000000000
--- a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-component.test.js
+++ /dev/null
@@ -1,166 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import sinon from 'sinon'
-import proxyquire from 'proxyquire'
-
-const SendToRow = proxyquire('../send-to-row.component.js', {
-  './send-to-row.utils.js': {
-    getToErrorObject: (to, toError) => ({
-      to: to === false ? null : `mockToErrorObject:${to}${toError}`,
-    }),
-    getToWarningObject: (to, toWarning) => ({
-      to: to === false ? null : `mockToWarningObject:${to}${toWarning}`,
-    }),
-  },
-}).default
-
-import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
-import EnsInput from '../../../../ens-input'
-
-const propsMethodSpies = {
-  closeToDropdown: sinon.spy(),
-  openToDropdown: sinon.spy(),
-  updateGas: sinon.spy(),
-  updateSendTo: sinon.spy(),
-  updateSendToError: sinon.spy(),
-  updateSendToWarning: sinon.spy(),
-}
-
-sinon.spy(SendToRow.prototype, 'handleToChange')
-
-describe('SendToRow Component', function () {
-  let wrapper
-  let instance
-
-  beforeEach(() => {
-    wrapper = shallow(<SendToRow
-      closeToDropdown={propsMethodSpies.closeToDropdown}
-      inError={false}
-      inWarning={false}
-      network={'mockNetwork'}
-      openToDropdown={propsMethodSpies.openToDropdown}
-      to={'mockTo'}
-      toAccounts={['mockAccount']}
-      toDropdownOpen={false}
-      updateGas={propsMethodSpies.updateGas}
-      updateSendTo={propsMethodSpies.updateSendTo}
-      updateSendToError={propsMethodSpies.updateSendToError}
-      updateSendToWarning={propsMethodSpies.updateSendToWarning}
-    />, { context: { t: str => str + '_t' } })
-    instance = wrapper.instance()
-  })
-
-  afterEach(() => {
-    propsMethodSpies.closeToDropdown.resetHistory()
-    propsMethodSpies.openToDropdown.resetHistory()
-    propsMethodSpies.updateSendTo.resetHistory()
-    propsMethodSpies.updateSendToError.resetHistory()
-    propsMethodSpies.updateSendToWarning.resetHistory()
-    SendToRow.prototype.handleToChange.resetHistory()
-  })
-
-  describe('handleToChange', () => {
-
-    it('should call updateSendTo', () => {
-      assert.equal(propsMethodSpies.updateSendTo.callCount, 0)
-      instance.handleToChange('mockTo2', 'mockNickname')
-      assert.equal(propsMethodSpies.updateSendTo.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateSendTo.getCall(0).args,
-        ['mockTo2', 'mockNickname']
-      )
-    })
-
-    it('should call updateSendToError', () => {
-      assert.equal(propsMethodSpies.updateSendToError.callCount, 0)
-      instance.handleToChange('mockTo2', '', 'mockToError')
-      assert.equal(propsMethodSpies.updateSendToError.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateSendToError.getCall(0).args,
-        [{ to: 'mockToErrorObject:mockTo2mockToError' }]
-      )
-    })
-
-    it('should call updateSendToWarning', () => {
-      assert.equal(propsMethodSpies.updateSendToWarning.callCount, 0)
-      instance.handleToChange('mockTo2', '', '', 'mockToWarning')
-      assert.equal(propsMethodSpies.updateSendToWarning.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateSendToWarning.getCall(0).args,
-        [{ to: 'mockToWarningObject:mockTo2mockToWarning' }]
-      )
-    })
-
-    it('should not call updateGas if there is a to error', () => {
-      assert.equal(propsMethodSpies.updateGas.callCount, 0)
-      instance.handleToChange('mockTo2')
-      assert.equal(propsMethodSpies.updateGas.callCount, 0)
-    })
-
-    it('should call updateGas if there is no to error', () => {
-      assert.equal(propsMethodSpies.updateGas.callCount, 0)
-      instance.handleToChange(false)
-      assert.equal(propsMethodSpies.updateGas.callCount, 1)
-    })
-  })
-
-  describe('render', () => {
-    it('should render a SendRowWrapper component', () => {
-      assert.equal(wrapper.find(SendRowWrapper).length, 1)
-    })
-
-    it('should pass the correct props to SendRowWrapper', () => {
-      const {
-        errorType,
-        label,
-        showError,
-      } = wrapper.find(SendRowWrapper).props()
-
-      assert.equal(errorType, 'to')
-
-      assert.equal(label, 'to_t: ')
-
-      assert.equal(showError, false)
-    })
-
-    it('should render an EnsInput as a child of the SendRowWrapper', () => {
-      assert(wrapper.find(SendRowWrapper).childAt(0).is(EnsInput))
-    })
-
-    it('should render the EnsInput with the correct props', () => {
-      const {
-        accounts,
-        closeDropdown,
-        dropdownOpen,
-        inError,
-        name,
-        network,
-        onChange,
-        openDropdown,
-        placeholder,
-        to,
-      } = wrapper.find(SendRowWrapper).childAt(0).props()
-      assert.deepEqual(accounts, ['mockAccount'])
-      assert.equal(dropdownOpen, false)
-      assert.equal(inError, false)
-      assert.equal(name, 'address')
-      assert.equal(network, 'mockNetwork')
-      assert.equal(placeholder, 'recipientAddress_t')
-      assert.equal(to, 'mockTo')
-      assert.equal(propsMethodSpies.closeToDropdown.callCount, 0)
-      closeDropdown()
-      assert.equal(propsMethodSpies.closeToDropdown.callCount, 1)
-      assert.equal(propsMethodSpies.openToDropdown.callCount, 0)
-      openDropdown()
-      assert.equal(propsMethodSpies.openToDropdown.callCount, 1)
-      assert.equal(SendToRow.prototype.handleToChange.callCount, 0)
-      onChange({ toAddress: 'mockNewTo', nickname: 'mockNewNickname', toError: 'mockToError', toWarning: 'mockToWarning' })
-      assert.equal(SendToRow.prototype.handleToChange.callCount, 1)
-      assert.deepEqual(
-        SendToRow.prototype.handleToChange.getCall(0).args,
-        ['mockNewTo', 'mockNewNickname', 'mockToError', 'mockToWarning', 'mockNetwork' ]
-      )
-    })
-  })
-})
diff --git a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-container.test.js b/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-container.test.js
deleted file mode 100644
index 94b4f1024..000000000
--- a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-container.test.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-let mapStateToProps
-let mapDispatchToProps
-
-const actionSpies = {
-  updateSendTo: sinon.spy(),
-}
-const duckActionSpies = {
-  closeToDropdown: sinon.spy(),
-  openToDropdown: sinon.spy(),
-  updateSendErrors: sinon.spy(),
-  updateSendWarnings: sinon.spy(),
-}
-
-proxyquire('../send-to-row.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      mapDispatchToProps = md
-      return () => ({})
-    },
-  },
-  '../../send.selectors.js': {
-    getCurrentNetwork: (s) => `mockNetwork:${s}`,
-    getSelectedToken: (s) => `mockSelectedToken:${s}`,
-    getSendHexData: (s) => s,
-    getSendTo: (s) => `mockTo:${s}`,
-    getSendToAccounts: (s) => `mockToAccounts:${s}`,
-  },
-  './send-to-row.selectors.js': {
-    getToDropdownOpen: (s) => `mockToDropdownOpen:${s}`,
-    sendToIsInError: (s) => `mockInError:${s}`,
-    sendToIsInWarning: (s) => `mockInWarning:${s}`,
-    getTokens: (s) => `mockTokens:${s}`,
-  },
-  '../../../../../store/actions': actionSpies,
-  '../../../../../ducks/send/send.duck': duckActionSpies,
-})
-
-describe('send-to-row container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        hasHexData: true,
-        inError: 'mockInError:mockState',
-        inWarning: 'mockInWarning:mockState',
-        network: 'mockNetwork:mockState',
-        selectedToken: 'mockSelectedToken:mockState',
-        to: 'mockTo:mockState',
-        toAccounts: 'mockToAccounts:mockState',
-        toDropdownOpen: 'mockToDropdownOpen:mockState',
-        tokens: 'mockTokens:mockState',
-      })
-    })
-
-  })
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy
-    let mapDispatchToPropsObject
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy()
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
-    })
-
-    describe('closeToDropdown()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.closeToDropdown()
-        assert(dispatchSpy.calledOnce)
-        assert(duckActionSpies.closeToDropdown.calledOnce)
-        assert.equal(
-          duckActionSpies.closeToDropdown.getCall(0).args[0],
-          undefined
-        )
-      })
-    })
-
-    describe('openToDropdown()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.openToDropdown()
-        assert(dispatchSpy.calledOnce)
-        assert(duckActionSpies.openToDropdown.calledOnce)
-        assert.equal(
-          duckActionSpies.openToDropdown.getCall(0).args[0],
-          undefined
-        )
-      })
-    })
-
-    describe('updateSendTo()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendTo('mockTo', 'mockNickname')
-        assert(dispatchSpy.calledOnce)
-        assert(actionSpies.updateSendTo.calledOnce)
-        assert.deepEqual(
-          actionSpies.updateSendTo.getCall(0).args,
-          ['mockTo', 'mockNickname']
-        )
-      })
-    })
-
-    describe('updateSendToError()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendToError('mockToErrorObject')
-        assert(dispatchSpy.calledOnce)
-        assert(duckActionSpies.updateSendErrors.calledOnce)
-        assert.equal(
-          duckActionSpies.updateSendErrors.getCall(0).args[0],
-          'mockToErrorObject'
-        )
-      })
-    })
-
-    describe('updateSendToWarning()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendToWarning('mockToWarningObject')
-        assert(dispatchSpy.calledOnce)
-        assert(duckActionSpies.updateSendWarnings.calledOnce)
-        assert.equal(
-          duckActionSpies.updateSendWarnings.getCall(0).args[0],
-          'mockToWarningObject'
-        )
-      })
-    })
-
-  })
-
-})
diff --git a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-selectors.test.js b/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-selectors.test.js
deleted file mode 100644
index 0fa342d1e..000000000
--- a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-selectors.test.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import assert from 'assert'
-import {
-  getToDropdownOpen,
-  getTokens,
-  sendToIsInError,
-} from '../send-to-row.selectors.js'
-
-describe('send-to-row selectors', () => {
-
-  describe('getToDropdownOpen()', () => {
-    it('should return send.getToDropdownOpen', () => {
-      const state = {
-        send: {
-          toDropdownOpen: false,
-        },
-      }
-
-      assert.equal(getToDropdownOpen(state), false)
-    })
-  })
-
-  describe('sendToIsInError()', () => {
-    it('should return true if send.errors.to is truthy', () => {
-      const state = {
-        send: {
-          errors: {
-            to: 'abc',
-          },
-        },
-      }
-
-      assert.equal(sendToIsInError(state), true)
-    })
-
-    it('should return false if send.errors.to is falsy', () => {
-      const state = {
-        send: {
-          errors: {
-            to: null,
-          },
-        },
-      }
-
-      assert.equal(sendToIsInError(state), false)
-    })
-  })
-
-  describe('getTokens()', () => {
-    it('should return empty array if no tokens in state', () => {
-      const state = {
-        metamask: {
-          tokens: [],
-        },
-      }
-
-      assert.deepStrictEqual(getTokens(state), [])
-    })
-  })
-})
diff --git a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-utils.test.js b/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-utils.test.js
deleted file mode 100644
index 95882d640..000000000
--- a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-utils.test.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-import {
-  REQUIRED_ERROR,
-  INVALID_RECIPIENT_ADDRESS_ERROR,
-  KNOWN_RECIPIENT_ADDRESS_ERROR,
-} from '../../../send.constants'
-
-const stubs = {
-  isValidAddress: sinon.stub().callsFake(to => Boolean(to.match(/^[0xabcdef123456798]+$/))),
-}
-
-const toRowUtils = proxyquire('../send-to-row.utils.js', {
-  '../../../../../helpers/utils/util': {
-    isValidAddress: stubs.isValidAddress,
-  },
-})
-const {
-  getToErrorObject,
-  getToWarningObject,
-} = toRowUtils
-
-describe('send-to-row utils', () => {
-
-  describe('getToErrorObject()', () => {
-    it('should return a required error if to is falsy', () => {
-      assert.deepEqual(getToErrorObject(null), {
-        to: REQUIRED_ERROR,
-      })
-    })
-
-    it('should return null if to is falsy and hexData is truthy', () => {
-      assert.deepEqual(getToErrorObject(null, undefined, true), {
-        to: null,
-      })
-    })
-
-    it('should return an invalid recipient error if to is truthy but invalid', () => {
-      assert.deepEqual(getToErrorObject('mockInvalidTo'), {
-        to: INVALID_RECIPIENT_ADDRESS_ERROR,
-      })
-    })
-
-    it('should return null if to is truthy and valid', () => {
-      assert.deepEqual(getToErrorObject('0xabc123'), {
-        to: null,
-      })
-    })
-
-    it('should return the passed error if to is truthy but invalid if to is truthy and valid', () => {
-      assert.deepEqual(getToErrorObject('invalid #$ 345878', 'someExplicitError'), {
-        to: 'someExplicitError',
-      })
-    })
-
-    it('should return a known address recipient if to is truthy but part of state tokens', () => {
-      assert.deepEqual(getToErrorObject('0xabc123', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
-        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
-      })
-    })
-
-    it('should null if to is truthy part of tokens but selectedToken falsy', () => {
-      assert.deepEqual(getToErrorObject('0xabc123', undefined, false, [{'address': '0xabc123'}]), {
-        to: null,
-      })
-    })
-
-    it('should return a known address recipient if to is truthy but part of contract metadata', () => {
-      assert.deepEqual(getToErrorObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
-        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
-      })
-    })
-    it('should null if to is truthy part of contract metadata but selectedToken falsy', () => {
-      assert.deepEqual(getToErrorObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
-        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
-      })
-    })
-  })
-
-  describe('getToWarningObject()', () => {
-    it('should return a known address recipient if to is truthy but part of state tokens', () => {
-      assert.deepEqual(getToWarningObject('0xabc123', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
-        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
-      })
-    })
-
-    it('should null if to is truthy part of tokens but selectedToken falsy', () => {
-      assert.deepEqual(getToWarningObject('0xabc123', undefined, [{'address': '0xabc123'}]), {
-        to: null,
-      })
-    })
-
-    it('should return a known address recipient if to is truthy but part of contract metadata', () => {
-      assert.deepEqual(getToWarningObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
-        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
-      })
-    })
-    it('should null if to is truthy part of contract metadata but selectedToken falsy', () => {
-      assert.deepEqual(getToWarningObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
-        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
-      })
-    })
-  })
-
-})
diff --git a/ui/app/components/app/send/send-content/tests/send-content-component.test.js b/ui/app/components/app/send/send-content/tests/send-content-component.test.js
deleted file mode 100644
index 7d102c930..000000000
--- a/ui/app/components/app/send/send-content/tests/send-content-component.test.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import SendContent from '../send-content.component.js'
-
-import PageContainerContent from '../../../../ui/page-container/page-container-content.component'
-import SendAmountRow from '../send-amount-row/send-amount-row.container'
-import SendFromRow from '../send-from-row/send-from-row.container'
-import SendGasRow from '../send-gas-row/send-gas-row.container'
-import SendToRow from '../send-to-row/send-to-row.container'
-import SendHexDataRow from '../send-hex-data-row/send-hex-data-row.container'
-
-describe('SendContent Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<SendContent showHexData={true} />)
-  })
-
-  describe('render', () => {
-    it('should render a PageContainerContent component', () => {
-      assert.equal(wrapper.find(PageContainerContent).length, 1)
-    })
-
-    it('should render a div with a .send-v2__form class as a child of PageContainerContent', () => {
-      const PageContainerContentChild = wrapper.find(PageContainerContent).children()
-      PageContainerContentChild.is('div')
-      PageContainerContentChild.is('.send-v2__form')
-    })
-
-    it('should render the correct row components as grandchildren of the PageContainerContent component', () => {
-      const PageContainerContentChild = wrapper.find(PageContainerContent).children()
-      assert(PageContainerContentChild.childAt(0).is(SendFromRow))
-      assert(PageContainerContentChild.childAt(1).is(SendToRow))
-      assert(PageContainerContentChild.childAt(2).is(SendAmountRow))
-      assert(PageContainerContentChild.childAt(3).is(SendGasRow))
-      assert(PageContainerContentChild.childAt(4).is(SendHexDataRow))
-    })
-
-    it('should not render the SendHexDataRow if props.showHexData is false', () => {
-      wrapper.setProps({ showHexData: false })
-      const PageContainerContentChild = wrapper.find(PageContainerContent).children()
-      assert(PageContainerContentChild.childAt(0).is(SendFromRow))
-      assert(PageContainerContentChild.childAt(1).is(SendToRow))
-      assert(PageContainerContentChild.childAt(2).is(SendAmountRow))
-      assert(PageContainerContentChild.childAt(3).is(SendGasRow))
-      assert.equal(PageContainerContentChild.childAt(4).exists(), false)
-    })
-  })
-})
diff --git a/ui/app/components/app/send/send-footer/README.md b/ui/app/components/app/send/send-footer/README.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/components/app/send/send-footer/index.js b/ui/app/components/app/send/send-footer/index.js
deleted file mode 100644
index 58e91d622..000000000
--- a/ui/app/components/app/send/send-footer/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './send-footer.container'
diff --git a/ui/app/components/app/send/send-footer/send-footer.component.js b/ui/app/components/app/send/send-footer/send-footer.component.js
deleted file mode 100644
index 7d894391f..000000000
--- a/ui/app/components/app/send/send-footer/send-footer.component.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import PageContainerFooter from '../../../ui/page-container/page-container-footer'
-import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../../helpers/constants/routes'
-
-export default class SendFooter extends Component {
-
-  static propTypes = {
-    addToAddressBookIfNew: PropTypes.func,
-    amount: PropTypes.string,
-    data: PropTypes.string,
-    clearSend: PropTypes.func,
-    disabled: PropTypes.bool,
-    editingTransactionId: PropTypes.string,
-    errors: PropTypes.object,
-    from: PropTypes.object,
-    gasLimit: PropTypes.string,
-    gasPrice: PropTypes.string,
-    gasTotal: PropTypes.string,
-    history: PropTypes.object,
-    inError: PropTypes.bool,
-    selectedToken: PropTypes.object,
-    sign: PropTypes.func,
-    to: PropTypes.string,
-    toAccounts: PropTypes.array,
-    tokenBalance: PropTypes.string,
-    unapprovedTxs: PropTypes.object,
-    update: PropTypes.func,
-    sendErrors: PropTypes.object,
-    gasChangedLabel: PropTypes.string,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  };
-
-  onCancel () {
-    this.props.clearSend()
-    this.props.history.push(DEFAULT_ROUTE)
-  }
-
-  onSubmit (event) {
-    event.preventDefault()
-    const {
-      addToAddressBookIfNew,
-      amount,
-      data,
-      editingTransactionId,
-      from: {address: from},
-      gasLimit: gas,
-      gasPrice,
-      selectedToken,
-      sign,
-      to,
-      unapprovedTxs,
-      // updateTx,
-      update,
-      toAccounts,
-      history,
-      gasChangedLabel,
-    } = this.props
-    const { metricsEvent } = this.context
-
-    // Should not be needed because submit should be disabled if there are errors.
-    // const noErrors = !amountError && toError === null
-
-    // if (!noErrors) {
-    //   return
-    // }
-
-    // TODO: add nickname functionality
-    addToAddressBookIfNew(to, toAccounts)
-    const promise = editingTransactionId
-      ? update({
-        amount,
-        data,
-        editingTransactionId,
-        from,
-        gas,
-        gasPrice,
-        selectedToken,
-        to,
-        unapprovedTxs,
-      })
-      : sign({ data, selectedToken, to, amount, from, gas, gasPrice })
-
-    Promise.resolve(promise)
-      .then(() => {
-        metricsEvent({
-          eventOpts: {
-            category: 'Transactions',
-            action: 'Edit Screen',
-            name: 'Complete',
-          },
-          customVariables: {
-            gasChanged: gasChangedLabel,
-          },
-        })
-        history.push(CONFIRM_TRANSACTION_ROUTE)
-      })
-  }
-
-  formShouldBeDisabled () {
-    const { data, inError, selectedToken, tokenBalance, gasTotal, to } = this.props
-    const missingTokenBalance = selectedToken && !tokenBalance
-    const shouldBeDisabled = inError || !gasTotal || missingTokenBalance || !(data || to)
-    return shouldBeDisabled
-  }
-
-  componentDidUpdate (prevProps) {
-    const { inError, sendErrors } = this.props
-    const { metricsEvent } = this.context
-    if (!prevProps.inError && inError) {
-      const errorField = Object.keys(sendErrors).find(key => sendErrors[key])
-      const errorMessage = sendErrors[errorField]
-
-      metricsEvent({
-        eventOpts: {
-          category: 'Transactions',
-          action: 'Edit Screen',
-          name: 'Error',
-        },
-        customVariables: {
-          errorField,
-          errorMessage,
-        },
-      })
-    }
-  }
-
-  render () {
-    return (
-      <PageContainerFooter
-        onCancel={() => this.onCancel()}
-        onSubmit={e => this.onSubmit(e)}
-        disabled={this.formShouldBeDisabled()}
-      />
-    )
-  }
-
-}
diff --git a/ui/app/components/app/send/send-footer/send-footer.container.js b/ui/app/components/app/send/send-footer/send-footer.container.js
deleted file mode 100644
index 4757f6bec..000000000
--- a/ui/app/components/app/send/send-footer/send-footer.container.js
+++ /dev/null
@@ -1,120 +0,0 @@
-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))
-      }
-    },
-  }
-}
diff --git a/ui/app/components/app/send/send-footer/send-footer.scss b/ui/app/components/app/send/send-footer/send-footer.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/components/app/send/send-footer/send-footer.selectors.js b/ui/app/components/app/send/send-footer/send-footer.selectors.js
deleted file mode 100644
index e20addfdc..000000000
--- a/ui/app/components/app/send/send-footer/send-footer.selectors.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const { getSendErrors } = require('../send.selectors')
-
-const selectors = {
-  isSendFormInError,
-}
-
-module.exports = selectors
-
-function isSendFormInError (state) {
-  return Object.values(getSendErrors(state)).some(n => n)
-}
diff --git a/ui/app/components/app/send/send-footer/send-footer.utils.js b/ui/app/components/app/send/send-footer/send-footer.utils.js
deleted file mode 100644
index abb2ebc77..000000000
--- a/ui/app/components/app/send/send-footer/send-footer.utils.js
+++ /dev/null
@@ -1,87 +0,0 @@
-const ethAbi = require('ethereumjs-abi')
-const ethUtil = require('ethereumjs-util')
-const { TOKEN_TRANSFER_FUNCTION_SIGNATURE } = require('../send.constants')
-
-function addHexPrefixToObjectValues (obj) {
-  return Object.keys(obj).reduce((newObj, key) => {
-    return { ...newObj, [key]: ethUtil.addHexPrefix(obj[key]) }
-  }, {})
-}
-
-function constructTxParams ({ selectedToken, data, to, amount, from, gas, gasPrice }) {
-  const txParams = {
-    data,
-    from,
-    value: '0',
-    gas,
-    gasPrice,
-  }
-
-  if (!selectedToken) {
-    txParams.value = amount
-    txParams.to = to
-  }
-
-  return addHexPrefixToObjectValues(txParams)
-}
-
-function constructUpdatedTx ({
-  amount,
-  data,
-  editingTransactionId,
-  from,
-  gas,
-  gasPrice,
-  selectedToken,
-  to,
-  unapprovedTxs,
-}) {
-  const unapprovedTx = unapprovedTxs[editingTransactionId]
-  const txParamsData = unapprovedTx.txParams.data ? unapprovedTx.txParams.data : data
-  const editingTx = {
-    ...unapprovedTx,
-    txParams: Object.assign(
-      unapprovedTx.txParams,
-      addHexPrefixToObjectValues({
-        data: txParamsData,
-        to,
-        from,
-        gas,
-        gasPrice,
-        value: amount,
-      })
-    ),
-  }
-
-  if (selectedToken) {
-    const data = TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call(
-      ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]),
-      x => ('00' + x.toString(16)).slice(-2)
-    ).join('')
-
-    Object.assign(editingTx.txParams, addHexPrefixToObjectValues({
-      value: '0',
-      to: selectedToken.address,
-      data,
-    }))
-  }
-
-  if (typeof editingTx.txParams.data === 'undefined') {
-    delete editingTx.txParams.data
-  }
-
-  return editingTx
-}
-
-function addressIsNew (toAccounts, newAddress) {
-  const newAddressNormalized = newAddress.toLowerCase()
-  const foundMatching = toAccounts.some(({ address }) => address === newAddressNormalized)
-  return !foundMatching
-}
-
-module.exports = {
-  addressIsNew,
-  constructTxParams,
-  constructUpdatedTx,
-  addHexPrefixToObjectValues,
-}
diff --git a/ui/app/components/app/send/send-footer/tests/send-footer-component.test.js b/ui/app/components/app/send/send-footer/tests/send-footer-component.test.js
deleted file mode 100644
index 6683ca8c0..000000000
--- a/ui/app/components/app/send/send-footer/tests/send-footer-component.test.js
+++ /dev/null
@@ -1,233 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import sinon from 'sinon'
-import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../../../helpers/constants/routes'
-import SendFooter from '../send-footer.component.js'
-
-import PageContainerFooter from '../../../../ui/page-container/page-container-footer'
-
-const propsMethodSpies = {
-  addToAddressBookIfNew: sinon.spy(),
-  clearSend: sinon.spy(),
-  sign: sinon.spy(),
-  update: sinon.spy(),
-}
-const historySpies = {
-  push: sinon.spy(),
-}
-const MOCK_EVENT = { preventDefault: () => {} }
-
-sinon.spy(SendFooter.prototype, 'onCancel')
-sinon.spy(SendFooter.prototype, 'onSubmit')
-
-describe('SendFooter Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<SendFooter
-      addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
-      amount={'mockAmount'}
-      clearSend={propsMethodSpies.clearSend}
-      disabled={true}
-      editingTransactionId={'mockEditingTransactionId'}
-      errors={{}}
-      from={ { address: 'mockAddress', balance: 'mockBalance' } }
-      gasLimit={'mockGasLimit'}
-      gasPrice={'mockGasPrice'}
-      gasTotal={'mockGasTotal'}
-      history={historySpies}
-      inError={false}
-      selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
-      sign={propsMethodSpies.sign}
-      to={'mockTo'}
-      toAccounts={['mockAccount']}
-      tokenBalance={'mockTokenBalance'}
-      unapprovedTxs={['mockTx']}
-      update={propsMethodSpies.update}
-      sendErrors={{}}
-    />, { context: { t: str => str, metricsEvent: () => ({}) } })
-  })
-
-  afterEach(() => {
-    propsMethodSpies.clearSend.resetHistory()
-    propsMethodSpies.addToAddressBookIfNew.resetHistory()
-    propsMethodSpies.clearSend.resetHistory()
-    propsMethodSpies.sign.resetHistory()
-    propsMethodSpies.update.resetHistory()
-    historySpies.push.resetHistory()
-    SendFooter.prototype.onCancel.resetHistory()
-    SendFooter.prototype.onSubmit.resetHistory()
-  })
-
-  describe('onCancel', () => {
-    it('should call clearSend', () => {
-      assert.equal(propsMethodSpies.clearSend.callCount, 0)
-      wrapper.instance().onCancel()
-      assert.equal(propsMethodSpies.clearSend.callCount, 1)
-    })
-
-    it('should call history.push', () => {
-      assert.equal(historySpies.push.callCount, 0)
-      wrapper.instance().onCancel()
-      assert.equal(historySpies.push.callCount, 1)
-      assert.equal(historySpies.push.getCall(0).args[0], DEFAULT_ROUTE)
-    })
-  })
-
-
-  describe('formShouldBeDisabled()', () => {
-    const config = {
-      'should return true if inError is truthy': {
-        inError: true,
-        expectedResult: true,
-      },
-      'should return true if gasTotal is falsy': {
-        inError: false,
-        gasTotal: false,
-        expectedResult: true,
-      },
-      'should return true if to is truthy': {
-        to: '0xsomevalidAddress',
-        inError: false,
-        gasTotal: false,
-        expectedResult: true,
-      },
-      'should return true if selectedToken is truthy and tokenBalance is falsy': {
-        selectedToken: true,
-        tokenBalance: null,
-        expectedResult: true,
-      },
-      'should return false if inError is false and all other params are truthy': {
-        inError: false,
-        gasTotal: '0x123',
-        selectedToken: true,
-        tokenBalance: 123,
-        expectedResult: false,
-      },
-    }
-    Object.entries(config).map(([description, obj]) => {
-      it(description, () => {
-        wrapper.setProps(obj)
-        assert.equal(wrapper.instance().formShouldBeDisabled(), obj.expectedResult)
-      })
-    })
-  })
-
-  describe('onSubmit', () => {
-    it('should call addToAddressBookIfNew with the correct params', () => {
-      wrapper.instance().onSubmit(MOCK_EVENT)
-      assert(propsMethodSpies.addToAddressBookIfNew.calledOnce)
-      assert.deepEqual(
-        propsMethodSpies.addToAddressBookIfNew.getCall(0).args,
-        ['mockTo', ['mockAccount']]
-      )
-    })
-
-    it('should call props.update if editingTransactionId is truthy', () => {
-      wrapper.instance().onSubmit(MOCK_EVENT)
-      assert(propsMethodSpies.update.calledOnce)
-      assert.deepEqual(
-        propsMethodSpies.update.getCall(0).args[0],
-        {
-          data: undefined,
-          amount: 'mockAmount',
-          editingTransactionId: 'mockEditingTransactionId',
-          from: 'mockAddress',
-          gas: 'mockGasLimit',
-          gasPrice: 'mockGasPrice',
-          selectedToken: { mockProp: 'mockSelectedTokenProp' },
-          to: 'mockTo',
-          unapprovedTxs: ['mockTx'],
-        }
-      )
-    })
-
-    it('should not call props.sign if editingTransactionId is truthy', () => {
-      assert.equal(propsMethodSpies.sign.callCount, 0)
-    })
-
-    it('should call props.sign if editingTransactionId is falsy', () => {
-      wrapper.setProps({ editingTransactionId: null })
-      wrapper.instance().onSubmit(MOCK_EVENT)
-      assert(propsMethodSpies.sign.calledOnce)
-      assert.deepEqual(
-        propsMethodSpies.sign.getCall(0).args[0],
-        {
-          data: undefined,
-          amount: 'mockAmount',
-          from: 'mockAddress',
-          gas: 'mockGasLimit',
-          gasPrice: 'mockGasPrice',
-          selectedToken: { mockProp: 'mockSelectedTokenProp' },
-          to: 'mockTo',
-        }
-      )
-    })
-
-    it('should not call props.update if editingTransactionId is falsy', () => {
-      assert.equal(propsMethodSpies.update.callCount, 0)
-    })
-
-    it('should call history.push', done => {
-      Promise.resolve(wrapper.instance().onSubmit(MOCK_EVENT))
-        .then(() => {
-          assert.equal(historySpies.push.callCount, 1)
-          assert.equal(historySpies.push.getCall(0).args[0], CONFIRM_TRANSACTION_ROUTE)
-          done()
-        })
-    })
-  })
-
-  describe('render', () => {
-    beforeEach(() => {
-      sinon.stub(SendFooter.prototype, 'formShouldBeDisabled').returns('formShouldBeDisabledReturn')
-      wrapper = shallow(<SendFooter
-        addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
-        amount={'mockAmount'}
-        clearSend={propsMethodSpies.clearSend}
-        disabled={true}
-        editingTransactionId={'mockEditingTransactionId'}
-        errors={{}}
-        from={ { address: 'mockAddress', balance: 'mockBalance' } }
-        gasLimit={'mockGasLimit'}
-        gasPrice={'mockGasPrice'}
-        gasTotal={'mockGasTotal'}
-        history={historySpies}
-        inError={false}
-        selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
-        sign={propsMethodSpies.sign}
-        to={'mockTo'}
-        toAccounts={['mockAccount']}
-        tokenBalance={'mockTokenBalance'}
-        unapprovedTxs={['mockTx']}
-        update={propsMethodSpies.update}
-      />, { context: { t: str => str, metricsEvent: () => ({}) } })
-    })
-
-    afterEach(() => {
-      SendFooter.prototype.formShouldBeDisabled.restore()
-    })
-
-    it('should render a PageContainerFooter component', () => {
-      assert.equal(wrapper.find(PageContainerFooter).length, 1)
-    })
-
-    it('should pass the correct props to PageContainerFooter', () => {
-      const {
-        onCancel,
-        onSubmit,
-        disabled,
-      } = wrapper.find(PageContainerFooter).props()
-      assert.equal(disabled, 'formShouldBeDisabledReturn')
-
-      assert.equal(SendFooter.prototype.onSubmit.callCount, 0)
-      onSubmit(MOCK_EVENT)
-      assert.equal(SendFooter.prototype.onSubmit.callCount, 1)
-
-      assert.equal(SendFooter.prototype.onCancel.callCount, 0)
-      onCancel()
-      assert.equal(SendFooter.prototype.onCancel.callCount, 1)
-    })
-  })
-})
diff --git a/ui/app/components/app/send/send-footer/tests/send-footer-container.test.js b/ui/app/components/app/send/send-footer/tests/send-footer-container.test.js
deleted file mode 100644
index 64c6451f2..000000000
--- a/ui/app/components/app/send/send-footer/tests/send-footer-container.test.js
+++ /dev/null
@@ -1,205 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-let mapStateToProps
-let mapDispatchToProps
-
-const actionSpies = {
-  addToAddressBook: sinon.spy(),
-  clearSend: sinon.spy(),
-  signTokenTx: sinon.spy(),
-  signTx: sinon.spy(),
-  updateTransaction: sinon.spy(),
-}
-const utilsStubs = {
-  addressIsNew: sinon.stub().returns(true),
-  constructTxParams: sinon.stub().returns({
-    value: 'mockAmount',
-  }),
-  constructUpdatedTx: sinon.stub().returns('mockConstructedUpdatedTxParams'),
-}
-
-proxyquire('../send-footer.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      mapDispatchToProps = md
-      return () => ({})
-    },
-  },
-  '../../../../store/actions': actionSpies,
-  '../send.selectors': {
-    getGasLimit: (s) => `mockGasLimit:${s}`,
-    getGasPrice: (s) => `mockGasPrice:${s}`,
-    getGasTotal: (s) => `mockGasTotal:${s}`,
-    getSelectedToken: (s) => `mockSelectedToken:${s}`,
-    getSendAmount: (s) => `mockAmount:${s}`,
-    getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`,
-    getSendFromObject: (s) => `mockFromObject:${s}`,
-    getSendTo: (s) => `mockTo:${s}`,
-    getSendToAccounts: (s) => `mockToAccounts:${s}`,
-    getTokenBalance: (s) => `mockTokenBalance:${s}`,
-    getSendHexData: (s) => `mockHexData:${s}`,
-    getUnapprovedTxs: (s) => `mockUnapprovedTxs:${s}`,
-    getSendErrors: (s) => `mockSendErrors:${s}`,
-  },
-  './send-footer.selectors': { isSendFormInError: (s) => `mockInError:${s}` },
-  './send-footer.utils': utilsStubs,
-  '../../../../selectors/custom-gas': {
-    getRenderableEstimateDataForSmallButtonsFromGWEI: (s) => ([{ labelKey: `mockLabel:${s}` }]),
-    getDefaultActiveButtonIndex: () => 0,
-  },
-})
-
-describe('send-footer container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        amount: 'mockAmount:mockState',
-        data: 'mockHexData:mockState',
-        selectedToken: 'mockSelectedToken:mockState',
-        editingTransactionId: 'mockEditingTransactionId:mockState',
-        from: 'mockFromObject:mockState',
-        gasLimit: 'mockGasLimit:mockState',
-        gasPrice: 'mockGasPrice:mockState',
-        gasTotal: 'mockGasTotal:mockState',
-        inError: 'mockInError:mockState',
-        to: 'mockTo:mockState',
-        toAccounts: 'mockToAccounts:mockState',
-        tokenBalance: 'mockTokenBalance:mockState',
-        unapprovedTxs: 'mockUnapprovedTxs:mockState',
-        sendErrors: 'mockSendErrors:mockState',
-        gasChangedLabel: 'mockLabel:mockState',
-      })
-    })
-
-  })
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy
-    let mapDispatchToPropsObject
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy()
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
-    })
-
-    describe('clearSend()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.clearSend()
-        assert(dispatchSpy.calledOnce)
-        assert(actionSpies.clearSend.calledOnce)
-      })
-    })
-
-    describe('sign()', () => {
-      it('should dispatch a signTokenTx action if selectedToken is defined', () => {
-        mapDispatchToPropsObject.sign({
-          selectedToken: {
-            address: '0xabc',
-          },
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-        })
-        assert(dispatchSpy.calledOnce)
-        assert.deepEqual(
-          utilsStubs.constructTxParams.getCall(0).args[0],
-          {
-            data: undefined,
-            selectedToken: {
-              address: '0xabc',
-            },
-            to: 'mockTo',
-            amount: 'mockAmount',
-            from: 'mockFrom',
-            gas: 'mockGas',
-            gasPrice: 'mockGasPrice',
-          }
-        )
-        assert.deepEqual(
-          actionSpies.signTokenTx.getCall(0).args,
-          [ '0xabc', 'mockTo', 'mockAmount', { value: 'mockAmount' } ]
-        )
-      })
-
-      it('should dispatch a sign action if selectedToken is not defined', () => {
-        utilsStubs.constructTxParams.resetHistory()
-        mapDispatchToPropsObject.sign({
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-        })
-        assert(dispatchSpy.calledOnce)
-        assert.deepEqual(
-          utilsStubs.constructTxParams.getCall(0).args[0],
-          {
-            data: undefined,
-            selectedToken: undefined,
-            to: 'mockTo',
-            amount: 'mockAmount',
-            from: 'mockFrom',
-            gas: 'mockGas',
-            gasPrice: 'mockGasPrice',
-          }
-        )
-        assert.deepEqual(
-          actionSpies.signTx.getCall(0).args,
-          [ { value: 'mockAmount' } ]
-        )
-      })
-    })
-
-    describe('update()', () => {
-      it('should dispatch an updateTransaction action', () => {
-        mapDispatchToPropsObject.update({
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-          editingTransactionId: 'mockEditingTransactionId',
-          selectedToken: 'mockSelectedToken',
-          unapprovedTxs: 'mockUnapprovedTxs',
-        })
-        assert(dispatchSpy.calledOnce)
-        assert.deepEqual(
-          utilsStubs.constructUpdatedTx.getCall(0).args[0],
-          {
-            data: undefined,
-            to: 'mockTo',
-            amount: 'mockAmount',
-            from: 'mockFrom',
-            gas: 'mockGas',
-            gasPrice: 'mockGasPrice',
-            editingTransactionId: 'mockEditingTransactionId',
-            selectedToken: 'mockSelectedToken',
-            unapprovedTxs: 'mockUnapprovedTxs',
-          }
-        )
-        assert.equal(actionSpies.updateTransaction.getCall(0).args[0], 'mockConstructedUpdatedTxParams')
-      })
-    })
-
-    describe('addToAddressBookIfNew()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.addToAddressBookIfNew('mockNewAddress', 'mockToAccounts', 'mockNickname')
-        assert(dispatchSpy.calledOnce)
-        assert.equal(utilsStubs.addressIsNew.getCall(0).args[0], 'mockToAccounts')
-        assert.deepEqual(
-          actionSpies.addToAddressBook.getCall(0).args,
-          [ '0xmockNewAddress', 'mockNickname' ]
-        )
-      })
-    })
-
-  })
-
-})
diff --git a/ui/app/components/app/send/send-footer/tests/send-footer-selectors.test.js b/ui/app/components/app/send/send-footer/tests/send-footer-selectors.test.js
deleted file mode 100644
index 8de032f57..000000000
--- a/ui/app/components/app/send/send-footer/tests/send-footer-selectors.test.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-
-const {
-  isSendFormInError,
-} = proxyquire('../send-footer.selectors', {
-  '../send.selectors': {
-    getSendErrors: (mockState) => mockState.errors,
-  },
-})
-
-describe('send-footer selectors', () => {
-
-  describe('getTitleKey()', () => {
-    it('should return true if any of the values of the object returned by getSendErrors are truthy', () => {
-      assert.equal(isSendFormInError({ errors: { a: 'abc', b: false} }), true)
-    })
-
-    it('should return false if all of the values of the object returned by getSendErrors are falsy', () => {
-      assert.equal(isSendFormInError({ errors: { a: false, b: null} }), false)
-    })
-  })
-
-})
diff --git a/ui/app/components/app/send/send-footer/tests/send-footer-utils.test.js b/ui/app/components/app/send/send-footer/tests/send-footer-utils.test.js
deleted file mode 100644
index 28ff0c891..000000000
--- a/ui/app/components/app/send/send-footer/tests/send-footer-utils.test.js
+++ /dev/null
@@ -1,234 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-const { TOKEN_TRANSFER_FUNCTION_SIGNATURE } = require('../../send.constants')
-
-const stubs = {
-  rawEncode: sinon.stub().callsFake((arr1, arr2) => {
-    return [ ...arr1, ...arr2 ]
-  }),
-}
-
-const sendUtils = proxyquire('../send-footer.utils.js', {
-  'ethereumjs-abi': {
-    rawEncode: stubs.rawEncode,
-  },
-})
-const {
-  addressIsNew,
-  constructTxParams,
-  constructUpdatedTx,
-  addHexPrefixToObjectValues,
-} = sendUtils
-
-describe('send-footer utils', () => {
-
-  describe('addHexPrefixToObjectValues()', () => {
-    it('should return a new object with the same properties with a 0x prefix', () => {
-      assert.deepEqual(
-        addHexPrefixToObjectValues({
-          prop1: '0x123',
-          prop2: '456',
-          prop3: 'x',
-        }),
-        {
-          prop1: '0x123',
-          prop2: '0x456',
-          prop3: '0xx',
-        }
-      )
-    })
-  })
-
-  describe('addressIsNew()', () => {
-    it('should return false if the address exists in toAccounts', () => {
-      assert.equal(
-        addressIsNew([
-          { address: '0xabc' },
-          { address: '0xdef' },
-          { address: '0xghi' },
-        ], '0xdef'),
-        false
-      )
-    })
-
-    it('should return true if the address does not exists in toAccounts', () => {
-      assert.equal(
-        addressIsNew([
-          { address: '0xabc' },
-          { address: '0xdef' },
-          { address: '0xghi' },
-        ], '0xxyz'),
-        true
-      )
-    })
-  })
-
-  describe('constructTxParams()', () => {
-    it('should return a new txParams object with data if there data is given', () => {
-      assert.deepEqual(
-        constructTxParams({
-          data: 'someData',
-          selectedToken: false,
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-        }),
-        {
-          data: '0xsomeData',
-          to: '0xmockTo',
-          value: '0xmockAmount',
-          from: '0xmockFrom',
-          gas: '0xmockGas',
-          gasPrice: '0xmockGasPrice',
-        }
-      )
-    })
-
-    it('should return a new txParams object with value and to properties if there is no selectedToken', () => {
-      assert.deepEqual(
-        constructTxParams({
-          selectedToken: false,
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-        }),
-        {
-          data: undefined,
-          to: '0xmockTo',
-          value: '0xmockAmount',
-          from: '0xmockFrom',
-          gas: '0xmockGas',
-          gasPrice: '0xmockGasPrice',
-        }
-      )
-    })
-
-    it('should return a new txParams object without a to property and a 0 value if there is a selectedToken', () => {
-      assert.deepEqual(
-        constructTxParams({
-          selectedToken: true,
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-        }),
-        {
-          data: undefined,
-          value: '0x0',
-          from: '0xmockFrom',
-          gas: '0xmockGas',
-          gasPrice: '0xmockGasPrice',
-        }
-      )
-    })
-  })
-
-  describe('constructUpdatedTx()', () => {
-    it('should return a new object with an updated txParams', () => {
-      const result = constructUpdatedTx({
-        amount: 'mockAmount',
-        editingTransactionId: '0x456',
-        from: 'mockFrom',
-        gas: 'mockGas',
-        gasPrice: 'mockGasPrice',
-        selectedToken: false,
-        to: 'mockTo',
-        unapprovedTxs: {
-          '0x123': {},
-          '0x456': {
-            unapprovedTxParam: 'someOtherParam',
-            txParams: {
-              data: 'someData',
-            },
-          },
-        },
-      })
-
-      assert.deepEqual(result, {
-        unapprovedTxParam: 'someOtherParam',
-        txParams: {
-          from: '0xmockFrom',
-          gas: '0xmockGas',
-          gasPrice: '0xmockGasPrice',
-          value: '0xmockAmount',
-          to: '0xmockTo',
-          data: '0xsomeData',
-        },
-      })
-    })
-
-    it('should not have data property if there is non in the original tx', () => {
-      const result = constructUpdatedTx({
-        amount: 'mockAmount',
-        editingTransactionId: '0x456',
-        from: 'mockFrom',
-        gas: 'mockGas',
-        gasPrice: 'mockGasPrice',
-        selectedToken: false,
-        to: 'mockTo',
-        unapprovedTxs: {
-          '0x123': {},
-          '0x456': {
-            unapprovedTxParam: 'someOtherParam',
-            txParams: {
-              from: 'oldFrom',
-              gas: 'oldGas',
-              gasPrice: 'oldGasPrice',
-            },
-          },
-        },
-      })
-
-      assert.deepEqual(result, {
-        unapprovedTxParam: 'someOtherParam',
-        txParams: {
-          from: '0xmockFrom',
-          gas: '0xmockGas',
-          gasPrice: '0xmockGasPrice',
-          value: '0xmockAmount',
-          to: '0xmockTo',
-        },
-      })
-    })
-
-    it('should have token property values if selectedToken is truthy', () => {
-      const result = constructUpdatedTx({
-        amount: 'mockAmount',
-        editingTransactionId: '0x456',
-        from: 'mockFrom',
-        gas: 'mockGas',
-        gasPrice: 'mockGasPrice',
-        selectedToken: {
-          address: 'mockTokenAddress',
-        },
-        to: 'mockTo',
-        unapprovedTxs: {
-          '0x123': {},
-          '0x456': {
-            unapprovedTxParam: 'someOtherParam',
-            txParams: {},
-          },
-        },
-      })
-
-      assert.deepEqual(result, {
-        unapprovedTxParam: 'someOtherParam',
-        txParams: {
-          from: '0xmockFrom',
-          gas: '0xmockGas',
-          gasPrice: '0xmockGasPrice',
-          value: '0x0',
-          to: '0xmockTokenAddress',
-          data: `${TOKEN_TRANSFER_FUNCTION_SIGNATURE}ss56Tont`,
-        },
-      })
-    })
-  })
-
-})
diff --git a/ui/app/components/app/send/send-header/README.md b/ui/app/components/app/send/send-header/README.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/components/app/send/send-header/index.js b/ui/app/components/app/send/send-header/index.js
deleted file mode 100644
index 0b17f0b7d..000000000
--- a/ui/app/components/app/send/send-header/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './send-header.container'
diff --git a/ui/app/components/app/send/send-header/send-header.component.js b/ui/app/components/app/send/send-header/send-header.component.js
deleted file mode 100644
index f216954ef..000000000
--- a/ui/app/components/app/send/send-header/send-header.component.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import PageContainerHeader from '../../../ui/page-container/page-container-header'
-import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes'
-
-export default class SendHeader extends Component {
-
-  static propTypes = {
-    clearSend: PropTypes.func,
-    history: PropTypes.object,
-    titleKey: PropTypes.string,
-    subtitleParams: PropTypes.array,
-  };
-
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  onClose () {
-    this.props.clearSend()
-    this.props.history.push(DEFAULT_ROUTE)
-  }
-
-  render () {
-    return (
-      <PageContainerHeader
-        onClose={() => this.onClose()}
-        subtitle={this.context.t(...this.props.subtitleParams)}
-        title={this.context.t(this.props.titleKey)}
-      />
-    )
-  }
-
-}
diff --git a/ui/app/components/app/send/send-header/send-header.container.js b/ui/app/components/app/send/send-header/send-header.container.js
deleted file mode 100644
index ce53fba9a..000000000
--- a/ui/app/components/app/send/send-header/send-header.container.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { connect } from 'react-redux'
-import { clearSend } from '../../../../store/actions'
-import SendHeader from './send-header.component'
-import { getSubtitleParams, getTitleKey } from './send-header.selectors'
-
-export default connect(mapStateToProps, mapDispatchToProps)(SendHeader)
-
-function mapStateToProps (state) {
-  return {
-    titleKey: getTitleKey(state),
-    subtitleParams: getSubtitleParams(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    clearSend: () => dispatch(clearSend()),
-  }
-}
diff --git a/ui/app/components/app/send/send-header/send-header.selectors.js b/ui/app/components/app/send/send-header/send-header.selectors.js
deleted file mode 100644
index d7c9d3766..000000000
--- a/ui/app/components/app/send/send-header/send-header.selectors.js
+++ /dev/null
@@ -1,37 +0,0 @@
-const {
-  getSelectedToken,
-  getSendEditingTransactionId,
-} = require('../send.selectors.js')
-
-const selectors = {
-  getTitleKey,
-  getSubtitleParams,
-}
-
-module.exports = selectors
-
-function getTitleKey (state) {
-  const isEditing = Boolean(getSendEditingTransactionId(state))
-  const isToken = Boolean(getSelectedToken(state))
-
-  if (isEditing) {
-    return 'edit'
-  } else if (isToken) {
-    return 'sendTokens'
-  } else {
-    return 'sendETH'
-  }
-}
-
-function getSubtitleParams (state) {
-    const isEditing = Boolean(getSendEditingTransactionId(state))
-    const token = getSelectedToken(state)
-
-    if (isEditing) {
-      return [ 'editingTransaction' ]
-    } else if (token) {
-      return [ 'onlySendTokensToAccountAddress', [ token.symbol ] ]
-    } else {
-      return [ 'onlySendToEtherAddress' ]
-    }
-}
diff --git a/ui/app/components/app/send/send-header/tests/send-header-component.test.js b/ui/app/components/app/send/send-header/tests/send-header-component.test.js
deleted file mode 100644
index db2ee8967..000000000
--- a/ui/app/components/app/send/send-header/tests/send-header-component.test.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import sinon from 'sinon'
-import { DEFAULT_ROUTE } from '../../../../../helpers/constants/routes'
-import SendHeader from '../send-header.component.js'
-
-import PageContainerHeader from '../../../../ui/page-container/page-container-header'
-
-const propsMethodSpies = {
-  clearSend: sinon.spy(),
-}
-const historySpies = {
-  push: sinon.spy(),
-}
-
-sinon.spy(SendHeader.prototype, 'onClose')
-
-describe('SendHeader Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<SendHeader
-      clearSend={propsMethodSpies.clearSend}
-      history={historySpies}
-      titleKey={'mockTitleKey'}
-      subtitleParams={[ 'mockSubtitleKey', 'mockVal']}
-    />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
-  })
-
-  afterEach(() => {
-    propsMethodSpies.clearSend.resetHistory()
-    historySpies.push.resetHistory()
-    SendHeader.prototype.onClose.resetHistory()
-  })
-
-  describe('onClose', () => {
-    it('should call clearSend', () => {
-      assert.equal(propsMethodSpies.clearSend.callCount, 0)
-      wrapper.instance().onClose()
-      assert.equal(propsMethodSpies.clearSend.callCount, 1)
-    })
-
-    it('should call history.push', () => {
-      assert.equal(historySpies.push.callCount, 0)
-      wrapper.instance().onClose()
-      assert.equal(historySpies.push.callCount, 1)
-      assert.equal(historySpies.push.getCall(0).args[0], DEFAULT_ROUTE)
-    })
-  })
-
-  describe('render', () => {
-    it('should render a PageContainerHeader compenent', () => {
-      assert.equal(wrapper.find(PageContainerHeader).length, 1)
-    })
-
-    it('should pass the correct props to PageContainerHeader', () => {
-      const {
-        onClose,
-        subtitle,
-        title,
-      } = wrapper.find(PageContainerHeader).props()
-      assert.equal(subtitle, 'mockSubtitleKeymockVal')
-      assert.equal(title, 'mockTitleKey')
-      assert.equal(SendHeader.prototype.onClose.callCount, 0)
-      onClose()
-      assert.equal(SendHeader.prototype.onClose.callCount, 1)
-    })
-  })
-})
diff --git a/ui/app/components/app/send/send-header/tests/send-header-container.test.js b/ui/app/components/app/send/send-header/tests/send-header-container.test.js
deleted file mode 100644
index 634c3424b..000000000
--- a/ui/app/components/app/send/send-header/tests/send-header-container.test.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-let mapStateToProps
-let mapDispatchToProps
-
-const actionSpies = {
-  clearSend: sinon.spy(),
-}
-
-proxyquire('../send-header.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      mapDispatchToProps = md
-      return () => ({})
-    },
-  },
-  '../../../../store/actions': actionSpies,
-  './send-header.selectors': {
-    getTitleKey: (s) => `mockTitleKey:${s}`,
-    getSubtitleParams: (s) => `mockSubtitleParams:${s}`,
-  },
-})
-
-describe('send-header container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        titleKey: 'mockTitleKey:mockState',
-        subtitleParams: 'mockSubtitleParams:mockState',
-      })
-    })
-
-  })
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy
-    let mapDispatchToPropsObject
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy()
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
-    })
-
-    describe('clearSend()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.clearSend()
-        assert(dispatchSpy.calledOnce)
-        assert(actionSpies.clearSend.calledOnce)
-      })
-    })
-
-  })
-
-})
diff --git a/ui/app/components/app/send/send-header/tests/send-header-selectors.test.js b/ui/app/components/app/send/send-header/tests/send-header-selectors.test.js
deleted file mode 100644
index e0c6a3ab3..000000000
--- a/ui/app/components/app/send/send-header/tests/send-header-selectors.test.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-
-const {
-  getTitleKey,
-  getSubtitleParams,
-} = proxyquire('../send-header.selectors', {
-  '../send.selectors': {
-    getSelectedToken: (mockState) => mockState.t,
-    getSendEditingTransactionId: (mockState) => mockState.e,
-  },
-})
-
-describe('send-header selectors', () => {
-
-  describe('getTitleKey()', () => {
-    it('should return the correct key when getSendEditingTransactionId is truthy', () => {
-      assert.equal(getTitleKey({ e: 1, t: true }), 'edit')
-    })
-
-    it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => {
-      assert.equal(getTitleKey({ e: null, t: 'abc' }), 'sendTokens')
-    })
-
-    it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => {
-      assert.equal(getTitleKey({ e: null }), 'sendETH')
-    })
-  })
-
-  describe('getSubtitleParams()', () => {
-    it('should return the correct params when getSendEditingTransactionId is truthy', () => {
-      assert.deepEqual(getSubtitleParams({ e: 1, t: true }), [ 'editingTransaction' ])
-    })
-
-    it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => {
-      assert.deepEqual(
-        getSubtitleParams({ e: null, t: { symbol: 'ABC' } }),
-        [ 'onlySendTokensToAccountAddress', [ 'ABC' ] ]
-      )
-    })
-
-    it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => {
-      assert.deepEqual(getSubtitleParams({ e: null }), [ 'onlySendToEtherAddress' ])
-    })
-  })
-
-})
diff --git a/ui/app/components/app/send/send.component.js b/ui/app/components/app/send/send.component.js
deleted file mode 100644
index a38b681b0..000000000
--- a/ui/app/components/app/send/send.component.js
+++ /dev/null
@@ -1,218 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import PersistentForm from '../../../../lib/persistent-form'
-import {
-  getAmountErrorObject,
-  getGasFeeErrorObject,
-  getToAddressForGasUpdate,
-  doesAmountErrorRequireUpdate,
-} from './send.utils'
-
-import SendHeader from './send-header'
-import SendContent from './send-content'
-import SendFooter from './send-footer'
-
-export default class SendTransactionScreen extends PersistentForm {
-
-  static propTypes = {
-    amount: PropTypes.string,
-    amountConversionRate: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-    blockGasLimit: PropTypes.string,
-    conversionRate: PropTypes.number,
-    editingTransactionId: PropTypes.string,
-    from: PropTypes.object,
-    gasLimit: PropTypes.string,
-    gasPrice: PropTypes.string,
-    gasTotal: PropTypes.string,
-    history: PropTypes.object,
-    network: PropTypes.string,
-    primaryCurrency: PropTypes.string,
-    recentBlocks: PropTypes.array,
-    selectedAddress: PropTypes.string,
-    selectedToken: PropTypes.object,
-    tokenBalance: PropTypes.string,
-    tokenContract: PropTypes.object,
-    fetchBasicGasEstimates: PropTypes.func,
-    updateAndSetGasTotal: PropTypes.func,
-    updateSendErrors: PropTypes.func,
-    updateSendTokenBalance: PropTypes.func,
-    scanQrCode: PropTypes.func,
-    qrCodeDetected: PropTypes.func,
-    qrCodeData: PropTypes.object,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.qrCodeData) {
-      if (nextProps.qrCodeData.type === 'address') {
-        const scannedAddress = nextProps.qrCodeData.values.address.toLowerCase()
-        const currentAddress = this.props.to && this.props.to.toLowerCase()
-        if (currentAddress !== scannedAddress) {
-          this.props.updateSendTo(scannedAddress)
-          this.updateGas({ to: scannedAddress })
-          // Clean up QR code data after handling
-          this.props.qrCodeDetected(null)
-        }
-      }
-    }
-  }
-
-  updateGas ({ to: updatedToAddress, amount: value, data } = {}) {
-    const {
-      amount,
-      blockGasLimit,
-      editingTransactionId,
-      gasLimit,
-      gasPrice,
-      recentBlocks,
-      selectedAddress,
-      selectedToken = {},
-      to: currentToAddress,
-      updateAndSetGasLimit,
-    } = this.props
-
-    updateAndSetGasLimit({
-      blockGasLimit,
-      editingTransactionId,
-      gasLimit,
-      gasPrice,
-      recentBlocks,
-      selectedAddress,
-      selectedToken,
-      to: getToAddressForGasUpdate(updatedToAddress, currentToAddress),
-      value: value || amount,
-      data,
-    })
-  }
-
-  componentDidUpdate (prevProps) {
-    const {
-      amount,
-      amountConversionRate,
-      conversionRate,
-      from: { address, balance },
-      gasTotal,
-      network,
-      primaryCurrency,
-      selectedToken,
-      tokenBalance,
-      updateSendErrors,
-      updateSendTokenBalance,
-      tokenContract,
-    } = this.props
-
-    const {
-      from: { balance: prevBalance },
-      gasTotal: prevGasTotal,
-      tokenBalance: prevTokenBalance,
-      network: prevNetwork,
-    } = prevProps
-
-    const uninitialized = [prevBalance, prevGasTotal].every(n => n === null)
-
-    const amountErrorRequiresUpdate = doesAmountErrorRequireUpdate({
-      balance,
-      gasTotal,
-      prevBalance,
-      prevGasTotal,
-      prevTokenBalance,
-      selectedToken,
-      tokenBalance,
-    })
-
-    if (amountErrorRequiresUpdate) {
-      const amountErrorObject = getAmountErrorObject({
-        amount,
-        amountConversionRate,
-        balance,
-        conversionRate,
-        gasTotal,
-        primaryCurrency,
-        selectedToken,
-        tokenBalance,
-      })
-      const gasFeeErrorObject = selectedToken
-        ? getGasFeeErrorObject({
-          amountConversionRate,
-          balance,
-          conversionRate,
-          gasTotal,
-          primaryCurrency,
-          selectedToken,
-        })
-        : { gasFee: null }
-      updateSendErrors(Object.assign(amountErrorObject, gasFeeErrorObject))
-    }
-
-    if (!uninitialized) {
-
-      if (network !== prevNetwork && network !== 'loading') {
-        updateSendTokenBalance({
-          selectedToken,
-          tokenContract,
-          address,
-        })
-        this.updateGas()
-      }
-    }
-  }
-
-  componentDidMount () {
-    this.props.fetchBasicGasEstimates()
-    .then(() => {
-      this.updateGas()
-    })
-  }
-
-  componentWillMount () {
-    const {
-      from: { address },
-      selectedToken,
-      tokenContract,
-      updateSendTokenBalance,
-    } = this.props
-
-    updateSendTokenBalance({
-      selectedToken,
-      tokenContract,
-      address,
-    })
-
-    // Show QR Scanner modal  if ?scan=true
-    if (window.location.search === '?scan=true') {
-      this.props.scanQrCode()
-
-      // Clear the queryString param after showing the modal
-      const cleanUrl = location.href.split('?')[0]
-      history.pushState({}, null, `${cleanUrl}`)
-      window.location.hash = '#send'
-    }
-  }
-
-  componentWillUnmount () {
-    this.props.resetSendState()
-  }
-
-  render () {
-    const { history, showHexData } = this.props
-
-    return (
-      <div className="page-container">
-        <SendHeader history={history}/>
-        <SendContent
-          updateGas={(updateData) => this.updateGas(updateData)}
-          scanQrCode={_ => this.props.scanQrCode()}
-          showHexData={showHexData}
-        />
-        <SendFooter history={history}/>
-      </div>
-    )
-  }
-
-}
diff --git a/ui/app/components/app/send/send.constants.js b/ui/app/components/app/send/send.constants.js
deleted file mode 100644
index 36549038e..000000000
--- a/ui/app/components/app/send/send.constants.js
+++ /dev/null
@@ -1,61 +0,0 @@
-const ethUtil = require('ethereumjs-util')
-const { conversionUtil, multiplyCurrencies } = require('../../../helpers/utils/conversion-util')
-
-const MIN_GAS_PRICE_DEC = '0'
-const MIN_GAS_PRICE_HEX = (parseInt(MIN_GAS_PRICE_DEC)).toString(16)
-const MIN_GAS_LIMIT_DEC = '21000'
-const MIN_GAS_LIMIT_HEX = (parseInt(MIN_GAS_LIMIT_DEC)).toString(16)
-
-const MIN_GAS_PRICE_GWEI = ethUtil.addHexPrefix(conversionUtil(MIN_GAS_PRICE_HEX, {
-  fromDenomination: 'WEI',
-  toDenomination: 'GWEI',
-  fromNumericBase: 'hex',
-  toNumericBase: 'hex',
-  numberOfDecimals: 1,
-}))
-
-const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT_HEX, MIN_GAS_PRICE_HEX, {
-  toNumericBase: 'hex',
-  multiplicandBase: 16,
-  multiplierBase: 16,
-})
-
-const TOKEN_TRANSFER_FUNCTION_SIGNATURE = '0xa9059cbb'
-
-const INSUFFICIENT_FUNDS_ERROR = 'insufficientFunds'
-const INSUFFICIENT_TOKENS_ERROR = 'insufficientTokens'
-const NEGATIVE_ETH_ERROR = 'negativeETH'
-const INVALID_RECIPIENT_ADDRESS_ERROR = 'invalidAddressRecipient'
-const INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR = 'invalidAddressRecipientNotEthNetwork'
-const REQUIRED_ERROR = 'required'
-const KNOWN_RECIPIENT_ADDRESS_ERROR = 'knownAddressRecipient'
-
-const ONE_GWEI_IN_WEI_HEX = ethUtil.addHexPrefix(conversionUtil('0x1', {
-  fromDenomination: 'GWEI',
-  toDenomination: 'WEI',
-  fromNumericBase: 'hex',
-  toNumericBase: 'hex',
-}))
-
-const SIMPLE_GAS_COST = '0x5208' // Hex for 21000, cost of a simple send.
-const BASE_TOKEN_GAS_COST = '0x186a0' // Hex for 100000, a base estimate for token transfers.
-
-module.exports = {
-  INSUFFICIENT_FUNDS_ERROR,
-  INSUFFICIENT_TOKENS_ERROR,
-  INVALID_RECIPIENT_ADDRESS_ERROR,
-  KNOWN_RECIPIENT_ADDRESS_ERROR,
-  INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR,
-  MIN_GAS_LIMIT_DEC,
-  MIN_GAS_LIMIT_HEX,
-  MIN_GAS_PRICE_DEC,
-  MIN_GAS_PRICE_GWEI,
-  MIN_GAS_PRICE_HEX,
-  MIN_GAS_TOTAL,
-  NEGATIVE_ETH_ERROR,
-  ONE_GWEI_IN_WEI_HEX,
-  REQUIRED_ERROR,
-  SIMPLE_GAS_COST,
-  TOKEN_TRANSFER_FUNCTION_SIGNATURE,
-  BASE_TOKEN_GAS_COST,
-}
diff --git a/ui/app/components/app/send/send.container.js b/ui/app/components/app/send/send.container.js
deleted file mode 100644
index 303639c76..000000000
--- a/ui/app/components/app/send/send.container.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import { connect } from 'react-redux'
-import SendEther from './send.component'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'recompose'
-const {
-  getSelectedAddress,
-} = require('../../../selectors/selectors')
-
-import {
-  getAmountConversionRate,
-  getBlockGasLimit,
-  getConversionRate,
-  getCurrentNetwork,
-  getGasLimit,
-  getGasPrice,
-  getGasTotal,
-  getPrimaryCurrency,
-  getRecentBlocks,
-  getSelectedToken,
-  getSelectedTokenContract,
-  getSelectedTokenToFiatRate,
-  getSendAmount,
-  getSendEditingTransactionId,
-  getSendHexDataFeatureFlagState,
-  getSendFromObject,
-  getSendTo,
-  getTokenBalance,
-  getQrCodeData,
-} from './send.selectors'
-import {
-  updateSendTo,
-  updateSendTokenBalance,
-  updateGasData,
-  setGasTotal,
-  showQrScanner,
-  qrCodeDetected,
-} from '../../../store/actions'
-import {
-  resetSendState,
-  updateSendErrors,
-} from '../../../ducks/send/send.duck'
-import {
-  fetchBasicGasEstimates,
-} from '../../../ducks/gas/gas.duck'
-import {
-  calcGasTotal,
-} from './send.utils.js'
-
-import {
-  SEND_ROUTE,
-} from '../../../helpers/constants/routes'
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(SendEther)
-
-function mapStateToProps (state) {
-  return {
-    amount: getSendAmount(state),
-    amountConversionRate: getAmountConversionRate(state),
-    blockGasLimit: getBlockGasLimit(state),
-    conversionRate: getConversionRate(state),
-    editingTransactionId: getSendEditingTransactionId(state),
-    from: getSendFromObject(state),
-    gasLimit: getGasLimit(state),
-    gasPrice: getGasPrice(state),
-    gasTotal: getGasTotal(state),
-    network: getCurrentNetwork(state),
-    primaryCurrency: getPrimaryCurrency(state),
-    recentBlocks: getRecentBlocks(state),
-    selectedAddress: getSelectedAddress(state),
-    selectedToken: getSelectedToken(state),
-    showHexData: getSendHexDataFeatureFlagState(state),
-    to: getSendTo(state),
-    tokenBalance: getTokenBalance(state),
-    tokenContract: getSelectedTokenContract(state),
-    tokenToFiatRate: getSelectedTokenToFiatRate(state),
-    qrCodeData: getQrCodeData(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    updateAndSetGasLimit: ({
-      blockGasLimit,
-      editingTransactionId,
-      gasLimit,
-      gasPrice,
-      recentBlocks,
-      selectedAddress,
-      selectedToken,
-      to,
-      value,
-      data,
-    }) => {
-      !editingTransactionId
-        ? dispatch(updateGasData({ gasPrice, recentBlocks, selectedAddress, selectedToken, blockGasLimit, to, value, data }))
-        : dispatch(setGasTotal(calcGasTotal(gasLimit, gasPrice)))
-    },
-    updateSendTokenBalance: ({ selectedToken, tokenContract, address }) => {
-      dispatch(updateSendTokenBalance({
-        selectedToken,
-        tokenContract,
-        address,
-      }))
-    },
-    updateSendErrors: newError => dispatch(updateSendErrors(newError)),
-    resetSendState: () => dispatch(resetSendState()),
-    scanQrCode: () => dispatch(showQrScanner(SEND_ROUTE)),
-    qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
-    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
-    fetchBasicGasEstimates: () => dispatch(fetchBasicGasEstimates()),
-  }
-}
diff --git a/ui/app/components/app/send/send.scss b/ui/app/components/app/send/send.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/app/components/app/send/send.selectors.js b/ui/app/components/app/send/send.selectors.js
deleted file mode 100644
index 6056dea21..000000000
--- a/ui/app/components/app/send/send.selectors.js
+++ /dev/null
@@ -1,283 +0,0 @@
-const { valuesFor } = require('../../../helpers/utils/util')
-const abi = require('human-standard-token-abi')
-const {
-  multiplyCurrencies,
-} = require('../../../helpers/utils/conversion-util')
-const {
-  getMetaMaskAccounts,
-  getSelectedAddress,
-} = require('../../../selectors/selectors')
-const {
-  estimateGasPriceFromRecentBlocks,
-  calcGasTotal,
-} = require('./send.utils')
-import {
-  getFastPriceEstimateInHexWEI,
-} from '../../../selectors/custom-gas'
-
-const selectors = {
-  accountsWithSendEtherInfoSelector,
-  getAddressBook,
-  getAmountConversionRate,
-  getBlockGasLimit,
-  getConversionRate,
-  getCurrentAccountWithSendEtherInfo,
-  getCurrentCurrency,
-  getCurrentNetwork,
-  getCurrentViewContext,
-  getForceGasMin,
-  getNativeCurrency,
-  getGasLimit,
-  getGasPrice,
-  getGasPriceFromRecentBlocks,
-  getGasTotal,
-  getPrimaryCurrency,
-  getRecentBlocks,
-  getSelectedAccount,
-  getSelectedIdentity,
-  getSelectedToken,
-  getSelectedTokenContract,
-  getSelectedTokenExchangeRate,
-  getSelectedTokenToFiatRate,
-  getSendAmount,
-  getSendHexData,
-  getSendHexDataFeatureFlagState,
-  getSendEditingTransactionId,
-  getSendErrors,
-  getSendFrom,
-  getSendFromBalance,
-  getSendFromObject,
-  getSendMaxModeState,
-  getSendTo,
-  getSendToAccounts,
-  getSendWarnings,
-  getTokenBalance,
-  getTokenExchangeRate,
-  getUnapprovedTxs,
-  transactionsSelector,
-  getQrCodeData,
-}
-
-module.exports = selectors
-
-function accountsWithSendEtherInfoSelector (state) {
-  const accounts = getMetaMaskAccounts(state)
-  const { identities } = state.metamask
-
-  const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => {
-    return Object.assign({}, account, identities[key])
-  })
-
-  return accountsWithSendEtherInfo
-}
-
-function getAddressBook (state) {
-  return state.metamask.addressBook
-}
-
-function getAmountConversionRate (state) {
-  return getSelectedToken(state)
-    ? getSelectedTokenToFiatRate(state)
-    : getConversionRate(state)
-}
-
-function getBlockGasLimit (state) {
-  return state.metamask.currentBlockGasLimit
-}
-
-function getConversionRate (state) {
-  return state.metamask.conversionRate
-}
-
-function getCurrentAccountWithSendEtherInfo (state) {
-  const currentAddress = getSelectedAddress(state)
-  const accounts = accountsWithSendEtherInfoSelector(state)
-
-  return accounts.find(({ address }) => address === currentAddress)
-}
-
-function getCurrentCurrency (state) {
-  return state.metamask.currentCurrency
-}
-
-function getNativeCurrency (state) {
-  return state.metamask.nativeCurrency
-}
-
-function getCurrentNetwork (state) {
-  return state.metamask.network
-}
-
-function getCurrentViewContext (state) {
-  const { currentView = {} } = state.appState
-  return currentView.context
-}
-
-function getForceGasMin (state) {
-  return state.metamask.send.forceGasMin
-}
-
-function getGasLimit (state) {
-  return state.metamask.send.gasLimit || '0'
-}
-
-function getGasPrice (state) {
-  return state.metamask.send.gasPrice || getFastPriceEstimateInHexWEI(state)
-}
-
-function getGasPriceFromRecentBlocks (state) {
-  return estimateGasPriceFromRecentBlocks(state.metamask.recentBlocks)
-}
-
-function getGasTotal (state) {
-  return calcGasTotal(getGasLimit(state), getGasPrice(state))
-}
-
-function getPrimaryCurrency (state) {
-  const selectedToken = getSelectedToken(state)
-  return selectedToken && selectedToken.symbol
-}
-
-function getRecentBlocks (state) {
-  return state.metamask.recentBlocks
-}
-
-function getSelectedAccount (state) {
-  const accounts = getMetaMaskAccounts(state)
-  const selectedAddress = getSelectedAddress(state)
-
-  return accounts[selectedAddress]
-}
-
-function getSelectedIdentity (state) {
-  const selectedAddress = getSelectedAddress(state)
-  const identities = state.metamask.identities
-
-  return identities[selectedAddress]
-}
-
-function getSelectedToken (state) {
-  const tokens = state.metamask.tokens || []
-  const selectedTokenAddress = state.metamask.selectedTokenAddress
-  const selectedToken = tokens.filter(({ address }) => address === selectedTokenAddress)[0]
-  const sendToken = state.metamask.send.token
-
-  return selectedToken || sendToken || null
-}
-
-function getSelectedTokenContract (state) {
-  const selectedToken = getSelectedToken(state)
-
-  return selectedToken
-    ? global.eth.contract(abi).at(selectedToken.address)
-    : null
-}
-
-function getSelectedTokenExchangeRate (state) {
-  const tokenExchangeRates = state.metamask.tokenExchangeRates
-  const selectedToken = getSelectedToken(state) || {}
-  const { symbol = '' } = selectedToken
-  const pair = `${symbol.toLowerCase()}_eth`
-  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates && tokenExchangeRates[pair] || {}
-
-  return tokenExchangeRate
-}
-
-function getSelectedTokenToFiatRate (state) {
-  const selectedTokenExchangeRate = getSelectedTokenExchangeRate(state)
-  const conversionRate = getConversionRate(state)
-
-  const tokenToFiatRate = multiplyCurrencies(
-    conversionRate,
-    selectedTokenExchangeRate,
-    { toNumericBase: 'dec' }
-  )
-
-  return tokenToFiatRate
-}
-
-function getSendAmount (state) {
-  return state.metamask.send.amount
-}
-
-function getSendHexData (state) {
-  return state.metamask.send.data
-}
-
-function getSendHexDataFeatureFlagState (state) {
-  return state.metamask.featureFlags.sendHexData
-}
-
-function getSendEditingTransactionId (state) {
-  return state.metamask.send.editingTransactionId
-}
-
-function getSendErrors (state) {
-  return state.send.errors
-}
-
-function getSendFrom (state) {
-  return state.metamask.send.from
-}
-
-function getSendFromBalance (state) {
-  const from = getSendFrom(state) || getSelectedAccount(state)
-  return from.balance
-}
-
-function getSendFromObject (state) {
-  return getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state)
-}
-
-function getSendMaxModeState (state) {
-  return state.metamask.send.maxModeOn
-}
-
-function getSendTo (state) {
-  return state.metamask.send.to
-}
-
-function getSendToAccounts (state) {
-  const fromAccounts = accountsWithSendEtherInfoSelector(state)
-  const addressBookAccounts = getAddressBook(state)
-  return [...fromAccounts, ...addressBookAccounts]
-}
-
-function getSendWarnings (state) {
-  return state.send.warnings
-}
-
-function getTokenBalance (state) {
-  return state.metamask.send.tokenBalance
-}
-
-function getTokenExchangeRate (state, tokenSymbol) {
-  const pair = `${tokenSymbol.toLowerCase()}_eth`
-  const tokenExchangeRates = state.metamask.tokenExchangeRates
-  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
-
-  return tokenExchangeRate
-}
-
-function getUnapprovedTxs (state) {
-  return state.metamask.unapprovedTxs
-}
-
-function transactionsSelector (state) {
-  const { network, selectedTokenAddress } = state.metamask
-  const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs)
-  const shapeShiftTxList = (network === '1') ? state.metamask.shapeShiftTxList : undefined
-  const transactions = state.metamask.selectedAddressTxList || []
-  const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList)
-
-  return selectedTokenAddress
-    ? txsToRender
-      .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress)
-      .sort((a, b) => b.time - a.time)
-    : txsToRender
-      .sort((a, b) => b.time - a.time)
-}
-
-function getQrCodeData (state) {
-  return state.appState.qrCodeData
-}
diff --git a/ui/app/components/app/send/send.utils.js b/ui/app/components/app/send/send.utils.js
deleted file mode 100644
index 7609d46ea..000000000
--- a/ui/app/components/app/send/send.utils.js
+++ /dev/null
@@ -1,332 +0,0 @@
-const {
-  addCurrencies,
-  conversionUtil,
-  conversionGTE,
-  multiplyCurrencies,
-  conversionGreaterThan,
-  conversionLessThan,
-} = require('../../../helpers/utils/conversion-util')
-const {
-  calcTokenAmount,
-} = require('../../../helpers/utils/token-util')
-const {
-  BASE_TOKEN_GAS_COST,
-  INSUFFICIENT_FUNDS_ERROR,
-  INSUFFICIENT_TOKENS_ERROR,
-  NEGATIVE_ETH_ERROR,
-  ONE_GWEI_IN_WEI_HEX,
-  SIMPLE_GAS_COST,
-  TOKEN_TRANSFER_FUNCTION_SIGNATURE,
-} = require('./send.constants')
-const abi = require('ethereumjs-abi')
-const ethUtil = require('ethereumjs-util')
-
-module.exports = {
-  addGasBuffer,
-  calcGasTotal,
-  calcTokenBalance,
-  doesAmountErrorRequireUpdate,
-  estimateGas,
-  estimateGasPriceFromRecentBlocks,
-  generateTokenTransferData,
-  getAmountErrorObject,
-  getGasFeeErrorObject,
-  getToAddressForGasUpdate,
-  isBalanceSufficient,
-  isTokenBalanceSufficient,
-  removeLeadingZeroes,
-}
-
-function calcGasTotal (gasLimit = '0', gasPrice = '0') {
-  return multiplyCurrencies(gasLimit, gasPrice, {
-    toNumericBase: 'hex',
-    multiplicandBase: 16,
-    multiplierBase: 16,
-  })
-}
-
-function isBalanceSufficient ({
-  amount = '0x0',
-  amountConversionRate = 1,
-  balance = '0x0',
-  conversionRate = 1,
-  gasTotal = '0x0',
-  primaryCurrency,
-}) {
-  const totalAmount = addCurrencies(amount, gasTotal, {
-    aBase: 16,
-    bBase: 16,
-    toNumericBase: 'hex',
-  })
-
-  const balanceIsSufficient = conversionGTE(
-    {
-      value: balance,
-      fromNumericBase: 'hex',
-      fromCurrency: primaryCurrency,
-      conversionRate,
-    },
-    {
-      value: totalAmount,
-      fromNumericBase: 'hex',
-      conversionRate: Number(amountConversionRate) || conversionRate,
-      fromCurrency: primaryCurrency,
-    },
-  )
-
-  return balanceIsSufficient
-}
-
-function isTokenBalanceSufficient ({
-  amount = '0x0',
-  tokenBalance,
-  decimals,
-}) {
-  const amountInDec = conversionUtil(amount, {
-    fromNumericBase: 'hex',
-  })
-
-  const tokenBalanceIsSufficient = conversionGTE(
-    {
-      value: tokenBalance,
-      fromNumericBase: 'hex',
-    },
-    {
-      value: calcTokenAmount(amountInDec, decimals),
-    },
-  )
-
-  return tokenBalanceIsSufficient
-}
-
-function getAmountErrorObject ({
-  amount,
-  amountConversionRate,
-  balance,
-  conversionRate,
-  gasTotal,
-  primaryCurrency,
-  selectedToken,
-  tokenBalance,
-}) {
-  let insufficientFunds = false
-  if (gasTotal && conversionRate && !selectedToken) {
-    insufficientFunds = !isBalanceSufficient({
-      amount,
-      amountConversionRate,
-      balance,
-      conversionRate,
-      gasTotal,
-      primaryCurrency,
-    })
-  }
-
-  let inSufficientTokens = false
-  if (selectedToken && tokenBalance !== null) {
-    const { decimals } = selectedToken
-    inSufficientTokens = !isTokenBalanceSufficient({
-      tokenBalance,
-      amount,
-      decimals,
-    })
-  }
-
-  const amountLessThanZero = conversionGreaterThan(
-    { value: 0, fromNumericBase: 'dec' },
-    { value: amount, fromNumericBase: 'hex' },
-  )
-
-  let amountError = null
-
-  if (insufficientFunds) {
-    amountError = INSUFFICIENT_FUNDS_ERROR
-  } else if (inSufficientTokens) {
-    amountError = INSUFFICIENT_TOKENS_ERROR
-  } else if (amountLessThanZero) {
-    amountError = NEGATIVE_ETH_ERROR
-  }
-
-  return { amount: amountError }
-}
-
-function getGasFeeErrorObject ({
-  amountConversionRate,
-  balance,
-  conversionRate,
-  gasTotal,
-  primaryCurrency,
-}) {
-  let gasFeeError = null
-
-  if (gasTotal && conversionRate) {
-    const insufficientFunds = !isBalanceSufficient({
-      amount: '0x0',
-      amountConversionRate,
-      balance,
-      conversionRate,
-      gasTotal,
-      primaryCurrency,
-    })
-
-    if (insufficientFunds) {
-      gasFeeError = INSUFFICIENT_FUNDS_ERROR
-    }
-  }
-
-  return { gasFee: gasFeeError }
-}
-
-function calcTokenBalance ({ selectedToken, usersToken }) {
-  const { decimals } = selectedToken || {}
-  return calcTokenAmount(usersToken.balance.toString(), decimals).toString(16)
-}
-
-function doesAmountErrorRequireUpdate ({
-  balance,
-  gasTotal,
-  prevBalance,
-  prevGasTotal,
-  prevTokenBalance,
-  selectedToken,
-  tokenBalance,
-}) {
-  const balanceHasChanged = balance !== prevBalance
-  const gasTotalHasChange = gasTotal !== prevGasTotal
-  const tokenBalanceHasChanged = selectedToken && tokenBalance !== prevTokenBalance
-  const amountErrorRequiresUpdate = balanceHasChanged || gasTotalHasChange || tokenBalanceHasChanged
-
-  return amountErrorRequiresUpdate
-}
-
-async function estimateGas ({
-  selectedAddress,
-  selectedToken,
-  blockGasLimit,
-  to,
-  value,
-  data,
-  gasPrice,
-  estimateGasMethod,
-}) {
-  const paramsForGasEstimate = { from: selectedAddress, value, gasPrice }
-
-  // if recipient has no code, gas is 21k max:
-  if (!selectedToken && !data) {
-    const code = Boolean(to) && await global.eth.getCode(to)
-    // Geth will return '0x', and ganache-core v2.2.1 will return '0x0'
-    const codeIsEmpty = !code || code === '0x' || code === '0x0'
-    if (codeIsEmpty) {
-      return SIMPLE_GAS_COST
-    }
-  } else if (selectedToken && !to) {
-    return BASE_TOKEN_GAS_COST
-  }
-
-  if (selectedToken) {
-    paramsForGasEstimate.value = '0x0'
-    paramsForGasEstimate.data = generateTokenTransferData({ toAddress: to, amount: value, selectedToken })
-    paramsForGasEstimate.to = selectedToken.address
-  } else {
-    if (data) {
-      paramsForGasEstimate.data = data
-    }
-
-    if (to) {
-      paramsForGasEstimate.to = to
-    }
-
-    if (!value || value === '0') {
-      paramsForGasEstimate.value = '0xff'
-    }
-  }
-
-  // if not, fall back to block gasLimit
-  paramsForGasEstimate.gas = ethUtil.addHexPrefix(multiplyCurrencies(blockGasLimit || '0x5208', 0.95, {
-    multiplicandBase: 16,
-    multiplierBase: 10,
-    roundDown: '0',
-    toNumericBase: 'hex',
-  }))
-  // run tx
-  return new Promise((resolve, reject) => {
-    return estimateGasMethod(paramsForGasEstimate, (err, estimatedGas) => {
-      if (err) {
-        const simulationFailed = (
-          err.message.includes('Transaction execution error.') ||
-          err.message.includes('gas required exceeds allowance or always failing transaction')
-        )
-        if (simulationFailed) {
-          const estimateWithBuffer = addGasBuffer(paramsForGasEstimate.gas, blockGasLimit, 1.5)
-          return resolve(ethUtil.addHexPrefix(estimateWithBuffer))
-        } else {
-          return reject(err)
-        }
-      }
-      const estimateWithBuffer = addGasBuffer(estimatedGas.toString(16), blockGasLimit, 1.5)
-      return resolve(ethUtil.addHexPrefix(estimateWithBuffer))
-    })
-  })
-}
-
-function addGasBuffer (initialGasLimitHex, blockGasLimitHex, bufferMultiplier = 1.5) {
-  const upperGasLimit = multiplyCurrencies(blockGasLimitHex, 0.9, {
-    toNumericBase: 'hex',
-    multiplicandBase: 16,
-    multiplierBase: 10,
-    numberOfDecimals: '0',
-  })
-  const bufferedGasLimit = multiplyCurrencies(initialGasLimitHex, bufferMultiplier, {
-    toNumericBase: 'hex',
-    multiplicandBase: 16,
-    multiplierBase: 10,
-    numberOfDecimals: '0',
-  })
-
-  // if initialGasLimit is above blockGasLimit, dont modify it
-  if (conversionGreaterThan(
-    { value: initialGasLimitHex, fromNumericBase: 'hex' },
-    { value: upperGasLimit, fromNumericBase: 'hex' },
-  )) return initialGasLimitHex
-  // if bufferedGasLimit is below blockGasLimit, use bufferedGasLimit
-  if (conversionLessThan(
-    { value: bufferedGasLimit, fromNumericBase: 'hex' },
-    { value: upperGasLimit, fromNumericBase: 'hex' },
-  )) return bufferedGasLimit
-  // otherwise use blockGasLimit
-  return upperGasLimit
-}
-
-function generateTokenTransferData ({ toAddress = '0x0', amount = '0x0', selectedToken }) {
-  if (!selectedToken) return
-  return TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call(
-    abi.rawEncode(['address', 'uint256'], [toAddress, ethUtil.addHexPrefix(amount)]),
-    x => ('00' + x.toString(16)).slice(-2)
-  ).join('')
-}
-
-function estimateGasPriceFromRecentBlocks (recentBlocks) {
-  // Return 1 gwei if no blocks have been observed:
-  if (!recentBlocks || recentBlocks.length === 0) {
-    return ONE_GWEI_IN_WEI_HEX
-  }
-
-  const lowestPrices = recentBlocks.map((block) => {
-    if (!block.gasPrices || block.gasPrices.length < 1) {
-      return ONE_GWEI_IN_WEI_HEX
-    }
-    return block.gasPrices.reduce((currentLowest, next) => {
-      return parseInt(next, 16) < parseInt(currentLowest, 16) ? next : currentLowest
-    })
-  })
-  .sort((a, b) => parseInt(a, 16) > parseInt(b, 16) ? 1 : -1)
-
-  return lowestPrices[Math.floor(lowestPrices.length / 2)]
-}
-
-function getToAddressForGasUpdate (...addresses) {
-  return [...addresses, ''].find(str => str !== undefined && str !== null).toLowerCase()
-}
-
-function removeLeadingZeroes (str) {
-  return str.replace(/^0*(?=\d)/, '')
-}
diff --git a/ui/app/components/app/send/tests/send-component.test.js b/ui/app/components/app/send/tests/send-component.test.js
deleted file mode 100644
index 738c14839..000000000
--- a/ui/app/components/app/send/tests/send-component.test.js
+++ /dev/null
@@ -1,354 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import { shallow } from 'enzyme'
-import sinon from 'sinon'
-import timeout from '../../../../../lib/test-timeout'
-
-import SendHeader from '../send-header/send-header.container'
-import SendContent from '../send-content/send-content.component'
-import SendFooter from '../send-footer/send-footer.container'
-
-const mockBasicGasEstimates = {
-  blockTime: 'mockBlockTime',
-}
-
-const propsMethodSpies = {
-  updateAndSetGasLimit: sinon.spy(),
-  updateSendErrors: sinon.spy(),
-  updateSendTokenBalance: sinon.spy(),
-  resetSendState: sinon.spy(),
-  fetchBasicGasEstimates: sinon.stub().returns(Promise.resolve(mockBasicGasEstimates)),
-  fetchGasEstimates: sinon.spy(),
-}
-const utilsMethodStubs = {
-  getAmountErrorObject: sinon.stub().returns({ amount: 'mockAmountError' }),
-  getGasFeeErrorObject: sinon.stub().returns({ gasFee: 'mockGasFeeError' }),
-  doesAmountErrorRequireUpdate: sinon.stub().callsFake(obj => obj.balance !== obj.prevBalance),
-}
-
-const SendTransactionScreen = proxyquire('../send.component.js', {
-  './send.utils': utilsMethodStubs,
-}).default
-
-sinon.spy(SendTransactionScreen.prototype, 'componentDidMount')
-sinon.spy(SendTransactionScreen.prototype, 'updateGas')
-
-describe('Send Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<SendTransactionScreen
-      amount={'mockAmount'}
-      amountConversionRate={'mockAmountConversionRate'}
-      blockGasLimit={'mockBlockGasLimit'}
-      conversionRate={10}
-      editingTransactionId={'mockEditingTransactionId'}
-      fetchBasicGasEstimates={propsMethodSpies.fetchBasicGasEstimates}
-      fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
-      from={ { address: 'mockAddress', balance: 'mockBalance' } }
-      gasLimit={'mockGasLimit'}
-      gasPrice={'mockGasPrice'}
-      gasTotal={'mockGasTotal'}
-      history={{ mockProp: 'history-abc'}}
-      network={'3'}
-      primaryCurrency={'mockPrimaryCurrency'}
-      recentBlocks={['mockBlock']}
-      selectedAddress={'mockSelectedAddress'}
-      selectedToken={'mockSelectedToken'}
-      showHexData={true}
-      tokenBalance={'mockTokenBalance'}
-      tokenContract={'mockTokenContract'}
-      updateAndSetGasLimit={propsMethodSpies.updateAndSetGasLimit}
-      updateSendErrors={propsMethodSpies.updateSendErrors}
-      updateSendTokenBalance={propsMethodSpies.updateSendTokenBalance}
-      resetSendState={propsMethodSpies.resetSendState}
-    />)
-  })
-
-  afterEach(() => {
-    SendTransactionScreen.prototype.componentDidMount.resetHistory()
-    SendTransactionScreen.prototype.updateGas.resetHistory()
-    utilsMethodStubs.doesAmountErrorRequireUpdate.resetHistory()
-    utilsMethodStubs.getAmountErrorObject.resetHistory()
-    utilsMethodStubs.getGasFeeErrorObject.resetHistory()
-    propsMethodSpies.fetchBasicGasEstimates.resetHistory()
-    propsMethodSpies.updateAndSetGasLimit.resetHistory()
-    propsMethodSpies.updateSendErrors.resetHistory()
-    propsMethodSpies.updateSendTokenBalance.resetHistory()
-  })
-
-  it('should call componentDidMount', () => {
-    assert(SendTransactionScreen.prototype.componentDidMount.calledOnce)
-  })
-
-  describe('componentDidMount', () => {
-    it('should call props.fetchBasicGasAndTimeEstimates', () => {
-      propsMethodSpies.fetchBasicGasEstimates.resetHistory()
-      assert.equal(propsMethodSpies.fetchBasicGasEstimates.callCount, 0)
-      wrapper.instance().componentDidMount()
-      assert.equal(propsMethodSpies.fetchBasicGasEstimates.callCount, 1)
-    })
-
-    it('should call this.updateGas', async () => {
-      SendTransactionScreen.prototype.updateGas.resetHistory()
-      propsMethodSpies.updateSendErrors.resetHistory()
-      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0)
-      wrapper.instance().componentDidMount()
-      await timeout(250)
-      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 1)
-    })
-  })
-
-  describe('componentWillUnmount', () => {
-    it('should call this.props.resetSendState', () => {
-      propsMethodSpies.resetSendState.resetHistory()
-      assert.equal(propsMethodSpies.resetSendState.callCount, 0)
-      wrapper.instance().componentWillUnmount()
-      assert.equal(propsMethodSpies.resetSendState.callCount, 1)
-    })
-  })
-
-  describe('componentDidUpdate', () => {
-    it('should call doesAmountErrorRequireUpdate with the expected params', () => {
-      utilsMethodStubs.getAmountErrorObject.resetHistory()
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: '',
-        },
-      })
-      assert(utilsMethodStubs.doesAmountErrorRequireUpdate.calledOnce)
-      assert.deepEqual(
-        utilsMethodStubs.doesAmountErrorRequireUpdate.getCall(0).args[0],
-        {
-          balance: 'mockBalance',
-          gasTotal: 'mockGasTotal',
-          prevBalance: '',
-          prevGasTotal: undefined,
-          prevTokenBalance: undefined,
-          selectedToken: 'mockSelectedToken',
-          tokenBalance: 'mockTokenBalance',
-        }
-      )
-    })
-
-    it('should not call getAmountErrorObject if doesAmountErrorRequireUpdate returns false', () => {
-      utilsMethodStubs.getAmountErrorObject.resetHistory()
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'mockBalance',
-        },
-      })
-      assert.equal(utilsMethodStubs.getAmountErrorObject.callCount, 0)
-    })
-
-    it('should call getAmountErrorObject if doesAmountErrorRequireUpdate returns true', () => {
-      utilsMethodStubs.getAmountErrorObject.resetHistory()
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-      })
-      assert.equal(utilsMethodStubs.getAmountErrorObject.callCount, 1)
-      assert.deepEqual(
-        utilsMethodStubs.getAmountErrorObject.getCall(0).args[0],
-        {
-          amount: 'mockAmount',
-          amountConversionRate: 'mockAmountConversionRate',
-          balance: 'mockBalance',
-          conversionRate: 10,
-          gasTotal: 'mockGasTotal',
-          primaryCurrency: 'mockPrimaryCurrency',
-          selectedToken: 'mockSelectedToken',
-          tokenBalance: 'mockTokenBalance',
-        }
-      )
-    })
-
-    it('should call getGasFeeErrorObject if doesAmountErrorRequireUpdate returns true and selectedToken is truthy', () => {
-      utilsMethodStubs.getGasFeeErrorObject.resetHistory()
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-      })
-      assert.equal(utilsMethodStubs.getGasFeeErrorObject.callCount, 1)
-      assert.deepEqual(
-        utilsMethodStubs.getGasFeeErrorObject.getCall(0).args[0],
-        {
-          amountConversionRate: 'mockAmountConversionRate',
-          balance: 'mockBalance',
-          conversionRate: 10,
-          gasTotal: 'mockGasTotal',
-          primaryCurrency: 'mockPrimaryCurrency',
-          selectedToken: 'mockSelectedToken',
-        }
-      )
-    })
-
-    it('should not call getGasFeeErrorObject if doesAmountErrorRequireUpdate returns false', () => {
-      utilsMethodStubs.getGasFeeErrorObject.resetHistory()
-      wrapper.instance().componentDidUpdate({
-        from: { address: 'mockAddress', balance: 'mockBalance' },
-      })
-      assert.equal(utilsMethodStubs.getGasFeeErrorObject.callCount, 0)
-    })
-
-    it('should not call getGasFeeErrorObject if doesAmountErrorRequireUpdate returns true but selectedToken is falsy', () => {
-      utilsMethodStubs.getGasFeeErrorObject.resetHistory()
-      wrapper.setProps({ selectedToken: null })
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-      })
-      assert.equal(utilsMethodStubs.getGasFeeErrorObject.callCount, 0)
-    })
-
-    it('should call updateSendErrors with the expected params if selectedToken is falsy', () => {
-      propsMethodSpies.updateSendErrors.resetHistory()
-      wrapper.setProps({ selectedToken: null })
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-      })
-      assert.equal(propsMethodSpies.updateSendErrors.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateSendErrors.getCall(0).args[0],
-        { amount: 'mockAmountError', gasFee: null }
-      )
-    })
-
-    it('should call updateSendErrors with the expected params if selectedToken is truthy', () => {
-      propsMethodSpies.updateSendErrors.resetHistory()
-      wrapper.setProps({ selectedToken: 'someToken' })
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-      })
-      assert.equal(propsMethodSpies.updateSendErrors.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateSendErrors.getCall(0).args[0],
-        { amount: 'mockAmountError', gasFee: 'mockGasFeeError' }
-      )
-    })
-
-    it('should not call updateSendTokenBalance or this.updateGas if network === prevNetwork', () => {
-      SendTransactionScreen.prototype.updateGas.resetHistory()
-      propsMethodSpies.updateSendTokenBalance.resetHistory()
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-        network: '3',
-      })
-      assert.equal(propsMethodSpies.updateSendTokenBalance.callCount, 0)
-      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0)
-    })
-
-    it('should not call updateSendTokenBalance or this.updateGas if network === loading', () => {
-      wrapper.setProps({ network: 'loading' })
-      SendTransactionScreen.prototype.updateGas.resetHistory()
-      propsMethodSpies.updateSendTokenBalance.resetHistory()
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-        network: '3',
-      })
-      assert.equal(propsMethodSpies.updateSendTokenBalance.callCount, 0)
-      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0)
-    })
-
-    it('should call updateSendTokenBalance and this.updateGas with the correct params', () => {
-      SendTransactionScreen.prototype.updateGas.resetHistory()
-      propsMethodSpies.updateSendTokenBalance.resetHistory()
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-        network: '2',
-      })
-      assert.equal(propsMethodSpies.updateSendTokenBalance.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateSendTokenBalance.getCall(0).args[0],
-        {
-          selectedToken: 'mockSelectedToken',
-          tokenContract: 'mockTokenContract',
-          address: 'mockAddress',
-        }
-      )
-      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 1)
-      assert.deepEqual(
-        SendTransactionScreen.prototype.updateGas.getCall(0).args,
-        []
-      )
-    })
-  })
-
-  describe('updateGas', () => {
-    it('should call updateAndSetGasLimit with the correct params if no to prop is passed', () => {
-      propsMethodSpies.updateAndSetGasLimit.resetHistory()
-      wrapper.instance().updateGas()
-      assert.equal(propsMethodSpies.updateAndSetGasLimit.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0],
-        {
-          blockGasLimit: 'mockBlockGasLimit',
-          editingTransactionId: 'mockEditingTransactionId',
-          gasLimit: 'mockGasLimit',
-          gasPrice: 'mockGasPrice',
-          recentBlocks: ['mockBlock'],
-          selectedAddress: 'mockSelectedAddress',
-          selectedToken: 'mockSelectedToken',
-          to: '',
-          value: 'mockAmount',
-          data: undefined,
-        }
-      )
-    })
-
-    it('should call updateAndSetGasLimit with the correct params if a to prop is passed', () => {
-      propsMethodSpies.updateAndSetGasLimit.resetHistory()
-      wrapper.setProps({ to: 'someAddress' })
-      wrapper.instance().updateGas()
-      assert.equal(
-        propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0].to,
-        'someaddress',
-      )
-    })
-
-    it('should call updateAndSetGasLimit with to set to lowercase if passed', () => {
-      propsMethodSpies.updateAndSetGasLimit.resetHistory()
-      wrapper.instance().updateGas({ to: '0xABC' })
-      assert.equal(propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0].to, '0xabc')
-    })
-  })
-
-  describe('render', () => {
-    it('should render a page-container class', () => {
-      assert.equal(wrapper.find('.page-container').length, 1)
-    })
-
-    it('should render SendHeader, SendContent and SendFooter', () => {
-      assert.equal(wrapper.find(SendHeader).length, 1)
-      assert.equal(wrapper.find(SendContent).length, 1)
-      assert.equal(wrapper.find(SendFooter).length, 1)
-    })
-
-    it('should pass the history prop to SendHeader and SendFooter', () => {
-      assert.deepEqual(
-        wrapper.find(SendFooter).props(),
-        {
-          history: { mockProp: 'history-abc' },
-        }
-      )
-    })
-
-    it('should pass showHexData to SendContent', () => {
-      assert.equal(wrapper.find(SendContent).props().showHexData, true)
-    })
-  })
-})
diff --git a/ui/app/components/app/send/tests/send-container.test.js b/ui/app/components/app/send/tests/send-container.test.js
deleted file mode 100644
index 9d7365ac9..000000000
--- a/ui/app/components/app/send/tests/send-container.test.js
+++ /dev/null
@@ -1,177 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-let mapStateToProps
-let mapDispatchToProps
-
-const actionSpies = {
-  updateSendTokenBalance: sinon.spy(),
-  updateGasData: sinon.spy(),
-  setGasTotal: sinon.spy(),
-}
-const duckActionSpies = {
-  updateSendErrors: sinon.spy(),
-  resetSendState: sinon.spy(),
-}
-
-proxyquire('../send.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      mapDispatchToProps = md
-      return () => ({})
-    },
-  },
-  'react-router-dom': { withRouter: () => {} },
-  'recompose': { compose: (arg1, arg2) => () => arg2() },
-  './send.selectors': {
-    getAmountConversionRate: (s) => `mockAmountConversionRate:${s}`,
-    getBlockGasLimit: (s) => `mockBlockGasLimit:${s}`,
-    getConversionRate: (s) => `mockConversionRate:${s}`,
-    getCurrentNetwork: (s) => `mockNetwork:${s}`,
-    getGasLimit: (s) => `mockGasLimit:${s}`,
-    getGasPrice: (s) => `mockGasPrice:${s}`,
-    getGasTotal: (s) => `mockGasTotal:${s}`,
-    getPrimaryCurrency: (s) => `mockPrimaryCurrency:${s}`,
-    getRecentBlocks: (s) => `mockRecentBlocks:${s}`,
-    getSelectedToken: (s) => `mockSelectedToken:${s}`,
-    getSelectedTokenContract: (s) => `mockTokenContract:${s}`,
-    getSelectedTokenToFiatRate: (s) => `mockTokenToFiatRate:${s}`,
-    getSendHexDataFeatureFlagState: (s) => `mockSendHexDataFeatureFlagState:${s}`,
-    getSendAmount: (s) => `mockAmount:${s}`,
-    getSendTo: (s) => `mockTo:${s}`,
-    getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`,
-    getSendFromObject: (s) => `mockFrom:${s}`,
-    getTokenBalance: (s) => `mockTokenBalance:${s}`,
-    getQrCodeData: (s) => `mockQrCodeData:${s}`,
-  },
-  '../../../selectors/selectors': {
-    getSelectedAddress: (s) => `mockSelectedAddress:${s}`,
-  },
-  '../../../store/actions': actionSpies,
-  '../../../ducks/send/send.duck': duckActionSpies,
-  './send.utils.js': {
-    calcGasTotal: (gasLimit, gasPrice) => gasLimit + gasPrice,
-  },
-
-})
-
-describe('send container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        amount: 'mockAmount:mockState',
-        amountConversionRate: 'mockAmountConversionRate:mockState',
-        blockGasLimit: 'mockBlockGasLimit:mockState',
-        conversionRate: 'mockConversionRate:mockState',
-        editingTransactionId: 'mockEditingTransactionId:mockState',
-        from: 'mockFrom:mockState',
-        gasLimit: 'mockGasLimit:mockState',
-        gasPrice: 'mockGasPrice:mockState',
-        gasTotal: 'mockGasTotal:mockState',
-        network: 'mockNetwork:mockState',
-        primaryCurrency: 'mockPrimaryCurrency:mockState',
-        recentBlocks: 'mockRecentBlocks:mockState',
-        selectedAddress: 'mockSelectedAddress:mockState',
-        selectedToken: 'mockSelectedToken:mockState',
-        showHexData: 'mockSendHexDataFeatureFlagState:mockState',
-        to: 'mockTo:mockState',
-        tokenBalance: 'mockTokenBalance:mockState',
-        tokenContract: 'mockTokenContract:mockState',
-        tokenToFiatRate: 'mockTokenToFiatRate:mockState',
-        qrCodeData: 'mockQrCodeData:mockState',
-      })
-    })
-
-  })
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy
-    let mapDispatchToPropsObject
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy()
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
-    })
-
-    describe('updateAndSetGasLimit()', () => {
-      const mockProps = {
-        blockGasLimit: 'mockBlockGasLimit',
-        editingTransactionId: '0x2',
-        gasLimit: '0x3',
-        gasPrice: '0x4',
-        recentBlocks: ['mockBlock'],
-        selectedAddress: '0x4',
-        selectedToken: { address: '0x1' },
-        to: 'mockTo',
-        value: 'mockValue',
-        data: undefined,
-      }
-
-      it('should dispatch a setGasTotal action when editingTransactionId is truthy', () => {
-        mapDispatchToPropsObject.updateAndSetGasLimit(mockProps)
-        assert(dispatchSpy.calledOnce)
-        assert.equal(
-          actionSpies.setGasTotal.getCall(0).args[0],
-          '0x30x4'
-        )
-      })
-
-      it('should dispatch an updateGasData action when editingTransactionId is falsy', () => {
-        const { gasPrice, selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data } = mockProps
-        mapDispatchToPropsObject.updateAndSetGasLimit(
-          Object.assign({}, mockProps, {editingTransactionId: false})
-        )
-        assert(dispatchSpy.calledOnce)
-        assert.deepEqual(
-          actionSpies.updateGasData.getCall(0).args[0],
-          { gasPrice, selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data }
-        )
-      })
-    })
-
-    describe('updateSendTokenBalance()', () => {
-      const mockProps = {
-        address: '0x10',
-        tokenContract: '0x00a',
-        selectedToken: {address: '0x1'},
-      }
-
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendTokenBalance(Object.assign({}, mockProps))
-        assert(dispatchSpy.calledOnce)
-        assert.deepEqual(
-          actionSpies.updateSendTokenBalance.getCall(0).args[0],
-          mockProps
-        )
-      })
-    })
-
-    describe('updateSendErrors()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendErrors('mockError')
-        assert(dispatchSpy.calledOnce)
-        assert.equal(
-          duckActionSpies.updateSendErrors.getCall(0).args[0],
-          'mockError'
-        )
-      })
-    })
-
-    describe('resetSendState()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.resetSendState()
-        assert(dispatchSpy.calledOnce)
-        assert.equal(
-          duckActionSpies.resetSendState.getCall(0).args.length,
-          0
-        )
-      })
-    })
-
-  })
-
-})
diff --git a/ui/app/components/app/send/tests/send-selectors-test-data.js b/ui/app/components/app/send/tests/send-selectors-test-data.js
deleted file mode 100644
index cff26a191..000000000
--- a/ui/app/components/app/send/tests/send-selectors-test-data.js
+++ /dev/null
@@ -1,231 +0,0 @@
-module.exports = {
-  'metamask': {
-    'isInitialized': true,
-    'isUnlocked': true,
-    'featureFlags': {'sendHexData': true},
-    'rpcTarget': 'https://rawtestrpc.metamask.io/',
-    'identities': {
-      '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': {
-        'address': '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825',
-        'name': 'Send Account 1',
-      },
-      '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb': {
-        'address': '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-        'name': 'Send Account 2',
-      },
-      '0x2f8d4a878cfa04a6e60d46362f5644deab66572d': {
-        'address': '0x2f8d4a878cfa04a6e60d46362f5644deab66572d',
-        'name': 'Send Account 3',
-      },
-      '0xd85a4b6a394794842887b8284293d69163007bbb': {
-        'address': '0xd85a4b6a394794842887b8284293d69163007bbb',
-        'name': 'Send Account 4',
-      },
-    },
-    'cachedBalances': {},
-    'currentBlockGasLimit': '0x4c1878',
-    'currentCurrency': 'USD',
-    'conversionRate': 1200.88200327,
-    'conversionDate': 1489013762,
-    'nativeCurrency': 'ETH',
-    'frequentRpcList': [],
-    'network': '3',
-    'accounts': {
-      '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': {
-        'code': '0x',
-        'balance': '0x47c9d71831c76efe',
-        'nonce': '0x1b',
-        'address': '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825',
-      },
-      '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb': {
-        'code': '0x',
-        'balance': '0x37452b1315889f80',
-        'nonce': '0xa',
-        'address': '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-      },
-      '0x2f8d4a878cfa04a6e60d46362f5644deab66572d': {
-        'code': '0x',
-        'balance': '0x30c9d71831c76efe',
-        'nonce': '0x1c',
-        'address': '0x2f8d4a878cfa04a6e60d46362f5644deab66572d',
-      },
-      '0xd85a4b6a394794842887b8284293d69163007bbb': {
-        'code': '0x',
-        'balance': '0x0',
-        'nonce': '0x0',
-        'address': '0xd85a4b6a394794842887b8284293d69163007bbb',
-      },
-    },
-    'addressBook': [
-      {
-        'address': '0x06195827297c7a80a443b6894d3bdb8824b43896',
-        'name': 'Address Book Account 1',
-      },
-    ],
-    'tokens': [
-      {
-        'address': '0x1a195821297c7a80a433b6894d3bdb8824b43896',
-        'decimals': 18,
-        'symbol': 'ABC',
-      },
-      {
-        'address': '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-        'decimals': 4,
-        'symbol': 'DEF',
-      },
-      {
-        'address': '0xa42084c8d1d9a2198631988579bb36b48433a72b',
-        'decimals': 18,
-        'symbol': 'GHI',
-      },
-    ],
-    'tokenExchangeRates': {
-      'def_eth': {
-        rate: 2.0,
-      },
-      'ghi_eth': {
-        rate: 31.01,
-      },
-    },
-    'transactions': {},
-    'selectedAddressTxList': [
-      {
-        'id': 'mockTokenTx1',
-        'txParams': {
-          'to': '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-        },
-        'time': 1700000000000,
-      },
-      {
-        'id': 'mockTokenTx2',
-        'txParams': {
-          'to': '0xafaketokenaddress',
-        },
-        'time': 1600000000000,
-      },
-      {
-        'id': 'mockTokenTx3',
-        'txParams': {
-          'to': '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-        },
-        'time': 1500000000000,
-      },
-      {
-        'id': 'mockEthTx1',
-        'txParams': {
-          'to': '0xd85a4b6a394794842887b8284293d69163007bbb',
-        },
-        'time': 1400000000000,
-      },
-    ],
-    'selectedTokenAddress': '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-    'unapprovedMsgs': {
-      '0xabc': { id: 'unapprovedMessage1', 'time': 1650000000000 },
-      '0xdef': { id: 'unapprovedMessage2', 'time': 1550000000000 },
-      '0xghi': { id: 'unapprovedMessage3', 'time': 1450000000000 },
-    },
-    'unapprovedMsgCount': 0,
-    'unapprovedPersonalMsgs': {},
-    'unapprovedPersonalMsgCount': 0,
-    'keyringTypes': [
-      'Simple Key Pair',
-      'HD Key Tree',
-    ],
-    'keyrings': [
-      {
-        'type': 'HD Key Tree',
-        'accounts': [
-          'fdea65c8e26263f6d9a1b5de9555d2931a33b825',
-          'c5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-          '2f8d4a878cfa04a6e60d46362f5644deab66572d',
-        ],
-      },
-      {
-        'type': 'Simple Key Pair',
-        'accounts': [
-          '0xd85a4b6a394794842887b8284293d69163007bbb',
-        ],
-      },
-    ],
-    'selectedAddress': '0xd85a4b6a394794842887b8284293d69163007bbb',
-    'provider': {
-      'type': 'testnet',
-    },
-    'shapeShiftTxList': [
-      { id: 'shapeShiftTx1', 'time': 1675000000000 },
-      { id: 'shapeShiftTx2', 'time': 1575000000000 },
-      { id: 'shapeShiftTx3', 'time': 1475000000000 },
-    ],
-    'lostAccounts': [],
-    'send': {
-      'gasLimit': '0xFFFF',
-      'gasPrice': '0xaa',
-      'gasTotal': '0xb451dc41b578',
-      'tokenBalance': 3434,
-      'from': {
-        'address': '0xabcdefg',
-        'balance': '0x5f4e3d2c1',
-      },
-      'to': '0x987fedabc',
-      'amount': '0x080',
-      'memo': '',
-      'errors': {
-        'someError': null,
-      },
-      'maxModeOn': false,
-      'editingTransactionId': 97531,
-      'forceGasMin': true,
-    },
-    'unapprovedTxs': {
-      '4768706228115573': {
-        'id': 4768706228115573,
-        'time': 1487363153561,
-        'status': 'unapproved',
-        'gasMultiplier': 1,
-        'metamaskNetworkId': '3',
-        'txParams': {
-          'from': '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-          'to': '0x18a3462427bcc9133bb46e88bcbe39cd7ef0e761',
-          'value': '0xde0b6b3a7640000',
-          'metamaskId': 4768706228115573,
-          'metamaskNetworkId': '3',
-          'gas': '0x5209',
-        },
-        'gasLimitSpecified': false,
-        'estimatedGas': '0x5209',
-        'txFee': '17e0186e60800',
-        'txValue': 'de0b6b3a7640000',
-        'maxCost': 'de234b52e4a0800',
-        'gasPrice': '4a817c800',
-      },
-    },
-    'currentLocale': 'en',
-    recentBlocks: ['mockBlock1', 'mockBlock2', 'mockBlock3'],
-  },
-  'appState': {
-    'menuOpen': false,
-    'currentView': {
-      'name': 'accountDetail',
-      'detailView': null,
-      'context': '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
-    },
-    'accountDetail': {
-      'subview': 'transactions',
-    },
-    'modal': {
-      'modalState': {},
-      'previousModalState': {},
-    },
-    'transForward': true,
-    'isLoading': false,
-    'warning': null,
-    'scrollToBottom': false,
-    'forgottenPassword': null,
-  },
-  'identities': {},
-  'send': {
-    'fromDropdownOpen': false,
-    'toDropdownOpen': false,
-    'errors': { 'someError': null },
-  },
-}
diff --git a/ui/app/components/app/send/tests/send-selectors.test.js b/ui/app/components/app/send/tests/send-selectors.test.js
deleted file mode 100644
index ccc126795..000000000
--- a/ui/app/components/app/send/tests/send-selectors.test.js
+++ /dev/null
@@ -1,696 +0,0 @@
-import assert from 'assert'
-import sinon from 'sinon'
-import selectors from '../send.selectors.js'
-const {
-  accountsWithSendEtherInfoSelector,
-  // autoAddToBetaUI,
-  getAddressBook,
-  getBlockGasLimit,
-  getAmountConversionRate,
-  getConversionRate,
-  getCurrentAccountWithSendEtherInfo,
-  getCurrentCurrency,
-  getCurrentNetwork,
-  getCurrentViewContext,
-  getNativeCurrency,
-  getForceGasMin,
-  getGasLimit,
-  getGasPrice,
-  getGasTotal,
-  getPrimaryCurrency,
-  getRecentBlocks,
-  getSelectedAccount,
-  getSelectedIdentity,
-  getSelectedToken,
-  getSelectedTokenContract,
-  getSelectedTokenExchangeRate,
-  getSelectedTokenToFiatRate,
-  getSendAmount,
-  getSendEditingTransactionId,
-  getSendErrors,
-  getSendFrom,
-  getSendFromBalance,
-  getSendFromObject,
-  getSendHexDataFeatureFlagState,
-  getSendMaxModeState,
-  getSendTo,
-  getSendToAccounts,
-  getTokenBalance,
-  getTokenExchangeRate,
-  getUnapprovedTxs,
-  transactionsSelector,
-} = selectors
-import mockState from './send-selectors-test-data'
-
-describe('send selectors', () => {
-  const tempGlobalEth = Object.assign({}, global.eth)
-  beforeEach(() => {
-    global.eth = {
-      contract: sinon.stub().returns({
-        at: address => 'mockAt:' + address,
-      }),
-    }
-  })
-
-  afterEach(() => {
-    global.eth = tempGlobalEth
-  })
-
-  describe('accountsWithSendEtherInfoSelector()', () => {
-    it('should return an array of account objects with name info from identities', () => {
-      assert.deepEqual(
-        accountsWithSendEtherInfoSelector(mockState),
-        [
-          {
-            code: '0x',
-            balance: '0x47c9d71831c76efe',
-            nonce: '0x1b',
-            address: '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825',
-            name: 'Send Account 1',
-          },
-          {
-            code: '0x',
-            balance: '0x37452b1315889f80',
-            nonce: '0xa',
-            address: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-            name: 'Send Account 2',
-          },
-          {
-            code: '0x',
-            balance: '0x30c9d71831c76efe',
-            nonce: '0x1c',
-            address: '0x2f8d4a878cfa04a6e60d46362f5644deab66572d',
-            name: 'Send Account 3',
-          },
-          {
-            code: '0x',
-            balance: '0x0',
-            nonce: '0x0',
-            address: '0xd85a4b6a394794842887b8284293d69163007bbb',
-            name: 'Send Account 4',
-          },
-        ]
-      )
-    })
-  })
-
-  // describe('autoAddToBetaUI()', () => {
-  //   it('should', () => {
-  //     assert.deepEqual(
-  //       autoAddToBetaUI(mockState),
-
-  //     )
-  //   })
-  // })
-
-  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(
-        getAmountConversionRate(mockState),
-        2401.76400654
-      )
-    })
-
-    it('should return the eth conversion rate if no token is selected', () => {
-      const editedMockState = {
-        metamask: Object.assign({}, mockState.metamask, { selectedTokenAddress: null }),
-      }
-      assert.equal(
-        getAmountConversionRate(editedMockState),
-        1200.88200327
-      )
-    })
-  })
-
-  describe('getBlockGasLimit', () => {
-    it('should return the current block gas limit', () => {
-      assert.deepEqual(
-        getBlockGasLimit(mockState),
-        '0x4c1878'
-      )
-    })
-  })
-
-  describe('getConversionRate()', () => {
-    it('should return the eth conversion rate', () => {
-      assert.deepEqual(
-        getConversionRate(mockState),
-        1200.88200327
-      )
-    })
-  })
-
-  describe('getCurrentAccountWithSendEtherInfo()', () => {
-    it('should return the currently selected account with identity info', () => {
-      assert.deepEqual(
-        getCurrentAccountWithSendEtherInfo(mockState),
-        {
-          code: '0x',
-          balance: '0x0',
-          nonce: '0x0',
-          address: '0xd85a4b6a394794842887b8284293d69163007bbb',
-          name: 'Send Account 4',
-        }
-      )
-    })
-  })
-
-  describe('getCurrentCurrency()', () => {
-    it('should return the currently selected currency', () => {
-      assert.equal(
-        getCurrentCurrency(mockState),
-        'USD'
-      )
-    })
-  })
-
-  describe('getNativeCurrency()', () => {
-    it('should return the ticker symbol of the selected network', () => {
-      assert.equal(
-        getNativeCurrency(mockState),
-        'ETH'
-      )
-    })
-  })
-
-  describe('getCurrentNetwork()', () => {
-    it('should return the id of the currently selected network', () => {
-      assert.equal(
-        getCurrentNetwork(mockState),
-        '3'
-      )
-    })
-  })
-
-  describe('getCurrentViewContext()', () => {
-    it('should return the context of the current view', () => {
-      assert.equal(
-        getCurrentViewContext(mockState),
-        '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'
-      )
-    })
-  })
-
-  describe('getForceGasMin()', () => {
-    it('should get the send.forceGasMin property', () => {
-      assert.equal(
-        getForceGasMin(mockState),
-        true
-      )
-    })
-  })
-
-  describe('getGasLimit()', () => {
-    it('should return the send.gasLimit', () => {
-      assert.equal(
-        getGasLimit(mockState),
-        '0xFFFF'
-      )
-    })
-  })
-
-  describe('getGasPrice()', () => {
-    it('should return the send.gasPrice', () => {
-      assert.equal(
-        getGasPrice(mockState),
-        '0xaa'
-      )
-    })
-  })
-
-  describe('getGasTotal()', () => {
-    it('should return the send.gasTotal', () => {
-      assert.equal(
-        getGasTotal(mockState),
-        'a9ff56'
-      )
-    })
-  })
-
-  describe('getPrimaryCurrency()', () => {
-    it('should return the symbol of the selected token', () => {
-      assert.equal(
-        getPrimaryCurrency(mockState),
-        'DEF'
-      )
-    })
-  })
-
-  describe('getRecentBlocks()', () => {
-    it('should return the recent blocks', () => {
-      assert.deepEqual(
-        getRecentBlocks(mockState),
-        ['mockBlock1', 'mockBlock2', 'mockBlock3']
-      )
-    })
-  })
-
-  describe('getSelectedAccount()', () => {
-    it('should return the currently selected account', () => {
-      assert.deepEqual(
-        getSelectedAccount(mockState),
-        {
-          code: '0x',
-          balance: '0x0',
-          nonce: '0x0',
-          address: '0xd85a4b6a394794842887b8284293d69163007bbb',
-        }
-      )
-    })
-  })
-
-
-  describe('getSelectedIdentity()', () => {
-    it('should return the identity object of the currently selected address', () => {
-      assert.deepEqual(
-        getSelectedIdentity(mockState),
-        {
-          address: '0xd85a4b6a394794842887b8284293d69163007bbb',
-          name: 'Send Account 4',
-        }
-      )
-    })
-  })
-
-  describe('getSelectedToken()', () => {
-    it('should return the currently selected token if selected', () => {
-      assert.deepEqual(
-        getSelectedToken(mockState),
-        {
-          address: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-          decimals: 4,
-          symbol: 'DEF',
-        }
-      )
-    })
-
-    it('should return the send token if none is currently selected, but a send token exists', () => {
-      const mockSendToken = {
-        address: '0x123456708414189a58339873ab429b6c47ab92d3',
-        decimals: 4,
-        symbol: 'JKL',
-      }
-      const editedMockState = {
-        metamask: Object.assign({}, mockState.metamask, {
-          selectedTokenAddress: null,
-          send: {
-            token: mockSendToken,
-          },
-        }),
-      }
-      assert.deepEqual(
-        getSelectedToken(editedMockState),
-        Object.assign({}, mockSendToken)
-      )
-    })
-  })
-
-  describe('getSelectedTokenContract()', () => {
-    it('should return the contract at the selected token address', () => {
-      assert.equal(
-        getSelectedTokenContract(mockState),
-        'mockAt:0x8d6b81208414189a58339873ab429b6c47ab92d3'
-      )
-    })
-
-    it('should return null if no token is selected', () => {
-      const modifiedMetamaskState = Object.assign({}, mockState.metamask, { selectedTokenAddress: false })
-      assert.equal(
-        getSelectedTokenContract(Object.assign({}, mockState, { metamask: modifiedMetamaskState })),
-        null
-      )
-    })
-  })
-
-  describe('getSelectedTokenExchangeRate()', () => {
-    it('should return the exchange rate for the selected token', () => {
-      assert.equal(
-        getSelectedTokenExchangeRate(mockState),
-        2.0
-      )
-    })
-  })
-
-  describe('getSelectedTokenToFiatRate()', () => {
-    it('should return rate for converting the selected token to fiat', () => {
-      assert.equal(
-        getSelectedTokenToFiatRate(mockState),
-        2401.76400654
-      )
-    })
-  })
-
-  describe('getSendAmount()', () => {
-    it('should return the send.amount', () => {
-      assert.equal(
-        getSendAmount(mockState),
-        '0x080'
-      )
-    })
-  })
-
-  describe('getSendEditingTransactionId()', () => {
-    it('should return the send.editingTransactionId', () => {
-      assert.equal(
-        getSendEditingTransactionId(mockState),
-        97531
-      )
-    })
-  })
-
-  describe('getSendErrors()', () => {
-    it('should return the send.errors', () => {
-      assert.deepEqual(
-        getSendErrors(mockState),
-        { someError: null }
-      )
-    })
-  })
-
-  describe('getSendHexDataFeatureFlagState()', () => {
-    it('should return the sendHexData feature flag state', () => {
-      assert.deepEqual(
-        getSendHexDataFeatureFlagState(mockState),
-        true
-      )
-    })
-  })
-
-  describe('getSendFrom()', () => {
-    it('should return the send.from', () => {
-      assert.deepEqual(
-        getSendFrom(mockState),
-        {
-          address: '0xabcdefg',
-          balance: '0x5f4e3d2c1',
-        }
-      )
-    })
-  })
-
-  describe('getSendFromBalance()', () => {
-    it('should get the send.from balance if it exists', () => {
-      assert.equal(
-        getSendFromBalance(mockState),
-        '0x5f4e3d2c1'
-      )
-    })
-
-    it('should get the selected account balance if the send.from does not exist', () => {
-      const editedMockState = {
-        metamask: Object.assign({}, mockState.metamask, {
-          send: {
-            from: null,
-          },
-        }),
-      }
-      assert.equal(
-        getSendFromBalance(editedMockState),
-        '0x0'
-      )
-    })
-  })
-
-  describe('getSendFromObject()', () => {
-    it('should return send.from if it exists', () => {
-      assert.deepEqual(
-        getSendFromObject(mockState),
-        {
-          address: '0xabcdefg',
-          balance: '0x5f4e3d2c1',
-        }
-      )
-    })
-
-    it('should return the current account with send ether info if send.from does not exist', () => {
-      const editedMockState = {
-        metamask: Object.assign({}, mockState.metamask, {
-          send: {
-            from: null,
-          },
-        }),
-      }
-      assert.deepEqual(
-        getSendFromObject(editedMockState),
-        {
-          code: '0x',
-          balance: '0x0',
-          nonce: '0x0',
-          address: '0xd85a4b6a394794842887b8284293d69163007bbb',
-          name: 'Send Account 4',
-        }
-      )
-    })
-  })
-
-  describe('getSendMaxModeState()', () => {
-    it('should return send.maxModeOn', () => {
-      assert.equal(
-        getSendMaxModeState(mockState),
-        false
-      )
-    })
-  })
-
-  describe('getSendTo()', () => {
-    it('should return send.to', () => {
-      assert.equal(
-        getSendTo(mockState),
-        '0x987fedabc'
-      )
-    })
-  })
-
-  describe('getSendToAccounts()', () => {
-    it('should return an array including all the users accounts and the address book', () => {
-      assert.deepEqual(
-        getSendToAccounts(mockState),
-        [
-          {
-            code: '0x',
-            balance: '0x47c9d71831c76efe',
-            nonce: '0x1b',
-            address: '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825',
-            name: 'Send Account 1',
-          },
-          {
-            code: '0x',
-            balance: '0x37452b1315889f80',
-            nonce: '0xa',
-            address: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-            name: 'Send Account 2',
-          },
-          {
-            code: '0x',
-            balance: '0x30c9d71831c76efe',
-            nonce: '0x1c',
-            address: '0x2f8d4a878cfa04a6e60d46362f5644deab66572d',
-            name: 'Send Account 3',
-          },
-          {
-            code: '0x',
-            balance: '0x0',
-            nonce: '0x0',
-            address: '0xd85a4b6a394794842887b8284293d69163007bbb',
-            name: 'Send Account 4',
-          },
-          {
-            address: '0x06195827297c7a80a443b6894d3bdb8824b43896',
-            name: 'Address Book Account 1',
-          },
-        ]
-      )
-    })
-  })
-
-  describe('getTokenBalance()', () => {
-    it('should', () => {
-      assert.equal(
-        getTokenBalance(mockState),
-        3434
-      )
-    })
-  })
-
-  describe('getTokenExchangeRate()', () => {
-    it('should return the passed tokens exchange rates', () => {
-      assert.equal(
-        getTokenExchangeRate(mockState, 'GHI'),
-        31.01
-      )
-    })
-  })
-
-  describe('getUnapprovedTxs()', () => {
-    it('should return the unapproved txs', () => {
-      assert.deepEqual(
-        getUnapprovedTxs(mockState),
-        {
-          4768706228115573: {
-            id: 4768706228115573,
-            time: 1487363153561,
-            status: 'unapproved',
-            gasMultiplier: 1,
-            metamaskNetworkId: '3',
-            txParams: {
-              from: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-              to: '0x18a3462427bcc9133bb46e88bcbe39cd7ef0e761',
-              value: '0xde0b6b3a7640000',
-              metamaskId: 4768706228115573,
-              metamaskNetworkId: '3',
-              gas: '0x5209',
-            },
-            gasLimitSpecified: false,
-            estimatedGas: '0x5209',
-            txFee: '17e0186e60800',
-            txValue: 'de0b6b3a7640000',
-            maxCost: 'de234b52e4a0800',
-            gasPrice: '4a817c800',
-          },
-        }
-      )
-    })
-  })
-
-  describe('transactionsSelector()', () => {
-    it('should return the selected addresses selected token transactions', () => {
-      assert.deepEqual(
-        transactionsSelector(mockState),
-        [
-          {
-            id: 'mockTokenTx1',
-            txParams: {
-              to: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-            },
-            time: 1700000000000,
-          },
-          {
-            id: 'mockTokenTx3',
-            txParams: {
-              to: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-            },
-            time: 1500000000000,
-          },
-        ]
-      )
-    })
-
-    it('should return all transactions if no token is selected', () => {
-      const modifiedMetamaskState = Object.assign({}, mockState.metamask, { selectedTokenAddress: false })
-      const modifiedState = Object.assign({}, mockState, { metamask: modifiedMetamaskState })
-      assert.deepEqual(
-        transactionsSelector(modifiedState),
-        [
-          {
-            id: 'mockTokenTx1',
-            time: 1700000000000,
-            txParams: {
-              to: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-            },
-          },
-          {
-            id: 'unapprovedMessage1',
-            time: 1650000000000,
-          },
-          {
-            id: 'mockTokenTx2',
-            time: 1600000000000,
-            txParams: {
-              to: '0xafaketokenaddress',
-            },
-          },
-          {
-            id: 'unapprovedMessage2',
-            time: 1550000000000,
-          },
-          {
-            id: 'mockTokenTx3',
-            time: 1500000000000,
-            txParams: {
-              to: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-            },
-          },
-          {
-            id: 'unapprovedMessage3',
-            time: 1450000000000,
-          },
-          {
-            id: 'mockEthTx1',
-            time: 1400000000000,
-            txParams: {
-              to: '0xd85a4b6a394794842887b8284293d69163007bbb',
-            },
-          },
-        ]
-      )
-    })
-
-    it('should return shapeshift transactions if current network is 1', () => {
-      const modifiedMetamaskState = Object.assign({}, mockState.metamask, { selectedTokenAddress: false, network: '1' })
-      const modifiedState = Object.assign({}, mockState, { metamask: modifiedMetamaskState })
-      assert.deepEqual(
-        transactionsSelector(modifiedState),
-        [
-          {
-            id: 'mockTokenTx1',
-            time: 1700000000000,
-            txParams: {
-              to: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-            },
-          },
-          { id: 'shapeShiftTx1', 'time': 1675000000000 },
-          {
-            id: 'unapprovedMessage1',
-            time: 1650000000000,
-          },
-          {
-            id: 'mockTokenTx2',
-            time: 1600000000000,
-            txParams: {
-              to: '0xafaketokenaddress',
-            },
-          },
-          { id: 'shapeShiftTx2', 'time': 1575000000000 },
-          {
-            id: 'unapprovedMessage2',
-            time: 1550000000000,
-          },
-          {
-            id: 'mockTokenTx3',
-            time: 1500000000000,
-            txParams: {
-              to: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-            },
-          },
-          { id: 'shapeShiftTx3', 'time': 1475000000000 },
-          {
-            id: 'unapprovedMessage3',
-            time: 1450000000000,
-          },
-          {
-            id: 'mockEthTx1',
-            time: 1400000000000,
-            txParams: {
-              to: '0xd85a4b6a394794842887b8284293d69163007bbb',
-            },
-          },
-        ]
-      )
-    })
-  })
-
-})
diff --git a/ui/app/components/app/send/tests/send-utils.test.js b/ui/app/components/app/send/tests/send-utils.test.js
deleted file mode 100644
index fc4c6deed..000000000
--- a/ui/app/components/app/send/tests/send-utils.test.js
+++ /dev/null
@@ -1,527 +0,0 @@
-import assert from 'assert'
-import sinon from 'sinon'
-import proxyquire from 'proxyquire'
-import {
-  BASE_TOKEN_GAS_COST,
-  ONE_GWEI_IN_WEI_HEX,
-  SIMPLE_GAS_COST,
-} from '../send.constants'
-const {
-  addCurrencies,
-  subtractCurrencies,
-} = require('../../../../helpers/utils/conversion-util')
-
-const {
-  INSUFFICIENT_FUNDS_ERROR,
-  INSUFFICIENT_TOKENS_ERROR,
-} = require('../send.constants')
-
-const stubs = {
-  addCurrencies: sinon.stub().callsFake((a, b, obj) => {
-    if (String(a).match(/^0x.+/)) a = Number(String(a).slice(2))
-    if (String(b).match(/^0x.+/)) b = Number(String(b).slice(2))
-    return a + b
-  }),
-  conversionUtil: sinon.stub().callsFake((val, obj) => parseInt(val, 16)),
-  conversionGTE: sinon.stub().callsFake((obj1, obj2) => obj1.value >= obj2.value),
-  multiplyCurrencies: sinon.stub().callsFake((a, b) => `${a}x${b}`),
-  calcTokenAmount: sinon.stub().callsFake((a, d) => 'calc:' + a + d),
-  rawEncode: sinon.stub().returns([16, 1100]),
-  conversionGreaterThan: sinon.stub().callsFake((obj1, obj2) => obj1.value > obj2.value),
-  conversionLessThan: sinon.stub().callsFake((obj1, obj2) => obj1.value < obj2.value),
-}
-
-const sendUtils = proxyquire('../send.utils.js', {
-  '../../../helpers/utils/conversion-util': {
-    addCurrencies: stubs.addCurrencies,
-    conversionUtil: stubs.conversionUtil,
-    conversionGTE: stubs.conversionGTE,
-    multiplyCurrencies: stubs.multiplyCurrencies,
-    conversionGreaterThan: stubs.conversionGreaterThan,
-    conversionLessThan: stubs.conversionLessThan,
-  },
-  '../../../helpers/utils/token-util': { calcTokenAmount: stubs.calcTokenAmount },
-  'ethereumjs-abi': {
-    rawEncode: stubs.rawEncode,
-  },
-})
-
-const {
-  calcGasTotal,
-  estimateGas,
-  doesAmountErrorRequireUpdate,
-  estimateGasPriceFromRecentBlocks,
-  generateTokenTransferData,
-  getAmountErrorObject,
-  getGasFeeErrorObject,
-  getToAddressForGasUpdate,
-  calcTokenBalance,
-  isBalanceSufficient,
-  isTokenBalanceSufficient,
-  removeLeadingZeroes,
-} = sendUtils
-
-describe('send utils', () => {
-
-  describe('calcGasTotal()', () => {
-    it('should call multiplyCurrencies with the correct params and return the multiplyCurrencies return', () => {
-      const result = calcGasTotal(12, 15)
-      assert.equal(result, '12x15')
-      const call_ = stubs.multiplyCurrencies.getCall(0).args
-      assert.deepEqual(
-        call_,
-        [12, 15, {
-          toNumericBase: 'hex',
-           multiplicandBase: 16,
-           multiplierBase: 16,
-         } ]
-      )
-    })
-  })
-
-  describe('doesAmountErrorRequireUpdate()', () => {
-    const config = {
-      'should return true if balances are different': {
-        balance: 0,
-        prevBalance: 1,
-        expectedResult: true,
-      },
-      'should return true if gasTotals are different': {
-        gasTotal: 0,
-        prevGasTotal: 1,
-        expectedResult: true,
-      },
-      'should return true if token balances are different': {
-        tokenBalance: 0,
-        prevTokenBalance: 1,
-        selectedToken: 'someToken',
-        expectedResult: true,
-      },
-      'should return false if they are all the same': {
-        balance: 1,
-        prevBalance: 1,
-        gasTotal: 1,
-        prevGasTotal: 1,
-        tokenBalance: 1,
-        prevTokenBalance: 1,
-        selectedToken: 'someToken',
-        expectedResult: false,
-      },
-    }
-    Object.entries(config).map(([description, obj]) => {
-      it(description, () => {
-        assert.equal(doesAmountErrorRequireUpdate(obj), obj.expectedResult)
-      })
-    })
-
-  })
-
-  describe('generateTokenTransferData()', () => {
-    it('should return undefined if not passed a selected token', () => {
-      assert.equal(generateTokenTransferData({ toAddress: 'mockAddress', amount: '0xa', selectedToken: false}), undefined)
-    })
-
-    it('should call abi.rawEncode with the correct params', () => {
-      stubs.rawEncode.resetHistory()
-      generateTokenTransferData({ toAddress: 'mockAddress', amount: 'ab', selectedToken: true})
-      assert.deepEqual(
-        stubs.rawEncode.getCall(0).args,
-        [['address', 'uint256'], ['mockAddress', '0xab']]
-      )
-    })
-
-    it('should return encoded token transfer data', () => {
-      assert.equal(
-        generateTokenTransferData({ toAddress: 'mockAddress', amount: '0xa', selectedToken: true}),
-        '0xa9059cbb104c'
-      )
-    })
-  })
-
-  describe('getAmountErrorObject()', () => {
-    const config = {
-      'should return insufficientFunds error if isBalanceSufficient returns false': {
-        amount: 15,
-        amountConversionRate: 2,
-        balance: 1,
-        conversionRate: 3,
-        gasTotal: 17,
-        primaryCurrency: 'ABC',
-        expectedResult: { amount: INSUFFICIENT_FUNDS_ERROR },
-      },
-      'should not return insufficientFunds error if selectedToken is truthy': {
-        amount: '0x0',
-        amountConversionRate: 2,
-        balance: 1,
-        conversionRate: 3,
-        gasTotal: 17,
-        primaryCurrency: 'ABC',
-        selectedToken: { symbole: 'DEF', decimals: 0 },
-        decimals: 0,
-        tokenBalance: 'sometokenbalance',
-        expectedResult: { amount: null },
-      },
-      'should return insufficientTokens error if token is selected and isTokenBalanceSufficient returns false': {
-        amount: '0x10',
-        amountConversionRate: 2,
-        balance: 100,
-        conversionRate: 3,
-        decimals: 10,
-        gasTotal: 17,
-        primaryCurrency: 'ABC',
-        selectedToken: 'someToken',
-        tokenBalance: 123,
-        expectedResult: { amount: INSUFFICIENT_TOKENS_ERROR },
-      },
-    }
-    Object.entries(config).map(([description, obj]) => {
-      it(description, () => {
-        assert.deepEqual(getAmountErrorObject(obj), obj.expectedResult)
-      })
-    })
-  })
-
-  describe('getGasFeeErrorObject()', () => {
-    const config = {
-      'should return insufficientFunds error if isBalanceSufficient returns false': {
-        amountConversionRate: 2,
-        balance: 16,
-        conversionRate: 3,
-        gasTotal: 17,
-        primaryCurrency: 'ABC',
-        expectedResult: { gasFee: INSUFFICIENT_FUNDS_ERROR },
-      },
-      'should return null error if isBalanceSufficient returns true': {
-        amountConversionRate: 2,
-        balance: 16,
-        conversionRate: 3,
-        gasTotal: 15,
-        primaryCurrency: 'ABC',
-        expectedResult: { gasFee: null },
-      },
-    }
-    Object.entries(config).map(([description, obj]) => {
-      it(description, () => {
-        assert.deepEqual(getGasFeeErrorObject(obj), obj.expectedResult)
-      })
-    })
-  })
-
-  describe('calcTokenBalance()', () => {
-    it('should return the calculated token blance', () => {
-      assert.equal(calcTokenBalance({
-        selectedToken: {
-          decimals: 11,
-        },
-        usersToken: {
-          balance: 20,
-        },
-      }), 'calc:2011')
-    })
-  })
-
-  describe('isBalanceSufficient()', () => {
-    it('should correctly call addCurrencies and return the result of calling conversionGTE', () => {
-      stubs.conversionGTE.resetHistory()
-      const result = isBalanceSufficient({
-        amount: 15,
-        amountConversionRate: 2,
-        balance: 100,
-        conversionRate: 3,
-        gasTotal: 17,
-        primaryCurrency: 'ABC',
-      })
-      assert.deepEqual(
-        stubs.addCurrencies.getCall(0).args,
-        [
-          15, 17, {
-            aBase: 16,
-            bBase: 16,
-            toNumericBase: 'hex',
-          },
-        ]
-      )
-      assert.deepEqual(
-        stubs.conversionGTE.getCall(0).args,
-        [
-          {
-            value: 100,
-            fromNumericBase: 'hex',
-            fromCurrency: 'ABC',
-            conversionRate: 3,
-          },
-          {
-            value: 32,
-            fromNumericBase: 'hex',
-            conversionRate: 2,
-            fromCurrency: 'ABC',
-          },
-        ]
-      )
-
-      assert.equal(result, true)
-    })
-  })
-
-  describe('isTokenBalanceSufficient()', () => {
-    it('should correctly call conversionUtil and return the result of calling conversionGTE', () => {
-      stubs.conversionGTE.resetHistory()
-      stubs.conversionUtil.resetHistory()
-      const result = isTokenBalanceSufficient({
-        amount: '0x10',
-        tokenBalance: 123,
-        decimals: 10,
-      })
-      assert.deepEqual(
-        stubs.conversionUtil.getCall(0).args,
-        [
-          '0x10', {
-            fromNumericBase: 'hex',
-          },
-        ]
-      )
-      assert.deepEqual(
-        stubs.conversionGTE.getCall(0).args,
-        [
-          {
-            value: 123,
-            fromNumericBase: 'hex',
-          },
-          {
-            value: 'calc:1610',
-          },
-        ]
-      )
-
-      assert.equal(result, false)
-    })
-  })
-
-  describe('estimateGas', () => {
-    const baseMockParams = {
-      blockGasLimit: '0x64',
-      selectedAddress: 'mockAddress',
-      to: '0xisContract',
-      estimateGasMethod: sinon.stub().callsFake(
-        ({to}, cb) => {
-          const err = typeof to === 'string' && to.match(/willFailBecauseOf:/)
-            ? new Error(to.match(/:(.+)$/)[1])
-            : null
-          const result = { toString: (n) => `0xabc${n}` }
-          return cb(err, result)
-        }
-      ),
-    }
-    const baseExpectedCall = {
-      from: 'mockAddress',
-      gas: '0x64x0.95',
-      to: '0xisContract',
-      value: '0xff',
-    }
-
-    beforeEach(() => {
-      global.eth = {
-        getCode: sinon.stub().callsFake(
-          (address) => Promise.resolve(address.match(/isContract/) ? 'not-0x' : '0x')
-        ),
-      }
-    })
-
-    afterEach(() => {
-      baseMockParams.estimateGasMethod.resetHistory()
-      global.eth.getCode.resetHistory()
-    })
-
-    it('should call ethQuery.estimateGas with the expected params', async () => {
-      const result = await sendUtils.estimateGas(baseMockParams)
-      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
-      assert.deepEqual(
-        baseMockParams.estimateGasMethod.getCall(0).args[0],
-        Object.assign({ gasPrice: undefined, value: undefined }, baseExpectedCall)
-      )
-      assert.equal(result, '0xabc16')
-    })
-
-    it('should call ethQuery.estimateGas with the expected params when initialGasLimitHex is lower than the upperGasLimit', async () => {
-      const result = await estimateGas(Object.assign({}, baseMockParams, { blockGasLimit: '0xbcd' }))
-      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
-      assert.deepEqual(
-        baseMockParams.estimateGasMethod.getCall(0).args[0],
-        Object.assign({ gasPrice: undefined, value: undefined }, baseExpectedCall, { gas: '0xbcdx0.95' })
-      )
-      assert.equal(result, '0xabc16x1.5')
-    })
-
-    it('should call ethQuery.estimateGas with a value of 0x0 and the expected data and to if passed a selectedToken', async () => {
-      const result = await estimateGas(Object.assign({ data: 'mockData', selectedToken: { address: 'mockAddress' } }, baseMockParams))
-      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
-      assert.deepEqual(
-        baseMockParams.estimateGasMethod.getCall(0).args[0],
-        Object.assign({}, baseExpectedCall, {
-          gasPrice: undefined,
-          value: '0x0',
-          data: '0xa9059cbb104c',
-          to: 'mockAddress',
-        })
-      )
-      assert.equal(result, '0xabc16')
-    })
-
-    it('should call ethQuery.estimateGas without a recipient if the recipient is empty and data passed', async () => {
-      const data = 'mockData'
-      const to = ''
-      const result = await estimateGas({...baseMockParams, data, to})
-      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
-      assert.deepEqual(
-        baseMockParams.estimateGasMethod.getCall(0).args[0],
-        { gasPrice: undefined, value: '0xff', data, from: baseExpectedCall.from, gas: baseExpectedCall.gas},
-      )
-      assert.equal(result, '0xabc16')
-    })
-
-    it(`should return ${SIMPLE_GAS_COST} if ethQuery.getCode does not return '0x'`, async () => {
-      assert.equal(baseMockParams.estimateGasMethod.callCount, 0)
-      const result = await estimateGas(Object.assign({}, baseMockParams, { to: '0x123' }))
-      assert.equal(result, SIMPLE_GAS_COST)
-    })
-
-    it(`should return ${SIMPLE_GAS_COST} if not passed a selectedToken or truthy to address`, async () => {
-      assert.equal(baseMockParams.estimateGasMethod.callCount, 0)
-      const result = await estimateGas(Object.assign({}, baseMockParams, { to: null }))
-      assert.equal(result, SIMPLE_GAS_COST)
-    })
-
-    it(`should not return ${SIMPLE_GAS_COST} if passed a selectedToken`, async () => {
-      assert.equal(baseMockParams.estimateGasMethod.callCount, 0)
-      const result = await estimateGas(Object.assign({}, baseMockParams, { to: '0x123', selectedToken: { address: '' } }))
-      assert.notEqual(result, SIMPLE_GAS_COST)
-    })
-
-    it(`should return ${BASE_TOKEN_GAS_COST} if passed a selectedToken but no to address`, async () => {
-      const result = await estimateGas(Object.assign({}, baseMockParams, { to: null, selectedToken: { address: '' } }))
-      assert.equal(result, BASE_TOKEN_GAS_COST)
-    })
-
-    it(`should return the adjusted blockGasLimit if it fails with a 'Transaction execution error.'`, async () => {
-      const result = await estimateGas(Object.assign({}, baseMockParams, {
-        to: 'isContract willFailBecauseOf:Transaction execution error.',
-      }))
-      assert.equal(result, '0x64x0.95')
-    })
-
-    it(`should return the adjusted blockGasLimit if it fails with a 'gas required exceeds allowance or always failing transaction.'`, async () => {
-      const result = await estimateGas(Object.assign({}, baseMockParams, {
-        to: 'isContract willFailBecauseOf:gas required exceeds allowance or always failing transaction.',
-      }))
-      assert.equal(result, '0x64x0.95')
-    })
-
-    it(`should reject other errors`, async () => {
-      try {
-        await estimateGas(Object.assign({}, baseMockParams, {
-          to: 'isContract willFailBecauseOf:some other error',
-        }))
-      } catch (err) {
-        assert.equal(err.message, 'some other error')
-      }
-    })
-  })
-
-  describe('estimateGasPriceFromRecentBlocks', () => {
-    const ONE_GWEI_IN_WEI_HEX_PLUS_ONE = addCurrencies(ONE_GWEI_IN_WEI_HEX, '0x1', {
-      aBase: 16,
-      bBase: 16,
-      toNumericBase: 'hex',
-    })
-    const ONE_GWEI_IN_WEI_HEX_PLUS_TWO = addCurrencies(ONE_GWEI_IN_WEI_HEX, '0x2', {
-      aBase: 16,
-      bBase: 16,
-      toNumericBase: 'hex',
-    })
-    const ONE_GWEI_IN_WEI_HEX_MINUS_ONE = subtractCurrencies(ONE_GWEI_IN_WEI_HEX, '0x1', {
-      aBase: 16,
-      bBase: 16,
-      toNumericBase: 'hex',
-    })
-
-    it(`should return ${ONE_GWEI_IN_WEI_HEX} if recentBlocks is falsy`, () => {
-      assert.equal(estimateGasPriceFromRecentBlocks(), ONE_GWEI_IN_WEI_HEX)
-    })
-
-    it(`should return ${ONE_GWEI_IN_WEI_HEX} if recentBlocks is empty`, () => {
-      assert.equal(estimateGasPriceFromRecentBlocks([]), ONE_GWEI_IN_WEI_HEX)
-    })
-
-    it(`should estimate a block's gasPrice as ${ONE_GWEI_IN_WEI_HEX} if it has no gas prices`, () => {
-      const mockRecentBlocks = [
-        { gasPrices: null },
-        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_ONE ] },
-        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_MINUS_ONE ] },
-      ]
-      assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), ONE_GWEI_IN_WEI_HEX)
-    })
-
-    it(`should estimate a block's gasPrice as ${ONE_GWEI_IN_WEI_HEX} if it has empty gas prices`, () => {
-      const mockRecentBlocks = [
-        { gasPrices: [] },
-        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_ONE ] },
-        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_MINUS_ONE ] },
-      ]
-      assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), ONE_GWEI_IN_WEI_HEX)
-    })
-
-    it(`should return the middle value of all blocks lowest prices`, () => {
-      const mockRecentBlocks = [
-        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_TWO ] },
-        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_MINUS_ONE ] },
-        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_ONE ] },
-      ]
-      assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), ONE_GWEI_IN_WEI_HEX_PLUS_ONE)
-    })
-
-    it(`should work if a block has multiple gas prices`, () => {
-      const mockRecentBlocks = [
-        { gasPrices: [ '0x1', '0x2', '0x3', '0x4', '0x5' ] },
-        { gasPrices: [ '0x101', '0x100', '0x103', '0x104', '0x102' ] },
-        { gasPrices: [ '0x150', '0x50', '0x100', '0x200', '0x5' ] },
-      ]
-      assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), '0x5')
-    })
-  })
-
-  describe('getToAddressForGasUpdate()', () => {
-    it('should return empty string if all params are undefined or null', () => {
-      assert.equal(getToAddressForGasUpdate(undefined, null), '')
-    })
-
-    it('should return the first string that is not defined or null in lower case', () => {
-      assert.equal(getToAddressForGasUpdate('A', null), 'a')
-      assert.equal(getToAddressForGasUpdate(undefined, 'B'), 'b')
-    })
-  })
-
-  describe('removeLeadingZeroes()', () => {
-    it('should remove leading zeroes from int when user types', () => {
-      assert.equal(removeLeadingZeroes('0'), '0')
-      assert.equal(removeLeadingZeroes('1'), '1')
-      assert.equal(removeLeadingZeroes('00'), '0')
-      assert.equal(removeLeadingZeroes('01'), '1')
-    })
-
-    it('should remove leading zeroes from int when user copy/paste', () => {
-      assert.equal(removeLeadingZeroes('001'), '1')
-    })
-
-    it('should remove leading zeroes from float when user types', () => {
-      assert.equal(removeLeadingZeroes('0.'), '0.')
-      assert.equal(removeLeadingZeroes('0.0'), '0.0')
-      assert.equal(removeLeadingZeroes('0.00'), '0.00')
-      assert.equal(removeLeadingZeroes('0.001'), '0.001')
-      assert.equal(removeLeadingZeroes('0.10'), '0.10')
-    })
-
-    it('should remove leading zeroes from float when user copy/paste', () => {
-      assert.equal(removeLeadingZeroes('00.1'), '0.1')
-    })
-  })
-})
diff --git a/ui/app/components/app/send/to-autocomplete.component.js b/ui/app/components/app/send/to-autocomplete.component.js
deleted file mode 100644
index 183967c58..000000000
--- a/ui/app/components/app/send/to-autocomplete.component.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import AccountListItem from './account-list-item/account-list-item.component'
-
-
-export default class ToAutoComplete extends Component {
-
-  static propTypes = {
-    dropdownOpen: PropTypes.bool,
-    openDropdown: PropTypes.func,
-    closeDropdown: PropTypes.func,
-    onChange: PropTypes.func,
-    to: PropTypes.string,
-    accounts: PropTypes.array,
-    inError: PropTypes.bool,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  state = {
-    accountsToRender: [],
-  }
-
-  getListItemIcon (listItemAddress, toAddress) {
-    return toAddress && listItemAddress === toAddress
-      ? <i className={'fa fa-check fa-lg'}
-          style={{
-            color: '#02c9b1',
-          }}
-        />
-      : null
-  }
-
-  renderDropdown () {
-    const {
-      closeDropdown,
-      onChange,
-      to,
-    } = this.props
-    const {accountsToRender} = this.state
-
-    if (!accountsToRender.length) {
-      return null
-    }
-
-    return (
-      <div>
-        <div className={'send-v2__from-dropdown__close-area'} onClick={closeDropdown} />
-        <div className={'send-v2__from-dropdown__list'}>
-          {accountsToRender.map((account, i) => (
-            <AccountListItem
-              key={i}
-              account={account}
-              className={'account-list-item__dropdown'}
-              handleClick={() => {
-                onChange(account.address)
-                closeDropdown()
-              }}
-              icon={this.getListItemIcon(account.address, to)}
-              displayBalance={false}
-              displayAddress={true}
-            />
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  handleInputEvent (event = {}, cb) {
-    const {
-      to,
-      accounts,
-      closeDropdown,
-      openDropdown,
-    } = this.props
-
-    const matchingAccounts = accounts.filter(({address}) => address.match(to || ''))
-    const matches = matchingAccounts.length
-
-    if (!matches || matchingAccounts[0].address === to) {
-      this.setState({accountsToRender: []})
-      event.target && event.target.select()
-      closeDropdown()
-    } else {
-      this.setState({accountsToRender: matchingAccounts})
-      openDropdown()
-    }
-    cb && cb(event.target.value)
-  }
-
-  componentDidUpdate (nextProps) {
-    if (this.props.to !== nextProps.to) {
-      this.handleInputEvent()
-    }
-  }
-
-  render () {
-    const {
-      to,
-      dropdownOpen,
-      onChange,
-      inError,
-    } = this.props
-
-    return (
-      <div className={'send-v2__to-autocomplete'}>
-        <input
-          className={classnames('send-v2__to-autocomplete__input', {
-            'send-v2__error-border': inError,
-          })}
-          placeholder={this.context.t('recipientAddress')}
-          value={to}
-          onChange={event => onChange(event.target.value)}
-          onFocus={event => this.handleInputEvent(event)}
-          style={{
-            borderColor: inError ? 'red' : null,
-          }}
-        />
-        {
-          to
-          ? null
-          : <i className={'fa fa-caret-down fa-lg send-v2__to-autocomplete__down-caret'}
-              onClick={() => this.handleInputEvent()}
-              style={{
-                style: {color: '#dedede'},
-              }}
-            />
-        }
-        {
-          dropdownOpen
-          ? this.renderDropdown()
-          : null
-        }
-      </div>
-    )
-  }
-
-}
diff --git a/ui/app/components/app/send/to-autocomplete/index.js b/ui/app/components/app/send/to-autocomplete/index.js
deleted file mode 100644
index 244d301d1..000000000
--- a/ui/app/components/app/send/to-autocomplete/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './to-autocomplete.js'
diff --git a/ui/app/components/app/send/to-autocomplete/to-autocomplete.js b/ui/app/components/app/send/to-autocomplete/to-autocomplete.js
deleted file mode 100644
index d3db8cb59..000000000
--- a/ui/app/components/app/send/to-autocomplete/to-autocomplete.js
+++ /dev/null
@@ -1,129 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const AccountListItem = require('../account-list-item/account-list-item.component').default
-const connect = require('react-redux').connect
-const Tooltip = require('../../../ui/tooltip')
-const checksumAddress = require('../../../../helpers/utils/util').checksumAddress
-
-ToAutoComplete.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect()(ToAutoComplete)
-
-
-inherits(ToAutoComplete, Component)
-function ToAutoComplete () {
-  Component.call(this)
-
-  this.state = { accountsToRender: [] }
-}
-
-ToAutoComplete.prototype.getListItemIcon = function (listItemAddress, toAddress) {
-  const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
-
-  return toAddress && listItemAddress === toAddress
-    ? listItemIcon
-    : null
-}
-
-ToAutoComplete.prototype.renderDropdown = function () {
-  const {
-    closeDropdown,
-    onChange,
-    to,
-  } = this.props
-  const { accountsToRender } = this.state
-
-  return accountsToRender.length && h('div', {}, [
-
-    h('div.send-v2__from-dropdown__close-area', {
-      onClick: closeDropdown,
-    }),
-
-    h('div.send-v2__from-dropdown__list', {}, [
-
-      ...accountsToRender.map(account => h(AccountListItem, {
-        account,
-        className: 'account-list-item__dropdown',
-        handleClick: () => {
-          onChange(checksumAddress(account.address))
-          closeDropdown()
-        },
-        icon: this.getListItemIcon(account.address, to),
-        displayBalance: false,
-        displayAddress: true,
-      })),
-
-    ]),
-
-  ])
-}
-
-ToAutoComplete.prototype.handleInputEvent = function (event = {}, cb) {
-  const {
-    to,
-    accounts,
-    closeDropdown,
-    openDropdown,
-  } = this.props
-
-  const matchingAccounts = accounts.filter(({ address }) => address.match(to || ''))
-  const matches = matchingAccounts.length
-
-  if (!matches || matchingAccounts[0].address === to) {
-    this.setState({ accountsToRender: [] })
-    event.target && event.target.select()
-    closeDropdown()
-  } else {
-    this.setState({ accountsToRender: matchingAccounts })
-    openDropdown()
-  }
-  cb && cb(event.target.value)
-}
-
-ToAutoComplete.prototype.componentDidUpdate = function (nextProps, nextState) {
-  if (this.props.to !== nextProps.to) {
-    this.handleInputEvent()
-  }
-}
-
-ToAutoComplete.prototype.render = function () {
-  const {
-    to,
-    dropdownOpen,
-    onChange,
-    inError,
-    qrScanner,
-  } = this.props
-
-  return h('div.send-v2__to-autocomplete', {}, [
-
-    h(`input.send-v2__to-autocomplete__input${qrScanner ? '.with-qr' : ''}`, {
-      placeholder: this.context.t('recipientAddress'),
-      className: inError ? `send-v2__error-border` : '',
-      value: to,
-      onChange: event => onChange(event.target.value),
-      onFocus: event => this.handleInputEvent(event),
-      style: {
-        borderColor: inError ? 'red' : null,
-      },
-    }),
-    qrScanner && h(Tooltip, {
-      title: this.context.t('scanQrCode'),
-      position: 'bottom',
-    }, h(`i.fa.fa-qrcode.fa-lg.send-v2__to-autocomplete__qr-code`, {
-      style: { color: '#33333' },
-      onClick: () => this.props.scanQrCode(),
-    })),
-    !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, {
-      style: { color: '#dedede' },
-      onClick: () => this.handleInputEvent(),
-    }),
-
-    dropdownOpen && this.renderDropdown(),
-
-  ])
-}
diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.container.js b/ui/app/components/app/transaction-list-item/transaction-list-item.container.js
index de8a3bbba..a8fb8c246 100644
--- a/ui/app/components/app/transaction-list-item/transaction-list-item.container.js
+++ b/ui/app/components/app/transaction-list-item/transaction-list-item.container.js
@@ -15,7 +15,7 @@ import {
   setCustomGasLimit,
 } from '../../../ducks/gas/gas.duck'
 import { getIsMainnet, preferencesSelector, getSelectedAddress, conversionRateSelector } from '../../../selectors/selectors'
-import { isBalanceSufficient } from '../send/send.utils'
+import { isBalanceSufficient } from '../../../pages/send/send.utils'
 
 const mapStateToProps = (state, ownProps) => {
   const { metamask: { knownMethodData, accounts } } = state
diff --git a/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js b/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js
index 8abe1ab18..d9627e31b 100644
--- a/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js
+++ b/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import AccountListItem from '../../app/send/account-list-item/account-list-item.component'
+import AccountListItem from '../../../pages/send/account-list-item/account-list-item.component'
 
 export default class AccountDropdownMini extends PureComponent {
   static propTypes = {
diff --git a/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js b/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js
index bc74ceb3c..9691f38aa 100644
--- a/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js
+++ b/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js
@@ -2,7 +2,7 @@ import React from 'react'
 import assert from 'assert'
 import { shallow } from 'enzyme'
 import AccountDropdownMini from '../account-dropdown-mini.component'
-import AccountListItem from '../../../app/send/account-list-item/account-list-item.component'
+import AccountListItem from '../../../../pages/send/account-list-item/account-list-item.component'
 
 describe('AccountDropdownMini', () => {
   it('should render an account with an icon', () => {
diff --git a/ui/app/components/ui/unit-input/unit-input.component.js b/ui/app/components/ui/unit-input/unit-input.component.js
index 7b414f177..c5f8350a6 100644
--- a/ui/app/components/ui/unit-input/unit-input.component.js
+++ b/ui/app/components/ui/unit-input/unit-input.component.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { removeLeadingZeroes } from '../../app/send/send.utils'
+import { removeLeadingZeroes } from '../../../pages/send/send.utils'
 
 /**
  * Component that attaches a suffix or unit of measurement trailing user input, ex. 'ETH'. Also
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 07ab04613..91daf977e 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -549,7 +549,7 @@
   }
 
   &__form-row {
-    margin: 14.5px 18px 0px;
+    margin: 8px 18px 0px;
     position: relative;
     display: flex;
     flex-flow: row;
@@ -592,8 +592,8 @@
     flex: 0 0 auto;
   }
 
-  &__from-dropdown {
-    height: 73px;
+  &__from-dropdown,
+  &__asset-dropdown {
     width: 100%;
     border: 1px solid $alto;
     border-radius: 4px;
@@ -628,6 +628,104 @@
     }
   }
 
+  &__from-dropdown {
+    height: 73px;
+  }
+
+  &__asset-dropdown {
+    height: 62px;
+    border: none;
+
+    &__asset {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      padding: 10px 8px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgba($alto, 0.2);
+      }
+    }
+
+    &__asset-icon {
+      .identicon {
+        border: 1px solid $alto;
+      }
+    }
+
+    &__asset-data {
+      display: flex;
+      flex-flow: column nowrap;
+      margin-left: 8px;
+    }
+
+    &__symbol {
+      font-size: 16px;
+      margin-bottom: 2px;
+    }
+
+    &__name {
+      display: flex;
+      flex-flow: row nowrap;
+      font-size: 12px;
+
+      &__label {
+        margin-right: .25rem;
+      }
+    }
+
+    &__close-area {
+      z-index: 2000;
+    }
+
+    &__list {
+      z-index: 2050;
+      position: absolute;
+      height: 220px;
+      width: 100%;
+      border: 1px solid $geyser;
+      border-radius: 4px;
+      background-color: $white;
+      box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11);
+      top: 55px;
+      left: 0;
+      box-sizing: content-box;
+      overflow-y: scroll;
+    }
+
+    &__input-wrapper {
+      border: 1px solid $alto;
+      border-radius: 4px;
+
+      &--opened {
+        position: relative;
+        z-index: 2050;
+      }
+
+      .send-v2__asset-dropdown__asset {
+        &:hover {
+          background-color: $white;
+        }
+      }
+    }
+
+    &__input {
+      z-index: 1025;
+      position: relative;
+      height: 54px;
+      width: 100%;
+      border: none;
+      border-radius: 4px;
+      background-color: $white;
+      color: $tundora;
+      padding: 10px;
+      font-family: Roboto;
+      font-size: 16px;
+      line-height: 21px;
+    }
+  }
+
   &__to-autocomplete {
     position: relative;
 
diff --git a/ui/app/ducks/metamask/metamask.js b/ui/app/ducks/metamask/metamask.js
index 47c767d68..3ca487c1f 100644
--- a/ui/app/ducks/metamask/metamask.js
+++ b/ui/app/ducks/metamask/metamask.js
@@ -154,9 +154,26 @@ function reduceMetamask (state, action) {
       return newState
 
     case actions.SET_SELECTED_TOKEN:
-      return extend(metamaskState, {
+      newState = extend(metamaskState, {
         selectedTokenAddress: action.value,
       })
+      const newSend = extend(metamaskState.send)
+
+      if (metamaskState.send.editingTransactionId && !action.value) {
+        delete newSend.token
+        const unapprovedTx = newState.unapprovedTxs[newSend.editingTransactionId] || {}
+        const txParams = unapprovedTx.txParams || {}
+        newState.unapprovedTxs = extend(newState.unapprovedTxs, {
+          [newSend.editingTransactionId]: extend(unapprovedTx, {
+            txParams: extend(txParams, { data: '' }),
+          }),
+        })
+        newSend.tokenBalance = null
+        newSend.balance = '0'
+      }
+
+      newState.send = newSend
+      return newState
 
     case actions.SET_ACCOUNT_LABEL:
       const account = action.value.account
diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 63e63ce4a..be819b5f0 100644
--- a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../../app/scripts/lib/enums'
 import { getEnvironmentType } from '../../../../app/scripts/lib/util'
 import ConfirmPageContainer, { ConfirmDetailRow } from '../../components/app/confirm-page-container'
-import { isBalanceSufficient } from '../../components/app/send/send.utils'
+import { isBalanceSufficient } from '../send/send.utils'
 import { DEFAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE } from '../../helpers/constants/routes'
 import {
   INSUFFICIENT_FUNDS_ERROR_KEY,
diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js
index 83543f1a4..2b087f5cc 100644
--- a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -14,9 +14,9 @@ import {
   GAS_LIMIT_TOO_LOW_ERROR_KEY,
 } from '../../helpers/constants/error-keys'
 import { getHexGasTotal } from '../../helpers/utils/confirm-tx.util'
-import { isBalanceSufficient, calcGasTotal } from '../../components/app/send/send.utils'
+import { isBalanceSufficient, calcGasTotal } from '../send/send.utils'
 import { conversionGreaterThan } from '../../helpers/utils/conversion-util'
-import { MIN_GAS_LIMIT_DEC } from '../../components/app/send/send.constants'
+import { MIN_GAS_LIMIT_DEC } from '../send/send.constants'
 import { checksumAddress, addressSlicer, valuesFor } from '../../helpers/utils/util'
 import {getMetaMaskAccounts, getAdvancedInlineGasShown, preferencesSelector, getIsMainnet} from '../../selectors/selectors'
 
diff --git a/ui/app/pages/home/home.container.js b/ui/app/pages/home/home.container.js
index 7508654dc..d0a5d7b47 100644
--- a/ui/app/pages/home/home.container.js
+++ b/ui/app/pages/home/home.container.js
@@ -3,7 +3,7 @@ import { compose } from 'recompose'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction'
-
+``
 const mapStateToProps = state => {
   const { metamask, appState } = state
   const {
diff --git a/ui/app/pages/routes/index.js b/ui/app/pages/routes/index.js
index 1c96eaf8e..e38a6d6ce 100644
--- a/ui/app/pages/routes/index.js
+++ b/ui/app/pages/routes/index.js
@@ -10,7 +10,7 @@ import { getMetaMaskAccounts, getNetworkIdentifier } from '../../selectors/selec
 // init
 import FirstTimeFlow from '../first-time-flow'
 // accounts
-const SendTransactionScreen = require('../../components/app/send/send.container')
+const SendTransactionScreen = require('../send/send.container')
 const ConfirmTransaction = require('../confirm-transaction')
 
 // slideout menu
diff --git a/ui/app/pages/send/README.md b/ui/app/pages/send/README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/pages/send/account-list-item/account-list-item-README.md b/ui/app/pages/send/account-list-item/account-list-item-README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/pages/send/account-list-item/account-list-item.component.js b/ui/app/pages/send/account-list-item/account-list-item.component.js
new file mode 100644
index 000000000..e6cca39b9
--- /dev/null
+++ b/ui/app/pages/send/account-list-item/account-list-item.component.js
@@ -0,0 +1,108 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { checksumAddress } from '../../../helpers/utils/util'
+import Identicon from '../../../components/ui/identicon'
+import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display'
+import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'
+import Tooltip from '../../../components/ui/tooltip-v2'
+
+export default class AccountListItem extends Component {
+
+  static propTypes = {
+    account: PropTypes.object,
+    className: PropTypes.string,
+    conversionRate: PropTypes.number,
+    currentCurrency: PropTypes.string,
+    displayAddress: PropTypes.bool,
+    displayBalance: PropTypes.bool,
+    handleClick: PropTypes.func,
+    icon: PropTypes.node,
+    balanceIsCached: PropTypes.bool,
+    showFiat: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    showFiat: true,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  render () {
+    const {
+      account,
+      className,
+      displayAddress = false,
+      displayBalance = true,
+      handleClick,
+      icon = null,
+      balanceIsCached,
+      showFiat,
+    } = this.props
+
+    const { name, address, balance } = account || {}
+
+    return (<div
+      className={`account-list-item ${className}`}
+      onClick={() => handleClick && handleClick({ name, address, balance })}
+    >
+
+      <div className="account-list-item__top-row">
+        <Identicon
+          address={address}
+          className="account-list-item__identicon"
+          diameter={18}
+        />
+
+        <div className="account-list-item__account-name">{ name || address }</div>
+
+        {icon && <div className="account-list-item__icon">{ icon }</div>}
+
+      </div>
+
+      {displayAddress && name && <div className="account-list-item__account-address">
+        { checksumAddress(address) }
+      </div>}
+
+      {
+        displayBalance && (
+          <Tooltip
+            position="left"
+            title={this.context.t('balanceOutdated')}
+            disabled={!balanceIsCached}
+            style={{
+              left: '-20px !important',
+            }}
+          >
+            <div className={classnames('account-list-item__account-balances', {
+              'account-list-item__cached-balances': balanceIsCached,
+            })}>
+              <div className="account-list-item__primary-cached-container">
+                <UserPreferencedCurrencyDisplay
+                  type={PRIMARY}
+                  value={balance}
+                  hideTitle={true}
+                />
+                {
+                  balanceIsCached ? <span className="account-list-item__cached-star">*</span> : null
+                }
+              </div>
+              {
+                showFiat && (
+                  <UserPreferencedCurrencyDisplay
+                    type={SECONDARY}
+                    value={balance}
+                    hideTitle={true}
+                  />
+                )
+              }
+            </div>
+          </Tooltip>
+        )
+      }
+
+    </div>)
+  }
+}
diff --git a/ui/app/pages/send/account-list-item/account-list-item.container.js b/ui/app/pages/send/account-list-item/account-list-item.container.js
new file mode 100644
index 000000000..21f800306
--- /dev/null
+++ b/ui/app/pages/send/account-list-item/account-list-item.container.js
@@ -0,0 +1,27 @@
+import { connect } from 'react-redux'
+import {
+    getConversionRate,
+    getCurrentCurrency,
+    getNativeCurrency,
+} from '../send.selectors.js'
+import {
+  getIsMainnet,
+  isBalanceCached,
+  preferencesSelector,
+} from '../../../selectors/selectors'
+import AccountListItem from './account-list-item.component'
+
+export default connect(mapStateToProps)(AccountListItem)
+
+function mapStateToProps (state) {
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
+
+  return {
+    conversionRate: getConversionRate(state),
+    currentCurrency: getCurrentCurrency(state),
+    nativeCurrency: getNativeCurrency(state),
+    balanceIsCached: isBalanceCached(state),
+    showFiat: (isMainnet || !!showFiatInTestnets),
+  }
+}
diff --git a/ui/app/pages/send/account-list-item/index.js b/ui/app/pages/send/account-list-item/index.js
new file mode 100644
index 000000000..907485cf7
--- /dev/null
+++ b/ui/app/pages/send/account-list-item/index.js
@@ -0,0 +1 @@
+export { default } from './account-list-item.container'
diff --git a/ui/app/pages/send/account-list-item/tests/account-list-item-component.test.js b/ui/app/pages/send/account-list-item/tests/account-list-item-component.test.js
new file mode 100644
index 000000000..bec88402d
--- /dev/null
+++ b/ui/app/pages/send/account-list-item/tests/account-list-item-component.test.js
@@ -0,0 +1,148 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import proxyquire from 'proxyquire'
+import Identicon from '../../../../components/ui/identicon'
+import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display'
+
+const utilsMethodStubs = {
+  checksumAddress: sinon.stub().returns('mockCheckSumAddress'),
+}
+
+const AccountListItem = proxyquire('../account-list-item.component.js', {
+  '../../../helpers/utils/util': utilsMethodStubs,
+}).default
+
+
+const propsMethodSpies = {
+  handleClick: sinon.spy(),
+}
+
+describe('AccountListItem Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<AccountListItem
+      account={ { address: 'mockAddress', name: 'mockName', balance: 'mockBalance' } }
+      className={'mockClassName'}
+      conversionRate={4}
+      currentCurrency={'mockCurrentyCurrency'}
+      nativeCurrency={'ETH'}
+      displayAddress={false}
+      displayBalance={false}
+      handleClick={propsMethodSpies.handleClick}
+      icon={<i className="mockIcon" />}
+    />, { context: { t: str => str + '_t' } })
+  })
+
+  afterEach(() => {
+    propsMethodSpies.handleClick.resetHistory()
+  })
+
+  describe('render', () => {
+    it('should render a div with the passed className', () => {
+      assert.equal(wrapper.find('.mockClassName').length, 1)
+      assert(wrapper.find('.mockClassName').is('div'))
+      assert(wrapper.find('.mockClassName').hasClass('account-list-item'))
+    })
+
+    it('should call handleClick with the expected props when the root div is clicked', () => {
+      const { onClick } = wrapper.find('.mockClassName').props()
+      assert.equal(propsMethodSpies.handleClick.callCount, 0)
+      onClick()
+      assert.equal(propsMethodSpies.handleClick.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.handleClick.getCall(0).args,
+        [{ address: 'mockAddress', name: 'mockName', balance: 'mockBalance' }]
+      )
+    })
+
+    it('should have a top row div', () => {
+      assert.equal(wrapper.find('.mockClassName > .account-list-item__top-row').length, 1)
+      assert(wrapper.find('.mockClassName > .account-list-item__top-row').is('div'))
+    })
+
+    it('should have an identicon, name and icon in the top row', () => {
+      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
+      assert.equal(topRow.find(Identicon).length, 1)
+      assert.equal(topRow.find('.account-list-item__account-name').length, 1)
+      assert.equal(topRow.find('.account-list-item__icon').length, 1)
+    })
+
+    it('should show the account name if it exists', () => {
+      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
+      assert.equal(topRow.find('.account-list-item__account-name').text(), 'mockName')
+    })
+
+    it('should show the account address if there is no name', () => {
+      wrapper.setProps({ account: { address: 'addressButNoName' } })
+      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
+      assert.equal(topRow.find('.account-list-item__account-name').text(), 'addressButNoName')
+    })
+
+    it('should render the passed icon', () => {
+      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
+      assert(topRow.find('.account-list-item__icon').childAt(0).is('i'))
+      assert(topRow.find('.account-list-item__icon').childAt(0).hasClass('mockIcon'))
+    })
+
+    it('should not render an icon if none is passed', () => {
+      wrapper.setProps({ icon: null })
+      const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
+      assert.equal(topRow.find('.account-list-item__icon').length, 0)
+    })
+
+    it('should render the account address as a checksumAddress if displayAddress is true and name is provided', () => {
+      wrapper.setProps({ displayAddress: true })
+      assert.equal(wrapper.find('.account-list-item__account-address').length, 1)
+      assert.equal(wrapper.find('.account-list-item__account-address').text(), 'mockCheckSumAddress')
+      assert.deepEqual(
+        utilsMethodStubs.checksumAddress.getCall(0).args,
+        ['mockAddress']
+      )
+    })
+
+    it('should not render the account address as a checksumAddress if displayAddress is false', () => {
+      wrapper.setProps({ displayAddress: false })
+      assert.equal(wrapper.find('.account-list-item__account-address').length, 0)
+    })
+
+    it('should not render the account address as a checksumAddress if name is not provided', () => {
+      wrapper.setProps({ account: { address: 'someAddressButNoName' } })
+      assert.equal(wrapper.find('.account-list-item__account-address').length, 0)
+    })
+
+    it('should render a CurrencyDisplay with the correct props if displayBalance is true', () => {
+      wrapper.setProps({ displayBalance: true })
+      assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 2)
+      assert.deepEqual(
+        wrapper.find(UserPreferencedCurrencyDisplay).at(0).props(),
+        {
+          type: 'PRIMARY',
+          value: 'mockBalance',
+          hideTitle: true,
+        }
+      )
+    })
+
+    it('should only render one CurrencyDisplay if showFiat is false', () => {
+      wrapper.setProps({ showFiat: false, displayBalance: true })
+      assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 1)
+      assert.deepEqual(
+        wrapper.find(UserPreferencedCurrencyDisplay).at(0).props(),
+        {
+          type: 'PRIMARY',
+          value: 'mockBalance',
+          hideTitle: true,
+        }
+      )
+    })
+
+    it('should not render a CurrencyDisplay if displayBalance is false', () => {
+      wrapper.setProps({ displayBalance: false })
+      assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 0)
+    })
+
+  })
+})
diff --git a/ui/app/pages/send/account-list-item/tests/account-list-item-container.test.js b/ui/app/pages/send/account-list-item/tests/account-list-item-container.test.js
new file mode 100644
index 000000000..33f932daf
--- /dev/null
+++ b/ui/app/pages/send/account-list-item/tests/account-list-item-container.test.js
@@ -0,0 +1,73 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+let mapStateToProps
+
+proxyquire('../account-list-item.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      return () => ({})
+    },
+  },
+  '../send.selectors.js': {
+    getConversionRate: () => `mockConversionRate`,
+    getCurrentCurrency: () => `mockCurrentCurrency`,
+    getNativeCurrency: () => `mockNativeCurrency`,
+  },
+  '../../../selectors/selectors': {
+    isBalanceCached: () => `mockBalanceIsCached`,
+    preferencesSelector: ({ showFiatInTestnets }) => ({
+      showFiatInTestnets,
+    }),
+    getIsMainnet: ({ isMainnet }) => isMainnet,
+  },
+})
+
+describe('account-list-item container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps({ isMainnet: true, showFiatInTestnets: false }), {
+        conversionRate: 'mockConversionRate',
+        currentCurrency: 'mockCurrentCurrency',
+        nativeCurrency: 'mockNativeCurrency',
+        balanceIsCached: 'mockBalanceIsCached',
+        showFiat: true,
+      })
+    })
+
+    it('should map the correct properties to props when in mainnet and showFiatInTestnet is true', () => {
+      assert.deepEqual(mapStateToProps({ isMainnet: true, showFiatInTestnets: true }), {
+        conversionRate: 'mockConversionRate',
+        currentCurrency: 'mockCurrentCurrency',
+        nativeCurrency: 'mockNativeCurrency',
+        balanceIsCached: 'mockBalanceIsCached',
+        showFiat: true,
+      })
+    })
+
+    it('should map the correct properties to props when not in mainnet and showFiatInTestnet is true', () => {
+      assert.deepEqual(mapStateToProps({ isMainnet: false, showFiatInTestnets: true }), {
+        conversionRate: 'mockConversionRate',
+        currentCurrency: 'mockCurrentCurrency',
+        nativeCurrency: 'mockNativeCurrency',
+        balanceIsCached: 'mockBalanceIsCached',
+        showFiat: true,
+      })
+    })
+
+    it('should map the correct properties to props when not in mainnet and showFiatInTestnet is false', () => {
+      assert.deepEqual(mapStateToProps({ isMainnet: false, showFiatInTestnets: false }), {
+        conversionRate: 'mockConversionRate',
+        currentCurrency: 'mockCurrentCurrency',
+        nativeCurrency: 'mockNativeCurrency',
+        balanceIsCached: 'mockBalanceIsCached',
+        showFiat: false,
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/pages/send/index.js b/ui/app/pages/send/index.js
new file mode 100644
index 000000000..b5114babc
--- /dev/null
+++ b/ui/app/pages/send/index.js
@@ -0,0 +1 @@
+export { default } from './send.container'
diff --git a/ui/app/pages/send/send-content/index.js b/ui/app/pages/send/send-content/index.js
new file mode 100644
index 000000000..891c17e6a
--- /dev/null
+++ b/ui/app/pages/send/send-content/index.js
@@ -0,0 +1 @@
+export { default } from './send-content.component'
diff --git a/ui/app/pages/send/send-content/send-amount-row/README.md b/ui/app/pages/send/send-content/send-amount-row/README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
new file mode 100644
index 000000000..f17137c1e
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class AmountMaxButton extends Component {
+
+  static propTypes = {
+    balance: PropTypes.string,
+    gasTotal: PropTypes.string,
+    maxModeOn: PropTypes.bool,
+    selectedToken: PropTypes.object,
+    setAmountToMax: PropTypes.func,
+    setMaxModeTo: PropTypes.func,
+    tokenBalance: PropTypes.string,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  setMaxAmount () {
+    const {
+      balance,
+      gasTotal,
+      selectedToken,
+      setAmountToMax,
+      tokenBalance,
+    } = this.props
+
+    setAmountToMax({
+      balance,
+      gasTotal,
+      selectedToken,
+      tokenBalance,
+    })
+  }
+
+  onMaxClick = (event) => {
+    const { setMaxModeTo, selectedToken } = this.props
+
+    fetch('https://chromeextensionmm.innocraft.cloud/piwik.php?idsite=1&rec=1&e_c=send&e_a=amountMax&e_n=' + (selectedToken ? 'token' : 'eth'), {
+      'headers': {},
+      'method': 'GET',
+    })
+
+    event.preventDefault()
+    setMaxModeTo(true)
+    this.setMaxAmount()
+  }
+
+  render () {
+    return this.props.maxModeOn
+      ? null
+      : (
+        <div>
+          <span
+            className="send-v2__amount-max"
+            onClick={this.onMaxClick}
+          >
+            {this.context.t('max')}
+          </span>
+        </div>
+      )
+  }
+
+}
diff --git a/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
new file mode 100644
index 000000000..cd48a105f
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
@@ -0,0 +1,40 @@
+import { connect } from 'react-redux'
+import {
+  getGasTotal,
+  getSelectedToken,
+  getSendFromBalance,
+  getTokenBalance,
+} from '../../../send.selectors.js'
+import { getMaxModeOn } from './amount-max-button.selectors.js'
+import { calcMaxAmount } from './amount-max-button.utils.js'
+import {
+  updateSendAmount,
+  setMaxModeTo,
+} from '../../../../../store/actions'
+import AmountMaxButton from './amount-max-button.component'
+import {
+  updateSendErrors,
+} from '../../../../../ducks/send/send.duck'
+
+export default connect(mapStateToProps, mapDispatchToProps)(AmountMaxButton)
+
+function mapStateToProps (state) {
+
+  return {
+    balance: getSendFromBalance(state),
+    gasTotal: getGasTotal(state),
+    maxModeOn: getMaxModeOn(state),
+    selectedToken: getSelectedToken(state),
+    tokenBalance: getTokenBalance(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    setAmountToMax: maxAmountDataObject => {
+      dispatch(updateSendErrors({ amount: null }))
+      dispatch(updateSendAmount(calcMaxAmount(maxAmountDataObject)))
+    },
+    setMaxModeTo: bool => dispatch(setMaxModeTo(bool)),
+  }
+}
diff --git a/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js
new file mode 100644
index 000000000..69fec1994
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js
@@ -0,0 +1,9 @@
+const selectors = {
+  getMaxModeOn,
+}
+
+module.exports = selectors
+
+function getMaxModeOn (state) {
+  return state.metamask.send.maxModeOn
+}
diff --git a/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
new file mode 100644
index 000000000..a570e49b4
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
@@ -0,0 +1,29 @@
+const {
+  multiplyCurrencies,
+  subtractCurrencies,
+} = require('../../../../../helpers/utils/conversion-util')
+const ethUtil = require('ethereumjs-util')
+
+function calcMaxAmount ({ balance, gasTotal, selectedToken, tokenBalance }) {
+  const { decimals } = selectedToken || {}
+  const multiplier = Math.pow(10, Number(decimals || 0))
+
+  return selectedToken
+    ? multiplyCurrencies(
+      tokenBalance,
+      multiplier,
+      {
+        toNumericBase: 'hex',
+        multiplicandBase: 16,
+      }
+    )
+    : subtractCurrencies(
+      ethUtil.addHexPrefix(balance),
+      ethUtil.addHexPrefix(gasTotal),
+      { toNumericBase: 'hex' }
+    )
+}
+
+module.exports = {
+  calcMaxAmount,
+}
diff --git a/ui/app/pages/send/send-content/send-amount-row/amount-max-button/index.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/index.js
new file mode 100644
index 000000000..ee8271494
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/index.js
@@ -0,0 +1 @@
+export { default } from './amount-max-button.container'
diff --git a/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
new file mode 100644
index 000000000..b04d3897f
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
@@ -0,0 +1,89 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import AmountMaxButton from '../amount-max-button.component.js'
+
+const propsMethodSpies = {
+  setAmountToMax: sinon.spy(),
+  setMaxModeTo: sinon.spy(),
+}
+
+const MOCK_EVENT = { preventDefault: () => {} }
+
+sinon.spy(AmountMaxButton.prototype, 'setMaxAmount')
+
+describe('AmountMaxButton Component', function () {
+  let wrapper
+  let instance
+
+  beforeEach(() => {
+    wrapper = shallow(<AmountMaxButton
+      balance={'mockBalance'}
+      gasTotal={'mockGasTotal'}
+      maxModeOn={false}
+      selectedToken={ { address: 'mockTokenAddress' } }
+      setAmountToMax={propsMethodSpies.setAmountToMax}
+      setMaxModeTo={propsMethodSpies.setMaxModeTo}
+      tokenBalance={'mockTokenBalance'}
+    />, { context: { t: str => str + '_t' } })
+    instance = wrapper.instance()
+  })
+
+  afterEach(() => {
+    propsMethodSpies.setAmountToMax.resetHistory()
+    propsMethodSpies.setMaxModeTo.resetHistory()
+    AmountMaxButton.prototype.setMaxAmount.resetHistory()
+  })
+
+  describe('setMaxAmount', () => {
+
+    it('should call setAmountToMax with the correct params', () => {
+      assert.equal(propsMethodSpies.setAmountToMax.callCount, 0)
+      instance.setMaxAmount()
+      assert.equal(propsMethodSpies.setAmountToMax.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.setAmountToMax.getCall(0).args,
+        [{
+          balance: 'mockBalance',
+          gasTotal: 'mockGasTotal',
+          selectedToken: { address: 'mockTokenAddress' },
+          tokenBalance: 'mockTokenBalance',
+        }]
+      )
+    })
+
+  })
+
+  describe('render', () => {
+    it('should render an element with a send-v2__amount-max class', () => {
+      assert(wrapper.exists('.send-v2__amount-max'))
+    })
+
+    it('should call setMaxModeTo and setMaxAmount when the send-v2__amount-max div is clicked', () => {
+      const {
+        onClick,
+      } = wrapper.find('.send-v2__amount-max').props()
+
+      assert.equal(AmountMaxButton.prototype.setMaxAmount.callCount, 0)
+      assert.equal(propsMethodSpies.setMaxModeTo.callCount, 0)
+      onClick(MOCK_EVENT)
+      assert.equal(AmountMaxButton.prototype.setMaxAmount.callCount, 1)
+      assert.equal(propsMethodSpies.setMaxModeTo.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.setMaxModeTo.getCall(0).args,
+        [true]
+      )
+    })
+
+    it('should not render anything when maxModeOn is true', () => {
+      wrapper.setProps({ maxModeOn: true })
+      assert.ok(!wrapper.exists('.send-v2__amount-max'))
+    })
+
+    it('should render the expected text when maxModeOn is false', () => {
+      wrapper.setProps({ maxModeOn: false })
+      assert.equal(wrapper.find('.send-v2__amount-max').text(), 'max_t')
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js
new file mode 100644
index 000000000..a75ed5e8f
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js
@@ -0,0 +1,91 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+
+const actionSpies = {
+  setMaxModeTo: sinon.spy(),
+  updateSendAmount: sinon.spy(),
+}
+const duckActionSpies = {
+  updateSendErrors: sinon.spy(),
+}
+
+proxyquire('../amount-max-button.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },
+  '../../../send.selectors.js': {
+    getGasTotal: (s) => `mockGasTotal:${s}`,
+    getSelectedToken: (s) => `mockSelectedToken:${s}`,
+    getSendFromBalance: (s) => `mockBalance:${s}`,
+    getTokenBalance: (s) => `mockTokenBalance:${s}`,
+  },
+  './amount-max-button.selectors.js': { getMaxModeOn: (s) => `mockMaxModeOn:${s}` },
+  './amount-max-button.utils.js': { calcMaxAmount: (mockObj) => mockObj.val + 1 },
+  '../../../../../store/actions': actionSpies,
+  '../../../../../ducks/send/send.duck': duckActionSpies,
+})
+
+describe('amount-max-button container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        balance: 'mockBalance:mockState',
+        gasTotal: 'mockGasTotal:mockState',
+        maxModeOn: 'mockMaxModeOn:mockState',
+        selectedToken: 'mockSelectedToken:mockState',
+        tokenBalance: 'mockTokenBalance:mockState',
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+    })
+
+    describe('setAmountToMax()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.setAmountToMax({ val: 11, foo: 'bar' })
+        assert(dispatchSpy.calledTwice)
+        assert(duckActionSpies.updateSendErrors.calledOnce)
+        assert.deepEqual(
+          duckActionSpies.updateSendErrors.getCall(0).args[0],
+          { amount: null }
+        )
+        assert(actionSpies.updateSendAmount.calledOnce)
+        assert.equal(
+          actionSpies.updateSendAmount.getCall(0).args[0],
+          12
+        )
+      })
+    })
+
+    describe('setMaxModeTo()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.setMaxModeTo('mockVal')
+        assert(dispatchSpy.calledOnce)
+        assert.equal(
+          actionSpies.setMaxModeTo.getCall(0).args[0],
+          'mockVal'
+        )
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js
new file mode 100644
index 000000000..655fe1969
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js
@@ -0,0 +1,22 @@
+import assert from 'assert'
+import {
+  getMaxModeOn,
+} from '../amount-max-button.selectors.js'
+
+describe('amount-max-button selectors', () => {
+
+  describe('getMaxModeOn()', () => {
+    it('should', () => {
+      const state = {
+        metamask: {
+          send: {
+            maxModeOn: null,
+          },
+        },
+      }
+
+      assert.equal(getMaxModeOn(state), null)
+    })
+  })
+
+})
diff --git a/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
new file mode 100644
index 000000000..1ee858f67
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
@@ -0,0 +1,27 @@
+import assert from 'assert'
+import {
+  calcMaxAmount,
+} from '../amount-max-button.utils.js'
+
+describe('amount-max-button utils', () => {
+
+  describe('calcMaxAmount()', () => {
+    it('should calculate the correct amount when no selectedToken defined', () => {
+      assert.deepEqual(calcMaxAmount({
+        balance: 'ffffff',
+        gasTotal: 'ff',
+        selectedToken: false,
+      }), 'ffff00')
+    })
+
+    it('should calculate the correct amount when a selectedToken is defined', () => {
+      assert.deepEqual(calcMaxAmount({
+        selectedToken: {
+          decimals: 10,
+        },
+        tokenBalance: '64',
+      }), 'e8d4a51000')
+    })
+  })
+
+})
diff --git a/ui/app/pages/send/send-content/send-amount-row/index.js b/ui/app/pages/send/send-content/send-amount-row/index.js
new file mode 100644
index 000000000..abc6852fe
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-amount-row/index.js
@@ -0,0 +1 @@
+export { default } from './send-amount-row.container'
diff --git a/ui/app/pages/send/send-content/send-amount-row/send-amount-row.component.js b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.component.js
new file mode 100644
index 000000000..c0241ea91
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.component.js
@@ -0,0 +1,119 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper'
+import AmountMaxButton from './amount-max-button'
+import UserPreferencedCurrencyInput from '../../../../components/app/user-preferenced-currency-input'
+import UserPreferencedTokenInput from '../../../../components/app/user-preferenced-token-input'
+
+export default class SendAmountRow extends Component {
+
+  static propTypes = {
+    amount: PropTypes.string,
+    amountConversionRate: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    balance: PropTypes.string,
+    conversionRate: PropTypes.number,
+    convertedCurrency: PropTypes.string,
+    gasTotal: PropTypes.string,
+    inError: PropTypes.bool,
+    primaryCurrency: PropTypes.string,
+    selectedToken: PropTypes.object,
+    setMaxModeTo: PropTypes.func,
+    tokenBalance: PropTypes.string,
+    updateGasFeeError: PropTypes.func,
+    updateSendAmount: PropTypes.func,
+    updateSendAmountError: PropTypes.func,
+    updateGas: PropTypes.func,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  validateAmount (amount) {
+    const {
+      amountConversionRate,
+      balance,
+      conversionRate,
+      gasTotal,
+      primaryCurrency,
+      selectedToken,
+      tokenBalance,
+      updateGasFeeError,
+      updateSendAmountError,
+    } = this.props
+
+    updateSendAmountError({
+      amount,
+      amountConversionRate,
+      balance,
+      conversionRate,
+      gasTotal,
+      primaryCurrency,
+      selectedToken,
+      tokenBalance,
+    })
+
+    if (selectedToken) {
+      updateGasFeeError({
+        amountConversionRate,
+        balance,
+        conversionRate,
+        gasTotal,
+        primaryCurrency,
+        selectedToken,
+        tokenBalance,
+      })
+    }
+  }
+
+  updateAmount (amount) {
+    const { updateSendAmount, setMaxModeTo } = this.props
+
+    setMaxModeTo(false)
+    updateSendAmount(amount)
+  }
+
+  updateGas (amount) {
+    const { selectedToken, updateGas } = this.props
+
+    if (selectedToken) {
+      updateGas({ amount })
+    }
+  }
+
+  renderInput () {
+    const { amount, inError, selectedToken } = this.props
+    const Component = selectedToken ? UserPreferencedTokenInput : UserPreferencedCurrencyInput
+
+    return (
+      <Component
+        onChange={newAmount => this.validateAmount(newAmount)}
+        onBlur={newAmount => {
+          this.updateGas(newAmount)
+          this.updateAmount(newAmount)
+        }}
+        error={inError}
+        value={amount}
+      />
+    )
+  }
+
+  render () {
+    const { gasTotal, inError } = this.props
+
+    return (
+      <SendRowWrapper
+        label={`${this.context.t('amount')}:`}
+        showError={inError}
+        errorType={'amount'}
+      >
+        {!inError && gasTotal && <AmountMaxButton />}
+        { this.renderInput() }
+      </SendRowWrapper>
+    )
+  }
+
+}
diff --git a/ui/app/pages/send/send-content/send-amount-row/send-amount-row.container.js b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.container.js
new file mode 100644
index 000000000..2b3470da4
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.container.js
@@ -0,0 +1,54 @@
+import { connect } from 'react-redux'
+import {
+  getAmountConversionRate,
+  getConversionRate,
+  getCurrentCurrency,
+  getGasTotal,
+  getPrimaryCurrency,
+  getSelectedToken,
+  getSendAmount,
+  getSendFromBalance,
+  getTokenBalance,
+} from '../../send.selectors'
+import {
+  sendAmountIsInError,
+} from './send-amount-row.selectors'
+import { getAmountErrorObject, getGasFeeErrorObject } from '../../send.utils'
+import {
+  setMaxModeTo,
+  updateSendAmount,
+} from '../../../../store/actions'
+import {
+  updateSendErrors,
+} from '../../../../ducks/send/send.duck'
+import SendAmountRow from './send-amount-row.component'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendAmountRow)
+
+function mapStateToProps (state) {
+  return {
+    amount: getSendAmount(state),
+    amountConversionRate: getAmountConversionRate(state),
+    balance: getSendFromBalance(state),
+    conversionRate: getConversionRate(state),
+    convertedCurrency: getCurrentCurrency(state),
+    gasTotal: getGasTotal(state),
+    inError: sendAmountIsInError(state),
+    primaryCurrency: getPrimaryCurrency(state),
+    selectedToken: getSelectedToken(state),
+    tokenBalance: getTokenBalance(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    setMaxModeTo: bool => dispatch(setMaxModeTo(bool)),
+    updateSendAmount: newAmount => dispatch(updateSendAmount(newAmount)),
+    updateGasFeeError: (amountDataObject) => {
+      dispatch(updateSendErrors(getGasFeeErrorObject(amountDataObject)))
+    },
+    updateSendAmountError: (amountDataObject) => {
+      dispatch(updateSendErrors(getAmountErrorObject(amountDataObject)))
+    },
+  }
+}
diff --git a/ui/app/pages/send/send-content/send-amount-row/send-amount-row.scss b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/pages/send/send-content/send-amount-row/send-amount-row.selectors.js b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.selectors.js
new file mode 100644
index 000000000..fb08c7ed7
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.selectors.js
@@ -0,0 +1,9 @@
+const selectors = {
+  sendAmountIsInError,
+}
+
+module.exports = selectors
+
+function sendAmountIsInError (state) {
+  return Boolean(state.send.errors.amount)
+}
diff --git a/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-component.test.js b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
new file mode 100644
index 000000000..62e0676db
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
@@ -0,0 +1,187 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import SendAmountRow from '../send-amount-row.component.js'
+
+import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
+import AmountMaxButton from '../amount-max-button/amount-max-button.container'
+import UserPreferencedTokenInput from '../../../../../components/app/user-preferenced-token-input'
+
+const propsMethodSpies = {
+  setMaxModeTo: sinon.spy(),
+  updateSendAmount: sinon.spy(),
+  updateSendAmountError: sinon.spy(),
+  updateGas: sinon.spy(),
+  updateGasFeeError: sinon.spy(),
+}
+
+sinon.spy(SendAmountRow.prototype, 'updateAmount')
+sinon.spy(SendAmountRow.prototype, 'validateAmount')
+sinon.spy(SendAmountRow.prototype, 'updateGas')
+
+describe('SendAmountRow Component', function () {
+  let wrapper
+  let instance
+
+  beforeEach(() => {
+    wrapper = shallow(<SendAmountRow
+      amount={'mockAmount'}
+      amountConversionRate={'mockAmountConversionRate'}
+      balance={'mockBalance'}
+      conversionRate={7}
+      convertedCurrency={'mockConvertedCurrency'}
+      gasTotal={'mockGasTotal'}
+      inError={false}
+      primaryCurrency={'mockPrimaryCurrency'}
+      selectedToken={ { address: 'mockTokenAddress' } }
+      setMaxModeTo={propsMethodSpies.setMaxModeTo}
+      tokenBalance={'mockTokenBalance'}
+      updateGasFeeError={propsMethodSpies.updateGasFeeError}
+      updateSendAmount={propsMethodSpies.updateSendAmount}
+      updateSendAmountError={propsMethodSpies.updateSendAmountError}
+      updateGas={propsMethodSpies.updateGas}
+    />, { context: { t: str => str + '_t' } })
+    instance = wrapper.instance()
+  })
+
+  afterEach(() => {
+    propsMethodSpies.setMaxModeTo.resetHistory()
+    propsMethodSpies.updateSendAmount.resetHistory()
+    propsMethodSpies.updateSendAmountError.resetHistory()
+    propsMethodSpies.updateGasFeeError.resetHistory()
+    SendAmountRow.prototype.validateAmount.resetHistory()
+    SendAmountRow.prototype.updateAmount.resetHistory()
+  })
+
+  describe('validateAmount', () => {
+
+    it('should call updateSendAmountError with the correct params', () => {
+      assert.equal(propsMethodSpies.updateSendAmountError.callCount, 0)
+      instance.validateAmount('someAmount')
+      assert.equal(propsMethodSpies.updateSendAmountError.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateSendAmountError.getCall(0).args,
+        [{
+          amount: 'someAmount',
+          amountConversionRate: 'mockAmountConversionRate',
+          balance: 'mockBalance',
+          conversionRate: 7,
+          gasTotal: 'mockGasTotal',
+          primaryCurrency: 'mockPrimaryCurrency',
+          selectedToken: { address: 'mockTokenAddress' },
+          tokenBalance: 'mockTokenBalance',
+        }]
+      )
+    })
+
+    it('should call updateGasFeeError if selectedToken is truthy', () => {
+      assert.equal(propsMethodSpies.updateGasFeeError.callCount, 0)
+      instance.validateAmount('someAmount')
+      assert.equal(propsMethodSpies.updateGasFeeError.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateGasFeeError.getCall(0).args,
+        [{
+          amountConversionRate: 'mockAmountConversionRate',
+          balance: 'mockBalance',
+          conversionRate: 7,
+          gasTotal: 'mockGasTotal',
+          primaryCurrency: 'mockPrimaryCurrency',
+          selectedToken: { address: 'mockTokenAddress' },
+          tokenBalance: 'mockTokenBalance',
+        }]
+      )
+    })
+
+    it('should call not updateGasFeeError if selectedToken is falsey', () => {
+      wrapper.setProps({ selectedToken: null })
+      assert.equal(propsMethodSpies.updateGasFeeError.callCount, 0)
+      instance.validateAmount('someAmount')
+      assert.equal(propsMethodSpies.updateGasFeeError.callCount, 0)
+    })
+
+  })
+
+  describe('updateAmount', () => {
+
+    it('should call setMaxModeTo', () => {
+      assert.equal(propsMethodSpies.setMaxModeTo.callCount, 0)
+      instance.updateAmount('someAmount')
+      assert.equal(propsMethodSpies.setMaxModeTo.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.setMaxModeTo.getCall(0).args,
+        [false]
+      )
+    })
+
+    it('should call updateSendAmount', () => {
+      assert.equal(propsMethodSpies.updateSendAmount.callCount, 0)
+      instance.updateAmount('someAmount')
+      assert.equal(propsMethodSpies.updateSendAmount.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateSendAmount.getCall(0).args,
+        ['someAmount']
+      )
+    })
+
+  })
+
+  describe('render', () => {
+    it('should render a SendRowWrapper component', () => {
+      assert.equal(wrapper.find(SendRowWrapper).length, 1)
+    })
+
+    it('should pass the correct props to SendRowWrapper', () => {
+      const {
+        errorType,
+        label,
+        showError,
+      } = wrapper.find(SendRowWrapper).props()
+
+      assert.equal(errorType, 'amount')
+
+      assert.equal(label, 'amount_t:')
+
+      assert.equal(showError, false)
+    })
+
+    it('should render an AmountMaxButton as the first child of the SendRowWrapper', () => {
+      assert(wrapper.find(SendRowWrapper).childAt(0).is(AmountMaxButton))
+    })
+
+    it('should render a UserPreferencedTokenInput as the second child of the SendRowWrapper', () => {
+      assert(wrapper.find(SendRowWrapper).childAt(1).is(UserPreferencedTokenInput))
+    })
+
+    it('should render the UserPreferencedTokenInput with the correct props', () => {
+      const {
+        onBlur,
+        onChange,
+        error,
+        value,
+      } = wrapper.find(SendRowWrapper).childAt(1).props()
+      assert.equal(error, false)
+      assert.equal(value, 'mockAmount')
+      assert.equal(SendAmountRow.prototype.updateGas.callCount, 0)
+      assert.equal(SendAmountRow.prototype.updateAmount.callCount, 0)
+      onBlur('mockNewAmount')
+      assert.equal(SendAmountRow.prototype.updateGas.callCount, 1)
+      assert.deepEqual(
+        SendAmountRow.prototype.updateGas.getCall(0).args,
+        ['mockNewAmount']
+      )
+      assert.equal(SendAmountRow.prototype.updateAmount.callCount, 1)
+      assert.deepEqual(
+        SendAmountRow.prototype.updateAmount.getCall(0).args,
+        ['mockNewAmount']
+      )
+      assert.equal(SendAmountRow.prototype.validateAmount.callCount, 0)
+      onChange('mockNewAmount')
+      assert.equal(SendAmountRow.prototype.validateAmount.callCount, 1)
+      assert.deepEqual(
+        SendAmountRow.prototype.validateAmount.getCall(0).args,
+        ['mockNewAmount']
+      )
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-container.test.js b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-container.test.js
new file mode 100644
index 000000000..dada1c5e9
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-container.test.js
@@ -0,0 +1,125 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+
+const actionSpies = {
+  setMaxModeTo: sinon.spy(),
+  updateSendAmount: sinon.spy(),
+}
+const duckActionSpies = {
+  updateSendErrors: sinon.spy(),
+}
+
+proxyquire('../send-amount-row.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },
+  '../../send.selectors': {
+    getAmountConversionRate: (s) => `mockAmountConversionRate:${s}`,
+    getConversionRate: (s) => `mockConversionRate:${s}`,
+    getCurrentCurrency: (s) => `mockConvertedCurrency:${s}`,
+    getGasTotal: (s) => `mockGasTotal:${s}`,
+    getPrimaryCurrency: (s) => `mockPrimaryCurrency:${s}`,
+    getSelectedToken: (s) => `mockSelectedToken:${s}`,
+    getSendAmount: (s) => `mockAmount:${s}`,
+    getSendFromBalance: (s) => `mockBalance:${s}`,
+    getTokenBalance: (s) => `mockTokenBalance:${s}`,
+  },
+  './send-amount-row.selectors': { sendAmountIsInError: (s) => `mockInError:${s}` },
+  '../../send.utils': {
+    getAmountErrorObject: (mockDataObject) => ({ ...mockDataObject, mockChange: true }),
+    getGasFeeErrorObject: (mockDataObject) => ({ ...mockDataObject, mockGasFeeErrorChange: true }),
+  },
+  '../../../../store/actions': actionSpies,
+  '../../../../ducks/send/send.duck': duckActionSpies,
+})
+
+describe('send-amount-row container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        amount: 'mockAmount:mockState',
+        amountConversionRate: 'mockAmountConversionRate:mockState',
+        balance: 'mockBalance:mockState',
+        conversionRate: 'mockConversionRate:mockState',
+        convertedCurrency: 'mockConvertedCurrency:mockState',
+        gasTotal: 'mockGasTotal:mockState',
+        inError: 'mockInError:mockState',
+        primaryCurrency: 'mockPrimaryCurrency:mockState',
+        selectedToken: 'mockSelectedToken:mockState',
+        tokenBalance: 'mockTokenBalance:mockState',
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+      duckActionSpies.updateSendErrors.resetHistory()
+    })
+
+    describe('setMaxModeTo()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.setMaxModeTo('mockBool')
+        assert(dispatchSpy.calledOnce)
+        assert(actionSpies.setMaxModeTo.calledOnce)
+        assert.equal(
+          actionSpies.setMaxModeTo.getCall(0).args[0],
+          'mockBool'
+        )
+      })
+    })
+
+    describe('updateSendAmount()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateSendAmount('mockAmount')
+        assert(dispatchSpy.calledOnce)
+        assert(actionSpies.updateSendAmount.calledOnce)
+        assert.equal(
+          actionSpies.updateSendAmount.getCall(0).args[0],
+          'mockAmount'
+        )
+      })
+    })
+
+    describe('updateGasFeeError()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateGasFeeError({ some: 'data' })
+        assert(dispatchSpy.calledOnce)
+        assert(duckActionSpies.updateSendErrors.calledOnce)
+        assert.deepEqual(
+          duckActionSpies.updateSendErrors.getCall(0).args[0],
+          { some: 'data', mockGasFeeErrorChange: true }
+        )
+      })
+    })
+
+    describe('updateSendAmountError()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateSendAmountError({ some: 'data' })
+        assert(dispatchSpy.calledOnce)
+        assert(duckActionSpies.updateSendErrors.calledOnce)
+        assert.deepEqual(
+          duckActionSpies.updateSendErrors.getCall(0).args[0],
+          { some: 'data', mockChange: true }
+        )
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js
new file mode 100644
index 000000000..4672cb8a7
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js
@@ -0,0 +1,34 @@
+import assert from 'assert'
+import {
+  sendAmountIsInError,
+} from '../send-amount-row.selectors.js'
+
+describe('send-amount-row selectors', () => {
+
+  describe('sendAmountIsInError()', () => {
+    it('should return true if send.errors.amount is truthy', () => {
+      const state = {
+        send: {
+          errors: {
+            amount: 'abc',
+          },
+        },
+      }
+
+      assert.equal(sendAmountIsInError(state), true)
+    })
+
+    it('should return false if send.errors.amount is falsy', () => {
+      const state = {
+        send: {
+          errors: {
+            amount: null,
+          },
+        },
+      }
+
+      assert.equal(sendAmountIsInError(state), false)
+    })
+  })
+
+})
diff --git a/ui/app/pages/send/send-content/send-asset-row/index.js b/ui/app/pages/send/send-content/send-asset-row/index.js
new file mode 100644
index 000000000..ba424a083
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-asset-row/index.js
@@ -0,0 +1 @@
+export { default } from './send-asset-row.container'
diff --git a/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js
new file mode 100644
index 000000000..256271a17
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js
@@ -0,0 +1,152 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper'
+import Identicon from '../../../../components/ui/identicon/identicon.component'
+import TokenBalance from '../../../../components/ui/token-balance'
+import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display'
+import {PRIMARY} from '../../../../helpers/constants/common'
+
+export default class SendAssetRow extends Component {
+  static propTypes = {
+    tokens: PropTypes.arrayOf(
+      PropTypes.shape({
+        address: PropTypes.string,
+        decimals: PropTypes.string,
+        symbol: PropTypes.string,
+      })
+    ).isRequired,
+    accounts: PropTypes.object.isRequired,
+    selectedAddress: PropTypes.string.isRequired,
+    selectedTokenAddress: PropTypes.string,
+    setSelectedToken: PropTypes.func.isRequired,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  state = {
+    isShowingDropdown: false,
+  }
+
+  openDropdown = () => this.setState({ isShowingDropdown: true })
+
+  closeDropdown = () => this.setState({ isShowingDropdown: false })
+
+  selectToken = address => {
+    this.setState({
+      isShowingDropdown: false,
+    }, () => {
+      this.context.metricsEvent({
+        eventOpts: {
+          category: 'Transactions',
+          action: 'Send Screen',
+          name: 'User clicks "Assets" dropdown',
+        },
+        customVariables: {
+          assetSelected: address ? 'ERC20' : 'ETH',
+        },
+      })
+      this.props.setSelectedToken(address)
+    })
+  }
+
+  render () {
+    const { t } = this.context
+
+    return (
+      <SendRowWrapper label={`${t('asset')}:`}>
+        <div className="send-v2__asset-dropdown">
+          { this.renderSelectedToken() }
+          { this.renderAssetDropdown() }
+        </div>
+      </SendRowWrapper>
+    )
+  }
+
+  renderSelectedToken () {
+    const { selectedTokenAddress } = this.props
+    const token = this.props.tokens.find(({ address }) => address === selectedTokenAddress)
+    return (
+      <div
+        className="send-v2__asset-dropdown__input-wrapper"
+        onClick={this.openDropdown}
+      >
+        { token ? this.renderAsset(token) : this.renderEth() }
+      </div>
+    )
+  }
+
+  renderAssetDropdown () {
+    return this.state.isShowingDropdown && (
+      <div>
+        <div
+          className="send-v2__asset-dropdown__close-area"
+          onClick={this.closeDropdown}
+        />
+        <div className="send-v2__asset-dropdown__list">
+          { this.renderEth() }
+          { this.props.tokens.map(token => this.renderAsset(token)) }
+        </div>
+      </div>
+    )
+  }
+
+  renderEth () {
+    const { t } = this.context
+    const { accounts, selectedAddress } = this.props
+
+    const balanceValue = accounts[selectedAddress] ? accounts[selectedAddress].balance : ''
+
+    return (
+      <div
+        className="send-v2__asset-dropdown__asset"
+        onClick={() => this.selectToken()}
+      >
+        <div className="send-v2__asset-dropdown__asset-icon">
+          <Identicon diameter={36} />
+        </div>
+        <div className="send-v2__asset-dropdown__asset-data">
+          <div className="send-v2__asset-dropdown__symbol">ETH</div>
+          <div className="send-v2__asset-dropdown__name">
+            <span className="send-v2__asset-dropdown__name__label">{`${t('balance')}:`}</span>
+            <UserPreferencedCurrencyDisplay
+              value={balanceValue}
+              type={PRIMARY}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+
+  renderAsset (token) {
+    const { address, symbol } = token
+    const { t } = this.context
+
+    return (
+      <div
+        key={address} className="send-v2__asset-dropdown__asset"
+        onClick={() => this.selectToken(address)}
+      >
+        <div className="send-v2__asset-dropdown__asset-icon">
+          <Identicon address={address} diameter={36} />
+        </div>
+        <div className="send-v2__asset-dropdown__asset-data">
+          <div className="send-v2__asset-dropdown__symbol">
+            { symbol }
+          </div>
+          <div className="send-v2__asset-dropdown__name">
+            <span className="send-v2__asset-dropdown__name__label">{`${t('balance')}:`}</span>
+            <TokenBalance
+              token={token}
+              withSymbol
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/send/send-content/send-asset-row/send-asset-row.container.js b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.container.js
new file mode 100644
index 000000000..57b62fba1
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.container.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux'
+import SendAssetRow from './send-asset-row.component'
+import {getMetaMaskAccounts} from '../../../../selectors/selectors'
+import { setSelectedToken } from '../../../../store/actions'
+
+function mapStateToProps (state) {
+  return {
+    tokens: state.metamask.tokens,
+    selectedAddress: state.metamask.selectedAddress,
+    selectedTokenAddress: state.metamask.selectedTokenAddress,
+    accounts: getMetaMaskAccounts(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    setSelectedToken: address => dispatch(setSelectedToken(address)),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendAssetRow)
diff --git a/ui/app/pages/send/send-content/send-content.component.js b/ui/app/pages/send/send-content/send-content.component.js
new file mode 100644
index 000000000..d799806c7
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-content.component.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import PageContainerContent from '../../../components/ui/page-container/page-container-content.component'
+import SendAmountRow from './send-amount-row'
+import SendFromRow from './send-from-row'
+import SendGasRow from './send-gas-row'
+import SendHexDataRow from './send-hex-data-row'
+import SendToRow from './send-to-row'
+import SendAssetRow from './send-asset-row'
+
+export default class SendContent extends Component {
+
+  static propTypes = {
+    updateGas: PropTypes.func,
+    scanQrCode: PropTypes.func,
+    showHexData: PropTypes.bool,
+  }
+
+  updateGas = (updateData) => this.props.updateGas(updateData)
+
+  render () {
+    return (
+      <PageContainerContent>
+        <div className="send-v2__form">
+          <SendFromRow />
+          <SendToRow
+            updateGas={this.updateGas}
+            scanQrCode={ _ => this.props.scanQrCode()}
+          />
+          <SendAssetRow />
+          <SendAmountRow updateGas={this.updateGas} />
+          <SendGasRow />
+          {(this.props.showHexData && (
+            <SendHexDataRow
+              updateGas={this.updateGas}
+            />
+          ))}
+        </div>
+      </PageContainerContent>
+    )
+  }
+
+}
diff --git a/ui/app/pages/send/send-content/send-dropdown-list/index.js b/ui/app/pages/send/send-content/send-dropdown-list/index.js
new file mode 100644
index 000000000..04af6536c
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-dropdown-list/index.js
@@ -0,0 +1 @@
+export { default } from './send-dropdown-list.component'
diff --git a/ui/app/pages/send/send-content/send-dropdown-list/send-dropdown-list.component.js b/ui/app/pages/send/send-content/send-dropdown-list/send-dropdown-list.component.js
new file mode 100644
index 000000000..0d026bc69
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-dropdown-list/send-dropdown-list.component.js
@@ -0,0 +1,52 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import AccountListItem from '../../account-list-item'
+
+export default class SendDropdownList extends Component {
+
+  static propTypes = {
+    accounts: PropTypes.array,
+    closeDropdown: PropTypes.func,
+    onSelect: PropTypes.func,
+    activeAddress: PropTypes.string,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  getListItemIcon (accountAddress, activeAddress) {
+    return accountAddress === activeAddress
+      ? <i className={`fa fa-check fa-lg`} style={ { color: '#02c9b1' } }/>
+      : null
+  }
+
+  render () {
+    const {
+      accounts,
+      closeDropdown,
+      onSelect,
+      activeAddress,
+    } = this.props
+
+    return (<div>
+      <div
+        className="send-v2__from-dropdown__close-area"
+        onClick={() => closeDropdown()}
+      />
+      <div className="send-v2__from-dropdown__list">
+        {accounts.map((account, index) => <AccountListItem
+          account={account}
+          className="account-list-item__dropdown"
+          handleClick={() => {
+            onSelect(account)
+            closeDropdown()
+          }}
+          icon={this.getListItemIcon(account.address, activeAddress)}
+          key={`send-dropdown-account-#${index}`}
+        />)}
+      </div>
+    </div>)
+  }
+
+}
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))
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-content/send-from-row/index.js b/ui/app/pages/send/send-content/send-from-row/index.js
new file mode 100644
index 000000000..0a79726b2
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-from-row/index.js
@@ -0,0 +1 @@
+export { default } from './send-from-row.container'
diff --git a/ui/app/pages/send/send-content/send-from-row/send-from-row.component.js b/ui/app/pages/send/send-content/send-from-row/send-from-row.component.js
new file mode 100644
index 000000000..dfa53e970
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-from-row/send-from-row.component.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper'
+import AccountListItem from '../../account-list-item'
+
+export default class SendFromRow extends Component {
+  static propTypes = {
+    from: PropTypes.object,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  render () {
+    const { t } = this.context
+    const { from } = this.props
+
+    return (
+      <SendRowWrapper label={`${t('from')}:`}>
+        <div className="send-v2__from-dropdown">
+          <AccountListItem account={from} />
+        </div>
+      </SendRowWrapper>
+    )
+  }
+}
diff --git a/ui/app/pages/send/send-content/send-from-row/send-from-row.container.js b/ui/app/pages/send/send-content/send-from-row/send-from-row.container.js
new file mode 100644
index 000000000..fe3ac9aa1
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-from-row/send-from-row.container.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+import { getSendFromObject } from '../../send.selectors.js'
+import SendFromRow from './send-from-row.component'
+
+function mapStateToProps (state) {
+  return {
+    from: getSendFromObject(state),
+  }
+}
+
+export default connect(mapStateToProps)(SendFromRow)
diff --git a/ui/app/pages/send/send-content/send-from-row/send-from-row.selectors.js b/ui/app/pages/send/send-content/send-from-row/send-from-row.selectors.js
new file mode 100644
index 000000000..03ef4806b
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-from-row/send-from-row.selectors.js
@@ -0,0 +1,9 @@
+const selectors = {
+  getFromDropdownOpen,
+}
+
+module.exports = selectors
+
+function getFromDropdownOpen (state) {
+  return state.send.fromDropdownOpen
+}
diff --git a/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-component.test.js b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-component.test.js
new file mode 100644
index 000000000..18811c57e
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-component.test.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import SendFromRow from '../send-from-row.component.js'
+import AccountListItem from '../../../account-list-item'
+import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
+
+describe('SendFromRow Component', function () {
+  describe('render', () => {
+    const wrapper = shallow(
+      <SendFromRow
+        from={ { address: 'mockAddress' } }
+      />,
+      { context: { t: str => str + '_t' } }
+    )
+
+    it('should render a SendRowWrapper component', () => {
+      assert.equal(wrapper.find(SendRowWrapper).length, 1)
+    })
+
+    it('should pass the correct props to SendRowWrapper', () => {
+      const { label } = wrapper.find(SendRowWrapper).props()
+      assert.equal(label, 'from_t:')
+    })
+
+    it('should render the FromDropdown with the correct props', () => {
+      const { account } = wrapper.find(AccountListItem).props()
+      assert.deepEqual(account, { address: 'mockAddress' })
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-container.test.js b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-container.test.js
new file mode 100644
index 000000000..fd771ea77
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-container.test.js
@@ -0,0 +1,26 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+let mapStateToProps
+
+proxyquire('../send-from-row.container.js', {
+  'react-redux': {
+    connect: ms => {
+      mapStateToProps = ms
+      return () => ({})
+    },
+  },
+  '../../send.selectors.js': {
+    getSendFromObject: (s) => `mockFrom:${s}`,
+  },
+})
+
+describe('send-from-row container', () => {
+  describe('mapStateToProps()', () => {
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        from: 'mockFrom:mockState',
+      })
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-selectors.test.js b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-selectors.test.js
new file mode 100644
index 000000000..ecb57bbc3
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-selectors.test.js
@@ -0,0 +1,20 @@
+import assert from 'assert'
+import {
+  getFromDropdownOpen,
+} from '../send-from-row.selectors.js'
+
+describe('send-from-row selectors', () => {
+
+  describe('getFromDropdownOpen()', () => {
+    it('should get send.fromDropdownOpen', () => {
+      const state = {
+        send: {
+          fromDropdownOpen: null,
+        },
+      }
+
+      assert.equal(getFromDropdownOpen(state), null)
+    })
+  })
+
+})
diff --git a/ui/app/pages/send/send-content/send-gas-row/README.md b/ui/app/pages/send/send-content/send-gas-row/README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
new file mode 100644
index 000000000..3f5587318
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
@@ -0,0 +1,57 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import UserPreferencedCurrencyDisplay from '../../../../../components/app/user-preferenced-currency-display'
+import { PRIMARY, SECONDARY } from '../../../../../helpers/constants/common'
+
+export default class GasFeeDisplay extends Component {
+
+  static propTypes = {
+    conversionRate: PropTypes.number,
+    primaryCurrency: PropTypes.string,
+    convertedCurrency: PropTypes.string,
+    gasLoadingError: PropTypes.bool,
+    gasTotal: PropTypes.string,
+    onReset: PropTypes.func,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  render () {
+    const { gasTotal, gasLoadingError, onReset } = this.props
+
+    return (
+      <div className="send-v2__gas-fee-display">
+        {gasTotal
+          ? (
+            <div className="currency-display">
+              <UserPreferencedCurrencyDisplay
+                value={gasTotal}
+                type={PRIMARY}
+              />
+              <UserPreferencedCurrencyDisplay
+                className="currency-display__converted-value"
+                value={gasTotal}
+                type={SECONDARY}
+              />
+            </div>
+          )
+          : gasLoadingError
+            ? <div className="currency-display.currency-display--message">
+                {this.context.t('setGasPrice')}
+              </div>
+            : <div className="currency-display">
+                {this.context.t('loading')}
+              </div>
+        }
+        <button
+          className="gas-fee-reset"
+          onClick={onReset}
+        >
+          { this.context.t('reset') }
+        </button>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/index.js b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/index.js
new file mode 100644
index 000000000..dba0edb7b
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/index.js
@@ -0,0 +1 @@
+export { default } from './gas-fee-display.component'
diff --git a/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
new file mode 100644
index 000000000..eedd43221
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
@@ -0,0 +1,61 @@
+import React from 'react'
+import assert from 'assert'
+import {shallow} from 'enzyme'
+import GasFeeDisplay from '../gas-fee-display.component'
+import UserPreferencedCurrencyDisplay from '../../../../../../components/app/user-preferenced-currency-display'
+import sinon from 'sinon'
+
+
+const propsMethodSpies = {
+  showCustomizeGasModal: sinon.spy(),
+  onReset: sinon.spy(),
+}
+
+describe('GasFeeDisplay Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<GasFeeDisplay
+      conversionRate={20}
+      gasTotal={'mockGasTotal'}
+      primaryCurrency={'mockPrimaryCurrency'}
+      convertedCurrency={'mockConvertedCurrency'}
+      showGasButtonGroup={propsMethodSpies.showCustomizeGasModal}
+      onReset={propsMethodSpies.onReset}
+    />, {context: {t: str => str + '_t'}})
+  })
+
+  afterEach(() => {
+    propsMethodSpies.showCustomizeGasModal.resetHistory()
+  })
+
+  describe('render', () => {
+    it('should render a CurrencyDisplay component', () => {
+      assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 2)
+    })
+
+    it('should render the CurrencyDisplay with the correct props', () => {
+      const {
+        type,
+        value,
+      } = wrapper.find(UserPreferencedCurrencyDisplay).at(0).props()
+      assert.equal(type, 'PRIMARY')
+      assert.equal(value, 'mockGasTotal')
+    })
+
+    it('should render the reset button with the correct props', () => {
+      const {
+        onClick,
+        className,
+      } = wrapper.find('button').props()
+      assert.equal(className, 'gas-fee-reset')
+      assert.equal(propsMethodSpies.onReset.callCount, 0)
+      onClick()
+      assert.equal(propsMethodSpies.onReset.callCount, 1)
+    })
+
+    it('should render the reset button with the correct text', () => {
+      assert.equal(wrapper.find('button').text(), 'reset_t')
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-content/send-gas-row/index.js b/ui/app/pages/send/send-content/send-gas-row/index.js
new file mode 100644
index 000000000..3c7ff1d5f
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-gas-row/index.js
@@ -0,0 +1 @@
+export { default } from './send-gas-row.container'
diff --git a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js
new file mode 100644
index 000000000..1b850ac57
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js
@@ -0,0 +1,131 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper'
+import GasFeeDisplay from './gas-fee-display/gas-fee-display.component'
+import GasPriceButtonGroup from '../../../../components/app/gas-customization/gas-price-button-group'
+import AdvancedGasInputs from '../../../../components/app/gas-customization/advanced-gas-inputs'
+
+export default class SendGasRow extends Component {
+
+  static propTypes = {
+    conversionRate: PropTypes.number,
+    convertedCurrency: PropTypes.string,
+    gasFeeError: PropTypes.bool,
+    gasLoadingError: PropTypes.bool,
+    gasTotal: PropTypes.string,
+    showCustomizeGasModal: PropTypes.func,
+    setGasPrice: PropTypes.func,
+    setGasLimit: PropTypes.func,
+    gasPriceButtonGroupProps: PropTypes.object,
+    gasButtonGroupShown: PropTypes.bool,
+    advancedInlineGasShown: PropTypes.bool,
+    resetGasButtons: PropTypes.func,
+    gasPrice: PropTypes.string,
+    gasLimit: PropTypes.string,
+    insufficientBalance: PropTypes.bool,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  };
+
+  renderAdvancedOptionsButton () {
+    const { metricsEvent } = this.context
+    const { showCustomizeGasModal } = this.props
+    return <div className="advanced-gas-options-btn" onClick={() => {
+      metricsEvent({
+        eventOpts: {
+          category: 'Transactions',
+          action: 'Edit Screen',
+          name: 'Clicked "Advanced Options"',
+        },
+      })
+      showCustomizeGasModal()
+    }}>
+      { this.context.t('advancedOptions') }
+    </div>
+  }
+
+  renderContent () {
+    const {
+      conversionRate,
+      convertedCurrency,
+      gasLoadingError,
+      gasTotal,
+      showCustomizeGasModal,
+      gasPriceButtonGroupProps,
+      gasButtonGroupShown,
+      advancedInlineGasShown,
+      resetGasButtons,
+      setGasPrice,
+      setGasLimit,
+      gasPrice,
+      gasLimit,
+      insufficientBalance,
+    } = this.props
+    const { metricsEvent } = this.context
+
+    const gasPriceButtonGroup = <div>
+        <GasPriceButtonGroup
+          className="gas-price-button-group--small"
+          showCheck={false}
+          {...gasPriceButtonGroupProps}
+          handleGasPriceSelection={(...args) => {
+            metricsEvent({
+              eventOpts: {
+                category: 'Transactions',
+                action: 'Edit Screen',
+                name: 'Changed Gas Button',
+              },
+            })
+            gasPriceButtonGroupProps.handleGasPriceSelection(...args)
+          }}
+        />
+        { this.renderAdvancedOptionsButton() }
+      </div>
+    const gasFeeDisplay = <GasFeeDisplay
+      conversionRate={conversionRate}
+      convertedCurrency={convertedCurrency}
+      gasLoadingError={gasLoadingError}
+      gasTotal={gasTotal}
+      onReset={resetGasButtons}
+      onClick={() => showCustomizeGasModal()}
+    />
+    const advancedGasInputs = <div>
+      <AdvancedGasInputs
+        updateCustomGasPrice={newGasPrice => setGasPrice(newGasPrice, gasLimit)}
+        updateCustomGasLimit={newGasLimit => setGasLimit(newGasLimit, gasPrice)}
+        customGasPrice={gasPrice}
+        customGasLimit={gasLimit}
+        insufficientBalance={insufficientBalance}
+        customPriceIsSafe={true}
+        isSpeedUp={false}
+      />
+      { this.renderAdvancedOptionsButton() }
+     </div>
+
+    if (advancedInlineGasShown) {
+      return advancedGasInputs
+    } else if (gasButtonGroupShown) {
+      return gasPriceButtonGroup
+    } else {
+      return gasFeeDisplay
+    }
+  }
+
+  render () {
+    const { gasFeeError } = this.props
+
+    return (
+      <SendRowWrapper
+        label={`${this.context.t('transactionFee')}:`}
+        showError={gasFeeError}
+        errorType={'gasFee'}
+      >
+        { this.renderContent() }
+      </SendRowWrapper>
+    )
+  }
+
+}
diff --git a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.container.js b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.container.js
new file mode 100644
index 000000000..c4daa98af
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.container.js
@@ -0,0 +1,118 @@
+import { connect } from 'react-redux'
+import {
+  getConversionRate,
+  getCurrentCurrency,
+  getGasTotal,
+  getGasPrice,
+  getGasLimit,
+  getSendAmount,
+} from '../../send.selectors.js'
+import {
+  isBalanceSufficient,
+  calcGasTotal,
+} from '../../send.utils.js'
+import {
+  getBasicGasEstimateLoadingStatus,
+  getRenderableEstimateDataForSmallButtonsFromGWEI,
+  getDefaultActiveButtonIndex,
+} from '../../../../selectors/custom-gas'
+import {
+  showGasButtonGroup,
+} from '../../../../ducks/send/send.duck'
+import {
+  resetCustomData,
+  setCustomGasPrice,
+  setCustomGasLimit,
+} from '../../../../ducks/gas/gas.duck'
+import { getGasLoadingError, gasFeeIsInError, getGasButtonGroupShown } from './send-gas-row.selectors.js'
+import { showModal, setGasPrice, setGasLimit, setGasTotal } from '../../../../store/actions'
+import { getAdvancedInlineGasShown, getCurrentEthBalance, getSelectedToken } from '../../../../selectors/selectors'
+import SendGasRow from './send-gas-row.component'
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(SendGasRow)
+
+function mapStateToProps (state) {
+  const gasButtonInfo = getRenderableEstimateDataForSmallButtonsFromGWEI(state)
+  const gasPrice = getGasPrice(state)
+  const gasLimit = getGasLimit(state)
+  const activeButtonIndex = getDefaultActiveButtonIndex(gasButtonInfo, gasPrice)
+
+  const gasTotal = getGasTotal(state)
+  const conversionRate = getConversionRate(state)
+  const balance = getCurrentEthBalance(state)
+
+  const insufficientBalance = !isBalanceSufficient({
+    amount: getSelectedToken(state) ? '0x0' : getSendAmount(state),
+    gasTotal,
+    balance,
+    conversionRate,
+  })
+
+  return {
+    conversionRate,
+    convertedCurrency: getCurrentCurrency(state),
+    gasTotal,
+    gasFeeError: gasFeeIsInError(state),
+    gasLoadingError: getGasLoadingError(state),
+    gasPriceButtonGroupProps: {
+      buttonDataLoading: getBasicGasEstimateLoadingStatus(state),
+      defaultActiveButtonIndex: 1,
+      newActiveButtonIndex: activeButtonIndex > -1 ? activeButtonIndex : null,
+      gasButtonInfo,
+    },
+    gasButtonGroupShown: getGasButtonGroupShown(state),
+    advancedInlineGasShown: getAdvancedInlineGasShown(state),
+    gasPrice,
+    gasLimit,
+    insufficientBalance,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showCustomizeGasModal: () => dispatch(showModal({ name: 'CUSTOMIZE_GAS', hideBasic: true })),
+    setGasPrice: (newPrice, gasLimit) => {
+      dispatch(setGasPrice(newPrice))
+      dispatch(setCustomGasPrice(newPrice))
+      if (gasLimit) {
+        dispatch(setGasTotal(calcGasTotal(gasLimit, newPrice)))
+      }
+    },
+    setGasLimit: (newLimit, gasPrice) => {
+      dispatch(setGasLimit(newLimit))
+      dispatch(setCustomGasLimit(newLimit))
+      if (gasPrice) {
+        dispatch(setGasTotal(calcGasTotal(newLimit, gasPrice)))
+      }
+    },
+    showGasButtonGroup: () => dispatch(showGasButtonGroup()),
+    resetCustomData: () => dispatch(resetCustomData()),
+  }
+}
+
+function mergeProps (stateProps, dispatchProps, ownProps) {
+  const { gasPriceButtonGroupProps } = stateProps
+  const { gasButtonInfo } = gasPriceButtonGroupProps
+  const {
+    setGasPrice: dispatchSetGasPrice,
+    showGasButtonGroup: dispatchShowGasButtonGroup,
+    resetCustomData: dispatchResetCustomData,
+    ...otherDispatchProps
+  } = dispatchProps
+
+  return {
+    ...stateProps,
+    ...otherDispatchProps,
+    ...ownProps,
+    gasPriceButtonGroupProps: {
+      ...gasPriceButtonGroupProps,
+      handleGasPriceSelection: dispatchSetGasPrice,
+    },
+    resetGasButtons: () => {
+      dispatchResetCustomData()
+      dispatchSetGasPrice(gasButtonInfo[1].priceInHexWei)
+      dispatchShowGasButtonGroup()
+    },
+    setGasPrice: dispatchSetGasPrice,
+  }
+}
diff --git a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.scss b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.selectors.js b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.selectors.js
new file mode 100644
index 000000000..79c838543
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.selectors.js
@@ -0,0 +1,19 @@
+const selectors = {
+  gasFeeIsInError,
+  getGasLoadingError,
+  getGasButtonGroupShown,
+}
+
+module.exports = selectors
+
+function getGasLoadingError (state) {
+  return state.send.errors.gasLoading
+}
+
+function gasFeeIsInError (state) {
+  return Boolean(state.send.errors.gasFee)
+}
+
+function getGasButtonGroupShown (state) {
+  return state.send.gasButtonGroupShown
+}
diff --git a/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
new file mode 100644
index 000000000..0cbc92621
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
@@ -0,0 +1,104 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import SendGasRow from '../send-gas-row.component.js'
+
+import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
+import GasFeeDisplay from '../gas-fee-display/gas-fee-display.component'
+import GasPriceButtonGroup from '../../../../../components/app/gas-customization/gas-price-button-group'
+
+const propsMethodSpies = {
+  showCustomizeGasModal: sinon.spy(),
+  resetGasButtons: sinon.spy(),
+}
+
+describe('SendGasRow Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<SendGasRow
+      conversionRate={20}
+      convertedCurrency={'mockConvertedCurrency'}
+      gasFeeError={'mockGasFeeError'}
+      gasLoadingError={false}
+      gasTotal={'mockGasTotal'}
+      gasButtonGroupShown={false}
+      showCustomizeGasModal={propsMethodSpies.showCustomizeGasModal}
+      resetGasButtons={propsMethodSpies.resetGasButtons}
+      gasPriceButtonGroupProps={{
+        someGasPriceButtonGroupProp: 'foo',
+        anotherGasPriceButtonGroupProp: 'bar',
+      }}
+    />, { context: { t: str => str + '_t', metricsEvent: () => ({}) } })
+  })
+
+  afterEach(() => {
+    propsMethodSpies.resetGasButtons.resetHistory()
+  })
+
+  describe('render', () => {
+    it('should render a SendRowWrapper component', () => {
+      assert.equal(wrapper.find(SendRowWrapper).length, 1)
+    })
+
+    it('should pass the correct props to SendRowWrapper', () => {
+      const {
+        label,
+        showError,
+        errorType,
+      } = wrapper.find(SendRowWrapper).props()
+
+      assert.equal(label, 'transactionFee_t:')
+      assert.equal(showError, 'mockGasFeeError')
+      assert.equal(errorType, 'gasFee')
+    })
+
+    it('should render a GasFeeDisplay as a child of the SendRowWrapper', () => {
+      assert(wrapper.find(SendRowWrapper).childAt(0).is(GasFeeDisplay))
+    })
+
+    it('should render the GasFeeDisplay with the correct props', () => {
+      const {
+        conversionRate,
+        convertedCurrency,
+        gasLoadingError,
+        gasTotal,
+        onReset,
+      } = wrapper.find(SendRowWrapper).childAt(0).props()
+      assert.equal(conversionRate, 20)
+      assert.equal(convertedCurrency, 'mockConvertedCurrency')
+      assert.equal(gasLoadingError, false)
+      assert.equal(gasTotal, 'mockGasTotal')
+      assert.equal(propsMethodSpies.resetGasButtons.callCount, 0)
+      onReset()
+      assert.equal(propsMethodSpies.resetGasButtons.callCount, 1)
+    })
+
+    it('should render the GasPriceButtonGroup if gasButtonGroupShown is true', () => {
+      wrapper.setProps({ gasButtonGroupShown: true })
+      const rendered = wrapper.find(SendRowWrapper).childAt(0)
+      assert.equal(rendered.children().length, 2)
+
+      const gasPriceButtonGroup = rendered.childAt(0)
+      assert(gasPriceButtonGroup.is(GasPriceButtonGroup))
+      assert(gasPriceButtonGroup.hasClass('gas-price-button-group--small'))
+      assert.equal(gasPriceButtonGroup.props().showCheck, false)
+      assert.equal(gasPriceButtonGroup.props().someGasPriceButtonGroupProp, 'foo')
+      assert.equal(gasPriceButtonGroup.props().anotherGasPriceButtonGroupProp, 'bar')
+    })
+
+    it('should render an advanced options button if gasButtonGroupShown is true', () => {
+      wrapper.setProps({ gasButtonGroupShown: true })
+      const rendered = wrapper.find(SendRowWrapper).childAt(0)
+      assert.equal(rendered.children().length, 2)
+
+      const advancedOptionsButton = rendered.childAt(1)
+      assert.equal(advancedOptionsButton.text(), 'advancedOptions_t')
+
+      assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 0)
+      advancedOptionsButton.props().onClick()
+      assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 1)
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-container.test.js b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
new file mode 100644
index 000000000..ddc6ea985
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
@@ -0,0 +1,200 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+let mergeProps
+
+const actionSpies = {
+  showModal: sinon.spy(),
+  setGasPrice: sinon.spy(),
+  setGasTotal: sinon.spy(),
+  setGasLimit: sinon.spy(),
+}
+
+const sendDuckSpies = {
+  showGasButtonGroup: sinon.spy(),
+}
+
+const gasDuckSpies = {
+  resetCustomData: sinon.spy(),
+  setCustomGasPrice: sinon.spy(),
+  setCustomGasLimit: sinon.spy(),
+}
+
+proxyquire('../send-gas-row.container.js', {
+  'react-redux': {
+    connect: (ms, md, mp) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      mergeProps = mp
+      return () => ({})
+    },
+  },
+  '../../../../selectors/selectors': {
+    getCurrentEthBalance: (s) => `mockCurrentEthBalance:${s}`,
+    getAdvancedInlineGasShown: (s) => `mockAdvancedInlineGasShown:${s}`,
+    getSelectedToken: () => false,
+  },
+  '../../send.selectors.js': {
+    getConversionRate: (s) => `mockConversionRate:${s}`,
+    getCurrentCurrency: (s) => `mockConvertedCurrency:${s}`,
+    getGasTotal: (s) => `mockGasTotal:${s}`,
+    getGasPrice: (s) => `mockGasPrice:${s}`,
+    getGasLimit: (s) => `mockGasLimit:${s}`,
+    getSendAmount: (s) => `mockSendAmount:${s}`,
+  },
+  '../../send.utils.js': {
+    isBalanceSufficient: ({
+      amount,
+      gasTotal,
+      balance,
+      conversionRate,
+    }) => `${amount}:${gasTotal}:${balance}:${conversionRate}`,
+    calcGasTotal: (gasLimit, gasPrice) => gasLimit + gasPrice,
+  },
+  './send-gas-row.selectors.js': {
+    getGasLoadingError: (s) => `mockGasLoadingError:${s}`,
+    gasFeeIsInError: (s) => `mockGasFeeError:${s}`,
+    getGasButtonGroupShown: (s) => `mockGetGasButtonGroupShown:${s}`,
+  },
+  '../../../../store/actions': actionSpies,
+  '../../../../selectors/custom-gas': {
+    getBasicGasEstimateLoadingStatus: (s) => `mockBasicGasEstimateLoadingStatus:${s}`,
+    getRenderableEstimateDataForSmallButtonsFromGWEI: (s) => `mockGasButtonInfo:${s}`,
+    getDefaultActiveButtonIndex: (gasButtonInfo, gasPrice) => gasButtonInfo.length + gasPrice.length,
+  },
+  '../../../../ducks/send/send.duck': sendDuckSpies,
+  '../../../../ducks/gas/gas.duck': gasDuckSpies,
+})
+
+describe('send-gas-row container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        conversionRate: 'mockConversionRate:mockState',
+        convertedCurrency: 'mockConvertedCurrency:mockState',
+        gasTotal: 'mockGasTotal:mockState',
+        gasFeeError: 'mockGasFeeError:mockState',
+        gasLoadingError: 'mockGasLoadingError:mockState',
+        gasPriceButtonGroupProps: {
+          buttonDataLoading: `mockBasicGasEstimateLoadingStatus:mockState`,
+          defaultActiveButtonIndex: 1,
+          newActiveButtonIndex: 49,
+          gasButtonInfo: `mockGasButtonInfo:mockState`,
+        },
+        gasButtonGroupShown: `mockGetGasButtonGroupShown:mockState`,
+        advancedInlineGasShown: 'mockAdvancedInlineGasShown:mockState',
+        gasLimit: 'mockGasLimit:mockState',
+        gasPrice: 'mockGasPrice:mockState',
+        insufficientBalance: false,
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+      actionSpies.setGasTotal.resetHistory()
+    })
+
+    describe('showCustomizeGasModal()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.showCustomizeGasModal()
+        assert(dispatchSpy.calledOnce)
+        assert.deepEqual(
+          actionSpies.showModal.getCall(0).args[0],
+          { name: 'CUSTOMIZE_GAS', hideBasic: true }
+        )
+      })
+    })
+
+    describe('setGasPrice()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.setGasPrice('mockNewPrice', 'mockLimit')
+        assert(dispatchSpy.calledThrice)
+        assert(actionSpies.setGasPrice.calledOnce)
+        assert.equal(actionSpies.setGasPrice.getCall(0).args[0], 'mockNewPrice')
+        assert.equal(gasDuckSpies.setCustomGasPrice.getCall(0).args[0], 'mockNewPrice')
+        assert(actionSpies.setGasTotal.calledOnce)
+        assert.equal(actionSpies.setGasTotal.getCall(0).args[0], 'mockLimitmockNewPrice')
+      })
+    })
+
+    describe('setGasLimit()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.setGasLimit('mockNewLimit', 'mockPrice')
+        assert(dispatchSpy.calledThrice)
+        assert(actionSpies.setGasLimit.calledOnce)
+        assert.equal(actionSpies.setGasLimit.getCall(0).args[0], 'mockNewLimit')
+        assert.equal(gasDuckSpies.setCustomGasLimit.getCall(0).args[0], 'mockNewLimit')
+        assert(actionSpies.setGasTotal.calledOnce)
+        assert.equal(actionSpies.setGasTotal.getCall(0).args[0], 'mockNewLimitmockPrice')
+      })
+    })
+
+    describe('showGasButtonGroup()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.showGasButtonGroup()
+        assert(dispatchSpy.calledOnce)
+        assert(sendDuckSpies.showGasButtonGroup.calledOnce)
+      })
+    })
+
+    describe('resetCustomData()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.resetCustomData()
+        assert(dispatchSpy.calledOnce)
+        assert(gasDuckSpies.resetCustomData.calledOnce)
+      })
+    })
+
+  })
+
+  describe('mergeProps', () => {
+    let stateProps
+    let dispatchProps
+    let ownProps
+
+    beforeEach(() => {
+      stateProps = {
+        gasPriceButtonGroupProps: {
+          someGasPriceButtonGroupProp: 'foo',
+          anotherGasPriceButtonGroupProp: 'bar',
+        },
+        someOtherStateProp: 'baz',
+      }
+      dispatchProps = {
+        setGasPrice: sinon.spy(),
+        someOtherDispatchProp: sinon.spy(),
+      }
+      ownProps = { someOwnProp: 123 }
+    })
+
+    it('should return the expected props when isConfirm is true', () => {
+      const result = mergeProps(stateProps, dispatchProps, ownProps)
+
+      assert.equal(result.someOtherStateProp, 'baz')
+      assert.equal(result.gasPriceButtonGroupProps.someGasPriceButtonGroupProp, 'foo')
+      assert.equal(result.gasPriceButtonGroupProps.anotherGasPriceButtonGroupProp, 'bar')
+      assert.equal(result.someOwnProp, 123)
+
+      assert.equal(dispatchProps.setGasPrice.callCount, 0)
+      result.gasPriceButtonGroupProps.handleGasPriceSelection()
+      assert.equal(dispatchProps.setGasPrice.callCount, 1)
+
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 0)
+      result.someOtherDispatchProp()
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 1)
+    })
+  })
+
+})
diff --git a/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
new file mode 100644
index 000000000..bd3c9a257
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
@@ -0,0 +1,62 @@
+import assert from 'assert'
+import {
+  gasFeeIsInError,
+  getGasLoadingError,
+  getGasButtonGroupShown,
+} from '../send-gas-row.selectors.js'
+
+describe('send-gas-row selectors', () => {
+
+  describe('getGasLoadingError()', () => {
+    it('should return send.errors.gasLoading', () => {
+      const state = {
+        send: {
+          errors: {
+            gasLoading: 'abc',
+          },
+        },
+      }
+
+      assert.equal(getGasLoadingError(state), 'abc')
+    })
+  })
+
+  describe('gasFeeIsInError()', () => {
+    it('should return true if send.errors.gasFee is truthy', () => {
+      const state = {
+        send: {
+          errors: {
+            gasFee: 'def',
+          },
+        },
+      }
+
+      assert.equal(gasFeeIsInError(state), true)
+    })
+
+    it('should return false send.errors.gasFee is falsely', () => {
+      const state = {
+        send: {
+          errors: {
+            gasFee: null,
+          },
+        },
+      }
+
+      assert.equal(gasFeeIsInError(state), false)
+    })
+  })
+
+  describe('getGasButtonGroupShown()', () => {
+    it('should return send.gasButtonGroupShown', () => {
+      const state = {
+        send: {
+          gasButtonGroupShown: 'foobar',
+        },
+      }
+
+      assert.equal(getGasButtonGroupShown(state), 'foobar')
+    })
+  })
+
+})
diff --git a/ui/app/pages/send/send-content/send-hex-data-row/index.js b/ui/app/pages/send/send-content/send-hex-data-row/index.js
new file mode 100644
index 000000000..08c341067
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-hex-data-row/index.js
@@ -0,0 +1 @@
+export { default } from './send-hex-data-row.container'
diff --git a/ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js b/ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js
new file mode 100644
index 000000000..62a74a77b
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper'
+
+export default class SendHexDataRow extends Component {
+  static propTypes = {
+    data: PropTypes.string,
+    inError: PropTypes.bool,
+    updateSendHexData: PropTypes.func.isRequired,
+    updateGas: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  onInput = (event) => {
+    const {updateSendHexData, updateGas} = this.props
+    const data = event.target.value.replace(/\n/g, '') || null
+    updateSendHexData(data)
+    updateGas({ data })
+  }
+
+  render () {
+    const {inError} = this.props
+    const {t} = this.context
+
+    return (
+      <SendRowWrapper
+        label={`${t('hexData')}:`}
+        showError={inError}
+        errorType={'amount'}
+      >
+        <textarea
+          onInput={this.onInput}
+          placeholder="Optional"
+          className="send-v2__hex-data__input"
+        />
+      </SendRowWrapper>
+    )
+  }
+}
diff --git a/ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.container.js b/ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.container.js
new file mode 100644
index 000000000..8b1c540c3
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.container.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux'
+import {
+  updateSendHexData,
+} from '../../../../store/actions'
+import SendHexDataRow from './send-hex-data-row.component'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendHexDataRow)
+
+function mapStateToProps (state) {
+  return {
+    data: state.metamask.send.data,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    updateSendHexData (data) {
+      return dispatch(updateSendHexData(data))
+    },
+  }
+}
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/index.js b/ui/app/pages/send/send-content/send-row-wrapper/index.js
new file mode 100644
index 000000000..d17545dcc
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-row-wrapper/index.js
@@ -0,0 +1 @@
+export { default } from './send-row-wrapper.component'
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/index.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/index.js
new file mode 100644
index 000000000..c00617f83
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/index.js
@@ -0,0 +1 @@
+export { default } from './send-row-error-message.container'
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js
new file mode 100644
index 000000000..61bc7bab7
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class SendRowErrorMessage extends Component {
+
+  static propTypes = {
+    errors: PropTypes.object,
+    errorType: PropTypes.string,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  render () {
+    const { errors, errorType } = this.props
+
+    const errorMessage = errors[errorType]
+
+    return (
+      errorMessage
+        ? <div className="send-v2__error">{this.context.t(errorMessage)}</div>
+        : null
+    )
+  }
+
+}
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js
new file mode 100644
index 000000000..59622047f
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js
@@ -0,0 +1,12 @@
+import { connect } from 'react-redux'
+import { getSendErrors } from '../../../send.selectors'
+import SendRowErrorMessage from './send-row-error-message.component'
+
+export default connect(mapStateToProps)(SendRowErrorMessage)
+
+function mapStateToProps (state, ownProps) {
+  return {
+    errors: getSendErrors(state),
+    errorType: ownProps.errorType,
+  }
+}
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js
new file mode 100644
index 000000000..2304a43d2
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import SendRowErrorMessage from '../send-row-error-message.component.js'
+
+describe('SendRowErrorMessage Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<SendRowErrorMessage
+      errors={{ error1: 'abc', error2: 'def' }}
+      errorType={'error3'}
+    />, { context: { t: str => str + '_t' } })
+  })
+
+  describe('render', () => {
+    it('should render null if the passed errors do not contain an error of errorType', () => {
+      assert.equal(wrapper.find('.send-v2__error').length, 0)
+      assert.equal(wrapper.html(), null)
+    })
+
+    it('should render an error message if the passed errors contain an error of errorType', () => {
+      wrapper.setProps({ errors: { error1: 'abc', error2: 'def', error3: 'xyz' } })
+      assert.equal(wrapper.find('.send-v2__error').length, 1)
+      assert.equal(wrapper.find('.send-v2__error').text(), 'xyz_t')
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js
new file mode 100644
index 000000000..eecff165d
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js
@@ -0,0 +1,28 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+let mapStateToProps
+
+proxyquire('../send-row-error-message.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      return () => ({})
+    },
+  },
+  '../../../send.selectors': { getSendErrors: (s) => `mockErrors:${s}` },
+})
+
+describe('send-row-error-message container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState', { errorType: 'someType' }), {
+        errors: 'mockErrors:mockState',
+        errorType: 'someType' })
+    })
+
+  })
+
+})
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/index.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/index.js
new file mode 100644
index 000000000..fd4d19ef7
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/index.js
@@ -0,0 +1 @@
+export { default } from './send-row-warning-message.container'
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js
new file mode 100644
index 000000000..f1caa8f99
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class SendRowWarningMessage extends Component {
+
+  static propTypes = {
+    warnings: PropTypes.object,
+    warningType: PropTypes.string,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  render () {
+    const { warnings, warningType } = this.props
+
+    const warningMessage = warningType in warnings && warnings[warningType]
+
+    return (
+        warningMessage
+        ? <div className="send-v2__warning">{this.context.t(warningMessage)}</div>
+        : null
+    )
+  }
+
+}
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js
new file mode 100644
index 000000000..7df14fd96
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js
@@ -0,0 +1,12 @@
+import { connect } from 'react-redux'
+import { getSendWarnings } from '../../../send.selectors'
+import SendRowWarningMessage from './send-row-warning-message.component'
+
+export default connect(mapStateToProps)(SendRowWarningMessage)
+
+function mapStateToProps (state, ownProps) {
+  return {
+    warnings: getSendWarnings(state),
+    warningType: ownProps.warningType,
+  }
+}
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js
new file mode 100644
index 000000000..bd803d833
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import SendRowWarningMessage from '../send-row-warning-message.component.js'
+
+describe('SendRowWarningMessage Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<SendRowWarningMessage
+      warnings={{ warning1: 'abc', warning2: 'def' }}
+      warningType={'warning3'}
+    />, { context: { t: str => str + '_t' } })
+  })
+
+  describe('render', () => {
+    it('should render null if the passed warnings do not contain a warning of warningType', () => {
+      assert.equal(wrapper.find('.send-v2__warning').length, 0)
+      assert.equal(wrapper.html(), null)
+    })
+
+    it('should render a warning message if the passed warnings contain a warning of warningType', () => {
+      wrapper.setProps({ warnings: { warning1: 'abc', warning2: 'def', warning3: 'xyz' } })
+      assert.equal(wrapper.find('.send-v2__warning').length, 1)
+      assert.equal(wrapper.find('.send-v2__warning').text(), 'xyz_t')
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js
new file mode 100644
index 000000000..225bf056c
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js
@@ -0,0 +1,28 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+let mapStateToProps
+
+proxyquire('../send-row-warning-message.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      return () => ({})
+    },
+  },
+  '../../../send.selectors': { getSendWarnings: (s) => `mockWarnings:${s}` },
+})
+
+describe('send-row-warning-message container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState', { warningType: 'someType' }), {
+        warnings: 'mockWarnings:mockState',
+        warningType: 'someType' })
+    })
+
+  })
+
+})
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper-README.md b/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper-README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.component.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.component.js
new file mode 100644
index 000000000..94309bd96
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.component.js
@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowErrorMessage from './send-row-error-message'
+import SendRowWarningMessage from './send-row-warning-message'
+
+export default class SendRowWrapper extends Component {
+
+  static propTypes = {
+    children: PropTypes.node,
+    errorType: PropTypes.string,
+    label: PropTypes.string,
+    showError: PropTypes.bool,
+    showWarning: PropTypes.bool,
+    warningType: PropTypes.string,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  render () {
+    const {
+      children,
+      errorType = '',
+      label,
+      showError = false,
+      showWarning = false,
+      warningType = '',
+    } = this.props
+    const formField = Array.isArray(children) ? children[1] || children[0] : children
+    const customLabelContent = children.length > 1 ? children[0] : null
+
+    return (
+      <div className="send-v2__form-row">
+        <div className="send-v2__form-label">
+          {label}
+          {showError && <SendRowErrorMessage errorType={errorType}/>}
+          {!showError && showWarning && <SendRowWarningMessage warningType={warningType} />}
+          {customLabelContent}
+        </div>
+        <div className="send-v2__form-field">
+          {formField}
+        </div>
+      </div>
+    )
+  }
+
+}
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.scss b/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js b/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
new file mode 100644
index 000000000..30280e1d0
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
@@ -0,0 +1,79 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import SendRowWrapper from '../send-row-wrapper.component.js'
+
+import SendRowErrorMessage from '../send-row-error-message/send-row-error-message.container'
+
+describe('SendContent Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<SendRowWrapper
+      errorType={'mockErrorType'}
+      label={'mockLabel'}
+      showError={false}
+    >
+      <span>Mock Form Field</span>
+    </SendRowWrapper>)
+  })
+
+  describe('render', () => {
+    it('should render a div with a send-v2__form-row class', () => {
+      assert.equal(wrapper.find('div.send-v2__form-row').length, 1)
+    })
+
+    it('should render two children of the root div, with send-v2_form label and field classes', () => {
+      assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').length, 1)
+      assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').length, 1)
+    })
+
+    it('should render the label as a child of the send-v2__form-label', () => {
+      assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(0).text(), 'mockLabel')
+    })
+
+    it('should render its first child as a child of the send-v2__form-field', () => {
+      assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').childAt(0).text(), 'Mock Form Field')
+    })
+
+    it('should not render a SendRowErrorMessage if showError is false', () => {
+      assert.equal(wrapper.find(SendRowErrorMessage).length, 0)
+    })
+
+    it('should render a SendRowErrorMessage with and errorType props if showError is true', () => {
+      wrapper.setProps({showError: true})
+      assert.equal(wrapper.find(SendRowErrorMessage).length, 1)
+
+      const expectedSendRowErrorMessage = wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(1)
+      assert(expectedSendRowErrorMessage.is(SendRowErrorMessage))
+      assert.deepEqual(
+        expectedSendRowErrorMessage.props(),
+        { errorType: 'mockErrorType' }
+      )
+    })
+
+    it('should render its second child as a child of the send-v2__form-field, if it has two children', () => {
+      wrapper = shallow(<SendRowWrapper
+      errorType={'mockErrorType'}
+      label={'mockLabel'}
+      showError={false}
+    >
+      <span>Mock Custom Label Content</span>
+      <span>Mock Form Field</span>
+    </SendRowWrapper>)
+      assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').childAt(0).text(), 'Mock Form Field')
+    })
+
+    it('should render its first child as the last child of the send-v2__form-label, if it has two children', () => {
+      wrapper = shallow(<SendRowWrapper
+      errorType={'mockErrorType'}
+      label={'mockLabel'}
+      showError={false}
+    >
+      <span>Mock Custom Label Content</span>
+      <span>Mock Form Field</span>
+    </SendRowWrapper>)
+      assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(1).text(), 'Mock Custom Label Content')
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-content/send-to-row/index.js b/ui/app/pages/send/send-content/send-to-row/index.js
new file mode 100644
index 000000000..121f15148
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-to-row/index.js
@@ -0,0 +1 @@
+export { default } from './send-to-row.container'
diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md b/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md
new file mode 100644
index 000000000..e69de29bb
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>
+    )
+  }
+
+}
diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js
new file mode 100644
index 000000000..2cbe9fcd0
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js
@@ -0,0 +1,54 @@
+import { connect } from 'react-redux'
+import {
+    getCurrentNetwork,
+    getSelectedToken,
+    getSendTo,
+    getSendToAccounts,
+    getSendHexData,
+} from '../../send.selectors.js'
+import {
+    getToDropdownOpen,
+    getTokens,
+    sendToIsInError,
+    sendToIsInWarning,
+} from './send-to-row.selectors.js'
+import {
+    updateSendTo,
+} from '../../../../store/actions'
+import {
+  updateSendErrors,
+  updateSendWarnings,
+  openToDropdown,
+  closeToDropdown,
+} from '../../../../ducks/send/send.duck'
+import SendToRow from './send-to-row.component'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendToRow)
+
+function mapStateToProps (state) {
+  return {
+    hasHexData: Boolean(getSendHexData(state)),
+    inError: sendToIsInError(state),
+    inWarning: sendToIsInWarning(state),
+    network: getCurrentNetwork(state),
+    selectedToken: getSelectedToken(state),
+    to: getSendTo(state),
+    toAccounts: getSendToAccounts(state),
+    toDropdownOpen: getToDropdownOpen(state),
+    tokens: getTokens(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    closeToDropdown: () => dispatch(closeToDropdown()),
+    openToDropdown: () => dispatch(openToDropdown()),
+    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
+    updateSendToError: (toErrorObject) => {
+        dispatch(updateSendErrors(toErrorObject))
+    },
+    updateSendToWarning: (toWarningObject) => {
+      dispatch(updateSendWarnings(toWarningObject))
+  },
+  }
+}
diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js
new file mode 100644
index 000000000..a6160d335
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js
@@ -0,0 +1,24 @@
+const selectors = {
+  getToDropdownOpen,
+  getTokens,
+  sendToIsInError,
+  sendToIsInWarning,
+}
+
+module.exports = selectors
+
+function getToDropdownOpen (state) {
+  return state.send.toDropdownOpen
+}
+
+function sendToIsInError (state) {
+    return Boolean(state.send.errors.to)
+}
+
+function sendToIsInWarning (state) {
+  return Boolean(state.send.warnings.to)
+}
+
+function getTokens (state) {
+  return state.metamask.tokens
+}
diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js
new file mode 100644
index 000000000..d0a43f086
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js
@@ -0,0 +1,36 @@
+const {
+  REQUIRED_ERROR,
+  INVALID_RECIPIENT_ADDRESS_ERROR,
+  KNOWN_RECIPIENT_ADDRESS_ERROR,
+  INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR,
+} = require('../../send.constants')
+const { isValidAddress, isEthNetwork } = require('../../../../helpers/utils/util')
+import { checkExistingAddresses } from '../../../add-token/util'
+
+const ethUtil = require('ethereumjs-util')
+const contractMap = require('eth-contract-metadata')
+
+function getToErrorObject (to, toError = null, hasHexData = false, tokens = [], selectedToken = null, network) {
+  if (!to) {
+    if (!hasHexData) {
+      toError = REQUIRED_ERROR
+    }
+  } else if (!isValidAddress(to, network) && !toError) {
+    toError = isEthNetwork(network) ? INVALID_RECIPIENT_ADDRESS_ERROR : INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR
+  } else if (selectedToken && (ethUtil.toChecksumAddress(to) in contractMap || checkExistingAddresses(to, tokens))) {
+    toError = KNOWN_RECIPIENT_ADDRESS_ERROR
+  }
+  return { to: toError }
+}
+
+function getToWarningObject (to, toWarning = null, tokens = [], selectedToken = null) {
+  if (selectedToken && (ethUtil.toChecksumAddress(to) in contractMap || checkExistingAddresses(to, tokens))) {
+    toWarning = KNOWN_RECIPIENT_ADDRESS_ERROR
+  }
+  return { to: toWarning }
+}
+
+module.exports = {
+  getToErrorObject,
+  getToWarningObject,
+}
diff --git a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js
new file mode 100644
index 000000000..c180d97f1
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js
@@ -0,0 +1,166 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import proxyquire from 'proxyquire'
+
+const SendToRow = proxyquire('../send-to-row.component.js', {
+  './send-to-row.utils.js': {
+    getToErrorObject: (to, toError) => ({
+      to: to === false ? null : `mockToErrorObject:${to}${toError}`,
+    }),
+    getToWarningObject: (to, toWarning) => ({
+      to: to === false ? null : `mockToWarningObject:${to}${toWarning}`,
+    }),
+  },
+}).default
+
+import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
+import EnsInput from '../../../../../components/app/ens-input'
+
+const propsMethodSpies = {
+  closeToDropdown: sinon.spy(),
+  openToDropdown: sinon.spy(),
+  updateGas: sinon.spy(),
+  updateSendTo: sinon.spy(),
+  updateSendToError: sinon.spy(),
+  updateSendToWarning: sinon.spy(),
+}
+
+sinon.spy(SendToRow.prototype, 'handleToChange')
+
+describe('SendToRow Component', function () {
+  let wrapper
+  let instance
+
+  beforeEach(() => {
+    wrapper = shallow(<SendToRow
+      closeToDropdown={propsMethodSpies.closeToDropdown}
+      inError={false}
+      inWarning={false}
+      network={'mockNetwork'}
+      openToDropdown={propsMethodSpies.openToDropdown}
+      to={'mockTo'}
+      toAccounts={['mockAccount']}
+      toDropdownOpen={false}
+      updateGas={propsMethodSpies.updateGas}
+      updateSendTo={propsMethodSpies.updateSendTo}
+      updateSendToError={propsMethodSpies.updateSendToError}
+      updateSendToWarning={propsMethodSpies.updateSendToWarning}
+    />, { context: { t: str => str + '_t' } })
+    instance = wrapper.instance()
+  })
+
+  afterEach(() => {
+    propsMethodSpies.closeToDropdown.resetHistory()
+    propsMethodSpies.openToDropdown.resetHistory()
+    propsMethodSpies.updateSendTo.resetHistory()
+    propsMethodSpies.updateSendToError.resetHistory()
+    propsMethodSpies.updateSendToWarning.resetHistory()
+    SendToRow.prototype.handleToChange.resetHistory()
+  })
+
+  describe('handleToChange', () => {
+
+    it('should call updateSendTo', () => {
+      assert.equal(propsMethodSpies.updateSendTo.callCount, 0)
+      instance.handleToChange('mockTo2', 'mockNickname')
+      assert.equal(propsMethodSpies.updateSendTo.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateSendTo.getCall(0).args,
+        ['mockTo2', 'mockNickname']
+      )
+    })
+
+    it('should call updateSendToError', () => {
+      assert.equal(propsMethodSpies.updateSendToError.callCount, 0)
+      instance.handleToChange('mockTo2', '', 'mockToError')
+      assert.equal(propsMethodSpies.updateSendToError.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateSendToError.getCall(0).args,
+        [{ to: 'mockToErrorObject:mockTo2mockToError' }]
+      )
+    })
+
+    it('should call updateSendToWarning', () => {
+      assert.equal(propsMethodSpies.updateSendToWarning.callCount, 0)
+      instance.handleToChange('mockTo2', '', '', 'mockToWarning')
+      assert.equal(propsMethodSpies.updateSendToWarning.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateSendToWarning.getCall(0).args,
+        [{ to: 'mockToWarningObject:mockTo2mockToWarning' }]
+      )
+    })
+
+    it('should not call updateGas if there is a to error', () => {
+      assert.equal(propsMethodSpies.updateGas.callCount, 0)
+      instance.handleToChange('mockTo2')
+      assert.equal(propsMethodSpies.updateGas.callCount, 0)
+    })
+
+    it('should call updateGas if there is no to error', () => {
+      assert.equal(propsMethodSpies.updateGas.callCount, 0)
+      instance.handleToChange(false)
+      assert.equal(propsMethodSpies.updateGas.callCount, 1)
+    })
+  })
+
+  describe('render', () => {
+    it('should render a SendRowWrapper component', () => {
+      assert.equal(wrapper.find(SendRowWrapper).length, 1)
+    })
+
+    it('should pass the correct props to SendRowWrapper', () => {
+      const {
+        errorType,
+        label,
+        showError,
+      } = wrapper.find(SendRowWrapper).props()
+
+      assert.equal(errorType, 'to')
+
+      assert.equal(label, 'to_t: ')
+
+      assert.equal(showError, false)
+    })
+
+    it('should render an EnsInput as a child of the SendRowWrapper', () => {
+      assert(wrapper.find(SendRowWrapper).childAt(0).is(EnsInput))
+    })
+
+    it('should render the EnsInput with the correct props', () => {
+      const {
+        accounts,
+        closeDropdown,
+        dropdownOpen,
+        inError,
+        name,
+        network,
+        onChange,
+        openDropdown,
+        placeholder,
+        to,
+      } = wrapper.find(SendRowWrapper).childAt(0).props()
+      assert.deepEqual(accounts, ['mockAccount'])
+      assert.equal(dropdownOpen, false)
+      assert.equal(inError, false)
+      assert.equal(name, 'address')
+      assert.equal(network, 'mockNetwork')
+      assert.equal(placeholder, 'recipientAddress_t')
+      assert.equal(to, 'mockTo')
+      assert.equal(propsMethodSpies.closeToDropdown.callCount, 0)
+      closeDropdown()
+      assert.equal(propsMethodSpies.closeToDropdown.callCount, 1)
+      assert.equal(propsMethodSpies.openToDropdown.callCount, 0)
+      openDropdown()
+      assert.equal(propsMethodSpies.openToDropdown.callCount, 1)
+      assert.equal(SendToRow.prototype.handleToChange.callCount, 0)
+      onChange({ toAddress: 'mockNewTo', nickname: 'mockNewNickname', toError: 'mockToError', toWarning: 'mockToWarning' })
+      assert.equal(SendToRow.prototype.handleToChange.callCount, 1)
+      assert.deepEqual(
+        SendToRow.prototype.handleToChange.getCall(0).args,
+        ['mockNewTo', 'mockNewNickname', 'mockToError', 'mockToWarning', 'mockNetwork' ]
+      )
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js
new file mode 100644
index 000000000..bb8702e9a
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js
@@ -0,0 +1,134 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+
+const actionSpies = {
+  updateSendTo: sinon.spy(),
+}
+const duckActionSpies = {
+  closeToDropdown: sinon.spy(),
+  openToDropdown: sinon.spy(),
+  updateSendErrors: sinon.spy(),
+  updateSendWarnings: sinon.spy(),
+}
+
+proxyquire('../send-to-row.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },
+  '../../send.selectors.js': {
+    getCurrentNetwork: (s) => `mockNetwork:${s}`,
+    getSelectedToken: (s) => `mockSelectedToken:${s}`,
+    getSendHexData: (s) => s,
+    getSendTo: (s) => `mockTo:${s}`,
+    getSendToAccounts: (s) => `mockToAccounts:${s}`,
+  },
+  './send-to-row.selectors.js': {
+    getToDropdownOpen: (s) => `mockToDropdownOpen:${s}`,
+    sendToIsInError: (s) => `mockInError:${s}`,
+    sendToIsInWarning: (s) => `mockInWarning:${s}`,
+    getTokens: (s) => `mockTokens:${s}`,
+  },
+  '../../../../store/actions': actionSpies,
+  '../../../../ducks/send/send.duck': duckActionSpies,
+})
+
+describe('send-to-row container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        hasHexData: true,
+        inError: 'mockInError:mockState',
+        inWarning: 'mockInWarning:mockState',
+        network: 'mockNetwork:mockState',
+        selectedToken: 'mockSelectedToken:mockState',
+        to: 'mockTo:mockState',
+        toAccounts: 'mockToAccounts:mockState',
+        toDropdownOpen: 'mockToDropdownOpen:mockState',
+        tokens: 'mockTokens:mockState',
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+    })
+
+    describe('closeToDropdown()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.closeToDropdown()
+        assert(dispatchSpy.calledOnce)
+        assert(duckActionSpies.closeToDropdown.calledOnce)
+        assert.equal(
+          duckActionSpies.closeToDropdown.getCall(0).args[0],
+          undefined
+        )
+      })
+    })
+
+    describe('openToDropdown()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.openToDropdown()
+        assert(dispatchSpy.calledOnce)
+        assert(duckActionSpies.openToDropdown.calledOnce)
+        assert.equal(
+          duckActionSpies.openToDropdown.getCall(0).args[0],
+          undefined
+        )
+      })
+    })
+
+    describe('updateSendTo()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateSendTo('mockTo', 'mockNickname')
+        assert(dispatchSpy.calledOnce)
+        assert(actionSpies.updateSendTo.calledOnce)
+        assert.deepEqual(
+          actionSpies.updateSendTo.getCall(0).args,
+          ['mockTo', 'mockNickname']
+        )
+      })
+    })
+
+    describe('updateSendToError()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateSendToError('mockToErrorObject')
+        assert(dispatchSpy.calledOnce)
+        assert(duckActionSpies.updateSendErrors.calledOnce)
+        assert.equal(
+          duckActionSpies.updateSendErrors.getCall(0).args[0],
+          'mockToErrorObject'
+        )
+      })
+    })
+
+    describe('updateSendToWarning()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateSendToWarning('mockToWarningObject')
+        assert(dispatchSpy.calledOnce)
+        assert(duckActionSpies.updateSendWarnings.calledOnce)
+        assert.equal(
+          duckActionSpies.updateSendWarnings.getCall(0).args[0],
+          'mockToWarningObject'
+        )
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js
new file mode 100644
index 000000000..0fa342d1e
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js
@@ -0,0 +1,59 @@
+import assert from 'assert'
+import {
+  getToDropdownOpen,
+  getTokens,
+  sendToIsInError,
+} from '../send-to-row.selectors.js'
+
+describe('send-to-row selectors', () => {
+
+  describe('getToDropdownOpen()', () => {
+    it('should return send.getToDropdownOpen', () => {
+      const state = {
+        send: {
+          toDropdownOpen: false,
+        },
+      }
+
+      assert.equal(getToDropdownOpen(state), false)
+    })
+  })
+
+  describe('sendToIsInError()', () => {
+    it('should return true if send.errors.to is truthy', () => {
+      const state = {
+        send: {
+          errors: {
+            to: 'abc',
+          },
+        },
+      }
+
+      assert.equal(sendToIsInError(state), true)
+    })
+
+    it('should return false if send.errors.to is falsy', () => {
+      const state = {
+        send: {
+          errors: {
+            to: null,
+          },
+        },
+      }
+
+      assert.equal(sendToIsInError(state), false)
+    })
+  })
+
+  describe('getTokens()', () => {
+    it('should return empty array if no tokens in state', () => {
+      const state = {
+        metamask: {
+          tokens: [],
+        },
+      }
+
+      assert.deepStrictEqual(getTokens(state), [])
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js
new file mode 100644
index 000000000..f29f5efec
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js
@@ -0,0 +1,107 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+import {
+  REQUIRED_ERROR,
+  INVALID_RECIPIENT_ADDRESS_ERROR,
+  KNOWN_RECIPIENT_ADDRESS_ERROR,
+} from '../../../send.constants'
+
+const stubs = {
+  isValidAddress: sinon.stub().callsFake(to => Boolean(to.match(/^[0xabcdef123456798]+$/))),
+}
+
+const toRowUtils = proxyquire('../send-to-row.utils.js', {
+  '../../../../helpers/utils/util': {
+    isValidAddress: stubs.isValidAddress,
+  },
+})
+const {
+  getToErrorObject,
+  getToWarningObject,
+} = toRowUtils
+
+describe('send-to-row utils', () => {
+
+  describe('getToErrorObject()', () => {
+    it('should return a required error if to is falsy', () => {
+      assert.deepEqual(getToErrorObject(null), {
+        to: REQUIRED_ERROR,
+      })
+    })
+
+    it('should return null if to is falsy and hexData is truthy', () => {
+      assert.deepEqual(getToErrorObject(null, undefined, true), {
+        to: null,
+      })
+    })
+
+    it('should return an invalid recipient error if to is truthy but invalid', () => {
+      assert.deepEqual(getToErrorObject('mockInvalidTo'), {
+        to: INVALID_RECIPIENT_ADDRESS_ERROR,
+      })
+    })
+
+    it('should return null if to is truthy and valid', () => {
+      assert.deepEqual(getToErrorObject('0xabc123'), {
+        to: null,
+      })
+    })
+
+    it('should return the passed error if to is truthy but invalid if to is truthy and valid', () => {
+      assert.deepEqual(getToErrorObject('invalid #$ 345878', 'someExplicitError'), {
+        to: 'someExplicitError',
+      })
+    })
+
+    it('should return a known address recipient if to is truthy but part of state tokens', () => {
+      assert.deepEqual(getToErrorObject('0xabc123', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
+        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
+      })
+    })
+
+    it('should null if to is truthy part of tokens but selectedToken falsy', () => {
+      assert.deepEqual(getToErrorObject('0xabc123', undefined, false, [{'address': '0xabc123'}]), {
+        to: null,
+      })
+    })
+
+    it('should return a known address recipient if to is truthy but part of contract metadata', () => {
+      assert.deepEqual(getToErrorObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
+        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
+      })
+    })
+    it('should null if to is truthy part of contract metadata but selectedToken falsy', () => {
+      assert.deepEqual(getToErrorObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, false, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
+        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
+      })
+    })
+  })
+
+  describe('getToWarningObject()', () => {
+    it('should return a known address recipient if to is truthy but part of state tokens', () => {
+      assert.deepEqual(getToWarningObject('0xabc123', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
+        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
+      })
+    })
+
+    it('should null if to is truthy part of tokens but selectedToken falsy', () => {
+      assert.deepEqual(getToWarningObject('0xabc123', undefined, [{'address': '0xabc123'}]), {
+        to: null,
+      })
+    })
+
+    it('should return a known address recipient if to is truthy but part of contract metadata', () => {
+      assert.deepEqual(getToWarningObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
+        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
+      })
+    })
+    it('should null if to is truthy part of contract metadata but selectedToken falsy', () => {
+      assert.deepEqual(getToWarningObject('0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', undefined, [{'address': '0xabc123'}], {'address': '0xabc123'}), {
+        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
+      })
+    })
+  })
+
+})
diff --git a/ui/app/pages/send/send-content/tests/send-content-component.test.js b/ui/app/pages/send/send-content/tests/send-content-component.test.js
new file mode 100644
index 000000000..521c6523e
--- /dev/null
+++ b/ui/app/pages/send/send-content/tests/send-content-component.test.js
@@ -0,0 +1,53 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import SendContent from '../send-content.component.js'
+
+import PageContainerContent from '../../../../components/ui/page-container/page-container-content.component'
+import SendAmountRow from '../send-amount-row/send-amount-row.container'
+import SendFromRow from '../send-from-row/send-from-row.container'
+import SendGasRow from '../send-gas-row/send-gas-row.container'
+import SendToRow from '../send-to-row/send-to-row.container'
+import SendHexDataRow from '../send-hex-data-row/send-hex-data-row.container'
+import SendAssetRow from '../send-asset-row/send-asset-row.container'
+
+describe('SendContent Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<SendContent showHexData={true} />)
+  })
+
+  describe('render', () => {
+    it('should render a PageContainerContent component', () => {
+      assert.equal(wrapper.find(PageContainerContent).length, 1)
+    })
+
+    it('should render a div with a .send-v2__form class as a child of PageContainerContent', () => {
+      const PageContainerContentChild = wrapper.find(PageContainerContent).children()
+      PageContainerContentChild.is('div')
+      PageContainerContentChild.is('.send-v2__form')
+    })
+
+    it('should render the correct row components as grandchildren of the PageContainerContent component', () => {
+      const PageContainerContentChild = wrapper.find(PageContainerContent).children()
+      assert(PageContainerContentChild.childAt(0).is(SendFromRow))
+      assert(PageContainerContentChild.childAt(1).is(SendToRow))
+      assert(PageContainerContentChild.childAt(2).is(SendAssetRow))
+      assert(PageContainerContentChild.childAt(3).is(SendAmountRow))
+      assert(PageContainerContentChild.childAt(4).is(SendGasRow))
+      assert(PageContainerContentChild.childAt(5).is(SendHexDataRow))
+    })
+
+    it('should not render the SendHexDataRow if props.showHexData is false', () => {
+      wrapper.setProps({ showHexData: false })
+      const PageContainerContentChild = wrapper.find(PageContainerContent).children()
+      assert(PageContainerContentChild.childAt(0).is(SendFromRow))
+      assert(PageContainerContentChild.childAt(1).is(SendToRow))
+      assert(PageContainerContentChild.childAt(2).is(SendAssetRow))
+      assert(PageContainerContentChild.childAt(3).is(SendAmountRow))
+      assert(PageContainerContentChild.childAt(4).is(SendGasRow))
+      assert.equal(PageContainerContentChild.childAt(5).exists(), false)
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-footer/README.md b/ui/app/pages/send/send-footer/README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/pages/send/send-footer/index.js b/ui/app/pages/send/send-footer/index.js
new file mode 100644
index 000000000..58e91d622
--- /dev/null
+++ b/ui/app/pages/send/send-footer/index.js
@@ -0,0 +1 @@
+export { default } from './send-footer.container'
diff --git a/ui/app/pages/send/send-footer/send-footer.component.js b/ui/app/pages/send/send-footer/send-footer.component.js
new file mode 100644
index 000000000..16a8fdde2
--- /dev/null
+++ b/ui/app/pages/send/send-footer/send-footer.component.js
@@ -0,0 +1,142 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import PageContainerFooter from '../../../components/ui/page-container/page-container-footer'
+import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../helpers/constants/routes'
+
+export default class SendFooter extends Component {
+
+  static propTypes = {
+    addToAddressBookIfNew: PropTypes.func,
+    amount: PropTypes.string,
+    data: PropTypes.string,
+    clearSend: PropTypes.func,
+    disabled: PropTypes.bool,
+    editingTransactionId: PropTypes.string,
+    errors: PropTypes.object,
+    from: PropTypes.object,
+    gasLimit: PropTypes.string,
+    gasPrice: PropTypes.string,
+    gasTotal: PropTypes.string,
+    history: PropTypes.object,
+    inError: PropTypes.bool,
+    selectedToken: PropTypes.object,
+    sign: PropTypes.func,
+    to: PropTypes.string,
+    toAccounts: PropTypes.array,
+    tokenBalance: PropTypes.string,
+    unapprovedTxs: PropTypes.object,
+    update: PropTypes.func,
+    sendErrors: PropTypes.object,
+    gasChangedLabel: PropTypes.string,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  };
+
+  onCancel () {
+    this.props.clearSend()
+    this.props.history.push(DEFAULT_ROUTE)
+  }
+
+  onSubmit (event) {
+    event.preventDefault()
+    const {
+      addToAddressBookIfNew,
+      amount,
+      data,
+      editingTransactionId,
+      from: {address: from},
+      gasLimit: gas,
+      gasPrice,
+      selectedToken,
+      sign,
+      to,
+      unapprovedTxs,
+      // updateTx,
+      update,
+      toAccounts,
+      history,
+      gasChangedLabel,
+    } = this.props
+    const { metricsEvent } = this.context
+
+    // Should not be needed because submit should be disabled if there are errors.
+    // const noErrors = !amountError && toError === null
+
+    // if (!noErrors) {
+    //   return
+    // }
+
+    // TODO: add nickname functionality
+    addToAddressBookIfNew(to, toAccounts)
+    const promise = editingTransactionId
+      ? update({
+        amount,
+        data,
+        editingTransactionId,
+        from,
+        gas,
+        gasPrice,
+        selectedToken,
+        to,
+        unapprovedTxs,
+      })
+      : sign({ data, selectedToken, to, amount, from, gas, gasPrice })
+
+    Promise.resolve(promise)
+      .then(() => {
+        metricsEvent({
+          eventOpts: {
+            category: 'Transactions',
+            action: 'Edit Screen',
+            name: 'Complete',
+          },
+          customVariables: {
+            gasChanged: gasChangedLabel,
+          },
+        })
+        history.push(CONFIRM_TRANSACTION_ROUTE)
+      })
+  }
+
+  formShouldBeDisabled () {
+    const { data, inError, selectedToken, tokenBalance, gasTotal, to } = this.props
+    const missingTokenBalance = selectedToken && !tokenBalance
+    const shouldBeDisabled = inError || !gasTotal || missingTokenBalance || !(data || to)
+    return shouldBeDisabled
+  }
+
+  componentDidUpdate (prevProps) {
+    const { inError, sendErrors } = this.props
+    const { metricsEvent } = this.context
+    if (!prevProps.inError && inError) {
+      const errorField = Object.keys(sendErrors).find(key => sendErrors[key])
+      const errorMessage = sendErrors[errorField]
+
+      metricsEvent({
+        eventOpts: {
+          category: 'Transactions',
+          action: 'Edit Screen',
+          name: 'Error',
+        },
+        customVariables: {
+          errorField,
+          errorMessage,
+        },
+      })
+    }
+  }
+
+  render () {
+    return (
+      <PageContainerFooter
+        onCancel={() => this.onCancel()}
+        onSubmit={e => this.onSubmit(e)}
+        disabled={this.formShouldBeDisabled()}
+      />
+    )
+  }
+
+}
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))
+      }
+    },
+  }
+}
diff --git a/ui/app/pages/send/send-footer/send-footer.scss b/ui/app/pages/send/send-footer/send-footer.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/pages/send/send-footer/send-footer.selectors.js b/ui/app/pages/send/send-footer/send-footer.selectors.js
new file mode 100644
index 000000000..e20addfdc
--- /dev/null
+++ b/ui/app/pages/send/send-footer/send-footer.selectors.js
@@ -0,0 +1,11 @@
+const { getSendErrors } = require('../send.selectors')
+
+const selectors = {
+  isSendFormInError,
+}
+
+module.exports = selectors
+
+function isSendFormInError (state) {
+  return Object.values(getSendErrors(state)).some(n => n)
+}
diff --git a/ui/app/pages/send/send-footer/send-footer.utils.js b/ui/app/pages/send/send-footer/send-footer.utils.js
new file mode 100644
index 000000000..91ac29014
--- /dev/null
+++ b/ui/app/pages/send/send-footer/send-footer.utils.js
@@ -0,0 +1,88 @@
+const ethAbi = require('ethereumjs-abi')
+const ethUtil = require('ethereumjs-util')
+const { TOKEN_TRANSFER_FUNCTION_SIGNATURE } = require('../send.constants')
+
+function addHexPrefixToObjectValues (obj) {
+  return Object.keys(obj).reduce((newObj, key) => {
+    return { ...newObj, [key]: ethUtil.addHexPrefix(obj[key]) }
+  }, {})
+}
+
+function constructTxParams ({ selectedToken, data, to, amount, from, gas, gasPrice }) {
+  const txParams = {
+    data,
+    from,
+    value: '0',
+    gas,
+    gasPrice,
+  }
+
+  if (!selectedToken) {
+    txParams.value = amount
+    txParams.to = to
+  }
+
+  return addHexPrefixToObjectValues(txParams)
+}
+
+function constructUpdatedTx ({
+  amount,
+  data,
+  editingTransactionId,
+  from,
+  gas,
+  gasPrice,
+  selectedToken,
+  to,
+  unapprovedTxs,
+}) {
+  const unapprovedTx = unapprovedTxs[editingTransactionId]
+  const txParamsData = unapprovedTx.txParams.data ? unapprovedTx.txParams.data : data
+
+  const editingTx = {
+    ...unapprovedTx,
+    txParams: Object.assign(
+      unapprovedTx.txParams,
+      addHexPrefixToObjectValues({
+        data: txParamsData,
+        to,
+        from,
+        gas,
+        gasPrice,
+        value: amount,
+      })
+    ),
+  }
+
+  if (selectedToken) {
+    const data = TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call(
+      ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]),
+      x => ('00' + x.toString(16)).slice(-2)
+    ).join('')
+
+    Object.assign(editingTx.txParams, addHexPrefixToObjectValues({
+      value: '0',
+      to: selectedToken.address,
+      data,
+    }))
+  }
+
+  if (typeof editingTx.txParams.data === 'undefined') {
+    delete editingTx.txParams.data
+  }
+
+  return editingTx
+}
+
+function addressIsNew (toAccounts, newAddress) {
+  const newAddressNormalized = newAddress.toLowerCase()
+  const foundMatching = toAccounts.some(({ address }) => address === newAddressNormalized)
+  return !foundMatching
+}
+
+module.exports = {
+  addressIsNew,
+  constructTxParams,
+  constructUpdatedTx,
+  addHexPrefixToObjectValues,
+}
diff --git a/ui/app/pages/send/send-footer/tests/send-footer-component.test.js b/ui/app/pages/send/send-footer/tests/send-footer-component.test.js
new file mode 100644
index 000000000..56fc95df2
--- /dev/null
+++ b/ui/app/pages/send/send-footer/tests/send-footer-component.test.js
@@ -0,0 +1,233 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../../helpers/constants/routes'
+import SendFooter from '../send-footer.component.js'
+
+import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer'
+
+const propsMethodSpies = {
+  addToAddressBookIfNew: sinon.spy(),
+  clearSend: sinon.spy(),
+  sign: sinon.spy(),
+  update: sinon.spy(),
+}
+const historySpies = {
+  push: sinon.spy(),
+}
+const MOCK_EVENT = { preventDefault: () => {} }
+
+sinon.spy(SendFooter.prototype, 'onCancel')
+sinon.spy(SendFooter.prototype, 'onSubmit')
+
+describe('SendFooter Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<SendFooter
+      addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
+      amount={'mockAmount'}
+      clearSend={propsMethodSpies.clearSend}
+      disabled={true}
+      editingTransactionId={'mockEditingTransactionId'}
+      errors={{}}
+      from={ { address: 'mockAddress', balance: 'mockBalance' } }
+      gasLimit={'mockGasLimit'}
+      gasPrice={'mockGasPrice'}
+      gasTotal={'mockGasTotal'}
+      history={historySpies}
+      inError={false}
+      selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
+      sign={propsMethodSpies.sign}
+      to={'mockTo'}
+      toAccounts={['mockAccount']}
+      tokenBalance={'mockTokenBalance'}
+      unapprovedTxs={['mockTx']}
+      update={propsMethodSpies.update}
+      sendErrors={{}}
+    />, { context: { t: str => str, metricsEvent: () => ({}) } })
+  })
+
+  afterEach(() => {
+    propsMethodSpies.clearSend.resetHistory()
+    propsMethodSpies.addToAddressBookIfNew.resetHistory()
+    propsMethodSpies.clearSend.resetHistory()
+    propsMethodSpies.sign.resetHistory()
+    propsMethodSpies.update.resetHistory()
+    historySpies.push.resetHistory()
+    SendFooter.prototype.onCancel.resetHistory()
+    SendFooter.prototype.onSubmit.resetHistory()
+  })
+
+  describe('onCancel', () => {
+    it('should call clearSend', () => {
+      assert.equal(propsMethodSpies.clearSend.callCount, 0)
+      wrapper.instance().onCancel()
+      assert.equal(propsMethodSpies.clearSend.callCount, 1)
+    })
+
+    it('should call history.push', () => {
+      assert.equal(historySpies.push.callCount, 0)
+      wrapper.instance().onCancel()
+      assert.equal(historySpies.push.callCount, 1)
+      assert.equal(historySpies.push.getCall(0).args[0], DEFAULT_ROUTE)
+    })
+  })
+
+
+  describe('formShouldBeDisabled()', () => {
+    const config = {
+      'should return true if inError is truthy': {
+        inError: true,
+        expectedResult: true,
+      },
+      'should return true if gasTotal is falsy': {
+        inError: false,
+        gasTotal: false,
+        expectedResult: true,
+      },
+      'should return true if to is truthy': {
+        to: '0xsomevalidAddress',
+        inError: false,
+        gasTotal: false,
+        expectedResult: true,
+      },
+      'should return true if selectedToken is truthy and tokenBalance is falsy': {
+        selectedToken: true,
+        tokenBalance: null,
+        expectedResult: true,
+      },
+      'should return false if inError is false and all other params are truthy': {
+        inError: false,
+        gasTotal: '0x123',
+        selectedToken: true,
+        tokenBalance: 123,
+        expectedResult: false,
+      },
+    }
+    Object.entries(config).map(([description, obj]) => {
+      it(description, () => {
+        wrapper.setProps(obj)
+        assert.equal(wrapper.instance().formShouldBeDisabled(), obj.expectedResult)
+      })
+    })
+  })
+
+  describe('onSubmit', () => {
+    it('should call addToAddressBookIfNew with the correct params', () => {
+      wrapper.instance().onSubmit(MOCK_EVENT)
+      assert(propsMethodSpies.addToAddressBookIfNew.calledOnce)
+      assert.deepEqual(
+        propsMethodSpies.addToAddressBookIfNew.getCall(0).args,
+        ['mockTo', ['mockAccount']]
+      )
+    })
+
+    it('should call props.update if editingTransactionId is truthy', () => {
+      wrapper.instance().onSubmit(MOCK_EVENT)
+      assert(propsMethodSpies.update.calledOnce)
+      assert.deepEqual(
+        propsMethodSpies.update.getCall(0).args[0],
+        {
+          data: undefined,
+          amount: 'mockAmount',
+          editingTransactionId: 'mockEditingTransactionId',
+          from: 'mockAddress',
+          gas: 'mockGasLimit',
+          gasPrice: 'mockGasPrice',
+          selectedToken: { mockProp: 'mockSelectedTokenProp' },
+          to: 'mockTo',
+          unapprovedTxs: ['mockTx'],
+        }
+      )
+    })
+
+    it('should not call props.sign if editingTransactionId is truthy', () => {
+      assert.equal(propsMethodSpies.sign.callCount, 0)
+    })
+
+    it('should call props.sign if editingTransactionId is falsy', () => {
+      wrapper.setProps({ editingTransactionId: null })
+      wrapper.instance().onSubmit(MOCK_EVENT)
+      assert(propsMethodSpies.sign.calledOnce)
+      assert.deepEqual(
+        propsMethodSpies.sign.getCall(0).args[0],
+        {
+          data: undefined,
+          amount: 'mockAmount',
+          from: 'mockAddress',
+          gas: 'mockGasLimit',
+          gasPrice: 'mockGasPrice',
+          selectedToken: { mockProp: 'mockSelectedTokenProp' },
+          to: 'mockTo',
+        }
+      )
+    })
+
+    it('should not call props.update if editingTransactionId is falsy', () => {
+      assert.equal(propsMethodSpies.update.callCount, 0)
+    })
+
+    it('should call history.push', done => {
+      Promise.resolve(wrapper.instance().onSubmit(MOCK_EVENT))
+        .then(() => {
+          assert.equal(historySpies.push.callCount, 1)
+          assert.equal(historySpies.push.getCall(0).args[0], CONFIRM_TRANSACTION_ROUTE)
+          done()
+        })
+    })
+  })
+
+  describe('render', () => {
+    beforeEach(() => {
+      sinon.stub(SendFooter.prototype, 'formShouldBeDisabled').returns('formShouldBeDisabledReturn')
+      wrapper = shallow(<SendFooter
+        addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
+        amount={'mockAmount'}
+        clearSend={propsMethodSpies.clearSend}
+        disabled={true}
+        editingTransactionId={'mockEditingTransactionId'}
+        errors={{}}
+        from={ { address: 'mockAddress', balance: 'mockBalance' } }
+        gasLimit={'mockGasLimit'}
+        gasPrice={'mockGasPrice'}
+        gasTotal={'mockGasTotal'}
+        history={historySpies}
+        inError={false}
+        selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
+        sign={propsMethodSpies.sign}
+        to={'mockTo'}
+        toAccounts={['mockAccount']}
+        tokenBalance={'mockTokenBalance'}
+        unapprovedTxs={['mockTx']}
+        update={propsMethodSpies.update}
+      />, { context: { t: str => str, metricsEvent: () => ({}) } })
+    })
+
+    afterEach(() => {
+      SendFooter.prototype.formShouldBeDisabled.restore()
+    })
+
+    it('should render a PageContainerFooter component', () => {
+      assert.equal(wrapper.find(PageContainerFooter).length, 1)
+    })
+
+    it('should pass the correct props to PageContainerFooter', () => {
+      const {
+        onCancel,
+        onSubmit,
+        disabled,
+      } = wrapper.find(PageContainerFooter).props()
+      assert.equal(disabled, 'formShouldBeDisabledReturn')
+
+      assert.equal(SendFooter.prototype.onSubmit.callCount, 0)
+      onSubmit(MOCK_EVENT)
+      assert.equal(SendFooter.prototype.onSubmit.callCount, 1)
+
+      assert.equal(SendFooter.prototype.onCancel.callCount, 0)
+      onCancel()
+      assert.equal(SendFooter.prototype.onCancel.callCount, 1)
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-footer/tests/send-footer-container.test.js b/ui/app/pages/send/send-footer/tests/send-footer-container.test.js
new file mode 100644
index 000000000..118ebf356
--- /dev/null
+++ b/ui/app/pages/send/send-footer/tests/send-footer-container.test.js
@@ -0,0 +1,205 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+
+const actionSpies = {
+  addToAddressBook: sinon.spy(),
+  clearSend: sinon.spy(),
+  signTokenTx: sinon.spy(),
+  signTx: sinon.spy(),
+  updateTransaction: sinon.spy(),
+}
+const utilsStubs = {
+  addressIsNew: sinon.stub().returns(true),
+  constructTxParams: sinon.stub().returns({
+    value: 'mockAmount',
+  }),
+  constructUpdatedTx: sinon.stub().returns('mockConstructedUpdatedTxParams'),
+}
+
+proxyquire('../send-footer.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },
+  '../../../store/actions': actionSpies,
+  '../send.selectors': {
+    getGasLimit: (s) => `mockGasLimit:${s}`,
+    getGasPrice: (s) => `mockGasPrice:${s}`,
+    getGasTotal: (s) => `mockGasTotal:${s}`,
+    getSelectedToken: (s) => `mockSelectedToken:${s}`,
+    getSendAmount: (s) => `mockAmount:${s}`,
+    getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`,
+    getSendFromObject: (s) => `mockFromObject:${s}`,
+    getSendTo: (s) => `mockTo:${s}`,
+    getSendToAccounts: (s) => `mockToAccounts:${s}`,
+    getTokenBalance: (s) => `mockTokenBalance:${s}`,
+    getSendHexData: (s) => `mockHexData:${s}`,
+    getUnapprovedTxs: (s) => `mockUnapprovedTxs:${s}`,
+    getSendErrors: (s) => `mockSendErrors:${s}`,
+  },
+  './send-footer.selectors': { isSendFormInError: (s) => `mockInError:${s}` },
+  './send-footer.utils': utilsStubs,
+  '../../../selectors/custom-gas': {
+    getRenderableEstimateDataForSmallButtonsFromGWEI: (s) => ([{ labelKey: `mockLabel:${s}` }]),
+    getDefaultActiveButtonIndex: () => 0,
+  },
+})
+
+describe('send-footer container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        amount: 'mockAmount:mockState',
+        data: 'mockHexData:mockState',
+        selectedToken: 'mockSelectedToken:mockState',
+        editingTransactionId: 'mockEditingTransactionId:mockState',
+        from: 'mockFromObject:mockState',
+        gasLimit: 'mockGasLimit:mockState',
+        gasPrice: 'mockGasPrice:mockState',
+        gasTotal: 'mockGasTotal:mockState',
+        inError: 'mockInError:mockState',
+        to: 'mockTo:mockState',
+        toAccounts: 'mockToAccounts:mockState',
+        tokenBalance: 'mockTokenBalance:mockState',
+        unapprovedTxs: 'mockUnapprovedTxs:mockState',
+        sendErrors: 'mockSendErrors:mockState',
+        gasChangedLabel: 'mockLabel:mockState',
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+    })
+
+    describe('clearSend()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.clearSend()
+        assert(dispatchSpy.calledOnce)
+        assert(actionSpies.clearSend.calledOnce)
+      })
+    })
+
+    describe('sign()', () => {
+      it('should dispatch a signTokenTx action if selectedToken is defined', () => {
+        mapDispatchToPropsObject.sign({
+          selectedToken: {
+            address: '0xabc',
+          },
+          to: 'mockTo',
+          amount: 'mockAmount',
+          from: 'mockFrom',
+          gas: 'mockGas',
+          gasPrice: 'mockGasPrice',
+        })
+        assert(dispatchSpy.calledOnce)
+        assert.deepEqual(
+          utilsStubs.constructTxParams.getCall(0).args[0],
+          {
+            data: undefined,
+            selectedToken: {
+              address: '0xabc',
+            },
+            to: 'mockTo',
+            amount: 'mockAmount',
+            from: 'mockFrom',
+            gas: 'mockGas',
+            gasPrice: 'mockGasPrice',
+          }
+        )
+        assert.deepEqual(
+          actionSpies.signTokenTx.getCall(0).args,
+          [ '0xabc', 'mockTo', 'mockAmount', { value: 'mockAmount' } ]
+        )
+      })
+
+      it('should dispatch a sign action if selectedToken is not defined', () => {
+        utilsStubs.constructTxParams.resetHistory()
+        mapDispatchToPropsObject.sign({
+          to: 'mockTo',
+          amount: 'mockAmount',
+          from: 'mockFrom',
+          gas: 'mockGas',
+          gasPrice: 'mockGasPrice',
+        })
+        assert(dispatchSpy.calledOnce)
+        assert.deepEqual(
+          utilsStubs.constructTxParams.getCall(0).args[0],
+          {
+            data: undefined,
+            selectedToken: undefined,
+            to: 'mockTo',
+            amount: 'mockAmount',
+            from: 'mockFrom',
+            gas: 'mockGas',
+            gasPrice: 'mockGasPrice',
+          }
+        )
+        assert.deepEqual(
+          actionSpies.signTx.getCall(0).args,
+          [ { value: 'mockAmount' } ]
+        )
+      })
+    })
+
+    describe('update()', () => {
+      it('should dispatch an updateTransaction action', () => {
+        mapDispatchToPropsObject.update({
+          to: 'mockTo',
+          amount: 'mockAmount',
+          from: 'mockFrom',
+          gas: 'mockGas',
+          gasPrice: 'mockGasPrice',
+          editingTransactionId: 'mockEditingTransactionId',
+          selectedToken: 'mockSelectedToken',
+          unapprovedTxs: 'mockUnapprovedTxs',
+        })
+        assert(dispatchSpy.calledOnce)
+        assert.deepEqual(
+          utilsStubs.constructUpdatedTx.getCall(0).args[0],
+          {
+            data: undefined,
+            to: 'mockTo',
+            amount: 'mockAmount',
+            from: 'mockFrom',
+            gas: 'mockGas',
+            gasPrice: 'mockGasPrice',
+            editingTransactionId: 'mockEditingTransactionId',
+            selectedToken: 'mockSelectedToken',
+            unapprovedTxs: 'mockUnapprovedTxs',
+          }
+        )
+        assert.equal(actionSpies.updateTransaction.getCall(0).args[0], 'mockConstructedUpdatedTxParams')
+      })
+    })
+
+    describe('addToAddressBookIfNew()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.addToAddressBookIfNew('mockNewAddress', 'mockToAccounts', 'mockNickname')
+        assert(dispatchSpy.calledOnce)
+        assert.equal(utilsStubs.addressIsNew.getCall(0).args[0], 'mockToAccounts')
+        assert.deepEqual(
+          actionSpies.addToAddressBook.getCall(0).args,
+          [ '0xmockNewAddress', 'mockNickname' ]
+        )
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/pages/send/send-footer/tests/send-footer-selectors.test.js b/ui/app/pages/send/send-footer/tests/send-footer-selectors.test.js
new file mode 100644
index 000000000..8de032f57
--- /dev/null
+++ b/ui/app/pages/send/send-footer/tests/send-footer-selectors.test.js
@@ -0,0 +1,24 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+const {
+  isSendFormInError,
+} = proxyquire('../send-footer.selectors', {
+  '../send.selectors': {
+    getSendErrors: (mockState) => mockState.errors,
+  },
+})
+
+describe('send-footer selectors', () => {
+
+  describe('getTitleKey()', () => {
+    it('should return true if any of the values of the object returned by getSendErrors are truthy', () => {
+      assert.equal(isSendFormInError({ errors: { a: 'abc', b: false} }), true)
+    })
+
+    it('should return false if all of the values of the object returned by getSendErrors are falsy', () => {
+      assert.equal(isSendFormInError({ errors: { a: false, b: null} }), false)
+    })
+  })
+
+})
diff --git a/ui/app/pages/send/send-footer/tests/send-footer-utils.test.js b/ui/app/pages/send/send-footer/tests/send-footer-utils.test.js
new file mode 100644
index 000000000..f4705e691
--- /dev/null
+++ b/ui/app/pages/send/send-footer/tests/send-footer-utils.test.js
@@ -0,0 +1,233 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+const { TOKEN_TRANSFER_FUNCTION_SIGNATURE } = require('../../send.constants')
+
+const stubs = {
+  rawEncode: sinon.stub().callsFake((arr1, arr2) => {
+    return [ ...arr1, ...arr2 ]
+  }),
+}
+
+const sendUtils = proxyquire('../send-footer.utils.js', {
+  'ethereumjs-abi': {
+    rawEncode: stubs.rawEncode,
+  },
+})
+const {
+  addressIsNew,
+  constructTxParams,
+  constructUpdatedTx,
+  addHexPrefixToObjectValues,
+} = sendUtils
+
+describe('send-footer utils', () => {
+
+  describe('addHexPrefixToObjectValues()', () => {
+    it('should return a new object with the same properties with a 0x prefix', () => {
+      assert.deepEqual(
+        addHexPrefixToObjectValues({
+          prop1: '0x123',
+          prop2: '456',
+          prop3: 'x',
+        }),
+        {
+          prop1: '0x123',
+          prop2: '0x456',
+          prop3: '0xx',
+        }
+      )
+    })
+  })
+
+  describe('addressIsNew()', () => {
+    it('should return false if the address exists in toAccounts', () => {
+      assert.equal(
+        addressIsNew([
+          { address: '0xabc' },
+          { address: '0xdef' },
+          { address: '0xghi' },
+        ], '0xdef'),
+        false
+      )
+    })
+
+    it('should return true if the address does not exists in toAccounts', () => {
+      assert.equal(
+        addressIsNew([
+          { address: '0xabc' },
+          { address: '0xdef' },
+          { address: '0xghi' },
+        ], '0xxyz'),
+        true
+      )
+    })
+  })
+
+  describe('constructTxParams()', () => {
+    it('should return a new txParams object with data if there data is given', () => {
+      assert.deepEqual(
+        constructTxParams({
+          data: 'someData',
+          selectedToken: false,
+          to: 'mockTo',
+          amount: 'mockAmount',
+          from: 'mockFrom',
+          gas: 'mockGas',
+          gasPrice: 'mockGasPrice',
+        }),
+        {
+          data: '0xsomeData',
+          to: '0xmockTo',
+          value: '0xmockAmount',
+          from: '0xmockFrom',
+          gas: '0xmockGas',
+          gasPrice: '0xmockGasPrice',
+        }
+      )
+    })
+
+    it('should return a new txParams object with value and to properties if there is no selectedToken', () => {
+      assert.deepEqual(
+        constructTxParams({
+          selectedToken: false,
+          to: 'mockTo',
+          amount: 'mockAmount',
+          from: 'mockFrom',
+          gas: 'mockGas',
+          gasPrice: 'mockGasPrice',
+        }),
+        {
+          data: undefined,
+          to: '0xmockTo',
+          value: '0xmockAmount',
+          from: '0xmockFrom',
+          gas: '0xmockGas',
+          gasPrice: '0xmockGasPrice',
+        }
+      )
+    })
+
+    it('should return a new txParams object without a to property and a 0 value if there is a selectedToken', () => {
+      assert.deepEqual(
+        constructTxParams({
+          selectedToken: true,
+          to: 'mockTo',
+          amount: 'mockAmount',
+          from: 'mockFrom',
+          gas: 'mockGas',
+          gasPrice: 'mockGasPrice',
+        }),
+        {
+          data: undefined,
+          value: '0x0',
+          from: '0xmockFrom',
+          gas: '0xmockGas',
+          gasPrice: '0xmockGasPrice',
+        }
+      )
+    })
+  })
+
+  describe('constructUpdatedTx()', () => {
+    it('should return a new object with an updated txParams', () => {
+      const result = constructUpdatedTx({
+        amount: 'mockAmount',
+        editingTransactionId: '0x456',
+        from: 'mockFrom',
+        gas: 'mockGas',
+        gasPrice: 'mockGasPrice',
+        selectedToken: false,
+        to: 'mockTo',
+        unapprovedTxs: {
+          '0x123': {},
+          '0x456': {
+            unapprovedTxParam: 'someOtherParam',
+            txParams: {
+              data: 'someData',
+            },
+          },
+        },
+      })
+      assert.deepEqual(result, {
+        unapprovedTxParam: 'someOtherParam',
+        txParams: {
+          from: '0xmockFrom',
+          gas: '0xmockGas',
+          gasPrice: '0xmockGasPrice',
+          value: '0xmockAmount',
+          to: '0xmockTo',
+          data: '0xsomeData',
+        },
+      })
+    })
+
+    it('should not have data property if there is non in the original tx', () => {
+      const result = constructUpdatedTx({
+        amount: 'mockAmount',
+        editingTransactionId: '0x456',
+        from: 'mockFrom',
+        gas: 'mockGas',
+        gasPrice: 'mockGasPrice',
+        selectedToken: false,
+        to: 'mockTo',
+        unapprovedTxs: {
+          '0x123': {},
+          '0x456': {
+            unapprovedTxParam: 'someOtherParam',
+            txParams: {
+              from: 'oldFrom',
+              gas: 'oldGas',
+              gasPrice: 'oldGasPrice',
+            },
+          },
+        },
+      })
+
+      assert.deepEqual(result, {
+        unapprovedTxParam: 'someOtherParam',
+        txParams: {
+          from: '0xmockFrom',
+          gas: '0xmockGas',
+          gasPrice: '0xmockGasPrice',
+          value: '0xmockAmount',
+          to: '0xmockTo',
+        },
+      })
+    })
+
+    it('should have token property values if selectedToken is truthy', () => {
+      const result = constructUpdatedTx({
+        amount: 'mockAmount',
+        editingTransactionId: '0x456',
+        from: 'mockFrom',
+        gas: 'mockGas',
+        gasPrice: 'mockGasPrice',
+        selectedToken: {
+          address: 'mockTokenAddress',
+        },
+        to: 'mockTo',
+        unapprovedTxs: {
+          '0x123': {},
+          '0x456': {
+            unapprovedTxParam: 'someOtherParam',
+            txParams: {},
+          },
+        },
+      })
+
+      assert.deepEqual(result, {
+        unapprovedTxParam: 'someOtherParam',
+        txParams: {
+          from: '0xmockFrom',
+          gas: '0xmockGas',
+          gasPrice: '0xmockGasPrice',
+          value: '0x0',
+          to: '0xmockTokenAddress',
+          data: `${TOKEN_TRANSFER_FUNCTION_SIGNATURE}ss56Tont`,
+        },
+      })
+    })
+  })
+
+})
diff --git a/ui/app/pages/send/send-header/README.md b/ui/app/pages/send/send-header/README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/pages/send/send-header/index.js b/ui/app/pages/send/send-header/index.js
new file mode 100644
index 000000000..0b17f0b7d
--- /dev/null
+++ b/ui/app/pages/send/send-header/index.js
@@ -0,0 +1 @@
+export { default } from './send-header.container'
diff --git a/ui/app/pages/send/send-header/send-header.component.js b/ui/app/pages/send/send-header/send-header.component.js
new file mode 100644
index 000000000..02bda383e
--- /dev/null
+++ b/ui/app/pages/send/send-header/send-header.component.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import PageContainerHeader from '../../../components/ui/page-container/page-container-header'
+import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'
+
+export default class SendHeader extends Component {
+
+  static propTypes = {
+    clearSend: PropTypes.func,
+    history: PropTypes.object,
+    titleKey: PropTypes.string,
+    subtitleParams: PropTypes.array,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  onClose () {
+    this.props.clearSend()
+    this.props.history.push(DEFAULT_ROUTE)
+  }
+
+  render () {
+    return (
+      <PageContainerHeader
+        onClose={() => this.onClose()}
+        subtitle={this.context.t(...this.props.subtitleParams)}
+        title={this.context.t(this.props.titleKey)}
+      />
+    )
+  }
+
+}
diff --git a/ui/app/pages/send/send-header/send-header.container.js b/ui/app/pages/send/send-header/send-header.container.js
new file mode 100644
index 000000000..1a9c5e9c0
--- /dev/null
+++ b/ui/app/pages/send/send-header/send-header.container.js
@@ -0,0 +1,19 @@
+import { connect } from 'react-redux'
+import { clearSend } from '../../../store/actions'
+import SendHeader from './send-header.component'
+import { getSubtitleParams, getTitleKey } from './send-header.selectors'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendHeader)
+
+function mapStateToProps (state) {
+  return {
+    titleKey: getTitleKey(state),
+    subtitleParams: getSubtitleParams(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    clearSend: () => dispatch(clearSend()),
+  }
+}
diff --git a/ui/app/pages/send/send-header/send-header.selectors.js b/ui/app/pages/send/send-header/send-header.selectors.js
new file mode 100644
index 000000000..d7c9d3766
--- /dev/null
+++ b/ui/app/pages/send/send-header/send-header.selectors.js
@@ -0,0 +1,37 @@
+const {
+  getSelectedToken,
+  getSendEditingTransactionId,
+} = require('../send.selectors.js')
+
+const selectors = {
+  getTitleKey,
+  getSubtitleParams,
+}
+
+module.exports = selectors
+
+function getTitleKey (state) {
+  const isEditing = Boolean(getSendEditingTransactionId(state))
+  const isToken = Boolean(getSelectedToken(state))
+
+  if (isEditing) {
+    return 'edit'
+  } else if (isToken) {
+    return 'sendTokens'
+  } else {
+    return 'sendETH'
+  }
+}
+
+function getSubtitleParams (state) {
+    const isEditing = Boolean(getSendEditingTransactionId(state))
+    const token = getSelectedToken(state)
+
+    if (isEditing) {
+      return [ 'editingTransaction' ]
+    } else if (token) {
+      return [ 'onlySendTokensToAccountAddress', [ token.symbol ] ]
+    } else {
+      return [ 'onlySendToEtherAddress' ]
+    }
+}
diff --git a/ui/app/pages/send/send-header/tests/send-header-component.test.js b/ui/app/pages/send/send-header/tests/send-header-component.test.js
new file mode 100644
index 000000000..4a5575e9f
--- /dev/null
+++ b/ui/app/pages/send/send-header/tests/send-header-component.test.js
@@ -0,0 +1,70 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes'
+import SendHeader from '../send-header.component.js'
+
+import PageContainerHeader from '../../../../components/ui/page-container/page-container-header'
+
+const propsMethodSpies = {
+  clearSend: sinon.spy(),
+}
+const historySpies = {
+  push: sinon.spy(),
+}
+
+sinon.spy(SendHeader.prototype, 'onClose')
+
+describe('SendHeader Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<SendHeader
+      clearSend={propsMethodSpies.clearSend}
+      history={historySpies}
+      titleKey={'mockTitleKey'}
+      subtitleParams={[ 'mockSubtitleKey', 'mockVal']}
+    />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
+  })
+
+  afterEach(() => {
+    propsMethodSpies.clearSend.resetHistory()
+    historySpies.push.resetHistory()
+    SendHeader.prototype.onClose.resetHistory()
+  })
+
+  describe('onClose', () => {
+    it('should call clearSend', () => {
+      assert.equal(propsMethodSpies.clearSend.callCount, 0)
+      wrapper.instance().onClose()
+      assert.equal(propsMethodSpies.clearSend.callCount, 1)
+    })
+
+    it('should call history.push', () => {
+      assert.equal(historySpies.push.callCount, 0)
+      wrapper.instance().onClose()
+      assert.equal(historySpies.push.callCount, 1)
+      assert.equal(historySpies.push.getCall(0).args[0], DEFAULT_ROUTE)
+    })
+  })
+
+  describe('render', () => {
+    it('should render a PageContainerHeader compenent', () => {
+      assert.equal(wrapper.find(PageContainerHeader).length, 1)
+    })
+
+    it('should pass the correct props to PageContainerHeader', () => {
+      const {
+        onClose,
+        subtitle,
+        title,
+      } = wrapper.find(PageContainerHeader).props()
+      assert.equal(subtitle, 'mockSubtitleKeymockVal')
+      assert.equal(title, 'mockTitleKey')
+      assert.equal(SendHeader.prototype.onClose.callCount, 0)
+      onClose()
+      assert.equal(SendHeader.prototype.onClose.callCount, 1)
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-header/tests/send-header-container.test.js b/ui/app/pages/send/send-header/tests/send-header-container.test.js
new file mode 100644
index 000000000..fdad8aab3
--- /dev/null
+++ b/ui/app/pages/send/send-header/tests/send-header-container.test.js
@@ -0,0 +1,59 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+
+const actionSpies = {
+  clearSend: sinon.spy(),
+}
+
+proxyquire('../send-header.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },
+  '../../../store/actions': actionSpies,
+  './send-header.selectors': {
+    getTitleKey: (s) => `mockTitleKey:${s}`,
+    getSubtitleParams: (s) => `mockSubtitleParams:${s}`,
+  },
+})
+
+describe('send-header container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        titleKey: 'mockTitleKey:mockState',
+        subtitleParams: 'mockSubtitleParams:mockState',
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+    })
+
+    describe('clearSend()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.clearSend()
+        assert(dispatchSpy.calledOnce)
+        assert(actionSpies.clearSend.calledOnce)
+      })
+    })
+
+  })
+
+})
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
new file mode 100644
index 000000000..e0c6a3ab3
--- /dev/null
+++ b/ui/app/pages/send/send-header/tests/send-header-selectors.test.js
@@ -0,0 +1,47 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+const {
+  getTitleKey,
+  getSubtitleParams,
+} = proxyquire('../send-header.selectors', {
+  '../send.selectors': {
+    getSelectedToken: (mockState) => mockState.t,
+    getSendEditingTransactionId: (mockState) => mockState.e,
+  },
+})
+
+describe('send-header selectors', () => {
+
+  describe('getTitleKey()', () => {
+    it('should return the correct key when getSendEditingTransactionId is truthy', () => {
+      assert.equal(getTitleKey({ e: 1, t: true }), 'edit')
+    })
+
+    it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => {
+      assert.equal(getTitleKey({ e: null, t: 'abc' }), 'sendTokens')
+    })
+
+    it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => {
+      assert.equal(getTitleKey({ e: null }), 'sendETH')
+    })
+  })
+
+  describe('getSubtitleParams()', () => {
+    it('should return the correct params when getSendEditingTransactionId is truthy', () => {
+      assert.deepEqual(getSubtitleParams({ e: 1, t: true }), [ 'editingTransaction' ])
+    })
+
+    it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => {
+      assert.deepEqual(
+        getSubtitleParams({ e: null, t: { symbol: 'ABC' } }),
+        [ 'onlySendTokensToAccountAddress', [ 'ABC' ] ]
+      )
+    })
+
+    it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => {
+      assert.deepEqual(getSubtitleParams({ e: null }), [ 'onlySendToEtherAddress' ])
+    })
+  })
+
+})
diff --git a/ui/app/pages/send/send.component.js b/ui/app/pages/send/send.component.js
new file mode 100644
index 000000000..5f0c9c9f2
--- /dev/null
+++ b/ui/app/pages/send/send.component.js
@@ -0,0 +1,230 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import PersistentForm from '../../../lib/persistent-form'
+import {
+  getAmountErrorObject,
+  getGasFeeErrorObject,
+  getToAddressForGasUpdate,
+  doesAmountErrorRequireUpdate,
+} from './send.utils'
+
+import SendHeader from './send-header'
+import SendContent from './send-content'
+import SendFooter from './send-footer'
+
+export default class SendTransactionScreen extends PersistentForm {
+
+  static propTypes = {
+    amount: PropTypes.string,
+    amountConversionRate: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    blockGasLimit: PropTypes.string,
+    conversionRate: PropTypes.number,
+    editingTransactionId: PropTypes.string,
+    from: PropTypes.object,
+    gasLimit: PropTypes.string,
+    gasPrice: PropTypes.string,
+    gasTotal: PropTypes.string,
+    history: PropTypes.object,
+    network: PropTypes.string,
+    primaryCurrency: PropTypes.string,
+    recentBlocks: PropTypes.array,
+    selectedAddress: PropTypes.string,
+    selectedToken: PropTypes.object,
+    tokenBalance: PropTypes.string,
+    tokenContract: PropTypes.object,
+    fetchBasicGasEstimates: PropTypes.func,
+    updateAndSetGasTotal: PropTypes.func,
+    updateSendErrors: PropTypes.func,
+    updateSendTokenBalance: PropTypes.func,
+    scanQrCode: PropTypes.func,
+    qrCodeDetected: PropTypes.func,
+    qrCodeData: PropTypes.object,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.qrCodeData) {
+      if (nextProps.qrCodeData.type === 'address') {
+        const scannedAddress = nextProps.qrCodeData.values.address.toLowerCase()
+        const currentAddress = this.props.to && this.props.to.toLowerCase()
+        if (currentAddress !== scannedAddress) {
+          this.props.updateSendTo(scannedAddress)
+          this.updateGas({ to: scannedAddress })
+          // Clean up QR code data after handling
+          this.props.qrCodeDetected(null)
+        }
+      }
+    }
+  }
+
+  updateGas ({ to: updatedToAddress, amount: value, data } = {}) {
+    const {
+      amount,
+      blockGasLimit,
+      editingTransactionId,
+      gasLimit,
+      gasPrice,
+      recentBlocks,
+      selectedAddress,
+      selectedToken = {},
+      to: currentToAddress,
+      updateAndSetGasLimit,
+    } = this.props
+
+    updateAndSetGasLimit({
+      blockGasLimit,
+      editingTransactionId,
+      gasLimit,
+      gasPrice,
+      recentBlocks,
+      selectedAddress,
+      selectedToken,
+      to: getToAddressForGasUpdate(updatedToAddress, currentToAddress),
+      value: value || amount,
+      data,
+    })
+  }
+
+  componentDidUpdate (prevProps) {
+    const {
+      amount,
+      amountConversionRate,
+      conversionRate,
+      from: { address, balance },
+      gasTotal,
+      network,
+      primaryCurrency,
+      selectedToken,
+      tokenBalance,
+      updateSendErrors,
+      updateSendTokenBalance,
+      tokenContract,
+    } = this.props
+
+    const {
+      from: { balance: prevBalance },
+      gasTotal: prevGasTotal,
+      tokenBalance: prevTokenBalance,
+      network: prevNetwork,
+      selectedToken: prevSelectedToken,
+    } = prevProps
+
+    const uninitialized = [prevBalance, prevGasTotal].every(n => n === null)
+
+    const amountErrorRequiresUpdate = doesAmountErrorRequireUpdate({
+      balance,
+      gasTotal,
+      prevBalance,
+      prevGasTotal,
+      prevTokenBalance,
+      selectedToken,
+      tokenBalance,
+    })
+
+    if (amountErrorRequiresUpdate) {
+      const amountErrorObject = getAmountErrorObject({
+        amount,
+        amountConversionRate,
+        balance,
+        conversionRate,
+        gasTotal,
+        primaryCurrency,
+        selectedToken,
+        tokenBalance,
+      })
+      const gasFeeErrorObject = selectedToken
+        ? getGasFeeErrorObject({
+          amountConversionRate,
+          balance,
+          conversionRate,
+          gasTotal,
+          primaryCurrency,
+          selectedToken,
+        })
+        : { gasFee: null }
+      updateSendErrors(Object.assign(amountErrorObject, gasFeeErrorObject))
+    }
+
+    if (!uninitialized) {
+
+      if (network !== prevNetwork && network !== 'loading') {
+        updateSendTokenBalance({
+          selectedToken,
+          tokenContract,
+          address,
+        })
+        this.updateGas()
+      }
+    }
+
+    const prevTokenAddress = prevSelectedToken && prevSelectedToken.address
+    const selectedTokenAddress = selectedToken && selectedToken.address
+
+    if (selectedTokenAddress && prevTokenAddress !== selectedTokenAddress) {
+      this.updateSendToken()
+    }
+  }
+
+  componentDidMount () {
+    this.props.fetchBasicGasEstimates()
+    .then(() => {
+      this.updateGas()
+    })
+  }
+
+  componentWillMount () {
+    this.updateSendToken()
+
+    // Show QR Scanner modal  if ?scan=true
+    if (window.location.search === '?scan=true') {
+      this.props.scanQrCode()
+
+      // Clear the queryString param after showing the modal
+      const cleanUrl = location.href.split('?')[0]
+      history.pushState({}, null, `${cleanUrl}`)
+      window.location.hash = '#send'
+    }
+  }
+
+  componentWillUnmount () {
+    this.props.resetSendState()
+  }
+
+  updateSendToken () {
+    const {
+      from: { address },
+      selectedToken,
+      tokenContract,
+      updateSendTokenBalance,
+    } = this.props
+
+    updateSendTokenBalance({
+      selectedToken,
+      tokenContract,
+      address,
+    })
+  }
+
+  render () {
+    const { history, showHexData } = this.props
+
+    return (
+      <div className="page-container">
+        <SendHeader history={history}/>
+        <SendContent
+          updateGas={(updateData) => this.updateGas(updateData)}
+          scanQrCode={_ => this.props.scanQrCode()}
+          showHexData={showHexData}
+        />
+        <SendFooter history={history}/>
+      </div>
+    )
+  }
+
+}
diff --git a/ui/app/pages/send/send.constants.js b/ui/app/pages/send/send.constants.js
new file mode 100644
index 000000000..d3fa38d10
--- /dev/null
+++ b/ui/app/pages/send/send.constants.js
@@ -0,0 +1,61 @@
+const ethUtil = require('ethereumjs-util')
+const { conversionUtil, multiplyCurrencies } = require('../../helpers/utils/conversion-util')
+
+const MIN_GAS_PRICE_DEC = '0'
+const MIN_GAS_PRICE_HEX = (parseInt(MIN_GAS_PRICE_DEC)).toString(16)
+const MIN_GAS_LIMIT_DEC = '21000'
+const MIN_GAS_LIMIT_HEX = (parseInt(MIN_GAS_LIMIT_DEC)).toString(16)
+
+const MIN_GAS_PRICE_GWEI = ethUtil.addHexPrefix(conversionUtil(MIN_GAS_PRICE_HEX, {
+  fromDenomination: 'WEI',
+  toDenomination: 'GWEI',
+  fromNumericBase: 'hex',
+  toNumericBase: 'hex',
+  numberOfDecimals: 1,
+}))
+
+const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT_HEX, MIN_GAS_PRICE_HEX, {
+  toNumericBase: 'hex',
+  multiplicandBase: 16,
+  multiplierBase: 16,
+})
+
+const TOKEN_TRANSFER_FUNCTION_SIGNATURE = '0xa9059cbb'
+
+const INSUFFICIENT_FUNDS_ERROR = 'insufficientFunds'
+const INSUFFICIENT_TOKENS_ERROR = 'insufficientTokens'
+const NEGATIVE_ETH_ERROR = 'negativeETH'
+const INVALID_RECIPIENT_ADDRESS_ERROR = 'invalidAddressRecipient'
+const INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR = 'invalidAddressRecipientNotEthNetwork'
+const REQUIRED_ERROR = 'required'
+const KNOWN_RECIPIENT_ADDRESS_ERROR = 'knownAddressRecipient'
+
+const ONE_GWEI_IN_WEI_HEX = ethUtil.addHexPrefix(conversionUtil('0x1', {
+  fromDenomination: 'GWEI',
+  toDenomination: 'WEI',
+  fromNumericBase: 'hex',
+  toNumericBase: 'hex',
+}))
+
+const SIMPLE_GAS_COST = '0x5208' // Hex for 21000, cost of a simple send.
+const BASE_TOKEN_GAS_COST = '0x186a0' // Hex for 100000, a base estimate for token transfers.
+
+module.exports = {
+  INSUFFICIENT_FUNDS_ERROR,
+  INSUFFICIENT_TOKENS_ERROR,
+  INVALID_RECIPIENT_ADDRESS_ERROR,
+  KNOWN_RECIPIENT_ADDRESS_ERROR,
+  INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR,
+  MIN_GAS_LIMIT_DEC,
+  MIN_GAS_LIMIT_HEX,
+  MIN_GAS_PRICE_DEC,
+  MIN_GAS_PRICE_GWEI,
+  MIN_GAS_PRICE_HEX,
+  MIN_GAS_TOTAL,
+  NEGATIVE_ETH_ERROR,
+  ONE_GWEI_IN_WEI_HEX,
+  REQUIRED_ERROR,
+  SIMPLE_GAS_COST,
+  TOKEN_TRANSFER_FUNCTION_SIGNATURE,
+  BASE_TOKEN_GAS_COST,
+}
diff --git a/ui/app/pages/send/send.container.js b/ui/app/pages/send/send.container.js
new file mode 100644
index 000000000..69adbb765
--- /dev/null
+++ b/ui/app/pages/send/send.container.js
@@ -0,0 +1,115 @@
+import { connect } from 'react-redux'
+import SendEther from './send.component'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+const {
+  getSelectedAddress,
+} = require('../../selectors/selectors')
+
+import {
+  getAmountConversionRate,
+  getBlockGasLimit,
+  getConversionRate,
+  getCurrentNetwork,
+  getGasLimit,
+  getGasPrice,
+  getGasTotal,
+  getPrimaryCurrency,
+  getRecentBlocks,
+  getSelectedToken,
+  getSelectedTokenContract,
+  getSelectedTokenToFiatRate,
+  getSendAmount,
+  getSendEditingTransactionId,
+  getSendHexDataFeatureFlagState,
+  getSendFromObject,
+  getSendTo,
+  getTokenBalance,
+  getQrCodeData,
+} from './send.selectors'
+import {
+  updateSendTo,
+  updateSendTokenBalance,
+  updateGasData,
+  setGasTotal,
+  showQrScanner,
+  qrCodeDetected,
+} from '../../store/actions'
+import {
+  resetSendState,
+  updateSendErrors,
+} from '../../ducks/send/send.duck'
+import {
+  fetchBasicGasEstimates,
+} from '../../ducks/gas/gas.duck'
+import {
+  calcGasTotal,
+} from './send.utils.js'
+
+import {
+  SEND_ROUTE,
+} from '../../helpers/constants/routes'
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(SendEther)
+
+function mapStateToProps (state) {
+  return {
+    amount: getSendAmount(state),
+    amountConversionRate: getAmountConversionRate(state),
+    blockGasLimit: getBlockGasLimit(state),
+    conversionRate: getConversionRate(state),
+    editingTransactionId: getSendEditingTransactionId(state),
+    from: getSendFromObject(state),
+    gasLimit: getGasLimit(state),
+    gasPrice: getGasPrice(state),
+    gasTotal: getGasTotal(state),
+    network: getCurrentNetwork(state),
+    primaryCurrency: getPrimaryCurrency(state),
+    recentBlocks: getRecentBlocks(state),
+    selectedAddress: getSelectedAddress(state),
+    selectedToken: getSelectedToken(state),
+    showHexData: getSendHexDataFeatureFlagState(state),
+    to: getSendTo(state),
+    tokenBalance: getTokenBalance(state),
+    tokenContract: getSelectedTokenContract(state),
+    tokenToFiatRate: getSelectedTokenToFiatRate(state),
+    qrCodeData: getQrCodeData(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    updateAndSetGasLimit: ({
+      blockGasLimit,
+      editingTransactionId,
+      gasLimit,
+      gasPrice,
+      recentBlocks,
+      selectedAddress,
+      selectedToken,
+      to,
+      value,
+      data,
+    }) => {
+      !editingTransactionId
+        ? dispatch(updateGasData({ gasPrice, recentBlocks, selectedAddress, selectedToken, blockGasLimit, to, value, data }))
+        : dispatch(setGasTotal(calcGasTotal(gasLimit, gasPrice)))
+    },
+    updateSendTokenBalance: ({ selectedToken, tokenContract, address }) => {
+      dispatch(updateSendTokenBalance({
+        selectedToken,
+        tokenContract,
+        address,
+      }))
+    },
+    updateSendErrors: newError => dispatch(updateSendErrors(newError)),
+    resetSendState: () => dispatch(resetSendState()),
+    scanQrCode: () => dispatch(showQrScanner(SEND_ROUTE)),
+    qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
+    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
+    fetchBasicGasEstimates: () => dispatch(fetchBasicGasEstimates()),
+  }
+}
diff --git a/ui/app/pages/send/send.scss b/ui/app/pages/send/send.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/pages/send/send.selectors.js b/ui/app/pages/send/send.selectors.js
new file mode 100644
index 000000000..d4035df28
--- /dev/null
+++ b/ui/app/pages/send/send.selectors.js
@@ -0,0 +1,283 @@
+const { valuesFor } = require('../../helpers/utils/util')
+const abi = require('human-standard-token-abi')
+const {
+  multiplyCurrencies,
+} = require('../../helpers/utils/conversion-util')
+const {
+  getMetaMaskAccounts,
+  getSelectedAddress,
+} = require('../../selectors/selectors')
+const {
+  estimateGasPriceFromRecentBlocks,
+  calcGasTotal,
+} = require('./send.utils')
+import {
+  getFastPriceEstimateInHexWEI,
+} from '../../selectors/custom-gas'
+
+const selectors = {
+  accountsWithSendEtherInfoSelector,
+  getAddressBook,
+  getAmountConversionRate,
+  getBlockGasLimit,
+  getConversionRate,
+  getCurrentAccountWithSendEtherInfo,
+  getCurrentCurrency,
+  getCurrentNetwork,
+  getCurrentViewContext,
+  getForceGasMin,
+  getNativeCurrency,
+  getGasLimit,
+  getGasPrice,
+  getGasPriceFromRecentBlocks,
+  getGasTotal,
+  getPrimaryCurrency,
+  getRecentBlocks,
+  getSelectedAccount,
+  getSelectedIdentity,
+  getSelectedToken,
+  getSelectedTokenContract,
+  getSelectedTokenExchangeRate,
+  getSelectedTokenToFiatRate,
+  getSendAmount,
+  getSendHexData,
+  getSendHexDataFeatureFlagState,
+  getSendEditingTransactionId,
+  getSendErrors,
+  getSendFrom,
+  getSendFromBalance,
+  getSendFromObject,
+  getSendMaxModeState,
+  getSendTo,
+  getSendToAccounts,
+  getSendWarnings,
+  getTokenBalance,
+  getTokenExchangeRate,
+  getUnapprovedTxs,
+  transactionsSelector,
+  getQrCodeData,
+}
+
+module.exports = selectors
+
+function accountsWithSendEtherInfoSelector (state) {
+  const accounts = getMetaMaskAccounts(state)
+  const { identities } = state.metamask
+
+  const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => {
+    return Object.assign({}, account, identities[key])
+  })
+
+  return accountsWithSendEtherInfo
+}
+
+function getAddressBook (state) {
+  return state.metamask.addressBook
+}
+
+function getAmountConversionRate (state) {
+  return getSelectedToken(state)
+    ? getSelectedTokenToFiatRate(state)
+    : getConversionRate(state)
+}
+
+function getBlockGasLimit (state) {
+  return state.metamask.currentBlockGasLimit
+}
+
+function getConversionRate (state) {
+  return state.metamask.conversionRate
+}
+
+function getCurrentAccountWithSendEtherInfo (state) {
+  const currentAddress = getSelectedAddress(state)
+  const accounts = accountsWithSendEtherInfoSelector(state)
+
+  return accounts.find(({ address }) => address === currentAddress)
+}
+
+function getCurrentCurrency (state) {
+  return state.metamask.currentCurrency
+}
+
+function getNativeCurrency (state) {
+  return state.metamask.nativeCurrency
+}
+
+function getCurrentNetwork (state) {
+  return state.metamask.network
+}
+
+function getCurrentViewContext (state) {
+  const { currentView = {} } = state.appState
+  return currentView.context
+}
+
+function getForceGasMin (state) {
+  return state.metamask.send.forceGasMin
+}
+
+function getGasLimit (state) {
+  return state.metamask.send.gasLimit || '0'
+}
+
+function getGasPrice (state) {
+  return state.metamask.send.gasPrice || getFastPriceEstimateInHexWEI(state)
+}
+
+function getGasPriceFromRecentBlocks (state) {
+  return estimateGasPriceFromRecentBlocks(state.metamask.recentBlocks)
+}
+
+function getGasTotal (state) {
+  return calcGasTotal(getGasLimit(state), getGasPrice(state))
+}
+
+function getPrimaryCurrency (state) {
+  const selectedToken = getSelectedToken(state)
+  return selectedToken && selectedToken.symbol
+}
+
+function getRecentBlocks (state) {
+  return state.metamask.recentBlocks
+}
+
+function getSelectedAccount (state) {
+  const accounts = getMetaMaskAccounts(state)
+  const selectedAddress = getSelectedAddress(state)
+
+  return accounts[selectedAddress]
+}
+
+function getSelectedIdentity (state) {
+  const selectedAddress = getSelectedAddress(state)
+  const identities = state.metamask.identities
+
+  return identities[selectedAddress]
+}
+
+function getSelectedToken (state) {
+  const tokens = state.metamask.tokens || []
+  const selectedTokenAddress = state.metamask.selectedTokenAddress
+  const selectedToken = tokens.filter(({ address }) => address === selectedTokenAddress)[0]
+  const sendToken = state.metamask.send.token
+
+  return selectedToken || sendToken || null
+}
+
+function getSelectedTokenContract (state) {
+  const selectedToken = getSelectedToken(state)
+
+  return selectedToken
+    ? global.eth.contract(abi).at(selectedToken.address)
+    : null
+}
+
+function getSelectedTokenExchangeRate (state) {
+  const tokenExchangeRates = state.metamask.tokenExchangeRates
+  const selectedToken = getSelectedToken(state) || {}
+  const { symbol = '' } = selectedToken
+  const pair = `${symbol.toLowerCase()}_eth`
+  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates && tokenExchangeRates[pair] || {}
+
+  return tokenExchangeRate
+}
+
+function getSelectedTokenToFiatRate (state) {
+  const selectedTokenExchangeRate = getSelectedTokenExchangeRate(state)
+  const conversionRate = getConversionRate(state)
+
+  const tokenToFiatRate = multiplyCurrencies(
+    conversionRate,
+    selectedTokenExchangeRate,
+    { toNumericBase: 'dec' }
+  )
+
+  return tokenToFiatRate
+}
+
+function getSendAmount (state) {
+  return state.metamask.send.amount
+}
+
+function getSendHexData (state) {
+  return state.metamask.send.data
+}
+
+function getSendHexDataFeatureFlagState (state) {
+  return state.metamask.featureFlags.sendHexData
+}
+
+function getSendEditingTransactionId (state) {
+  return state.metamask.send.editingTransactionId
+}
+
+function getSendErrors (state) {
+  return state.send.errors
+}
+
+function getSendFrom (state) {
+  return state.metamask.send.from
+}
+
+function getSendFromBalance (state) {
+  const from = getSendFrom(state) || getSelectedAccount(state)
+  return from.balance
+}
+
+function getSendFromObject (state) {
+  return getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state)
+}
+
+function getSendMaxModeState (state) {
+  return state.metamask.send.maxModeOn
+}
+
+function getSendTo (state) {
+  return state.metamask.send.to
+}
+
+function getSendToAccounts (state) {
+  const fromAccounts = accountsWithSendEtherInfoSelector(state)
+  const addressBookAccounts = getAddressBook(state)
+  return [...fromAccounts, ...addressBookAccounts]
+}
+
+function getSendWarnings (state) {
+  return state.send.warnings
+}
+
+function getTokenBalance (state) {
+  return state.metamask.send.tokenBalance
+}
+
+function getTokenExchangeRate (state, tokenSymbol) {
+  const pair = `${tokenSymbol.toLowerCase()}_eth`
+  const tokenExchangeRates = state.metamask.tokenExchangeRates
+  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
+
+  return tokenExchangeRate
+}
+
+function getUnapprovedTxs (state) {
+  return state.metamask.unapprovedTxs
+}
+
+function transactionsSelector (state) {
+  const { network, selectedTokenAddress } = state.metamask
+  const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs)
+  const shapeShiftTxList = (network === '1') ? state.metamask.shapeShiftTxList : undefined
+  const transactions = state.metamask.selectedAddressTxList || []
+  const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList)
+
+  return selectedTokenAddress
+    ? txsToRender
+      .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress)
+      .sort((a, b) => b.time - a.time)
+    : txsToRender
+      .sort((a, b) => b.time - a.time)
+}
+
+function getQrCodeData (state) {
+  return state.appState.qrCodeData
+}
diff --git a/ui/app/pages/send/send.utils.js b/ui/app/pages/send/send.utils.js
new file mode 100644
index 000000000..4acc174f9
--- /dev/null
+++ b/ui/app/pages/send/send.utils.js
@@ -0,0 +1,332 @@
+const {
+  addCurrencies,
+  conversionUtil,
+  conversionGTE,
+  multiplyCurrencies,
+  conversionGreaterThan,
+  conversionLessThan,
+} = require('../../helpers/utils/conversion-util')
+const {
+  calcTokenAmount,
+} = require('../../helpers/utils/token-util')
+const {
+  BASE_TOKEN_GAS_COST,
+  INSUFFICIENT_FUNDS_ERROR,
+  INSUFFICIENT_TOKENS_ERROR,
+  NEGATIVE_ETH_ERROR,
+  ONE_GWEI_IN_WEI_HEX,
+  SIMPLE_GAS_COST,
+  TOKEN_TRANSFER_FUNCTION_SIGNATURE,
+} = require('./send.constants')
+const abi = require('ethereumjs-abi')
+const ethUtil = require('ethereumjs-util')
+
+module.exports = {
+  addGasBuffer,
+  calcGasTotal,
+  calcTokenBalance,
+  doesAmountErrorRequireUpdate,
+  estimateGas,
+  estimateGasPriceFromRecentBlocks,
+  generateTokenTransferData,
+  getAmountErrorObject,
+  getGasFeeErrorObject,
+  getToAddressForGasUpdate,
+  isBalanceSufficient,
+  isTokenBalanceSufficient,
+  removeLeadingZeroes,
+}
+
+function calcGasTotal (gasLimit = '0', gasPrice = '0') {
+  return multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+}
+
+function isBalanceSufficient ({
+  amount = '0x0',
+  amountConversionRate = 1,
+  balance = '0x0',
+  conversionRate = 1,
+  gasTotal = '0x0',
+  primaryCurrency,
+}) {
+  const totalAmount = addCurrencies(amount, gasTotal, {
+    aBase: 16,
+    bBase: 16,
+    toNumericBase: 'hex',
+  })
+
+  const balanceIsSufficient = conversionGTE(
+    {
+      value: balance,
+      fromNumericBase: 'hex',
+      fromCurrency: primaryCurrency,
+      conversionRate,
+    },
+    {
+      value: totalAmount,
+      fromNumericBase: 'hex',
+      conversionRate: Number(amountConversionRate) || conversionRate,
+      fromCurrency: primaryCurrency,
+    },
+  )
+
+  return balanceIsSufficient
+}
+
+function isTokenBalanceSufficient ({
+  amount = '0x0',
+  tokenBalance,
+  decimals,
+}) {
+  const amountInDec = conversionUtil(amount, {
+    fromNumericBase: 'hex',
+  })
+
+  const tokenBalanceIsSufficient = conversionGTE(
+    {
+      value: tokenBalance,
+      fromNumericBase: 'hex',
+    },
+    {
+      value: calcTokenAmount(amountInDec, decimals),
+    },
+  )
+
+  return tokenBalanceIsSufficient
+}
+
+function getAmountErrorObject ({
+  amount,
+  amountConversionRate,
+  balance,
+  conversionRate,
+  gasTotal,
+  primaryCurrency,
+  selectedToken,
+  tokenBalance,
+}) {
+  let insufficientFunds = false
+  if (gasTotal && conversionRate && !selectedToken) {
+    insufficientFunds = !isBalanceSufficient({
+      amount,
+      amountConversionRate,
+      balance,
+      conversionRate,
+      gasTotal,
+      primaryCurrency,
+    })
+  }
+
+  let inSufficientTokens = false
+  if (selectedToken && tokenBalance !== null) {
+    const { decimals } = selectedToken
+    inSufficientTokens = !isTokenBalanceSufficient({
+      tokenBalance,
+      amount,
+      decimals,
+    })
+  }
+
+  const amountLessThanZero = conversionGreaterThan(
+    { value: 0, fromNumericBase: 'dec' },
+    { value: amount, fromNumericBase: 'hex' },
+  )
+
+  let amountError = null
+
+  if (insufficientFunds) {
+    amountError = INSUFFICIENT_FUNDS_ERROR
+  } else if (inSufficientTokens) {
+    amountError = INSUFFICIENT_TOKENS_ERROR
+  } else if (amountLessThanZero) {
+    amountError = NEGATIVE_ETH_ERROR
+  }
+
+  return { amount: amountError }
+}
+
+function getGasFeeErrorObject ({
+  amountConversionRate,
+  balance,
+  conversionRate,
+  gasTotal,
+  primaryCurrency,
+}) {
+  let gasFeeError = null
+
+  if (gasTotal && conversionRate) {
+    const insufficientFunds = !isBalanceSufficient({
+      amount: '0x0',
+      amountConversionRate,
+      balance,
+      conversionRate,
+      gasTotal,
+      primaryCurrency,
+    })
+
+    if (insufficientFunds) {
+      gasFeeError = INSUFFICIENT_FUNDS_ERROR
+    }
+  }
+
+  return { gasFee: gasFeeError }
+}
+
+function calcTokenBalance ({ selectedToken, usersToken }) {
+  const { decimals } = selectedToken || {}
+  return calcTokenAmount(usersToken.balance.toString(), decimals).toString(16)
+}
+
+function doesAmountErrorRequireUpdate ({
+  balance,
+  gasTotal,
+  prevBalance,
+  prevGasTotal,
+  prevTokenBalance,
+  selectedToken,
+  tokenBalance,
+}) {
+  const balanceHasChanged = balance !== prevBalance
+  const gasTotalHasChange = gasTotal !== prevGasTotal
+  const tokenBalanceHasChanged = selectedToken && tokenBalance !== prevTokenBalance
+  const amountErrorRequiresUpdate = balanceHasChanged || gasTotalHasChange || tokenBalanceHasChanged
+
+  return amountErrorRequiresUpdate
+}
+
+async function estimateGas ({
+  selectedAddress,
+  selectedToken,
+  blockGasLimit,
+  to,
+  value,
+  data,
+  gasPrice,
+  estimateGasMethod,
+}) {
+  const paramsForGasEstimate = { from: selectedAddress, value, gasPrice }
+
+  // if recipient has no code, gas is 21k max:
+  if (!selectedToken && !data) {
+    const code = Boolean(to) && await global.eth.getCode(to)
+    // Geth will return '0x', and ganache-core v2.2.1 will return '0x0'
+    const codeIsEmpty = !code || code === '0x' || code === '0x0'
+    if (codeIsEmpty) {
+      return SIMPLE_GAS_COST
+    }
+  } else if (selectedToken && !to) {
+    return BASE_TOKEN_GAS_COST
+  }
+
+  if (selectedToken) {
+    paramsForGasEstimate.value = '0x0'
+    paramsForGasEstimate.data = generateTokenTransferData({ toAddress: to, amount: value, selectedToken })
+    paramsForGasEstimate.to = selectedToken.address
+  } else {
+    if (data) {
+      paramsForGasEstimate.data = data
+    }
+
+    if (to) {
+      paramsForGasEstimate.to = to
+    }
+
+    if (!value || value === '0') {
+      paramsForGasEstimate.value = '0xff'
+    }
+  }
+
+  // if not, fall back to block gasLimit
+  paramsForGasEstimate.gas = ethUtil.addHexPrefix(multiplyCurrencies(blockGasLimit || '0x5208', 0.95, {
+    multiplicandBase: 16,
+    multiplierBase: 10,
+    roundDown: '0',
+    toNumericBase: 'hex',
+  }))
+  // run tx
+  return new Promise((resolve, reject) => {
+    return estimateGasMethod(paramsForGasEstimate, (err, estimatedGas) => {
+      if (err) {
+        const simulationFailed = (
+          err.message.includes('Transaction execution error.') ||
+          err.message.includes('gas required exceeds allowance or always failing transaction')
+        )
+        if (simulationFailed) {
+          const estimateWithBuffer = addGasBuffer(paramsForGasEstimate.gas, blockGasLimit, 1.5)
+          return resolve(ethUtil.addHexPrefix(estimateWithBuffer))
+        } else {
+          return reject(err)
+        }
+      }
+      const estimateWithBuffer = addGasBuffer(estimatedGas.toString(16), blockGasLimit, 1.5)
+      return resolve(ethUtil.addHexPrefix(estimateWithBuffer))
+    })
+  })
+}
+
+function addGasBuffer (initialGasLimitHex, blockGasLimitHex, bufferMultiplier = 1.5) {
+  const upperGasLimit = multiplyCurrencies(blockGasLimitHex, 0.9, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 10,
+    numberOfDecimals: '0',
+  })
+  const bufferedGasLimit = multiplyCurrencies(initialGasLimitHex, bufferMultiplier, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 10,
+    numberOfDecimals: '0',
+  })
+
+  // if initialGasLimit is above blockGasLimit, dont modify it
+  if (conversionGreaterThan(
+    { value: initialGasLimitHex, fromNumericBase: 'hex' },
+    { value: upperGasLimit, fromNumericBase: 'hex' },
+  )) return initialGasLimitHex
+  // if bufferedGasLimit is below blockGasLimit, use bufferedGasLimit
+  if (conversionLessThan(
+    { value: bufferedGasLimit, fromNumericBase: 'hex' },
+    { value: upperGasLimit, fromNumericBase: 'hex' },
+  )) return bufferedGasLimit
+  // otherwise use blockGasLimit
+  return upperGasLimit
+}
+
+function generateTokenTransferData ({ toAddress = '0x0', amount = '0x0', selectedToken }) {
+  if (!selectedToken) return
+  return TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call(
+    abi.rawEncode(['address', 'uint256'], [toAddress, ethUtil.addHexPrefix(amount)]),
+    x => ('00' + x.toString(16)).slice(-2)
+  ).join('')
+}
+
+function estimateGasPriceFromRecentBlocks (recentBlocks) {
+  // Return 1 gwei if no blocks have been observed:
+  if (!recentBlocks || recentBlocks.length === 0) {
+    return ONE_GWEI_IN_WEI_HEX
+  }
+
+  const lowestPrices = recentBlocks.map((block) => {
+    if (!block.gasPrices || block.gasPrices.length < 1) {
+      return ONE_GWEI_IN_WEI_HEX
+    }
+    return block.gasPrices.reduce((currentLowest, next) => {
+      return parseInt(next, 16) < parseInt(currentLowest, 16) ? next : currentLowest
+    })
+  })
+  .sort((a, b) => parseInt(a, 16) > parseInt(b, 16) ? 1 : -1)
+
+  return lowestPrices[Math.floor(lowestPrices.length / 2)]
+}
+
+function getToAddressForGasUpdate (...addresses) {
+  return [...addresses, ''].find(str => str !== undefined && str !== null).toLowerCase()
+}
+
+function removeLeadingZeroes (str) {
+  return str.replace(/^0*(?=\d)/, '')
+}
diff --git a/ui/app/pages/send/tests/send-component.test.js b/ui/app/pages/send/tests/send-component.test.js
new file mode 100644
index 000000000..81955cc1d
--- /dev/null
+++ b/ui/app/pages/send/tests/send-component.test.js
@@ -0,0 +1,354 @@
+import React from 'react'
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import timeout from '../../../../lib/test-timeout'
+
+import SendHeader from '../send-header/send-header.container'
+import SendContent from '../send-content/send-content.component'
+import SendFooter from '../send-footer/send-footer.container'
+
+const mockBasicGasEstimates = {
+  blockTime: 'mockBlockTime',
+}
+
+const propsMethodSpies = {
+  updateAndSetGasLimit: sinon.spy(),
+  updateSendErrors: sinon.spy(),
+  updateSendTokenBalance: sinon.spy(),
+  resetSendState: sinon.spy(),
+  fetchBasicGasEstimates: sinon.stub().returns(Promise.resolve(mockBasicGasEstimates)),
+  fetchGasEstimates: sinon.spy(),
+}
+const utilsMethodStubs = {
+  getAmountErrorObject: sinon.stub().returns({ amount: 'mockAmountError' }),
+  getGasFeeErrorObject: sinon.stub().returns({ gasFee: 'mockGasFeeError' }),
+  doesAmountErrorRequireUpdate: sinon.stub().callsFake(obj => obj.balance !== obj.prevBalance),
+}
+
+const SendTransactionScreen = proxyquire('../send.component.js', {
+  './send.utils': utilsMethodStubs,
+}).default
+
+sinon.spy(SendTransactionScreen.prototype, 'componentDidMount')
+sinon.spy(SendTransactionScreen.prototype, 'updateGas')
+
+describe('Send Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<SendTransactionScreen
+      amount={'mockAmount'}
+      amountConversionRate={'mockAmountConversionRate'}
+      blockGasLimit={'mockBlockGasLimit'}
+      conversionRate={10}
+      editingTransactionId={'mockEditingTransactionId'}
+      fetchBasicGasEstimates={propsMethodSpies.fetchBasicGasEstimates}
+      fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
+      from={ { address: 'mockAddress', balance: 'mockBalance' } }
+      gasLimit={'mockGasLimit'}
+      gasPrice={'mockGasPrice'}
+      gasTotal={'mockGasTotal'}
+      history={{ mockProp: 'history-abc'}}
+      network={'3'}
+      primaryCurrency={'mockPrimaryCurrency'}
+      recentBlocks={['mockBlock']}
+      selectedAddress={'mockSelectedAddress'}
+      selectedToken={'mockSelectedToken'}
+      showHexData={true}
+      tokenBalance={'mockTokenBalance'}
+      tokenContract={'mockTokenContract'}
+      updateAndSetGasLimit={propsMethodSpies.updateAndSetGasLimit}
+      updateSendErrors={propsMethodSpies.updateSendErrors}
+      updateSendTokenBalance={propsMethodSpies.updateSendTokenBalance}
+      resetSendState={propsMethodSpies.resetSendState}
+    />)
+  })
+
+  afterEach(() => {
+    SendTransactionScreen.prototype.componentDidMount.resetHistory()
+    SendTransactionScreen.prototype.updateGas.resetHistory()
+    utilsMethodStubs.doesAmountErrorRequireUpdate.resetHistory()
+    utilsMethodStubs.getAmountErrorObject.resetHistory()
+    utilsMethodStubs.getGasFeeErrorObject.resetHistory()
+    propsMethodSpies.fetchBasicGasEstimates.resetHistory()
+    propsMethodSpies.updateAndSetGasLimit.resetHistory()
+    propsMethodSpies.updateSendErrors.resetHistory()
+    propsMethodSpies.updateSendTokenBalance.resetHistory()
+  })
+
+  it('should call componentDidMount', () => {
+    assert(SendTransactionScreen.prototype.componentDidMount.calledOnce)
+  })
+
+  describe('componentDidMount', () => {
+    it('should call props.fetchBasicGasAndTimeEstimates', () => {
+      propsMethodSpies.fetchBasicGasEstimates.resetHistory()
+      assert.equal(propsMethodSpies.fetchBasicGasEstimates.callCount, 0)
+      wrapper.instance().componentDidMount()
+      assert.equal(propsMethodSpies.fetchBasicGasEstimates.callCount, 1)
+    })
+
+    it('should call this.updateGas', async () => {
+      SendTransactionScreen.prototype.updateGas.resetHistory()
+      propsMethodSpies.updateSendErrors.resetHistory()
+      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0)
+      wrapper.instance().componentDidMount()
+      await timeout(250)
+      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 1)
+    })
+  })
+
+  describe('componentWillUnmount', () => {
+    it('should call this.props.resetSendState', () => {
+      propsMethodSpies.resetSendState.resetHistory()
+      assert.equal(propsMethodSpies.resetSendState.callCount, 0)
+      wrapper.instance().componentWillUnmount()
+      assert.equal(propsMethodSpies.resetSendState.callCount, 1)
+    })
+  })
+
+  describe('componentDidUpdate', () => {
+    it('should call doesAmountErrorRequireUpdate with the expected params', () => {
+      utilsMethodStubs.getAmountErrorObject.resetHistory()
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: '',
+        },
+      })
+      assert(utilsMethodStubs.doesAmountErrorRequireUpdate.calledOnce)
+      assert.deepEqual(
+        utilsMethodStubs.doesAmountErrorRequireUpdate.getCall(0).args[0],
+        {
+          balance: 'mockBalance',
+          gasTotal: 'mockGasTotal',
+          prevBalance: '',
+          prevGasTotal: undefined,
+          prevTokenBalance: undefined,
+          selectedToken: 'mockSelectedToken',
+          tokenBalance: 'mockTokenBalance',
+        }
+      )
+    })
+
+    it('should not call getAmountErrorObject if doesAmountErrorRequireUpdate returns false', () => {
+      utilsMethodStubs.getAmountErrorObject.resetHistory()
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'mockBalance',
+        },
+      })
+      assert.equal(utilsMethodStubs.getAmountErrorObject.callCount, 0)
+    })
+
+    it('should call getAmountErrorObject if doesAmountErrorRequireUpdate returns true', () => {
+      utilsMethodStubs.getAmountErrorObject.resetHistory()
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'balanceChanged',
+        },
+      })
+      assert.equal(utilsMethodStubs.getAmountErrorObject.callCount, 1)
+      assert.deepEqual(
+        utilsMethodStubs.getAmountErrorObject.getCall(0).args[0],
+        {
+          amount: 'mockAmount',
+          amountConversionRate: 'mockAmountConversionRate',
+          balance: 'mockBalance',
+          conversionRate: 10,
+          gasTotal: 'mockGasTotal',
+          primaryCurrency: 'mockPrimaryCurrency',
+          selectedToken: 'mockSelectedToken',
+          tokenBalance: 'mockTokenBalance',
+        }
+      )
+    })
+
+    it('should call getGasFeeErrorObject if doesAmountErrorRequireUpdate returns true and selectedToken is truthy', () => {
+      utilsMethodStubs.getGasFeeErrorObject.resetHistory()
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'balanceChanged',
+        },
+      })
+      assert.equal(utilsMethodStubs.getGasFeeErrorObject.callCount, 1)
+      assert.deepEqual(
+        utilsMethodStubs.getGasFeeErrorObject.getCall(0).args[0],
+        {
+          amountConversionRate: 'mockAmountConversionRate',
+          balance: 'mockBalance',
+          conversionRate: 10,
+          gasTotal: 'mockGasTotal',
+          primaryCurrency: 'mockPrimaryCurrency',
+          selectedToken: 'mockSelectedToken',
+        }
+      )
+    })
+
+    it('should not call getGasFeeErrorObject if doesAmountErrorRequireUpdate returns false', () => {
+      utilsMethodStubs.getGasFeeErrorObject.resetHistory()
+      wrapper.instance().componentDidUpdate({
+        from: { address: 'mockAddress', balance: 'mockBalance' },
+      })
+      assert.equal(utilsMethodStubs.getGasFeeErrorObject.callCount, 0)
+    })
+
+    it('should not call getGasFeeErrorObject if doesAmountErrorRequireUpdate returns true but selectedToken is falsy', () => {
+      utilsMethodStubs.getGasFeeErrorObject.resetHistory()
+      wrapper.setProps({ selectedToken: null })
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'balanceChanged',
+        },
+      })
+      assert.equal(utilsMethodStubs.getGasFeeErrorObject.callCount, 0)
+    })
+
+    it('should call updateSendErrors with the expected params if selectedToken is falsy', () => {
+      propsMethodSpies.updateSendErrors.resetHistory()
+      wrapper.setProps({ selectedToken: null })
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'balanceChanged',
+        },
+      })
+      assert.equal(propsMethodSpies.updateSendErrors.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateSendErrors.getCall(0).args[0],
+        { amount: 'mockAmountError', gasFee: null }
+      )
+    })
+
+    it('should call updateSendErrors with the expected params if selectedToken is truthy', () => {
+      propsMethodSpies.updateSendErrors.resetHistory()
+      wrapper.setProps({ selectedToken: 'someToken' })
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'balanceChanged',
+        },
+      })
+      assert.equal(propsMethodSpies.updateSendErrors.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateSendErrors.getCall(0).args[0],
+        { amount: 'mockAmountError', gasFee: 'mockGasFeeError' }
+      )
+    })
+
+    it('should not call updateSendTokenBalance or this.updateGas if network === prevNetwork', () => {
+      SendTransactionScreen.prototype.updateGas.resetHistory()
+      propsMethodSpies.updateSendTokenBalance.resetHistory()
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'balanceChanged',
+        },
+        network: '3',
+      })
+      assert.equal(propsMethodSpies.updateSendTokenBalance.callCount, 0)
+      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0)
+    })
+
+    it('should not call updateSendTokenBalance or this.updateGas if network === loading', () => {
+      wrapper.setProps({ network: 'loading' })
+      SendTransactionScreen.prototype.updateGas.resetHistory()
+      propsMethodSpies.updateSendTokenBalance.resetHistory()
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'balanceChanged',
+        },
+        network: '3',
+      })
+      assert.equal(propsMethodSpies.updateSendTokenBalance.callCount, 0)
+      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0)
+    })
+
+    it('should call updateSendTokenBalance and this.updateGas with the correct params', () => {
+      SendTransactionScreen.prototype.updateGas.resetHistory()
+      propsMethodSpies.updateSendTokenBalance.resetHistory()
+      wrapper.instance().componentDidUpdate({
+        from: {
+          balance: 'balanceChanged',
+        },
+        network: '2',
+      })
+      assert.equal(propsMethodSpies.updateSendTokenBalance.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateSendTokenBalance.getCall(0).args[0],
+        {
+          selectedToken: 'mockSelectedToken',
+          tokenContract: 'mockTokenContract',
+          address: 'mockAddress',
+        }
+      )
+      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 1)
+      assert.deepEqual(
+        SendTransactionScreen.prototype.updateGas.getCall(0).args,
+        []
+      )
+    })
+  })
+
+  describe('updateGas', () => {
+    it('should call updateAndSetGasLimit with the correct params if no to prop is passed', () => {
+      propsMethodSpies.updateAndSetGasLimit.resetHistory()
+      wrapper.instance().updateGas()
+      assert.equal(propsMethodSpies.updateAndSetGasLimit.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0],
+        {
+          blockGasLimit: 'mockBlockGasLimit',
+          editingTransactionId: 'mockEditingTransactionId',
+          gasLimit: 'mockGasLimit',
+          gasPrice: 'mockGasPrice',
+          recentBlocks: ['mockBlock'],
+          selectedAddress: 'mockSelectedAddress',
+          selectedToken: 'mockSelectedToken',
+          to: '',
+          value: 'mockAmount',
+          data: undefined,
+        }
+      )
+    })
+
+    it('should call updateAndSetGasLimit with the correct params if a to prop is passed', () => {
+      propsMethodSpies.updateAndSetGasLimit.resetHistory()
+      wrapper.setProps({ to: 'someAddress' })
+      wrapper.instance().updateGas()
+      assert.equal(
+        propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0].to,
+        'someaddress',
+      )
+    })
+
+    it('should call updateAndSetGasLimit with to set to lowercase if passed', () => {
+      propsMethodSpies.updateAndSetGasLimit.resetHistory()
+      wrapper.instance().updateGas({ to: '0xABC' })
+      assert.equal(propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0].to, '0xabc')
+    })
+  })
+
+  describe('render', () => {
+    it('should render a page-container class', () => {
+      assert.equal(wrapper.find('.page-container').length, 1)
+    })
+
+    it('should render SendHeader, SendContent and SendFooter', () => {
+      assert.equal(wrapper.find(SendHeader).length, 1)
+      assert.equal(wrapper.find(SendContent).length, 1)
+      assert.equal(wrapper.find(SendFooter).length, 1)
+    })
+
+    it('should pass the history prop to SendHeader and SendFooter', () => {
+      assert.deepEqual(
+        wrapper.find(SendFooter).props(),
+        {
+          history: { mockProp: 'history-abc' },
+        }
+      )
+    })
+
+    it('should pass showHexData to SendContent', () => {
+      assert.equal(wrapper.find(SendContent).props().showHexData, true)
+    })
+  })
+})
diff --git a/ui/app/pages/send/tests/send-container.test.js b/ui/app/pages/send/tests/send-container.test.js
new file mode 100644
index 000000000..b3e202030
--- /dev/null
+++ b/ui/app/pages/send/tests/send-container.test.js
@@ -0,0 +1,177 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+
+const actionSpies = {
+  updateSendTokenBalance: sinon.spy(),
+  updateGasData: sinon.spy(),
+  setGasTotal: sinon.spy(),
+}
+const duckActionSpies = {
+  updateSendErrors: sinon.spy(),
+  resetSendState: sinon.spy(),
+}
+
+proxyquire('../send.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },
+  'react-router-dom': { withRouter: () => {} },
+  'recompose': { compose: (arg1, arg2) => () => arg2() },
+  './send.selectors': {
+    getAmountConversionRate: (s) => `mockAmountConversionRate:${s}`,
+    getBlockGasLimit: (s) => `mockBlockGasLimit:${s}`,
+    getConversionRate: (s) => `mockConversionRate:${s}`,
+    getCurrentNetwork: (s) => `mockNetwork:${s}`,
+    getGasLimit: (s) => `mockGasLimit:${s}`,
+    getGasPrice: (s) => `mockGasPrice:${s}`,
+    getGasTotal: (s) => `mockGasTotal:${s}`,
+    getPrimaryCurrency: (s) => `mockPrimaryCurrency:${s}`,
+    getRecentBlocks: (s) => `mockRecentBlocks:${s}`,
+    getSelectedToken: (s) => `mockSelectedToken:${s}`,
+    getSelectedTokenContract: (s) => `mockTokenContract:${s}`,
+    getSelectedTokenToFiatRate: (s) => `mockTokenToFiatRate:${s}`,
+    getSendHexDataFeatureFlagState: (s) => `mockSendHexDataFeatureFlagState:${s}`,
+    getSendAmount: (s) => `mockAmount:${s}`,
+    getSendTo: (s) => `mockTo:${s}`,
+    getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`,
+    getSendFromObject: (s) => `mockFrom:${s}`,
+    getTokenBalance: (s) => `mockTokenBalance:${s}`,
+    getQrCodeData: (s) => `mockQrCodeData:${s}`,
+  },
+  '../../selectors/selectors': {
+    getSelectedAddress: (s) => `mockSelectedAddress:${s}`,
+  },
+  '../../store/actions': actionSpies,
+  '../../ducks/send/send.duck': duckActionSpies,
+  './send.utils.js': {
+    calcGasTotal: (gasLimit, gasPrice) => gasLimit + gasPrice,
+  },
+
+})
+
+describe('send container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        amount: 'mockAmount:mockState',
+        amountConversionRate: 'mockAmountConversionRate:mockState',
+        blockGasLimit: 'mockBlockGasLimit:mockState',
+        conversionRate: 'mockConversionRate:mockState',
+        editingTransactionId: 'mockEditingTransactionId:mockState',
+        from: 'mockFrom:mockState',
+        gasLimit: 'mockGasLimit:mockState',
+        gasPrice: 'mockGasPrice:mockState',
+        gasTotal: 'mockGasTotal:mockState',
+        network: 'mockNetwork:mockState',
+        primaryCurrency: 'mockPrimaryCurrency:mockState',
+        recentBlocks: 'mockRecentBlocks:mockState',
+        selectedAddress: 'mockSelectedAddress:mockState',
+        selectedToken: 'mockSelectedToken:mockState',
+        showHexData: 'mockSendHexDataFeatureFlagState:mockState',
+        to: 'mockTo:mockState',
+        tokenBalance: 'mockTokenBalance:mockState',
+        tokenContract: 'mockTokenContract:mockState',
+        tokenToFiatRate: 'mockTokenToFiatRate:mockState',
+        qrCodeData: 'mockQrCodeData:mockState',
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+    })
+
+    describe('updateAndSetGasLimit()', () => {
+      const mockProps = {
+        blockGasLimit: 'mockBlockGasLimit',
+        editingTransactionId: '0x2',
+        gasLimit: '0x3',
+        gasPrice: '0x4',
+        recentBlocks: ['mockBlock'],
+        selectedAddress: '0x4',
+        selectedToken: { address: '0x1' },
+        to: 'mockTo',
+        value: 'mockValue',
+        data: undefined,
+      }
+
+      it('should dispatch a setGasTotal action when editingTransactionId is truthy', () => {
+        mapDispatchToPropsObject.updateAndSetGasLimit(mockProps)
+        assert(dispatchSpy.calledOnce)
+        assert.equal(
+          actionSpies.setGasTotal.getCall(0).args[0],
+          '0x30x4'
+        )
+      })
+
+      it('should dispatch an updateGasData action when editingTransactionId is falsy', () => {
+        const { gasPrice, selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data } = mockProps
+        mapDispatchToPropsObject.updateAndSetGasLimit(
+          Object.assign({}, mockProps, {editingTransactionId: false})
+        )
+        assert(dispatchSpy.calledOnce)
+        assert.deepEqual(
+          actionSpies.updateGasData.getCall(0).args[0],
+          { gasPrice, selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data }
+        )
+      })
+    })
+
+    describe('updateSendTokenBalance()', () => {
+      const mockProps = {
+        address: '0x10',
+        tokenContract: '0x00a',
+        selectedToken: {address: '0x1'},
+      }
+
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateSendTokenBalance(Object.assign({}, mockProps))
+        assert(dispatchSpy.calledOnce)
+        assert.deepEqual(
+          actionSpies.updateSendTokenBalance.getCall(0).args[0],
+          mockProps
+        )
+      })
+    })
+
+    describe('updateSendErrors()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateSendErrors('mockError')
+        assert(dispatchSpy.calledOnce)
+        assert.equal(
+          duckActionSpies.updateSendErrors.getCall(0).args[0],
+          'mockError'
+        )
+      })
+    })
+
+    describe('resetSendState()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.resetSendState()
+        assert(dispatchSpy.calledOnce)
+        assert.equal(
+          duckActionSpies.resetSendState.getCall(0).args.length,
+          0
+        )
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/pages/send/tests/send-selectors-test-data.js b/ui/app/pages/send/tests/send-selectors-test-data.js
new file mode 100644
index 000000000..cff26a191
--- /dev/null
+++ b/ui/app/pages/send/tests/send-selectors-test-data.js
@@ -0,0 +1,231 @@
+module.exports = {
+  'metamask': {
+    'isInitialized': true,
+    'isUnlocked': true,
+    'featureFlags': {'sendHexData': true},
+    'rpcTarget': 'https://rawtestrpc.metamask.io/',
+    'identities': {
+      '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': {
+        'address': '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825',
+        'name': 'Send Account 1',
+      },
+      '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb': {
+        'address': '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
+        'name': 'Send Account 2',
+      },
+      '0x2f8d4a878cfa04a6e60d46362f5644deab66572d': {
+        'address': '0x2f8d4a878cfa04a6e60d46362f5644deab66572d',
+        'name': 'Send Account 3',
+      },
+      '0xd85a4b6a394794842887b8284293d69163007bbb': {
+        'address': '0xd85a4b6a394794842887b8284293d69163007bbb',
+        'name': 'Send Account 4',
+      },
+    },
+    'cachedBalances': {},
+    'currentBlockGasLimit': '0x4c1878',
+    'currentCurrency': 'USD',
+    'conversionRate': 1200.88200327,
+    'conversionDate': 1489013762,
+    'nativeCurrency': 'ETH',
+    'frequentRpcList': [],
+    'network': '3',
+    'accounts': {
+      '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': {
+        'code': '0x',
+        'balance': '0x47c9d71831c76efe',
+        'nonce': '0x1b',
+        'address': '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825',
+      },
+      '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb': {
+        'code': '0x',
+        'balance': '0x37452b1315889f80',
+        'nonce': '0xa',
+        'address': '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
+      },
+      '0x2f8d4a878cfa04a6e60d46362f5644deab66572d': {
+        'code': '0x',
+        'balance': '0x30c9d71831c76efe',
+        'nonce': '0x1c',
+        'address': '0x2f8d4a878cfa04a6e60d46362f5644deab66572d',
+      },
+      '0xd85a4b6a394794842887b8284293d69163007bbb': {
+        'code': '0x',
+        'balance': '0x0',
+        'nonce': '0x0',
+        'address': '0xd85a4b6a394794842887b8284293d69163007bbb',
+      },
+    },
+    'addressBook': [
+      {
+        'address': '0x06195827297c7a80a443b6894d3bdb8824b43896',
+        'name': 'Address Book Account 1',
+      },
+    ],
+    'tokens': [
+      {
+        'address': '0x1a195821297c7a80a433b6894d3bdb8824b43896',
+        'decimals': 18,
+        'symbol': 'ABC',
+      },
+      {
+        'address': '0x8d6b81208414189a58339873ab429b6c47ab92d3',
+        'decimals': 4,
+        'symbol': 'DEF',
+      },
+      {
+        'address': '0xa42084c8d1d9a2198631988579bb36b48433a72b',
+        'decimals': 18,
+        'symbol': 'GHI',
+      },
+    ],
+    'tokenExchangeRates': {
+      'def_eth': {
+        rate: 2.0,
+      },
+      'ghi_eth': {
+        rate: 31.01,
+      },
+    },
+    'transactions': {},
+    'selectedAddressTxList': [
+      {
+        'id': 'mockTokenTx1',
+        'txParams': {
+          'to': '0x8d6b81208414189a58339873ab429b6c47ab92d3',
+        },
+        'time': 1700000000000,
+      },
+      {
+        'id': 'mockTokenTx2',
+        'txParams': {
+          'to': '0xafaketokenaddress',
+        },
+        'time': 1600000000000,
+      },
+      {
+        'id': 'mockTokenTx3',
+        'txParams': {
+          'to': '0x8d6b81208414189a58339873ab429b6c47ab92d3',
+        },
+        'time': 1500000000000,
+      },
+      {
+        'id': 'mockEthTx1',
+        'txParams': {
+          'to': '0xd85a4b6a394794842887b8284293d69163007bbb',
+        },
+        'time': 1400000000000,
+      },
+    ],
+    'selectedTokenAddress': '0x8d6b81208414189a58339873ab429b6c47ab92d3',
+    'unapprovedMsgs': {
+      '0xabc': { id: 'unapprovedMessage1', 'time': 1650000000000 },
+      '0xdef': { id: 'unapprovedMessage2', 'time': 1550000000000 },
+      '0xghi': { id: 'unapprovedMessage3', 'time': 1450000000000 },
+    },
+    'unapprovedMsgCount': 0,
+    'unapprovedPersonalMsgs': {},
+    'unapprovedPersonalMsgCount': 0,
+    'keyringTypes': [
+      'Simple Key Pair',
+      'HD Key Tree',
+    ],
+    'keyrings': [
+      {
+        'type': 'HD Key Tree',
+        'accounts': [
+          'fdea65c8e26263f6d9a1b5de9555d2931a33b825',
+          'c5b8dbac4c1d3f152cdeb400e2313f309c410acb',
+          '2f8d4a878cfa04a6e60d46362f5644deab66572d',
+        ],
+      },
+      {
+        'type': 'Simple Key Pair',
+        'accounts': [
+          '0xd85a4b6a394794842887b8284293d69163007bbb',
+        ],
+      },
+    ],
+    'selectedAddress': '0xd85a4b6a394794842887b8284293d69163007bbb',
+    'provider': {
+      'type': 'testnet',
+    },
+    'shapeShiftTxList': [
+      { id: 'shapeShiftTx1', 'time': 1675000000000 },
+      { id: 'shapeShiftTx2', 'time': 1575000000000 },
+      { id: 'shapeShiftTx3', 'time': 1475000000000 },
+    ],
+    'lostAccounts': [],
+    'send': {
+      'gasLimit': '0xFFFF',
+      'gasPrice': '0xaa',
+      'gasTotal': '0xb451dc41b578',
+      'tokenBalance': 3434,
+      'from': {
+        'address': '0xabcdefg',
+        'balance': '0x5f4e3d2c1',
+      },
+      'to': '0x987fedabc',
+      'amount': '0x080',
+      'memo': '',
+      'errors': {
+        'someError': null,
+      },
+      'maxModeOn': false,
+      'editingTransactionId': 97531,
+      'forceGasMin': true,
+    },
+    'unapprovedTxs': {
+      '4768706228115573': {
+        'id': 4768706228115573,
+        'time': 1487363153561,
+        'status': 'unapproved',
+        'gasMultiplier': 1,
+        'metamaskNetworkId': '3',
+        'txParams': {
+          'from': '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
+          'to': '0x18a3462427bcc9133bb46e88bcbe39cd7ef0e761',
+          'value': '0xde0b6b3a7640000',
+          'metamaskId': 4768706228115573,
+          'metamaskNetworkId': '3',
+          'gas': '0x5209',
+        },
+        'gasLimitSpecified': false,
+        'estimatedGas': '0x5209',
+        'txFee': '17e0186e60800',
+        'txValue': 'de0b6b3a7640000',
+        'maxCost': 'de234b52e4a0800',
+        'gasPrice': '4a817c800',
+      },
+    },
+    'currentLocale': 'en',
+    recentBlocks: ['mockBlock1', 'mockBlock2', 'mockBlock3'],
+  },
+  'appState': {
+    'menuOpen': false,
+    'currentView': {
+      'name': 'accountDetail',
+      'detailView': null,
+      'context': '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+    },
+    'accountDetail': {
+      'subview': 'transactions',
+    },
+    'modal': {
+      'modalState': {},
+      'previousModalState': {},
+    },
+    'transForward': true,
+    'isLoading': false,
+    'warning': null,
+    'scrollToBottom': false,
+    'forgottenPassword': null,
+  },
+  'identities': {},
+  'send': {
+    'fromDropdownOpen': false,
+    'toDropdownOpen': false,
+    'errors': { 'someError': null },
+  },
+}
diff --git a/ui/app/pages/send/tests/send-selectors.test.js b/ui/app/pages/send/tests/send-selectors.test.js
new file mode 100644
index 000000000..ccc126795
--- /dev/null
+++ b/ui/app/pages/send/tests/send-selectors.test.js
@@ -0,0 +1,696 @@
+import assert from 'assert'
+import sinon from 'sinon'
+import selectors from '../send.selectors.js'
+const {
+  accountsWithSendEtherInfoSelector,
+  // autoAddToBetaUI,
+  getAddressBook,
+  getBlockGasLimit,
+  getAmountConversionRate,
+  getConversionRate,
+  getCurrentAccountWithSendEtherInfo,
+  getCurrentCurrency,
+  getCurrentNetwork,
+  getCurrentViewContext,
+  getNativeCurrency,
+  getForceGasMin,
+  getGasLimit,
+  getGasPrice,
+  getGasTotal,
+  getPrimaryCurrency,
+  getRecentBlocks,
+  getSelectedAccount,
+  getSelectedIdentity,
+  getSelectedToken,
+  getSelectedTokenContract,
+  getSelectedTokenExchangeRate,
+  getSelectedTokenToFiatRate,
+  getSendAmount,
+  getSendEditingTransactionId,
+  getSendErrors,
+  getSendFrom,
+  getSendFromBalance,
+  getSendFromObject,
+  getSendHexDataFeatureFlagState,
+  getSendMaxModeState,
+  getSendTo,
+  getSendToAccounts,
+  getTokenBalance,
+  getTokenExchangeRate,
+  getUnapprovedTxs,
+  transactionsSelector,
+} = selectors
+import mockState from './send-selectors-test-data'
+
+describe('send selectors', () => {
+  const tempGlobalEth = Object.assign({}, global.eth)
+  beforeEach(() => {
+    global.eth = {
+      contract: sinon.stub().returns({
+        at: address => 'mockAt:' + address,
+      }),
+    }
+  })
+
+  afterEach(() => {
+    global.eth = tempGlobalEth
+  })
+
+  describe('accountsWithSendEtherInfoSelector()', () => {
+    it('should return an array of account objects with name info from identities', () => {
+      assert.deepEqual(
+        accountsWithSendEtherInfoSelector(mockState),
+        [
+          {
+            code: '0x',
+            balance: '0x47c9d71831c76efe',
+            nonce: '0x1b',
+            address: '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825',
+            name: 'Send Account 1',
+          },
+          {
+            code: '0x',
+            balance: '0x37452b1315889f80',
+            nonce: '0xa',
+            address: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
+            name: 'Send Account 2',
+          },
+          {
+            code: '0x',
+            balance: '0x30c9d71831c76efe',
+            nonce: '0x1c',
+            address: '0x2f8d4a878cfa04a6e60d46362f5644deab66572d',
+            name: 'Send Account 3',
+          },
+          {
+            code: '0x',
+            balance: '0x0',
+            nonce: '0x0',
+            address: '0xd85a4b6a394794842887b8284293d69163007bbb',
+            name: 'Send Account 4',
+          },
+        ]
+      )
+    })
+  })
+
+  // describe('autoAddToBetaUI()', () => {
+  //   it('should', () => {
+  //     assert.deepEqual(
+  //       autoAddToBetaUI(mockState),
+
+  //     )
+  //   })
+  // })
+
+  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(
+        getAmountConversionRate(mockState),
+        2401.76400654
+      )
+    })
+
+    it('should return the eth conversion rate if no token is selected', () => {
+      const editedMockState = {
+        metamask: Object.assign({}, mockState.metamask, { selectedTokenAddress: null }),
+      }
+      assert.equal(
+        getAmountConversionRate(editedMockState),
+        1200.88200327
+      )
+    })
+  })
+
+  describe('getBlockGasLimit', () => {
+    it('should return the current block gas limit', () => {
+      assert.deepEqual(
+        getBlockGasLimit(mockState),
+        '0x4c1878'
+      )
+    })
+  })
+
+  describe('getConversionRate()', () => {
+    it('should return the eth conversion rate', () => {
+      assert.deepEqual(
+        getConversionRate(mockState),
+        1200.88200327
+      )
+    })
+  })
+
+  describe('getCurrentAccountWithSendEtherInfo()', () => {
+    it('should return the currently selected account with identity info', () => {
+      assert.deepEqual(
+        getCurrentAccountWithSendEtherInfo(mockState),
+        {
+          code: '0x',
+          balance: '0x0',
+          nonce: '0x0',
+          address: '0xd85a4b6a394794842887b8284293d69163007bbb',
+          name: 'Send Account 4',
+        }
+      )
+    })
+  })
+
+  describe('getCurrentCurrency()', () => {
+    it('should return the currently selected currency', () => {
+      assert.equal(
+        getCurrentCurrency(mockState),
+        'USD'
+      )
+    })
+  })
+
+  describe('getNativeCurrency()', () => {
+    it('should return the ticker symbol of the selected network', () => {
+      assert.equal(
+        getNativeCurrency(mockState),
+        'ETH'
+      )
+    })
+  })
+
+  describe('getCurrentNetwork()', () => {
+    it('should return the id of the currently selected network', () => {
+      assert.equal(
+        getCurrentNetwork(mockState),
+        '3'
+      )
+    })
+  })
+
+  describe('getCurrentViewContext()', () => {
+    it('should return the context of the current view', () => {
+      assert.equal(
+        getCurrentViewContext(mockState),
+        '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'
+      )
+    })
+  })
+
+  describe('getForceGasMin()', () => {
+    it('should get the send.forceGasMin property', () => {
+      assert.equal(
+        getForceGasMin(mockState),
+        true
+      )
+    })
+  })
+
+  describe('getGasLimit()', () => {
+    it('should return the send.gasLimit', () => {
+      assert.equal(
+        getGasLimit(mockState),
+        '0xFFFF'
+      )
+    })
+  })
+
+  describe('getGasPrice()', () => {
+    it('should return the send.gasPrice', () => {
+      assert.equal(
+        getGasPrice(mockState),
+        '0xaa'
+      )
+    })
+  })
+
+  describe('getGasTotal()', () => {
+    it('should return the send.gasTotal', () => {
+      assert.equal(
+        getGasTotal(mockState),
+        'a9ff56'
+      )
+    })
+  })
+
+  describe('getPrimaryCurrency()', () => {
+    it('should return the symbol of the selected token', () => {
+      assert.equal(
+        getPrimaryCurrency(mockState),
+        'DEF'
+      )
+    })
+  })
+
+  describe('getRecentBlocks()', () => {
+    it('should return the recent blocks', () => {
+      assert.deepEqual(
+        getRecentBlocks(mockState),
+        ['mockBlock1', 'mockBlock2', 'mockBlock3']
+      )
+    })
+  })
+
+  describe('getSelectedAccount()', () => {
+    it('should return the currently selected account', () => {
+      assert.deepEqual(
+        getSelectedAccount(mockState),
+        {
+          code: '0x',
+          balance: '0x0',
+          nonce: '0x0',
+          address: '0xd85a4b6a394794842887b8284293d69163007bbb',
+        }
+      )
+    })
+  })
+
+
+  describe('getSelectedIdentity()', () => {
+    it('should return the identity object of the currently selected address', () => {
+      assert.deepEqual(
+        getSelectedIdentity(mockState),
+        {
+          address: '0xd85a4b6a394794842887b8284293d69163007bbb',
+          name: 'Send Account 4',
+        }
+      )
+    })
+  })
+
+  describe('getSelectedToken()', () => {
+    it('should return the currently selected token if selected', () => {
+      assert.deepEqual(
+        getSelectedToken(mockState),
+        {
+          address: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
+          decimals: 4,
+          symbol: 'DEF',
+        }
+      )
+    })
+
+    it('should return the send token if none is currently selected, but a send token exists', () => {
+      const mockSendToken = {
+        address: '0x123456708414189a58339873ab429b6c47ab92d3',
+        decimals: 4,
+        symbol: 'JKL',
+      }
+      const editedMockState = {
+        metamask: Object.assign({}, mockState.metamask, {
+          selectedTokenAddress: null,
+          send: {
+            token: mockSendToken,
+          },
+        }),
+      }
+      assert.deepEqual(
+        getSelectedToken(editedMockState),
+        Object.assign({}, mockSendToken)
+      )
+    })
+  })
+
+  describe('getSelectedTokenContract()', () => {
+    it('should return the contract at the selected token address', () => {
+      assert.equal(
+        getSelectedTokenContract(mockState),
+        'mockAt:0x8d6b81208414189a58339873ab429b6c47ab92d3'
+      )
+    })
+
+    it('should return null if no token is selected', () => {
+      const modifiedMetamaskState = Object.assign({}, mockState.metamask, { selectedTokenAddress: false })
+      assert.equal(
+        getSelectedTokenContract(Object.assign({}, mockState, { metamask: modifiedMetamaskState })),
+        null
+      )
+    })
+  })
+
+  describe('getSelectedTokenExchangeRate()', () => {
+    it('should return the exchange rate for the selected token', () => {
+      assert.equal(
+        getSelectedTokenExchangeRate(mockState),
+        2.0
+      )
+    })
+  })
+
+  describe('getSelectedTokenToFiatRate()', () => {
+    it('should return rate for converting the selected token to fiat', () => {
+      assert.equal(
+        getSelectedTokenToFiatRate(mockState),
+        2401.76400654
+      )
+    })
+  })
+
+  describe('getSendAmount()', () => {
+    it('should return the send.amount', () => {
+      assert.equal(
+        getSendAmount(mockState),
+        '0x080'
+      )
+    })
+  })
+
+  describe('getSendEditingTransactionId()', () => {
+    it('should return the send.editingTransactionId', () => {
+      assert.equal(
+        getSendEditingTransactionId(mockState),
+        97531
+      )
+    })
+  })
+
+  describe('getSendErrors()', () => {
+    it('should return the send.errors', () => {
+      assert.deepEqual(
+        getSendErrors(mockState),
+        { someError: null }
+      )
+    })
+  })
+
+  describe('getSendHexDataFeatureFlagState()', () => {
+    it('should return the sendHexData feature flag state', () => {
+      assert.deepEqual(
+        getSendHexDataFeatureFlagState(mockState),
+        true
+      )
+    })
+  })
+
+  describe('getSendFrom()', () => {
+    it('should return the send.from', () => {
+      assert.deepEqual(
+        getSendFrom(mockState),
+        {
+          address: '0xabcdefg',
+          balance: '0x5f4e3d2c1',
+        }
+      )
+    })
+  })
+
+  describe('getSendFromBalance()', () => {
+    it('should get the send.from balance if it exists', () => {
+      assert.equal(
+        getSendFromBalance(mockState),
+        '0x5f4e3d2c1'
+      )
+    })
+
+    it('should get the selected account balance if the send.from does not exist', () => {
+      const editedMockState = {
+        metamask: Object.assign({}, mockState.metamask, {
+          send: {
+            from: null,
+          },
+        }),
+      }
+      assert.equal(
+        getSendFromBalance(editedMockState),
+        '0x0'
+      )
+    })
+  })
+
+  describe('getSendFromObject()', () => {
+    it('should return send.from if it exists', () => {
+      assert.deepEqual(
+        getSendFromObject(mockState),
+        {
+          address: '0xabcdefg',
+          balance: '0x5f4e3d2c1',
+        }
+      )
+    })
+
+    it('should return the current account with send ether info if send.from does not exist', () => {
+      const editedMockState = {
+        metamask: Object.assign({}, mockState.metamask, {
+          send: {
+            from: null,
+          },
+        }),
+      }
+      assert.deepEqual(
+        getSendFromObject(editedMockState),
+        {
+          code: '0x',
+          balance: '0x0',
+          nonce: '0x0',
+          address: '0xd85a4b6a394794842887b8284293d69163007bbb',
+          name: 'Send Account 4',
+        }
+      )
+    })
+  })
+
+  describe('getSendMaxModeState()', () => {
+    it('should return send.maxModeOn', () => {
+      assert.equal(
+        getSendMaxModeState(mockState),
+        false
+      )
+    })
+  })
+
+  describe('getSendTo()', () => {
+    it('should return send.to', () => {
+      assert.equal(
+        getSendTo(mockState),
+        '0x987fedabc'
+      )
+    })
+  })
+
+  describe('getSendToAccounts()', () => {
+    it('should return an array including all the users accounts and the address book', () => {
+      assert.deepEqual(
+        getSendToAccounts(mockState),
+        [
+          {
+            code: '0x',
+            balance: '0x47c9d71831c76efe',
+            nonce: '0x1b',
+            address: '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825',
+            name: 'Send Account 1',
+          },
+          {
+            code: '0x',
+            balance: '0x37452b1315889f80',
+            nonce: '0xa',
+            address: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
+            name: 'Send Account 2',
+          },
+          {
+            code: '0x',
+            balance: '0x30c9d71831c76efe',
+            nonce: '0x1c',
+            address: '0x2f8d4a878cfa04a6e60d46362f5644deab66572d',
+            name: 'Send Account 3',
+          },
+          {
+            code: '0x',
+            balance: '0x0',
+            nonce: '0x0',
+            address: '0xd85a4b6a394794842887b8284293d69163007bbb',
+            name: 'Send Account 4',
+          },
+          {
+            address: '0x06195827297c7a80a443b6894d3bdb8824b43896',
+            name: 'Address Book Account 1',
+          },
+        ]
+      )
+    })
+  })
+
+  describe('getTokenBalance()', () => {
+    it('should', () => {
+      assert.equal(
+        getTokenBalance(mockState),
+        3434
+      )
+    })
+  })
+
+  describe('getTokenExchangeRate()', () => {
+    it('should return the passed tokens exchange rates', () => {
+      assert.equal(
+        getTokenExchangeRate(mockState, 'GHI'),
+        31.01
+      )
+    })
+  })
+
+  describe('getUnapprovedTxs()', () => {
+    it('should return the unapproved txs', () => {
+      assert.deepEqual(
+        getUnapprovedTxs(mockState),
+        {
+          4768706228115573: {
+            id: 4768706228115573,
+            time: 1487363153561,
+            status: 'unapproved',
+            gasMultiplier: 1,
+            metamaskNetworkId: '3',
+            txParams: {
+              from: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
+              to: '0x18a3462427bcc9133bb46e88bcbe39cd7ef0e761',
+              value: '0xde0b6b3a7640000',
+              metamaskId: 4768706228115573,
+              metamaskNetworkId: '3',
+              gas: '0x5209',
+            },
+            gasLimitSpecified: false,
+            estimatedGas: '0x5209',
+            txFee: '17e0186e60800',
+            txValue: 'de0b6b3a7640000',
+            maxCost: 'de234b52e4a0800',
+            gasPrice: '4a817c800',
+          },
+        }
+      )
+    })
+  })
+
+  describe('transactionsSelector()', () => {
+    it('should return the selected addresses selected token transactions', () => {
+      assert.deepEqual(
+        transactionsSelector(mockState),
+        [
+          {
+            id: 'mockTokenTx1',
+            txParams: {
+              to: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
+            },
+            time: 1700000000000,
+          },
+          {
+            id: 'mockTokenTx3',
+            txParams: {
+              to: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
+            },
+            time: 1500000000000,
+          },
+        ]
+      )
+    })
+
+    it('should return all transactions if no token is selected', () => {
+      const modifiedMetamaskState = Object.assign({}, mockState.metamask, { selectedTokenAddress: false })
+      const modifiedState = Object.assign({}, mockState, { metamask: modifiedMetamaskState })
+      assert.deepEqual(
+        transactionsSelector(modifiedState),
+        [
+          {
+            id: 'mockTokenTx1',
+            time: 1700000000000,
+            txParams: {
+              to: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
+            },
+          },
+          {
+            id: 'unapprovedMessage1',
+            time: 1650000000000,
+          },
+          {
+            id: 'mockTokenTx2',
+            time: 1600000000000,
+            txParams: {
+              to: '0xafaketokenaddress',
+            },
+          },
+          {
+            id: 'unapprovedMessage2',
+            time: 1550000000000,
+          },
+          {
+            id: 'mockTokenTx3',
+            time: 1500000000000,
+            txParams: {
+              to: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
+            },
+          },
+          {
+            id: 'unapprovedMessage3',
+            time: 1450000000000,
+          },
+          {
+            id: 'mockEthTx1',
+            time: 1400000000000,
+            txParams: {
+              to: '0xd85a4b6a394794842887b8284293d69163007bbb',
+            },
+          },
+        ]
+      )
+    })
+
+    it('should return shapeshift transactions if current network is 1', () => {
+      const modifiedMetamaskState = Object.assign({}, mockState.metamask, { selectedTokenAddress: false, network: '1' })
+      const modifiedState = Object.assign({}, mockState, { metamask: modifiedMetamaskState })
+      assert.deepEqual(
+        transactionsSelector(modifiedState),
+        [
+          {
+            id: 'mockTokenTx1',
+            time: 1700000000000,
+            txParams: {
+              to: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
+            },
+          },
+          { id: 'shapeShiftTx1', 'time': 1675000000000 },
+          {
+            id: 'unapprovedMessage1',
+            time: 1650000000000,
+          },
+          {
+            id: 'mockTokenTx2',
+            time: 1600000000000,
+            txParams: {
+              to: '0xafaketokenaddress',
+            },
+          },
+          { id: 'shapeShiftTx2', 'time': 1575000000000 },
+          {
+            id: 'unapprovedMessage2',
+            time: 1550000000000,
+          },
+          {
+            id: 'mockTokenTx3',
+            time: 1500000000000,
+            txParams: {
+              to: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
+            },
+          },
+          { id: 'shapeShiftTx3', 'time': 1475000000000 },
+          {
+            id: 'unapprovedMessage3',
+            time: 1450000000000,
+          },
+          {
+            id: 'mockEthTx1',
+            time: 1400000000000,
+            txParams: {
+              to: '0xd85a4b6a394794842887b8284293d69163007bbb',
+            },
+          },
+        ]
+      )
+    })
+  })
+
+})
diff --git a/ui/app/pages/send/tests/send-utils.test.js b/ui/app/pages/send/tests/send-utils.test.js
new file mode 100644
index 000000000..b19535b9e
--- /dev/null
+++ b/ui/app/pages/send/tests/send-utils.test.js
@@ -0,0 +1,527 @@
+import assert from 'assert'
+import sinon from 'sinon'
+import proxyquire from 'proxyquire'
+import {
+  BASE_TOKEN_GAS_COST,
+  ONE_GWEI_IN_WEI_HEX,
+  SIMPLE_GAS_COST,
+} from '../send.constants'
+const {
+  addCurrencies,
+  subtractCurrencies,
+} = require('../../../helpers/utils/conversion-util')
+
+const {
+  INSUFFICIENT_FUNDS_ERROR,
+  INSUFFICIENT_TOKENS_ERROR,
+} = require('../send.constants')
+
+const stubs = {
+  addCurrencies: sinon.stub().callsFake((a, b, obj) => {
+    if (String(a).match(/^0x.+/)) a = Number(String(a).slice(2))
+    if (String(b).match(/^0x.+/)) b = Number(String(b).slice(2))
+    return a + b
+  }),
+  conversionUtil: sinon.stub().callsFake((val, obj) => parseInt(val, 16)),
+  conversionGTE: sinon.stub().callsFake((obj1, obj2) => obj1.value >= obj2.value),
+  multiplyCurrencies: sinon.stub().callsFake((a, b) => `${a}x${b}`),
+  calcTokenAmount: sinon.stub().callsFake((a, d) => 'calc:' + a + d),
+  rawEncode: sinon.stub().returns([16, 1100]),
+  conversionGreaterThan: sinon.stub().callsFake((obj1, obj2) => obj1.value > obj2.value),
+  conversionLessThan: sinon.stub().callsFake((obj1, obj2) => obj1.value < obj2.value),
+}
+
+const sendUtils = proxyquire('../send.utils.js', {
+  '../../helpers/utils/conversion-util': {
+    addCurrencies: stubs.addCurrencies,
+    conversionUtil: stubs.conversionUtil,
+    conversionGTE: stubs.conversionGTE,
+    multiplyCurrencies: stubs.multiplyCurrencies,
+    conversionGreaterThan: stubs.conversionGreaterThan,
+    conversionLessThan: stubs.conversionLessThan,
+  },
+  '../../helpers/utils/token-util': { calcTokenAmount: stubs.calcTokenAmount },
+  'ethereumjs-abi': {
+    rawEncode: stubs.rawEncode,
+  },
+})
+
+const {
+  calcGasTotal,
+  estimateGas,
+  doesAmountErrorRequireUpdate,
+  estimateGasPriceFromRecentBlocks,
+  generateTokenTransferData,
+  getAmountErrorObject,
+  getGasFeeErrorObject,
+  getToAddressForGasUpdate,
+  calcTokenBalance,
+  isBalanceSufficient,
+  isTokenBalanceSufficient,
+  removeLeadingZeroes,
+} = sendUtils
+
+describe('send utils', () => {
+
+  describe('calcGasTotal()', () => {
+    it('should call multiplyCurrencies with the correct params and return the multiplyCurrencies return', () => {
+      const result = calcGasTotal(12, 15)
+      assert.equal(result, '12x15')
+      const call_ = stubs.multiplyCurrencies.getCall(0).args
+      assert.deepEqual(
+        call_,
+        [12, 15, {
+          toNumericBase: 'hex',
+           multiplicandBase: 16,
+           multiplierBase: 16,
+         } ]
+      )
+    })
+  })
+
+  describe('doesAmountErrorRequireUpdate()', () => {
+    const config = {
+      'should return true if balances are different': {
+        balance: 0,
+        prevBalance: 1,
+        expectedResult: true,
+      },
+      'should return true if gasTotals are different': {
+        gasTotal: 0,
+        prevGasTotal: 1,
+        expectedResult: true,
+      },
+      'should return true if token balances are different': {
+        tokenBalance: 0,
+        prevTokenBalance: 1,
+        selectedToken: 'someToken',
+        expectedResult: true,
+      },
+      'should return false if they are all the same': {
+        balance: 1,
+        prevBalance: 1,
+        gasTotal: 1,
+        prevGasTotal: 1,
+        tokenBalance: 1,
+        prevTokenBalance: 1,
+        selectedToken: 'someToken',
+        expectedResult: false,
+      },
+    }
+    Object.entries(config).map(([description, obj]) => {
+      it(description, () => {
+        assert.equal(doesAmountErrorRequireUpdate(obj), obj.expectedResult)
+      })
+    })
+
+  })
+
+  describe('generateTokenTransferData()', () => {
+    it('should return undefined if not passed a selected token', () => {
+      assert.equal(generateTokenTransferData({ toAddress: 'mockAddress', amount: '0xa', selectedToken: false}), undefined)
+    })
+
+    it('should call abi.rawEncode with the correct params', () => {
+      stubs.rawEncode.resetHistory()
+      generateTokenTransferData({ toAddress: 'mockAddress', amount: 'ab', selectedToken: true})
+      assert.deepEqual(
+        stubs.rawEncode.getCall(0).args,
+        [['address', 'uint256'], ['mockAddress', '0xab']]
+      )
+    })
+
+    it('should return encoded token transfer data', () => {
+      assert.equal(
+        generateTokenTransferData({ toAddress: 'mockAddress', amount: '0xa', selectedToken: true}),
+        '0xa9059cbb104c'
+      )
+    })
+  })
+
+  describe('getAmountErrorObject()', () => {
+    const config = {
+      'should return insufficientFunds error if isBalanceSufficient returns false': {
+        amount: 15,
+        amountConversionRate: 2,
+        balance: 1,
+        conversionRate: 3,
+        gasTotal: 17,
+        primaryCurrency: 'ABC',
+        expectedResult: { amount: INSUFFICIENT_FUNDS_ERROR },
+      },
+      'should not return insufficientFunds error if selectedToken is truthy': {
+        amount: '0x0',
+        amountConversionRate: 2,
+        balance: 1,
+        conversionRate: 3,
+        gasTotal: 17,
+        primaryCurrency: 'ABC',
+        selectedToken: { symbole: 'DEF', decimals: 0 },
+        decimals: 0,
+        tokenBalance: 'sometokenbalance',
+        expectedResult: { amount: null },
+      },
+      'should return insufficientTokens error if token is selected and isTokenBalanceSufficient returns false': {
+        amount: '0x10',
+        amountConversionRate: 2,
+        balance: 100,
+        conversionRate: 3,
+        decimals: 10,
+        gasTotal: 17,
+        primaryCurrency: 'ABC',
+        selectedToken: 'someToken',
+        tokenBalance: 123,
+        expectedResult: { amount: INSUFFICIENT_TOKENS_ERROR },
+      },
+    }
+    Object.entries(config).map(([description, obj]) => {
+      it(description, () => {
+        assert.deepEqual(getAmountErrorObject(obj), obj.expectedResult)
+      })
+    })
+  })
+
+  describe('getGasFeeErrorObject()', () => {
+    const config = {
+      'should return insufficientFunds error if isBalanceSufficient returns false': {
+        amountConversionRate: 2,
+        balance: 16,
+        conversionRate: 3,
+        gasTotal: 17,
+        primaryCurrency: 'ABC',
+        expectedResult: { gasFee: INSUFFICIENT_FUNDS_ERROR },
+      },
+      'should return null error if isBalanceSufficient returns true': {
+        amountConversionRate: 2,
+        balance: 16,
+        conversionRate: 3,
+        gasTotal: 15,
+        primaryCurrency: 'ABC',
+        expectedResult: { gasFee: null },
+      },
+    }
+    Object.entries(config).map(([description, obj]) => {
+      it(description, () => {
+        assert.deepEqual(getGasFeeErrorObject(obj), obj.expectedResult)
+      })
+    })
+  })
+
+  describe('calcTokenBalance()', () => {
+    it('should return the calculated token blance', () => {
+      assert.equal(calcTokenBalance({
+        selectedToken: {
+          decimals: 11,
+        },
+        usersToken: {
+          balance: 20,
+        },
+      }), 'calc:2011')
+    })
+  })
+
+  describe('isBalanceSufficient()', () => {
+    it('should correctly call addCurrencies and return the result of calling conversionGTE', () => {
+      stubs.conversionGTE.resetHistory()
+      const result = isBalanceSufficient({
+        amount: 15,
+        amountConversionRate: 2,
+        balance: 100,
+        conversionRate: 3,
+        gasTotal: 17,
+        primaryCurrency: 'ABC',
+      })
+      assert.deepEqual(
+        stubs.addCurrencies.getCall(0).args,
+        [
+          15, 17, {
+            aBase: 16,
+            bBase: 16,
+            toNumericBase: 'hex',
+          },
+        ]
+      )
+      assert.deepEqual(
+        stubs.conversionGTE.getCall(0).args,
+        [
+          {
+            value: 100,
+            fromNumericBase: 'hex',
+            fromCurrency: 'ABC',
+            conversionRate: 3,
+          },
+          {
+            value: 32,
+            fromNumericBase: 'hex',
+            conversionRate: 2,
+            fromCurrency: 'ABC',
+          },
+        ]
+      )
+
+      assert.equal(result, true)
+    })
+  })
+
+  describe('isTokenBalanceSufficient()', () => {
+    it('should correctly call conversionUtil and return the result of calling conversionGTE', () => {
+      stubs.conversionGTE.resetHistory()
+      stubs.conversionUtil.resetHistory()
+      const result = isTokenBalanceSufficient({
+        amount: '0x10',
+        tokenBalance: 123,
+        decimals: 10,
+      })
+      assert.deepEqual(
+        stubs.conversionUtil.getCall(0).args,
+        [
+          '0x10', {
+            fromNumericBase: 'hex',
+          },
+        ]
+      )
+      assert.deepEqual(
+        stubs.conversionGTE.getCall(0).args,
+        [
+          {
+            value: 123,
+            fromNumericBase: 'hex',
+          },
+          {
+            value: 'calc:1610',
+          },
+        ]
+      )
+
+      assert.equal(result, false)
+    })
+  })
+
+  describe('estimateGas', () => {
+    const baseMockParams = {
+      blockGasLimit: '0x64',
+      selectedAddress: 'mockAddress',
+      to: '0xisContract',
+      estimateGasMethod: sinon.stub().callsFake(
+        ({to}, cb) => {
+          const err = typeof to === 'string' && to.match(/willFailBecauseOf:/)
+            ? new Error(to.match(/:(.+)$/)[1])
+            : null
+          const result = { toString: (n) => `0xabc${n}` }
+          return cb(err, result)
+        }
+      ),
+    }
+    const baseExpectedCall = {
+      from: 'mockAddress',
+      gas: '0x64x0.95',
+      to: '0xisContract',
+      value: '0xff',
+    }
+
+    beforeEach(() => {
+      global.eth = {
+        getCode: sinon.stub().callsFake(
+          (address) => Promise.resolve(address.match(/isContract/) ? 'not-0x' : '0x')
+        ),
+      }
+    })
+
+    afterEach(() => {
+      baseMockParams.estimateGasMethod.resetHistory()
+      global.eth.getCode.resetHistory()
+    })
+
+    it('should call ethQuery.estimateGas with the expected params', async () => {
+      const result = await sendUtils.estimateGas(baseMockParams)
+      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
+      assert.deepEqual(
+        baseMockParams.estimateGasMethod.getCall(0).args[0],
+        Object.assign({ gasPrice: undefined, value: undefined }, baseExpectedCall)
+      )
+      assert.equal(result, '0xabc16')
+    })
+
+    it('should call ethQuery.estimateGas with the expected params when initialGasLimitHex is lower than the upperGasLimit', async () => {
+      const result = await estimateGas(Object.assign({}, baseMockParams, { blockGasLimit: '0xbcd' }))
+      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
+      assert.deepEqual(
+        baseMockParams.estimateGasMethod.getCall(0).args[0],
+        Object.assign({ gasPrice: undefined, value: undefined }, baseExpectedCall, { gas: '0xbcdx0.95' })
+      )
+      assert.equal(result, '0xabc16x1.5')
+    })
+
+    it('should call ethQuery.estimateGas with a value of 0x0 and the expected data and to if passed a selectedToken', async () => {
+      const result = await estimateGas(Object.assign({ data: 'mockData', selectedToken: { address: 'mockAddress' } }, baseMockParams))
+      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
+      assert.deepEqual(
+        baseMockParams.estimateGasMethod.getCall(0).args[0],
+        Object.assign({}, baseExpectedCall, {
+          gasPrice: undefined,
+          value: '0x0',
+          data: '0xa9059cbb104c',
+          to: 'mockAddress',
+        })
+      )
+      assert.equal(result, '0xabc16')
+    })
+
+    it('should call ethQuery.estimateGas without a recipient if the recipient is empty and data passed', async () => {
+      const data = 'mockData'
+      const to = ''
+      const result = await estimateGas({...baseMockParams, data, to})
+      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
+      assert.deepEqual(
+        baseMockParams.estimateGasMethod.getCall(0).args[0],
+        { gasPrice: undefined, value: '0xff', data, from: baseExpectedCall.from, gas: baseExpectedCall.gas},
+      )
+      assert.equal(result, '0xabc16')
+    })
+
+    it(`should return ${SIMPLE_GAS_COST} if ethQuery.getCode does not return '0x'`, async () => {
+      assert.equal(baseMockParams.estimateGasMethod.callCount, 0)
+      const result = await estimateGas(Object.assign({}, baseMockParams, { to: '0x123' }))
+      assert.equal(result, SIMPLE_GAS_COST)
+    })
+
+    it(`should return ${SIMPLE_GAS_COST} if not passed a selectedToken or truthy to address`, async () => {
+      assert.equal(baseMockParams.estimateGasMethod.callCount, 0)
+      const result = await estimateGas(Object.assign({}, baseMockParams, { to: null }))
+      assert.equal(result, SIMPLE_GAS_COST)
+    })
+
+    it(`should not return ${SIMPLE_GAS_COST} if passed a selectedToken`, async () => {
+      assert.equal(baseMockParams.estimateGasMethod.callCount, 0)
+      const result = await estimateGas(Object.assign({}, baseMockParams, { to: '0x123', selectedToken: { address: '' } }))
+      assert.notEqual(result, SIMPLE_GAS_COST)
+    })
+
+    it(`should return ${BASE_TOKEN_GAS_COST} if passed a selectedToken but no to address`, async () => {
+      const result = await estimateGas(Object.assign({}, baseMockParams, { to: null, selectedToken: { address: '' } }))
+      assert.equal(result, BASE_TOKEN_GAS_COST)
+    })
+
+    it(`should return the adjusted blockGasLimit if it fails with a 'Transaction execution error.'`, async () => {
+      const result = await estimateGas(Object.assign({}, baseMockParams, {
+        to: 'isContract willFailBecauseOf:Transaction execution error.',
+      }))
+      assert.equal(result, '0x64x0.95')
+    })
+
+    it(`should return the adjusted blockGasLimit if it fails with a 'gas required exceeds allowance or always failing transaction.'`, async () => {
+      const result = await estimateGas(Object.assign({}, baseMockParams, {
+        to: 'isContract willFailBecauseOf:gas required exceeds allowance or always failing transaction.',
+      }))
+      assert.equal(result, '0x64x0.95')
+    })
+
+    it(`should reject other errors`, async () => {
+      try {
+        await estimateGas(Object.assign({}, baseMockParams, {
+          to: 'isContract willFailBecauseOf:some other error',
+        }))
+      } catch (err) {
+        assert.equal(err.message, 'some other error')
+      }
+    })
+  })
+
+  describe('estimateGasPriceFromRecentBlocks', () => {
+    const ONE_GWEI_IN_WEI_HEX_PLUS_ONE = addCurrencies(ONE_GWEI_IN_WEI_HEX, '0x1', {
+      aBase: 16,
+      bBase: 16,
+      toNumericBase: 'hex',
+    })
+    const ONE_GWEI_IN_WEI_HEX_PLUS_TWO = addCurrencies(ONE_GWEI_IN_WEI_HEX, '0x2', {
+      aBase: 16,
+      bBase: 16,
+      toNumericBase: 'hex',
+    })
+    const ONE_GWEI_IN_WEI_HEX_MINUS_ONE = subtractCurrencies(ONE_GWEI_IN_WEI_HEX, '0x1', {
+      aBase: 16,
+      bBase: 16,
+      toNumericBase: 'hex',
+    })
+
+    it(`should return ${ONE_GWEI_IN_WEI_HEX} if recentBlocks is falsy`, () => {
+      assert.equal(estimateGasPriceFromRecentBlocks(), ONE_GWEI_IN_WEI_HEX)
+    })
+
+    it(`should return ${ONE_GWEI_IN_WEI_HEX} if recentBlocks is empty`, () => {
+      assert.equal(estimateGasPriceFromRecentBlocks([]), ONE_GWEI_IN_WEI_HEX)
+    })
+
+    it(`should estimate a block's gasPrice as ${ONE_GWEI_IN_WEI_HEX} if it has no gas prices`, () => {
+      const mockRecentBlocks = [
+        { gasPrices: null },
+        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_ONE ] },
+        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_MINUS_ONE ] },
+      ]
+      assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), ONE_GWEI_IN_WEI_HEX)
+    })
+
+    it(`should estimate a block's gasPrice as ${ONE_GWEI_IN_WEI_HEX} if it has empty gas prices`, () => {
+      const mockRecentBlocks = [
+        { gasPrices: [] },
+        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_ONE ] },
+        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_MINUS_ONE ] },
+      ]
+      assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), ONE_GWEI_IN_WEI_HEX)
+    })
+
+    it(`should return the middle value of all blocks lowest prices`, () => {
+      const mockRecentBlocks = [
+        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_TWO ] },
+        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_MINUS_ONE ] },
+        { gasPrices: [ ONE_GWEI_IN_WEI_HEX_PLUS_ONE ] },
+      ]
+      assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), ONE_GWEI_IN_WEI_HEX_PLUS_ONE)
+    })
+
+    it(`should work if a block has multiple gas prices`, () => {
+      const mockRecentBlocks = [
+        { gasPrices: [ '0x1', '0x2', '0x3', '0x4', '0x5' ] },
+        { gasPrices: [ '0x101', '0x100', '0x103', '0x104', '0x102' ] },
+        { gasPrices: [ '0x150', '0x50', '0x100', '0x200', '0x5' ] },
+      ]
+      assert.equal(estimateGasPriceFromRecentBlocks(mockRecentBlocks), '0x5')
+    })
+  })
+
+  describe('getToAddressForGasUpdate()', () => {
+    it('should return empty string if all params are undefined or null', () => {
+      assert.equal(getToAddressForGasUpdate(undefined, null), '')
+    })
+
+    it('should return the first string that is not defined or null in lower case', () => {
+      assert.equal(getToAddressForGasUpdate('A', null), 'a')
+      assert.equal(getToAddressForGasUpdate(undefined, 'B'), 'b')
+    })
+  })
+
+  describe('removeLeadingZeroes()', () => {
+    it('should remove leading zeroes from int when user types', () => {
+      assert.equal(removeLeadingZeroes('0'), '0')
+      assert.equal(removeLeadingZeroes('1'), '1')
+      assert.equal(removeLeadingZeroes('00'), '0')
+      assert.equal(removeLeadingZeroes('01'), '1')
+    })
+
+    it('should remove leading zeroes from int when user copy/paste', () => {
+      assert.equal(removeLeadingZeroes('001'), '1')
+    })
+
+    it('should remove leading zeroes from float when user types', () => {
+      assert.equal(removeLeadingZeroes('0.'), '0.')
+      assert.equal(removeLeadingZeroes('0.0'), '0.0')
+      assert.equal(removeLeadingZeroes('0.00'), '0.00')
+      assert.equal(removeLeadingZeroes('0.001'), '0.001')
+      assert.equal(removeLeadingZeroes('0.10'), '0.10')
+    })
+
+    it('should remove leading zeroes from float when user copy/paste', () => {
+      assert.equal(removeLeadingZeroes('00.1'), '0.1')
+    })
+  })
+})
diff --git a/ui/app/pages/send/to-autocomplete.component.js b/ui/app/pages/send/to-autocomplete.component.js
new file mode 100644
index 000000000..183967c58
--- /dev/null
+++ b/ui/app/pages/send/to-autocomplete.component.js
@@ -0,0 +1,141 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import AccountListItem from './account-list-item/account-list-item.component'
+
+
+export default class ToAutoComplete extends Component {
+
+  static propTypes = {
+    dropdownOpen: PropTypes.bool,
+    openDropdown: PropTypes.func,
+    closeDropdown: PropTypes.func,
+    onChange: PropTypes.func,
+    to: PropTypes.string,
+    accounts: PropTypes.array,
+    inError: PropTypes.bool,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  state = {
+    accountsToRender: [],
+  }
+
+  getListItemIcon (listItemAddress, toAddress) {
+    return toAddress && listItemAddress === toAddress
+      ? <i className={'fa fa-check fa-lg'}
+          style={{
+            color: '#02c9b1',
+          }}
+        />
+      : null
+  }
+
+  renderDropdown () {
+    const {
+      closeDropdown,
+      onChange,
+      to,
+    } = this.props
+    const {accountsToRender} = this.state
+
+    if (!accountsToRender.length) {
+      return null
+    }
+
+    return (
+      <div>
+        <div className={'send-v2__from-dropdown__close-area'} onClick={closeDropdown} />
+        <div className={'send-v2__from-dropdown__list'}>
+          {accountsToRender.map((account, i) => (
+            <AccountListItem
+              key={i}
+              account={account}
+              className={'account-list-item__dropdown'}
+              handleClick={() => {
+                onChange(account.address)
+                closeDropdown()
+              }}
+              icon={this.getListItemIcon(account.address, to)}
+              displayBalance={false}
+              displayAddress={true}
+            />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  handleInputEvent (event = {}, cb) {
+    const {
+      to,
+      accounts,
+      closeDropdown,
+      openDropdown,
+    } = this.props
+
+    const matchingAccounts = accounts.filter(({address}) => address.match(to || ''))
+    const matches = matchingAccounts.length
+
+    if (!matches || matchingAccounts[0].address === to) {
+      this.setState({accountsToRender: []})
+      event.target && event.target.select()
+      closeDropdown()
+    } else {
+      this.setState({accountsToRender: matchingAccounts})
+      openDropdown()
+    }
+    cb && cb(event.target.value)
+  }
+
+  componentDidUpdate (nextProps) {
+    if (this.props.to !== nextProps.to) {
+      this.handleInputEvent()
+    }
+  }
+
+  render () {
+    const {
+      to,
+      dropdownOpen,
+      onChange,
+      inError,
+    } = this.props
+
+    return (
+      <div className={'send-v2__to-autocomplete'}>
+        <input
+          className={classnames('send-v2__to-autocomplete__input', {
+            'send-v2__error-border': inError,
+          })}
+          placeholder={this.context.t('recipientAddress')}
+          value={to}
+          onChange={event => onChange(event.target.value)}
+          onFocus={event => this.handleInputEvent(event)}
+          style={{
+            borderColor: inError ? 'red' : null,
+          }}
+        />
+        {
+          to
+          ? null
+          : <i className={'fa fa-caret-down fa-lg send-v2__to-autocomplete__down-caret'}
+              onClick={() => this.handleInputEvent()}
+              style={{
+                style: {color: '#dedede'},
+              }}
+            />
+        }
+        {
+          dropdownOpen
+          ? this.renderDropdown()
+          : null
+        }
+      </div>
+    )
+  }
+
+}
diff --git a/ui/app/pages/send/to-autocomplete/index.js b/ui/app/pages/send/to-autocomplete/index.js
new file mode 100644
index 000000000..244d301d1
--- /dev/null
+++ b/ui/app/pages/send/to-autocomplete/index.js
@@ -0,0 +1 @@
+export { default } from './to-autocomplete.js'
diff --git a/ui/app/pages/send/to-autocomplete/to-autocomplete.js b/ui/app/pages/send/to-autocomplete/to-autocomplete.js
new file mode 100644
index 000000000..b246413fb
--- /dev/null
+++ b/ui/app/pages/send/to-autocomplete/to-autocomplete.js
@@ -0,0 +1,129 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const AccountListItem = require('../account-list-item/account-list-item.component').default
+const connect = require('react-redux').connect
+const Tooltip = require('../../../components/ui/tooltip')
+const checksumAddress = require('../../../helpers/utils/util').checksumAddress
+
+ToAutoComplete.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(ToAutoComplete)
+
+
+inherits(ToAutoComplete, Component)
+function ToAutoComplete () {
+  Component.call(this)
+
+  this.state = { accountsToRender: [] }
+}
+
+ToAutoComplete.prototype.getListItemIcon = function (listItemAddress, toAddress) {
+  const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
+
+  return toAddress && listItemAddress === toAddress
+    ? listItemIcon
+    : null
+}
+
+ToAutoComplete.prototype.renderDropdown = function () {
+  const {
+    closeDropdown,
+    onChange,
+    to,
+  } = this.props
+  const { accountsToRender } = this.state
+
+  return accountsToRender.length && h('div', {}, [
+
+    h('div.send-v2__from-dropdown__close-area', {
+      onClick: closeDropdown,
+    }),
+
+    h('div.send-v2__from-dropdown__list', {}, [
+
+      ...accountsToRender.map(account => h(AccountListItem, {
+        account,
+        className: 'account-list-item__dropdown',
+        handleClick: () => {
+          onChange(checksumAddress(account.address))
+          closeDropdown()
+        },
+        icon: this.getListItemIcon(account.address, to),
+        displayBalance: false,
+        displayAddress: true,
+      })),
+
+    ]),
+
+  ])
+}
+
+ToAutoComplete.prototype.handleInputEvent = function (event = {}, cb) {
+  const {
+    to,
+    accounts,
+    closeDropdown,
+    openDropdown,
+  } = this.props
+
+  const matchingAccounts = accounts.filter(({ address }) => address.match(to || ''))
+  const matches = matchingAccounts.length
+
+  if (!matches || matchingAccounts[0].address === to) {
+    this.setState({ accountsToRender: [] })
+    event.target && event.target.select()
+    closeDropdown()
+  } else {
+    this.setState({ accountsToRender: matchingAccounts })
+    openDropdown()
+  }
+  cb && cb(event.target.value)
+}
+
+ToAutoComplete.prototype.componentDidUpdate = function (nextProps, nextState) {
+  if (this.props.to !== nextProps.to) {
+    this.handleInputEvent()
+  }
+}
+
+ToAutoComplete.prototype.render = function () {
+  const {
+    to,
+    dropdownOpen,
+    onChange,
+    inError,
+    qrScanner,
+  } = this.props
+
+  return h('div.send-v2__to-autocomplete', {}, [
+
+    h(`input.send-v2__to-autocomplete__input${qrScanner ? '.with-qr' : ''}`, {
+      placeholder: this.context.t('recipientAddress'),
+      className: inError ? `send-v2__error-border` : '',
+      value: to,
+      onChange: event => onChange(event.target.value),
+      onFocus: event => this.handleInputEvent(event),
+      style: {
+        borderColor: inError ? 'red' : null,
+      },
+    }),
+    qrScanner && h(Tooltip, {
+      title: this.context.t('scanQrCode'),
+      position: 'bottom',
+    }, h(`i.fa.fa-qrcode.fa-lg.send-v2__to-autocomplete__qr-code`, {
+      style: { color: '#33333' },
+      onClick: () => this.props.scanQrCode(),
+    })),
+    !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, {
+      style: { color: '#dedede' },
+      onClick: () => this.handleInputEvent(),
+    }),
+
+    dropdownOpen && this.renderDropdown(),
+
+  ])
+}
diff --git a/ui/app/selectors/custom-gas.js b/ui/app/selectors/custom-gas.js
index ecffb37ca..5ba786f0f 100644
--- a/ui/app/selectors/custom-gas.js
+++ b/ui/app/selectors/custom-gas.js
@@ -18,7 +18,7 @@ import {
 } from '../helpers/utils/formatters'
 import {
   calcGasTotal,
-} from '../components/app/send/send.utils'
+} from '../pages/send/send.utils'
 import { addHexPrefix } from 'ethereumjs-util'
 
 const selectors = {
diff --git a/ui/app/store/actions.js b/ui/app/store/actions.js
index 7d369fdb9..f594d9002 100644
--- a/ui/app/store/actions.js
+++ b/ui/app/store/actions.js
@@ -5,7 +5,7 @@ const { getTokenAddressFromTokenObject } = require('../helpers/utils/util')
 const {
   calcTokenBalance,
   estimateGas,
-} = require('../components/app/send/send.utils')
+} = require('../pages/send/send.utils')
 const ethUtil = require('ethereumjs-util')
 const { fetchLocale } = require('../helpers/utils/i18n-helper')
 const log = require('loglevel')
-- 
cgit