Warn users to only add custom networks that they trust (#8789)

* add warning when adding custom network

* give the settings subheader breathing space

app/_locales/en/messages.json

@@ -1009,6 +1009,9 @@
   "onlyConnectTrust": {
     "message": "Only connect with sites you trust."
   },
+  "onlyAddTrustedNetworks": {
+    "message": "A malicious Ethereum network provider can lie about the state of the blockchain and record your network activity. Only add custom networks you trust."
+  },
   "optionalChainId": {
     "message": "ChainID (optional)"
   },

ui/app/pages/settings/index.scss

@@ -63,6 +63,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding: 16px 0;
 
     @media screen and (max-width: 575px) {
       height: 69px;

ui/app/pages/settings/networks-tab/index.scss

@@ -82,6 +82,17 @@
       flex-direction: column;
       width: 93%;
     }
+
+    &--warning {
+      background-color: #FEFAE8;
+      border: 1px solid #FFD33D;
+      width: 93%;
+      border-radius: 5px;
+      box-sizing: border-box;
+      padding: 12px;
+      margin: 12px 0;
+      font-size: 12px;
+    }
   }
 
   &__network-form-label {

ui/app/pages/settings/networks-tab/network-form/network-form.component.js

@@ -237,6 +237,15 @@ export default class NetworkForm extends PureComponent {
     }
   }
 
+  renderWarning () {
+    const { t } = this.context
+    return (
+      <div className="networks-tab__network-form-row--warning">
+        {t('onlyAddTrustedNetworks')}
+      </div>
+    )
+  }
+
   render () {
     const { t } = this.context
     const {
@@ -258,6 +267,7 @@ export default class NetworkForm extends PureComponent {
 
     return (
       <div className="networks-tab__network-form">
+        {viewOnly ? null : this.renderWarning()}
         {this.renderFormTextField(
           'networkName',
           'network-name',
@@ -320,5 +330,4 @@ export default class NetworkForm extends PureComponent {
       </div>
     )
   }
-
 }