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.

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>
       );
-    }
+    } else if (toError && toError !== 'required' && !ensResolution) {
-
-    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;

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);
-    });
   });
 });

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)
         }