Add hex data row to send screen

5 files changed, 43 insertions, 2 deletions

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
--- /dev/null
+++ b/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.container.js
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
+}