Implementing display solution for testnets in the network dropdown (#12564)

* Implementing display solution for testnets in the network dropdown

* Update setting from 'Test networks' -> 'Show test networks'

* Add capability to dismiss testnets message

* span -> a

app/_locales/am/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "አስርዮሽ ቢያንስ 0 ቢበዛ ደግሞ 36 መሆን አለባቸው።"
   },
-  "defaultNetwork": {
-    "message": "የ Ether ግብይቶች ንቡር አውታረ መረብ Mainnet ነው።"
-  },
   "delete": {
     "message": "ሰርዝ"
   },

app/_locales/ar/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "يجب أن تكون الكسور العشرية صفراً على الأقل، وألا تزيد عن 36 كسراً."
   },
-  "defaultNetwork": {
-    "message": "الشبكة الافتراضية لمعاملات الأثير هي الشبكة الرئيسية."
-  },
   "delete": {
     "message": "حذف"
   },

app/_locales/bg/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "Десетичните знаци трябва да бъдат най-малко 0 и не повече от 36."
   },
-  "defaultNetwork": {
-    "message": "Мрежата по подразбиране за Ether транзакции е Mainnet."
-  },
   "delete": {
     "message": "Изтриване"
   },

app/_locales/bn/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "দশমিকগুলি অবশ্যই অন্তত 0 হতে হবে, এবং 36 এর উপর হবে না।"
   },
-  "defaultNetwork": {
-    "message": "ইথার লেনদেনগুলির জন্য ডিফল্ট নেটওয়ার্কটি হল মেন নেট।"
-  },
   "delete": {
     "message": "মুছুন"
   },

app/_locales/ca/messages.json

@@ -263,9 +263,6 @@
   "decimalsMustZerotoTen": {
     "message": "Els decimals han de ser al menys 0, i no més de 36."
   },
-  "defaultNetwork": {
-    "message": "La xarxa per defecte per a les transaccions Ether és Mainnet."
-  },
   "delete": {
     "message": "Suprimeix"
   },

app/_locales/cs/messages.json

@@ -97,9 +97,6 @@
   "decimalsMustZerotoTen": {
     "message": "Desetinných míst musí být od 0 do 36."
   },
-  "defaultNetwork": {
-    "message": "Výchozí síť pro Etherové transakce je Mainnet."
-  },
   "depositEther": {
     "message": "Vložit Ether"
   },

app/_locales/da/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "Decimaler skal være mindst 0 og højst 36."
   },
-  "defaultNetwork": {
-    "message": "Standardnetværket for Ether-transaktioner er Mainnet."
-  },
   "delete": {
     "message": "Slet"
   },

app/_locales/de/messages.json

@@ -257,9 +257,6 @@
   "decimalsMustZerotoTen": {
     "message": "Die Dezimalangabe muss mindestens 0 und nicht höher als 36 sein."
   },
-  "defaultNetwork": {
-    "message": "Das Standardnetzwerk für Ether Transaktionen ist das Mainnet."
-  },
   "delete": {
     "message": "Löschen"
   },

app/_locales/el/messages.json

@@ -263,9 +263,6 @@
   "decimalsMustZerotoTen": {
     "message": "Τα δεκαδικά πρέπει να είναι τουλάχιστον 0 και όχι πάνω από 36."
   },
-  "defaultNetwork": {
-    "message": "Το προεπιλεγμένο δίκτυο για συναλλαγές Ether είναι το Mainnet."
-  },
   "delete": {
     "message": "Διαγραφή"
   },

app/_locales/en/messages.json

@@ -594,7 +594,8 @@
     "message": "Decrypt request"
   },
   "defaultNetwork": {
-    "message": "The default network for Ether transactions is Mainnet."
+    "message": "The default network for Ether transactions is Mainnet. You can also $1 testnets $2.",
+    "description": "$1 is the 'enable' or 'disable' key, depending on whether the display of test networks is enabled or not. $2 is a clickable link with text defined by the 'here' key. The link will open to the advanced settings where users can enable the display of test networks in the network dropdown."
   },
   "delete": {
     "message": "Delete"
@@ -620,6 +621,9 @@
   "directDepositEtherExplainer": {
     "message": "If you already have some Ether, the quickest way to get Ether in your new wallet by direct deposit."
   },
+  "disable": {
+    "message": "disable"
+  },
   "disconnect": {
     "message": "Disconnect"
   },
@@ -771,6 +775,9 @@
   "editPermission": {
     "message": "Edit Permission"
   },
+  "enable": {
+    "message": "enable"
+  },
   "enableFromSettings": {
     "message": " Enable it from Settings."
   },
@@ -2210,7 +2217,7 @@
     "message": "Show Secret Recovery Phrase"
   },
   "showTestnetNetworks": {
-    "message": "Test networks"
+    "message": "Show test networks"
   },
   "showTestnetNetworksDescription": {
     "message": "Select this to show test networks in network list"

app/_locales/es/messages.json

@@ -502,9 +502,6 @@
   "decryptRequest": {
     "message": "Descifrar solicitud"
   },
-  "defaultNetwork": {
-    "message": "La red predeterminada para las transacciones de ether es la red principal."
-  },
   "delete": {
     "message": "Eliminar"
   },

app/_locales/es_419/messages.json

@@ -502,9 +502,6 @@
   "decryptRequest": {
     "message": "Descifrar solicitud"
   },
-  "defaultNetwork": {
-    "message": "La red predeterminada para las transacciones de ether es la red principal."
-  },
   "delete": {
     "message": "Eliminar"
   },

app/_locales/et/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "Kümnendkohad peavad olema vähemalt 0 ja mitte üle 36."
   },
-  "defaultNetwork": {
-    "message": "Etheri tehingute vaikevõrk on peavõrk."
-  },
   "delete": {
     "message": "Kustuta"
   },

app/_locales/fa/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "اعشاریه ها باید حد اقل 0، و بیشتر از 36 نباشند."
   },
-  "defaultNetwork": {
-    "message": "شبکه خودکار برای معاملات Ether عبارت است از Mainnet."
-  },
   "delete": {
     "message": "حذف"
   },

app/_locales/fi/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "Desimaalien on oltava vähintään 0 ja korkeintaan 36."
   },
-  "defaultNetwork": {
-    "message": "Oletusverkko Ether-tapahtumille on Mainnet."
-  },
   "delete": {
     "message": "Poista"
   },

app/_locales/fil/messages.json

@@ -245,9 +245,6 @@
   "decimalsMustZerotoTen": {
     "message": "Ang mga decimal ay hindi dapat bumaba sa 0, at hindi lumampas sa 36."
   },
-  "defaultNetwork": {
-    "message": "Ang default na network para sa mga transaksyon ng Ether ay Mainnet."
-  },
   "delete": {
     "message": "I-delete"
   },

app/_locales/fr/messages.json

@@ -257,9 +257,6 @@
   "decimalsMustZerotoTen": {
     "message": "Les décimales doivent être plus grandes que 0 et inférieures à 36."
   },
-  "defaultNetwork": {
-    "message": "Le réseau par défaut pour les transactions Ether est le \"Réseau principal Ethereum\"."
-  },
   "delete": {
     "message": "Supprimer"
   },

app/_locales/he/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "מספרים עשרוניים חייבים להיות לפחות 0 ולא מעל 36."
   },
-  "defaultNetwork": {
-    "message": "רשת ברירת המחדל לעסקאות Ether היא Mainnet."
-  },
   "delete": {
     "message": "מחיקה"
   },

app/_locales/hi/messages.json

@@ -502,9 +502,6 @@
   "decryptRequest": {
     "message": "अनुरोध डिक्रिप्ट करें"
   },
-  "defaultNetwork": {
-    "message": "Ether के लेनदेन के लिए डिफ़ॉल्ट नेटवर्क Mainnet है।"
-  },
   "delete": {
     "message": "हटाएँ"
   },

app/_locales/hn/messages.json

@@ -76,9 +76,6 @@
   "decimalsMustZerotoTen": {
     "message": "दशमलव कम से कम 0 होनी चाहिए, और 36 से अधिक नहीं होनी चाहिए।"
   },
-  "defaultNetwork": {
-    "message": "ईथर लेनदेन के लिए डिफ़ॉल्ट नेटवर्क मुख्य नेट है।"
-  },
   "depositEther": {
     "message": "जमा - Ether"
   },

app/_locales/hr/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "Decimalni brojevni ne smiju biti 0 i ne smiju prekoračivati 36."
   },
-  "defaultNetwork": {
-    "message": "Zadana je mreža za transakcije Ether glavna mreža."
-  },
   "delete": {
     "message": "Izbriši"
   },

app/_locales/ht/messages.json

@@ -145,9 +145,6 @@
   "decimalsMustZerotoTen": {
     "message": "Desimal yo dwe omwen 0, epi pa dwe plis pase 36."
   },
-  "defaultNetwork": {
-    "message": "Dfo rezo a pou tranzaksyon Ether se Mainnet."
-  },
   "depositEther": {
     "message": "Depo Ether"
   },

app/_locales/hu/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "A tizedesjegyek száma 0 és 36 között legyen . "
   },
-  "defaultNetwork": {
-    "message": "Az Ether tranzakciók alapértelmezett hálózata a Mainnet."
-  },
   "delete": {
     "message": "Törlés"
   },

app/_locales/id/messages.json

@@ -502,9 +502,6 @@
   "decryptRequest": {
     "message": "Dekrip permintaan"
   },
-  "defaultNetwork": {
-    "message": "Jaringan default untuk transaksi Ether adalah Jaringan Utama."
-  },
   "delete": {
     "message": "Hapus"
   },

app/_locales/it/messages.json

@@ -436,9 +436,6 @@
   "decryptRequest": {
     "message": "Decifra richiesta"
   },
-  "defaultNetwork": {
-    "message": "La rete predefinita per transazioni in Ether è la Rete Ethereum Principale."
-  },
   "delete": {
     "message": "Elimina"
   },

app/_locales/ja/messages.json

@@ -502,9 +502,6 @@
   "decryptRequest": {
     "message": "リクエストの復号"
   },
-  "defaultNetwork": {
-    "message": "Ether 取引のためのデフォルトのネットワークはメインネットです。"
-  },
   "delete": {
     "message": "削除"
   },

app/_locales/kn/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "ದಶಮಾಂಶಗಳು ಕನಿಷ್ಟ 0 ಆಗಿರಬೇಕು ಮತ್ತು 36 ಕ್ಕಿಂತ ಹೆಚ್ಚಿರಬಾರದು"
   },
-  "defaultNetwork": {
-    "message": "ಎಥರ್ ವಹಿವಾಟುಗಳಿಗಾಗಿ ಡೀಫಾಲ್ಟ್ ನೆಟ್‌ವರ್ಕ್ ಪ್ರಮುಖವಾಗಿರುವ ನೆಟ್ ಆಗಿದೆ."
-  },
   "delete": {
     "message": "ಅಳಿಸಿ"
   },

app/_locales/ko/messages.json

@@ -502,9 +502,6 @@
   "decryptRequest": {
     "message": "요청 암호 해독"
   },
-  "defaultNetwork": {
-    "message": "Ether 거래의 기본 네트워크는 메인 넷입니다."
-  },
   "delete": {
     "message": "삭제"
   },

app/_locales/lt/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "Turi būti bent 0 skaitmenų po kablelio, bet ne daugiau kaip 36."
   },
-  "defaultNetwork": {
-    "message": "Numatytasis „Ether“ operacijų tinklas yra pagrindinis tinklas."
-  },
   "delete": {
     "message": "Ištrinti"
   },

app/_locales/lv/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "Daļskaitļiem jābūt diapazonā no 0 līdz 36."
   },
-  "defaultNetwork": {
-    "message": "Galvenais Ether darījumu tīkls ir Mainnet."
-  },
   "delete": {
     "message": "Dzēst"
   },

app/_locales/ms/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "Perpuluhan mestilah sekurang-kurangnya 0, dan tidak melebihi 36."
   },
-  "defaultNetwork": {
-    "message": "Rangkaian lalai untuk transaksi Ether ialah Net Utama."
-  },
   "delete": {
     "message": "Padam"
   },

app/_locales/nl/messages.json

@@ -73,9 +73,6 @@
   "decimalsMustZerotoTen": {
     "message": "Decimalen moeten minimaal 0 en niet meer dan 36 zijn."
   },
-  "defaultNetwork": {
-    "message": "Het standaardnetwerk voor Ether-transacties is Mainnet."
-  },
   "depositEther": {
     "message": "Stort Ether"
   },

app/_locales/no/messages.json

@@ -263,9 +263,6 @@
   "decimalsMustZerotoTen": {
     "message": "Desimaler må være minst 0, og ikke flere enn 36."
   },
-  "defaultNetwork": {
-    "message": "Standardnettverket for Ether-transaksjoner er Mainnet."
-  },
   "delete": {
     "message": "Slett"
   },

app/_locales/ph/messages.json

@@ -502,9 +502,6 @@
   "decryptRequest": {
     "message": "I-decrypt ang request"
   },
-  "defaultNetwork": {
-    "message": "Ang default na network para sa mga transaksyon ng Ether ay ang Mainnet."
-  },
   "delete": {
     "message": "I-delete"
   },

app/_locales/pl/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "Liczb po przecinku musi być co najmniej 0 i nie więcej niż 36."
   },
-  "defaultNetwork": {
-    "message": "Domyślna sieć dla Eteru to Mainnet."
-  },
   "delete": {
     "message": "Usuń"
   },

app/_locales/pt/messages.json

@@ -76,9 +76,6 @@
   "decimalsMustZerotoTen": {
     "message": "Decimais devem ser no mínimo 0 e não passar de 36."
   },
-  "defaultNetwork": {
-    "message": "A rede pré definida para transações em Ether é a Mainnet."
-  },
   "depositEther": {
     "message": "Depositar Ether"
   },

app/_locales/pt_BR/messages.json

@@ -502,9 +502,6 @@
   "decryptRequest": {
     "message": "Descriptografar solicitação"
   },
-  "defaultNetwork": {
-    "message": "A rede padrão das transações em ether é a Mainnet."
-  },
   "delete": {
     "message": "Excluir"
   },

app/_locales/ro/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "Zecimalele trebuie să fie cel puțin 0, dar nu peste 36."
   },
-  "defaultNetwork": {
-    "message": "Rețeaua implicită pentru tranzacțiile cu Ether este Mainnet."
-  },
   "delete": {
     "message": "Șterge"
   },

app/_locales/ru/messages.json

@@ -502,9 +502,6 @@
   "decryptRequest": {
     "message": "Расшифровать запрос"
   },
-  "defaultNetwork": {
-    "message": "Сетью по умолчанию для транзакций Ether является Mainnet."
-  },
   "delete": {
     "message": "Удалить"
   },

app/_locales/sk/messages.json

@@ -260,9 +260,6 @@
   "decimalsMustZerotoTen": {
     "message": "Desetinných míst musí být od 0 do 36."
   },
-  "defaultNetwork": {
-    "message": "Výchozí síť pro Etherové transakce je Mainnet."
-  },
   "delete": {
     "message": "Odstrániť"
   },

app/_locales/sl/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "Decimalk mora biti med 0 in 36."
   },
-  "defaultNetwork": {
-    "message": "Privzeto omrežje za transkacije je glavno omrežje."
-  },
   "delete": {
     "message": "Izbriši"
   },

app/_locales/sr/messages.json

@@ -263,9 +263,6 @@
   "decimalsMustZerotoTen": {
     "message": "Decimalni broj mora biti najmanje 0, a ne veći od 36."
   },
-  "defaultNetwork": {
-    "message": "Podrazumevana mreža za Ether transakcije je Mainnet."
-  },
   "delete": {
     "message": "Избриши"
   },

app/_locales/sv/messages.json

@@ -260,9 +260,6 @@
   "decimalsMustZerotoTen": {
     "message": "Decimalerna måste vara minst 0 och inte över 36."
   },
-  "defaultNetwork": {
-    "message": "Standardnätverket för Ether-transaktioner är Mainnet."
-  },
   "delete": {
     "message": "Radera"
   },

app/_locales/sw/messages.json

@@ -260,9 +260,6 @@
   "decimalsMustZerotoTen": {
     "message": "Desimali zinapaswa kuwa angalau 0, na si zaidi ya 36."
   },
-  "defaultNetwork": {
-    "message": "Mtandao chaguomsingi wa miamala ya Ether ni Mainnet."
-  },
   "delete": {
     "message": "Futa"
   },

app/_locales/ta/messages.json

@@ -112,9 +112,6 @@
   "decimalsMustZerotoTen": {
     "message": "தசமங்கள் குறைந்தபட்சம் 0, மற்றும் 36 க்கு மேல் இருக்க வேண்டும்."
   },
-  "defaultNetwork": {
-    "message": "எதிர் பரிவர்த்தனைகளுக்கான முன்னிருப்பு வலையமைப்பு முதன்மை நிகரமாகும்."
-  },
   "delete": {
     "message": "நீக்கு"
   },

app/_locales/th/messages.json

@@ -115,9 +115,6 @@
   "decimalsMustZerotoTen": {
     "message": "จำนวนต้องมากกว่า 0 และไม่เกิน 36"
   },
-  "defaultNetwork": {
-    "message": "ค่าเริ่มต้นของเครือข่ายสำหรับทำรายการธุรกรรมอีเธอร์คือ Mainnet"
-  },
   "delete": {
     "message": "ลบ"
   },

app/_locales/tl/messages.json

@@ -424,9 +424,6 @@
   "decryptRequest": {
     "message": "I-decrypt ang request"
   },
-  "defaultNetwork": {
-    "message": "Ang default na network para sa mga transaksyon ng Ether ay ang Mainnet."
-  },
   "delete": {
     "message": "I-delete"
   },

app/_locales/tr/messages.json

@@ -97,9 +97,6 @@
   "decimalsMustZerotoTen": {
     "message": "Ondalıklar en azından 0 olmalı ve 36'dan büyük olmamalı."
   },
-  "defaultNetwork": {
-    "message": "Ether işlemleri için varsayılan ağ Mainnet."
-  },
   "depositEther": {
     "message": "Ether yatır"
   },

app/_locales/uk/messages.json

@@ -266,9 +266,6 @@
   "decimalsMustZerotoTen": {
     "message": "Кількість розрядів після коми: від 0 до 36."
   },
-  "defaultNetwork": {
-    "message": "Мережа для транзакцій з Ether за замовчуванням - Mainnet."
-  },
   "delete": {
     "message": "Видалити"
   },

app/_locales/vi/messages.json

@@ -502,9 +502,6 @@
   "decryptRequest": {
     "message": "Yêu cầu của Decrypt"
   },
-  "defaultNetwork": {
-    "message": "Mạng mặc định cho các giao dịch Ether là Mạng chính thức."
-  },
   "delete": {
     "message": "Xóa"
   },

app/_locales/zh_CN/messages.json

@@ -433,9 +433,6 @@
   "decryptRequest": {
     "message": "解密请求"
   },
-  "defaultNetwork": {
-    "message": "默认以太坊（Ether）交易网络为主网。"
-  },
   "delete": {
     "message": "删除"
   },

app/_locales/zh_TW/messages.json

@@ -275,9 +275,6 @@
   "decimalsMustZerotoTen": {
     "message": "小數點後位數至少為0, 最多為36."
   },
-  "defaultNetwork": {
-    "message": "預設以太幣交易網路為主網路"
-  },
   "delete": {
     "message": "刪除"
   },

ui/components/app/dropdowns/network-dropdown.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { compose } from 'redux';
+import classnames from 'classnames';
 import Button from '../../ui/button';
 import * as actions from '../../../store/actions';
 import { openAlert as displayInvalidCustomNetworkAlert } from '../../../ducks/alerts/invalid-custom-network';
@@ -14,7 +15,10 @@ import { COLORS, SIZES } from '../../../helpers/constants/design-system';
 import { getShowTestNetworks } from '../../../selectors';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
-import { ADD_NETWORK_ROUTE } from '../../../helpers/constants/routes';
+import {
+  ADD_NETWORK_ROUTE,
+  ADVANCED_ROUTE,
+} from '../../../helpers/constants/routes';
 import { Dropdown, DropdownMenuItem } from './dropdown';
 
 // classes from nodes of the toggle element.
@@ -39,6 +43,7 @@ function mapStateToProps(state) {
     shouldShowTestNetworks: getShowTestNetworks(state),
     frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
     networkDropdownOpen: state.appState.networkDropdownOpen,
+    showTestnetMessageInDropdown: state.appState.showTestnetMessageInDropdown,
   };
 }
 
@@ -63,6 +68,7 @@ function mapDispatchToProps(dispatch) {
         }),
       );
     },
+    hideTestNetMessage: () => dispatch(actions.hideTestNetMessage()),
   };
 }
 
@@ -87,6 +93,8 @@ class NetworkDropdown extends Component {
     networkDropdownOpen: PropTypes.bool.isRequired,
     displayInvalidCustomNetworkAlert: PropTypes.func.isRequired,
     showConfirmDeleteNetworkModal: PropTypes.func.isRequired,
+    showTestnetMessageInDropdown: PropTypes.bool.isRequired,
+    hideTestNetMessage: PropTypes.func.isRequired,
     history: PropTypes.object,
   };
 
@@ -262,9 +270,16 @@ class NetworkDropdown extends Component {
   }
 
   render() {
-    const { shouldShowTestNetworks } = this.props;
+    const {
+      history,
+      hideNetworkDropdown,
+      shouldShowTestNetworks,
+      showTestnetMessageInDropdown,
+      hideTestNetMessage,
+    } = this.props;
     const rpcListDetail = this.props.frequentRpcListDetail;
     const isOpen = this.props.networkDropdownOpen;
+    const { t } = this.context;
 
     return (
       <Dropdown
@@ -278,7 +293,7 @@ class NetworkDropdown extends Component {
 
           if (notToggleElementIndex === -1) {
             event.stopPropagation();
-            this.props.hideNetworkDropdown();
+            hideNetworkDropdown();
           }
         }}
         containerClassName="network-droppo"
@@ -294,27 +309,50 @@ class NetworkDropdown extends Component {
         }}
       >
         <div className="network-dropdown-header">
-          <div className="network-dropdown-title">
+          <div className="network-dropdown-title">{t('networks')}</div>
-            {this.context.t('networks')}
-          </div>
           <div className="network-dropdown-divider" />
-          <div className="network-dropdown-content">
+          {showTestnetMessageInDropdown ? (
-            {this.context.t('defaultNetwork')}
+            <div className="network-dropdown-content">
-          </div>
+              {t('defaultNetwork', [
+                <span key="testNetworksEnabled">
+                  {shouldShowTestNetworks ? t('disable') : t('enable')}
+                </span>,
+                <a
+                  href="#"
+                  key="advancedSettingsLink"
+                  className="network-dropdown-content--link"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    hideNetworkDropdown();
+                    history.push(ADVANCED_ROUTE);
+                  }}
+                >
+                  {t('here')}
+                </a>,
+              ])}
+              <button
+                title={t('dismiss')}
+                onClick={hideTestNetMessage}
+                className="fas fa-times network-dropdown-content--close"
+              />
+            </div>
+          ) : null}
         </div>
         {this.renderNetworkEntry('mainnet')}
 
         {this.renderCustomRpcList(rpcListDetail, this.props.provider)}
 
-        {shouldShowTestNetworks && (
+        <div
-          <>
+          className={classnames('network-dropdown-testnets', {
-            {this.renderNetworkEntry('ropsten')}
+            'network-dropdown-testnets--no-visibility': !shouldShowTestNetworks,
-            {this.renderNetworkEntry('kovan')}
+          })}
-            {this.renderNetworkEntry('rinkeby')}
+        >
-            {this.renderNetworkEntry('goerli')}
+          {this.renderNetworkEntry('ropsten')}
-            {this.renderNetworkEntry('localhost')}
+          {this.renderNetworkEntry('kovan')}
-          </>
+          {this.renderNetworkEntry('rinkeby')}
-        )}
+          {this.renderNetworkEntry('goerli')}
+          {this.renderNetworkEntry('localhost')}
+        </div>
 
         {this.renderAddCustomButton()}
       </Dropdown>

ui/css/itcss/components/network.scss

@@ -135,6 +135,12 @@
   background-color: $scorpion;
 }
 
+.network-dropdown-testnets {
+  &--no-visibility {
+    visibility: hidden;
+  }
+}
+
 .network-dropdown-title {
   @include H4;
 
@@ -150,6 +156,25 @@
   min-height: 36px;
   width: 265px;
   color: $dusty-gray;
+
+  &--link {
+    color: $white;
+    cursor: pointer;
+    font-weight: bold;
+    text-decoration: underline;
+
+    &:hover {
+      color: $white;
+    }
+  }
+
+  &--close {
+    color: $white;
+    background: inherit;
+    position: absolute;
+    top: 64px;
+    right: 10px;
+  }
 }
 
 .network-caret {

ui/ducks/app/app.js

@@ -55,6 +55,7 @@ export default function reduceApp(state = {}, action) {
     ledgerWebHidConnectedStatus: WEBHID_CONNECTED_STATUSES.UNKNOWN,
     ledgerTransportStatus: TRANSPORT_STATES.NONE,
     newNetworkAdded: '',
+    showTestnetMessageInDropdown: true,
     ...state,
   };
 
@@ -72,6 +73,12 @@ export default function reduceApp(state = {}, action) {
         networkDropdownOpen: false,
       };
 
+    case actionConstants.HIDE_TESTNET_MESSAGE:
+      return {
+        ...appState,
+        showTestnetMessageInDropdown: false,
+      };
+
     // alert methods
     case actionConstants.ALERT_OPEN:
       return {

ui/ducks/app/app.test.js

@@ -38,6 +38,16 @@ describe('App State', () => {
     expect(newState.networkDropdownOpen).toStrictEqual(false);
   });
 
+  it('sets showTestnetMessageInDropdown dropdown to false', () => {
+    const testnetMessage = { showTestnetMessageInDropdown: true };
+    const state = { ...metamaskState, ...testnetMessage };
+    const newState = reduceApp(state, {
+      type: actions.HIDE_TESTNET_MESSAGE,
+    });
+
+    expect(newState.showTestnetMessageInDropdown).toStrictEqual(false);
+  });
+
   it('opens alert', () => {
     const state = reduceApp(metamaskState, {
       type: actions.ALERT_OPEN,

ui/store/actionConstants.js

@@ -9,6 +9,8 @@ export const QR_CODE_DETECTED = 'UI_QR_CODE_DETECTED';
 // network dropdown open
 export const NETWORK_DROPDOWN_OPEN = 'UI_NETWORK_DROPDOWN_OPEN';
 export const NETWORK_DROPDOWN_CLOSE = 'UI_NETWORK_DROPDOWN_CLOSE';
+// network dropdown
+export const HIDE_TESTNET_MESSAGE = 'HIDE_TESTNET_MESSAGE';
 // remote state
 export const UPDATE_METAMASK_STATE = 'UPDATE_METAMASK_STATE';
 export const SELECTED_ADDRESS_CHANGED = 'SELECTED_ADDRESS_CHANGED';

ui/store/actions.js

@@ -1658,6 +1658,12 @@ export function hideNetworkDropdown() {
   };
 }
 
+export function hideTestNetMessage() {
+  return {
+    type: actionConstants.HIDE_TESTNET_MESSAGE,
+  };
+}
+
 export function showModal(payload) {
   return {
     type: actionConstants.MODAL_OPEN,