From b3d78ed8a1fbea059344b04416fb21bdb1b73f86 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 20 Jun 2018 13:18:23 -0230
Subject: Remove send_ directory, revert to just having send

Revert accidentally changed constants.

Require defaults in ens-input, gas-fee-display and confirm screens.
---
 ui/app/components/send/send-content/index.js       |   1 +
 .../send/send-content/send-amount-row/README.md    |   0
 .../amount-max-button.component.js                 |  54 ++++++
 .../amount-max-button.container.js                 |  40 ++++
 .../amount-max-button.selectors.js                 |   9 +
 .../amount-max-button/amount-max-button.utils.js   |  22 +++
 .../send-amount-row/amount-max-button/index.js     |   1 +
 .../tests/amount-max-button-component.test.js      |  90 +++++++++
 .../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   | 123 +++++++++++++
 .../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        | 202 +++++++++++++++++++++
 .../tests/send-amount-row-container.test.js        | 125 +++++++++++++
 .../tests/send-amount-row-selectors.test.js        |  34 ++++
 .../send/send-content/send-content-README.md       |   0
 .../send/send-content/send-content.component.js    |  28 +++
 .../components/send/send-content/send-content.scss |   0
 .../send/send-content/send-dropdown-list/index.js  |   1 +
 .../send-dropdown-list.component.js                |  52 ++++++
 .../tests/send-dropdown-list-component.test.js     | 105 +++++++++++
 .../from-dropdown/from-dropdown-README.md          |   0
 .../from-dropdown/from-dropdown.component.js       |  46 +++++
 .../send-from-row/from-dropdown/from-dropdown.scss |   0
 .../send-from-row/from-dropdown/index.js           |   1 +
 .../tests/from-dropdown-component.test.js          |  88 +++++++++
 .../send/send-content/send-from-row/index.js       |   1 +
 .../send-from-row/send-from-row-README.md          |   0
 .../send-from-row/send-from-row.component.js       |  63 +++++++
 .../send-from-row/send-from-row.container.js       |  46 +++++
 .../send-from-row/send-from-row.selectors.js       |   9 +
 .../tests/send-from-row-component.test.js          | 121 ++++++++++++
 .../tests/send-from-row-container.test.js          | 110 +++++++++++
 .../tests/send-from-row-selectors.test.js          |  20 ++
 .../send/send-content/send-gas-row/README.md       |   0
 .../gas-fee-display/gas-fee-display.component.js   |  61 +++++++
 .../send-gas-row/gas-fee-display/index.js          |   1 +
 .../test/gas-fee-display.component.test.js         |  55 ++++++
 .../send/send-content/send-gas-row/index.js        |   1 +
 .../send-gas-row/send-gas-row.component.js         |  48 +++++
 .../send-gas-row/send-gas-row.container.js         |  27 +++
 .../send-content/send-gas-row/send-gas-row.scss    |   0
 .../send-gas-row/send-gas-row.selectors.js         |  14 ++
 .../tests/send-gas-row-component.test.js           |  70 +++++++
 .../tests/send-gas-row-container.test.js           |  70 +++++++
 .../tests/send-gas-row-selectors.test.js           |  49 +++++
 .../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-wrapper/send-row-wrapper-README.md    |   0
 .../send-row-wrapper/send-row-wrapper.component.js |  43 +++++
 .../send-row-wrapper/send-row-wrapper.scss         |   0
 .../tests/send-row-wrapper-component.test.js       |  79 ++++++++
 .../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           |  69 +++++++
 .../send-to-row/send-to-row.container.js           |  42 +++++
 .../send-to-row/send-to-row.selectors.js           |  14 ++
 .../send-content/send-to-row/send-to-row.utils.js  |  19 ++
 .../tests/send-to-row-component.test.js            | 149 +++++++++++++++
 .../tests/send-to-row-container.test.js            | 113 ++++++++++++
 .../tests/send-to-row-selectors.test.js            |  47 +++++
 .../send-to-row/tests/send-to-row-utils.test.js    |  51 ++++++
 .../tests/send-content-component.test.js           |  38 ++++
 73 files changed, 2754 insertions(+)
 create mode 100644 ui/app/components/send/send-content/index.js
 create mode 100644 ui/app/components/send/send-content/send-amount-row/README.md
 create mode 100644 ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
 create mode 100644 ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
 create mode 100644 ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js
 create mode 100644 ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
 create mode 100644 ui/app/components/send/send-content/send-amount-row/amount-max-button/index.js
 create mode 100644 ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
 create mode 100644 ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js
 create mode 100644 ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js
 create mode 100644 ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
 create mode 100644 ui/app/components/send/send-content/send-amount-row/index.js
 create mode 100644 ui/app/components/send/send-content/send-amount-row/send-amount-row.component.js
 create mode 100644 ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js
 create mode 100644 ui/app/components/send/send-content/send-amount-row/send-amount-row.scss
 create mode 100644 ui/app/components/send/send-content/send-amount-row/send-amount-row.selectors.js
 create mode 100644 ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
 create mode 100644 ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-container.test.js
 create mode 100644 ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js
 create mode 100644 ui/app/components/send/send-content/send-content-README.md
 create mode 100644 ui/app/components/send/send-content/send-content.component.js
 create mode 100644 ui/app/components/send/send-content/send-content.scss
 create mode 100644 ui/app/components/send/send-content/send-dropdown-list/index.js
 create mode 100644 ui/app/components/send/send-content/send-dropdown-list/send-dropdown-list.component.js
 create mode 100644 ui/app/components/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js
 create mode 100644 ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown-README.md
 create mode 100644 ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.component.js
 create mode 100644 ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.scss
 create mode 100644 ui/app/components/send/send-content/send-from-row/from-dropdown/index.js
 create mode 100644 ui/app/components/send/send-content/send-from-row/from-dropdown/tests/from-dropdown-component.test.js
 create mode 100644 ui/app/components/send/send-content/send-from-row/index.js
 create mode 100644 ui/app/components/send/send-content/send-from-row/send-from-row-README.md
 create mode 100644 ui/app/components/send/send-content/send-from-row/send-from-row.component.js
 create mode 100644 ui/app/components/send/send-content/send-from-row/send-from-row.container.js
 create mode 100644 ui/app/components/send/send-content/send-from-row/send-from-row.selectors.js
 create mode 100644 ui/app/components/send/send-content/send-from-row/tests/send-from-row-component.test.js
 create mode 100644 ui/app/components/send/send-content/send-from-row/tests/send-from-row-container.test.js
 create mode 100644 ui/app/components/send/send-content/send-from-row/tests/send-from-row-selectors.test.js
 create mode 100644 ui/app/components/send/send-content/send-gas-row/README.md
 create mode 100644 ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
 create mode 100644 ui/app/components/send/send-content/send-gas-row/gas-fee-display/index.js
 create mode 100644 ui/app/components/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
 create mode 100644 ui/app/components/send/send-content/send-gas-row/index.js
 create mode 100644 ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
 create mode 100644 ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
 create mode 100644 ui/app/components/send/send-content/send-gas-row/send-gas-row.scss
 create mode 100644 ui/app/components/send/send-content/send-gas-row/send-gas-row.selectors.js
 create mode 100644 ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
 create mode 100644 ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
 create mode 100644 ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
 create mode 100644 ui/app/components/send/send-content/send-row-wrapper/index.js
 create mode 100644 ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/index.js
 create mode 100644 ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md
 create mode 100644 ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js
 create mode 100644 ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js
 create mode 100644 ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss
 create mode 100644 ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js
 create mode 100644 ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js
 create mode 100644 ui/app/components/send/send-content/send-row-wrapper/send-row-wrapper-README.md
 create mode 100644 ui/app/components/send/send-content/send-row-wrapper/send-row-wrapper.component.js
 create mode 100644 ui/app/components/send/send-content/send-row-wrapper/send-row-wrapper.scss
 create mode 100644 ui/app/components/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
 create mode 100644 ui/app/components/send/send-content/send-to-row/index.js
 create mode 100644 ui/app/components/send/send-content/send-to-row/send-to-row-README.md
 create mode 100644 ui/app/components/send/send-content/send-to-row/send-to-row.component.js
 create mode 100644 ui/app/components/send/send-content/send-to-row/send-to-row.container.js
 create mode 100644 ui/app/components/send/send-content/send-to-row/send-to-row.selectors.js
 create mode 100644 ui/app/components/send/send-content/send-to-row/send-to-row.utils.js
 create mode 100644 ui/app/components/send/send-content/send-to-row/tests/send-to-row-component.test.js
 create mode 100644 ui/app/components/send/send-content/send-to-row/tests/send-to-row-container.test.js
 create mode 100644 ui/app/components/send/send-content/send-to-row/tests/send-to-row-selectors.test.js
 create mode 100644 ui/app/components/send/send-content/send-to-row/tests/send-to-row-utils.test.js
 create mode 100644 ui/app/components/send/send-content/tests/send-content-component.test.js

(limited to 'ui/app/components/send/send-content')

diff --git a/ui/app/components/send/send-content/index.js b/ui/app/components/send/send-content/index.js
new file mode 100644
index 000000000..891c17e6a
--- /dev/null
+++ b/ui/app/components/send/send-content/index.js
@@ -0,0 +1 @@
+export { default } from './send-content.component'
diff --git a/ui/app/components/send/send-content/send-amount-row/README.md b/ui/app/components/send/send-content/send-amount-row/README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
new file mode 100644
index 000000000..4d0d36ab4
--- /dev/null
+++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
@@ -0,0 +1,54 @@
+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,
+    })
+  }
+
+  render () {
+    const { setMaxModeTo, maxModeOn } = this.props
+
+    return (
+      <div
+        className="send-v2__amount-max"
+        onClick={(event) => {
+          event.preventDefault()
+          setMaxModeTo(true)
+          this.setMaxAmount()
+        }}
+      >
+        {!maxModeOn ? this.context.t('max') : ''}
+      </div>
+    )
+  }
+
+}
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
new file mode 100644
index 000000000..2d2ec42f7
--- /dev/null
+++ b/ui/app/components/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 '../../../../../actions'
+import AmountMaxButton from './amount-max-button.component'
+import {
+  updateSendErrors,
+} from '../../../../../ducks/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/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js b/ui/app/components/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/components/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/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
new file mode 100644
index 000000000..b490a7fd7
--- /dev/null
+++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
@@ -0,0 +1,22 @@
+const {
+  multiplyCurrencies,
+  subtractCurrencies,
+} = require('../../../../../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'})
+      : subtractCurrencies(
+        ethUtil.addHexPrefix(balance),
+        ethUtil.addHexPrefix(gasTotal),
+        { toNumericBase: 'hex' }
+      )
+}
+
+module.exports = {
+  calcMaxAmount,
+}
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/index.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/index.js
new file mode 100644
index 000000000..ee8271494
--- /dev/null
+++ b/ui/app/components/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/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
new file mode 100644
index 000000000..86a05ff21
--- /dev/null
+++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
@@ -0,0 +1,90 @@
+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 a div with a send-v2__amount-max class', () => {
+      assert.equal(wrapper.find('.send-v2__amount-max').length, 1)
+      assert(wrapper.find('.send-v2__amount-max').is('div'))
+    })
+
+    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 text when maxModeOn is true', () => {
+      wrapper.setProps({ maxModeOn: true })
+      assert.equal(wrapper.find('.send-v2__amount-max').text(), '')
+    })
+
+    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/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js
new file mode 100644
index 000000000..2cc00d6d6
--- /dev/null
+++ b/ui/app/components/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 },
+  '../../../../../actions': actionSpies,
+  '../../../../../ducks/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/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js b/ui/app/components/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/components/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/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
new file mode 100644
index 000000000..816df6a12
--- /dev/null
+++ b/ui/app/components/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: 100,
+      }), 'e8d4a51000')
+    })
+  })
+
+})
diff --git a/ui/app/components/send/send-content/send-amount-row/index.js b/ui/app/components/send/send-content/send-amount-row/index.js
new file mode 100644
index 000000000..abc6852fe
--- /dev/null
+++ b/ui/app/components/send/send-content/send-amount-row/index.js
@@ -0,0 +1 @@
+export { default } from './send-amount-row.container'
diff --git a/ui/app/components/send/send-content/send-amount-row/send-amount-row.component.js b/ui/app/components/send/send-content/send-amount-row/send-amount-row.component.js
new file mode 100644
index 000000000..c548a5695
--- /dev/null
+++ b/ui/app/components/send/send-content/send-amount-row/send-amount-row.component.js
@@ -0,0 +1,123 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper/'
+import AmountMaxButton from './amount-max-button/'
+import CurrencyDisplay from '../../currency-display'
+
+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({
+        amount,
+        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 })
+    }
+  }
+
+  render () {
+    const {
+      amount,
+      amountConversionRate,
+      convertedCurrency,
+      gasTotal,
+      inError,
+      primaryCurrency,
+      selectedToken,
+    } = this.props
+
+    return (
+      <SendRowWrapper
+        label={`${this.context.t('amount')}:`}
+        showError={inError}
+        errorType={'amount'}
+      >
+        {!inError && gasTotal && <AmountMaxButton />}
+        <CurrencyDisplay
+          conversionRate={amountConversionRate}
+          convertedCurrency={convertedCurrency}
+          onBlur={newAmount => {
+            this.updateGas(newAmount)
+            this.updateAmount(newAmount)
+          }}
+          onChange={newAmount => this.validateAmount(newAmount)}
+          inError={inError}
+          primaryCurrency={primaryCurrency || 'ETH'}
+          selectedToken={selectedToken}
+          value={amount}
+          step="any"
+        />
+      </SendRowWrapper>
+    )
+  }
+
+}
diff --git a/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js b/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js
new file mode 100644
index 000000000..3504d1b73
--- /dev/null
+++ b/ui/app/components/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 '../../../../actions'
+import {
+  updateSendErrors,
+} from '../../../../ducks/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/send/send-content/send-amount-row/send-amount-row.scss b/ui/app/components/send/send-content/send-amount-row/send-amount-row.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/components/send/send-content/send-amount-row/send-amount-row.selectors.js b/ui/app/components/send/send-content/send-amount-row/send-amount-row.selectors.js
new file mode 100644
index 000000000..fb08c7ed7
--- /dev/null
+++ b/ui/app/components/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/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js b/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
new file mode 100644
index 000000000..8425e076e
--- /dev/null
+++ b/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
@@ -0,0 +1,202 @@
+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 CurrencyDisplay from '../../../currency-display'
+
+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,
+        [{
+          amount: 'someAmount',
+          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 CurrencyDisplay as the second child of the SendRowWrapper', () => {
+      assert(wrapper.find(SendRowWrapper).childAt(1).is(CurrencyDisplay))
+    })
+
+    it('should render the CurrencyDisplay with the correct props', () => {
+      const {
+        conversionRate,
+        convertedCurrency,
+        onBlur,
+        onChange,
+        inError,
+        primaryCurrency,
+        selectedToken,
+        value,
+      } = wrapper.find(SendRowWrapper).childAt(1).props()
+      assert.equal(conversionRate, 'mockAmountConversionRate')
+      assert.equal(convertedCurrency, 'mockConvertedCurrency')
+      assert.equal(inError, false)
+      assert.equal(primaryCurrency, 'mockPrimaryCurrency')
+      assert.deepEqual(selectedToken, { address: 'mockTokenAddress' })
+      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']
+      )
+    })
+
+    it('should pass the default primaryCurrency to the CurrencyDisplay if primaryCurrency is falsy', () => {
+      wrapper.setProps({ primaryCurrency: null })
+      const { primaryCurrency } = wrapper.find(SendRowWrapper).childAt(1).props()
+      assert.equal(primaryCurrency, 'ETH')
+    })
+  })
+})
diff --git a/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-container.test.js b/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-container.test.js
new file mode 100644
index 000000000..52e351aee
--- /dev/null
+++ b/ui/app/components/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 }),
+  },
+  '../../../../actions': actionSpies,
+  '../../../../ducks/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/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js b/ui/app/components/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/components/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/components/send/send-content/send-content-README.md b/ui/app/components/send/send-content/send-content-README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/components/send/send-content/send-content.component.js b/ui/app/components/send/send-content/send-content.component.js
new file mode 100644
index 000000000..adc114c0e
--- /dev/null
+++ b/ui/app/components/send/send-content/send-content.component.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import PageContainerContent from '../../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 SendToRow from './send-to-row/'
+
+export default class SendContent extends Component {
+
+  static propTypes = {
+    updateGas: PropTypes.func,
+  };
+
+  render () {
+    return (
+      <PageContainerContent>
+        <div className="send-v2__form">
+          <SendFromRow />
+          <SendToRow updateGas={(updateData) => this.props.updateGas(updateData)} />
+          <SendAmountRow updateGas={(updateData) => this.props.updateGas(updateData)} />
+          <SendGasRow />
+        </div>
+      </PageContainerContent>
+    )
+  }
+
+}
diff --git a/ui/app/components/send/send-content/send-content.scss b/ui/app/components/send/send-content/send-content.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/components/send/send-content/send-dropdown-list/index.js b/ui/app/components/send/send-content/send-dropdown-list/index.js
new file mode 100644
index 000000000..04af6536c
--- /dev/null
+++ b/ui/app/components/send/send-content/send-dropdown-list/index.js
@@ -0,0 +1 @@
+export { default } from './send-dropdown-list.component'
diff --git a/ui/app/components/send/send-content/send-dropdown-list/send-dropdown-list.component.js b/ui/app/components/send/send-content/send-dropdown-list/send-dropdown-list.component.js
new file mode 100644
index 000000000..bedac1259
--- /dev/null
+++ b/ui/app/components/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/components/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js b/ui/app/components/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/components/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/components/send/send-content/send-from-row/from-dropdown/from-dropdown-README.md b/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown-README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.component.js b/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.component.js
new file mode 100644
index 000000000..4f43a9d61
--- /dev/null
+++ b/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.component.js
@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import AccountListItem from '../../../account-list-item/'
+import SendDropdownList from '../../send-dropdown-list/'
+
+export default class FromDropdown extends Component {
+
+  static propTypes = {
+    accounts: PropTypes.array,
+    closeDropdown: PropTypes.func,
+    dropdownOpen: PropTypes.bool,
+    onSelect: PropTypes.func,
+    openDropdown: PropTypes.func,
+    selectedAccount: PropTypes.object,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  render () {
+    const {
+      accounts,
+      closeDropdown,
+      dropdownOpen,
+      openDropdown,
+      selectedAccount,
+      onSelect,
+    } = this.props
+
+    return <div className="send-v2__from-dropdown">
+      <AccountListItem
+        account={selectedAccount}
+        handleClick={openDropdown}
+        icon={<i className={`fa fa-caret-down fa-lg`} style={ { color: '#dedede' } }/>}
+      />
+      {dropdownOpen && <SendDropdownList
+        accounts={accounts}
+        closeDropdown={closeDropdown}
+        onSelect={onSelect}
+        activeAddress={selectedAccount.address}
+      />}
+    </div>
+  }
+
+}
diff --git a/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.scss b/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/components/send/send-content/send-from-row/from-dropdown/index.js b/ui/app/components/send/send-content/send-from-row/from-dropdown/index.js
new file mode 100644
index 000000000..2314ef4e3
--- /dev/null
+++ b/ui/app/components/send/send-content/send-from-row/from-dropdown/index.js
@@ -0,0 +1 @@
+export { default } from './from-dropdown.component'
diff --git a/ui/app/components/send/send-content/send-from-row/from-dropdown/tests/from-dropdown-component.test.js b/ui/app/components/send/send-content/send-from-row/from-dropdown/tests/from-dropdown-component.test.js
new file mode 100644
index 000000000..84fcb281e
--- /dev/null
+++ b/ui/app/components/send/send-content/send-from-row/from-dropdown/tests/from-dropdown-component.test.js
@@ -0,0 +1,88 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import FromDropdown from '../from-dropdown.component.js'
+
+import AccountListItem from '../../../../account-list-item/account-list-item.container'
+import SendDropdownList from '../../../send-dropdown-list/send-dropdown-list.component'
+
+const propsMethodSpies = {
+  closeDropdown: sinon.spy(),
+  openDropdown: sinon.spy(),
+  onSelect: sinon.spy(),
+}
+
+describe('FromDropdown Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<FromDropdown
+      accounts={['mockAccount']}
+      closeDropdown={propsMethodSpies.closeDropdown}
+      dropdownOpen={false}
+      onSelect={propsMethodSpies.onSelect}
+      openDropdown={propsMethodSpies.openDropdown}
+      selectedAccount={ { address: 'mockAddress' } }
+    />, { context: { t: str => str + '_t' } })
+  })
+
+  afterEach(() => {
+    propsMethodSpies.closeDropdown.resetHistory()
+    propsMethodSpies.openDropdown.resetHistory()
+    propsMethodSpies.onSelect.resetHistory()
+  })
+
+  describe('render', () => {
+    it('should render a div with a .send-v2__from-dropdown class', () => {
+      assert.equal(wrapper.find('.send-v2__from-dropdown').length, 1)
+    })
+
+    it('should render an AccountListItem as the first child of the .send-v2__from-dropdown div', () => {
+      assert(wrapper.find('.send-v2__from-dropdown').childAt(0).is(AccountListItem))
+    })
+
+    it('should pass the correct props to AccountListItem', () => {
+      const {
+        account,
+        handleClick,
+        icon,
+      } = wrapper.find('.send-v2__from-dropdown').childAt(0).props()
+      assert.deepEqual(account, { address: 'mockAddress' })
+      assert.deepEqual(
+        icon,
+        <i className={`fa fa-caret-down fa-lg`} style={ { color: '#dedede' } }/>
+      )
+      assert.equal(propsMethodSpies.openDropdown.callCount, 0)
+      handleClick()
+      assert.equal(propsMethodSpies.openDropdown.callCount, 1)
+    })
+
+    it('should not render a SendDropdownList when dropdownOpen is false', () => {
+      assert.equal(wrapper.find(SendDropdownList).length, 0)
+    })
+
+    it('should render a SendDropdownList when dropdownOpen is true', () => {
+      wrapper.setProps({ dropdownOpen: true })
+      assert(wrapper.find(SendDropdownList).length, 1)
+    })
+
+    it('should pass the correct props to the SendDropdownList]', () => {
+      wrapper.setProps({ dropdownOpen: true })
+      const {
+        accounts,
+        closeDropdown,
+        onSelect,
+        activeAddress,
+      } = wrapper.find(SendDropdownList).props()
+      assert.deepEqual(accounts, ['mockAccount'])
+      assert.equal(activeAddress, 'mockAddress')
+      assert.equal(propsMethodSpies.closeDropdown.callCount, 0)
+      closeDropdown()
+      assert.equal(propsMethodSpies.closeDropdown.callCount, 1)
+      assert.equal(propsMethodSpies.onSelect.callCount, 0)
+      onSelect()
+      assert.equal(propsMethodSpies.onSelect.callCount, 1)
+    })
+  })
+})
diff --git a/ui/app/components/send/send-content/send-from-row/index.js b/ui/app/components/send/send-content/send-from-row/index.js
new file mode 100644
index 000000000..0a79726b2
--- /dev/null
+++ b/ui/app/components/send/send-content/send-from-row/index.js
@@ -0,0 +1 @@
+export { default } from './send-from-row.container'
diff --git a/ui/app/components/send/send-content/send-from-row/send-from-row-README.md b/ui/app/components/send/send-content/send-from-row/send-from-row-README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/components/send/send-content/send-from-row/send-from-row.component.js b/ui/app/components/send/send-content/send-from-row/send-from-row.component.js
new file mode 100644
index 000000000..3e0e0de22
--- /dev/null
+++ b/ui/app/components/send/send-content/send-from-row/send-from-row.component.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper/'
+import FromDropdown from './from-dropdown/'
+
+export default class SendFromRow extends Component {
+
+  static propTypes = {
+    closeFromDropdown: PropTypes.func,
+    conversionRate: PropTypes.number,
+    from: PropTypes.object,
+    fromAccounts: PropTypes.array,
+    fromDropdownOpen: PropTypes.bool,
+    openFromDropdown: PropTypes.func,
+    tokenContract: PropTypes.object,
+    updateSendFrom: PropTypes.func,
+    setSendTokenBalance: PropTypes.func,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  async handleFromChange (newFrom) {
+    const {
+      updateSendFrom,
+      tokenContract,
+      setSendTokenBalance,
+    } = this.props
+
+    if (tokenContract) {
+      const usersToken = await tokenContract.balanceOf(newFrom.address)
+      setSendTokenBalance(usersToken)
+    }
+    updateSendFrom(newFrom)
+  }
+
+  render () {
+    const {
+      closeFromDropdown,
+      conversionRate,
+      from,
+      fromAccounts,
+      fromDropdownOpen,
+      openFromDropdown,
+    } = this.props
+
+    return (
+      <SendRowWrapper label={`${this.context.t('from')}:`}>
+        <FromDropdown
+          accounts={fromAccounts}
+          closeDropdown={() => closeFromDropdown()}
+          conversionRate={conversionRate}
+          dropdownOpen={fromDropdownOpen}
+          onSelect={newFrom => this.handleFromChange(newFrom)}
+          openDropdown={() => openFromDropdown()}
+          selectedAccount={from}
+        />
+      </SendRowWrapper>
+    )
+  }
+
+}
diff --git a/ui/app/components/send/send-content/send-from-row/send-from-row.container.js b/ui/app/components/send/send-content/send-from-row/send-from-row.container.js
new file mode 100644
index 000000000..33cb63b43
--- /dev/null
+++ b/ui/app/components/send/send-content/send-from-row/send-from-row.container.js
@@ -0,0 +1,46 @@
+import { connect } from 'react-redux'
+import {
+    accountsWithSendEtherInfoSelector,
+    getConversionRate,
+    getSelectedTokenContract,
+    getSendFromObject,
+} from '../../send.selectors.js'
+import {
+  getFromDropdownOpen,
+} from './send-from-row.selectors.js'
+import { calcTokenBalance } from '../../send.utils.js'
+import {
+    updateSendFrom,
+    setSendTokenBalance,
+} from '../../../../actions'
+import {
+    closeFromDropdown,
+    openFromDropdown,
+} from '../../../../ducks/send.duck'
+import SendFromRow from './send-from-row.component'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendFromRow)
+
+function mapStateToProps (state) {
+  return {
+    conversionRate: getConversionRate(state),
+    from: getSendFromObject(state),
+    fromAccounts: accountsWithSendEtherInfoSelector(state),
+    fromDropdownOpen: getFromDropdownOpen(state),
+    tokenContract: getSelectedTokenContract(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    closeFromDropdown: () => dispatch(closeFromDropdown()),
+    openFromDropdown: () => dispatch(openFromDropdown()),
+    updateSendFrom: newFrom => dispatch(updateSendFrom(newFrom)),
+    setSendTokenBalance: (usersToken, selectedToken) => {
+        if (!usersToken) return
+
+        const tokenBalance = calcTokenBalance({ usersToken, selectedToken })
+        dispatch(setSendTokenBalance(tokenBalance))
+    },
+  }
+}
diff --git a/ui/app/components/send/send-content/send-from-row/send-from-row.selectors.js b/ui/app/components/send/send-content/send-from-row/send-from-row.selectors.js
new file mode 100644
index 000000000..03ef4806b
--- /dev/null
+++ b/ui/app/components/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/components/send/send-content/send-from-row/tests/send-from-row-component.test.js b/ui/app/components/send/send-content/send-from-row/tests/send-from-row-component.test.js
new file mode 100644
index 000000000..9ba8d1739
--- /dev/null
+++ b/ui/app/components/send/send-content/send-from-row/tests/send-from-row-component.test.js
@@ -0,0 +1,121 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import SendFromRow from '../send-from-row.component.js'
+
+import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
+import FromDropdown from '../from-dropdown/from-dropdown.component'
+
+const propsMethodSpies = {
+  closeFromDropdown: sinon.spy(),
+  openFromDropdown: sinon.spy(),
+  updateSendFrom: sinon.spy(),
+  setSendTokenBalance: sinon.spy(),
+}
+
+sinon.spy(SendFromRow.prototype, 'handleFromChange')
+
+describe('SendFromRow Component', function () {
+  let wrapper
+  let instance
+
+  beforeEach(() => {
+    wrapper = shallow(<SendFromRow
+      closeFromDropdown={propsMethodSpies.closeFromDropdown}
+      conversionRate={15}
+      from={ { address: 'mockAddress' } }
+      fromAccounts={['mockAccount']}
+      fromDropdownOpen={false}
+      openFromDropdown={propsMethodSpies.openFromDropdown}
+      setSendTokenBalance={propsMethodSpies.setSendTokenBalance}
+      tokenContract={null}
+      updateSendFrom={propsMethodSpies.updateSendFrom}
+    />, { context: { t: str => str + '_t' } })
+    instance = wrapper.instance()
+  })
+
+  afterEach(() => {
+    propsMethodSpies.closeFromDropdown.resetHistory()
+    propsMethodSpies.openFromDropdown.resetHistory()
+    propsMethodSpies.updateSendFrom.resetHistory()
+    propsMethodSpies.setSendTokenBalance.resetHistory()
+    SendFromRow.prototype.handleFromChange.resetHistory()
+  })
+
+  describe('handleFromChange', () => {
+
+    it('should call updateSendFrom', () => {
+      assert.equal(propsMethodSpies.updateSendFrom.callCount, 0)
+      instance.handleFromChange('mockFrom')
+      assert.equal(propsMethodSpies.updateSendFrom.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateSendFrom.getCall(0).args,
+        ['mockFrom']
+      )
+    })
+
+    it('should call tokenContract.balanceOf and setSendTokenBalance if tokenContract is defined', async () => {
+      wrapper.setProps({
+        tokenContract: {
+          balanceOf: () => new Promise((resolve) => resolve('mockUsersToken')),
+        },
+      })
+      assert.equal(propsMethodSpies.setSendTokenBalance.callCount, 0)
+      await instance.handleFromChange('mockFrom')
+      assert.equal(propsMethodSpies.setSendTokenBalance.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.setSendTokenBalance.getCall(0).args,
+        ['mockUsersToken']
+      )
+    })
+
+  })
+
+  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,
+      } = wrapper.find(SendRowWrapper).props()
+
+      assert.equal(label, 'from_t:')
+    })
+
+    it('should render an FromDropdown as a child of the SendRowWrapper', () => {
+      assert(wrapper.find(SendRowWrapper).childAt(0).is(FromDropdown))
+    })
+
+    it('should render the FromDropdown with the correct props', () => {
+      const {
+        accounts,
+        closeDropdown,
+        conversionRate,
+        dropdownOpen,
+        onSelect,
+        openDropdown,
+        selectedAccount,
+      } = wrapper.find(SendRowWrapper).childAt(0).props()
+      assert.deepEqual(accounts, ['mockAccount'])
+      assert.equal(dropdownOpen, false)
+      assert.equal(conversionRate, 15)
+      assert.deepEqual(selectedAccount, { address: 'mockAddress' })
+      assert.equal(propsMethodSpies.closeFromDropdown.callCount, 0)
+      closeDropdown()
+      assert.equal(propsMethodSpies.closeFromDropdown.callCount, 1)
+      assert.equal(propsMethodSpies.openFromDropdown.callCount, 0)
+      openDropdown()
+      assert.equal(propsMethodSpies.openFromDropdown.callCount, 1)
+      assert.equal(SendFromRow.prototype.handleFromChange.callCount, 0)
+      onSelect('mockNewFrom')
+      assert.equal(SendFromRow.prototype.handleFromChange.callCount, 1)
+      assert.deepEqual(
+        SendFromRow.prototype.handleFromChange.getCall(0).args,
+        ['mockNewFrom']
+      )
+    })
+  })
+})
diff --git a/ui/app/components/send/send-content/send-from-row/tests/send-from-row-container.test.js b/ui/app/components/send/send-content/send-from-row/tests/send-from-row-container.test.js
new file mode 100644
index 000000000..e080b2fe3
--- /dev/null
+++ b/ui/app/components/send/send-content/send-from-row/tests/send-from-row-container.test.js
@@ -0,0 +1,110 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+
+const actionSpies = {
+  updateSendFrom: sinon.spy(),
+  setSendTokenBalance: sinon.spy(),
+}
+const duckActionSpies = {
+  closeFromDropdown: sinon.spy(),
+  openFromDropdown: sinon.spy(),
+}
+
+proxyquire('../send-from-row.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },
+  '../../send.selectors.js': {
+    accountsWithSendEtherInfoSelector: (s) => `mockFromAccounts:${s}`,
+    getConversionRate: (s) => `mockConversionRate:${s}`,
+    getSelectedTokenContract: (s) => `mockTokenContract:${s}`,
+    getSendFromObject: (s) => `mockFrom:${s}`,
+  },
+  './send-from-row.selectors.js': { getFromDropdownOpen: (s) => `mockFromDropdownOpen:${s}` },
+  '../../send.utils.js': { calcTokenBalance: ({ usersToken, selectedToken }) => usersToken + selectedToken },
+  '../../../../actions': actionSpies,
+  '../../../../ducks/send.duck': duckActionSpies,
+})
+
+describe('send-from-row container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        conversionRate: 'mockConversionRate:mockState',
+        from: 'mockFrom:mockState',
+        fromAccounts: 'mockFromAccounts:mockState',
+        fromDropdownOpen: 'mockFromDropdownOpen:mockState',
+        tokenContract: 'mockTokenContract:mockState',
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+    })
+
+    describe('closeFromDropdown()', () => {
+      it('should dispatch a closeFromDropdown action', () => {
+        mapDispatchToPropsObject.closeFromDropdown()
+        assert(dispatchSpy.calledOnce)
+        assert(duckActionSpies.closeFromDropdown.calledOnce)
+        assert.equal(
+          duckActionSpies.closeFromDropdown.getCall(0).args[0],
+          undefined
+        )
+      })
+    })
+
+    describe('openFromDropdown()', () => {
+      it('should dispatch a openFromDropdown action', () => {
+        mapDispatchToPropsObject.openFromDropdown()
+        assert(dispatchSpy.calledOnce)
+        assert(duckActionSpies.openFromDropdown.calledOnce)
+        assert.equal(
+          duckActionSpies.openFromDropdown.getCall(0).args[0],
+          undefined
+        )
+      })
+    })
+
+    describe('updateSendFrom()', () => {
+      it('should dispatch an updateSendFrom action', () => {
+        mapDispatchToPropsObject.updateSendFrom('mockFrom')
+        assert(dispatchSpy.calledOnce)
+        assert.equal(
+          actionSpies.updateSendFrom.getCall(0).args[0],
+          'mockFrom'
+        )
+      })
+    })
+
+    describe('setSendTokenBalance()', () => {
+      it('should dispatch an setSendTokenBalance action', () => {
+        mapDispatchToPropsObject.setSendTokenBalance('mockUsersToken', 'mockSelectedToken')
+        assert(dispatchSpy.calledOnce)
+        assert.equal(
+          actionSpies.setSendTokenBalance.getCall(0).args[0],
+          'mockUsersTokenmockSelectedToken'
+        )
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/components/send/send-content/send-from-row/tests/send-from-row-selectors.test.js b/ui/app/components/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/components/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/components/send/send-content/send-gas-row/README.md b/ui/app/components/send/send-content/send-gas-row/README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js b/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
new file mode 100644
index 000000000..bb9a94428
--- /dev/null
+++ b/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
@@ -0,0 +1,61 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import CurrencyDisplay from '../../../../send/currency-display'
+
+
+export default class GasFeeDisplay extends Component {
+
+  static propTypes = {
+    conversionRate: PropTypes.number,
+    primaryCurrency: PropTypes.string,
+    convertedCurrency: PropTypes.string,
+    gasLoadingError: PropTypes.bool,
+    gasTotal: PropTypes.string,
+    onClick: PropTypes.func,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  render () {
+    const {
+      conversionRate,
+      gasTotal,
+      onClick,
+      primaryCurrency = 'ETH',
+      convertedCurrency,
+      gasLoadingError,
+    } = this.props
+
+    return (
+      <div className="send-v2__gas-fee-display">
+        {gasTotal
+          ? <CurrencyDisplay
+              primaryCurrency={primaryCurrency}
+              convertedCurrency={convertedCurrency}
+              value={gasTotal}
+              conversionRate={conversionRate}
+              gasLoadingError={gasLoadingError}
+              convertedPrefix={'$'}
+              readOnly
+            />
+          : gasLoadingError
+            ? <div className="currency-display.currency-display--message">
+                {this.context.t('setGasPrice')}
+              </div>
+            : <div className="currency-display">
+                {this.context.t('loading')}
+              </div>
+        }
+        <button
+          className="sliders-icon-container"
+          onClick={onClick}
+          disabled={!gasTotal && !gasLoadingError}
+        >
+          <i className="fa fa-sliders sliders-icon" />
+        </button>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/index.js b/ui/app/components/send/send-content/send-gas-row/gas-fee-display/index.js
new file mode 100644
index 000000000..dba0edb7b
--- /dev/null
+++ b/ui/app/components/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/components/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js b/ui/app/components/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
new file mode 100644
index 000000000..7cbe8d0df
--- /dev/null
+++ b/ui/app/components/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import assert from 'assert'
+import {shallow} from 'enzyme'
+import GasFeeDisplay from '../gas-fee-display.component'
+import CurrencyDisplay from '../../../../../send/currency-display'
+import sinon from 'sinon'
+
+
+const propsMethodSpies = {
+  showCustomizeGasModal: sinon.spy(),
+}
+
+describe('SendGasRow Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<GasFeeDisplay
+      conversionRate={20}
+      gasTotal={'mockGasTotal'}
+      onClick={propsMethodSpies.showCustomizeGasModal}
+      primaryCurrency={'mockPrimaryCurrency'}
+      convertedCurrency={'mockConvertedCurrency'}
+    />, {context: {t: str => str + '_t'}})
+  })
+
+  afterEach(() => {
+    propsMethodSpies.showCustomizeGasModal.resetHistory()
+  })
+
+  describe('render', () => {
+    it('should render a CurrencyDisplay component', () => {
+      assert.equal(wrapper.find(CurrencyDisplay).length, 1)
+    })
+
+    it('should render the CurrencyDisplay with the correct props', () => {
+      const {
+        conversionRate,
+        convertedCurrency,
+        value,
+      } = wrapper.find(CurrencyDisplay).props()
+      assert.equal(conversionRate, 20)
+      assert.equal(convertedCurrency, 'mockConvertedCurrency')
+      assert.equal(value, 'mockGasTotal')
+    })
+
+    it('should render the Button with the correct props', () => {
+      const {
+        onClick,
+      } = wrapper.find('button').props()
+      assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 0)
+      onClick()
+      assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 1)
+    })
+  })
+})
diff --git a/ui/app/components/send/send-content/send-gas-row/index.js b/ui/app/components/send/send-content/send-gas-row/index.js
new file mode 100644
index 000000000..3c7ff1d5f
--- /dev/null
+++ b/ui/app/components/send/send-content/send-gas-row/index.js
@@ -0,0 +1 @@
+export { default } from './send-gas-row.container'
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
new file mode 100644
index 000000000..91b58cfd0
--- /dev/null
+++ b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
@@ -0,0 +1,48 @@
+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'
+
+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,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  render () {
+    const {
+      conversionRate,
+      convertedCurrency,
+      gasLoadingError,
+      gasTotal,
+      gasFeeError,
+      showCustomizeGasModal,
+    } = this.props
+
+    return (
+      <SendRowWrapper
+        label={`${this.context.t('gasFee')}:`}
+        showError={gasFeeError}
+        errorType={'gasFee'}
+      >
+        <GasFeeDisplay
+          conversionRate={conversionRate}
+          convertedCurrency={convertedCurrency}
+          gasLoadingError={gasLoadingError}
+          gasTotal={gasTotal}
+          onClick={() => showCustomizeGasModal()}
+        />
+      </SendRowWrapper>
+    )
+  }
+
+}
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
new file mode 100644
index 000000000..8f8e3e4dd
--- /dev/null
+++ b/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
@@ -0,0 +1,27 @@
+import { connect } from 'react-redux'
+import {
+    getConversionRate,
+    getCurrentCurrency,
+    getGasTotal,
+} from '../../send.selectors.js'
+import { getGasLoadingError, gasFeeIsInError } from './send-gas-row.selectors.js'
+import { showModal } from '../../../../actions'
+import SendGasRow from './send-gas-row.component'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendGasRow)
+
+function mapStateToProps (state) {
+  return {
+    conversionRate: getConversionRate(state),
+    convertedCurrency: getCurrentCurrency(state),
+    gasTotal: getGasTotal(state),
+    gasFeeError: gasFeeIsInError(state),
+    gasLoadingError: getGasLoadingError(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showCustomizeGasModal: () => dispatch(showModal({ name: 'CUSTOMIZE_GAS' })),
+  }
+}
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.scss b/ui/app/components/send/send-content/send-gas-row/send-gas-row.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.selectors.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.selectors.js
new file mode 100644
index 000000000..96f6293c2
--- /dev/null
+++ b/ui/app/components/send/send-content/send-gas-row/send-gas-row.selectors.js
@@ -0,0 +1,14 @@
+const selectors = {
+  gasFeeIsInError,
+  getGasLoadingError,
+}
+
+module.exports = selectors
+
+function getGasLoadingError (state) {
+  return state.send.errors.gasLoading
+}
+
+function gasFeeIsInError (state) {
+  return Boolean(state.send.errors.gasFee)
+}
diff --git a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-component.test.js b/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
new file mode 100644
index 000000000..54a92bd2d
--- /dev/null
+++ b/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
@@ -0,0 +1,70 @@
+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'
+
+const propsMethodSpies = {
+  showCustomizeGasModal: sinon.spy(),
+}
+
+describe('SendGasRow Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<SendGasRow
+      conversionRate={20}
+      convertedCurrency={'mockConvertedCurrency'}
+      gasFeeError={'mockGasFeeError'}
+      gasLoadingError={false}
+      gasTotal={'mockGasTotal'}
+      showCustomizeGasModal={propsMethodSpies.showCustomizeGasModal}
+    />, { context: { t: str => str + '_t' } })
+  })
+
+  afterEach(() => {
+    propsMethodSpies.showCustomizeGasModal.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, 'gasFee_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,
+        onClick,
+      } = 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.showCustomizeGasModal.callCount, 0)
+      onClick()
+      assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 1)
+    })
+  })
+})
diff --git a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-container.test.js b/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
new file mode 100644
index 000000000..2ce062505
--- /dev/null
+++ b/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
@@ -0,0 +1,70 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+
+const actionSpies = {
+  showModal: sinon.spy(),
+}
+
+proxyquire('../send-gas-row.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },
+  '../../send.selectors.js': {
+    getConversionRate: (s) => `mockConversionRate:${s}`,
+    getCurrentCurrency: (s) => `mockConvertedCurrency:${s}`,
+    getGasTotal: (s) => `mockGasTotal:${s}`,
+  },
+  './send-gas-row.selectors.js': {
+    getGasLoadingError: (s) => `mockGasLoadingError:${s}`,
+    gasFeeIsInError: (s) => `mockGasFeeError:${s}`,
+  },
+  '../../../../actions': actionSpies,
+})
+
+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',
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+    })
+
+    describe('showCustomizeGasModal()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.showCustomizeGasModal()
+        assert(dispatchSpy.calledOnce)
+        assert.deepEqual(
+          actionSpies.showModal.getCall(0).args[0],
+          { name: 'CUSTOMIZE_GAS' }
+        )
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js b/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
new file mode 100644
index 000000000..d46dd9d8b
--- /dev/null
+++ b/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
@@ -0,0 +1,49 @@
+import assert from 'assert'
+import {
+  gasFeeIsInError,
+  getGasLoadingError,
+} 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)
+    })
+  })
+
+})
diff --git a/ui/app/components/send/send-content/send-row-wrapper/index.js b/ui/app/components/send/send-content/send-row-wrapper/index.js
new file mode 100644
index 000000000..d17545dcc
--- /dev/null
+++ b/ui/app/components/send/send-content/send-row-wrapper/index.js
@@ -0,0 +1 @@
+export { default } from './send-row-wrapper.component'
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/index.js b/ui/app/components/send/send-content/send-row-wrapper/send-row-error-message/index.js
new file mode 100644
index 000000000..c00617f83
--- /dev/null
+++ b/ui/app/components/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/components/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md b/ui/app/components/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/components/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js b/ui/app/components/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/components/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/components/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js b/ui/app/components/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/components/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/components/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss b/ui/app/components/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/components/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js b/ui/app/components/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/components/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/components/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js b/ui/app/components/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/components/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/components/send/send-content/send-row-wrapper/send-row-wrapper-README.md b/ui/app/components/send/send-content/send-row-wrapper/send-row-wrapper-README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-wrapper.component.js b/ui/app/components/send/send-content/send-row-wrapper/send-row-wrapper.component.js
new file mode 100644
index 000000000..b7528a15f
--- /dev/null
+++ b/ui/app/components/send/send-content/send-row-wrapper/send-row-wrapper.component.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowErrorMessage from './send-row-error-message/'
+
+export default class SendRowWrapper extends Component {
+
+  static propTypes = {
+    children: PropTypes.node,
+    errorType: PropTypes.string,
+    label: PropTypes.string,
+    showError: PropTypes.bool,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  render () {
+    const {
+      children,
+      errorType = '',
+      label,
+      showError = false,
+    } = 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}/>}
+            {customLabelContent}
+        </div>
+        <div className="send-v2__form-field">
+            {formField}
+        </div>
+      </div>
+    )
+  }
+
+}
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-wrapper.scss b/ui/app/components/send/send-content/send-row-wrapper/send-row-wrapper.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/components/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js b/ui/app/components/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/components/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/components/send/send-content/send-to-row/index.js b/ui/app/components/send/send-content/send-to-row/index.js
new file mode 100644
index 000000000..121f15148
--- /dev/null
+++ b/ui/app/components/send/send-content/send-to-row/index.js
@@ -0,0 +1 @@
+export { default } from './send-to-row.container'
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row-README.md b/ui/app/components/send/send-content/send-to-row/send-to-row-README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
new file mode 100644
index 000000000..892ad5d67
--- /dev/null
+++ b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper/'
+import EnsInput from '../../../ens-input'
+import { getToErrorObject } from './send-to-row.utils.js'
+
+export default class SendToRow extends Component {
+
+  static propTypes = {
+    closeToDropdown: PropTypes.func,
+    inError: PropTypes.bool,
+    network: PropTypes.string,
+    openToDropdown: PropTypes.func,
+    to: PropTypes.string,
+    toAccounts: PropTypes.array,
+    toDropdownOpen: PropTypes.bool,
+    updateGas: PropTypes.func,
+    updateSendTo: PropTypes.func,
+    updateSendToError: PropTypes.func,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  handleToChange (to, nickname = '', toError) {
+    const { updateSendTo, updateSendToError, updateGas } = this.props
+    const toErrorObject = getToErrorObject(to, toError)
+    updateSendTo(to, nickname)
+    updateSendToError(toErrorObject)
+    if (toErrorObject.to === null) {
+      updateGas({ to })
+    }
+  }
+
+  render () {
+    const {
+      closeToDropdown,
+      inError,
+      network,
+      openToDropdown,
+      to,
+      toAccounts,
+      toDropdownOpen,
+    } = this.props
+
+    return (
+      <SendRowWrapper
+        errorType={'to'}
+        label={`${this.context.t('to')}`}
+        showError={inError}
+      >
+        <EnsInput
+          accounts={toAccounts}
+          closeDropdown={() => closeToDropdown()}
+          dropdownOpen={toDropdownOpen}
+          inError={inError}
+          name={'address'}
+          network={network}
+          onChange={({ toAddress, nickname, toError }) => this.handleToChange(toAddress, nickname, toError)}
+          openDropdown={() => openToDropdown()}
+          placeholder={this.context.t('recipientAddress')}
+          to={to}
+        />
+      </SendRowWrapper>
+    )
+  }
+
+}
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.container.js b/ui/app/components/send/send-content/send-to-row/send-to-row.container.js
new file mode 100644
index 000000000..1c9c9d518
--- /dev/null
+++ b/ui/app/components/send/send-content/send-to-row/send-to-row.container.js
@@ -0,0 +1,42 @@
+import { connect } from 'react-redux'
+import {
+    getCurrentNetwork,
+    getSendTo,
+    getSendToAccounts,
+} from '../../send.selectors.js'
+import {
+    getToDropdownOpen,
+    sendToIsInError,
+} from './send-to-row.selectors.js'
+import {
+    updateSendTo,
+} from '../../../../actions'
+import {
+  updateSendErrors,
+  openToDropdown,
+  closeToDropdown,
+} from '../../../../ducks/send.duck'
+import SendToRow from './send-to-row.component'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendToRow)
+
+function mapStateToProps (state) {
+  return {
+    inError: sendToIsInError(state),
+    network: getCurrentNetwork(state),
+    to: getSendTo(state),
+    toAccounts: getSendToAccounts(state),
+    toDropdownOpen: getToDropdownOpen(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    closeToDropdown: () => dispatch(closeToDropdown()),
+    openToDropdown: () => dispatch(openToDropdown()),
+    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
+    updateSendToError: (toErrorObject) => {
+        dispatch(updateSendErrors(toErrorObject))
+    },
+  }
+}
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.selectors.js b/ui/app/components/send/send-content/send-to-row/send-to-row.selectors.js
new file mode 100644
index 000000000..8919014be
--- /dev/null
+++ b/ui/app/components/send/send-content/send-to-row/send-to-row.selectors.js
@@ -0,0 +1,14 @@
+const selectors = {
+  getToDropdownOpen,
+  sendToIsInError,
+}
+
+module.exports = selectors
+
+function getToDropdownOpen (state) {
+  return state.send.toDropdownOpen
+}
+
+function sendToIsInError (state) {
+    return Boolean(state.send.errors.to)
+}
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.utils.js b/ui/app/components/send/send-content/send-to-row/send-to-row.utils.js
new file mode 100644
index 000000000..6b90a9f09
--- /dev/null
+++ b/ui/app/components/send/send-content/send-to-row/send-to-row.utils.js
@@ -0,0 +1,19 @@
+const {
+  REQUIRED_ERROR,
+  INVALID_RECIPIENT_ADDRESS_ERROR,
+} = require('../../send.constants')
+const { isValidAddress } = require('../../../../util')
+
+function getToErrorObject (to, toError = null) {
+  if (!to) {
+    toError = REQUIRED_ERROR
+  } else if (!isValidAddress(to) && !toError) {
+    toError = INVALID_RECIPIENT_ADDRESS_ERROR
+  }
+
+  return { to: toError }
+}
+
+module.exports = {
+  getToErrorObject,
+}
diff --git a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-component.test.js b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-component.test.js
new file mode 100644
index 000000000..781371004
--- /dev/null
+++ b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-component.test.js
@@ -0,0 +1,149 @@
+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}`,
+    }),
+  },
+}).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(),
+}
+
+sinon.spy(SendToRow.prototype, 'handleToChange')
+
+describe('SendToRow Component', function () {
+  let wrapper
+  let instance
+
+  beforeEach(() => {
+    wrapper = shallow(<SendToRow
+      closeToDropdown={propsMethodSpies.closeToDropdown}
+      inError={false}
+      network={'mockNetwork'}
+      openToDropdown={propsMethodSpies.openToDropdown}
+      to={'mockTo'}
+      toAccounts={['mockAccount']}
+      toDropdownOpen={false}
+      updateGas={propsMethodSpies.updateGas}
+      updateSendTo={propsMethodSpies.updateSendTo}
+      updateSendToError={propsMethodSpies.updateSendToError}
+    />, { context: { t: str => str + '_t' } })
+    instance = wrapper.instance()
+  })
+
+  afterEach(() => {
+    propsMethodSpies.closeToDropdown.resetHistory()
+    propsMethodSpies.openToDropdown.resetHistory()
+    propsMethodSpies.updateSendTo.resetHistory()
+    propsMethodSpies.updateSendToError.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 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' })
+      assert.equal(SendToRow.prototype.handleToChange.callCount, 1)
+      assert.deepEqual(
+        SendToRow.prototype.handleToChange.getCall(0).args,
+        ['mockNewTo', 'mockNewNickname', 'mockToError']
+      )
+    })
+  })
+})
diff --git a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-container.test.js b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-container.test.js
new file mode 100644
index 000000000..92355c00a
--- /dev/null
+++ b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-container.test.js
@@ -0,0 +1,113 @@
+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(),
+}
+
+proxyquire('../send-to-row.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },
+  '../../send.selectors.js': {
+    getCurrentNetwork: (s) => `mockNetwork:${s}`,
+    getSendTo: (s) => `mockTo:${s}`,
+    getSendToAccounts: (s) => `mockToAccounts:${s}`,
+  },
+  './send-to-row.selectors.js': {
+    getToDropdownOpen: (s) => `mockToDropdownOpen:${s}`,
+    sendToIsInError: (s) => `mockInError:${s}`,
+  },
+  '../../../../actions': actionSpies,
+  '../../../../ducks/send.duck': duckActionSpies,
+})
+
+describe('send-to-row container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        inError: 'mockInError:mockState',
+        network: 'mockNetwork:mockState',
+        to: 'mockTo:mockState',
+        toAccounts: 'mockToAccounts:mockState',
+        toDropdownOpen: 'mockToDropdownOpen: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'
+        )
+      })
+    })
+
+  })
+
+})
diff --git a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-selectors.test.js b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-selectors.test.js
new file mode 100644
index 000000000..122ad3265
--- /dev/null
+++ b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-selectors.test.js
@@ -0,0 +1,47 @@
+import assert from 'assert'
+import {
+  getToDropdownOpen,
+  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)
+    })
+  })
+
+})
diff --git a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-utils.test.js b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-utils.test.js
new file mode 100644
index 000000000..4d2447c32
--- /dev/null
+++ b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-utils.test.js
@@ -0,0 +1,51 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+import {
+  REQUIRED_ERROR,
+  INVALID_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', {
+  '../../../../util': {
+    isValidAddress: stubs.isValidAddress,
+  },
+})
+const {
+  getToErrorObject,
+} = 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 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',
+      })
+    })
+  })
+
+})
diff --git a/ui/app/components/send/send-content/tests/send-content-component.test.js b/ui/app/components/send/send-content/tests/send-content-component.test.js
new file mode 100644
index 000000000..d5bb6693c
--- /dev/null
+++ b/ui/app/components/send/send-content/tests/send-content-component.test.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import SendContent from '../send-content.component.js'
+
+import PageContainerContent from '../../../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'
+
+describe('SendContent Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<SendContent />)
+  })
+
+  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))
+    })
+  })
+})
-- 
cgit