From 0f7e2dbf20d4c6efb3edfec8c80c2a7e63e8ab56 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Mon, 1 Mar 2021 09:47:22 -0330
Subject: [PATCH] Show warnings on Add Recipient page of Send flow (#10530)

Warnings were not shown on the Add Recipient page of the send flow. Now
any send warnings will be shown. This can be tested using an ENS name
with a confusable character in it (the confusable character warning
will be shown).

A condition was also removed that prevented any warnings or errors from
rendering when the user had non-zero contacts or recent addresses. I
have no idea why you'd want to hide warnings or errors if the user had
no contacts or recent addresses. None of these errors even pertain to
contacts or recent addresses.
---
 .../add-recipient/add-recipient.component.js  | 24 +++++++++++--------
 .../tests/add-recipient-component.test.js     | 15 ------------
 ui/app/pages/send/send.component.js           |  3 ++-
 3 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js b/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js
index a13a4a666..82ccfa1d4 100644
--- a/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js
+++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js
@@ -19,6 +19,7 @@ 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,
@@ -212,14 +213,13 @@ export default class AddRecipient extends Component {
   }
 
   renderDialogs() {
-    const { toError, ensResolutionError, ensResolution } = this.props;
+    const {
+      toError,
+      toWarning,
+      ensResolutionError,
+      ensResolution,
+    } = this.props;
     const { t } = this.context;
-    const contacts = this.searchForContacts();
-    const recents = this.searchForRecents();
-
-    if (contacts.length || recents.length) {
-      return null;
-    }
 
     if (ensResolutionError) {
       return (
@@ -227,14 +227,18 @@ export default class AddRecipient extends Component {
           {ensResolutionError}
         </Dialog>
       );
-    }
-
-    if (toError && toError !== 'required' && !ensResolution) {
+    } else if (toError && toError !== 'required' && !ensResolution) {
       return (
         <Dialog type="error" className="send__error-dialog">
           {t(toError)}
         </Dialog>
       );
+    } else if (toWarning) {
+      return (
+        <Dialog type="warning" className="send__error-dialog">
+          {t(toWarning)}
+        </Dialog>
+      );
     }
 
     return null;
diff --git a/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js
index 7736969e9..55f193590 100644
--- a/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js
+++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js
@@ -210,20 +210,5 @@ describe('AddRecipient Component', function () {
 
       assert.strictEqual(dialog.length, 0);
     });
-
-    it('should not render error when query has results', function () {
-      wrapper.setProps({
-        addressBook: [
-          { address: '0x125', name: 'alice' },
-          { address: '0x126', name: 'alex' },
-          { address: '0x127', name: 'catherine' },
-        ],
-        toError: 'bad',
-      });
-
-      const dialog = wrapper.find(Dialog);
-
-      assert.strictEqual(dialog.length, 0);
-    });
   });
 });
diff --git a/ui/app/pages/send/send.component.js b/ui/app/pages/send/send.component.js
index 3fbd7ecd8..98c3b6600 100644
--- a/ui/app/pages/send/send.component.js
+++ b/ui/app/pages/send/send.component.js
@@ -341,7 +341,7 @@ export default class SendTransactionScreen extends Component {
   }
 
   renderAddRecipient() {
-    const { toError } = this.state;
+    const { toError, toWarning } = this.state;
     return (
       <AddRecipient
         updateGas={({ to, amount, data } = {}) =>
@@ -349,6 +349,7 @@ export default class SendTransactionScreen extends Component {
         }
         query={this.state.query}
         toError={toError}
+        toWarning={toWarning}
         setInternalSearch={(internalSearch) =>
           this.setInternalSearch(internalSearch)
         }