Prevent send to token warning (#6058)

6 files changed, 96 insertions, 0 deletions

diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/index.js b/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/index.js
new file mode 100644
index 000000000..fd4d19ef7
--- /dev/null
+++ b/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/index.js
@@ -0,0 +1 @@
+export { default } from './send-row-warning-message.container'
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js b/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js
new file mode 100644
index 000000000..f1caa8f99
--- /dev/null
+++ b/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class SendRowWarningMessage extends Component {
+
+  static propTypes = {
+    warnings: PropTypes.object,
+    warningType: PropTypes.string,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  render () {
+    const { warnings, warningType } = this.props
+
+    const warningMessage = warningType in warnings && warnings[warningType]
+
+    return (
+        warningMessage
+        ? <div className="send-v2__warning">{this.context.t(warningMessage)}</div>
+        : null
+    )
+  }
+
+}
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js b/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js
new file mode 100644
index 000000000..7df14fd96
--- /dev/null
+++ b/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js
@@ -0,0 +1,12 @@
+import { connect } from 'react-redux'
+import { getSendWarnings } from '../../../send.selectors'
+import SendRowWarningMessage from './send-row-warning-message.component'
+
+export default connect(mapStateToProps)(SendRowWarningMessage)
+
+function mapStateToProps (state, ownProps) {
+  return {
+    warnings: getSendWarnings(state),
+    warningType: ownProps.warningType,
+  }
+}
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss b/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js b/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js
new file mode 100644
index 000000000..bd803d833
--- /dev/null
+++ b/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import SendRowWarningMessage from '../send-row-warning-message.component.js'
+
+describe('SendRowWarningMessage Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<SendRowWarningMessage
+      warnings={{ warning1: 'abc', warning2: 'def' }}
+      warningType={'warning3'}
+    />, { context: { t: str => str + '_t' } })
+  })
+
+  describe('render', () => {
+    it('should render null if the passed warnings do not contain a warning of warningType', () => {
+      assert.equal(wrapper.find('.send-v2__warning').length, 0)
+      assert.equal(wrapper.html(), null)
+    })
+
+    it('should render a warning message if the passed warnings contain a warning of warningType', () => {
+      wrapper.setProps({ warnings: { warning1: 'abc', warning2: 'def', warning3: 'xyz' } })
+      assert.equal(wrapper.find('.send-v2__warning').length, 1)
+      assert.equal(wrapper.find('.send-v2__warning').text(), 'xyz_t')
+    })
+  })
+})
diff --git a/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js b/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js
new file mode 100644
index 000000000..225bf056c
--- /dev/null
+++ b/ui/app/components/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js
@@ -0,0 +1,28 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+let mapStateToProps
+
+proxyquire('../send-row-warning-message.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      return () => ({})
+    },
+  },
+  '../../../send.selectors': { getSendWarnings: (s) => `mockWarnings:${s}` },
+})
+
+describe('send-row-warning-message container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState', { warningType: 'someType' }), {
+        warnings: 'mockWarnings:mockState',
+        warningType: 'someType' })
+    })
+
+  })
+
+})