merge develop

10 files changed, 505 insertions, 0 deletions

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
--- /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..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',
+      })
+    })
+  })
+
+})