diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index c9710f688051..2619332c0ec8 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1021,6 +1021,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)" }, diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss index c06e5949a003..f12117599c6f 100644 --- a/ui/app/pages/settings/index.scss +++ b/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; diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss index 920bd64b470a..5780be17f7e5 100644 --- a/ui/app/pages/settings/networks-tab/index.scss +++ b/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 { diff --git a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js index 883396381c65..3e94a7377a85 100644 --- a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js +++ b/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 ( +
+ {t('onlyAddTrustedNetworks')} +
+ ) + } + render () { const { t } = this.context const { @@ -258,6 +267,7 @@ export default class NetworkForm extends PureComponent { return (
+ {viewOnly ? null : this.renderWarning()} {this.renderFormTextField( 'networkName', 'network-name', @@ -320,5 +330,4 @@ export default class NetworkForm extends PureComponent {
) } - }