Fix send warning dialog (#9321)

This change moves warning message from `add-recipient` component to `send-content`. Currently
whenever provided address is a valid eth address `send-content` is rendered instead of `add-recipient`
this is why warnings never popped up.

ui/app/pages/send/send-content/add-recipient/add-recipient.component.js

@@ -19,7 +19,6 @@ export default class AddRecipient extends Component {
     updateSendTo: PropTypes.func,
     ensResolution: PropTypes.string,
     toError: PropTypes.string,
-    toWarning: PropTypes.string,
     ensResolutionError: PropTypes.string,
     addressBookEntryName: PropTypes.string,
     contacts: PropTypes.array,
@@ -194,7 +193,7 @@ export default class AddRecipient extends Component {
   }
 
   renderDialogs () {
-    const { toError, toWarning, ensResolutionError, ensResolution } = this.props
+    const { toError, ensResolutionError, ensResolution } = this.props
     const { t } = this.context
     const contacts = this.searchForContacts()
     const recents = this.searchForRecents()
@@ -225,17 +224,6 @@ export default class AddRecipient extends Component {
       )
     }
 
-    if (toWarning) {
-      return (
-        <Dialog
-          type="warning"
-          className="send__error-dialog"
-        >
-          {t(toWarning)}
-        </Dialog>
-      )
-    }
-
     return null
   }
 

ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js

@@ -159,20 +159,6 @@ describe('AddRecipient Component', function () {
       assert.equal(dialog.length, 1)
     })
 
-    it('should render warning', function () {
-      wrapper.setProps({
-        addressBook: [],
-        query: 'yo',
-        toWarning: 'watchout',
-      })
-
-      const dialog = wrapper.find(Dialog)
-
-      assert.equal(dialog.props().type, 'warning')
-      assert.equal(dialog.props().children, 'watchout_t')
-      assert.equal(dialog.length, 1)
-    })
-
     it('should not render error when ens resolved', function () {
       wrapper.setProps({
         addressBook: [],

ui/app/pages/send/send-content/send-content.component.js

@@ -19,14 +19,17 @@ export default class SendContent extends Component {
     showHexData: PropTypes.bool,
     contact: PropTypes.object,
     isOwnedAccount: PropTypes.bool,
+    warning: PropTypes.string,
   }
 
   updateGas = (updateData) => this.props.updateGas(updateData)
 
   render () {
+    const { warning } = this.props
     return (
       <PageContainerContent>
         <div className="send-v2__form">
+          { warning && this.renderWarning() }
           { this.maybeRenderAddContact() }
           <SendAssetRow />
           <SendAmountRow updateGas={this.updateGas} />
@@ -61,4 +64,18 @@ export default class SendContent extends Component {
       </Dialog>
     )
   }
+
+  renderWarning () {
+    const { t } = this.context
+    const { warning } = this.props
+
+    return (
+      <Dialog
+        type="warning"
+        className="send__error-dialog"
+      >
+        {t(warning)}
+      </Dialog>
+    )
+  }
 }

ui/app/pages/send/send-content/tests/send-content-component.test.js

@@ -83,4 +83,16 @@ describe('SendContent Component', function () {
     assert(PageContainerContentChild.childAt(1).is(SendAssetRow))
     assert(PageContainerContentChild.childAt(1).find('send-v2__asset-dropdown__single-asset'), true)
   })
+
+  it('should render warning', function () {
+    wrapper.setProps({
+      warning: 'watchout',
+    })
+
+    const dialog = wrapper.find(Dialog).at(0)
+
+    assert.equal(dialog.props().type, 'warning')
+    assert.equal(dialog.props().children, 'watchout_t')
+    assert.equal(dialog.length, 1)
+  })
 })

ui/app/pages/send/send.component.js

@@ -324,26 +324,26 @@ export default class SendTransactionScreen extends Component {
   }
 
   renderAddRecipient () {
-    const { toError, toWarning } = this.state
+    const { toError } = this.state
-
     return (
       <AddRecipient
         updateGas={({ to, amount, data } = {}) => this.updateGas({ to, amount, data })}
         query={this.state.query}
         toError={toError}
-        toWarning={toWarning}
       />
     )
   }
 
   renderSendContent () {
     const { history, showHexData } = this.props
+    const { toWarning } = this.state
 
     return [
       <SendContent
         key="send-content"
         updateGas={({ to, amount, data } = {}) => this.updateGas({ to, amount, data })}
         showHexData={showHexData}
+        warning={toWarning}
       />,
       <SendFooter key="send-footer" history={history} />,
     ]