From 3f9c3d76b6edb70f91363c1e0787707ed1440c41 Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Mon, 16 Jul 2018 18:21:02 -0230
Subject: Add hex data row to send screen

---
 .../send/send-content/send-content.component.js    |  2 ++
 .../send/send-content/send-hex-data-row/index.js   |  1 +
 .../send-hex-data-row.component.js                 | 38 ++++++++++++++++++++++
 .../send-hex-data-row.container.js                 |  0
 4 files changed, 41 insertions(+)
 create mode 100644 ui/app/components/send/send-content/send-hex-data-row/index.js
 create mode 100644 ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.component.js
 create mode 100644 ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.container.js

(limited to 'ui/app/components')

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..4371ef83d
--- /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.component'
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..eaffce359
--- /dev/null
+++ b/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.component.js
@@ -0,0 +1,38 @@
+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,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  onInput = (event) => {
+    event.target.value = event.target.value.replace(/\n/g, '')
+  }
+
+  render () {
+    const {
+      inError,
+    } = this.props
+
+    return (
+      <SendRowWrapper
+        label={`${this.context.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..e69de29bb
-- 
cgit 


From 9ea7411c063712825780110c10252155ccb61e44 Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Mon, 16 Jul 2018 20:13:32 -0230
Subject: Hook up send component w/ UPDATE_SEND_HEX_DATA action

---
 .../send/send-content/send-hex-data-row/index.js    |  2 +-
 .../send-hex-data-row.component.js                  | 10 ++++++----
 .../send-hex-data-row.container.js                  | 21 +++++++++++++++++++++
 3 files changed, 28 insertions(+), 5 deletions(-)

(limited to 'ui/app/components')

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
index 4371ef83d..08c341067 100644
--- 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
@@ -1 +1 @@
-export { default } from './send-hex-data-row.component'
+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
index eaffce359..18d955c72 100644
--- 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
@@ -6,6 +6,7 @@ export default class SendHexDataRow extends Component {
   static propTypes = {
     data: PropTypes.string,
     inError: PropTypes.bool,
+    updateSendHexData: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -13,17 +14,18 @@ export default class SendHexDataRow extends Component {
   };
 
   onInput = (event) => {
+    const {updateSendHexData} = this.props
     event.target.value = event.target.value.replace(/\n/g, '')
+    updateSendHexData(event.target.value)
   }
 
   render () {
-    const {
-      inError,
-    } = this.props
+    const {inError} = this.props
+    const {t} = this.context
 
     return (
       <SendRowWrapper
-        label={`${this.context.t('hexData')}:`}
+        label={`${t('hexData')}:`}
         showError={inError}
         errorType={'amount'}
       >
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
index e69de29bb..df554ca5f 100644
--- 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
@@ -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))
+    },
+  }
+}
-- 
cgit 


From fb672e00df949da67266946d433c40cbbaf7d145 Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Mon, 16 Jul 2018 20:20:26 -0230
Subject: Send data along with other tx params

---
 .../send/send-footer/send-footer.component.js      |  5 +++-
 .../send/send-footer/send-footer.container.js      |  7 ++++-
 .../send/send-footer/send-footer.utils.js          | 34 +++++++++++++---------
 .../tests/send-footer-component.test.js            |  2 ++
 .../tests/send-footer-container.test.js            |  5 ++++
 .../send-footer/tests/send-footer-utils.test.js    | 24 +++++++++++++++
 ui/app/components/send/send.selectors.js           |  5 ++++
 7 files changed, 66 insertions(+), 16 deletions(-)

(limited to 'ui/app/components')

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..c75433e1d 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,
@@ -28,6 +29,7 @@ function constructTxParams ({ selectedToken, to, amount, from, gas, gasPrice })
 
 function constructUpdatedTx ({
   amount,
+  data,
   editingTransactionId,
   from,
   gas,
@@ -36,9 +38,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 +66,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
 }
-- 
cgit 


From 346505cab0af1b685f6295f8253f04f39cf31b01 Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Tue, 17 Jul 2018 12:41:43 -0230
Subject: Inline single-use vars in send-footer.utils

---
 ui/app/components/send/send-footer/send-footer.utils.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'ui/app/components')

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 c75433e1d..f82ff1e9b 100644
--- a/ui/app/components/send/send-footer/send-footer.utils.js
+++ b/ui/app/components/send/send-footer/send-footer.utils.js
@@ -22,9 +22,7 @@ function constructTxParams ({ selectedToken, data, to, amount, from, gas, gasPri
     txParams.to = to
   }
 
-  const hexPrefixedTxParams = addHexPrefixToObjectValues(txParams)
-
-  return hexPrefixedTxParams
+  return addHexPrefixToObjectValues(txParams)
 }
 
 function constructUpdatedTx ({
-- 
cgit 


From da1f6e061d6b8e9352b343516c8b38e67253fcd4 Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Wed, 18 Jul 2018 09:49:43 -0230
Subject: Don't set txData to an empty string

---
 .../send/send-content/send-hex-data-row/send-hex-data-row.component.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components')

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
index 18d955c72..063930db3 100644
--- 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
@@ -16,7 +16,7 @@ export default class SendHexDataRow extends Component {
   onInput = (event) => {
     const {updateSendHexData} = this.props
     event.target.value = event.target.value.replace(/\n/g, '')
-    updateSendHexData(event.target.value)
+    updateSendHexData(event.target.value || null)
   }
 
   render () {
-- 
cgit