7 files changed, 125 insertions, 0 deletions
diff --git a/ui/app/pages/send/send-content/send-from-row/index.js b/ui/app/pages/send/send-content/send-from-row/index.js
new file mode 100644
index 000000000..0a79726b2
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-from-row/index.js
@@ -0,0 +1 @@
+export { default } from './send-from-row.container'
diff --git a/ui/app/pages/send/send-content/send-from-row/send-from-row.component.js b/ui/app/pages/send/send-content/send-from-row/send-from-row.component.js
new file mode 100644
index 000000000..dfa53e970
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-from-row/send-from-row.component.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper'
+import AccountListItem from '../../account-list-item'
+
+export default class SendFromRow extends Component {
+  static propTypes = {
+    from: PropTypes.object,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  render () {
+    const { t } = this.context
+    const { from } = this.props
+
+    return (
+      <SendRowWrapper label={`${t('from')}:`}>
+        <div className="send-v2__from-dropdown">
+          <AccountListItem account={from} />
+        </div>
+      </SendRowWrapper>
+    )
+  }
+}
diff --git a/ui/app/pages/send/send-content/send-from-row/send-from-row.container.js b/ui/app/pages/send/send-content/send-from-row/send-from-row.container.js
new file mode 100644
index 000000000..fe3ac9aa1
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-from-row/send-from-row.container.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+import { getSendFromObject } from '../../send.selectors.js'
+import SendFromRow from './send-from-row.component'
+
+function mapStateToProps (state) {
+  return {
+    from: getSendFromObject(state),
+  }
+}
+
+export default connect(mapStateToProps)(SendFromRow)
diff --git a/ui/app/pages/send/send-content/send-from-row/send-from-row.selectors.js b/ui/app/pages/send/send-content/send-from-row/send-from-row.selectors.js
new file mode 100644
index 000000000..03ef4806b
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-from-row/send-from-row.selectors.js
@@ -0,0 +1,9 @@
+const selectors = {
+  getFromDropdownOpen,
+}
+
+module.exports = selectors
+
+function getFromDropdownOpen (state) {
+  return state.send.fromDropdownOpen
+}
diff --git a/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-component.test.js b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-component.test.js
new file mode 100644
index 000000000..18811c57e
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-component.test.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import SendFromRow from '../send-from-row.component.js'
+import AccountListItem from '../../../account-list-item'
+import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
+
+describe('SendFromRow Component', function () {
+  describe('render', () => {
+    const wrapper = shallow(
+      <SendFromRow
+        from={ { address: 'mockAddress' } }
+      />,
+      { context: { t: str => str + '_t' } }
+    )
+
+    it('should render a SendRowWrapper component', () => {
+      assert.equal(wrapper.find(SendRowWrapper).length, 1)
+    })
+
+    it('should pass the correct props to SendRowWrapper', () => {
+      const { label } = wrapper.find(SendRowWrapper).props()
+      assert.equal(label, 'from_t:')
+    })
+
+    it('should render the FromDropdown with the correct props', () => {
+      const { account } = wrapper.find(AccountListItem).props()
+      assert.deepEqual(account, { address: 'mockAddress' })
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-container.test.js b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-container.test.js
new file mode 100644
index 000000000..fd771ea77
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-container.test.js
@@ -0,0 +1,26 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+let mapStateToProps
+
+proxyquire('../send-from-row.container.js', {
+  'react-redux': {
+    connect: ms => {
+      mapStateToProps = ms
+      return () => ({})
+    },
+  },
+  '../../send.selectors.js': {
+    getSendFromObject: (s) => `mockFrom:${s}`,
+  },
+})
+
+describe('send-from-row container', () => {
+  describe('mapStateToProps()', () => {
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        from: 'mockFrom:mockState',
+      })
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-selectors.test.js b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-selectors.test.js
new file mode 100644
index 000000000..ecb57bbc3
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-selectors.test.js
@@ -0,0 +1,20 @@
+import assert from 'assert'
+import {
+  getFromDropdownOpen,
+} from '../send-from-row.selectors.js'
+
+describe('send-from-row selectors', () => {
+
+  describe('getFromDropdownOpen()', () => {
+    it('should get send.fromDropdownOpen', () => {
+      const state = {
+        send: {
+          fromDropdownOpen: null,
+        },
+      }
+
+      assert.equal(getFromDropdownOpen(state), null)
+    })
+  })
+
+})