From b6673731e2367e119a5fee9a454dd40bd4968948 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Thu, 28 Oct 2021 23:31:05 +0400 Subject: [PATCH] Implement Network Switcher designs (#12260) * Show test networks toggle button in settings/advanced tab. Signed-off-by: Akintayo A. Olusegun * Apply toggle testnet settings and show/hide testnets when on/off Add localhost to testnet. Signed-off-by: Akintayo A. Olusegun * Lint fixes. Signed-off-by: Akintayo A. Olusegun * Show add network button Signed-off-by: Akintayo A. Olusegun * Open full screen when add network is called. Signed-off-by: Akintayo A. Olusegun * Show custonm rpc before testnet rpcs lint fixes. Signed-off-by: Akintayo A. Olusegun * Test cases for network dropdown. Signed-off-by: Akintayo A. Olusegun * Test cases for toggle test networks in advanced tab component. Signed-off-by: Akintayo A. Olusegun * Lint fixes. Signed-off-by: Akintayo A. Olusegun * Fix Locales. Signed-off-by: Akintayo A. Olusegun * E2E Tests: Custom RPC is now called Add Network Signed-off-by: Akintayo A. Olusegun * Lint fix Signed-off-by: Akintayo A. Olusegun * E2E: When Add Network button is clicked, wait for the full screen window to be visible Signed-off-by: Akintayo A. Olusegun * findVisibleElement should use a class. i.e start with a dot Signed-off-by: Akintayo A. Olusegun * 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 * Lint fixes Signed-off-by: Akintayo A. Olusegun * Fix tests for jest Signed-off-by: Akintayo A. Olusegun * Testnets are not being shown by default anymore, tests should use Mainnet instead. Signed-off-by: Akintayo A. Olusegun * Import Button from ui Change selector name to getShowTestnetworks Fix button to show full width Signed-off-by: Akintayo A. Olusegun * Fix e2e tests Signed-off-by: Akintayo A. Olusegun * Remove localhost from INFURA provider types. Signed-off-by: Akintayo A. Olusegun * Fix errors in Advanced Tab Component tests Signed-off-by: Akintayo A. Olusegun * Lint fixes Signed-off-by: Akintayo A. Olusegun * Fix unit tests for advanced tab component. Signed-off-by: Akintayo A. Olusegun * Remove deleted elements from e2e tests Signed-off-by: Akintayo A. Olusegun * Make sure all tests passed. Signed-off-by: Akintayo A. Olusegun * Lint fixes Signed-off-by: Akintayo A. Olusegun --- app/_locales/am/messages.json | 3 - app/_locales/ar/messages.json | 3 - app/_locales/bg/messages.json | 3 - app/_locales/bn/messages.json | 3 - app/_locales/ca/messages.json | 3 - app/_locales/cs/messages.json | 3 - app/_locales/da/messages.json | 3 - app/_locales/de/messages.json | 3 - app/_locales/el/messages.json | 3 - app/_locales/en/messages.json | 9 +- app/_locales/es/messages.json | 3 - app/_locales/es_419/messages.json | 3 - app/_locales/et/messages.json | 3 - app/_locales/fa/messages.json | 3 - app/_locales/fi/messages.json | 3 - app/_locales/fr/messages.json | 3 - app/_locales/he/messages.json | 3 - app/_locales/hi/messages.json | 3 - app/_locales/hn/messages.json | 3 - app/_locales/hr/messages.json | 3 - app/_locales/ht/messages.json | 3 - app/_locales/hu/messages.json | 3 - app/_locales/id/messages.json | 3 - app/_locales/it/messages.json | 3 - app/_locales/ja/messages.json | 3 - app/_locales/kn/messages.json | 3 - app/_locales/ko/messages.json | 3 - app/_locales/lt/messages.json | 3 - app/_locales/lv/messages.json | 3 - app/_locales/ms/messages.json | 3 - app/_locales/nl/messages.json | 3 - app/_locales/no/messages.json | 3 - app/_locales/ph/messages.json | 3 - app/_locales/pl/messages.json | 3 - app/_locales/pt/messages.json | 3 - app/_locales/pt_BR/messages.json | 3 - app/_locales/ro/messages.json | 3 - app/_locales/ru/messages.json | 3 - app/_locales/sk/messages.json | 3 - app/_locales/sl/messages.json | 3 - app/_locales/sr/messages.json | 3 - app/_locales/sv/messages.json | 3 - app/_locales/sw/messages.json | 3 - app/_locales/ta/messages.json | 3 - app/_locales/th/messages.json | 3 - app/_locales/tl/messages.json | 3 - app/_locales/tr/messages.json | 3 - app/_locales/uk/messages.json | 3 - app/_locales/vi/messages.json | 3 - app/_locales/zh_CN/messages.json | 3 - app/_locales/zh_TW/messages.json | 3 - app/scripts/controllers/preferences.js | 1 + app/scripts/first-time-state.js | 10 +- shared/constants/network.js | 9 ++ test/e2e/tests/custom-rpc-history.spec.js | 46 ++++--- test/e2e/tests/provider-events.spec.js | 10 +- .../app/dropdowns/network-dropdown.js | 102 +++++++-------- .../app/dropdowns/network-dropdown.test.js | 119 +++++++++++++++--- ui/components/app/network-display/index.scss | 4 + ui/css/design-system/colors.scss | 2 + ui/css/itcss/components/network.scss | 4 + ui/ducks/metamask/metamask.js | 1 + ui/helpers/constants/design-system.js | 1 + .../advanced-tab/advanced-tab.component.js | 32 +++++ .../advanced-tab.component.test.js | 31 +++-- .../advanced-tab/advanced-tab.container.js | 11 +- .../advanced-tab/advanced-tab.stories.js | 1 + .../networks-tab/networks-tab.component.js | 1 + .../networks-tab/networks-tab.constants.js | 12 ++ ui/selectors/selectors.js | 5 + ui/store/actions.js | 4 + 71 files changed, 308 insertions(+), 257 deletions(-) diff --git a/app/_locales/am/messages.json b/app/_locales/am/messages.json index e45655ca1..5967d2d37 100644 --- a/app/_locales/am/messages.json +++ b/app/_locales/am/messages.json @@ -257,9 +257,6 @@ "customGasSubTitle": { "message": "ክፍያ መጨመር የመከወኛ ጊዜን ሊቀንስ ቢችልም ይህ ግን ዋስትና የለውም።" }, - "customRPC": { - "message": "ብጁ RPC" - }, "customToken": { "message": "ብጁ ተለዋጭ ስም" }, diff --git a/app/_locales/ar/messages.json b/app/_locales/ar/messages.json index 9c99dda68..8aed734e3 100644 --- a/app/_locales/ar/messages.json +++ b/app/_locales/ar/messages.json @@ -257,9 +257,6 @@ "customGasSubTitle": { "message": "قد تؤدي زيادة الرسوم إلى تقليل أزمنة المعالجة، ولكن ذلك غير مضمون." }, - "customRPC": { - "message": "آر بي سي مخصص" - }, "customToken": { "message": "عملة رمزية مخصصة" }, diff --git a/app/_locales/bg/messages.json b/app/_locales/bg/messages.json index 2b3d88f6a..c4e096272 100644 --- a/app/_locales/bg/messages.json +++ b/app/_locales/bg/messages.json @@ -257,9 +257,6 @@ "customGasSubTitle": { "message": "Увеличаването на таксата може да намали времето за обработка, но това не е гарантирано." }, - "customRPC": { - "message": "RPC по избор" - }, "customToken": { "message": "Персонализиран маркер" }, diff --git a/app/_locales/bn/messages.json b/app/_locales/bn/messages.json index 0cc36e43d..a6f8d1bbf 100644 --- a/app/_locales/bn/messages.json +++ b/app/_locales/bn/messages.json @@ -257,9 +257,6 @@ "customGasSubTitle": { "message": "ফী বৃদ্ধি করা প্রক্রিয়াকরণের সময় কমাতে পারে, কিন্তু সেটির নিশ্চয়তা দেওয়া হয় না।" }, - "customRPC": { - "message": "কাস্টম RPC" - }, "customToken": { "message": "কাস্টম টোকেন" }, diff --git a/app/_locales/ca/messages.json b/app/_locales/ca/messages.json index 2770e8e0a..e27d823f6 100644 --- 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" }, diff --git a/app/_locales/cs/messages.json b/app/_locales/cs/messages.json index 8a9be7f3a..910a151e6 100644 --- 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" }, diff --git a/app/_locales/da/messages.json b/app/_locales/da/messages.json index 45e4a1dc7..ab0aa0bdf 100644 --- 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" }, diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index 708ca317e..556d416ee 100644 --- 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" }, diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json index 9bdedf733..5cd664263 100644 --- a/app/_locales/el/messages.json +++ b/app/_locales/el/messages.json @@ -254,9 +254,6 @@ "customGasSubTitle": { "message": "Η αύξηση των τελών μπορεί να μειώσει τους χρόνους επεξεργασίας, αλλά αυτό δεν είναι εγγυημένο." }, - "customRPC": { - "message": "Προσαρμοσμένο RPC" - }, "customToken": { "message": "Προσαρμοσμένο Token" }, diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 420fcfd34..84121790f 100644 --- 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" }, diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index 1755531c6..8f1f68bb8 100644 --- 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" }, diff --git a/app/_locales/es_419/messages.json b/app/_locales/es_419/messages.json index 1755531c6..8f1f68bb8 100644 --- 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" }, diff --git a/app/_locales/et/messages.json b/app/_locales/et/messages.json index 776ca4870..ae780ebf4 100644 --- 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" }, diff --git a/app/_locales/fa/messages.json b/app/_locales/fa/messages.json index aa50426af..d9674bb3f 100644 --- a/app/_locales/fa/messages.json +++ b/app/_locales/fa/messages.json @@ -257,9 +257,6 @@ "customGasSubTitle": { "message": "اضافه نمودن فیس ممکن زمان پروسس را کاهش دهد، اما تضمین نمیشود." }, - "customRPC": { - "message": "RPC رایج" - }, "customToken": { "message": "رمزیاب دلخواه" }, diff --git a/app/_locales/fi/messages.json b/app/_locales/fi/messages.json index c2218c576..bec35fea5 100644 --- 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" }, diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index 5deda0758..b6f80f696 100644 --- 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é" }, diff --git a/app/_locales/he/messages.json b/app/_locales/he/messages.json index d1be4f4b6..f03de7c0a 100644 --- a/app/_locales/he/messages.json +++ b/app/_locales/he/messages.json @@ -257,9 +257,6 @@ "customGasSubTitle": { "message": "הגדלת התשלום עשויה לצמצם את זמני העיבוד, אבל אין ערובה לכך." }, - "customRPC": { - "message": "RPC מותאם אישית" - }, "customToken": { "message": "אסימון מותאם אישית" }, diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index 9f2105f99..ab50c5328 100644 --- a/app/_locales/hi/messages.json +++ b/app/_locales/hi/messages.json @@ -470,9 +470,6 @@ "customGasSubTitle": { "message": "शुल्क बढ़ाने से प्रसंस्करण समय में कमी हो सकती है, लेकिन इसकी गारंटी नहीं होती है।" }, - "customRPC": { - "message": "कस्टम RPC" - }, "customSpendLimit": { "message": "कस्टम खर्च सीमा" }, diff --git a/app/_locales/hn/messages.json b/app/_locales/hn/messages.json index 73056bb06..3a8f7c19b 100644 --- a/app/_locales/hn/messages.json +++ b/app/_locales/hn/messages.json @@ -70,9 +70,6 @@ "customGas": { "message": "अनुकूलित करें गैस" }, - "customRPC": { - "message": "कस्टम RPC" - }, "decimal": { "message": "दशमलव परिशुद्धता" }, diff --git a/app/_locales/hr/messages.json b/app/_locales/hr/messages.json index 4c85110f8..b41300166 100644 --- 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" }, diff --git a/app/_locales/ht/messages.json b/app/_locales/ht/messages.json index dc3b8b90c..d37b2913a 100644 --- 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" }, diff --git a/app/_locales/hu/messages.json b/app/_locales/hu/messages.json index b7e994c21..b9c06f8c9 100644 --- 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" }, diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json index b20bcacc4..8bca3cece 100644 --- 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" }, diff --git a/app/_locales/it/messages.json b/app/_locales/it/messages.json index af85d3b27..e04653899 100644 --- 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" }, diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index b78dbb3a7..8d9c10434 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -470,9 +470,6 @@ "customGasSubTitle": { "message": "手数料を増やすと処理時間は減少する可能性がありますが、減少しない場合もあります。" }, - "customRPC": { - "message": "カスタム RPC" - }, "customSpendLimit": { "message": "カスタム使用限度額" }, diff --git a/app/_locales/kn/messages.json b/app/_locales/kn/messages.json index 67eea5804..967e026c4 100644 --- a/app/_locales/kn/messages.json +++ b/app/_locales/kn/messages.json @@ -257,9 +257,6 @@ "customGasSubTitle": { "message": "ಹೆಚ್ಚುತ್ತಿರುವ ಶುಲ್ಕವು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವ ಸಮಯದಲ್ಲಿ ಕಡಿಮೆಯಾಗುತ್ತದೆ ಆದರೆ ಇದು ಖಚಿತವಾಗಿಲ್ಲ." }, - "customRPC": { - "message": "ಕಸ್ಟಮ್ RPC" - }, "customToken": { "message": "ಕಸ್ಟಮ್ ಟೋಕನ್" }, diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index c6b881117..ac4b5c7ab 100644 --- a/app/_locales/ko/messages.json +++ b/app/_locales/ko/messages.json @@ -470,9 +470,6 @@ "customGasSubTitle": { "message": "수수료를 올리면 처리 시간이 단축되기도 하지만 항상 그렇지는 않습니다." }, - "customRPC": { - "message": "맞춤형 RPC" - }, "customSpendLimit": { "message": "맞춤형 지출 한도" }, diff --git a/app/_locales/lt/messages.json b/app/_locales/lt/messages.json index dc4286cc2..15eb4ec68 100644 --- 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" }, diff --git a/app/_locales/lv/messages.json b/app/_locales/lv/messages.json index 8d4f192ab..d82d3b5c0 100644 --- 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" }, diff --git a/app/_locales/ms/messages.json b/app/_locales/ms/messages.json index c52249eaa..489d64467 100644 --- 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" }, diff --git a/app/_locales/nl/messages.json b/app/_locales/nl/messages.json index f5daf1b8b..c48b9c041 100644 --- 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" }, diff --git a/app/_locales/no/messages.json b/app/_locales/no/messages.json index c65775240..799615239 100644 --- 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 " }, diff --git a/app/_locales/ph/messages.json b/app/_locales/ph/messages.json index cedb35598..2b5843d0a 100644 --- 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" }, diff --git a/app/_locales/pl/messages.json b/app/_locales/pl/messages.json index 23c4017ab..f6f26dcb6 100644 --- 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" }, diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json index 283ebdfb2..5e52a844a 100644 --- 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" }, diff --git a/app/_locales/pt_BR/messages.json b/app/_locales/pt_BR/messages.json index cfb0592ac..a2a193242 100644 --- 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" }, diff --git a/app/_locales/ro/messages.json b/app/_locales/ro/messages.json index 18f79a2ed..746a06bcb 100644 --- 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" }, diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index e838d57e2..92aa6dcf9 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -470,9 +470,6 @@ "customGasSubTitle": { "message": "Увеличение комиссии может сократить время обработки, но это не гарантируется." }, - "customRPC": { - "message": "Пользовательский RPC" - }, "customSpendLimit": { "message": "Пользовательский предел расходов" }, diff --git a/app/_locales/sk/messages.json b/app/_locales/sk/messages.json index bbedd7cf7..af11a83bb 100644 --- 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" }, diff --git a/app/_locales/sl/messages.json b/app/_locales/sl/messages.json index 560ca435c..cf444ae95 100644 --- 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" }, diff --git a/app/_locales/sr/messages.json b/app/_locales/sr/messages.json index 431169969..a6d99e3ad 100644 --- a/app/_locales/sr/messages.json +++ b/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" }, diff --git a/app/_locales/sv/messages.json b/app/_locales/sv/messages.json index db321b783..1d600425a 100644 --- 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" }, diff --git a/app/_locales/sw/messages.json b/app/_locales/sw/messages.json index dc24573fe..6c5a43386 100644 --- 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" }, diff --git a/app/_locales/ta/messages.json b/app/_locales/ta/messages.json index f754b0532..6b94d6bd5 100644 --- a/app/_locales/ta/messages.json +++ b/app/_locales/ta/messages.json @@ -103,9 +103,6 @@ "customGas": { "message": "எரிவாயுவைத் தனிப்பயனாக்குங்கள்" }, - "customRPC": { - "message": "விருப்ப RPC ஐ" - }, "customToken": { "message": "தனிப்பயன் டோக்கன்" }, diff --git a/app/_locales/th/messages.json b/app/_locales/th/messages.json index 43e90d04c..166b36fed 100644 --- a/app/_locales/th/messages.json +++ b/app/_locales/th/messages.json @@ -109,9 +109,6 @@ "customGasSubTitle": { "message": "การเพิ่มค่าธรรมเนียมอาจลดเวลาดำเนินการ แต่ก็ไม่แน่เสมอไป" }, - "customRPC": { - "message": "กำหนดค่า RPC เอง" - }, "decimal": { "message": "ตำแหน่งของทศนิยม" }, diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index a92b420e1..24f8fbf84 100644 --- 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" }, diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index 977162984..5a4bb29be 100644 --- 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" }, diff --git a/app/_locales/uk/messages.json b/app/_locales/uk/messages.json index 51321e3f9..583776398 100644 --- a/app/_locales/uk/messages.json +++ b/app/_locales/uk/messages.json @@ -257,9 +257,6 @@ "customGasSubTitle": { "message": "Збільшення комісії може призвести до зменшення часу обробки, але це не гарантується." }, - "customRPC": { - "message": "Налаштувати RPC" - }, "customToken": { "message": "Користувацький токен" }, diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index a572f30fc..685072a32 100644 --- 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" }, diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index 6ea8d3ad6..e75d509ab 100644 --- 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": "自定义消费限额" }, diff --git a/app/_locales/zh_TW/messages.json b/app/_locales/zh_TW/messages.json index 4ffa228b6..95561c0b5 100644 --- 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": "自訂代幣" }, diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js index 41630cce3..d67d4efe5 100644 --- 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, }, diff --git a/app/scripts/first-time-state.js b/app/scripts/first-time-state.js index 857921889..34969b58f 100644 --- 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: [], }, }; diff --git a/shared/constants/network.js b/shared/constants/network.js index 3087a68e0..a85f544a7 100644 --- 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( diff --git a/test/e2e/tests/custom-rpc-history.spec.js b/test/e2e/tests/custom-rpc-history.spec.js index 3e9f79e3f..71db787a9 100644 --- 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', diff --git a/test/e2e/tests/provider-events.spec.js b/test/e2e/tests/provider-events.spec.js index effe3e717..2f5f03b31 100644 --- 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', diff --git a/ui/components/app/dropdowns/network-dropdown.js b/ui/components/app/dropdowns/network-dropdown.js index 01c1b3fc1..87512fd6c 100644 --- 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 ( + + ); + } + 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 { {this.renderNetworkEntry('mainnet')} - {this.renderNetworkEntry('ropsten')} - {this.renderNetworkEntry('kovan')} - {this.renderNetworkEntry('rinkeby')} - {this.renderNetworkEntry('goerli')} {this.renderCustomRpcList(rpcListDetail, this.props.provider)} - 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' ? ( - - ) : ( -
✓
- )} - - - {this.context.t('customRPC')} - - + + {shouldShowTestNetworks && ( + <> + {this.renderNetworkEntry('ropsten')} + {this.renderNetworkEntry('kovan')} + {this.renderNetworkEntry('rinkeby')} + {this.renderNetworkEntry('goerli')} + {this.renderNetworkEntry('localhost')} + + )} + + {this.renderAddCustomButton()} ); } diff --git a/ui/components/app/dropdowns/network-dropdown.test.js b/ui/components/app/dropdowns/network-dropdown.test.js index f68fddd93..263460b85 100644 --- 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(); - }); + 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(); + 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(); + }); + + 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', ); }); }); diff --git a/ui/components/app/network-display/index.scss b/ui/components/app/network-display/index.scss index 51ce5bcdc..9e0a0df9b 100644 --- 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%; diff --git a/ui/css/design-system/colors.scss b/ui/css/design-system/colors.scss index b447315f8..264af073c 100644 --- 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, ); diff --git a/ui/css/itcss/components/network.scss b/ui/css/itcss/components/network.scss index 31137ac43..8f0130956 100644 --- 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 { diff --git a/ui/ducks/metamask/metamask.js b/ui/ducks/metamask/metamask.js index 452acbd60..9578826e1 100644 --- 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, diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js index 2f3b4bdd9..c82b168be 100644 --- 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 = { diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js index b3b70aa79..b83b6956d 100644 --- 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 ( +
+
+ {t('showTestnetNetworks')} +
+ {t('showTestnetNetworksDescription')} +
+
+
+
+ setShowTestNetworks(!value)} + offLabel={t('off')} + onLabel={t('on')} + /> +
+
+
+ ); + } + 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()} diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.test.js b/ui/pages/settings/advanced-tab/advanced-tab.component.test.js index e403bf4aa..0a2c254df 100644 --- 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( 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( { 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); + }); }); diff --git a/ui/pages/settings/advanced-tab/advanced-tab.container.js b/ui/pages/settings/advanced-tab/advanced-tab.container.js index 434ca2444..a73d93092 100644 --- 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)); }, diff --git a/ui/pages/settings/advanced-tab/advanced-tab.stories.js b/ui/pages/settings/advanced-tab/advanced-tab.stories.js index 3ba345ead..804469ce9 100644 --- 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 = () => { undefined} setShowFiatConversionOnTestnetsPreference={() => undefined} + setShowTestNetworks={() => undefined} setThreeBoxSyncingPermission={() => undefined} setIpfsGateway={() => undefined} setLedgerLivePreference={() => undefined} diff --git a/ui/pages/settings/networks-tab/networks-tab.component.js b/ui/pages/settings/networks-tab/networks-tab.component.js index e786d3fc6..6a9c9bc17 100644 --- 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')} diff --git a/ui/pages/settings/networks-tab/networks-tab.constants.js b/ui/pages/settings/networks-tab/networks-tab.constants.js index 26a57c7bd..d5ad83541 100644 --- 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 }; diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index f506ec20c..cfbd8e246 100644 --- 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); diff --git a/ui/store/actions.js b/ui/store/actions.js index 03c23a317..f8a0b7717 100644 --- 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); }