Merge pull request #4814 from whymarrh/send-data

Add hex data input to send screen

14 files changed, 150 insertions, 21 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 0aeb802f8..d8b3ed69d 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -164,6 +164,7 @@ var actions = {
   UPDATE_GAS_PRICE: 'UPDATE_GAS_PRICE',
   UPDATE_GAS_TOTAL: 'UPDATE_GAS_TOTAL',
   UPDATE_SEND_FROM: 'UPDATE_SEND_FROM',
+  UPDATE_SEND_HEX_DATA: 'UPDATE_SEND_HEX_DATA',
   UPDATE_SEND_TOKEN_BALANCE: 'UPDATE_SEND_TOKEN_BALANCE',
   UPDATE_SEND_TO: 'UPDATE_SEND_TO',
   UPDATE_SEND_AMOUNT: 'UPDATE_SEND_AMOUNT',
@@ -183,6 +184,7 @@ var actions = {
   setSendTokenBalance,
   updateSendTokenBalance,
   updateSendFrom,
+  updateSendHexData,
   updateSendTo,
   updateSendAmount,
   updateSendMemo,
@@ -838,6 +840,13 @@ function updateSendFrom (from) {
   }
 }
 
+function updateSendHexData (value) {
+  return {
+    type: actions.UPDATE_SEND_HEX_DATA,
+    value,
+  }
+}
+
 function updateSendTo (to, nickname = '') {
   return {
     type: actions.UPDATE_SEND_TO,
diff --git a/ui/app/components/send/send-content/send-content.component.js b/ui/app/components/send/send-content/send-content.component.js
index adc114c0e..7a0b1a18e 100644
--- a/ui/app/components/send/send-content/send-content.component.js
+++ b/ui/app/components/send/send-content/send-content.component.js
@@ -4,6 +4,7 @@ import PageContainerContent from '../../page-container/page-container-content.co
 import SendAmountRow from './send-amount-row/'
 import SendFromRow from './send-from-row/'
 import SendGasRow from './send-gas-row/'
+import SendHexDataRow from './send-hex-data-row'
 import SendToRow from './send-to-row/'
 
 export default class SendContent extends Component {
@@ -20,6 +21,7 @@ export default class SendContent extends Component {
           <SendToRow updateGas={(updateData) => this.props.updateGas(updateData)} />
           <SendAmountRow updateGas={(updateData) => this.props.updateGas(updateData)} />
           <SendGasRow />
+          <SendHexDataRow />
         </div>
       </PageContainerContent>
     )
diff --git a/ui/app/components/send/send-content/send-hex-data-row/index.js b/ui/app/components/send/send-content/send-hex-data-row/index.js
new file mode 100644
index 000000000..08c341067
--- /dev/null
+++ b/ui/app/components/send/send-content/send-hex-data-row/index.js
@@ -0,0 +1 @@
+export { default } from './send-hex-data-row.container'
diff --git a/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.component.js b/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.component.js
new file mode 100644
index 000000000..063930db3
--- /dev/null
+++ b/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.component.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper'
+
+export default class SendHexDataRow extends Component {
+  static propTypes = {
+    data: PropTypes.string,
+    inError: PropTypes.bool,
+    updateSendHexData: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  onInput = (event) => {
+    const {updateSendHexData} = this.props
+    event.target.value = event.target.value.replace(/\n/g, '')
+    updateSendHexData(event.target.value || null)
+  }
+
+  render () {
+    const {inError} = this.props
+    const {t} = this.context
+
+    return (
+      <SendRowWrapper
+        label={`${t('hexData')}:`}
+        showError={inError}
+        errorType={'amount'}
+      >
+        <textarea
+          onInput={this.onInput}
+          placeholder="Optional"
+          className="send-v2__hex-data__input"
+        />
+      </SendRowWrapper>
+    )
+  }
+}
diff --git a/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.container.js b/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.container.js
new file mode 100644
index 000000000..df554ca5f
--- /dev/null
+++ b/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.container.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux'
+import {
+  updateSendHexData,
+} from '../../../../actions'
+import SendHexDataRow from './send-hex-data-row.component'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendHexDataRow)
+
+function mapStateToProps (state) {
+  return {
+    data: state.metamask.send.data,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    updateSendHexData (data) {
+      return dispatch(updateSendHexData(data))
+    },
+  }
+}
diff --git a/ui/app/components/send/send-footer/send-footer.component.js b/ui/app/components/send/send-footer/send-footer.component.js
index 2085f1dce..518cff06e 100644
--- a/ui/app/components/send/send-footer/send-footer.component.js
+++ b/ui/app/components/send/send-footer/send-footer.component.js
@@ -8,6 +8,7 @@ export default class SendFooter extends Component {
   static propTypes = {
     addToAddressBookIfNew: PropTypes.func,
     amount: PropTypes.string,
+    data: PropTypes.string,
     clearSend: PropTypes.func,
     disabled: PropTypes.bool,
     editingTransactionId: PropTypes.string,
@@ -41,6 +42,7 @@ export default class SendFooter extends Component {
     const {
       addToAddressBookIfNew,
       amount,
+      data,
       editingTransactionId,
       from: {address: from},
       gasLimit: gas,
@@ -68,6 +70,7 @@ export default class SendFooter extends Component {
     const promise = editingTransactionId
       ? update({
         amount,
+        data,
         editingTransactionId,
         from,
         gas,
@@ -76,7 +79,7 @@ export default class SendFooter extends Component {
         to,
         unapprovedTxs,
       })
-      : sign({ selectedToken, to, amount, from, gas, gasPrice })
+      : sign({ data, selectedToken, to, amount, from, gas, gasPrice })
 
     Promise.resolve(promise)
       .then(() => history.push(CONFIRM_TRANSACTION_ROUTE))
diff --git a/ui/app/components/send/send-footer/send-footer.container.js b/ui/app/components/send/send-footer/send-footer.container.js
index 0af6fcfa1..60de4d030 100644
--- a/ui/app/components/send/send-footer/send-footer.container.js
+++ b/ui/app/components/send/send-footer/send-footer.container.js
@@ -18,6 +18,7 @@ import {
   getSendFromObject,
   getSendTo,
   getSendToAccounts,
+  getSendHexData,
   getTokenBalance,
   getUnapprovedTxs,
 } from '../send.selectors'
@@ -35,6 +36,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(SendFooter)
 function mapStateToProps (state) {
   return {
     amount: getSendAmount(state),
+    data: getSendHexData(state),
     editingTransactionId: getSendEditingTransactionId(state),
     from: getSendFromObject(state),
     gasLimit: getGasLimit(state),
@@ -52,9 +54,10 @@ function mapStateToProps (state) {
 function mapDispatchToProps (dispatch) {
   return {
     clearSend: () => dispatch(clearSend()),
-    sign: ({ selectedToken, to, amount, from, gas, gasPrice }) => {
+    sign: ({ selectedToken, to, amount, from, gas, gasPrice, data }) => {
       const txParams = constructTxParams({
         amount,
+        data,
         from,
         gas,
         gasPrice,
@@ -68,6 +71,7 @@ function mapDispatchToProps (dispatch) {
     },
     update: ({
       amount,
+      data,
       editingTransactionId,
       from,
       gas,
@@ -78,6 +82,7 @@ function mapDispatchToProps (dispatch) {
     }) => {
       const editingTx = constructUpdatedTx({
         amount,
+        data,
         editingTransactionId,
         from,
         gas,
diff --git a/ui/app/components/send/send-footer/send-footer.utils.js b/ui/app/components/send/send-footer/send-footer.utils.js
index 875e7d948..f82ff1e9b 100644
--- a/ui/app/components/send/send-footer/send-footer.utils.js
+++ b/ui/app/components/send/send-footer/send-footer.utils.js
@@ -8,8 +8,9 @@ function addHexPrefixToObjectValues (obj) {
   }, {})
 }
 
-function constructTxParams ({ selectedToken, to, amount, from, gas, gasPrice }) {
+function constructTxParams ({ selectedToken, data, to, amount, from, gas, gasPrice }) {
   const txParams = {
+    data,
     from,
     value: '0',
     gas,
@@ -21,13 +22,12 @@ function constructTxParams ({ selectedToken, to, amount, from, gas, gasPrice })
     txParams.to = to
   }
 
-  const hexPrefixedTxParams = addHexPrefixToObjectValues(txParams)
-
-  return hexPrefixedTxParams
+  return addHexPrefixToObjectValues(txParams)
 }
 
 function constructUpdatedTx ({
   amount,
+  data,
   editingTransactionId,
   from,
   gas,
@@ -36,9 +36,21 @@ function constructUpdatedTx ({
   to,
   unapprovedTxs,
 }) {
+  const unapprovedTx = unapprovedTxs[editingTransactionId]
+  const txParamsData = unapprovedTx.txParams.data ? unapprovedTx.txParams.data : data
   const editingTx = {
-    ...unapprovedTxs[editingTransactionId],
-    txParams: addHexPrefixToObjectValues({ from, gas, gasPrice }),
+    ...unapprovedTx,
+    txParams: Object.assign(
+      unapprovedTx.txParams,
+      addHexPrefixToObjectValues({
+        data: txParamsData,
+        to,
+        from,
+        gas,
+        gasPrice,
+        value: amount,
+      })
+    ),
   }
 
   if (selectedToken) {
@@ -52,18 +64,10 @@ function constructUpdatedTx ({
       to: selectedToken.address,
       data,
     }))
-  } else {
-    const { data } = unapprovedTxs[editingTransactionId].txParams
-
-    Object.assign(editingTx.txParams, addHexPrefixToObjectValues({
-      value: amount,
-      to,
-      data,
-    }))
+  }
 
-    if (typeof editingTx.txParams.data === 'undefined') {
-      delete editingTx.txParams.data
-    }
+  if (typeof editingTx.txParams.data === 'undefined') {
+    delete editingTx.txParams.data
   }
 
   return editingTx
diff --git a/ui/app/components/send/send-footer/tests/send-footer-component.test.js b/ui/app/components/send/send-footer/tests/send-footer-component.test.js
index 4b2cd327d..65e4bb654 100644
--- a/ui/app/components/send/send-footer/tests/send-footer-component.test.js
+++ b/ui/app/components/send/send-footer/tests/send-footer-component.test.js
@@ -129,6 +129,7 @@ describe('SendFooter Component', function () {
       assert.deepEqual(
         propsMethodSpies.update.getCall(0).args[0],
         {
+          data: undefined,
           amount: 'mockAmount',
           editingTransactionId: 'mockEditingTransactionId',
           from: 'mockAddress',
@@ -152,6 +153,7 @@ describe('SendFooter Component', function () {
       assert.deepEqual(
         propsMethodSpies.sign.getCall(0).args[0],
         {
+          data: undefined,
           amount: 'mockAmount',
           from: 'mockAddress',
           gas: 'mockGasLimit',
diff --git a/ui/app/components/send/send-footer/tests/send-footer-container.test.js b/ui/app/components/send/send-footer/tests/send-footer-container.test.js
index 39d6a7686..cf4c893ee 100644
--- a/ui/app/components/send/send-footer/tests/send-footer-container.test.js
+++ b/ui/app/components/send/send-footer/tests/send-footer-container.test.js
@@ -38,6 +38,7 @@ proxyquire('../send-footer.container.js', {
     getSendTo: (s) => `mockTo:${s}`,
     getSendToAccounts: (s) => `mockToAccounts:${s}`,
     getTokenBalance: (s) => `mockTokenBalance:${s}`,
+    getSendHexData: (s) => `mockHexData:${s}`,
     getUnapprovedTxs: (s) => `mockUnapprovedTxs:${s}`,
   },
   './send-footer.selectors': { isSendFormInError: (s) => `mockInError:${s}` },
@@ -51,6 +52,7 @@ describe('send-footer container', () => {
     it('should map the correct properties to props', () => {
       assert.deepEqual(mapStateToProps('mockState'), {
         amount: 'mockAmount:mockState',
+        data: 'mockHexData:mockState',
         selectedToken: 'mockSelectedToken:mockState',
         editingTransactionId: 'mockEditingTransactionId:mockState',
         from: 'mockFromObject:mockState',
@@ -100,6 +102,7 @@ describe('send-footer container', () => {
         assert.deepEqual(
           utilsStubs.constructTxParams.getCall(0).args[0],
           {
+            data: undefined,
             selectedToken: {
               address: '0xabc',
             },
@@ -129,6 +132,7 @@ describe('send-footer container', () => {
         assert.deepEqual(
           utilsStubs.constructTxParams.getCall(0).args[0],
           {
+            data: undefined,
             selectedToken: undefined,
             to: 'mockTo',
             amount: 'mockAmount',
@@ -160,6 +164,7 @@ describe('send-footer container', () => {
         assert.deepEqual(
           utilsStubs.constructUpdatedTx.getCall(0).args[0],
           {
+            data: undefined,
             to: 'mockTo',
             amount: 'mockAmount',
             from: 'mockFrom',
diff --git a/ui/app/components/send/send-footer/tests/send-footer-utils.test.js b/ui/app/components/send/send-footer/tests/send-footer-utils.test.js
index 2d3135995..28ff0c891 100644
--- a/ui/app/components/send/send-footer/tests/send-footer-utils.test.js
+++ b/ui/app/components/send/send-footer/tests/send-footer-utils.test.js
@@ -65,6 +65,28 @@ describe('send-footer utils', () => {
   })
 
   describe('constructTxParams()', () => {
+    it('should return a new txParams object with data if there data is given', () => {
+      assert.deepEqual(
+        constructTxParams({
+          data: 'someData',
+          selectedToken: false,
+          to: 'mockTo',
+          amount: 'mockAmount',
+          from: 'mockFrom',
+          gas: 'mockGas',
+          gasPrice: 'mockGasPrice',
+        }),
+        {
+          data: '0xsomeData',
+          to: '0xmockTo',
+          value: '0xmockAmount',
+          from: '0xmockFrom',
+          gas: '0xmockGas',
+          gasPrice: '0xmockGasPrice',
+        }
+      )
+    })
+
     it('should return a new txParams object with value and to properties if there is no selectedToken', () => {
       assert.deepEqual(
         constructTxParams({
@@ -76,6 +98,7 @@ describe('send-footer utils', () => {
           gasPrice: 'mockGasPrice',
         }),
         {
+          data: undefined,
           to: '0xmockTo',
           value: '0xmockAmount',
           from: '0xmockFrom',
@@ -96,6 +119,7 @@ describe('send-footer utils', () => {
           gasPrice: 'mockGasPrice',
         }),
         {
+          data: undefined,
           value: '0x0',
           from: '0xmockFrom',
           gas: '0xmockGas',
diff --git a/ui/app/components/send/send.selectors.js b/ui/app/components/send/send.selectors.js
index f910f7caf..cf07eafe1 100644
--- a/ui/app/components/send/send.selectors.js
+++ b/ui/app/components/send/send.selectors.js
@@ -33,6 +33,7 @@ const selectors = {
   getSelectedTokenExchangeRate,
   getSelectedTokenToFiatRate,
   getSendAmount,
+  getSendHexData,
   getSendEditingTransactionId,
   getSendErrors,
   getSendFrom,
@@ -210,6 +211,10 @@ function getSendAmount (state) {
   return state.metamask.send.amount
 }
 
+function getSendHexData (state) {
+  return state.metamask.send.data
+}
+
 function getSendEditingTransactionId (state) {
   return state.metamask.send.editingTransactionId
 }
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index c168242cf..e9c872ea7 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -628,7 +628,7 @@
     }
   }
 
-  &__to-autocomplete, &__memo-text-area {
+  &__to-autocomplete, &__memo-text-area, &__hex-data {
     &__input {
       height: 54px;
       width: 100%;
@@ -899,4 +899,4 @@
 
 .sliders-icon {
   color: $curious-blue;
-}
\ No newline at end of file
+}
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index 6c8ac9ed7..3f1d3394f 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -222,6 +222,14 @@ function reduceMetamask (state, action) {
         },
       })
 
+    case actions.UPDATE_SEND_HEX_DATA:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          data: action.value,
+        },
+      })
+
     case actions.UPDATE_SEND_FROM:
       return extend(metamaskState, {
         send: {