Merge remote-tracking branch 'origin/develop' into sync-master

* origin/develop:
  Move add contact button in fullscreen/expanded view lower. (#9883)
  Remove CoinSwitch from Deposit screen(#9869)
  Consolidate notification UI openers (#9885)
  Prevent jump when hovering over asset list items
  @metamask/controllers@4.2.0 (#9849)
  Properly detect U2F errors in hardware wallet
  Fix malformed PropType declaraton (#9876)
  Fix broken LoadingScreen PropType declaration (#9877)
  Revert "Add custom hd path option (#9367)" (#9875)
  Update fee card designs to show savings and MM fee (#9629)
  Make editable actoin item a button, autofocus input contents
  Provide alternative text for images where appropriate

app/_locales/am/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask ካሊፎርኒያ ውስጥ ተዘጋጅቶ የተገነባ ነው።"
   },
-  "buyCoinSwitch": {
-    "message": "በ CoinSwitch ላይ ይግዙ"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch ከ300 በላይ ክሪፕቶ ከረንሲዎችን በጥሩ ዋጋ ለመመንዘር ባለ አንድ ማቆሚያ መዳረሻ ነው።"
-  },
   "buyWithWyre": {
     "message": "ETH በ Wyre ይግዙ"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "ከ Ropsten የሙከራ አውታረ መረብ ጋር በመገናኘት ላይ"
   },
-  "continueToCoinSwitch": {
-    "message": "ወደ CoinSwitch ይቀጥሉ"
-  },
   "continueToWyre": {
     "message": "ወደ Wyre ይቀጥሉ"
   },

app/_locales/ar/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "تم تصميم وإنشاء MetaMask في ولاية كاليفورنيا."
   },
-  "buyCoinSwitch": {
-    "message": "قم بالشراء على CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch هي الوجهة الوحيدة لتبادل أكثر من 300 عملة مشفرة بأفضل سعر."
-  },
   "buyWithWyre": {
     "message": "قم بشراء عملة إيثير بواسطة Wyre"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "جارِ الاتصال بشبكة اختبار Ropsten "
   },
-  "continueToCoinSwitch": {
-    "message": "المتابعة إلى CoinSwitch"
-  },
   "continueToWyre": {
     "message": "الاستمرار إلى Wyre"
   },

app/_locales/bg/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask е проектиран и създаден в Калифорния."
   },
-  "buyCoinSwitch": {
-    "message": "Купете на CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch е дестинацията за еднократна размяна, с цел да обменя повече от 300 криптовалути с най-добър курс."
-  },
   "buyWithWyre": {
     "message": "Купете ETH с Wyre"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "Свързване с тестова мрежа Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "Продължете към CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Продължете към Wyre"
   },

app/_locales/bn/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask ক্যালিফোর্নিয়াতে ডিজাইন করা এবং নির্মিত।"
   },
-  "buyCoinSwitch": {
-    "message": "CoinSwitch এ ক্রয় করুন"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch হল 300রও বেশি ক্রিপ্টোকারেন্সি সর্বোত্তম হারে বিনময় করার সবথেকে ভালো স্থান।"
-  },
   "buyWithWyre": {
     "message": "Wyre দিয়ে ETH ক্রয় করুন"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "রপস্টেন টেস্ট নেটওয়ার্কের সাথে সংযোগ করছে"
   },
-  "continueToCoinSwitch": {
-    "message": "CoinSwitch এ অবিরত থাকুন"
-  },
   "continueToWyre": {
     "message": "Wyre এ অবিরত রাখুন"
   },

app/_locales/ca/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask ha estat dissenyat i desenvolupat a Califòrnia."
   },
-  "buyCoinSwitch": {
-    "message": "Comprar a CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch és la destinació número 1 per a canviar més de 300 criptomonedes al millor preu."
-  },
   "buyWithWyre": {
     "message": "Compra ETH amb Wyre"
   },
@@ -221,9 +215,6 @@
   "connectingToRopsten": {
     "message": "Connectant a la xarxa de test Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "Continua a CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Continua a Wyre"
   },

app/_locales/cs/messages.json

@@ -49,12 +49,6 @@
   "builtInCalifornia": {
     "message": "MetaMask je navržen a vytvořen v Kalifornii."
   },
-  "buyCoinSwitch": {
-    "message": "Nákup na CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch je jediným místem, kde můžete vyměňovat více než 300 kryptocurrencí za nejlepší cenu."
-  },
   "cancel": {
     "message": "Zrušit"
   },
@@ -79,9 +73,6 @@
   "connectingToRopsten": {
     "message": "Připojuji se k Ropsten Test Network"
   },
-  "continueToCoinSwitch": {
-    "message": "Přejít na CoinSwitch"
-  },
   "contractDeployment": {
     "message": "Nasazení kontraktu"
   },

app/_locales/da/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask er designet og bygget i Californien."
   },
-  "buyCoinSwitch": {
-    "message": "Køb på CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch er den direkte destination for veksling af mere end 300 kryptovalutaer til den bedste sats."
-  },
   "buyWithWyre": {
     "message": "Køb ETH med Wyre"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "Forbinder til Ropsten-testnetværk"
   },
-  "continueToCoinSwitch": {
-    "message": "Fortsæt til CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Fortsæt til Wyre"
   },

app/_locales/de/messages.json

@@ -143,12 +143,6 @@
   "builtInCalifornia": {
     "message": "MetaMask wurde in Kalifornien entwickelt und gebaut."
   },
-  "buyCoinSwitch": {
-    "message": "Auf CoinSwitch kaufen"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch ist die One-Stop-Destination, um mehr als 300 Kryptowährungen zum besten Preis zu tauschen."
-  },
   "buyWithWyre": {
     "message": "ETH mit Wyre kaufen"
   },
@@ -215,9 +209,6 @@
   "connectingToRopsten": {
     "message": " Verbinde zum Ropsten Testnetzwerk"
   },
-  "continueToCoinSwitch": {
-    "message": "Zu CoinSwitch fortfahren"
-  },
   "continueToWyre": {
     "message": "Weiter zu Wyre"
   },

app/_locales/el/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "Το MetaMask έχει σχεδιαστεί και αναπτυχθεί στην Καλιφόρνια."
   },
-  "buyCoinSwitch": {
-    "message": "Αγοράστε στο  CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "Το CoinSwitch είναι ο προορισμός μιας στάσης για ανταλλαγή σε περισσότερα από 300 κρυπτονομίσματα στην καλύτερη ισοτιμία."
-  },
   "buyWithWyre": {
     "message": "Αγοράστε ETH με το Wyre"
   },
@@ -221,9 +215,6 @@
   "connectingToRopsten": {
     "message": "Σύνδεση με το Δίκτυο Δοκιμών Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "Συνέχεια με CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Συνεχίστε στο Wyre"
   },

app/_locales/en/messages.json

@@ -43,6 +43,9 @@
   "activityLog": {
     "message": "activity log"
   },
+  "addAccount": {
+    "message": "Add an account"
+  },
   "addAcquiredTokens": {
     "message": "Add the tokens you've acquired using MetaMask"
   },
@@ -221,12 +224,6 @@
   "buy": {
     "message": "Buy"
   },
-  "buyCoinSwitch": {
-    "message": "Buy on CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch is the one-stop destination to exchange more than 300 cryptocurrencies at the best rate."
-  },
   "buyWithWyre": {
     "message": "Buy ETH with Wyre"
   },
@@ -361,9 +358,6 @@
   "contactsSettingsDescription": {
     "message": "Add, edit, remove, and manage your contacts"
   },
-  "continueToCoinSwitch": {
-    "message": "Continue to CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Continue to Wyre"
   },
@@ -1358,6 +1352,9 @@
   "scanQrCode": {
     "message": "Scan QR Code"
   },
+  "scrollDown": {
+    "message": "Scroll down"
+  },
   "search": {
     "message": "Search"
   },
@@ -1620,6 +1617,9 @@
     "message": "You need $1 more $2 to complete this swap",
     "description": "Tells the user how many more of a given token they need for a specific swap. $1 is an amount of tokens and $2 is the token symbol."
   },
+  "swapBetterQuoteAvailable": {
+    "message": "A better quote is available"
+  },
   "swapBuildQuotePlaceHolderText": {
     "message": "No tokens available matching $1",
     "description": "Tells the user that a given search string does not match any tokens in our token lists. $1 can be any string of text"
@@ -1726,8 +1726,8 @@
     "message": "We find the best price from the top liquidity sources, every time. A fee of $1% is automatically factored into each quote, which supports ongoing development to make MetaMask even better.",
     "description": "Provides information about the fee that metamask takes for swaps. $1 is a decimal number."
   },
-  "swapNQuotesAvailable": {
-    "message": "$1 quotes available",
+  "swapNQuotes": {
+    "message": "$1 quotes",
     "description": "$1 is the number of quotes that the user can select from when opening the list of quotes on the 'view quote' screen"
   },
   "swapNetworkFeeSummary": {
@@ -1788,6 +1788,10 @@
   "swapRequestForQuotation": {
     "message": "Request for quotation"
   },
+  "swapSaving": {
+    "message": "Saving $1 $2",
+    "description": "Tells the user their average savings for the selected best quote. $1 is replaced by a tilde sign, to shown approximation. $2 is replaced by the approximate amount of money the user will save, in fiat"
+  },
   "swapSearchForAToken": {
     "message": "Search for a token"
   },
@@ -1841,6 +1845,9 @@
   "swapUnknown": {
     "message": "Unknown"
   },
+  "swapUsingBestQuote": {
+    "message": "Using the best quote"
+  },
   "swapViewToken": {
     "message": "View $1"
   },

app/_locales/es/messages.json

@@ -127,12 +127,6 @@
   "builtInCalifornia": {
     "message": "MetaMask fue diseñado y construido en California"
   },
-  "buyCoinSwitch": {
-    "message": "Comprar en CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch es el destino de una sola parada para intercambiar más de 300 criptomonedas al mejor precio."
-  },
   "cancel": {
     "message": "Cancelar"
   },
@@ -193,9 +187,6 @@
   "connectingToRopsten": {
     "message": "Conectando a la red de test Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "Continuar a CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Continuar a Wyre"
   },

app/_locales/es_419/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask se diseñó y creó en California."
   },
-  "buyCoinSwitch": {
-    "message": "Comprar en CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch es un destino integral para intercambiar más de 300 tipos de criptomonedas con la mejor tasa."
-  },
   "buyWithWyre": {
     "message": "Comprar ETH con Wyre"
   },
@@ -221,9 +215,6 @@
   "connectingToRopsten": {
     "message": "Conexión con la red de prueba Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "Continuar a CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Continuar a Wyre"
   },

app/_locales/et/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask on projekteeritud ja loodud Californias."
   },
-  "buyCoinSwitch": {
-    "message": "Osta CoinSwitchil"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch on ühe akna sihtpunkt enama kui 300 krüptoraha vahetamiseks parima hinnaga."
-  },
   "buyWithWyre": {
     "message": "Ostke ETH-d Wyre'iga"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "Ühendamine Ropsteni testvõrguga"
   },
-  "continueToCoinSwitch": {
-    "message": "Avage ConSwitch"
-  },
   "continueToWyre": {
     "message": "Ava Wyre"
   },

app/_locales/fa/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask در کالیفورنیا طراحی و ساخته شده است."
   },
-  "buyCoinSwitch": {
-    "message": "خرید بر اساس CoinSwitch "
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch یک مقصد یک-ایستگاه است تا بیش از 300 رمز ارز را در بهترین نرخ مبادله نماید."
-  },
   "buyWithWyre": {
     "message": "ETH را توسط Wyre خریداری نمایید"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "در حال اتصال به شبکه آزمایشی Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "ادامه به CoinSwitch"
-  },
   "continueToWyre": {
     "message": "ادامه به Wyre"
   },

app/_locales/fi/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask on suunniteltu ja koottu Kaliforniassa."
   },
-  "buyCoinSwitch": {
-    "message": "Osta CoinSwitchissa"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch on yhden pysähdyksen kohde yli 300 kryptovaluutan vaihtoon parhailla kursseilla."
-  },
   "buyWithWyre": {
     "message": "Osta ETH:ta Wyrella"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "Yhdistetään Ropstenin koeverkkoon"
   },
-  "continueToCoinSwitch": {
-    "message": "Jatka CoinSwitchiin"
-  },
   "continueToWyre": {
     "message": "Jatka Wyreen"
   },

app/_locales/fil/messages.json

@@ -131,12 +131,6 @@
   "builtInCalifornia": {
     "message": "Ang MetaMask ay dinisenyo at binuo sa California."
   },
-  "buyCoinSwitch": {
-    "message": "Bilhin sa CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "Ang CoinSwitch ay ang one-stop na destinasyon para magpapalit ng mahigit sa 300 cryptocurrency sa pinakamababang halaga."
-  },
   "buyWithWyre": {
     "message": "Bumili ng ETH gamit ang Wyre"
   },
@@ -203,9 +197,6 @@
   "connectingToRopsten": {
     "message": "Kumokonekta sa Ropsten Test Network"
   },
-  "continueToCoinSwitch": {
-    "message": "Magpatuloy sa CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Magpatuloy sa Wyre"
   },

app/_locales/fr/messages.json

@@ -140,12 +140,6 @@
   "builtInCalifornia": {
     "message": "MetaMask est designé et developpé en Californie."
   },
-  "buyCoinSwitch": {
-    "message": "Acheter sur CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch est la destination unique pour échanger plus de 300 crypto-devises au meilleur taux."
-  },
   "buyWithWyre": {
     "message": "Acheter ETH avec Wyre"
   },
@@ -215,9 +209,6 @@
   "connectingToRopsten": {
     "message": "Connexion au réseau de test Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "Continuer vers CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Continuer vers Wyre"
   },

app/_locales/he/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask תוכנן ונבנה בקליפורניה."
   },
-  "buyCoinSwitch": {
-    "message": "רכישה ב-CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch הוא היעד עם כלל האפשרויות להחלפת יותר מ-300 מטבעות קריפטו בשער הטוב ביותר."
-  },
   "buyWithWyre": {
     "message": "רכישת את'ר עם Wyre"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "מתחבר אל רשת בדיקה Ropsten "
   },
-  "continueToCoinSwitch": {
-    "message": "המשך אל CoinSwitch"
-  },
   "continueToWyre": {
     "message": "המשך ל-Wyre"
   },

app/_locales/hi/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "मेटामास्क का डिजाइन और निर्माण कैलिफोर्निया में किया गया है।"
   },
-  "buyCoinSwitch": {
-    "message": "CoinSwitch पर खरीदें"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "300 से अधिक क्रिप्टोकरेंसी को सबसे अच्छी दर पर एक्सचेंज करने के लिए CoinSwitch सर्वोत्तम स्थल है।"
-  },
   "buyWithWyre": {
     "message": "Wyre से ETH खरीदें"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "रोपस्टेन टेस्ट नेटवर्क से कनेक्ट करना"
   },
-  "continueToCoinSwitch": {
-    "message": "कॉइनस्विच पर जारी रखें "
-  },
   "continueToWyre": {
     "message": "Wyre को जारी रखें"
   },

app/_locales/hn/messages.json

@@ -46,12 +46,6 @@
   "builtInCalifornia": {
     "message": "मेटामास्क कैलिफ़ोर्निया में डिज़ाइन और बनाया गया है।"
   },
-  "buyCoinSwitch": {
-    "message": "कॉइनस्विच पर खरीदें"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "कॉइनस्विच 300 से अधिक क्रिप्टोक्रांसियों को सर्वोत्तम दर पर विनिमय करने का एक-स्टॉप गंतव्य है।"
-  },
   "cancel": {
     "message": "रद्द करें"
   },
@@ -61,9 +55,6 @@
   "confirmPassword": {
     "message": "पासवर्ड की पुष्टि करें"
   },
-  "continueToCoinSwitch": {
-    "message": "कॉइनस्विच को ब्हेजना जारी रखें"
-  },
   "contractDeployment": {
     "message": "अनुबंध परिनियोजन व तैनाती"
   },

app/_locales/hr/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask je osmišljen i izrađen u Kaliforniji."
   },
-  "buyCoinSwitch": {
-    "message": "Kupujte na usluzi CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "Usluga CoinSwitch predstavlja mjesto stalne razmjene više od 300 kriptovaluta po najboljim tečajevima."
-  },
   "buyWithWyre": {
     "message": "Kupi ETH Wyerom"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "Povezivanje na testnu mrežu Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "Nastavi na uslugu CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Nastavi na uslugu Wyre"
   },

app/_locales/ht/messages.json

@@ -76,12 +76,6 @@
   "builtInCalifornia": {
     "message": "MetaMask fèt e bati nan California."
   },
-  "buyCoinSwitch": {
-    "message": "Achte sou CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch se destinasyon nan yon sèl-Stop nan echanj plis pase 300 kriptoksèr nan pousantaj la pi byen."
-  },
   "cancel": {
     "message": "Anile"
   },
@@ -121,9 +115,6 @@
   "connectingToRopsten": {
     "message": "Konekte ak Ropsten Tès Rezo a"
   },
-  "continueToCoinSwitch": {
-    "message": "Kontinye CoinSwitch"
-  },
   "contractDeployment": {
     "message": "Kontra Deplwaman"
   },

app/_locales/hu/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "A MetaMaskot Kaliforniában tervezték és hozták létre."
   },
-  "buyCoinSwitch": {
-    "message": "Vegye meg a CoinSwitchen"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "A CoinSwitch a legjobb hely több mint 300 cryptovaluta legjobb árfolyamon történő átváltására."
-  },
   "buyWithWyre": {
     "message": "Vásároljon ETH-t a Wyre-rel"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "Csatlakozás a Ropsten teszthálózathoz"
   },
-  "continueToCoinSwitch": {
-    "message": "Tovább a CoinSwitch-re"
-  },
   "continueToWyre": {
     "message": "Tovább a Wyre-re"
   },

app/_locales/id/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask dirancang dan dibangun di California."
   },
-  "buyCoinSwitch": {
-    "message": "Beli di CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch adalah destinasi serba-ada untuk pertukaran lebih dari 300 mata uang kripto dengan kurs terbaik."
-  },
   "buyWithWyre": {
     "message": "Membeli ETH dengan Wyre"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "Menghubungkan ke Jaringan Uji Coba Ropsten "
   },
-  "continueToCoinSwitch": {
-    "message": "Lanjut ke CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Lanjutkan ke Wyre"
   },

app/_locales/it/messages.json

@@ -208,12 +208,6 @@
   "buy": {
     "message": "Compra"
   },
-  "buyCoinSwitch": {
-    "message": "Compra su CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch è la destinazione one-stop per lo scambio di oltre 300 criptovalute alla migliore tariffa."
-  },
   "buyWithWyre": {
     "message": "Compra ETH con Wyre"
   },
@@ -348,9 +342,6 @@
   "contactsSettingsDescription": {
     "message": "Aggiungi, modifica, rimuovi e gestisci i tuoi contatti"
   },
-  "continueToCoinSwitch": {
-    "message": "Continua su CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Continua su Wyre"
   },

app/_locales/ja/messages.json

@@ -112,12 +112,6 @@
   "blockiesIdenticon": {
     "message": "Blockies Identicon を使用"
   },
-  "buyCoinSwitch": {
-    "message": "CoinSwitchのサイトで購入"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitchは、最高のレートで300以上の暗号化交換を行うワンストップの宛先です。"
-  },
   "cancel": {
     "message": "キャンセル"
   },
@@ -130,9 +124,6 @@
   "confirmPassword": {
     "message": "パスワードの確認"
   },
-  "continueToCoinSwitch": {
-    "message": "CoinSwitchを開く"
-  },
   "contractDeployment": {
     "message": "コントラクトのデプロイ"
   },

app/_locales/kn/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ ಮತ್ತು ಕ್ಯಾಲಿಫೋರ್ನಿಯಾದಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ."
   },
-  "buyCoinSwitch": {
-    "message": "ಕಾಯಿನ್‌ಸ್ವೀಚ್‌ನಲ್ಲಿ ಖರೀದಿಸಿ"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "300 ಕ್ಕೂ ಹೆಚ್ಚು ಕ್ರಿಪ್ಟೋಕರೆನ್ಸಿಗಳನ್ನು ಉತ್ತಮ ದರದಲ್ಲಿ ವಿನಿಮಯ ಮಾಡಿಕೊಳ್ಳುವ ಒಂದು ತಾಣವೆಂದರೆ ಕಾಯಿನ್‌ಸ್ವಿಚ್ ಆಗಿದೆ."
-  },
   "buyWithWyre": {
     "message": "Wyre ನೊಂದಿಗೆ ETH ಖರೀದಿಸಿ"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "Ropsten ಪರೀಕ್ಷಾ ನೆಟ್‌ವರ್ಕ್‌ಗೆ ಸಂಪರ್ಕಿಸಲಾಗುತ್ತಿದೆ"
   },
-  "continueToCoinSwitch": {
-    "message": "CoinSwitch ಗೆ ಮುಂದುವರಿಸಿ"
-  },
   "continueToWyre": {
     "message": "Wyre ಗೆ ಮುಂದುವರಿಸಿ"
   },

app/_locales/ko/messages.json

@@ -143,12 +143,6 @@
   "builtInCalifornia": {
     "message": "메타마스크는 캘리포니아에서 디자인되고 만들어졌습니다."
   },
-  "buyCoinSwitch": {
-    "message": "코인 스위치 구입"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "코인 스위치는 최상의 속도로 300 개 이상의 크립토 카드를 교환하는 원 스톱 목적지입니다."
-  },
   "buyWithWyre": {
     "message": "Wyre로 ETH 구매"
   },
@@ -221,9 +215,6 @@
   "connectingToRopsten": {
     "message": "Ropsten 테스트넷 접속 중"
   },
-  "continueToCoinSwitch": {
-    "message": "코인 스위치 계속하기"
-  },
   "continueToWyre": {
     "message": "Wyre로 계속 진행"
   },

app/_locales/lt/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "„MetaMask“ suprojektuota ir įdiegta Kalifornijoje."
   },
-  "buyCoinSwitch": {
-    "message": "Pirkti „CoinSwitch“"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "„CoinSwitch“ – tai lengvai pasiekiama vieta keisti per 300 kriptovaliutų geriausiu santykiu."
-  },
   "buyWithWyre": {
     "message": "Pirkti ETH su „Wyre“"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "Jungiamasi prie „Ropsten“ bandomojo tinklo"
   },
-  "continueToCoinSwitch": {
-    "message": "Tęsti su „CoinSwitch“"
-  },
   "continueToWyre": {
     "message": "Tęsti su „Wyre“"
   },

app/_locales/lv/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask ir izstrādāta un izveidota Kalifornijā."
   },
-  "buyCoinSwitch": {
-    "message": "Pirkt CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch ir vienots galamērķis vairāk nekā 300 kriptovalūtu maiņai, izmantojot labāko kursu."
-  },
   "buyWithWyre": {
     "message": "Pirkt ETH ar Wyre"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "Pieslēdzas Ropsten testa tīklam"
   },
-  "continueToCoinSwitch": {
-    "message": "Iet uz CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Pāriet uz Wyre"
   },

app/_locales/ms/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask direka dan dibina di California."
   },
-  "buyCoinSwitch": {
-    "message": "Beli di CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch ialah tempat sehentian untuk menukar lebih daripada 300 mata wang kripto dengan kadar terbaik."
-  },
   "buyWithWyre": {
     "message": "Beli ETH dengan Wyre"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "Menyambungkan kepada Rangkaian Ujian Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "Teruskan ke CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Teruskan ke Wyre"
   },

app/_locales/nl/messages.json

@@ -43,12 +43,6 @@
   "builtInCalifornia": {
     "message": "MetaMask is ontworpen en gebouwd in Californië."
   },
-  "buyCoinSwitch": {
-    "message": "Koop op CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch is de one-stop-bestemming om meer dan 300 cryptocurrencies tegen de beste prijs in te wisselen."
-  },
   "cancel": {
     "message": "Annuleer"
   },
@@ -58,9 +52,6 @@
   "confirmPassword": {
     "message": "bevestig wachtwoord"
   },
-  "continueToCoinSwitch": {
-    "message": "Ga verder naar CoinSwitch"
-  },
   "contractDeployment": {
     "message": "Contractimplementatie"
   },

app/_locales/no/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask ble bygget og designet i California."
   },
-  "buyCoinSwitch": {
-    "message": "Kjøp på CoinSwitch "
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch er destinasjonen som utveksler mer enn 300 typer kryptovaluta med den beste kursen."
-  },
   "buyWithWyre": {
     "message": "Kjøp ETH med Wyre"
   },
@@ -221,9 +215,6 @@
   "connectingToRopsten": {
     "message": "Kobler til Ropsten testnettverk"
   },
-  "continueToCoinSwitch": {
-    "message": "Fortsett med CoinSwitch "
-  },
   "continueToWyre": {
     "message": "Fortsett til Wyre "
   },

app/_locales/ph/messages.json

@@ -31,12 +31,6 @@
   "balance": {
     "message": "Balanse:"
   },
-  "buyCoinSwitch": {
-    "message": "Bumili sa CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "Ang CoinSwitch ay isang one-stop destination upang makipagpalitan ng higit sa 300 mga cryptocurrency sa pinakamahusay na rate."
-  },
   "cancel": {
     "message": "Kanselahin"
   },
@@ -46,9 +40,6 @@
   "confirmPassword": {
     "message": "Tiyakin ang Password"
   },
-  "continueToCoinSwitch": {
-    "message": "Magpatuloy sa CoinSwitch"
-  },
   "contractDeployment": {
     "message": "Pag-deploy ng Contract"
   },

app/_locales/pl/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask został zaprojektowany i stworzony w Kaliforni."
   },
-  "buyCoinSwitch": {
-    "message": "Kup w CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch to miejsce, w którym możesz wymieniać ponad 300 kryptowalut po najlepszym kursie."
-  },
   "buyWithWyre": {
     "message": "Kup ETH poprzez Wyre"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "Łączenie z siecią testową Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "Przejdź do CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Przejdź do Wyre"
   },

app/_locales/pt/messages.json

@@ -46,12 +46,6 @@
   "builtInCalifornia": {
     "message": "MetaMask é desenhada e construída na California."
   },
-  "buyCoinSwitch": {
-    "message": "Comprar no CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch é o destino único para trocar mais de 300 moedas criptográficas com a melhor taxa."
-  },
   "cancel": {
     "message": "Cancelar"
   },
@@ -61,9 +55,6 @@
   "confirmPassword": {
     "message": "Confirmar Palavra-passe"
   },
-  "continueToCoinSwitch": {
-    "message": "Continuar para o CoinSwitch"
-  },
   "contractDeployment": {
     "message": "Distribuição do Contrato"
   },

app/_locales/pt_BR/messages.json

@@ -143,12 +143,6 @@
   "builtInCalifornia": {
     "message": "O MetaMask foi projetado e desenvolvido na Califórnia."
   },
-  "buyCoinSwitch": {
-    "message": "Compre no CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "O CoinSwitch é o destino único para trocar mais de 300 criptomoedas com a melhor taxa."
-  },
   "buyWithWyre": {
     "message": "Comprar ETH com Wyre"
   },
@@ -218,9 +212,6 @@
   "connectingToRopsten": {
     "message": "Conectando à Rede de Testes Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "Continuar para CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Continuar para Wyre"
   },

app/_locales/ro/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask este concepută și creată în California."
   },
-  "buyCoinSwitch": {
-    "message": "Cumpărați pe CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch este destinația unică pentru a schimba peste 300 de cripto monede la cele mai bune cursuri."
-  },
   "buyWithWyre": {
     "message": "Cumpărați ETH cu Wyre"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "Se conectează la rețeaua de test Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "Continuare către CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Continuați la Wyre"
   },

app/_locales/ru/messages.json

@@ -145,12 +145,6 @@
   "builtInCalifornia": {
     "message": "MetaMask спроектирован и разработан в Калифорнии."
   },
-  "buyCoinSwitch": {
-    "message": "Купить на CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch - это однонаправленное место для обмена более 300 криптоконверсий по наилучшей цене."
-  },
   "buyWithWyre": {
     "message": "Купить ETH на Wyre"
   },
@@ -223,9 +217,6 @@
   "connectingToRopsten": {
     "message": "Соединение с тестовой сетью Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "Продолжить в CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Продолжить на Wyre"
   },

app/_locales/sk/messages.json

@@ -140,12 +140,6 @@
   "builtInCalifornia": {
     "message": "MetaMask je navržen a vytvořen v Kalifornii."
   },
-  "buyCoinSwitch": {
-    "message": "Kúpiť na CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch je jedno miesto, kde si môžete vymieňať viac ako 300 kryptomien za najlepšiu cenu."
-  },
   "buyWithWyre": {
     "message": "Kúpte ETH s Wyre"
   },
@@ -218,9 +212,6 @@
   "connectingToRopsten": {
     "message": "Připojuji se k Ropsten Test Network"
   },
-  "continueToCoinSwitch": {
-    "message": "Pokračovať na CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Pokračovať na Wyre"
   },

app/_locales/sl/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask je zasnovan in ustvarjen v Kaliforniji."
   },
-  "buyCoinSwitch": {
-    "message": "Kupi na CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch je destinacija na enem mestu za izmenjavo več kot 300 kriptokotovitev po najboljši hitrosti."
-  },
   "buyWithWyre": {
     "message": "Kupi ETH z Wyre"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "Povezovanje na testno omrežje Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "Nadaljuj na CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Nadaljuj na Wyre"
   },

app/_locales/sr/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask je dizajniran i izgrađen u Kaliforniji."
   },
-  "buyCoinSwitch": {
-    "message": "Kupujte na CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch je odredište gde na jednom mestu možete razmeniti više od 300 kripto valuta po najboljem kursu."
-  },
   "buyWithWyre": {
     "message": "Kupite ETH preko servisa Wyre"
   },
@@ -221,9 +215,6 @@
   "connectingToRopsten": {
     "message": "Povezuje se na Ropsten Test mrežu"
   },
-  "continueToCoinSwitch": {
-    "message": "Nastavi na CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Nastavite ka Wyre"
   },

app/_locales/sv/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask är skapat och utformat i Kalifornien."
   },
-  "buyCoinSwitch": {
-    "message": "Köp på CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch är allt-i-ett-platsen för att växla mer än 300 kryptovalutor till bästa kurs."
-  },
   "buyWithWyre": {
     "message": "Köp ETH med Wyre"
   },
@@ -218,9 +212,6 @@
   "connectingToRopsten": {
     "message": "Ansluter till Ropsten Test Network"
   },
-  "continueToCoinSwitch": {
-    "message": "Fortsätt till CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Fortsätt till Wyre"
   },

app/_locales/sw/messages.json

@@ -143,12 +143,6 @@
   "builtInCalifornia": {
     "message": "MetaMask imeundwa na kutengenezwa California."
   },
-  "buyCoinSwitch": {
-    "message": "Nunua kwenye CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch ni kituo cha kubadilisha fedha za kidijitali zaidi ya 300 kwa bei nzuri kabisa."
-  },
   "buyWithWyre": {
     "message": "Nunua ETH kwa kutumia Wyre"
   },
@@ -218,9 +212,6 @@
   "connectingToRopsten": {
     "message": "Inaunganisha kwenye Mtandao wa Majaribio wa Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "Endelea kwenye CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Endelea kwenye Wyre"
   },

app/_locales/ta/messages.json

@@ -58,12 +58,6 @@
   "builtInCalifornia": {
     "message": "மேடமஸ்க் வடிவமைக்கப்பட்டு கலிபோர்னியாவில் கட்டப்பட்டுள்ளது."
   },
-  "buyCoinSwitch": {
-    "message": "நாணயம் ஸ்விட்சில் வாங்கவும்"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "சிறந்த விகிதத்தில் 300 க்கும் அதிகமான cryptocurrencies ஐ பரிமாறிக்கொள்ள ஒரு நாணயமாற்று இலக்கு நாணயம் ஸ்விட்ச் ஆகும்."
-  },
   "cancel": {
     "message": "ரத்து செய்"
   },
@@ -94,9 +88,6 @@
   "connectingToRopsten": {
     "message": "ரொப்ஸ்டென் டெஸ்ட் நெட்வொர்க்குடன் இணைக்கிறது"
   },
-  "continueToCoinSwitch": {
-    "message": "நாணயம் மாறாமல் தொடர்க"
-  },
   "contractDeployment": {
     "message": "ஒப்பந்த வரிசைப்படுத்தல்"
   },

app/_locales/th/messages.json

@@ -52,12 +52,6 @@
   "builtInCalifornia": {
     "message": "MetaMask ออกแบบและพัฒนาที่แคลิฟอร์เนีย"
   },
-  "buyCoinSwitch": {
-    "message": "ซื้อด้วย CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch เป็นจุดหมายปลายทางแบบครบวงจรในการแลกเปลี่ยนสกุลเงินมากกว่า 300 ครั้งในอัตราที่ดีที่สุด"
-  },
   "cancel": {
     "message": "ยกเลิก"
   },
@@ -88,9 +82,6 @@
   "connectingToRopsten": {
     "message": "เชื่อมต่อกับเครือข่ายทดสอบ Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "ไปที่ CoinSwitch"
-  },
   "continueToWyre": {
     "message": "ไปที่ Wyre"
   },

app/_locales/tr/messages.json

@@ -49,12 +49,6 @@
   "builtInCalifornia": {
     "message": "MetaMask California'da tasarlandı ve yaratıldı"
   },
-  "buyCoinSwitch": {
-    "message": "CoinSwitch'de satın al"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "Cairnswich, 300'den fazla kriptona en iyi oranda eşlik eden tek durak noktasıdır."
-  },
   "cancel": {
     "message": "Vazgeç"
   },
@@ -79,9 +73,6 @@
   "connectingToRopsten": {
     "message": "Ropsten Test Ağına bağlanıyor"
   },
-  "continueToCoinSwitch": {
-    "message": "CoinSwitch'e devam et"
-  },
   "contractDeployment": {
     "message": "Sözleşme kurulumu"
   },

app/_locales/uk/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask розроблено й створено в Каліфорнії."
   },
-  "buyCoinSwitch": {
-    "message": "Купувати на CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch це точка призначення з однією зупинкою для обміну більш ніж 300 криптовалют за найкращими курсами. "
-  },
   "buyWithWyre": {
     "message": "Купити ETH через Wyre"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "Під'єднуємось до Тестової мережі Ropsten"
   },
-  "continueToCoinSwitch": {
-    "message": "Продовжити в CoinSwitch"
-  },
   "continueToWyre": {
     "message": "Продовжити у Wyre"
   },

app/_locales/vi/messages.json

@@ -34,12 +34,6 @@
   "balance": {
     "message": "Số dư:"
   },
-  "buyCoinSwitch": {
-    "message": "Mua trên CoinSwitch"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch là điểm đến duy nhất để trao đổi hơn 300 tiền điện tử với tốc độ tốt nhất."
-  },
   "cancel": {
     "message": "Hủy"
   },
@@ -49,9 +43,6 @@
   "confirmPassword": {
     "message": "Xác nhận mật khẩu"
   },
-  "continueToCoinSwitch": {
-    "message": "Tiếp tục đến CoinSwitch"
-  },
   "contractDeployment": {
     "message": "Triển khai hợp đồng"
   },

app/_locales/zh_CN/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask在加利福尼亚设计和制造。"
   },
-  "buyCoinSwitch": {
-    "message": "在CoinSwitch上购买"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch是以最优惠的价格交换超过300种加密货币的一站式目的地。"
-  },
   "buyWithWyre": {
     "message": "使用 Wyre 购买 ETH"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "正在连接到Ropsten测试网络"
   },
-  "continueToCoinSwitch": {
-    "message": "继续访问 CoinSwitch"
-  },
   "continueToWyre": {
     "message": "继续前往 Wyre"
   },

app/_locales/zh_TW/messages.json

@@ -146,12 +146,6 @@
   "builtInCalifornia": {
     "message": "MetaMask 是在加州設計製造"
   },
-  "buyCoinSwitch": {
-    "message": "在CoinSwitch上购买"
-  },
-  "buyCoinSwitchExplainer": {
-    "message": "CoinSwitch是以最优惠的价格交换超过300种加密货币的一站式目的地。"
-  },
   "buyWithWyre": {
     "message": "用 Wyre 購買 ETH"
   },
@@ -224,9 +218,6 @@
   "connectingToRopsten": {
     "message": "連線到 Ropsten 測試網路"
   },
-  "continueToCoinSwitch": {
-    "message": "繼續前往 CoinSwitch"
-  },
   "continueToWyre": {
     "message": "繼續至 Wyre"
   },

app/notification.html

@@ -29,8 +29,8 @@
   </head>
   <body class="notification">
     <div id="app-content">
-      <img id="loading__logo" src="./images/logo/metamask-fox.svg" />
-      <img id="loading__spinner" src="./images/spinner.gif" />
+      <img id="loading__logo" src="./images/logo/metamask-fox.svg" alt="" />
+      <img id="loading__spinner" src="./images/spinner.gif" alt="" />
     </div>
     <div id="popover-content"></div>
     <script src="./ui-libs.js" type="text/javascript" charset="utf-8"></script>

app/scripts/background.js

@@ -225,10 +225,7 @@ function setupController(initState, initLangCode) {
   const controller = new MetamaskController({
     infuraProjectId: process.env.INFURA_PROJECT_ID,
     // User confirmation callbacks:
-    showUnconfirmedMessage: triggerUi,
-    showUnapprovedTx: triggerUi,
-    showPermissionRequest: triggerUi,
-    showUnlockRequest: triggerUi,
+    showUserConfirmation: triggerUi,
     openPopup,
     // initial state
     initState,

app/scripts/lib/buy-eth-url.js

@@ -18,8 +18,6 @@ export default function getBuyEthUrl({ network, address, service }) {
   switch (service) {
     case 'wyre':
       return `https://pay.sendwyre.com/purchase?dest=ethereum:${address}&destCurrency=ETH&accountId=AC-7AG3W4XH4N2&paymentMethod=debit-card`
-    case 'coinswitch':
-      return `https://metamask.coinswitch.co/?address=${address}&to=eth`
     case 'metamask-faucet':
       return 'https://faucet.metamask.io/'
     case 'rinkeby-faucet':

app/scripts/metamask-controller.js

@@ -150,7 +150,7 @@ export default class MetamaskController extends EventEmitter {
       isUnlocked: this.isUnlocked.bind(this),
       initState: initState.AppStateController,
       onInactiveTimeout: () => this.setLocked(),
-      showUnlockRequest: opts.showUnlockRequest,
+      showUnlockRequest: opts.showUserConfirmation,
       preferencesStore: this.preferencesController.store,
     })
 
@@ -247,7 +247,7 @@ export default class MetamaskController extends EventEmitter {
         notifyDomain: this.notifyConnections.bind(this),
         notifyAllDomains: this.notifyAllConnections.bind(this),
         preferences: this.preferencesController.store,
-        showPermissionRequest: opts.showPermissionRequest,
+        showPermissionRequest: opts.showUserConfirmation,
       },
       initState.PermissionsController,
       initState.PermissionsMetadata,
@@ -302,7 +302,7 @@ export default class MetamaskController extends EventEmitter {
       getParticipateInMetrics: () =>
         this.preferencesController.getParticipateInMetaMetrics(),
     })
-    this.txController.on('newUnapprovedTx', () => opts.showUnapprovedTx())
+    this.txController.on('newUnapprovedTx', () => opts.showUserConfirmation())
 
     this.txController.on(`tx:status-update`, async (txId, status) => {
       if (
@@ -1376,7 +1376,7 @@ export default class MetamaskController extends EventEmitter {
       req,
     )
     this.sendUpdate()
-    this.opts.showUnconfirmedMessage()
+    this.opts.showUserConfirmation()
     return promise
   }
 
@@ -1439,7 +1439,7 @@ export default class MetamaskController extends EventEmitter {
       req,
     )
     this.sendUpdate()
-    this.opts.showUnconfirmedMessage()
+    this.opts.showUserConfirmation()
     return promise
   }
 
@@ -1498,7 +1498,7 @@ export default class MetamaskController extends EventEmitter {
       req,
     )
     this.sendUpdate()
-    this.opts.showUnconfirmedMessage()
+    this.opts.showUserConfirmation()
     return promise
   }
 
@@ -1590,7 +1590,7 @@ export default class MetamaskController extends EventEmitter {
       req,
     )
     this.sendUpdate()
-    this.opts.showUnconfirmedMessage()
+    this.opts.showUserConfirmation()
     return promise
   }
 
@@ -1655,7 +1655,7 @@ export default class MetamaskController extends EventEmitter {
       version,
     )
     this.sendUpdate()
-    this.opts.showUnconfirmedMessage()
+    this.opts.showUserConfirmation()
     return promise
   }
 

package.json

@@ -70,7 +70,7 @@
     "@formatjs/intl-relativetimeformat": "^5.2.6",
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@material-ui/core": "^4.11.0",
-    "@metamask/controllers": "^4.0.2",
+    "@metamask/controllers": "^4.2.0",
     "@metamask/eth-ledger-bridge-keyring": "^0.2.6",
     "@metamask/eth-token-tracker": "^3.0.1",
     "@metamask/etherscan-link": "^1.2.0",

test/unit/app/controllers/metamask-controller-test.js

@@ -97,8 +97,7 @@ describe('MetaMaskController', function () {
       .reply(200, '{"JPY":12415.9}')
 
     metamaskController = new MetaMaskController({
-      showUnapprovedTx: noop,
-      showUnconfirmedMessage: noop,
+      showUserConfirmation: noop,
       encryptor: {
         encrypt(_, object) {
           this.object = object

test/unit/ui/app/actions.spec.js

@@ -44,8 +44,7 @@ describe('Actions', function () {
       platform: { getVersion: () => 'foo' },
       provider,
       keyringController: new KeyringController({}),
-      showUnapprovedTx: noop,
-      showUnconfirmedMessage: noop,
+      showUserConfirmation: noop,
       encryptor: {
         encrypt(_, object) {
           this.object = object

ui/app/components/app/account-menu/account-menu.component.js

@@ -278,22 +278,22 @@ export default class AccountMenu extends Component {
   }
 
   renderScrollButton() {
-    const { shouldShowScrollButton } = this.state
+    if (!this.state.shouldShowScrollButton) {
+      return null
+    }
 
     return (
-      shouldShowScrollButton && (
-        <div
-          className="account-menu__scroll-button"
-          onClick={this.handleScrollDown}
-        >
-          <img
-            src="./images/icons/down-arrow.svg"
-            width={28}
-            height={28}
-            alt="scroll down"
-          />
-        </div>
-      )
+      <div
+        className="account-menu__scroll-button"
+        onClick={this.handleScrollDown}
+      >
+        <img
+          src="./images/icons/down-arrow.svg"
+          width="28"
+          height="28"
+          alt={this.context.t('scrollDown')}
+        />
+      </div>
     )
   }
 
@@ -357,6 +357,7 @@ export default class AccountMenu extends Component {
             <img
               className="account-menu__item-icon"
               src="images/plus-btn-white.svg"
+              alt={t('createAccount')}
             />
           }
           text={t('createAccount')}
@@ -377,6 +378,7 @@ export default class AccountMenu extends Component {
             <img
               className="account-menu__item-icon"
               src="images/import-account.svg"
+              alt={t('importAccount')}
             />
           }
           text={t('importAccount')}
@@ -401,6 +403,7 @@ export default class AccountMenu extends Component {
             <img
               className="account-menu__item-icon"
               src="images/connect-icon.svg"
+              alt={t('connectHardwareWallet')}
             />
           }
           text={t('connectHardwareWallet')}
@@ -411,7 +414,7 @@ export default class AccountMenu extends Component {
             toggleAccountMenu()
             history.push(ABOUT_US_ROUTE)
           }}
-          icon={<img src="images/mm-info-icon.svg" />}
+          icon={<img src="images/mm-info-icon.svg" alt={t('infoHelp')} />}
           text={t('infoHelp')}
         />
         <AccountMenuItem

ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js

@@ -7,6 +7,7 @@ const ConfirmPageContainerWarning = (props) => {
       <img
         className="confirm-page-container-warning__icon"
         src="/images/alert.svg"
+        alt=""
       />
       <div className="confirm-page-container-warning__warning">
         {props.warning}

ui/app/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js

@@ -47,7 +47,7 @@ export default function ConfirmPageContainerHeader({
               visibility: showEdit ? 'initial' : 'hidden',
             }}
           >
-            <img src="/images/caret-left.svg" />
+            <img src="/images/caret-left.svg" alt="" />
             <span
               className="confirm-page-container-header__back-button"
               onClick={() => onEdit()}

ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js

@@ -33,14 +33,14 @@ const ConfirmPageContainerNavigation = (props) => {
           data-testid="first-page"
           onClick={() => onNextTx(firstTx)}
         >
-          <img src="/images/double-arrow.svg" />
+          <img src="/images/double-arrow.svg" alt="" />
         </div>
         <div
           className="confirm-page-container-navigation__arrow"
           data-testid="previous-page"
           onClick={() => onNextTx(prevTxId)}
         >
-          <img src="/images/single-arrow.svg" />
+          <img src="/images/single-arrow.svg" alt="" />
         </div>
       </div>
       <div className="confirm-page-container-navigation__textcontainer">
@@ -65,6 +65,7 @@ const ConfirmPageContainerNavigation = (props) => {
           <img
             className="confirm-page-container-navigation__imageflip"
             src="/images/single-arrow.svg"
+            alt=""
           />
         </div>
         <div
@@ -75,6 +76,7 @@ const ConfirmPageContainerNavigation = (props) => {
           <img
             className="confirm-page-container-navigation__imageflip"
             src="/images/double-arrow.svg"
+            alt=""
           />
         </div>
       </div>

ui/app/components/app/modals/confirm-remove-account/confirm-remove-account.component.js

@@ -54,7 +54,10 @@ export default class ConfirmRemoveAccount extends Component {
             rel="noopener noreferrer"
             title={this.context.t('etherscanView')}
           >
-            <img src="images/popout.svg" />
+            <img
+              src="images/popout.svg"
+              alt={this.context.t('etherscanView')}
+            />
           </a>
         </div>
       </div>

ui/app/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js

@@ -12,7 +12,6 @@ export default class DepositEtherModal extends Component {
   static propTypes = {
     network: PropTypes.string.isRequired,
     toWyre: PropTypes.func.isRequired,
-    toCoinSwitch: PropTypes.func.isRequired,
     address: PropTypes.string.isRequired,
     toFaucet: PropTypes.func.isRequired,
     hideWarning: PropTypes.func.isRequired,
@@ -87,7 +86,7 @@ export default class DepositEtherModal extends Component {
   }
 
   render() {
-    const { network, toWyre, toCoinSwitch, address, toFaucet } = this.props
+    const { network, toWyre, address, toFaucet } = this.props
 
     const isTestNetwork = ['3', '4', '5', '42'].find((n) => n === network)
     const networkName = getNetworkDisplayName(network)
@@ -111,31 +110,6 @@ export default class DepositEtherModal extends Component {
         </div>
         <div className="page-container__content">
           <div className="deposit-ether-modal__buy-rows">
-            {this.renderRow({
-              logo: (
-                <img
-                  alt=""
-                  className="deposit-ether-modal__logo"
-                  src="./images/deposit-eth.svg"
-                  style={{
-                    height: '75px',
-                    width: '75px',
-                  }}
-                />
-              ),
-              title: this.context.t('directDepositEther'),
-              text: this.context.t('directDepositEtherExplainer'),
-              buttonLabel: this.context.t('viewAccount'),
-              onButtonClick: () => this.goToAccountDetailsModal(),
-            })}
-            {this.renderRow({
-              logo: <i className="fa fa-tint fa-2x" />,
-              title: this.context.t('testFaucet'),
-              text: this.faucetRowText(networkName),
-              buttonLabel: this.context.t('getEther'),
-              onButtonClick: () => toFaucet(network),
-              hide: !isTestNetwork,
-            })}
             {this.renderRow({
               logo: (
                 <div
@@ -163,28 +137,28 @@ export default class DepositEtherModal extends Component {
             })}
             {this.renderRow({
               logo: (
-                <div
+                <img
+                  alt=""
                   className="deposit-ether-modal__logo"
+                  src="./images/deposit-eth.svg"
                   style={{
-                    backgroundImage: "url('./images/coinswitch_logo.png')",
-                    height: '40px',
+                    height: '75px',
+                    width: '75px',
                   }}
                 />
               ),
-              title: this.context.t('buyCoinSwitch'),
-              text: this.context.t('buyCoinSwitchExplainer'),
-              buttonLabel: this.context.t('continueToCoinSwitch'),
-              onButtonClick: () => {
-                this.context.metricsEvent({
-                  eventOpts: {
-                    category: 'Accounts',
-                    action: 'Deposit Ether',
-                    name: 'Click buy Ether via CoinSwitch',
-                  },
-                })
-                toCoinSwitch(address)
-              },
-              hide: isTestNetwork,
+              title: this.context.t('directDepositEther'),
+              text: this.context.t('directDepositEtherExplainer'),
+              buttonLabel: this.context.t('viewAccount'),
+              onButtonClick: () => this.goToAccountDetailsModal(),
+            })}
+            {this.renderRow({
+              logo: <i className="fa fa-tint fa-2x" />,
+              title: this.context.t('testFaucet'),
+              text: this.faucetRowText(networkName),
+              buttonLabel: this.context.t('getEther'),
+              onButtonClick: () => toFaucet(network),
+              hide: !isTestNetwork,
             })}
           </div>
         </div>

ui/app/components/app/modals/deposit-ether-modal/deposit-ether-modal.container.js

@@ -19,9 +19,6 @@ function mapDispatchToProps(dispatch) {
     toWyre: (address) => {
       dispatch(buyEth({ service: 'wyre', address }))
     },
-    toCoinSwitch: (address) => {
-      dispatch(buyEth({ service: 'coinswitch', address }))
-    },
     hideModal: () => {
       dispatch(hideModal())
     },

ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js

@@ -24,7 +24,7 @@ export default class MetaMetricsOptInModal extends Component {
           <div className="metametrics-opt-in__content">
             <MetaFoxLogo />
             <div className="metametrics-opt-in__body-graphic">
-              <img src="images/metrics-chart.svg" />
+              <img src="images/metrics-chart.svg" alt="" />
             </div>
             <div className="metametrics-opt-in__title">
               Help Us Improve MetaMask

ui/app/components/app/modals/qr-scanner/qr-scanner.component.js

@@ -210,7 +210,7 @@ export default class QrScanner extends Component {
     return (
       <>
         <div className="qr-scanner__image">
-          <img src="images/webcam.svg" width={70} height={70} />
+          <img src="images/webcam.svg" width="70" height="70" alt="" />
         </div>
         {title ? <div className="qr-scanner__title">{title}</div> : null}
         <div className="qr-scanner__error">{msg}</div>

ui/app/components/app/modals/transaction-confirmed/transaction-confirmed.component.js

@@ -28,7 +28,7 @@ export default class TransactionConfirmed extends PureComponent {
     return (
       <Modal onSubmit={this.handleSubmit} submitText={t('ok')}>
         <div className="transaction-confirmed__content">
-          <img src="images/check-icon.svg" />
+          <img src="images/check-icon.svg" alt="" />
           <div className="transaction-confirmed__title">
             {`${t('confirmed')}!`}
           </div>

ui/app/components/app/network.js

@@ -173,7 +173,7 @@ export default class Network extends Component {
                 <img
                   title={t('attemptingConnect')}
                   src="images/loading.svg"
-                  alt=""
+                  alt={t('attemptingConnect')}
                 />
               </span>
             ) : (

ui/app/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js

@@ -40,7 +40,7 @@ export default class TransactionActivityLogIcon extends PureComponent {
 
     return (
       <div className={classnames('transaction-activity-log-icon', className)}>
-        {imagePath && <img src={imagePath} height={9} width={9} />}
+        {imagePath && <img src={imagePath} height="9" width="9" alt="" />}
       </div>
     )
   }

ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js

@@ -206,7 +206,7 @@ export default class TransactionListItemDetails extends PureComponent {
                   onClick={this.handleEtherscanClick}
                   disabled={!hash}
                 >
-                  <img src="/images/arrow-popout.svg" />
+                  <img src="/images/arrow-popout.svg" alt="" />
                 </Button>
               </Tooltip>
               {showRetry && (

ui/app/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js

@@ -23,7 +23,7 @@ export default function UserPreferencedCurrencyDisplay({
   const prefixComponent = useMemo(() => {
     return (
       currency === ETH &&
-      showEthLogo && <img src="/images/eth.svg" height={ethLogoHeight} />
+      showEthLogo && <img src="/images/eth.svg" height={ethLogoHeight} alt="" />
     )
   }, [currency, showEthLogo, ethLogoHeight])
 

ui/app/components/ui/circle-icon/circle-icon.component.js

@@ -40,6 +40,7 @@ export default class CircleIcon extends PureComponent {
             height: iconSize,
             width: iconSize,
           }}
+          alt=""
         />
       </div>
     )

ui/app/components/ui/editable-label/editable-label.js

@@ -45,13 +45,15 @@ class EditableLabel extends Component {
         className={classnames('large-input', 'editable-label__input', {
           'editable-label__input--error': value === '',
         })}
+        autoFocus
       />,
-      <div className="editable-label__icon-wrapper" key={2}>
-        <i
-          className="fa fa-check editable-label__icon"
-          onClick={() => this.handleSubmit()}
-        />
-      </div>,
+      <button
+        className="editable-label__icon-button"
+        key={2}
+        onClick={() => this.handleSubmit()}
+      >
+        <i className="fa fa-check editable-label__icon" />
+      </button>,
     ]
   }
 
@@ -60,12 +62,13 @@ class EditableLabel extends Component {
       <div key={1} className="editable-label__value">
         {this.state.value}
       </div>,
-      <div key={2} className="editable-label__icon-wrapper">
-        <i
-          className="fas fa-pencil-alt editable-label__icon"
-          onClick={() => this.setState({ isEditing: true })}
-        />
-      </div>,
+      <button
+        key={2}
+        className="editable-label__icon-button"
+        onClick={() => this.setState({ isEditing: true })}
+      >
+        <i className="fas fa-pencil-alt editable-label__icon" />
+      </button>,
     ]
   }
 

ui/app/components/ui/editable-label/index.scss

@@ -23,10 +23,11 @@
     }
   }
 
-  &__icon-wrapper {
+  &__icon-button {
     position: absolute;
     margin-left: 10px;
     left: 100%;
+    background: unset;
   }
 
   &__icon {

ui/app/components/ui/error-message/error-message.component.js

@@ -7,7 +7,7 @@ const ErrorMessage = (props, context) => {
 
   return (
     <div className="error-message">
-      <img src="/images/alert-red.svg" className="error-message__icon" />
+      <img src="/images/alert-red.svg" alt="" className="error-message__icon" />
       <div className="error-message__text">{`ALERT: ${error}`}</div>
     </div>
   )

ui/app/components/ui/icon-with-fallback/icon-with-fallback.component.js

@@ -30,6 +30,7 @@ export default class IconWithFallback extends PureComponent {
         src={icon}
         style={style}
         className={className}
+        alt=""
       />
     ) : (
       <i

ui/app/components/ui/identicon/blockieIdenticon/blockieIdenticon.component.js

@@ -19,7 +19,7 @@ const BlockieIdenticon = ({ address, diameter }) => {
   return (
     <>
       <canvas ref={canvasRef} style={{ display: 'none' }} />
-      <img src={dataUrl} height={diameter} width={diameter} />
+      <img src={dataUrl} height={diameter} width={diameter} alt="" />
     </>
   )
 }

ui/app/components/ui/identicon/identicon.component.js

@@ -40,6 +40,7 @@ export default class Identicon extends PureComponent {
         className={classnames('identicon', className)}
         src={image}
         style={getStyles(diameter)}
+        alt=""
       />
     )
   }
@@ -108,6 +109,7 @@ export default class Identicon extends PureComponent {
         className={classnames('identicon__eth-logo', className)}
         src="./images/eth_logo.svg"
         style={getStyles(diameter)}
+        alt=""
       />
     )
   }

ui/app/components/ui/info-tooltip/info-tooltip.js

@@ -32,7 +32,7 @@ export default function InfoTooltip({
         html={contentText}
         theme={wide ? 'tippy-tooltip-wideInfo' : 'tippy-tooltip-info'}
       >
-        <img src="images/mm-info-icon.svg" />
+        <img src="images/mm-info-icon.svg" alt="" />
       </Tooltip>
     </div>
   )

ui/app/components/ui/metafox-logo/metafox-logo.component.js

@@ -24,12 +24,13 @@ export default class MetaFoxLogo extends PureComponent {
         })}
       >
         <img
-          height={30}
+          height="30"
           src="/images/logo/metamask-logo-horizontal.svg"
           className={classnames(
             'app-header__metafox-logo',
             'app-header__metafox-logo--horizontal',
           )}
+          alt=""
         />
         <img
           {...iconProps}
@@ -38,6 +39,7 @@ export default class MetaFoxLogo extends PureComponent {
             'app-header__metafox-logo',
             'app-header__metafox-logo--icon',
           )}
+          alt=""
         />
       </div>
     )

ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js

@@ -174,12 +174,12 @@ function Arrow({ variant }) {
   return variant === DEFAULT_VARIANT ? (
     <div className="sender-to-recipient__arrow-container">
       <div className="sender-to-recipient__arrow-circle">
-        <img height={15} width={15} src="./images/arrow-right.svg" />
+        <img height="15" width="15" src="./images/arrow-right.svg" alt="" />
       </div>
     </div>
   ) : (
     <div className="sender-to-recipient__arrow-container">
-      <img height={20} src="./images/caret-right.svg" />
+      <img height="20" src="./images/caret-right.svg" alt="" />
     </div>
   )
 }

ui/app/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js

@@ -10,7 +10,7 @@ export default class TokenListPlaceholder extends Component {
   render() {
     return (
       <div className="token-list-placeholder">
-        <img src="images/tokensearch.svg" />
+        <img src="images/tokensearch.svg" alt="" width="65" height="58" />
         <div className="token-list-placeholder__text">
           {this.context.t('addAcquiredTokens')}
         </div>

ui/app/pages/add-token/token-search/token-search.component.js

@@ -53,7 +53,7 @@ export default class TokenSearch extends Component {
   renderAdornment() {
     return (
       <InputAdornment position="start" style={{ marginRight: '12px' }}>
-        <img src="images/search.svg" width="17" height="17" />
+        <img src="images/search.svg" width="17" height="17" alt="" />
       </InputAdornment>
     )
   }

ui/app/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js

@@ -236,7 +236,7 @@ export default class ConfirmApproveContent extends Component {
           <div className="confirm-approve-content__full-tx-content">
             <div className="confirm-approve-content__permission">
               {this.renderApproveContentCard({
-                symbol: <img src="/images/user-check.svg" />,
+                symbol: <img src="/images/user-check.svg" alt="" />,
                 title: 'Permission',
                 content: this.renderPermissionContent(),
                 showEdit: true,

ui/app/pages/confirm-decrypt-message/confirm-decrypt-message.component.js

@@ -195,6 +195,7 @@ export default class ConfirmDecryptMessage extends Component {
               <img
                 className="request-decrypt-message__visual-identicon"
                 src={origin.icon}
+                alt=""
               />
             ) : (
               <i className="request-decrypt-message__visual-identicon--default">
@@ -240,7 +241,7 @@ export default class ConfirmDecryptMessage extends Component {
               })
             }}
           >
-            <img src="images/lock.svg" />
+            <img src="images/lock.svg" alt="" />
             <div className="request-decrypt-message__message-lock-text">
               {t('decryptMetamask')}
             </div>

ui/app/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js

@@ -170,6 +170,7 @@ export default class ConfirmEncryptionPublicKey extends Component {
               <img
                 className="request-encryption-public-key__visual-identicon"
                 src={origin.icon}
+                alt=""
               />
             ) : (
               <i className="request-encryption-public-key__visual-identicon--default">

ui/app/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js

@@ -86,7 +86,7 @@ export default function ConfirmTokenTransactionBase({
       primaryTotalTextOverride={
         <div>
           <span>{`${tokensText} + `}</span>
-          <img src="/images/eth.svg" height="18" />
+          <img src="/images/eth.svg" height="18" alt="" />
           <span>{ethTransactionTotal}</span>
         </div>
       }

ui/app/pages/create-account/connect-hardware/select-hardware.js

@@ -35,7 +35,7 @@ export default class SelectHardware extends Component {
         <img
           className="hw-connect__btn__img"
           src="images/trezor-logo.svg"
-          alt=""
+          alt="Trezor"
         />
       </button>
     )
@@ -52,7 +52,7 @@ export default class SelectHardware extends Component {
         <img
           className="hw-connect__btn__img"
           src="images/ledger-logo.svg"
-          alt=""
+          alt="Ledger"
         />
       </button>
     )

ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js

@@ -19,7 +19,7 @@ export default class UniqueImageScreen extends PureComponent {
 
     return (
       <div>
-        <img src="/images/sleuth.svg" height={42} width={42} />
+        <img src="/images/sleuth.svg" height="42" width="42" alt="" />
         <div className="first-time-flow__header">{t('protectYourKeys')}</div>
         <div className="first-time-flow__text-block">
           {t('protectYourKeysMessage1')}

ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js

@@ -32,7 +32,7 @@ export default class MetaMetricsOptIn extends Component {
         <div className="metametrics-opt-in__main">
           <MetaFoxLogo />
           <div className="metametrics-opt-in__body-graphic">
-            <img src="images/metrics-chart.svg" />
+            <img src="images/metrics-chart.svg" alt="" />
           </div>
           <div className="metametrics-opt-in__title">
             {t('metametricsHelpImproveMetaMask')}

ui/app/pages/first-time-flow/select-action/select-action.component.js

@@ -50,7 +50,7 @@ export default class SelectAction extends PureComponent {
               <div className="select-action__select-button">
                 <div className="select-action__button-content">
                   <div className="select-action__button-symbol">
-                    <img src="/images/download-alt.svg" />
+                    <img src="/images/download-alt.svg" alt="" />
                   </div>
                   <div className="select-action__button-text-big">
                     {t('noAlreadyHaveSeed')}
@@ -70,7 +70,7 @@ export default class SelectAction extends PureComponent {
               <div className="select-action__select-button">
                 <div className="select-action__button-content">
                   <div className="select-action__button-symbol">
-                    <img src="/images/thin-plus.svg" />
+                    <img src="/images/thin-plus.svg" alt="" />
                   </div>
                   <div className="select-action__button-text-big">
                     {t('letsGoSetUp')}

ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js

@@ -49,6 +49,7 @@ export default class ContactListTab extends Component {
 
   renderAddButton() {
     const { history } = this.props
+
     return (
       <div
         className="address-book-add-button__button"
@@ -59,6 +60,7 @@ export default class ContactListTab extends Component {
         <img
           className="account-menu__item-icon"
           src="images/plus-btn-white.svg"
+          alt={this.context.t('addAccount')}
         />
       </div>
     )

ui/app/pages/settings/contact-list-tab/index.scss

@@ -221,7 +221,7 @@
 .address-book-add-button {
   &__button {
     position: absolute;
-    top: 10px;
+    top: 80px;
     right: 16px;
     height: 56px;
     width: 56px;
@@ -235,6 +235,10 @@
     margin-right: 5px;
     cursor: pointer;
     box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
+
+    @media screen and (max-width: 576px) {
+      top: 10px;
+    }
   }
 }
 

ui/app/pages/settings/info-tab/info-tab.component.js

@@ -96,7 +96,11 @@ export default class InfoTab extends PureComponent {
         <div className="settings-page__content-row">
           <div className="settings-page__content-item settings-page__content-item--without-height">
             <div className="info-tab__logo-wrapper">
-              <img src="images/info-logo.png" className="info-tab__logo" />
+              <img
+                src="images/info-logo.png"
+                className="info-tab__logo"
+                alt=""
+              />
             </div>
             <div className="info-tab__item">
               <div className="info-tab__version-header">

ui/app/pages/swaps/fee-card/fee-card.js

@@ -1,7 +1,12 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
+import BigNumber from 'bignumber.js'
+import classnames from 'classnames'
 import { I18nContext } from '../../../contexts/i18n'
 import InfoTooltip from '../../../components/ui/info-tooltip'
+import { decEthToConvertedCurrency } from '../../../helpers/utils/conversions.util'
+import { formatCurrency } from '../../../helpers/utils/confirm-tx.util'
+import PigIcon from './pig-icon'
 
 export default function FeeCard({
   primaryFee,
@@ -11,11 +16,88 @@ export default function FeeCard({
   tokenApprovalTextComponent,
   tokenApprovalSourceTokenSymbol,
   onTokenApprovalClick,
+  metaMaskFee,
+  savings,
+  isBestQuote,
+  numberOfQuotes,
+  onQuotesClick,
+  conversionRate,
+  currentCurrency,
+  tokenConversionRate,
 }) {
   const t = useContext(I18nContext)
 
+  const savingAmount =
+    isBestQuote && savings?.total
+      ? formatCurrency(
+          decEthToConvertedCurrency(
+            savings.total,
+            currentCurrency,
+            conversionRate,
+          ),
+          currentCurrency,
+        )
+      : null
+  const savingsIsPositive =
+    savings?.total && new BigNumber(savings.total, 10).gt(0)
+
+  const inDevelopment = process.env.NODE_ENV === 'development'
+  const shouldDisplaySavings =
+    inDevelopment && isBestQuote && tokenConversionRate && savingsIsPositive
+
+  let savingsText = ''
+  if (inDevelopment && shouldDisplaySavings) {
+    savingsText = t('swapSaving', [
+      <span key="savings-tilde" className="fee-card__tilde">
+        ~
+      </span>,
+      savingAmount,
+    ])
+  } else if (inDevelopment && isBestQuote && tokenConversionRate) {
+    savingsText = t('swapUsingBestQuote')
+  } else if (inDevelopment && savingsIsPositive && tokenConversionRate) {
+    savingsText = t('swapBetterQuoteAvailable')
+  }
+
   return (
     <div className="fee-card">
+      <div className="fee-card__savings-and-quotes-header">
+        <div className="fee-card__savings-and-quotes-header-first-part" />
+        <div
+          className={classnames(
+            'fee-card__savings-and-quotes-header-second-part',
+            {
+              'fee-card__savings-and-quotes-header-second-part--top-border': !shouldDisplaySavings,
+            },
+          )}
+        />
+        <div className="fee-card__savings-and-quotes-header-third-part" />
+        {shouldDisplaySavings && (
+          <div className="fee-card__pig-icon-container">
+            <PigIcon />
+          </div>
+        )}
+        <div
+          className={classnames('fee-card__savings-and-quotes-row', {
+            'fee-card__savings-and-quotes-row--align-left': !shouldDisplaySavings,
+          })}
+        >
+          {savingsText && (
+            <p className="fee-card__savings-text">{savingsText}</p>
+          )}
+          <div
+            className="fee-card__quote-link-container"
+            onClick={onQuotesClick}
+          >
+            <p className="fee-card__quote-link-text">
+              {t('swapNQuotes', [numberOfQuotes])}
+            </p>
+            <div className="fee-card__caret-right">
+              <i className="fa fa-angle-up" />
+            </div>
+          </div>
+        </div>
+      </div>
       <div className="fee-card__main">
         <div className="fee-card__row-header">
           <div>
@@ -83,26 +165,39 @@ export default function FeeCard({
           </div>
         </div>
         {!hideTokenApprovalRow && (
-          <div className="fee-card__top-bordered-row">
+          <div className="fee-card__row-header">
             <div className="fee-card__row-label">
               <div className="fee-card__row-header-text">
                 {t('swapThisWillAllowApprove', [tokenApprovalTextComponent])}
               </div>
-              <div
-                className="fee-card__link"
-                onClick={() => onTokenApprovalClick()}
-              >
-                {t('swapEditLimit')}
-              </div>
               <InfoTooltip
                 position="top"
                 contentText={t('swapEnableDescription', [
                   tokenApprovalSourceTokenSymbol,
                 ])}
+                containerClassName="fee-card__info-tooltip-container"
               />
             </div>
+            <div
+              className="fee-card__link"
+              onClick={() => onTokenApprovalClick()}
+            >
+              {t('swapEditLimit')}
+            </div>
           </div>
         )}
+        <div className="fee-card__top-bordered-row">
+          <div className="fee-card__row-label">
+            <div className="fee-card__row-header-text">
+              {t('swapQuoteIncludesRate', [metaMaskFee])}
+            </div>
+            <InfoTooltip
+              position="top"
+              contentText={t('swapMetaMaskFeeDescription', [metaMaskFee])}
+              wrapperClassName="fee-card__info-tooltip-container"
+            />
+          </div>
+        </div>
       </div>
     </div>
   )
@@ -122,4 +217,12 @@ FeeCard.propTypes = {
   tokenApprovalTextComponent: PropTypes.node,
   tokenApprovalSourceTokenSymbol: PropTypes.string,
   onTokenApprovalClick: PropTypes.func,
+  metaMaskFee: PropTypes.string.isRequired,
+  savings: PropTypes.object,
+  isBestQuote: PropTypes.bool,
+  onQuotesClick: PropTypes.func.isRequired,
+  numberOfQuotes: PropTypes.number.isRequired,
+  conversionRate: PropTypes.number,
+  currentCurrency: PropTypes.string,
+  tokenConversionRate: PropTypes.number,
 }

ui/app/pages/swaps/fee-card/fee-card.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
-import { text } from '@storybook/addon-knobs/react'
+import { text, boolean, number, object } from '@storybook/addon-knobs/react'
 import FeeCard from './fee-card'
 
 const tokenApprovalTextComponent = (
@@ -35,6 +35,13 @@ export const WithAllProps = () => {
         tokenApprovalSourceTokenSymbol="ABC"
         onTokenApprovalClick={action('Clicked third row link')}
         hideTokenApprovalRow={false}
+        metaMaskFee="0.875"
+        savings={object('savings 1', { total: '8.55' })}
+        onQuotesClick={action('Clicked quotes link')}
+        numberOfQuotes={number('numberOfQuotes', 6)}
+        isBestQuote={boolean('isBestQuote', true)}
+        conversionRate={300}
+        currentCurrency="usd"
       />
     </div>
   )
@@ -55,6 +62,11 @@ export const WithoutThirdRow = () => {
         }}
         onFeeCardMaxRowClick={action('Clicked max fee row link')}
         hideTokenApprovalRow
+        onQuotesClick={action('Clicked quotes link')}
+        numberOfQuotes={number('numberOfQuotes', 1)}
+        isBestQuote={boolean('isBestQuote', true)}
+        savings={object('savings 1', { total: '8.55' })}
+        metaMaskFee="0.875"
       />
     </div>
   )
@@ -70,6 +82,9 @@ export const WithOnlyRequiredProps = () => {
         }}
         onFeeCardMaxRowClick={action('Clicked max fee row link')}
         hideTokenApprovalRow
+        metaMaskFee="0.875"
+        onQuotesClick={action('Clicked quotes link')}
+        numberOfQuotes={2}
       />
     </div>
   )

ui/app/pages/swaps/fee-card/index.scss

@@ -1,11 +1,103 @@
 .fee-card {
-  border-radius: 8px;
-  border: 1px solid $Grey-100;
-  width: 100%;
-
   @include H7;
 
+  &__savings-and-quotes-header {
+    display: flex;
+    position: relative;
+    align-items: center;
+  }
+
+  &__savings-and-quotes-header-first-part,
+  &__savings-and-quotes-header-second-part,
+  &__savings-and-quotes-header-third-part {
+    height: 39px;
+    background: $Blue-000;
+    border: 1px solid $Blue-500;
+  }
+
+  &__savings-and-quotes-header-first-part {
+    width: 22px;
+    border-top-left-radius: 8px;
+    border-bottom: none;
+    border-right: none;
+  }
+
+  &__savings-and-quotes-header-second-part {
+    width: 18px;
+    border: none;
+
+    &--top-border {
+      border-top: 1px solid $Blue-500;
+    }
+  }
+
+  &__savings-and-quotes-header-third-part {
+    width: 271px;
+    border-top-right-radius: 8px;
+    border-bottom: none;
+    border-left: none;
+  }
+
+  &__pig-icon-container {
+    position: absolute;
+    left: 14.5px;
+    bottom: 4px;
+  }
+
+  &__savings-and-quotes-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 234px;
+    width: 100%;
+    position: absolute;
+    left: 58px;
+
+    &--align-left {
+      left: 16px;
+      max-width: 272px;
+    }
+  }
+
+  &__savings-text {
+    @include H6;
+
+    font-weight: bold;
+    color: $Blue-500;
+  }
+
+  &__quote-link-container {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  &__quote-link-text {
+    @include H7;
+
+    color: $Blue-500;
+  }
+
+  &__caret-right {
+    color: $Blue-500;
+    width: 6px;
+    height: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 6px;
+
+    i {
+      transform: rotate(90deg);
+    }
+  }
+
   &__main {
+    border: 1px solid $Blue-500;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    width: 100%;
+    max-width: 311px;
     padding: 16px 16px 12px 16px;
   }
 
@@ -31,6 +123,10 @@
     cursor: pointer;
   }
 
+  &__row-header-text--bold {
+    color: $Black-100;
+  }
+
   &__row,
   &__top-bordered-row {
     display: flex;
@@ -51,7 +147,6 @@
     img {
       height: 10px;
       width: 10px;
-      margin-left: 4px;
       cursor: pointer;
     }
   }
@@ -60,7 +155,12 @@
     height: 10px;
     width: 10px;
     justify-content: center;
-    margin-top: 2px;
+
+    div {
+      // Needed to override the style property added by the react-tippy library
+      display: flex !important;
+      height: 10px;
+    }
   }
 
   &__info-tooltip-paragraph {
@@ -111,11 +211,14 @@
     margin-right: 12px;
   }
 
-  &__row-header-primary,
-  &__row-header-primary--bold {
+  &__row-header-primary {
     color: $Grey-500;
   }
 
+  &__row-header-primary--bold {
+    color: $Black-100;
+  }
+
   &__row-header-text--bold,
   &__row-header-secondary--bold,
   &__row-header-primary--bold {
@@ -125,6 +228,11 @@
   &__bold {
     font-weight: bold;
   }
+
+  &__tilde {
+    font-family: Roboto, Helvetica, Arial, sans-serif;
+    margin-right: -3.5px;
+  }
 }
 
 .info-tooltip {

ui/app/pages/swaps/fee-card/pig-icon.js

@@ -0,0 +1,54 @@
+import React from 'react'
+
+export default function PigIcon() {
+  return (
+    <svg
+      width="31"
+      height="44"
+      viewBox="0 0 31 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.86541 24.7218L1.79469 24.7925C1.02602 25.5611 0.602468 26.5834 0.602936 27.6702L1.86541 24.7218ZM1.86541 24.7218L1.93612 24.7925M1.86541 24.7218L1.93612 24.7925M1.93612 24.7925L2.34305 25.1994L2.74999 25.6063L2.82067 25.677M1.93612 24.7925L2.82067 25.677M2.82067 25.677L2.75002 25.7477M2.82067 25.677L2.75002 25.7477M2.75002 25.7477C2.23672 26.2615 1.95374 26.944 1.95374 27.6702C1.95374 28.3964 2.23672 29.0789 2.75002 29.5927L2.67928 29.6633L2.74995 29.5926C3.16102 30.0032 3.67296 30.2457 4.20842 30.3365M2.75002 25.7477L4.20842 30.3365M4.20842 30.3365V29.3801C4.20842 28.7473 4.29699 28.1236 4.44701 27.5174C5.26558 24.2082 8.15856 21.4247 11.5089 21.0552L11.5089 21.0551L11.5122 21.0549L11.5232 21.054C11.5234 21.054 11.5236 21.054 11.5238 21.054C14.4515 20.7946 17.4246 20.7241 20.3655 20.8456L20.3662 20.8456C20.4027 20.8474 20.4448 20.8518 20.4826 20.8558C20.4848 20.856 20.487 20.8562 20.4891 20.8564C21.3008 19.8016 22.4769 19.1281 23.7918 19.1281H24.3672H24.4672V19.2281V22.4872C25.6604 23.4555 26.6321 24.7942 27.2053 26.3565C27.6693 26.3858 28.1337 26.418 28.5993 26.4518L28.6 26.4519C29.8669 26.5531 30.8947 27.6691 30.8947 28.9423V33.532C30.8947 34.8021 29.8707 35.9275 28.6044 36.0438L28.6037 36.0439C28.0461 36.0912 27.4876 36.1351 26.9282 36.1755C26.2881 37.557 25.3323 38.7259 24.2059 39.5696V40.9581C24.2059 42.0522 23.3155 42.9421 22.2215 42.9421H21.2956C20.2321 42.9421 19.3615 42.1011 19.3137 41.0491C18.732 41.0644 18.149 41.0745 17.5651 41.0745C16.1032 41.0745 14.6374 41.0272 13.1767 40.9337V40.9581C13.1767 42.0522 12.2863 42.9421 11.1922 42.9421H10.2664C9.17234 42.9421 8.28244 42.0522 8.28244 40.9581V39.6399C5.89461 38.1267 4.20795 35.3776 4.20842 32.4825V31.7103C3.32631 31.6097 2.47056 31.2229 1.79516 30.5475C1.02648 29.7792 0.602947 28.757 0.602936 27.6702L4.20842 30.3365ZM11.5108 40.8072L11.5108 40.8072L11.5084 40.8069C10.8614 40.7357 10.2331 40.5697 9.63278 40.3321V40.9581C9.63278 41.307 9.91701 41.5913 10.2659 41.5913H11.1918C11.5412 41.5913 11.8254 41.307 11.8254 40.9581V40.8312C11.7948 40.8289 11.7636 40.8266 11.7324 40.8243C11.6578 40.8189 11.5824 40.8133 11.5108 40.8072ZM26.0661 27.2019C25.7283 26.1136 25.1685 25.1424 24.4672 24.3492V25.3928V25.4928H24.3672H23.2164H23.1164V25.3928V20.5711C21.7447 20.9526 20.6961 22.4798 20.6961 24.3256C20.6961 24.6853 20.7363 25.0339 20.8135 25.3705L20.8416 25.4928H20.716H19.5442H19.4607L19.4458 25.4107C19.3819 25.0577 19.3458 24.6961 19.3458 24.3256C19.3458 23.5585 19.4925 22.8324 19.7487 22.1769C19.0205 22.1527 18.291 22.138 17.5604 22.138C15.5864 22.138 13.6074 22.2251 11.6502 22.3983C10.0333 22.5788 8.51004 23.482 7.38991 24.765C6.26962 26.0482 5.55899 27.704 5.55923 29.3796V32.4825V32.5581C5.58001 34.2087 6.28668 35.835 7.38969 37.0991C8.5094 38.3822 10.031 39.2847 11.6432 39.4628C14.5132 39.7172 17.428 39.7865 20.3054 39.6673C22.5772 39.5684 24.8105 37.8103 25.8469 35.2745L25.8469 35.2744L25.9827 34.9431L26.0063 34.8856L26.0684 34.8813L26.4258 34.8565L26.4258 34.8565C27.1144 34.809 27.8016 34.7558 28.4842 34.698C29.0557 34.6452 29.5434 34.1087 29.5434 33.5316V28.9419C29.5434 28.3691 29.0595 27.8434 28.4958 27.7984C27.8886 27.7541 27.2797 27.713 26.6703 27.6762L26.6702 27.6762L26.2735 27.6519L26.2046 27.6477L26.1842 27.5818L26.0661 27.2019L26.0661 27.2019ZM22.8546 40.9581V40.3811C22.1527 40.7107 21.4138 40.9209 20.6629 40.9915C20.6803 41.325 20.9574 41.5913 21.2952 41.5913H22.221C22.5705 41.5913 22.8546 41.307 22.8546 40.9581Z"
+        fill="#037DD6"
+        stroke="#037DD6"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M15.4018 19.837C12.3221 19.837 9.81661 17.332 9.81661 14.2523C9.81661 11.1726 12.3217 8.66703 15.4018 8.66703C18.4811 8.66703 20.9866 11.1721 20.9866 14.2523C20.9866 17.3315 18.4816 19.837 15.4018 19.837ZM15.4018 10.0174C13.0673 10.0174 11.1674 11.9172 11.1674 14.2518C11.1674 16.5864 13.0673 18.4862 15.4018 18.4862C17.7364 18.4862 19.6358 16.5868 19.6358 14.2518C19.6358 11.9172 17.7369 10.0174 15.4018 10.0174Z"
+        fill="#037DD6"
+        stroke="#037DD6"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M15.4022 17.8575C13.4136 17.8575 11.7957 16.24 11.7957 14.2514C11.7957 12.2627 13.4136 10.6453 15.4022 10.6453C17.3909 10.6453 19.0083 12.2632 19.0083 14.2514C19.0083 16.2395 17.3909 17.8575 15.4022 17.8575ZM15.4022 11.9961C14.1583 11.9961 13.1465 13.0079 13.1465 14.2519C13.1465 15.4958 14.1582 16.5071 15.4022 16.5071C16.6458 16.5071 17.6575 15.4954 17.6575 14.2519C17.6575 13.0083 16.6457 11.9961 15.4022 11.9961Z"
+        fill="#037DD6"
+        stroke="#037DD6"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M14.6099 0.842163V0.742163H14.7099H15.8607H15.9607V0.842163V7.35593V7.45593H15.8607H14.7099H14.6099V7.35593V0.842163Z"
+        fill="#037DD6"
+        stroke="#037DD6"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M17.2175 4.59747V4.49747H17.3175H18.4683H18.5683V4.59747V8.34996V8.44996H18.4683H17.3175H17.2175V8.34996V4.59747Z"
+        fill="#037DD6"
+        stroke="#037DD6"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M24.4364 28.7993L24.4362 28.7993C24.3635 28.7716 24.2949 28.7581 24.2283 28.7581C23.9048 28.7581 23.6419 29.0179 23.6368 29.3397L23.6378 29.3474L23.6397 29.3614C23.6411 29.372 23.6431 29.3873 23.6447 29.4046L23.6448 29.4054C23.6735 29.7092 23.925 29.9417 24.2283 29.9417C24.5551 29.9417 24.8198 29.6769 24.8198 29.3501C24.8198 29.1005 24.6631 28.8854 24.4364 28.7993ZM23.6367 29.3501C23.6367 29.35 23.6367 29.3499 23.6367 29.3497V29.3501Z"
+        fill="#037DD6"
+        stroke="#037DD6"
+      />
+      <path
+        d="M17.967 23.5994H12.8346C12.61 23.5994 12.4253 23.7836 12.4251 24.0094V24.1723C12.4251 24.3974 12.6091 24.5814 12.8342 24.5814H17.967C18.1924 24.5814 18.3766 24.397 18.3766 24.1723V24.009C18.3766 23.7836 18.1923 23.5994 17.967 23.5994Z"
+        fill="#037DD6"
+        stroke="#037DD6"
+      />
+    </svg>
+  )
+}