Implement Network Switcher designs (#12260)

* Show test networks toggle button in settings/advanced tab.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Apply toggle testnet settings and show/hide testnets when on/off
Add localhost to testnet.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Lint fixes.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Show add network button

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Open full screen when add network is called.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Show custonm rpc before testnet rpcs
lint fixes.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Test cases for network dropdown.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Test cases for toggle test networks in advanced tab component.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Lint fixes.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Fix Locales.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* E2E Tests: Custom RPC is now called Add Network

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Lint fix

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* E2E: When Add Network button is clicked, wait for the full screen window to
be visible

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* findVisibleElement should use a class. i.e start with a dot

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Hide Dropdown when Add Netwok is clicked.
Only show full screen if it's not already showing.
E2E tests passing.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Lint fixes

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Fix tests for jest

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Testnets are not being shown by default anymore, tests should use
Mainnet instead.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Import Button from ui
Change selector name to getShowTestnetworks
Fix button to show full width

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Fix e2e tests

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Remove localhost from INFURA provider types.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Fix errors in Advanced Tab Component tests

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Lint fixes

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Fix unit tests for advanced tab component.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Remove deleted elements from e2e tests

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Make sure all tests passed.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Lint fixes

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

app/_locales/am/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "ክፍያ መጨመር የመከወኛ ጊዜን ሊቀንስ ቢችልም ይህ ግን ዋስትና የለውም።"
   },
-  "customRPC": {
-    "message": "ብጁ RPC"
-  },
   "customToken": {
     "message": "ብጁ ተለዋጭ ስም"
   },

app/_locales/ar/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "قد تؤدي زيادة الرسوم إلى تقليل أزمنة المعالجة، ولكن ذلك غير مضمون."
   },
-  "customRPC": {
-    "message": "آر بي سي مخصص"
-  },
   "customToken": {
     "message": "عملة رمزية مخصصة"
   },

app/_locales/bg/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "Увеличаването на таксата може да намали времето за обработка, но това не е гарантирано."
   },
-  "customRPC": {
-    "message": "RPC по избор"
-  },
   "customToken": {
     "message": "Персонализиран маркер"
   },

app/_locales/bn/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "ফী বৃদ্ধি করা প্রক্রিয়াকরণের সময় কমাতে পারে, কিন্তু সেটির নিশ্চয়তা দেওয়া হয় না।"
   },
-  "customRPC": {
-    "message": "কাস্টম RPC"
-  },
   "customToken": {
     "message": "কাস্টম টোকেন"
   },

app/_locales/ca/messages.json

@@ -254,9 +254,6 @@
   "customGasSubTitle": {
     "message": "Augmentar la tarifa pot disminuir els temps de processament, però això no està garantit."
   },
-  "customRPC": {
-    "message": "RPC a mida"
-  },
   "customToken": {
     "message": "Fitxa a Mida"
   },

app/_locales/cs/messages.json

@@ -88,9 +88,6 @@
   "customGas": {
     "message": "Nastavit palivo"
   },
-  "customRPC": {
-    "message": "Vlastní RPC"
-  },
   "customToken": {
     "message": "Vlastní token"
   },

app/_locales/da/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "Forøgelse af gebyr kan mindske bearbejdningstiden, men det er ikke en garanti."
   },
-  "customRPC": {
-    "message": "Tilpasset RPC"
-  },
   "customToken": {
     "message": "Brugerdefineret Token"
   },

app/_locales/de/messages.json

@@ -248,9 +248,6 @@
   "customGasSubTitle": {
     "message": "Höhere Gebühren können Bearbeitungszeiten verkürzen, wofür es allerdings keine Garantie gibt."
   },
-  "customRPC": {
-    "message": "Spezieller RPC"
-  },
   "customToken": {
     "message": "Custom-Token"
   },

app/_locales/el/messages.json

@@ -254,9 +254,6 @@
   "customGasSubTitle": {
     "message": "Η αύξηση των τελών μπορεί να μειώσει τους χρόνους επεξεργασίας, αλλά αυτό δεν είναι εγγυημένο."
   },
-  "customRPC": {
-    "message": "Προσαρμοσμένο RPC"
-  },
   "customToken": {
     "message": "Προσαρμοσμένο Token"
   },

app/_locales/en/messages.json

@@ -555,9 +555,6 @@
   "customGasSubTitle": {
     "message": "Increasing fee may decrease processing times, but it is not guaranteed."
   },
-  "customRPC": {
-    "message": "Custom RPC"
-  },
   "customSpendLimit": {
     "message": "Custom Spend Limit"
   },
@@ -2188,6 +2185,12 @@
   "showSeedPhrase": {
     "message": "Show Secret Recovery Phrase"
   },
+  "showTestnetNetworks": {
+    "message": "Test networks"
+  },
+  "showTestnetNetworksDescription": {
+    "message": "Select this to show test networks in network list"
+  },
   "sigRequest": {
     "message": "Signature Request"
   },

app/_locales/es/messages.json

@@ -470,9 +470,6 @@
   "customGasSubTitle": {
     "message": "Aumentar la cuota puede disminuir los tiempos de procesamiento, pero no está garantizado."
   },
-  "customRPC": {
-    "message": "RPC personalizada"
-  },
   "customSpendLimit": {
     "message": "Límite de gastos personalizado"
   },

app/_locales/es_419/messages.json

@@ -470,9 +470,6 @@
   "customGasSubTitle": {
     "message": "Aumentar la cuota puede disminuir los tiempos de procesamiento, pero no está garantizado."
   },
-  "customRPC": {
-    "message": "RPC personalizada"
-  },
   "customSpendLimit": {
     "message": "Límite de gastos personalizado"
   },

app/_locales/et/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "Tasu suurendamine võib töötlemisaegu vähendada, kuid see ei ole tagatud."
   },
-  "customRPC": {
-    "message": "Kohandatud RPC"
-  },
   "customToken": {
     "message": "Kohandatud luba"
   },

app/_locales/fa/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "اضافه نمودن فیس ممکن زمان پروسس را کاهش دهد، اما تضمین نمیشود."
   },
-  "customRPC": {
-    "message": "RPC رایج"
-  },
   "customToken": {
     "message": "رمزیاب دلخواه"
   },

app/_locales/fi/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "Taksan korottaminen saattaa vähentää käsittelyaikaa, mutta siitä ei anneta takeita."
   },
-  "customRPC": {
-    "message": "Mukautettu RPC"
-  },
   "customToken": {
     "message": "Mukautettu tietue"
   },

app/_locales/fr/messages.json

@@ -248,9 +248,6 @@
   "customGasSubTitle": {
     "message": "Augmenter le tarif peut faire baisser le temps de traitement, mais cela n'est pas garanti."
   },
-  "customRPC": {
-    "message": "RPC personnalisé"
-  },
   "customToken": {
     "message": "Jeton personnalisé"
   },

app/_locales/he/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "הגדלת התשלום עשויה לצמצם את זמני העיבוד, אבל אין ערובה לכך."
   },
-  "customRPC": {
-    "message": "RPC מותאם אישית"
-  },
   "customToken": {
     "message": "אסימון מותאם אישית"
   },

app/_locales/hi/messages.json

@@ -470,9 +470,6 @@
   "customGasSubTitle": {
     "message": "शुल्क बढ़ाने से प्रसंस्करण समय में कमी हो सकती है, लेकिन इसकी गारंटी नहीं होती है।"
   },
-  "customRPC": {
-    "message": "कस्टम RPC"
-  },
   "customSpendLimit": {
     "message": "कस्टम खर्च सीमा"
   },

app/_locales/hn/messages.json

@@ -70,9 +70,6 @@
   "customGas": {
     "message": "अनुकूलित करें गैस"
   },
-  "customRPC": {
-    "message": "कस्टम RPC"
-  },
   "decimal": {
     "message": "दशमलव परिशुद्धता"
   },

app/_locales/hr/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "Povećavanjem se naknade može smanjiti vrijeme obrade, ali se ne jamči."
   },
-  "customRPC": {
-    "message": "Prilagođeni RPC"
-  },
   "customToken": {
     "message": "Prilagođeni token"
   },

app/_locales/ht/messages.json

@@ -136,9 +136,6 @@
   "customGas": {
     "message": "Koutim Gaz"
   },
-  "customRPC": {
-    "message": "Koutim RPC"
-  },
   "customToken": {
     "message": "Koutim Token"
   },

app/_locales/hu/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "A díj növelése csökkentheti a feldolgozási időt, de ez nem garantált."
   },
-  "customRPC": {
-    "message": "Egyedi RPC"
-  },
   "customToken": {
     "message": "Egyéni token"
   },

app/_locales/id/messages.json

@@ -470,9 +470,6 @@
   "customGasSubTitle": {
     "message": "Menaikkan biaya dapat mengurangi waktu pemrosesan, namun tidak dijamin."
   },
-  "customRPC": {
-    "message": "RPC Kustom"
-  },
   "customSpendLimit": {
     "message": "Batas Penggunaan Kustom"
   },

app/_locales/it/messages.json

@@ -404,9 +404,6 @@
   "customGasSubTitle": {
     "message": "Incrementare il costo potrebbe diminuire il tempo di elaborazione, ma non è garantito."
   },
-  "customRPC": {
-    "message": "RPC Personalizzata"
-  },
   "customSpendLimit": {
     "message": "Limite Spesa Personalizzato"
   },

app/_locales/ja/messages.json

@@ -470,9 +470,6 @@
   "customGasSubTitle": {
     "message": "手数料を増やすと処理時間は減少する可能性がありますが、減少しない場合もあります。"
   },
-  "customRPC": {
-    "message": "カスタム RPC"
-  },
   "customSpendLimit": {
     "message": "カスタム使用限度額"
   },

app/_locales/kn/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "ಹೆಚ್ಚುತ್ತಿರುವ ಶುಲ್ಕವು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವ ಸಮಯದಲ್ಲಿ ಕಡಿಮೆಯಾಗುತ್ತದೆ ಆದರೆ ಇದು ಖಚಿತವಾಗಿಲ್ಲ."
   },
-  "customRPC": {
-    "message": "ಕಸ್ಟಮ್ RPC"
-  },
   "customToken": {
     "message": "ಕಸ್ಟಮ್ ಟೋಕನ್"
   },

app/_locales/ko/messages.json

@@ -470,9 +470,6 @@
   "customGasSubTitle": {
     "message": "수수료를 올리면 처리 시간이 단축되기도 하지만 항상 그렇지는 않습니다."
   },
-  "customRPC": {
-    "message": "맞춤형 RPC"
-  },
   "customSpendLimit": {
     "message": "맞춤형 지출 한도"
   },

app/_locales/lt/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "Didinant mokestį gali mažėti apdorojimo trukmė, bet tai negarantuojama."
   },
-  "customRPC": {
-    "message": "Pritaikytas RPC"
-  },
   "customToken": {
     "message": "Pritaikytas žetonas"
   },

app/_locales/lv/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "Nodevas palielināšana var saīsināt apstrādes laiku, bet ne garantēti."
   },
-  "customRPC": {
-    "message": "Pielāgots RPC izsaukums"
-  },
   "customToken": {
     "message": "Pielāgots marķieris"
   },

app/_locales/ms/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "Meningkatkan fi mungkin akan mengurangkan masa pemprosesan, tetapi ia tidak dijamin."
   },
-  "customRPC": {
-    "message": "RPC Tersuai"
-  },
   "customToken": {
     "message": "Token Tersuai"
   },

app/_locales/nl/messages.json

@@ -67,9 +67,6 @@
   "customGas": {
     "message": "Pas Gas aan"
   },
-  "customRPC": {
-    "message": "Aangepaste RPC"
-  },
   "decimal": {
     "message": "Decimalen van precisie"
   },

app/_locales/no/messages.json

@@ -254,9 +254,6 @@
   "customGasSubTitle": {
     "message": "Økt gebyr kan redusere behandlingstiden, men det er ikke garantert."
   },
-  "customRPC": {
-    "message": "Tilpasset RPC"
-  },
   "customToken": {
     "message": "Egendefinert token "
   },

app/_locales/ph/messages.json

@@ -470,9 +470,6 @@
   "customGasSubTitle": {
     "message": "Kapag dinagdagan ang bayarin, mababawasan ang mga oras ng pagproseso, pero hindi ito garantisado."
   },
-  "customRPC": {
-    "message": "Custom na RPC"
-  },
   "customSpendLimit": {
     "message": "Custom na Limitasyon sa Paggastos"
   },

app/_locales/pl/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "Zwiększenie opłaty może skrócić czas przetwarzania transakcji, ale nie jest to gwarantowane."
   },
-  "customRPC": {
-    "message": "Własne RPC"
-  },
   "customToken": {
     "message": "Własny token"
   },

app/_locales/pt/messages.json

@@ -70,9 +70,6 @@
   "customGas": {
     "message": "Customizar Gas"
   },
-  "customRPC": {
-    "message": "Customizar RPC"
-  },
   "decimal": {
     "message": "Precisão em Decimais"
   },

app/_locales/pt_BR/messages.json

@@ -470,9 +470,6 @@
   "customGasSubTitle": {
     "message": "Aumentar a taxa pode diminuir o tempo de processamento, mas não é garantia."
   },
-  "customRPC": {
-    "message": "RPC personalizada"
-  },
   "customSpendLimit": {
     "message": "Limite de gastos personalizado"
   },

app/_locales/ro/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "Creșterea taxei poate reduce timpii de procesare, dar acest lucru nu este garantat."
   },
-  "customRPC": {
-    "message": "RPC particularizat"
-  },
   "customToken": {
     "message": "Token personalizat"
   },

app/_locales/ru/messages.json

@@ -470,9 +470,6 @@
   "customGasSubTitle": {
     "message": "Увеличение комиссии может сократить время обработки, но это не гарантируется."
   },
-  "customRPC": {
-    "message": "Пользовательский RPC"
-  },
   "customSpendLimit": {
     "message": "Пользовательский предел расходов"
   },

app/_locales/sk/messages.json

@@ -251,9 +251,6 @@
   "customGasSubTitle": {
     "message": "Zvýšenie poplatku môže skrátiť dobu spracovania, nie je to však zaručené."
   },
-  "customRPC": {
-    "message": "Vlastní RPC"
-  },
   "customToken": {
     "message": "Vlastní token"
   },

app/_locales/sl/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "Povečanje lahko skrajša čas obdelave, vendar ni zagotovljeno."
   },
-  "customRPC": {
-    "message": "RPC po meri"
-  },
   "customToken": {
     "message": "Žeton po meri"
   },

app/_locales/sr/messages.json

@@ -254,9 +254,6 @@
   "customGasSubTitle": {
     "message": "Povećanje naknade može smanjiti vreme obrade, ali to nije zagarantovano."
   },
-  "customRPC": {
-    "message": "Korisnički definisan RPC"
-  },
   "customToken": {
     "message": "Prilagođeni token"
   },

app/_locales/sv/messages.json

@@ -251,9 +251,6 @@
   "customGasSubTitle": {
     "message": "Att öka avgiften kan minska behandlingstiden, men det är inte garanterat att göra det."
   },
-  "customRPC": {
-    "message": "Anpassad RPC"
-  },
   "customToken": {
     "message": "Anpassad token"
   },

app/_locales/sw/messages.json

@@ -251,9 +251,6 @@
   "customGasSubTitle": {
     "message": "Ada iliyoongezeka inaweza kupunguza muda wa uchakataji, lakini haihakikishwi."
   },
-  "customRPC": {
-    "message": "RPC Maalumu"
-  },
   "customToken": {
     "message": "Kianzio Maalumu"
   },

app/_locales/ta/messages.json

@@ -103,9 +103,6 @@
   "customGas": {
     "message": "எரிவாயுவைத் தனிப்பயனாக்குங்கள்"
   },
-  "customRPC": {
-    "message": "விருப்ப RPC ஐ"
-  },
   "customToken": {
     "message": "தனிப்பயன் டோக்கன்"
   },

app/_locales/th/messages.json

@@ -109,9 +109,6 @@
   "customGasSubTitle": {
     "message": "การเพิ่มค่าธรรมเนียมอาจลดเวลาดำเนินการ แต่ก็ไม่แน่เสมอไป"
   },
-  "customRPC": {
-    "message": "กำหนดค่า RPC เอง"
-  },
   "decimal": {
     "message": "ตำแหน่งของทศนิยม"
   },

app/_locales/tl/messages.json

@@ -392,9 +392,6 @@
   "customGasSubTitle": {
     "message": "Kapag dinagdagan ang bayarin, mababawasan ang mga oras ng pagproseso, pero hindi ito garantisado."
   },
-  "customRPC": {
-    "message": "Custom na RPC"
-  },
   "customSpendLimit": {
     "message": "Custom na Limitasyon sa Paggastos"
   },

app/_locales/tr/messages.json

@@ -88,9 +88,6 @@
   "customGas": {
     "message": "Gas'i özelleştir"
   },
-  "customRPC": {
-    "message": "Özel RPC"
-  },
   "customToken": {
     "message": "Özel Jeton"
   },

app/_locales/uk/messages.json

@@ -257,9 +257,6 @@
   "customGasSubTitle": {
     "message": "Збільшення комісії може призвести до зменшення часу обробки, але це не гарантується."
   },
-  "customRPC": {
-    "message": "Налаштувати RPC"
-  },
   "customToken": {
     "message": "Користувацький токен"
   },

app/_locales/vi/messages.json

@@ -470,9 +470,6 @@
   "customGasSubTitle": {
     "message": "Việc tăng phí có thể giúp giảm thời gian xử lý, nhưng điều này không được đảm bảo."
   },
-  "customRPC": {
-    "message": "RPC tùy chỉnh"
-  },
   "customSpendLimit": {
     "message": "Giới hạn chi tiêu tùy chỉnh"
   },

app/_locales/zh_CN/messages.json

@@ -401,9 +401,6 @@
   "customGasSubTitle": {
     "message": "提升费用可能会缩短处理时间，但不保证绝对有效。"
   },
-  "customRPC": {
-    "message": "自定义 RPC"
-  },
   "customSpendLimit": {
     "message": "自定义消费限额"
   },

app/_locales/zh_TW/messages.json

@@ -266,9 +266,6 @@
   "customGasSubTitle": {
     "message": "提升費用可能會加快處理時間，但不保證"
   },
-  "customRPC": {
-    "message": "自訂 RPC"
-  },
   "customToken": {
     "message": "自訂代幣"
   },

app/scripts/controllers/preferences.js

@@ -53,6 +53,7 @@ export default class PreferencesController {
       preferences: {
         autoLockTimeLimit: undefined,
         showFiatInTestnets: false,
+        showTestNetworks: false,
         useNativeCurrencyAsPrimaryCurrency: true,
         hideZeroBalanceTokens: false,
       },

app/scripts/first-time-state.js

@@ -10,15 +10,7 @@
 const initialState = {
   config: {},
   PreferencesController: {
-    frequentRpcListDetail: [
+    frequentRpcListDetail: [],
-      {
-        rpcUrl: 'http://localhost:8545',
-        chainId: '0x539',
-        ticker: 'ETH',
-        nickname: 'Localhost 8545',
-        rpcPrefs: {},
-      },
-    ],
   },
 };
 

shared/constants/network.js

@@ -3,6 +3,7 @@ export const RINKEBY = 'rinkeby';
 export const KOVAN = 'kovan';
 export const MAINNET = 'mainnet';
 export const GOERLI = 'goerli';
+export const LOCALHOST = 'localhost';
 export const NETWORK_TYPE_RPC = 'rpc';
 
 export const MAINNET_NETWORK_ID = '1';
@@ -34,6 +35,7 @@ export const RINKEBY_DISPLAY_NAME = 'Rinkeby';
 export const KOVAN_DISPLAY_NAME = 'Kovan';
 export const MAINNET_DISPLAY_NAME = 'Ethereum Mainnet';
 export const GOERLI_DISPLAY_NAME = 'Goerli';
+export const LOCALHOST_DISPLAY_NAME = 'Localhost 8545';
 
 const infuraProjectId = process.env.INFURA_PROJECT_ID;
 const getRpcUrl = (network) =>
@@ -44,6 +46,7 @@ export const RINKEBY_RPC_URL = getRpcUrl('rinkeby');
 export const KOVAN_RPC_URL = getRpcUrl('kovan');
 export const MAINNET_RPC_URL = getRpcUrl('mainnet');
 export const GOERLI_RPC_URL = getRpcUrl('goerli');
+export const LOCALHOST_RPC_URL = 'http://localhost:8545';
 
 export const ETH_SYMBOL = 'ETH';
 export const WETH_SYMBOL = 'WETH';
@@ -63,6 +66,7 @@ export const TEST_CHAINS = [
   RINKEBY_CHAIN_ID,
   GOERLI_CHAIN_ID,
   KOVAN_CHAIN_ID,
+  LOCALHOST_CHAIN_ID,
 ];
 
 /**
@@ -74,6 +78,7 @@ export const NETWORK_TYPE_TO_ID_MAP = {
   [KOVAN]: { networkId: KOVAN_NETWORK_ID, chainId: KOVAN_CHAIN_ID },
   [GOERLI]: { networkId: GOERLI_NETWORK_ID, chainId: GOERLI_CHAIN_ID },
   [MAINNET]: { networkId: MAINNET_NETWORK_ID, chainId: MAINNET_CHAIN_ID },
+  [LOCALHOST]: { networkId: LOCALHOST_NETWORK_ID, chainId: LOCALHOST_CHAIN_ID },
 };
 
 export const NETWORK_TO_NAME_MAP = {
@@ -82,18 +87,21 @@ export const NETWORK_TO_NAME_MAP = {
   [KOVAN]: KOVAN_DISPLAY_NAME,
   [MAINNET]: MAINNET_DISPLAY_NAME,
   [GOERLI]: GOERLI_DISPLAY_NAME,
+  [LOCALHOST]: LOCALHOST_DISPLAY_NAME,
 
   [ROPSTEN_NETWORK_ID]: ROPSTEN_DISPLAY_NAME,
   [RINKEBY_NETWORK_ID]: RINKEBY_DISPLAY_NAME,
   [KOVAN_NETWORK_ID]: KOVAN_DISPLAY_NAME,
   [GOERLI_NETWORK_ID]: GOERLI_DISPLAY_NAME,
   [MAINNET_NETWORK_ID]: MAINNET_DISPLAY_NAME,
+  [LOCALHOST_NETWORK_ID]: LOCALHOST_DISPLAY_NAME,
 
   [ROPSTEN_CHAIN_ID]: ROPSTEN_DISPLAY_NAME,
   [RINKEBY_CHAIN_ID]: RINKEBY_DISPLAY_NAME,
   [KOVAN_CHAIN_ID]: KOVAN_DISPLAY_NAME,
   [GOERLI_CHAIN_ID]: GOERLI_DISPLAY_NAME,
   [MAINNET_CHAIN_ID]: MAINNET_DISPLAY_NAME,
+  [LOCALHOST_CHAIN_ID]: LOCALHOST_DISPLAY_NAME,
 };
 
 export const CHAIN_ID_TO_TYPE_MAP = Object.entries(
@@ -109,6 +117,7 @@ export const CHAIN_ID_TO_RPC_URL_MAP = {
   [KOVAN_CHAIN_ID]: KOVAN_RPC_URL,
   [GOERLI_CHAIN_ID]: GOERLI_RPC_URL,
   [MAINNET_CHAIN_ID]: MAINNET_RPC_URL,
+  [LOCALHOST_CHAIN_ID]: LOCALHOST_RPC_URL,
 };
 
 export const CHAIN_ID_TO_NETWORK_ID_MAP = Object.values(

test/e2e/tests/custom-rpc-history.spec.js

@@ -30,9 +30,15 @@ describe('Stores custom RPC history', function () {
 
         await driver.clickElement('.network-display');
 
-        await driver.clickElement({ text: 'Custom RPC', tag: 'span' });
+        await driver.clickElement({ text: 'Add Network', tag: 'button' });
 
-        await driver.findElement('.add-network-form__sub-header-text');
+        await driver.findVisibleElement('.settings-page__content');
+
+        await driver.findElement('.settings-page__sub-header-text');
+
+        await driver.clickElement(
+          '.add-network-form__header-add-network-button',
+        );
 
         const customRpcInputs = await driver.findElements('input[type="text"]');
         const networkNameInput = customRpcInputs[0];
@@ -48,7 +54,7 @@ describe('Stores custom RPC history', function () {
         await chainIdInput.clear();
         await chainIdInput.sendKeys(chainId.toString());
 
-        await driver.clickElement('.add-network-form__footer .btn-primary');
+        await driver.clickElement('.add-network-form__footer-submit-button');
         await driver.findElement({ text: networkName, tag: 'span' });
       },
     );
@@ -71,9 +77,15 @@ describe('Stores custom RPC history', function () {
 
         await driver.clickElement('.network-display');
 
-        await driver.clickElement({ text: 'Custom RPC', tag: 'span' });
+        await driver.clickElement({ text: 'Add Network', tag: 'button' });
 
-        await driver.findElement('.add-network-form__sub-header-text');
+        await driver.findVisibleElement('.settings-page__content');
+
+        await driver.findElement('.settings-page__sub-header-text');
+
+        await driver.clickElement(
+          '.add-network-form__header-add-network-button',
+        );
 
         const customRpcInputs = await driver.findElements('input[type="text"]');
         const rpcUrlInput = customRpcInputs[1];
@@ -81,7 +93,7 @@ describe('Stores custom RPC history', function () {
         await rpcUrlInput.clear();
         await rpcUrlInput.sendKeys(duplicateRpcUrl);
         await driver.findElement({
-          text: 'This URL is currently used by the Localhost 8545 network.',
+          text: 'This URL is currently used by the localhost network.',
           tag: 'p',
         });
       },
@@ -106,9 +118,17 @@ describe('Stores custom RPC history', function () {
 
         await driver.clickElement('.network-display');
 
-        await driver.clickElement({ text: 'Custom RPC', tag: 'span' });
+        await driver.clickElement({ text: 'Add Network', tag: 'button' });
+
+        // await driver.findElement('.add-network-form__sub-header-text');
+        // wait for the full screen to be visible
+        await driver.findVisibleElement('.settings-page__content');
 
-        await driver.findElement('.add-network-form__sub-header-text');
+        await driver.findElement('.settings-page__sub-header-text');
+
+        await driver.clickElement(
+          '.add-network-form__header-add-network-button',
+        );
 
         const customRpcInputs = await driver.findElements('input[type="text"]');
         const rpcUrlInput = customRpcInputs[1];
@@ -120,8 +140,7 @@ describe('Stores custom RPC history', function () {
         await chainIdInput.clear();
         await chainIdInput.sendKeys(duplicateChainId);
         await driver.findElement({
-          text:
+          text: 'This Chain ID is currently used by the localhost network.',
-            'This Chain ID is currently used by the Localhost 8545 network.',
           tag: 'p',
         });
       },
@@ -189,12 +208,9 @@ describe('Stores custom RPC history', function () {
 
         await driver.clickElement('.network-display');
 
-        await driver.clickElement({ text: 'Custom RPC', tag: 'span' });
+        await driver.clickElement({ text: 'Add Network', tag: 'button' });
 
-        // cancel new custom rpc
+        await driver.findVisibleElement('.settings-page__content');
-        await driver.clickElement(
-          '.add-network-form__footer button.btn-secondary',
-        );
 
         const networkListItems = await driver.findClickableElements(
           '.networks-tab__networks-list-name',

test/e2e/tests/provider-events.spec.js

@@ -40,21 +40,21 @@ describe('MetaMask', function () {
         await driver.switchToWindow(windowHandles[0]);
 
         await driver.clickElement('.network-display');
-        await driver.clickElement({ text: 'Ropsten', tag: 'span' });
+        await driver.clickElement({ text: 'Ethereum Mainnet', tag: 'span' });
 
         await driver.switchToWindowWithTitle('E2E Test Dapp', windowHandles);
         const switchedNetworkDiv = await driver.waitForSelector({
           css: '#network',
-          text: '3',
+          text: '1',
         });
         const switchedChainIdDiv = await driver.waitForSelector({
           css: '#chainId',
-          text: '0x3',
+          text: '0x1',
         });
         const accountsDiv = await driver.findElement('#accounts');
 
-        assert.equal(await switchedNetworkDiv.getText(), '3');
+        assert.equal(await switchedNetworkDiv.getText(), '1');
-        assert.equal(await switchedChainIdDiv.getText(), '0x3');
+        assert.equal(await switchedChainIdDiv.getText(), '0x1');
         assert.equal(
           await accountsDiv.getText(),
           '0x5cfe73b6021e818b776b421b1c4db2474086a7e1',

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

@@ -3,16 +3,18 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { compose } from 'redux';
+import Button from '../../ui/button';
 import * as actions from '../../../store/actions';
 import { openAlert as displayInvalidCustomNetworkAlert } from '../../../ducks/alerts/invalid-custom-network';
-import { ADD_NETWORK_ROUTE } from '../../../helpers/constants/routes';
-import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
 import { NETWORK_TYPE_RPC } from '../../../../shared/constants/network';
 import { isPrefixedFormattedHexString } from '../../../../shared/modules/network.utils';
-import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 
 import ColorIndicator from '../../ui/color-indicator';
 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 { NETWORKS_ROUTE } from '../../../helpers/constants/routes';
 import { Dropdown, DropdownMenuItem } from './dropdown';
 
 // classes from nodes of the toggle element.
@@ -34,6 +36,7 @@ const DROP_DOWN_MENU_ITEM_STYLE = {
 function mapStateToProps(state) {
   return {
     provider: state.metamask.provider,
+    shouldShowTestNetworks: getShowTestNetworks(state),
     frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
     networkDropdownOpen: state.appState.networkDropdownOpen,
   };
@@ -48,9 +51,6 @@ function mapDispatchToProps(dispatch) {
       dispatch(actions.setRpcTarget(target, chainId, ticker, nickname));
     },
     hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
-    setSelectedSettingsRpcUrl: (url) => {
-      dispatch(actions.setSelectedSettingsRpcUrl(url));
-    },
     displayInvalidCustomNetworkAlert: (networkName) => {
       dispatch(displayInvalidCustomNetworkAlert(networkName));
     },
@@ -82,12 +82,12 @@ class NetworkDropdown extends Component {
     setProviderType: PropTypes.func.isRequired,
     setRpcTarget: PropTypes.func.isRequired,
     hideNetworkDropdown: PropTypes.func.isRequired,
-    setSelectedSettingsRpcUrl: PropTypes.func.isRequired,
     frequentRpcListDetail: PropTypes.array.isRequired,
+    shouldShowTestNetworks: PropTypes.bool,
     networkDropdownOpen: PropTypes.bool.isRequired,
-    history: PropTypes.object.isRequired,
     displayInvalidCustomNetworkAlert: PropTypes.func.isRequired,
     showConfirmDeleteNetworkModal: PropTypes.func.isRequired,
+    history: PropTypes.object,
   };
 
   handleClick(newProviderType) {
@@ -111,6 +111,36 @@ class NetworkDropdown extends Component {
     setProviderType(newProviderType);
   }
 
+  renderAddCustomButton() {
+    const style = {
+      width: '100%',
+      left: '40px',
+      color: 'white',
+      background: 'rgba(0, 0, 0, 0.75)',
+      borderRadius: '20px',
+      textTransform: 'none',
+    };
+
+    return (
+      <Button
+        type="submit"
+        style={style}
+        variant="contained"
+        size="large"
+        onClick={() => {
+          if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
+            global.platform.openExtensionInBrowser(NETWORKS_ROUTE);
+          } else {
+            this.props.history.push(NETWORKS_ROUTE);
+          }
+          this.props.hideNetworkDropdown();
+        }}
+      >
+        {this.context.t('addNetwork')}
+      </Button>
+    );
+  }
+
   renderCustomRpcList(rpcListDetail, provider) {
     const reversedRpcListDetail = rpcListDetail.slice().reverse();
 
@@ -188,6 +218,8 @@ class NetworkDropdown extends Component {
       name = this.context.t('rinkeby');
     } else if (providerName === 'goerli') {
       name = this.context.t('goerli');
+    } else if (providerName === 'localhost') {
+      name = this.context.t('localhost');
     } else {
       name = provider.nickname || this.context.t('unknownNetwork');
     }
@@ -230,11 +262,7 @@ class NetworkDropdown extends Component {
   }
 
   render() {
-    const {
+    const { shouldShowTestNetworks } = this.props;
-      provider: { rpcUrl: activeNetwork },
-      setSelectedSettingsRpcUrl,
-      history,
-    } = this.props;
     const rpcListDetail = this.props.frequentRpcListDetail;
     const isOpen = this.props.networkDropdownOpen;
 
@@ -275,44 +303,20 @@ class NetworkDropdown extends Component {
           </div>
         </div>
         {this.renderNetworkEntry('mainnet')}
-        {this.renderNetworkEntry('ropsten')}
-        {this.renderNetworkEntry('kovan')}
-        {this.renderNetworkEntry('rinkeby')}
-        {this.renderNetworkEntry('goerli')}
 
         {this.renderCustomRpcList(rpcListDetail, this.props.provider)}
-        <DropdownMenuItem
+
-          closeMenu={() => this.props.hideNetworkDropdown()}
+        {shouldShowTestNetworks && (
-          onClick={() => {
+          <>
-            if (getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN) {
+            {this.renderNetworkEntry('ropsten')}
-              history.push(ADD_NETWORK_ROUTE);
+            {this.renderNetworkEntry('kovan')}
-            } else {
+            {this.renderNetworkEntry('rinkeby')}
-              global.platform.openExtensionInBrowser(ADD_NETWORK_ROUTE);
+            {this.renderNetworkEntry('goerli')}
-            }
+            {this.renderNetworkEntry('localhost')}
-            setSelectedSettingsRpcUrl('');
+          </>
-          }}
+        )}
-          style={DROP_DOWN_MENU_ITEM_STYLE}
+
-        >
+        {this.renderAddCustomButton()}
-          {activeNetwork === 'custom' ? (
-            <i className="fa fa-check" />
-          ) : (
-            <div className="network-check__transparent">✓</div>
-          )}
-          <ColorIndicator
-            type={ColorIndicator.TYPES.FILLED}
-            color={COLORS.TRANSPARENT}
-            borderColor={COLORS.UI2}
-            size={SIZES.LG}
-          />
-          <span
-            className="network-name-item"
-            style={{
-              color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
-            }}
-          >
-            {this.context.t('customRPC')}
-          </span>
-        </DropdownMenuItem>
       </Dropdown>
     );
   }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
+import Button from '../../ui/button';
 import { mountWithRouter } from '../../../../test/lib/render-helpers';
 import ColorIndicator from '../../ui/color-indicator';
 import NetworkDropdown from './network-dropdown';
@@ -17,6 +18,9 @@ describe('Network Dropdown', () => {
         provider: {
           type: 'test',
         },
+        preferences: {
+          showTestNetworks: true,
+        },
       },
       appState: {
         networkDropdownOpen: false,
@@ -38,13 +42,16 @@ describe('Network Dropdown', () => {
     });
   });
 
-  describe('NetworkDropdown in appState is true', () => {
+  describe('NetworkDropdown in appState is true and show test networks is true', () => {
     const mockState = {
       metamask: {
         network: '1',
         provider: {
           type: 'test',
         },
+        preferences: {
+          showTestNetworks: true,
+        },
         frequentRpcListDetail: [
           { chainId: '0x1a', rpcUrl: 'http://localhost:7545' },
           { rpcUrl: 'http://localhost:7546' },
@@ -54,14 +61,32 @@ describe('Network Dropdown', () => {
         networkDropdownOpen: true,
       },
     };
+
+    global.platform = {
+      openExtensionInBrowser: jest.fn(),
+    };
+
     const store = createMockStore(mockState);
 
-    beforeEach(() => {
+    let testNetworkIndex = 1;
-      wrapper = mountWithRouter(<NetworkDropdown store={store} />);
+
-    });
+    const findTestNetworkFirstIndex = (_wrapper) => {
+      let i = 1;
+      let found = false;
+      while (!found) {
+        if (_wrapper.find(ColorIndicator).at(i).prop('color') === 'ui-2') {
+          i += 1;
+        } else {
+          found = true;
+        }
+      }
 
-    it('renders 8 DropDownMenuItems', () => {
+      testNetworkIndex = i;
-      expect(wrapper.find(DropdownMenuItem)).toHaveLength(8);
+    };
+
+    beforeAll(() => {
+      wrapper = mountWithRouter(<NetworkDropdown store={store} />);
+      findTestNetworkFirstIndex(wrapper);
     });
 
     it('checks background color for first ColorIndicator', () => {
@@ -71,41 +96,99 @@ describe('Network Dropdown', () => {
     });
 
     it('checks background color for second ColorIndicator', () => {
-      const colorIndicator = wrapper.find(ColorIndicator).at(1);
+      // find where test networks start in case there are custom RPCs
+      const colorIndicator = wrapper.find(ColorIndicator).at(testNetworkIndex);
       expect(colorIndicator.prop('color')).toStrictEqual('ropsten');
       expect(colorIndicator.prop('borderColor')).toStrictEqual('ropsten');
     });
 
     it('checks background color for third ColorIndicator', () => {
-      const colorIndicator = wrapper.find(ColorIndicator).at(2);
+      const colorIndicator = wrapper
+        .find(ColorIndicator)
+        .at(testNetworkIndex + 1);
       expect(colorIndicator.prop('color')).toStrictEqual('kovan');
       expect(colorIndicator.prop('borderColor')).toStrictEqual('kovan');
     });
 
     it('checks background color for fourth ColorIndicator', () => {
-      const colorIndicator = wrapper.find(ColorIndicator).at(3);
+      const colorIndicator = wrapper
+        .find(ColorIndicator)
+        .at(testNetworkIndex + 2);
       expect(colorIndicator.prop('color')).toStrictEqual('rinkeby');
       expect(colorIndicator.prop('borderColor')).toStrictEqual('rinkeby');
     });
 
     it('checks background color for fifth ColorIndicator', () => {
-      const colorIndicator = wrapper.find(ColorIndicator).at(4);
+      const colorIndicator = wrapper
+        .find(ColorIndicator)
+        .at(testNetworkIndex + 3);
       expect(colorIndicator.prop('color')).toStrictEqual('goerli');
       expect(colorIndicator.prop('borderColor')).toStrictEqual('goerli');
     });
 
     it('checks background color for sixth ColorIndicator', () => {
-      const colorIndicator = wrapper.find(ColorIndicator).at(5);
+      const colorIndicator = wrapper
-      const customNetworkGray = 'ui-2';
+        .find(ColorIndicator)
-      expect(colorIndicator.prop('color')).toStrictEqual(customNetworkGray);
+        .at(testNetworkIndex + 4);
-      expect(colorIndicator.prop('borderColor')).toStrictEqual(
+      expect(colorIndicator.prop('color')).toStrictEqual('localhost');
-        customNetworkGray,
+      expect(colorIndicator.prop('borderColor')).toStrictEqual('localhost');
+      expect(
+        wrapper
+          .find(DropdownMenuItem)
+          .at(testNetworkIndex + 4)
+          .text(),
+      ).toStrictEqual('✓localhost');
+    });
+
+    it('checks that Add Network button is rendered', () => {
+      expect(wrapper.find(Button).at(0).children().text()).toStrictEqual(
+        'addNetwork',
+      );
+    });
+  });
+
+  describe('NetworkDropdown in appState is true and show test networks is false', () => {
+    const mockState = {
+      metamask: {
+        network: '1',
+        provider: {
+          type: 'test',
+        },
+        preferences: {
+          showTestNetworks: false,
+        },
+        frequentRpcListDetail: [
+          { chainId: '0x1a', rpcUrl: 'http://localhost:7545' },
+          { rpcUrl: 'http://localhost:7546' },
+        ],
+      },
+      appState: {
+        networkDropdownOpen: true,
+      },
+    };
+
+    global.platform = {
+      openExtensionInBrowser: jest.fn(),
+    };
+
+    const store = createMockStore(mockState);
+
+    beforeAll(() => {
+      wrapper = mountWithRouter(<NetworkDropdown store={store} />);
+    });
+
+    it('checks background color for first ColorIndicator', () => {
+      const colorIndicator = wrapper.find(ColorIndicator).at(0);
+      expect(colorIndicator.prop('color')).toStrictEqual('mainnet');
+      expect(colorIndicator.prop('borderColor')).toStrictEqual('mainnet');
+      expect(wrapper.find(DropdownMenuItem).at(0).text()).toStrictEqual(
+        '✓mainnet',
       );
     });
 
-    it('checks dropdown for frequestRPCList from state', () => {
+    it('checks that Add Network button is rendered', () => {
-      expect(wrapper.find(DropdownMenuItem).at(6).text()).toStrictEqual(
+      expect(wrapper.find(Button).at(0).children().text()).toStrictEqual(
-        '✓http://localhost:7545',
+        'addNetwork',
       );
     });
   });

ui/components/app/network-display/index.scss

@@ -35,6 +35,10 @@
     background-color: lighten($dodger-blue, 35%);
   }
 
+  &--localhost {
+    background-color: lighten($blue-lagoon, 68%);
+  }
+
   &.chip {
     margin: 0;
     max-width: 100%;

ui/css/design-system/colors.scss

@@ -108,6 +108,7 @@ $ropsten: #ff4a8d;
 $kovan: #9064ff;
 $rinkeby: #f6c343;
 $goerli: #3099f2;
+$localhost: #29b6af;
 
 $color-map: (
   'ui-1': $ui-1,
@@ -136,5 +137,6 @@ $color-map: (
   'kovan': $kovan,
   'rinkeby': $rinkeby,
   'goerli': $goerli,
+  'localhost': $localhost,
   'transparent': transparent,
 );

ui/css/itcss/components/network.scss

@@ -32,6 +32,10 @@
   &.goerli-test-network .menu-icon-circle div {
     background-color: rgba(48, 153, 242, 0.7) !important;
   }
+
+  &.localhost-network .menu-icon-circle div {
+    background-color: rgba(3, 135, 137, 0.7) !important;
+  }
 }
 
 .dropdown-menu-item {

ui/ducks/metamask/metamask.js

@@ -34,6 +34,7 @@ export default function reduceMetamask(state = {}, action) {
     preferences: {
       autoLockTimeLimit: undefined,
       showFiatInTestnets: false,
+      showTestNetworks: false,
       useNativeCurrencyAsPrimaryCurrency: true,
     },
     firstTimeFlowType: null,

ui/helpers/constants/design-system.js

@@ -33,6 +33,7 @@ export const COLORS = {
   RINKEBY: 'rinkeby',
   GOERLI: 'goerli',
   TRANSPARENT: 'transparent',
+  LOCALHOST: 'localhost',
 };
 
 export const TYPOGRAPHY = {

ui/pages/settings/advanced-tab/advanced-tab.component.js

@@ -31,9 +31,11 @@ export default class AdvancedTab extends PureComponent {
     setAdvancedInlineGasFeatureFlag: PropTypes.func,
     advancedInlineGas: PropTypes.bool,
     showFiatInTestnets: PropTypes.bool,
+    showTestNetworks: PropTypes.bool,
     autoLockTimeLimit: PropTypes.number,
     setAutoLockTimeLimit: PropTypes.func.isRequired,
     setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired,
+    setShowTestNetworks: PropTypes.func.isRequired,
     threeBoxSyncingAllowed: PropTypes.bool.isRequired,
     setThreeBoxSyncingPermission: PropTypes.func.isRequired,
     threeBoxDisabled: PropTypes.bool.isRequired,
@@ -220,6 +222,35 @@ export default class AdvancedTab extends PureComponent {
     );
   }
 
+  renderToggleTestNetworks() {
+    const { t } = this.context;
+    const { showTestNetworks, setShowTestNetworks } = this.props;
+
+    return (
+      <div
+        className="settings-page__content-row"
+        data-testid="advanced-setting-show-testnet-conversion"
+      >
+        <div className="settings-page__content-item">
+          <span>{t('showTestnetNetworks')}</span>
+          <div className="settings-page__content-description">
+            {t('showTestnetNetworksDescription')}
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={showTestNetworks}
+              onToggle={(value) => setShowTestNetworks(!value)}
+              offLabel={t('off')}
+              onLabel={t('on')}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   renderShowConversionInTestnets() {
     const { t } = this.context;
     const {
@@ -597,6 +628,7 @@ export default class AdvancedTab extends PureComponent {
         {this.renderAdvancedGasInputInline()}
         {this.renderHexDataOptIn()}
         {this.renderShowConversionInTestnets()}
+        {this.renderToggleTestNetworks()}
         {this.renderUseNonceOptIn()}
         {this.renderAutoLockTimeLimit()}
         {this.renderThreeBoxControl()}

ui/pages/settings/advanced-tab/advanced-tab.component.test.js

@@ -3,17 +3,24 @@ import sinon from 'sinon';
 import { shallow } from 'enzyme';
 import TextField from '../../../components/ui/text-field';
 import { LEDGER_TRANSPORT_TYPES } from '../../../../shared/constants/hardware-wallets';
+import ToggleButton from '../../../components/ui/toggle-button';
 import AdvancedTab from './advanced-tab.component';
 
 describe('AdvancedTab Component', () => {
-  it('should render correctly when threeBoxFeatureFlag', () => {
+  let root;
-    const root = shallow(
+  let setAutoLockTimeLimitSpy = sinon.spy();
+  const toggleTestnet = sinon.spy();
+
+  beforeAll(() => {
+    root = shallow(
       <AdvancedTab
         ipfsGateway=""
-        setAutoLockTimeLimit={() => undefined}
+        setAutoLockTimeLimit={setAutoLockTimeLimitSpy}
         setIpfsGateway={() => undefined}
         setShowFiatConversionOnTestnetsPreference={() => undefined}
         setThreeBoxSyncingPermission={() => undefined}
+        setShowTestNetworks={toggleTestnet}
+        showTestNetworks={false}
         threeBoxDisabled
         threeBoxSyncingAllowed={false}
         ledgerTransportType={LEDGER_TRANSPORT_TYPES.U2F}
@@ -27,13 +34,15 @@ describe('AdvancedTab Component', () => {
         },
       },
     );
+  });
 
-    expect(root.find('.settings-page__content-row')).toHaveLength(12);
+  it('should render correctly when threeBoxFeatureFlag', () => {
+    expect(root.find('.settings-page__content-row')).toHaveLength(13);
   });
 
   it('should update autoLockTimeLimit', () => {
-    const setAutoLockTimeLimitSpy = sinon.spy();
+    setAutoLockTimeLimitSpy = sinon.spy();
-    const root = shallow(
+    root = shallow(
       <AdvancedTab
         ipfsGateway=""
         setAutoLockTimeLimit={setAutoLockTimeLimitSpy}
@@ -46,6 +55,7 @@ describe('AdvancedTab Component', () => {
         setLedgerLivePreference={() => undefined}
         setDismissSeedBackUpReminder={() => undefined}
         dismissSeedBackUpReminder={false}
+        setShowTestNetworks={toggleTestnet}
       />,
       {
         context: {
@@ -54,7 +64,7 @@ describe('AdvancedTab Component', () => {
       },
     );
 
-    const autoTimeout = root.find('.settings-page__content-row').at(7);
+    const autoTimeout = root.find('.settings-page__content-row').at(8);
     const textField = autoTimeout.find(TextField);
 
     textField.props().onChange({ target: { value: 1440 } });
@@ -63,4 +73,11 @@ describe('AdvancedTab Component', () => {
     autoTimeout.find('.settings-tab__rpc-save-button').simulate('click');
     expect(setAutoLockTimeLimitSpy.args[0][0]).toStrictEqual(1440);
   });
+
+  it('should toggle show test networks', () => {
+    const testNetworks = root.find('.settings-page__content-row').at(6);
+    const toggleButton = testNetworks.find(ToggleButton);
+    toggleButton.first().simulate('toggle');
+    expect(toggleTestnet.calledOnce).toStrictEqual(true);
+  });
 });

ui/pages/settings/advanced-tab/advanced-tab.container.js

@@ -6,6 +6,7 @@ import {
   setFeatureFlag,
   showModal,
   setShowFiatConversionOnTestnetsPreference,
+  setShowTestNetworks,
   setAutoLockTimeLimit,
   setThreeBoxSyncingPermission,
   turnThreeBoxSyncingOnAndInitialize,
@@ -32,7 +33,11 @@ export const mapStateToProps = (state) => {
     ledgerTransportType,
     dismissSeedBackUpReminder,
   } = metamask;
-  const { showFiatInTestnets, autoLockTimeLimit } = getPreferences(state);
+  const {
+    showFiatInTestnets,
+    showTestNetworks,
+    autoLockTimeLimit,
+  } = getPreferences(state);
 
   const userHasALedgerAccount = doesUserHaveALedgerAccount(state);
 
@@ -41,6 +46,7 @@ export const mapStateToProps = (state) => {
     sendHexData,
     advancedInlineGas,
     showFiatInTestnets,
+    showTestNetworks,
     autoLockTimeLimit,
     threeBoxSyncingAllowed,
     threeBoxDisabled,
@@ -65,6 +71,9 @@ export const mapDispatchToProps = (dispatch) => {
     setShowFiatConversionOnTestnetsPreference: (value) => {
       return dispatch(setShowFiatConversionOnTestnetsPreference(value));
     },
+    setShowTestNetworks: (value) => {
+      return dispatch(setShowTestNetworks(value));
+    },
     setAutoLockTimeLimit: (value) => {
       return dispatch(setAutoLockTimeLimit(value));
     },

ui/pages/settings/advanced-tab/advanced-tab.stories.js

@@ -13,6 +13,7 @@ export const AdvancedTabComponent = () => {
       <AdvancedTab
         setAutoLockTimeLimit={() => undefined}
         setShowFiatConversionOnTestnetsPreference={() => undefined}
+        setShowTestNetworks={() => undefined}
         setThreeBoxSyncingPermission={() => undefined}
         setIpfsGateway={() => undefined}
         setLedgerLivePreference={() => undefined}

ui/pages/settings/networks-tab/networks-tab.component.js

@@ -62,6 +62,7 @@ export default class NetworksTab extends PureComponent {
               event.preventDefault();
               history.push(ADD_NETWORK_ROUTE);
             }}
+            className="add-network-form__header-add-network-button"
           >
             {this.context.t('addANetwork')}
           </Button>

ui/pages/settings/networks-tab/networks-tab.constants.js

@@ -5,6 +5,9 @@ import {
   KOVAN,
   KOVAN_CHAIN_ID,
   KOVAN_RPC_URL,
+  LOCALHOST,
+  LOCALHOST_CHAIN_ID,
+  LOCALHOST_RPC_URL,
   MAINNET,
   MAINNET_CHAIN_ID,
   MAINNET_RPC_URL,
@@ -62,6 +65,15 @@ const defaultNetworksData = [
     ticker: 'ETH',
     blockExplorerUrl: 'https://kovan.etherscan.io',
   },
+  {
+    labelKey: LOCALHOST,
+    iconColor: '#29B6AF',
+    providerType: LOCALHOST,
+    rpcUrl: LOCALHOST_RPC_URL,
+    chainId: LOCALHOST_CHAIN_ID,
+    ticker: 'ETH',
+    blockExplorerUrl: '',
+  },
 ];
 
 export { defaultNetworksData };

ui/selectors/selectors.js

@@ -424,6 +424,11 @@ export function getPreferences({ metamask }) {
   return metamask.preferences;
 }
 
+export function getShowTestNetworks(state) {
+  const { showTestNetworks } = getPreferences(state);
+  return Boolean(showTestNetworks);
+}
+
 export function getShouldShowFiat(state) {
   const isMainNet = getIsMainnet(state);
   const conversionRate = getConversionRate(state);

ui/store/actions.js

@@ -1931,6 +1931,10 @@ export function setShowFiatConversionOnTestnetsPreference(value) {
   return setPreference('showFiatInTestnets', value);
 }
 
+export function setShowTestNetworks(value) {
+  return setPreference('showTestNetworks', value);
+}
+
 export function setAutoLockTimeLimit(value) {
   return setPreference('autoLockTimeLimit', value);
 }