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>
3 years ago · b6673731e2
parent 64e4ce19bc
commit b6673731e2
71 changed files with 308 additions and 257 deletions
--- a/app/_locales/am/messages.json
+++ b/app/_locales/am/messages.json
@ -257,9 +257,6 @@
  "customGasSubTitle": {
    "message": "ክፍያ መጨመር የመከወኛ ጊዜን ሊቀንስ ቢችልም ይህ ግን ዋስትና የለውም።"
  },
-  "customRPC": {
-    "message": "ብጁ RPC"
-  },
  "customToken": {
    "message": "ብጁ ተለዋጭ ስም"
  },
--- a/app/_locales/ar/messages.json
+++ b/app/_locales/ar/messages.json
@ -257,9 +257,6 @@
  "customGasSubTitle": {
    "message": "قد تؤدي زيادة الرسوم إلى تقليل أزمنة المعالجة، ولكن ذلك غير مضمون."
  },
-  "customRPC": {
-    "message": "آر بي سي مخصص"
-  },
  "customToken": {
    "message": "عملة رمزية مخصصة"
  },
--- a/app/_locales/bg/messages.json
+++ b/app/_locales/bg/messages.json
@ -257,9 +257,6 @@
  "customGasSubTitle": {
    "message": "Увеличаването на таксата може да намали времето за обработка, но това не е гарантирано."
  },
-  "customRPC": {
-    "message": "RPC по избор"
-  },
  "customToken": {
    "message": "Персонализиран маркер"
  },
--- a/app/_locales/bn/messages.json
+++ b/app/_locales/bn/messages.json
@ -257,9 +257,6 @@
  "customGasSubTitle": {
    "message": "ফী বৃদ্ধি করা প্রক্রিয়াকরণের সময় কমাতে পারে, কিন্তু সেটির নিশ্চয়তা দেওয়া হয় না।"
  },
-  "customRPC": {
-    "message": "কাস্টম RPC"
-  },
  "customToken": {
    "message": "কাস্টম টোকেন"
  },
--- a/app/_locales/ca/messages.json
+++ b/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"
  },
--- a/app/_locales/cs/messages.json
+++ b/app/_locales/cs/messages.json
@ -88,9 +88,6 @@
  "customGas": {
    "message": "Nastavit palivo"
  },
-  "customRPC": {
-    "message": "Vlastní RPC"
-  },
  "customToken": {
    "message": "Vlastní token"
  },
--- a/app/_locales/da/messages.json
+++ b/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"
  },
--- a/app/_locales/de/messages.json
+++ b/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"
  },
--- a/app/_locales/el/messages.json
+++ b/app/_locales/el/messages.json
@ -254,9 +254,6 @@
  "customGasSubTitle": {
    "message": "Η αύξηση των τελών μπορεί να μειώσει τους χρόνους επεξεργασίας, αλλά αυτό δεν είναι εγγυημένο."
  },
-  "customRPC": {
-    "message": "Προσαρμοσμένο RPC"
-  },
  "customToken": {
    "message": "Προσαρμοσμένο Token"
  },
--- a/app/_locales/en/messages.json
+++ b/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"
  },
--- a/app/_locales/es/messages.json
+++ b/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"
  },
--- a/app/_locales/es_419/messages.json
+++ b/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"
  },
--- a/app/_locales/et/messages.json
+++ b/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"
  },
--- a/app/_locales/fa/messages.json
+++ b/app/_locales/fa/messages.json
@ -257,9 +257,6 @@
  "customGasSubTitle": {
    "message": "اضافه نمودن فیس ممکن زمان پروسس را کاهش دهد، اما تضمین نمیشود."
  },
-  "customRPC": {
-    "message": "RPC رایج"
-  },
  "customToken": {
    "message": "رمزیاب دلخواه"
  },
--- a/app/_locales/fi/messages.json
+++ b/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"
  },
--- a/app/_locales/fr/messages.json
+++ b/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é"
  },
--- a/app/_locales/he/messages.json
+++ b/app/_locales/he/messages.json
@ -257,9 +257,6 @@
  "customGasSubTitle": {
    "message": "הגדלת התשלום עשויה לצמצם את זמני העיבוד, אבל אין ערובה לכך."
  },
-  "customRPC": {
-    "message": "RPC מותאם אישית"
-  },
  "customToken": {
    "message": "אסימון מותאם אישית"
  },
--- a/app/_locales/hi/messages.json
+++ b/app/_locales/hi/messages.json
@ -470,9 +470,6 @@
  "customGasSubTitle": {
    "message": "शुल्क बढ़ाने से प्रसंस्करण समय में कमी हो सकती है, लेकिन इसकी गारंटी नहीं होती है।"
  },
-  "customRPC": {
-    "message": "कस्टम RPC"
-  },
  "customSpendLimit": {
    "message": "कस्टम खर्च सीमा"
  },
--- a/app/_locales/hn/messages.json
+++ b/app/_locales/hn/messages.json
@ -70,9 +70,6 @@
  "customGas": {
    "message": "अनुकूलित करें गैस"
  },
-  "customRPC": {
-    "message": "कस्टम RPC"
-  },
  "decimal": {
    "message": "दशमलव परिशुद्धता"
  },
--- a/app/_locales/hr/messages.json
+++ b/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"
  },
--- a/app/_locales/ht/messages.json
+++ b/app/_locales/ht/messages.json
@ -136,9 +136,6 @@
  "customGas": {
    "message": "Koutim Gaz"
  },
-  "customRPC": {
-    "message": "Koutim RPC"
-  },
  "customToken": {
    "message": "Koutim Token"
  },
--- a/app/_locales/hu/messages.json
+++ b/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"
  },
--- a/app/_locales/id/messages.json
+++ b/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"
  },
--- a/app/_locales/it/messages.json
+++ b/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"
  },
--- a/app/_locales/ja/messages.json
+++ b/app/_locales/ja/messages.json
@ -470,9 +470,6 @@
  "customGasSubTitle": {
    "message": "手数料を増やすと処理時間は減少する可能性がありますが、減少しない場合もあります。"
  },
-  "customRPC": {
-    "message": "カスタム RPC"
-  },
  "customSpendLimit": {
    "message": "カスタム使用限度額"
  },
--- a/app/_locales/kn/messages.json
+++ b/app/_locales/kn/messages.json
@ -257,9 +257,6 @@
  "customGasSubTitle": {
    "message": "ಹೆಚ್ಚುತ್ತಿರುವ ಶುಲ್ಕವು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವ ಸಮಯದಲ್ಲಿ ಕಡಿಮೆಯಾಗುತ್ತದೆ ಆದರೆ ಇದು ಖಚಿತವಾಗಿಲ್ಲ."
  },
-  "customRPC": {
-    "message": "ಕಸ್ಟಮ್ RPC"
-  },
  "customToken": {
    "message": "ಕಸ್ಟಮ್ ಟೋಕನ್"
  },
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@ -470,9 +470,6 @@
  "customGasSubTitle": {
    "message": "수수료를 올리면 처리 시간이 단축되기도 하지만 항상 그렇지는 않습니다."
  },
-  "customRPC": {
-    "message": "맞춤형 RPC"
-  },
  "customSpendLimit": {
    "message": "맞춤형 지출 한도"
  },
--- a/app/_locales/lt/messages.json
+++ b/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"
  },
--- a/app/_locales/lv/messages.json
+++ b/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"
  },
--- a/app/_locales/ms/messages.json
+++ b/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"
  },
--- a/app/_locales/nl/messages.json
+++ b/app/_locales/nl/messages.json
@ -67,9 +67,6 @@
  "customGas": {
    "message": "Pas Gas aan"
  },
-  "customRPC": {
-    "message": "Aangepaste RPC"
-  },
  "decimal": {
    "message": "Decimalen van precisie"
  },
--- a/app/_locales/no/messages.json
+++ b/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 "
  },
--- a/app/_locales/ph/messages.json
+++ b/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"
  },
--- a/app/_locales/pl/messages.json
+++ b/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"
  },
--- a/app/_locales/pt/messages.json
+++ b/app/_locales/pt/messages.json
@ -70,9 +70,6 @@
  "customGas": {
    "message": "Customizar Gas"
  },
-  "customRPC": {
-    "message": "Customizar RPC"
-  },
  "decimal": {
    "message": "Precisão em Decimais"
  },
--- a/app/_locales/pt_BR/messages.json
+++ b/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"
  },
--- a/app/_locales/ro/messages.json
+++ b/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"
  },
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@ -470,9 +470,6 @@
  "customGasSubTitle": {
    "message": "Увеличение комиссии может сократить время обработки, но это не гарантируется."
  },
-  "customRPC": {
-    "message": "Пользовательский RPC"
-  },
  "customSpendLimit": {
    "message": "Пользовательский предел расходов"
  },
--- a/app/_locales/sk/messages.json
+++ b/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"
  },
--- a/app/_locales/sl/messages.json
+++ b/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"
  },
--- a/app/_locales/sr/messages.json
+++ b/app/_locales/sr/messages.json
@ -254,9 +254,6 @@
  "customGasSubTitle": {
    "message": "Povećanje naknade može smanjiti vreme obrade, ali to nije zagarantovano."
  },
-  "customRPC": {
-    "message": "Korisnički definisan RPC"
-  },
  "customToken": {
    "message": "Prilagođeni token"
  },
--- a/app/_locales/sv/messages.json
+++ b/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"
  },
--- a/app/_locales/sw/messages.json
+++ b/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"
  },
--- a/app/_locales/ta/messages.json
+++ b/app/_locales/ta/messages.json
@ -103,9 +103,6 @@
  "customGas": {
    "message": "எரிவாயுவைத் தனிப்பயனாக்குங்கள்"
  },
-  "customRPC": {
-    "message": "விருப்ப RPC ஐ"
-  },
  "customToken": {
    "message": "தனிப்பயன் டோக்கன்"
  },
--- a/app/_locales/th/messages.json
+++ b/app/_locales/th/messages.json
@ -109,9 +109,6 @@
  "customGasSubTitle": {
    "message": "การเพิ่มค่าธรรมเนียมอาจลดเวลาดำเนินการ แต่ก็ไม่แน่เสมอไป"
  },
-  "customRPC": {
-    "message": "กำหนดค่า RPC เอง"
-  },
  "decimal": {
    "message": "ตำแหน่งของทศนิยม"
  },
--- a/app/_locales/tl/messages.json
+++ b/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"
  },
--- a/app/_locales/tr/messages.json
+++ b/app/_locales/tr/messages.json
@ -88,9 +88,6 @@
  "customGas": {
    "message": "Gas'i özelleştir"
  },
-  "customRPC": {
-    "message": "Özel RPC"
-  },
  "customToken": {
    "message": "Özel Jeton"
  },
--- a/app/_locales/uk/messages.json
+++ b/app/_locales/uk/messages.json
@ -257,9 +257,6 @@
  "customGasSubTitle": {
    "message": "Збільшення комісії може призвести до зменшення часу обробки, але це не гарантується."
  },
-  "customRPC": {
-    "message": "Налаштувати RPC"
-  },
  "customToken": {
    "message": "Користувацький токен"
  },
--- a/app/_locales/vi/messages.json
+++ b/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"
  },
--- a/app/_locales/zh_CN/messages.json
+++ b/app/_locales/zh_CN/messages.json
@ -401,9 +401,6 @@
  "customGasSubTitle": {
    "message": "提升费用可能会缩短处理时间，但不保证绝对有效。"
  },
-  "customRPC": {
-    "message": "自定义 RPC"
-  },
  "customSpendLimit": {
    "message": "自定义消费限额"
  },
--- a/app/_locales/zh_TW/messages.json
+++ b/app/_locales/zh_TW/messages.json
@ -266,9 +266,6 @@
  "customGasSubTitle": {
    "message": "提升費用可能會加快處理時間，但不保證"
  },
-  "customRPC": {
-    "message": "自訂 RPC"
-  },
  "customToken": {
    "message": "自訂代幣"
  },
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@ -53,6 +53,7 @@ export default class PreferencesController {
      preferences: {
        autoLockTimeLimit: undefined,
        showFiatInTestnets: false,
+        showTestNetworks: false,
        useNativeCurrencyAsPrimaryCurrency: true,
        hideZeroBalanceTokens: false,
      },
--- a/app/scripts/first-time-state.js
+++ b/app/scripts/first-time-state.js
@ -10,15 +10,7 @@
 const initialState = {
  config: {},
  PreferencesController: {
-    frequentRpcListDetail: [
-      {
-        rpcUrl: 'http://localhost:8545',
-        chainId: '0x539',
-        ticker: 'ETH',
-        nickname: 'Localhost 8545',
-        rpcPrefs: {},
-      },
-    ],
+    frequentRpcListDetail: [],
  },
 };

--- a/shared/constants/network.js
+++ b/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(
--- a/test/e2e/tests/custom-rpc-history.spec.js
+++ b/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:
-            'This Chain ID is currently used by the Localhost 8545 network.',
+          text: 'This Chain ID is currently used by the localhost 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.clickElement(
-          '.add-network-form__footer button.btn-secondary',
-        );
+        await driver.findVisibleElement('.settings-page__content');

        const networkListItems = await driver.findClickableElements(
          '.networks-tab__networks-list-name',
--- a/test/e2e/tests/provider-events.spec.js
+++ b/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 switchedChainIdDiv.getText(), '0x3');
+        assert.equal(await switchedNetworkDiv.getText(), '1');
+        assert.equal(await switchedChainIdDiv.getText(), '0x1');
        assert.equal(
          await accountsDiv.getText(),
          '0x5cfe73b6021e818b776b421b1c4db2474086a7e1',
--- a/ui/components/app/dropdowns/network-dropdown.js
+++ b/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 {
-      provider: { rpcUrl: activeNetwork },
-      setSelectedSettingsRpcUrl,
-      history,
-    } = this.props;
+    const { shouldShowTestNetworks } = 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()}
-          onClick={() => {
-            if (getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN) {
-              history.push(ADD_NETWORK_ROUTE);
-            } else {
-              global.platform.openExtensionInBrowser(ADD_NETWORK_ROUTE);
-            }
-            setSelectedSettingsRpcUrl('');
-          }}
-          style={DROP_DOWN_MENU_ITEM_STYLE}
-        >
-          {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>
+
+        {shouldShowTestNetworks && (
+          <>
+            {this.renderNetworkEntry('ropsten')}
+            {this.renderNetworkEntry('kovan')}
+            {this.renderNetworkEntry('rinkeby')}
+            {this.renderNetworkEntry('goerli')}
+            {this.renderNetworkEntry('localhost')}
+          </>
+        )}
+
+        {this.renderAddCustomButton()}
      </Dropdown>
    );
  }
--- a/ui/components/app/dropdowns/network-dropdown.test.js
+++ b/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(() => {
-      wrapper = mountWithRouter(<NetworkDropdown store={store} />);
-    });
+    let testNetworkIndex = 1;
+
+    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', () => {
-      expect(wrapper.find(DropdownMenuItem)).toHaveLength(8);
+      testNetworkIndex = i;
+    };
+
+    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 customNetworkGray = 'ui-2';
-      expect(colorIndicator.prop('color')).toStrictEqual(customNetworkGray);
-      expect(colorIndicator.prop('borderColor')).toStrictEqual(
-        customNetworkGray,
+      const colorIndicator = wrapper
+        .find(ColorIndicator)
+        .at(testNetworkIndex + 4);
+      expect(colorIndicator.prop('color')).toStrictEqual('localhost');
+      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', () => {
-      expect(wrapper.find(DropdownMenuItem).at(6).text()).toStrictEqual(
-        '✓http://localhost:7545',
+    it('checks that Add Network button is rendered', () => {
+      expect(wrapper.find(Button).at(0).children().text()).toStrictEqual(
+        'addNetwork',
      );
    });
  });
--- a/ui/components/app/network-display/index.scss
+++ b/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%;
--- a/ui/css/design-system/colors.scss
+++ b/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,
 );
--- a/ui/css/itcss/components/network.scss
+++ b/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 {
--- a/ui/ducks/metamask/metamask.js
+++ b/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,
--- a/ui/helpers/constants/design-system.js
+++ b/ui/helpers/constants/design-system.js
@ -33,6 +33,7 @@ export const COLORS = {
  RINKEBY: 'rinkeby',
  GOERLI: 'goerli',
  TRANSPARENT: 'transparent',
+  LOCALHOST: 'localhost',
 };

 export const TYPOGRAPHY = {
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.js
+++ b/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()}
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.test.js
+++ b/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', () => {
-    const root = shallow(
+  let root;
+  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();
-    const root = shallow(
+    setAutoLockTimeLimitSpy = sinon.spy();
+    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);
+  });
 });
--- a/ui/pages/settings/advanced-tab/advanced-tab.container.js
+++ b/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));
    },
--- a/ui/pages/settings/advanced-tab/advanced-tab.stories.js
+++ b/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}
--- a/ui/pages/settings/networks-tab/networks-tab.component.js
+++ b/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>
--- a/ui/pages/settings/networks-tab/networks-tab.constants.js
+++ b/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 };
--- a/ui/selectors/selectors.js
+++ b/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);
--- a/ui/store/actions.js
+++ b/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);
 }