aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/send_/send-content
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/send_/send-content')
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/README.md0
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.component.js0
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.container.js0
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js0
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js0
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js0
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js48
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/send-amount-row.scss0
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/send-amount-row.selectors.js0
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/send-amount-row.utils.js0
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-container.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-selectors.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-utils.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-content-README.md0
-rw-r--r--ui/app/components/send_/send-content/send-content.component.js0
-rw-r--r--ui/app/components/send_/send-content/send-content.scss0
-rw-r--r--ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown-README.md0
-rw-r--r--ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.component.js0
-rw-r--r--ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.scss0
-rw-r--r--ui/app/components/send_/send-content/send-from-row/from-dropdown/tests/from-dropdown-component.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-from-row/send-from-row-README.md0
-rw-r--r--ui/app/components/send_/send-content/send-from-row/send-from-row.component.js64
-rw-r--r--ui/app/components/send_/send-content/send-from-row/send-from-row.container.js44
-rw-r--r--ui/app/components/send_/send-content/send-from-row/send-from-row.selectors.js9
-rw-r--r--ui/app/components/send_/send-content/send-from-row/send-from-row.utils.js12
-rw-r--r--ui/app/components/send_/send-content/send-from-row/tests/send-from-row-component.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-from-row/tests/send-from-row-container.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-from-row/tests/send-from-row-selectors.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-gas-row/README.md0
-rw-r--r--ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js0
-rw-r--r--ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js0
-rw-r--r--ui/app/components/send_/send-content/send-gas-row/send-gas-row.scss0
-rw-r--r--ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js0
-rw-r--r--ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-container.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-selectors.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md0
-rw-r--r--ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js23
-rw-r--r--ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js11
-rw-r--r--ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss0
-rw-r--r--ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper-README.md0
-rw-r--r--ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.component.js39
-rw-r--r--ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.scss0
-rw-r--r--ui/app/components/send_/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-to-row/send-to-row-README.md0
-rw-r--r--ui/app/components/send_/send-content/send-to-row/send-to-row.component.js62
-rw-r--r--ui/app/components/send_/send-content/send-to-row/send-to-row.container.js43
-rw-r--r--ui/app/components/send_/send-content/send-to-row/send-to-row.selectors.js14
-rw-r--r--ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js17
-rw-r--r--ui/app/components/send_/send-content/send-to-row/tests/send-to-row-component.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-to-row/tests/send-to-row-container.test.js0
-rw-r--r--ui/app/components/send_/send-content/send-to-row/tests/send-to-row-selectors.test.js0
-rw-r--r--ui/app/components/send_/send-content/tests/send-content-component.test.js0
58 files changed, 386 insertions, 0 deletions
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
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/README.md
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js
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..6ae80e7f2
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js
@@ -0,0 +1,48 @@
+import {
+ getSelectedToken,
+ getPrimaryCurrency,
+ getAmountConversionRate,
+ getConvertedCurrency,
+ getSendAmount,
+ getGasTotal,
+ getSelectedBalance,
+ getTokenBalance,
+} from '../../send.selectors.js'
+import {
+ getMaxModeOn,
+ getSendAmountError,
+} from './send-amount-row.selectors.js'
+import { getAmountErrorObject } from './send-to-row.utils.js'
+import {
+ updateSendErrors,
+ updateSendTo,
+} from '../../../actions'
+import {
+ openToDropdown,
+ closeToDropdown,
+} from '../../../ducks/send'
+import SendToRow from './send-to-row.component'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendToRow)
+
+function mapStateToProps (state) {
+updateSendTo
+return {
+ to: getSendTo(state),
+ toAccounts: getSendToAccounts(state),
+ toDropdownOpen: getToDropdownOpen(state),
+ inError: sendToIsInError(state),
+ network: getCurrentNetwork(state),
+}
+}
+
+function mapDispatchToProps (dispatch) {
+return {
+ updateSendToError: (to) => {
+ dispatch(updateSendErrors(getToErrorObject(to)))
+ },
+ updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
+ openToDropdown: () => dispatch(()),
+ closeToDropdown: () => dispatch(()),
+}
+} \ No newline at end of file
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
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.scss
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.selectors.js
diff --git a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.utils.js b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.utils.js
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.utils.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-container.test.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-selectors.test.js
diff --git a/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-utils.test.js b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-utils.test.js
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-utils.test.js
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
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-content-README.md
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-content.component.js
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
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-content.scss
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
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown-README.md
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.component.js
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
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.scss
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-from-row/from-dropdown/tests/from-dropdown-component.test.js
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
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-from-row/send-from-row-README.md
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..7582cb2e6
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-from-row/send-from-row.component.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../../../send/from-dropdown'
+import FromDropdown from ''
+
+export default class SendFromRow extends Component {
+
+ static propTypes = {
+ closeFromDropdown: PropTypes.func,
+ conversionRate: PropTypes.string,
+ from: PropTypes.string,
+ fromAccounts: PropTypes.array,
+ fromDropdownOpen: PropTypes.bool,
+ openFromDropdown: PropTypes.func,
+ tokenContract: PropTypes.object,
+ updateSendFrom: PropTypes.func,
+ updateSendTokenBalance: PropTypes.func,
+ };
+
+ async handleFromChange (newFrom) {
+ const {
+ updateSendFrom,
+ tokenContract,
+ updateSendTokenBalance,
+ } = this.props
+
+ if (tokenContract) {
+ const usersToken = await tokenContract.balanceOf(newFrom.address)
+ updateSendTokenBalance(usersToken)
+ }
+ updateSendFrom(newFrom)
+ }
+
+ render () {
+ const {
+ from,
+ fromAccounts,
+ conversionRate,
+ fromDropdownOpen,
+ tokenContract,
+ openFromDropdown,
+ closeFromDropdown,
+ } = this.props
+
+ return (
+ <SendRowWrapper label={`${this.context.t('from')}:`}>
+ <FromDropdown
+ dropdownOpen={fromDropdownOpen}
+ accounts={fromAccounts}
+ selectedAccount={from}
+ onSelect={newFrom => this.handleFromChange(newFrom)}
+ openDropdown={() => openFromDropdown()}
+ closeDropdown={() => closeFromDropdown()}
+ conversionRate={conversionRate}
+ />
+ </SendRowWrapper>
+ );
+ }
+
+}
+
+SendFromRow.contextTypes = {
+ t: PropTypes.func,
+}
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..2ff3f0ccd
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-from-row/send-from-row.container.js
@@ -0,0 +1,44 @@
+import {
+ getSendFrom,
+ conversionRateSelector,
+ getSelectedTokenContract,
+ getCurrentAccountWithSendEtherInfo,
+ accountsWithSendEtherInfoSelector,
+} from '../../send.selectors.js'
+import { getFromDropdownOpen } from './send-from-row.selectors.js'
+import { calcTokenUpdateAmount } from './send-from-row.utils.js'
+import {
+ updateSendTokenBalance,
+ updateSendFrom,
+} from '../../../actions'
+import {
+ openFromDropdown,
+ closeFromDropdown,
+} from '../../../ducks/send'
+import SendFromRow from './send-from-row.component'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendFromRow)
+
+function mapStateToProps (state) {
+ return {
+ from: getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state),
+ fromAccounts: accountsWithSendEtherInfoSelector(state),
+ conversionRate: conversionRateSelector(state),
+ fromDropdownOpen: getFromDropdownOpen(state),
+ tokenContract: getSelectedTokenContract(state),
+ }
+}
+
+function mapDispatchToProps (dispatch) {
+ return {
+ updateSendTokenBalance: (usersToken, selectedToken) => {
+ if (!usersToken) return
+
+ const tokenBalance = calcTokenUpdateAmount(selectedToken, selectedToken)
+ dispatch(updateSendTokenBalance(tokenBalance))
+ },
+ updateSendFrom: newFrom => dispatch(updateSendFrom(newFrom)),
+ openFromDropdown: () => dispatch(()),
+ closeFromDropdown: () => dispatch(()),
+ }
+}
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/send-from-row.utils.js b/ui/app/components/send_/send-content/send-from-row/send-from-row.utils.js
new file mode 100644
index 000000000..2be25816f
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-from-row/send-from-row.utils.js
@@ -0,0 +1,12 @@
+const {
+ calcTokenAmount,
+} = require('../../token-util')
+
+function calcTokenUpdateAmount (usersToken, selectedToken) {
+ const { decimals } = selectedToken || {}
+ return calcTokenAmount(usersToken.balance.toString(), decimals)
+}
+
+module.exports = {
+ calcTokenUpdateAmount
+}
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-from-row/tests/send-from-row-component.test.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-from-row/tests/send-from-row-container.test.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-from-row/tests/send-from-row-selectors.test.js
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
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-gas-row/README.md
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js
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
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.scss
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-container.test.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
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
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md
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..08f830cc5
--- /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,23 @@
+export default class SendRowErrorMessage extends Component {
+
+ static propTypes = {
+ errors: PropTypes.object,
+ errorType: PropTypes.string,
+ };
+
+ render () {
+ const { errors, errorType } = this.props
+ const errorMessage = errors[errorType]
+
+ return (
+ errorMessage
+ ? <div className='send-v2__error'>{errorMessage}</div>
+ : null
+ );
+ }
+
+}
+
+SendRowErrorMessage.contextTypes = {
+ t: PropTypes.func,
+} \ No newline at end of file
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..2278dbe63
--- /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,11 @@
+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,
+ }
+} \ No newline at end of file
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
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss
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
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper-README.md
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..a1ac591b9
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.component.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowErrorMessage from './send-row-error-message/send-row-error-message.container'
+
+export default class SendRowWrapper extends Component {
+
+ static propTypes = {
+ label: PropTypes.string,
+ showError: PropTypes.bool,
+ children: PropTypes.node,
+ errorType: PropTypes.string,
+ };
+
+ render () {
+ const {
+ label,
+ errorType = '',
+ showError = false,
+ children,
+ } = this.props
+
+ return (
+ <div className="send-v2__form-row">
+ <div className="send-v2__form-label">
+ {label}
+ (showError && <SendRowErrorMessage errorType={errorType}/>)
+ </div>
+ <div className="send-v2__form-field">
+ {children}
+ </div>
+ </div>
+ );
+ }
+
+}
+
+SendRowWrapper.contextTypes = {
+ t: PropTypes.func,
+}
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
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.scss
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
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
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-to-row/send-to-row-README.md
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..abcb54efc
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-to-row/send-to-row.component.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../../../send/from-dropdown'
+import ToDropdown from '../../../ens-input'
+
+export default class SendToRow extends Component {
+
+ static propTypes = {
+ to: PropTypes.string,
+ toAccounts: PropTypes.array,
+ toDropdownOpen: PropTypes.bool,
+ inError: PropTypes.bool,
+ updateSendTo: PropTypes.func,
+ updateSendToError: PropTypes.func,
+ openToDropdown: PropTypes.func,
+ closeToDropdown: PropTypes.func,
+ network: PropTypes.number,
+ };
+
+ handleToChange (to, nickname = '') {
+ const { updateSendTo, updateSendToError } = this.props
+ updateSendTo(to, nickname)
+ updateSendErrors(to)
+ }
+
+ render () {
+ const {
+ from,
+ fromAccounts,
+ conversionRate,
+ fromDropdownOpen,
+ tokenContract,
+ openToDropdown,
+ closeToDropdown,
+ network,
+ inError,
+ } = this.props
+
+ return (
+ <SendRowWrapper label={`${this.context.t('to')}:`}>
+ <EnsInput
+ name={'address'}
+ placeholder={this.context.t('recipient Address')}
+ network={network},
+ to={to},
+ accounts={toAccounts}
+ dropdownOpen={toDropdownOpen}
+ openDropdown={() => openToDropdown()}
+ closeDropdown={() => closeToDropdown()}
+ onChange={this.handleToChange}
+ inError={inError}
+ />
+ </SendRowWrapper>
+ );
+ }
+
+}
+
+SendToRow.contextTypes = {
+ t: PropTypes.func,
+}
+
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..1c446c168
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-to-row/send-to-row.container.js
@@ -0,0 +1,43 @@
+import {
+ getSendTo,
+ getToAccounts,
+ getCurrentNetwork,
+} from '../../send.selectors.js'
+import {
+ getToDropdownOpen,
+ sendToIsInError,
+} from './send-to-row.selectors.js'
+import { getToErrorObject } from './send-to-row.utils.js'
+import {
+ updateSendErrors,
+ updateSendTo,
+} from '../../../actions'
+import {
+ openToDropdown,
+ closeToDropdown,
+} from '../../../ducks/send'
+import SendToRow from './send-to-row.component'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendToRow)
+
+function mapStateToProps (state) {
+ updateSendTo
+ return {
+ to: getSendTo(state),
+ toAccounts: getSendToAccounts(state),
+ toDropdownOpen: getToDropdownOpen(state),
+ inError: sendToIsInError(state),
+ network: getCurrentNetwork(state),
+ }
+}
+
+function mapDispatchToProps (dispatch) {
+ return {
+ updateSendToError: (to) => {
+ dispatch(updateSendErrors(getToErrorObject(to)))
+ },
+ updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
+ openToDropdown: () => dispatch(()),
+ closeToDropdown: () => dispatch(()),
+ }
+} \ No newline at end of file
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..05bb65fa3
--- /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.metamask.send.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..52bfde009
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js
@@ -0,0 +1,17 @@
+const { isValidAddress } = require('../../../../util')
+
+function getToErrorObject (to) {
+ let toError = null
+
+ if (!to) {
+ toError = 'required'
+ } else if (!isValidAddress(to)) {
+ toError = 'invalidAddressRecipient'
+ }
+
+ 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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-component.test.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-container.test.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-selectors.test.js
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..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/send-content/tests/send-content-component.test.js