1 files changed, 63 insertions, 0 deletions
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..a580aef96
--- /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,
+  };
+
+  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>
+    )
+  }
+
+}
+
+SendFromRow.contextTypes = {
+  t: PropTypes.func,
+}