Send flow UI update (#19465)

* removed recents and added accounts in send flow

* updated add contact button and fixed full screen view

* updated ui for contacts

* fixed lint errors and test

* fixed lint errors

* fixed lint errors

* updated spec files

* fixed lint errors

* updated snapshot

* fixed edit in spec files

* removed unused console statement

* updated snapshot

* added userInput check

* updated snapshot and added hover

app/_locales/am/messages.json

@@ -87,9 +87,6 @@
   "back": {
     "message": "ተመለስ"
   },
-  "backToAll": {
-    "message": "ወደ ሁሉም ተመለስ"
-  },
   "backupApprovalInfo": {
     "message": "መሳሪያዎ ቢጠፋ፣ የይለፍ ቃልዎን ቢረሱ፣ MetaMask እንደገና መጫን ቢያስፈልግዎ ወይም በሌላ መሳሪያ ወደ ቋትዎ ለመድረስ ቢፈልጉ ይህ ሚስጥራዊ ኮድ ቋትዎን መልሶ ለማግኘት ያስፈልጋል።"
   },
@@ -560,9 +557,6 @@
   "readdToken": {
     "message": "በመለያ አማራጮችዎ ምናሌ ውስጥ ወደ “ተለዋጭ ስም አክል” በመግባት ለወደፊቱ ይህን ተለዋጭ ስም መልሰው ማከል ይችላሉ።"
   },
-  "recents": {
-    "message": "የቅርብ ጊዜያት"
-  },
   "recipientAddressPlaceholder": {
     "message": "ፍለጋ፣ ለሕዝብ ክፍት የሆነ አድራሻ (0x), ወይም ENS"
   },
@@ -786,9 +780,6 @@
   "transfer": {
     "message": "ያስተላልፉ"
   },
-  "transferBetweenAccounts": {
-    "message": "በመለያዎች መካከል አስተላልፍ"
-  },
   "transferFrom": {
     "message": "የማዛወሪያ ቅጽ"
   },

app/_locales/ar/messages.json

@@ -97,9 +97,6 @@
   "back": {
     "message": "الرجوع إلى الوراء"
   },
-  "backToAll": {
-    "message": "العودة إلى الجميع"
-  },
   "backupApprovalInfo": {
     "message": "هذا الرمز السري مطلوب لاسترداد محفظتك في حالة فقد جهازك أو نسيان كلمة مرورك أو إعادة تثبيت MetaMask أو الرغبة في الوصول إلى محفظتك عبر جهاز آخر."
   },
@@ -572,9 +569,6 @@
   "readdToken": {
     "message": "يمكنك إضافة هذه العملة الرمزية مرة أخرى في المستقبل من خلال الانتقال إلى \"إضافة عملة رمزية\" في قائمة خيارات الحسابات الخاصة بك."
   },
-  "recents": {
-    "message": "الحديث"
-  },
   "recipientAddressPlaceholder": {
     "message": "البحث، العنوان العام (0x)، أو ENS"
   },
@@ -798,9 +792,6 @@
   "transfer": {
     "message": "تحويل"
   },
-  "transferBetweenAccounts": {
-    "message": "التحويل بين حساباتي"
-  },
   "transferFrom": {
     "message": "التحويل من"
   },

app/_locales/bg/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Назад"
   },
-  "backToAll": {
-    "message": "Назад към всички"
-  },
   "backupApprovalInfo": {
     "message": "Този секретен код е необходим за възстановяване на портфейла ви, в случай че загубите устройството си, забравите паролата си, трябва да инсталирате отново MetaMask или искате да получите достъп до портфейла си на друго устройство."
   },
@@ -571,9 +568,6 @@
   "readdToken": {
     "message": "Можете да добавите този жетон в бъдеще, като отидете на „Добавяне на жетон“ в менюто с опции на акаунти."
   },
-  "recents": {
-    "message": "Скорошни"
-  },
   "recipientAddressPlaceholder": {
     "message": "Търсене, публичен адрес (0x) или ENS"
   },
@@ -797,9 +791,6 @@
   "transfer": {
     "message": "Трансфер"
   },
-  "transferBetweenAccounts": {
-    "message": "Прехвърляне между моите акаунти"
-  },
   "transferFrom": {
     "message": "Трансфер от"
   },

app/_locales/bn/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "ফিরুন"
   },
-  "backToAll": {
-    "message": "সমস্ততে ফিরে আসুন"
-  },
   "backupApprovalInfo": {
     "message": "আপনি আপনার ডিভাইস হারিয়ে ফেললে, পাসওয়ার্ড ভুলে গেলে, MetaMask রিইনস্টল করতে হলে বা অন্য ডিভাইসে আপনার ওয়ালেট অ্যাক্সেস করার ক্ষেত্রে আপনার ওয়ালেট পুনরুদ্ধার করতে এই গোপন কোডটি প্রয়োজন।"
   },
@@ -569,9 +566,6 @@
   "readdToken": {
     "message": "আপনি আপনার অ্যাকাউন্টস বিকল্পের মেনুতে \"টোকেনগুলি যোগ করুন\" এ গিয়ে ভবিষ্যতে আবার এই টোকেনটি যোগ করতে পারবেন। "
   },
-  "recents": {
-    "message": "সাম্প্রতিকগুলি"
-  },
   "recipientAddressPlaceholder": {
     "message": "অনুসন্ধান, সার্বজনীন ঠিকানা (0x), বা ENS"
   },
@@ -795,9 +789,6 @@
   "transfer": {
     "message": "ট্রান্সফার করুন"
   },
-  "transferBetweenAccounts": {
-    "message": "আমার অ্যাকাউন্টগুলির মধ্যে ট্রান্সফার করুন"
-  },
   "transferFrom": {
     "message": "থেকে ট্রান্সফার করুন"
   },

app/_locales/ca/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Enrere"
   },
-  "backToAll": {
-    "message": "Torna a Tot"
-  },
   "backupApprovalInfo": {
     "message": "Aquest codi secret es requereix per recuperar el teu moneder en cas que perdis el dispositiu, oblidis la teva contrasenya, hagis de reinstal·lar MetaMask, o vulguis accedir al teu moneder des d'un altre dispositiu."
   },
@@ -773,9 +770,6 @@
   "transfer": {
     "message": "Transferència"
   },
-  "transferBetweenAccounts": {
-    "message": "Transferir entre els meus comptes"
-  },
   "transferFrom": {
     "message": "Transferir Des de"
   },

app/_locales/da/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Tilbage"
   },
-  "backToAll": {
-    "message": "Tilbage til Alle"
-  },
   "backupApprovalInfo": {
     "message": "Den hemmelige kode er påkrævet for at gendanne din pung, hvis du mister din enhed, glemmer dit kodeord, er nødt til at geninstallere MetaMask eller ønsker adgang til din pung fra en anden enhed."
   },
@@ -556,9 +553,6 @@
   "readdToken": {
     "message": "Du kan tilføje denne token i fremtiden, ved at gå til \"Tilføj token\" under dine valgmenuen for dine konti."
   },
-  "recents": {
-    "message": "Seneste"
-  },
   "recipientAddressPlaceholder": {
     "message": "Søg, offentlig adresse (0x) eller ENS"
   },
@@ -770,9 +764,6 @@
   "transfer": {
     "message": "Overfør"
   },
-  "transferBetweenAccounts": {
-    "message": "Overfør mellem konti"
-  },
   "transferFrom": {
     "message": "Overfør fra"
   },

app/_locales/de/messages.json

@@ -423,9 +423,6 @@
   "back": {
     "message": "Zurück"
   },
-  "backToAll": {
-    "message": "Zurück zur Übersicht"
-  },
   "backup": {
     "message": "Datensicherung"
   },
@@ -2796,9 +2793,6 @@
   "receive": {
     "message": "Erhalten"
   },
-  "recents": {
-    "message": "Letzte"
-  },
   "recipientAddressPlaceholder": {
     "message": "Suchen, öffentliche Adresse (0x) oder ENS"
   },
@@ -4064,9 +4058,6 @@
   "transfer": {
     "message": "Überweisung"
   },
-  "transferBetweenAccounts": {
-    "message": "Zwischen meinen Konten transferieren"
-  },
   "transferFrom": {
     "message": "Transferieren von"
   },

app/_locales/el/messages.json

@@ -423,9 +423,6 @@
   "back": {
     "message": "Πίσω"
   },
-  "backToAll": {
-    "message": "Πίσω σε Όλα"
-  },
   "backup": {
     "message": "Αντίγραφο ασφαλείας"
   },
@@ -2796,9 +2793,6 @@
   "receive": {
     "message": "Λήψη"
   },
-  "recents": {
-    "message": "Πρόσφατα"
-  },
   "recipientAddressPlaceholder": {
     "message": "Αναζήτηση, δημόσια διεύθυνση (0x) ή ENS"
   },
@@ -4061,9 +4055,6 @@
   "transfer": {
     "message": "Μεταφορά"
   },
-  "transferBetweenAccounts": {
-    "message": "Μεταφορά μεταξύ λογαριασμών μου"
-  },
   "transferFrom": {
     "message": "Μεταφορά Από"
   },

app/_locales/en/messages.json

@@ -469,9 +469,6 @@
   "back": {
     "message": "Back"
   },
-  "backToAll": {
-    "message": "Back to all"
-  },
   "backup": {
     "message": "Backup"
   },
@@ -3262,11 +3259,8 @@
   "receive": {
     "message": "Receive"
   },
-  "recents": {
-    "message": "Recents"
-  },
   "recipientAddressPlaceholder": {
-    "message": "Search, public address (0x), or ENS"
+    "message": "Enter public address (0x) or ENS name"
   },
   "recommendedGasLabel": {
     "message": "Recommended"
@@ -4742,9 +4736,6 @@
   "transfer": {
     "message": "Transfer"
   },
-  "transferBetweenAccounts": {
-    "message": "Transfer between my accounts"
-  },
   "transferFrom": {
     "message": "Transfer from"
   },

app/_locales/es/messages.json

@@ -423,9 +423,6 @@
   "back": {
     "message": "Volver"
   },
-  "backToAll": {
-    "message": "Volver a Todos"
-  },
   "backup": {
     "message": "Respaldo"
   },
@@ -2796,9 +2793,6 @@
   "receive": {
     "message": "Recibir"
   },
-  "recents": {
-    "message": "Recientes"
-  },
   "recipientAddressPlaceholder": {
     "message": "Búsqueda, dirección pública (0x) o ENS"
   },
@@ -4064,9 +4058,6 @@
   "transfer": {
     "message": "Transferir"
   },
-  "transferBetweenAccounts": {
-    "message": "Transferir entre mis cuentas"
-  },
   "transferFrom": {
     "message": "Transferir desde"
   },

app/_locales/es_419/messages.json

@@ -250,9 +250,6 @@
   "back": {
     "message": "Volver"
   },
-  "backToAll": {
-    "message": "Volver a Todos"
-  },
   "backupApprovalInfo": {
     "message": "Este código secreto es necesario para que recupere la cartera en caso de que pierda el dispositivo, olvide su contraseña, tenga que volver a instalar MetaMask o quiera acceder a la cartera en otro dispositivo."
   },
@@ -1800,9 +1797,6 @@
   "receive": {
     "message": "Recibir"
   },
-  "recents": {
-    "message": "Recientes"
-  },
   "recipientAddressPlaceholder": {
     "message": "Búsqueda, dirección pública (0x) o ENS"
   },
@@ -2660,9 +2654,6 @@
   "transfer": {
     "message": "Transferir"
   },
-  "transferBetweenAccounts": {
-    "message": "Transferir entre mis cuentas"
-  },
   "transferFrom": {
     "message": "Transferir desde"
   },

app/_locales/et/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Tagasi"
   },
-  "backToAll": {
-    "message": "Tagasi kõigile"
-  },
   "backupApprovalInfo": {
     "message": "See salakood on vajalik teie rahakoti taastamiseks, kui kaotate oma seadme, unustate parooli, peate MetaMaski uuesti alla laadima, või kui soovite avada oma rahakoti mõnel teisel seadmel."
   },
@@ -565,9 +562,6 @@
   "readdToken": {
     "message": "Saate selle loa tulevikus tagasi lisada, kui lähete oma kontovalikute menüüs vahelehele „Lisa luba“."
   },
-  "recents": {
-    "message": "Hiljutised"
-  },
   "recipientAddressPlaceholder": {
     "message": "Otsing, avalik aadress (0x) või ENS"
   },
@@ -791,9 +785,6 @@
   "transfer": {
     "message": "Ülekandmine"
   },
-  "transferBetweenAccounts": {
-    "message": "Ülekandmine minu kontode vahel"
-  },
   "transferFrom": {
     "message": "Ülekandmine asukohast"
   },

app/_locales/fa/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "بازگشت"
   },
-  "backToAll": {
-    "message": "برگشت به همه"
-  },
   "backupApprovalInfo": {
     "message": "در صورت مفقود شدن دستگاه، فراموش شدن رمز عبور، لزوم نصب-دوباره MetaMask، یا اقدام دسترسی به کیف تان از دستگاه دیگر، کود مخفی جهت بازیابی کیف تان، لازم خواهد بود."
   },
@@ -575,9 +572,6 @@
   "readdToken": {
     "message": "شما میتوانید این رمزیاب را دوباره برای آینده با رفتن به گزینه \"Add token\" در مینوی تنظیمات حساب ها، اضافه نمایید."
   },
-  "recents": {
-    "message": "واپسین"
-  },
   "recipientAddressPlaceholder": {
     "message": "جستجو، آدرس عمومی (0x)، یا ENS"
   },
@@ -801,9 +795,6 @@
   "transfer": {
     "message": "انتقال"
   },
-  "transferBetweenAccounts": {
-    "message": "انتقال میان حساب های من"
-  },
   "transferFrom": {
     "message": "انتقال از"
   },

app/_locales/fi/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Edellinen"
   },
-  "backToAll": {
-    "message": "Takaisin kaikkiin"
-  },
   "backupApprovalInfo": {
     "message": "Tämä salainen koodi vaaditaan kukkarosi palauttamiseen siinä tapauksessa, että kadotat laitteesi, unohdat salasanasi, joudut asentamaan MetaMaskin uudestaan tai haluat käyttää lompakkoasi jollakin toisella laitteella."
   },
@@ -572,9 +569,6 @@
   "readdToken": {
     "message": "Voit lisätä tämän tietueen myöhemmin takaisin siirtymällä tilisi vaihtoehtovalikon kohtaan ”Lisää tietue”."
   },
-  "recents": {
-    "message": "Viimeaikaiset"
-  },
   "recipientAddressPlaceholder": {
     "message": "Haku, julkinen osoite (0x) tai ENS"
   },
@@ -798,9 +792,6 @@
   "transfer": {
     "message": "Siirrä"
   },
-  "transferBetweenAccounts": {
-    "message": "Siirrä tilieni välillä"
-  },
   "transferFrom": {
     "message": "Siirto kohteesta"
   },

app/_locales/fil/messages.json

@@ -81,9 +81,6 @@
   "back": {
     "message": "Bumalik"
   },
-  "backToAll": {
-    "message": "Bumalik sa Lahat"
-  },
   "backupApprovalInfo": {
     "message": "Ang secret code na ito ay kinakailangan para ma-recover ang iyong wallet kung sakaling mawawala mo ang iyong device, nakalimutan mo ang iyong password, kailangan mong i-install ulit ang MetaMask, o gusto mong i-access ang iyong wallet sa ibang device."
   },
@@ -499,9 +496,6 @@
   "readdToken": {
     "message": "Puwede mong idagdag ulit ang token na ito sa hinaharap sa pamamagitan ng pagpunta sa “Magdagdag ng token” sa menu ng mga opsyon ng iyong mga accounts."
   },
-  "recents": {
-    "message": "Kamakailan"
-  },
   "recipientAddressPlaceholder": {
     "message": "Maghanap, pampublikong address (0x), o ENS"
   },
@@ -713,9 +707,6 @@
   "transfer": {
     "message": "Mag-transfer"
   },
-  "transferBetweenAccounts": {
-    "message": "Mag-transfer sa pagitan ng aking mga account"
-  },
   "transferFrom": {
     "message": "I-transfer Mula Sa"
   },

app/_locales/fr/messages.json

@@ -423,9 +423,6 @@
   "back": {
     "message": "Retour"
   },
-  "backToAll": {
-    "message": "Retour à Tous"
-  },
   "backup": {
     "message": "Sauvegarder"
   },
@@ -2796,9 +2793,6 @@
   "receive": {
     "message": "Recevoir"
   },
-  "recents": {
-    "message": "Récents"
-  },
   "recipientAddressPlaceholder": {
     "message": "Recherche, adresse publique (0x) ou ENS"
   },
@@ -4064,9 +4058,6 @@
   "transfer": {
     "message": "Transfert"
   },
-  "transferBetweenAccounts": {
-    "message": "Transfert entre mes comptes"
-  },
   "transferFrom": {
     "message": "Transfert depuis"
   },

app/_locales/he/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "חזור"
   },
-  "backToAll": {
-    "message": "חזרה אל 'הכל'"
-  },
   "backupApprovalInfo": {
     "message": "קוד סודי זה נדרש כדי לשחזר את הארנק שלך במקרה שתאבד/י את מכשירך, תשכח/י את הססמה, תצטרכ/י להתקין מחדש את MetaMask או שתרצה/י לגשת לארנק שלך במכשיר אחר."
   },
@@ -572,9 +569,6 @@
   "readdToken": {
     "message": "באפשרותך להוסיף טוקן זה בחזרה בעתיד על ידי מעבר אל \"הוסף טוקן\" בתפריט אפשרויות החשבונות שלך."
   },
-  "recents": {
-    "message": "אחרונים"
-  },
   "recipientAddressPlaceholder": {
     "message": "חיפוש, כתובת ציבורית (0x), או ENS"
   },
@@ -798,9 +792,6 @@
   "transfer": {
     "message": "העברה"
   },
-  "transferBetweenAccounts": {
-    "message": "בצע העברה בין חשבונותיי"
-  },
   "transferFrom": {
     "message": "העברה מ-"
   },

app/_locales/hi/messages.json

@@ -423,9 +423,6 @@
   "back": {
     "message": "वापस"
   },
-  "backToAll": {
-    "message": "सभी पर वापस"
-  },
   "backup": {
     "message": "बैकअप"
   },
@@ -2796,9 +2793,6 @@
   "receive": {
     "message": "प्राप्त करें"
   },
-  "recents": {
-    "message": "हाल ही के"
-  },
   "recipientAddressPlaceholder": {
     "message": "खोज, सार्वजनिक पता (0x) या ENS"
   },
@@ -4064,9 +4058,6 @@
   "transfer": {
     "message": "स्थानांतरण"
   },
-  "transferBetweenAccounts": {
-    "message": "मेरे खातों के बीच स्थानांतरित करें"
-  },
   "transferFrom": {
     "message": "इससे स्थानांतरित करें"
   },

app/_locales/hr/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Natrag"
   },
-  "backToAll": {
-    "message": "Natrag na sve"
-  },
   "backupApprovalInfo": {
     "message": "Ovaj je sigurnosni kôd potreban za obnavljanje novčanika ako izgubite svoj uređaj, zaboravite svoju lozinku, morate ponovno instalirati MetaMask ili želite pristupiti svojem novčaniku na drugom uređaju."
   },
@@ -568,9 +565,6 @@
   "readdToken": {
     "message": "Ovaj token možete dodati kasnije odlaskom pod stavku „Dodaj token” u izborniku mogućnosti računa. "
   },
-  "recents": {
-    "message": "Nedavno"
-  },
   "recipientAddressPlaceholder": {
     "message": "Pretraži, javne adrese (0x) ili ENS"
   },
@@ -791,9 +785,6 @@
   "transfer": {
     "message": "Prenesi"
   },
-  "transferBetweenAccounts": {
-    "message": "Prenesi između mojih računa"
-  },
   "transferFrom": {
     "message": "Prenesi od"
   },

app/_locales/hu/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Vissza"
   },
-  "backToAll": {
-    "message": "Vissza az összeshez"
-  },
   "backupApprovalInfo": {
     "message": "Ez a titkos kód a tárca helyreállításához szükséges, ha elveszíti eszközét, elfelejti jelszavát, újra kell telepítenie a MetaMask alkalmazást, vagy ha a tárcájához egy másik eszközről szeretne hozzáférni."
   },
@@ -568,9 +565,6 @@
   "readdToken": {
     "message": "Ezt a tokent a jövőben is hozzáadhatja, ha a fiókbeállítások menü „Token hozzáadása” elemére lép."
   },
-  "recents": {
-    "message": "Legutóbbiak"
-  },
   "recipientAddressPlaceholder": {
     "message": "Keresés, nyilvános cím (0x) vagy ENS"
   },
@@ -791,9 +785,6 @@
   "transfer": {
     "message": "Átutalás"
   },
-  "transferBetweenAccounts": {
-    "message": "Fiókok közötti küldés"
-  },
   "transferFrom": {
     "message": "Átvezetés innen: "
   },

app/_locales/id/messages.json

@@ -423,9 +423,6 @@
   "back": {
     "message": "Kembali"
   },
-  "backToAll": {
-    "message": "Kembali ke semua"
-  },
   "backup": {
     "message": "Pencadangan"
   },
@@ -2796,9 +2793,6 @@
   "receive": {
     "message": "Terima"
   },
-  "recents": {
-    "message": "Terkini"
-  },
   "recipientAddressPlaceholder": {
     "message": "Cari, alamat publik (0x), atau ENS"
   },
@@ -4064,9 +4058,6 @@
   "transfer": {
     "message": "Transfer"
   },
-  "transferBetweenAccounts": {
-    "message": "Transfer antar akun saya"
-  },
   "transferFrom": {
     "message": "Transfer dari"
   },

app/_locales/it/messages.json

@@ -333,9 +333,6 @@
   "back": {
     "message": "Indietro"
   },
-  "backToAll": {
-    "message": "Torna a \"Tutti\""
-  },
   "backupApprovalInfo": {
     "message": "Questo codice è necessario per recuperare il tuo portafoglio nel caso in cui perdi il tuo dispositivo, dimentichi la tua password, debba reinstallare MetaMask o voglia accedere al tuo portafoglio su un altro dispositivo."
   },
@@ -1332,9 +1329,6 @@
   "receive": {
     "message": "Ricevi"
   },
-  "recents": {
-    "message": "Recenti"
-  },
   "recipientAddressPlaceholder": {
     "message": "Ricerca, indirizzo pubblico (0x) o ENS"
   },
@@ -1818,9 +1812,6 @@
   "transfer": {
     "message": "Trasferisci"
   },
-  "transferBetweenAccounts": {
-    "message": "Trasferimento tra i miei account"
-  },
   "transferFrom": {
     "message": "Trasferisci Da"
   },

app/_locales/ja/messages.json

@@ -423,9 +423,6 @@
   "back": {
     "message": "戻る"
   },
-  "backToAll": {
-    "message": "一覧に戻る"
-  },
   "backup": {
     "message": "バックアップ"
   },
@@ -2796,9 +2793,6 @@
   "receive": {
     "message": "受領"
   },
-  "recents": {
-    "message": "最近"
-  },
   "recipientAddressPlaceholder": {
     "message": "検索、パブリックアドレス (0x)、またはENS"
   },
@@ -4064,9 +4058,6 @@
   "transfer": {
     "message": "送金"
   },
-  "transferBetweenAccounts": {
-    "message": "自分のアカウント間での振替"
-  },
   "transferFrom": {
     "message": "送金元"
   },

app/_locales/kn/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "ಹಿಂದೆ"
   },
-  "backToAll": {
-    "message": "ಎಲ್ಲವನ್ನು ಹಿಂತಿರುಗಿಸಿ"
-  },
   "backupApprovalInfo": {
     "message": "ನಿಮ್ಮ ಸಾಧನವನ್ನು ನೀವು ಕಳೆದುಕೊಂಡಾಗ, ನಿಮ್ಮ ಪಾಸ್‌ವರ್ಡ್ ಅನ್ನು ಮರೆತರೆ, MetaMask ಅನ್ನು ಮರು-ಸ್ಥಾಪಿಸಲು ಅಥವಾ ಬೇರೊಂದು ಸಾಧನದಲ್ಲಿ ನಿಮ್ಮ ವ್ಯಾಲೆಟ್‌ ಅನ್ನು ಪ್ರವೇಶಿಸಲು ಬಯಸಿದ ಸಂದರ್ಭದಲ್ಲಿ ನಿಮ್ಮ ವ್ಯಾಲೆಟ್‌ ಅನ್ನು ಮರುಪಡೆದುಕೊಳ್ಳಲು ಈ ರಹಸ್ಯ ಕೋಡ್ ಅಗತ್ಯವಿರುತ್ತದೆ."
   },
@@ -575,9 +572,6 @@
   "readdToken": {
     "message": "ನಿಮ್ಮ ಖಾತೆಗಳ ಆಯ್ಕೆಗಳ ಮೆನುವಿನಲ್ಲಿ \"ಟೋಕನ್ ಸೇರಿಸು\" ಗೆ ಹೋಗುವ ಮೂಲಕ ನೀವು ಈ ಟೋಕನ್ ಅನ್ನು ಭವಿಷ್ಯದಲ್ಲಿ ಮರಳಿ ಸೇರಿಸಬಹುದು."
   },
-  "recents": {
-    "message": "ಇತ್ತೀಚಿನವುಗಳು"
-  },
   "recipientAddressPlaceholder": {
     "message": "ಸಾರ್ವಜನಿಕ ವಿಳಾಸ (0x) ಅಥವಾ ENS ಹುಡುಕಿ"
   },
@@ -801,9 +795,6 @@
   "transfer": {
     "message": "ವರ್ಗಾಯಿಸಿ"
   },
-  "transferBetweenAccounts": {
-    "message": "ನನ್ನ ಖಾತೆಗಳ ನಡುವೆ ವರ್ಗಾಯಿಸಿ"
-  },
   "transferFrom": {
     "message": "ಇದರಿಂದ ವರ್ಗಾಯಿಸಿ"
   },

app/_locales/ko/messages.json

@@ -423,9 +423,6 @@
   "back": {
     "message": "뒤로"
   },
-  "backToAll": {
-    "message": "전체 목록으로 돌아가기"
-  },
   "backup": {
     "message": "백업"
   },
@@ -2796,9 +2793,6 @@
   "receive": {
     "message": "받기"
   },
-  "recents": {
-    "message": "최근"
-  },
   "recipientAddressPlaceholder": {
     "message": "검색, 공개 주소(0x) 또는 ENS"
   },
@@ -4064,9 +4058,6 @@
   "transfer": {
     "message": "전송"
   },
-  "transferBetweenAccounts": {
-    "message": "내 계정 간 전송"
-  },
   "transferFrom": {
     "message": "전송 위치"
   },

app/_locales/lt/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Grįžti"
   },
-  "backToAll": {
-    "message": "Atgal prie visų"
-  },
   "backupApprovalInfo": {
     "message": "Šis slaptas kodas reikalingas norint atkurti jūsų slaptažodinę, jeigu pamestumėte savo įrenginį, pamirštumėte savo slaptažodį, iš naujo įdiegtumėte „MetaMask“, taip pat norint pasiekti slaptažodinę iš kito įrenginio."
   },
@@ -575,9 +572,6 @@
   "readdToken": {
     "message": "Šį žetoną galite bet kada galite įtraukti ir vėl, tiesiog savo paskyros parinkčių meniu nueikite  į „Įtraukti žetoną“."
   },
-  "recents": {
-    "message": "Naujausi"
-  },
   "recipientAddressPlaceholder": {
     "message": "Ieška, viešieji adresai (0x) arba ENS"
   },
@@ -801,9 +795,6 @@
   "transfer": {
     "message": "Pervesti"
   },
-  "transferBetweenAccounts": {
-    "message": "Perkėlimas tarp savo paskyrų"
-  },
   "transferFrom": {
     "message": "Pervedimas iš"
   },

app/_locales/lv/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Atpakaļ"
   },
-  "backToAll": {
-    "message": "Atgriezties pie visiem"
-  },
   "backupApprovalInfo": {
     "message": "Šis slepenais kods ir nepieciešams, lai atjaunotu jūsu maku, ja pazaudējat ierīci, aizmirstat paroli, jāpārinstalē MetaMask vai vēlaties piekļūt makam no citas ierīces."
   },
@@ -571,9 +568,6 @@
   "readdToken": {
     "message": "Jūs varat šo marķieri iestatīt atpakaļ nākotnē, konta opciju izvēlnē atverot \"Pievienot marķieri\"."
   },
-  "recents": {
-    "message": "Nesenie"
-  },
   "recipientAddressPlaceholder": {
     "message": "Meklēšana, publiskā adrese (0x) vai ENS"
   },
@@ -797,9 +791,6 @@
   "transfer": {
     "message": "Pārsūtīt"
   },
-  "transferBetweenAccounts": {
-    "message": "Pārsūtīt starp saviem kontiem"
-  },
   "transferFrom": {
     "message": "Nosūtīt no"
   },

app/_locales/ms/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Kembali"
   },
-  "backToAll": {
-    "message": "Kembali kepada Semua"
-  },
   "backupApprovalInfo": {
     "message": "Kod rahsia ini diperlukan untuk memulihkan dompet anda sekiranya anda kehilangan peranti anda, terlupa kata laluan anda, perlu memasang semua MetaMask, atau mahu mengakses dompet anda menggunakan peranti lain."
   },
@@ -555,9 +552,6 @@
   "readdToken": {
     "message": "Anda boleh tambah token ini kembali pada masa depan dengan pergi ke \"Tambah token\" di dalam menu pilihan akaun anda."
   },
-  "recents": {
-    "message": "Baru-baru ini"
-  },
   "recipientAddressPlaceholder": {
     "message": "Cari, alamat awam (0x), atau ENS"
   },
@@ -778,9 +772,6 @@
   "transfer": {
     "message": "Pindah"
   },
-  "transferBetweenAccounts": {
-    "message": "Pindahkan antara akaun saya"
-  },
   "transferFrom": {
     "message": "Pindah Daripada"
   },

app/_locales/no/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Tilbake"
   },
-  "backToAll": {
-    "message": "Tilbake til alt"
-  },
   "backupApprovalInfo": {
     "message": "Denne hemmelige koden behøves for å gjenopprette lommeboken din i tilfelle du mister enheten din, glemmer passordet ditt, trenger å re-installere MetaMask, eller ønsker å få tilgang til lommeboken din på en annen enhet."
   },
@@ -559,9 +556,6 @@
   "readdToken": {
     "message": "Du kan legge til dette tokenet igjen i fremtiden ved å gå til \"Legg til token\" i menyen for kontoalternativer."
   },
-  "recents": {
-    "message": "Nylige"
-  },
   "recipientAddressPlaceholder": {
     "message": "Søk, offentlig adresse (0x) eller ENS"
   },
@@ -776,9 +770,6 @@
   "transfer": {
     "message": "Overfør"
   },
-  "transferBetweenAccounts": {
-    "message": "Overfør mellom kontoene mine"
-  },
   "transferFrom": {
     "message": "Overfør fra"
   },

app/_locales/ph/messages.json

@@ -161,9 +161,6 @@
   "back": {
     "message": "Bumalik"
   },
-  "backToAll": {
-    "message": "Bumalik sa Lahat"
-  },
   "backupApprovalInfo": {
     "message": "Ang lihim na code na ito ay kinakailangan para ma-recover ang iyong wallet sakaling maiwala mo ang iyong device, makalimutan ang iyong password, kailanganin mong i-install ulit ang MetaMask, o gusto mong i-access ang iyong wallet sa ibang device."
   },
@@ -1129,9 +1126,6 @@
   "receive": {
     "message": "Tumanggap"
   },
-  "recents": {
-    "message": "Mga Kamakailan"
-  },
   "recipientAddressPlaceholder": {
     "message": "Maghanap, pampublikong address (0x), o ENS"
   },
@@ -1778,9 +1772,6 @@
   "transfer": {
     "message": "Mag-transfer"
   },
-  "transferBetweenAccounts": {
-    "message": "Mag-transfer sa iba't ibang account ko"
-  },
   "transferFrom": {
     "message": "Mag-transfer Mula Kay/Sa"
   },

app/_locales/pl/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Wstecz"
   },
-  "backToAll": {
-    "message": "Wróć do wszystkich"
-  },
   "backupApprovalInfo": {
     "message": "Ten tajny kod jest wymagany do odzyskania portfela w przypadku zgubienia urządzenia, zapomnienia hasła, ponownego zainstalowania MetaMask lub potrzeby uzyskania dostępu do portfela na innym urządzeniu."
   },
@@ -569,9 +566,6 @@
   "readdToken": {
     "message": "Możesz później ponownie dodać ten token poprzez \"Dodaj token\" w opcjach menu swojego konta."
   },
-  "recents": {
-    "message": "Ostatnie"
-  },
   "recipientAddressPlaceholder": {
     "message": "Szukaj, adres publiczny (0x) lub ENS"
   },
@@ -789,9 +783,6 @@
   "transfer": {
     "message": "Przelew"
   },
-  "transferBetweenAccounts": {
-    "message": "Przelew między moimi kontami"
-  },
   "transferFrom": {
     "message": "Przelew z"
   },

app/_locales/pt/messages.json

@@ -423,9 +423,6 @@
   "back": {
     "message": "Voltar"
   },
-  "backToAll": {
-    "message": "Voltar para todos"
-  },
   "backup": {
     "message": "Backup"
   },
@@ -2796,9 +2793,6 @@
   "receive": {
     "message": "Receber"
   },
-  "recents": {
-    "message": "Recentes"
-  },
   "recipientAddressPlaceholder": {
     "message": "Pesquisa, endereço público (0x) ou ENS"
   },
@@ -4064,9 +4058,6 @@
   "transfer": {
     "message": "Transferir"
   },
-  "transferBetweenAccounts": {
-    "message": "Transferir entre minhas contas"
-  },
   "transferFrom": {
     "message": "Transferir de"
   },

app/_locales/pt_BR/messages.json

@@ -250,9 +250,6 @@
   "back": {
     "message": "Voltar"
   },
-  "backToAll": {
-    "message": "Voltar para todos"
-  },
   "backupApprovalInfo": {
     "message": "Esse código secreto é obrigatório para recuperar sua carteira caso você perca seu dispositivo, esqueça sua senha, precise reinstalar a MetaMask ou queira acessar sua carteira em outro dispositivo."
   },
@@ -1800,9 +1797,6 @@
   "receive": {
     "message": "Receber"
   },
-  "recents": {
-    "message": "Recentes"
-  },
   "recipientAddressPlaceholder": {
     "message": "Busca, endereço público (0x) ou ENS"
   },
@@ -2660,9 +2654,6 @@
   "transfer": {
     "message": "Transferir"
   },
-  "transferBetweenAccounts": {
-    "message": "Transferência entre minhas contas"
-  },
   "transferFrom": {
     "message": "Transferir de"
   },

app/_locales/ro/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Înapoi"
   },
-  "backToAll": {
-    "message": "Înapoi la toate"
-  },
   "backupApprovalInfo": {
     "message": "Acest cod secret este necesar pentru recuperarea portofelului în cazul în care pierdeți dispozitivul, uitați parola, trebuie să reinstalați MetaMask sau vreți să accesați portofelul de pe alt dispozitiv."
   },
@@ -562,9 +559,6 @@
   "readdToken": {
     "message": "Puteți adăuga din nou acest indicativ în viitor accesând „Adăugați indicativ” din meniul de opțiuni al contului dvs."
   },
-  "recents": {
-    "message": "Recente"
-  },
   "recipientAddressPlaceholder": {
     "message": "Căutare, adresa publică (0x) sau ENS"
   },
@@ -782,9 +776,6 @@
   "transactionUpdated": {
     "message": "Tranzacție actualizată la $2."
   },
-  "transferBetweenAccounts": {
-    "message": "Transferă între conturile mele"
-  },
   "transferFrom": {
     "message": "Transferați de la"
   },

app/_locales/ru/messages.json

@@ -423,9 +423,6 @@
   "back": {
     "message": "Назад"
   },
-  "backToAll": {
-    "message": "Назад ко всем"
-  },
   "backup": {
     "message": "Резервное копирование"
   },
@@ -2796,9 +2793,6 @@
   "receive": {
     "message": "Получить"
   },
-  "recents": {
-    "message": "Недавние"
-  },
   "recipientAddressPlaceholder": {
     "message": "Поиск, открытый адрес (0x) или ENS"
   },
@@ -4064,9 +4058,6 @@
   "transfer": {
     "message": "Перевести"
   },
-  "transferBetweenAccounts": {
-    "message": "Перевод между моими счетами"
-  },
   "transferFrom": {
     "message": "Перевести с"
   },

app/_locales/sk/messages.json

@@ -90,9 +90,6 @@
   "back": {
     "message": "Zpět"
   },
-  "backToAll": {
-    "message": "Späť na všetko"
-  },
   "backupApprovalInfo": {
     "message": "Tento tajný kód je potrebný na obnovenie peňaženky v prípade straty zariadenia, zabudnutia hesla, preinštalovania MetaMask alebo prístupu k peňaženke na inom zariadení."
   },
@@ -547,9 +544,6 @@
   "readdToken": {
     "message": "Tento token můžete v budoucnu přidat zpět s „Přidat token“ v nastavení účtu."
   },
-  "recents": {
-    "message": "Posledné"
-  },
   "recipientAddressPlaceholder": {
     "message": "Vyhľadávať verejnú adresu (0x) alebo ENS"
   },
@@ -767,9 +761,6 @@
   "transfer": {
     "message": "Prevod"
   },
-  "transferBetweenAccounts": {
-    "message": "Prevod medzi mojimi účtami"
-  },
   "transferFrom": {
     "message": "Presun z"
   },

app/_locales/sl/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Nazaj"
   },
-  "backToAll": {
-    "message": "Nazaj na vse"
-  },
   "backupApprovalInfo": {
     "message": "Ta skrivna koda je potrebna za obnovitev denarnice, če izgubite napravo, pozabite geslo, ponovno namestite MetaMask ali želite dostopati do denarnice v drugi napravi."
   },
@@ -563,9 +560,6 @@
   "readdToken": {
     "message": "Ta žeton lahko dodate tudi kasneje z uporabo gumba “Dodaj žeton” v možnostih vašega računa."
   },
-  "recents": {
-    "message": "Nedavno"
-  },
   "recipientAddressPlaceholder": {
     "message": "Iskanje, javni naslov (0x) ali ENS"
   },
@@ -789,9 +783,6 @@
   "transfer": {
     "message": "Prenesi"
   },
-  "transferBetweenAccounts": {
-    "message": "Prenos med mojimi računi"
-  },
   "transferFrom": {
     "message": "Prenesi od"
   },

app/_locales/sr/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Назад"
   },
-  "backToAll": {
-    "message": "Povratak na Sve"
-  },
   "backupApprovalInfo": {
     "message": "Potreban je tajni kôd za oporavak vašeg novčanika u slučaju da izgubite uređaj, zaboravite lozinku, morate ponovo da instalirate MetaMask ili želite da pristupite novčaniku sa drugog uređaja."
   },
@@ -566,9 +563,6 @@
   "readdToken": {
     "message": "U budućnosti možete vratiti ovaj token tako što ćete otvoriti „Dodaj token“ u meniju opcija vašeg naloga."
   },
-  "recents": {
-    "message": "Skorašnje"
-  },
   "recipientAddressPlaceholder": {
     "message": "Pretraga, javna adresa (0x) ili ENS"
   },
@@ -789,9 +783,6 @@
   "transfer": {
     "message": "Prenos"
   },
-  "transferBetweenAccounts": {
-    "message": "Prenos između mojih naloga"
-  },
   "transferFrom": {
     "message": "Prebacite iz"
   },

app/_locales/sv/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Bakåt"
   },
-  "backToAll": {
-    "message": "Tillbaka till Alla"
-  },
   "backupApprovalInfo": {
     "message": "Den hemliga koden krävs för att komma åt din plånbok ifall du tappar bort din enhet, glömmer ditt lösenord, behöver installera om MetaMask eller om du vill komma åt din plånbok på en annan enhet."
   },
@@ -559,9 +556,6 @@
   "readdToken": {
     "message": "Du kan lägga till denna token i framtiden genom att välja \"Lägg till token\" i kontots alternativmeny."
   },
-  "recents": {
-    "message": "Senaste"
-  },
   "recipientAddressPlaceholder": {
     "message": "Sök, allmän adress (0x) eller ENS"
   },
@@ -776,9 +770,6 @@
   "transfer": {
     "message": "Överföring"
   },
-  "transferBetweenAccounts": {
-    "message": "Överför mellan mina konton"
-  },
   "transferFrom": {
     "message": "Överför från"
   },

app/_locales/sw/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Nyuma"
   },
-  "backToAll": {
-    "message": "Rudi kwenye Zote"
-  },
   "backupApprovalInfo": {
     "message": "Msimbo huu wa siri unahitajika ili kurejesha waleti yako ikitokea umepoteza kifaa chako, umesahau nenosiri lako, umelazimika kusakinisha MetaMask, au unataka kufikia waleti yako kwenye kifaa kingine."
   },
@@ -553,9 +550,6 @@
   "readdToken": {
     "message": "Unaweza kuongeza tena kianzio hiki hapo baadaye kwa kwenda kwenye \"Ongeza kianzio\" kwenye machaguo yako ya menyu ya akaunti."
   },
-  "recents": {
-    "message": "Za hivi karibuni"
-  },
   "recipientAddressPlaceholder": {
     "message": "Tafuta, anwani za umma (0x), au ENS"
   },
@@ -779,9 +773,6 @@
   "transfer": {
     "message": "Kutuma"
   },
-  "transferBetweenAccounts": {
-    "message": "Kutuma baina ya akaunti zangu"
-  },
   "transferFrom": {
     "message": "Tuma Kutoka"
   },

app/_locales/th/messages.json

@@ -395,9 +395,6 @@
   "transactionDropped": {
     "message": "ธุรกรรมถูกยกเลิกเมื่อ $2"
   },
-  "transferBetweenAccounts": {
-    "message": "โอนระหว่างบัญชีของฉัน"
-  },
   "typePassword": {
     "message": "พิมพ์รหัสผ่านของคุณ"
   },

app/_locales/tl/messages.json

@@ -423,9 +423,6 @@
   "back": {
     "message": "Bumalik"
   },
-  "backToAll": {
-    "message": "Bumalik sa Lahat"
-  },
   "backup": {
     "message": "I-backup"
   },
@@ -2796,9 +2793,6 @@
   "receive": {
     "message": "Tumanggap"
   },
-  "recents": {
-    "message": "Mga Kamakailan"
-  },
   "recipientAddressPlaceholder": {
     "message": "Maghanap, pampublikong address (0x), o ENS"
   },
@@ -4064,9 +4058,6 @@
   "transfer": {
     "message": "Mag-transfer"
   },
-  "transferBetweenAccounts": {
-    "message": "Mag-transfer sa iba't ibang account ko"
-  },
   "transferFrom": {
     "message": "Mag-transfer Mula Kay/Sa"
   },

app/_locales/tr/messages.json

@@ -423,9 +423,6 @@
   "back": {
     "message": "Geri"
   },
-  "backToAll": {
-    "message": "Tümüne Geri Git"
-  },
   "backup": {
     "message": "Yedekle"
   },
@@ -2796,9 +2793,6 @@
   "receive": {
     "message": "Al"
   },
-  "recents": {
-    "message": "Son Kullanılanlar"
-  },
   "recipientAddressPlaceholder": {
     "message": "Ara, genel adres (0x) veya ENS"
   },
@@ -4064,9 +4058,6 @@
   "transfer": {
     "message": "Transfer et"
   },
-  "transferBetweenAccounts": {
-    "message": "Hesaplarım arası transfer"
-  },
   "transferFrom": {
     "message": "Transfer kaynağı:"
   },

app/_locales/uk/messages.json

@@ -93,9 +93,6 @@
   "back": {
     "message": "Назад"
   },
-  "backToAll": {
-    "message": "Повернутися до всіх"
-  },
   "backupApprovalInfo": {
     "message": "Цей секретний код буде потрібен, щоб відновити ваш гаманець у разі втрати вашого пристрою, забуття паролю, потреби у перевстановленні MetaMask або виникнення бажання отримати доступ до вашого гаманця з іншого пристрою."
   },
@@ -575,9 +572,6 @@
   "readdToken": {
     "message": "Ви можете знову додати цей токен у меню облікового запису у розділі “Додати токен”. "
   },
-  "recents": {
-    "message": "Останні"
-  },
   "recipientAddressPlaceholder": {
     "message": "Пошук, публічна адреса (0x), або ENS"
   },
@@ -801,9 +795,6 @@
   "transfer": {
     "message": "Передати"
   },
-  "transferBetweenAccounts": {
-    "message": "Передати між моїми обліковими записами"
-  },
   "transferFrom": {
     "message": "Передати від"
   },

app/_locales/vi/messages.json

@@ -423,9 +423,6 @@
   "back": {
     "message": "Quay lại"
   },
-  "backToAll": {
-    "message": "Quay lại toàn bộ danh sách"
-  },
   "backup": {
     "message": "Sao lưu"
   },
@@ -2796,9 +2793,6 @@
   "receive": {
     "message": "Nhận"
   },
-  "recents": {
-    "message": "Gần đây"
-  },
   "recipientAddressPlaceholder": {
     "message": "Tìm kiếm, địa chỉ công khai (0x) hoặc ENS"
   },
@@ -4064,9 +4058,6 @@
   "transfer": {
     "message": "Chuyển"
   },
-  "transferBetweenAccounts": {
-    "message": "Chuyển giữa các tài khoản của tôi"
-  },
   "transferFrom": {
     "message": "Chuyển từ"
   },

app/_locales/zh_CN/messages.json

@@ -423,9 +423,6 @@
   "back": {
     "message": "返回"
   },
-  "backToAll": {
-    "message": "返回全部"
-  },
   "backup": {
     "message": "备份"
   },
@@ -2796,9 +2793,6 @@
   "receive": {
     "message": "接收"
   },
-  "recents": {
-    "message": "最近"
-  },
   "recipientAddressPlaceholder": {
     "message": "搜索、公共地址 (0x) 或 ENS"
   },
@@ -4064,9 +4058,6 @@
   "transfer": {
     "message": "转移"
   },
-  "transferBetweenAccounts": {
-    "message": "在我的账户之间转移"
-  },
   "transferFrom": {
     "message": "转移自"
   },

app/_locales/zh_TW/messages.json

@@ -160,9 +160,6 @@
   "back": {
     "message": "上一頁"
   },
-  "backToAll": {
-    "message": "回到全部"
-  },
   "backupApprovalInfo": {
     "message": "在裝置遺失、忘記密碼、需要重新安裝 MetaMask、或是想在另一裝置開啟錢包的情形下，你需要此秘密代碼來復原錢包。"
   },
@@ -1075,9 +1072,6 @@
   "receive": {
     "message": "接收"
   },
-  "recents": {
-    "message": "最近"
-  },
   "recipientAddressPlaceholder": {
     "message": "搜尋、公開位址 (0x)、或 ENS"
   },
@@ -1454,9 +1448,6 @@
   "transfer": {
     "message": "交易"
   },
-  "transferBetweenAccounts": {
-    "message": "在我的帳戶間轉帳"
-  },
   "transferFrom": {
     "message": "交易來源"
   },

test/e2e/metamask-ui.spec.js

@@ -282,7 +282,7 @@ describe('MetaMask', function () {
       await driver.delay(regularDelayMs);
 
       await driver.fill(
-        'input[placeholder="Search, public address (0x), or ENS"]',
+        'input[placeholder="Enter public address (0x) or ENS name"]',
         '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
       );
 

test/e2e/nft/send-nft.spec.js

@@ -34,7 +34,7 @@ describe('Send NFT', function () {
         await driver.clickElement('.nft-item__item-image');
         await driver.clickElement({ text: 'Send', tag: 'button' });
         await driver.fill(
-          'input[placeholder="Search, public address (0x), or ENS"]',
+          'input[placeholder="Enter public address (0x) or ENS name"]',
           '0xc427D562164062a23a5cFf596A4a3208e72Acd28',
         );
         await driver.clickElement({ text: 'Next', tag: 'button' });

test/e2e/tests/address-book.spec.js

@@ -107,20 +107,20 @@ describe('Address Book', function () {
         );
         await driver.clickElement({ text: 'Settings', tag: 'div' });
         await driver.clickElement({ text: 'Contacts', tag: 'div' });
-        await driver.clickElement('[data-testid="recipient"]');
+        await driver.clickElement({ text: 'Test Name 1', tag: 'p' });
 
         await driver.clickElement({ text: 'Edit', tag: 'button' });
         const inputUsername = await driver.findElement('#nickname');
         await inputUsername.fill('Test Name Edit');
-
         const inputAddress = await driver.findElement('#address');
+
         await inputAddress.fill('0x74cE91B75935D6Bedc27eE002DeFa566c5946f74');
 
         await driver.clickElement('[data-testid="page-container-footer-next"]');
 
         const recipientUsername = await driver.findElement({
           text: 'Test Name Edit',
-          tag: 'div',
+          tag: 'p',
         });
         assert.equal(
           await recipientUsername.getText(),
@@ -171,7 +171,7 @@ describe('Address Book', function () {
         await driver.clickElement({ text: 'Settings', tag: 'div' });
         await driver.clickElement({ text: 'Contacts', tag: 'div' });
 
-        await driver.clickElement({ text: 'Test Name 1', tag: 'div' });
+        await driver.clickElement({ text: 'Test Name 1', tag: 'p' });
         await driver.clickElement({ text: 'Edit', tag: 'button' });
         await driver.clickElement({ text: 'Delete account', tag: 'a' });
         // it checks if account is deleted

test/e2e/tests/ens.spec.js

@@ -102,7 +102,7 @@ describe('ENS', function () {
         await driver.clickElement('[data-testid="eth-overview-send"]');
 
         await driver.pasteIntoField(
-          'input[placeholder="Search, public address (0x), or ENS"]',
+          'input[placeholder="Enter public address (0x) or ENS name"]',
           sampleEnsDomain,
         );
 

test/e2e/tests/from-import-ui.spec.js

@@ -109,7 +109,7 @@ describe('MetaMask Import UI', function () {
         // starts a send transaction
         await driver.clickElement('[data-testid="eth-overview-send"]');
         await driver.fill(
-          'input[placeholder="Search, public address (0x), or ENS"]',
+          'input[placeholder="Enter public address (0x) or ENS name"]',
           '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
         );
         await driver.fill('.unit-input__input', '1');

test/e2e/tests/metamask-responsive-ui.spec.js

@@ -142,7 +142,7 @@ describe('MetaMask Responsive UI', function () {
         await driver.clickElement('[data-testid="eth-overview-send"]');
 
         await driver.fill(
-          'input[placeholder="Search, public address (0x), or ENS"]',
+          'input[placeholder="Enter public address (0x) or ENS name"]',
           '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
         );
 

test/e2e/tests/network-error.spec.js

@@ -75,7 +75,7 @@ describe('Gas API fallback', function () {
         await driver.clickElement('[data-testid="eth-overview-send"]');
 
         await driver.fill(
-          'input[placeholder="Search, public address (0x), or ENS"]',
+          'input[placeholder="Enter public address (0x) or ENS name"]',
           '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
         );
 

test/e2e/tests/send-eth.spec.js

@@ -35,7 +35,7 @@ describe('Send ETH from inside MetaMask using default gas', function () {
         await driver.clickElement('[data-testid="eth-overview-send"]');
 
         await driver.fill(
-          'input[placeholder="Search, public address (0x), or ENS"]',
+          'input[placeholder="Enter public address (0x) or ENS name"]',
           '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
         );
 
@@ -128,7 +128,7 @@ describe('Send ETH non-contract address with data that matches ERC20 transfer da
         await driver.clickElement('[data-testid="eth-overview-send"]');
 
         await driver.fill(
-          'input[placeholder="Search, public address (0x), or ENS"]',
+          'input[placeholder="Enter public address (0x) or ENS name"]',
           '0xc427D562164062a23a5cFf596A4a3208e72Acd28',
         );
 
@@ -181,7 +181,7 @@ describe('Send ETH from inside MetaMask using advanced gas modal', function () {
         await driver.clickElement('[data-testid="eth-overview-send"]');
 
         await driver.fill(
-          'input[placeholder="Search, public address (0x), or ENS"]',
+          'input[placeholder="Enter public address (0x) or ENS name"]',
           '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
         );
 
@@ -423,7 +423,7 @@ describe('Send ETH from inside MetaMask to a Multisig Address', function () {
         await driver.clickElement('[data-testid="eth-overview-send"]');
 
         await driver.fill(
-          'input[placeholder="Search, public address (0x), or ENS"]',
+          'input[placeholder="Enter public address (0x) or ENS name"]',
           contractAddress,
         );
 

test/e2e/tests/send-hex-address.spec.js

@@ -38,7 +38,7 @@ describe('Send ETH to a 40 character hexadecimal address', function () {
 
         // Paste address without hex prefix
         await driver.pasteIntoField(
-          'input[placeholder="Search, public address (0x), or ENS"]',
+          'input[placeholder="Enter public address (0x) or ENS name"]',
           nonHexPrefixedAddress,
         );
         await driver.waitForSelector({
@@ -83,7 +83,7 @@ describe('Send ETH to a 40 character hexadecimal address', function () {
 
         // Type address without hex prefix
         await driver.fill(
-          'input[placeholder="Search, public address (0x), or ENS"]',
+          'input[placeholder="Enter public address (0x) or ENS name"]',
           nonHexPrefixedAddress,
         );
         await driver.waitForSelector({
@@ -148,7 +148,7 @@ describe('Send ERC20 to a 40 character hexadecimal address', function () {
 
         // Paste address without hex prefix
         await driver.pasteIntoField(
-          'input[placeholder="Search, public address (0x), or ENS"]',
+          'input[placeholder="Enter public address (0x) or ENS name"]',
           nonHexPrefixedAddress,
         );
         await driver.waitForSelector({
@@ -212,7 +212,7 @@ describe('Send ERC20 to a 40 character hexadecimal address', function () {
 
         // Type address without hex prefix
         await driver.fill(
-          'input[placeholder="Search, public address (0x), or ENS"]',
+          'input[placeholder="Enter public address (0x) or ENS name"]',
           nonHexPrefixedAddress,
         );
         await driver.waitForSelector({

test/e2e/tests/send-to-contract.spec.js

@@ -41,7 +41,7 @@ describe('Send ERC20 token to contract address', function () {
 
         // Type contract address
         await driver.fill(
-          'input[placeholder="Search, public address (0x), or ENS"]',
+          'input[placeholder="Enter public address (0x) or ENS name"]',
           contractAddress,
         );
 

test/e2e/user-actions-benchmark.js

@@ -66,7 +66,7 @@ async function confirmTx() {
       await driver.clickElement('[data-testid="eth-overview-send"]');
 
       await driver.fill(
-        'input[placeholder="Search, public address (0x), or ENS"]',
+        'input[placeholder="Enter public address (0x) or ENS name"]',
         '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
       );
 

ui/components/app/contact-list/contact-list.component.js

@@ -31,12 +31,6 @@ export default class ContactList extends PureComponent {
 
     return (
       <div className="send__select-recipient-wrapper__recent-group-wrapper">
-        <RecipientGroup
-          label={t('recents')}
-          items={showLoadMore ? nonContacts.slice(0, 2) : nonContacts}
-          onSelect={this.props.selectRecipient}
-          selectedAddress={this.props.selectedAddress}
-        />
         {showLoadMore && (
           <Button
             type="link"

ui/components/app/contact-list/recipient-group/recipient-group.component.js

@@ -3,6 +3,12 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Identicon from '../../../ui/identicon';
 import { ellipsify } from '../../../../pages/send/send.utils';
+import Box from '../../../ui/box';
+import {
+  TextColor,
+  TextVariant,
+} from '../../../../helpers/constants/design-system';
+import { Text } from '../../../component-library';
 
 function addressesEqual(address1, address2) {
   return String(address1).toLowerCase() === String(address2).toLowerCase();
@@ -19,17 +25,23 @@ export default function RecipientGroup({
   }
 
   return (
-    <div
+    <Box
       className="send__select-recipient-wrapper__group"
       data-testid="recipient-group"
     >
       {label && (
-        <div className="send__select-recipient-wrapper__group-label">
+        <Box
-          {label}
+          className="send__select-recipient-wrapper__group-label"
-        </div>
+          marginTop={2}
+          marginBottom={2}
+          marginLeft={4}
+          marginRight={4}
+        >
+          <Text variant={TextVariant.bodyMd}>{label}</Text>
+        </Box>
       )}
       {items.map(({ address, name }) => (
-        <div
+        <Box
           key={address}
           onClick={() => onSelect(address, name)}
           className={classnames({
@@ -40,24 +52,32 @@ export default function RecipientGroup({
             'send__select-recipient-wrapper__group-item--selected':
               addressesEqual(address, selectedAddress),
           })}
+          padding={4}
         >
           <Identicon address={address} diameter={28} />
-          <div
+          <Box
             className="send__select-recipient-wrapper__group-item__content"
             data-testid="recipient"
           >
-            <div className="send__select-recipient-wrapper__group-item__title">
+            <Text
+              variant={TextVariant.bodyLgMedium}
+              className="send__select-recipient-wrapper__group-item__title"
+            >
               {name || ellipsify(address)}
-            </div>
+            </Text>
             {name && (
-              <div className="send__select-recipient-wrapper__group-item__subtitle">
+              <Text
+                variant={TextVariant.bodyMd}
+                color={TextColor.textAlternative}
+                className="send__select-recipient-wrapper__group-item__subtitle"
+              >
                 {ellipsify(address)}
-              </div>
+              </Text>
             )}
-          </div>
+          </Box>
-        </div>
+        </Box>
       ))}
-    </div>
+    </Box>
   );
 }
 

ui/pages/send/send-content/add-recipient/__snapshots__/add-recipient.component.test.js.snap

@@ -3,8 +3,278 @@
 exports[`Add Recipient Component Domain Resolution should match snapshot 1`] = `
 <div>
   <div
-    class="send__select-recipient-wrapper"
+    class="box send__select-recipient-wrapper box--flex-direction-row"
   >
+    <div
+      class="box box--margin-top-2 box--margin-right-4 box--margin-bottom-2 box--margin-left-4 box--flex-direction-row"
+    >
+      <p
+        class="box mm-text mm-text--body-lg-medium box--flex-direction-row box--color-text-alternative"
+      >
+        My accounts
+      </p>
+    </div>
+    <div
+      class="send__select-recipient-wrapper__list"
+    >
+      <div
+        class="box send__select-recipient-wrapper__group box--flex-direction-row"
+        data-testid="recipient-group"
+      >
+        <div
+          class="box send__select-recipient-wrapper__group-item box--padding-4 box--flex-direction-row"
+        >
+          <div
+            class=""
+          >
+            <div
+              class="identicon"
+              style="height: 28px; width: 28px; border-radius: 14px;"
+            >
+              <div
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 28px; height: 28px; display: inline-block; background: rgb(250, 58, 0);"
+              >
+                <svg
+                  height="28"
+                  width="28"
+                  x="0"
+                  y="0"
+                >
+                  <rect
+                    fill="#18CDF2"
+                    height="28"
+                    transform="translate(-0.9173443158196976 -2.8912485607779366) rotate(328.9 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#035E56"
+                    height="28"
+                    transform="translate(-16.01115399522804 9.268404137780026) rotate(176.2 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#F26602"
+                    height="28"
+                    transform="translate(14.584361765945934 -12.429497257622447) rotate(468.9 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="box send__select-recipient-wrapper__group-item__content box--flex-direction-row"
+            data-testid="recipient"
+          >
+            <p
+              class="box mm-text send__select-recipient-wrapper__group-item__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
+            >
+              Test Account
+            </p>
+            <p
+              class="box mm-text send__select-recipient-wrapper__group-item__subtitle mm-text--body-md box--flex-direction-row box--color-text-alternative"
+            >
+              0x0dcd...e7bc
+            </p>
+          </div>
+        </div>
+        <div
+          class="box send__select-recipient-wrapper__group-item box--padding-4 box--flex-direction-row"
+        >
+          <div
+            class=""
+          >
+            <div
+              class="identicon"
+              style="height: 28px; width: 28px; border-radius: 14px;"
+            >
+              <div
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 28px; height: 28px; display: inline-block; background: rgb(245, 143, 0);"
+              >
+                <svg
+                  height="28"
+                  width="28"
+                  x="0"
+                  y="0"
+                >
+                  <rect
+                    fill="#018E74"
+                    height="28"
+                    transform="translate(5.524091896954402 -4.749745570944453) rotate(358.4 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#18CAF2"
+                    height="28"
+                    transform="translate(6.724913619395038 -10.621076649467508) rotate(414.8 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#C81474"
+                    height="28"
+                    transform="translate(-4.907795154940259 -21.945972385956175) rotate(322.3 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="box send__select-recipient-wrapper__group-item__content box--flex-direction-row"
+            data-testid="recipient"
+          >
+            <p
+              class="box mm-text send__select-recipient-wrapper__group-item__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
+            >
+              Test Account 2
+            </p>
+            <p
+              class="box mm-text send__select-recipient-wrapper__group-item__subtitle mm-text--body-md box--flex-direction-row box--color-text-alternative"
+            >
+              0xec1a...251b
+            </p>
+          </div>
+        </div>
+        <div
+          class="box send__select-recipient-wrapper__group-item box--padding-4 box--flex-direction-row"
+        >
+          <div
+            class=""
+          >
+            <div
+              class="identicon"
+              style="height: 28px; width: 28px; border-radius: 14px;"
+            >
+              <div
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 28px; height: 28px; display: inline-block; background: rgb(249, 100, 1);"
+              >
+                <svg
+                  height="28"
+                  width="28"
+                  x="0"
+                  y="0"
+                >
+                  <rect
+                    fill="#C81432"
+                    height="28"
+                    transform="translate(-0.510690249475231 -2.7159619403490534) rotate(331.7 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#187AF2"
+                    height="28"
+                    transform="translate(-11.127931122273568 5.54021528290869) rotate(160.5 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#FB183E"
+                    height="28"
+                    transform="translate(25.084575445435807 -2.611206239472919) rotate(517.6 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="box send__select-recipient-wrapper__group-item__content box--flex-direction-row"
+            data-testid="recipient"
+          >
+            <p
+              class="box mm-text send__select-recipient-wrapper__group-item__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
+            >
+              Test Ledger 1
+            </p>
+            <p
+              class="box mm-text send__select-recipient-wrapper__group-item__subtitle mm-text--body-md box--flex-direction-row box--color-text-alternative"
+            >
+              0xc42e...8813
+            </p>
+          </div>
+        </div>
+        <div
+          class="box send__select-recipient-wrapper__group-item box--padding-4 box--flex-direction-row"
+        >
+          <div
+            class=""
+          >
+            <div
+              class="identicon"
+              style="height: 28px; width: 28px; border-radius: 14px;"
+            >
+              <div
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 28px; height: 28px; display: inline-block; background: rgb(242, 206, 2);"
+              >
+                <svg
+                  height="28"
+                  width="28"
+                  x="0"
+                  y="0"
+                >
+                  <rect
+                    fill="#2340E1"
+                    height="28"
+                    transform="translate(-1.7054541409645272 -0.893781972900803) rotate(257.0 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#016D8E"
+                    height="28"
+                    transform="translate(11.213543194590896 2.66257866392058) rotate(77.0 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#F5F500"
+                    height="28"
+                    transform="translate(11.486654880888956 -19.46641853277226) rotate(465.0 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="box send__select-recipient-wrapper__group-item__content box--flex-direction-row"
+            data-testid="recipient"
+          >
+            <p
+              class="box mm-text send__select-recipient-wrapper__group-item__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
+            >
+              Test Account 3
+            </p>
+            <p
+              class="box mm-text send__select-recipient-wrapper__group-item__subtitle mm-text--body-md box--flex-direction-row box--color-text-alternative"
+            >
+              0xeb9e...4823
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
     <div
       class="send__select-recipient-wrapper__group-item"
     >
@@ -70,283 +340,17 @@ exports[`Add Recipient Component Domain Resolution should match snapshot 1`] = `
 exports[`Add Recipient Component Own Account Recipient Search should match snapshot 1`] = `
 <div>
   <div
-    class="send__select-recipient-wrapper"
+    class="box send__select-recipient-wrapper box--flex-direction-row"
   >
     <div
       class="send__select-recipient-wrapper__list"
     >
-      <a
-        class="button btn-link send__select-recipient-wrapper__list__link"
-        role="button"
-        tabindex="0"
-      >
-        <span
-          class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
-          style="mask-image: url('./images/icons/arrow-left.svg');"
-        />
-        Back to all
-      </a>
       <div
-        class="send__select-recipient-wrapper__group"
+        class="send__select-recipient-wrapper__list"
-        data-testid="recipient-group"
       >
         <div
-          class="send__select-recipient-wrapper__group-label"
+          class="send__select-recipient-wrapper__recent-group-wrapper"
-        >
+        />
-          My accounts
-        </div>
-        <div
-          class="send__select-recipient-wrapper__group-item"
-        >
-          <div
-            class=""
-          >
-            <div
-              class="identicon"
-              style="height: 28px; width: 28px; border-radius: 14px;"
-            >
-              <div
-                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 28px; height: 28px; display: inline-block; background: rgb(250, 58, 0);"
-              >
-                <svg
-                  height="28"
-                  width="28"
-                  x="0"
-                  y="0"
-                >
-                  <rect
-                    fill="#18CDF2"
-                    height="28"
-                    transform="translate(-0.9173443158196976 -2.8912485607779366) rotate(328.9 14 14)"
-                    width="28"
-                    x="0"
-                    y="0"
-                  />
-                  <rect
-                    fill="#035E56"
-                    height="28"
-                    transform="translate(-16.01115399522804 9.268404137780026) rotate(176.2 14 14)"
-                    width="28"
-                    x="0"
-                    y="0"
-                  />
-                  <rect
-                    fill="#F26602"
-                    height="28"
-                    transform="translate(14.584361765945934 -12.429497257622447) rotate(468.9 14 14)"
-                    width="28"
-                    x="0"
-                    y="0"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-          <div
-            class="send__select-recipient-wrapper__group-item__content"
-            data-testid="recipient"
-          >
-            <div
-              class="send__select-recipient-wrapper__group-item__title"
-            >
-              Test Account
-            </div>
-            <div
-              class="send__select-recipient-wrapper__group-item__subtitle"
-            >
-              0x0dcd...e7bc
-            </div>
-          </div>
-        </div>
-        <div
-          class="send__select-recipient-wrapper__group-item"
-        >
-          <div
-            class=""
-          >
-            <div
-              class="identicon"
-              style="height: 28px; width: 28px; border-radius: 14px;"
-            >
-              <div
-                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 28px; height: 28px; display: inline-block; background: rgb(245, 143, 0);"
-              >
-                <svg
-                  height="28"
-                  width="28"
-                  x="0"
-                  y="0"
-                >
-                  <rect
-                    fill="#018E74"
-                    height="28"
-                    transform="translate(5.524091896954402 -4.749745570944453) rotate(358.4 14 14)"
-                    width="28"
-                    x="0"
-                    y="0"
-                  />
-                  <rect
-                    fill="#18CAF2"
-                    height="28"
-                    transform="translate(6.724913619395038 -10.621076649467508) rotate(414.8 14 14)"
-                    width="28"
-                    x="0"
-                    y="0"
-                  />
-                  <rect
-                    fill="#C81474"
-                    height="28"
-                    transform="translate(-4.907795154940259 -21.945972385956175) rotate(322.3 14 14)"
-                    width="28"
-                    x="0"
-                    y="0"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-          <div
-            class="send__select-recipient-wrapper__group-item__content"
-            data-testid="recipient"
-          >
-            <div
-              class="send__select-recipient-wrapper__group-item__title"
-            >
-              Test Account 2
-            </div>
-            <div
-              class="send__select-recipient-wrapper__group-item__subtitle"
-            >
-              0xec1a...251b
-            </div>
-          </div>
-        </div>
-        <div
-          class="send__select-recipient-wrapper__group-item"
-        >
-          <div
-            class=""
-          >
-            <div
-              class="identicon"
-              style="height: 28px; width: 28px; border-radius: 14px;"
-            >
-              <div
-                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 28px; height: 28px; display: inline-block; background: rgb(249, 100, 1);"
-              >
-                <svg
-                  height="28"
-                  width="28"
-                  x="0"
-                  y="0"
-                >
-                  <rect
-                    fill="#C81432"
-                    height="28"
-                    transform="translate(-0.510690249475231 -2.7159619403490534) rotate(331.7 14 14)"
-                    width="28"
-                    x="0"
-                    y="0"
-                  />
-                  <rect
-                    fill="#187AF2"
-                    height="28"
-                    transform="translate(-11.127931122273568 5.54021528290869) rotate(160.5 14 14)"
-                    width="28"
-                    x="0"
-                    y="0"
-                  />
-                  <rect
-                    fill="#FB183E"
-                    height="28"
-                    transform="translate(25.084575445435807 -2.611206239472919) rotate(517.6 14 14)"
-                    width="28"
-                    x="0"
-                    y="0"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-          <div
-            class="send__select-recipient-wrapper__group-item__content"
-            data-testid="recipient"
-          >
-            <div
-              class="send__select-recipient-wrapper__group-item__title"
-            >
-              Test Ledger 1
-            </div>
-            <div
-              class="send__select-recipient-wrapper__group-item__subtitle"
-            >
-              0xc42e...8813
-            </div>
-          </div>
-        </div>
-        <div
-          class="send__select-recipient-wrapper__group-item"
-        >
-          <div
-            class=""
-          >
-            <div
-              class="identicon"
-              style="height: 28px; width: 28px; border-radius: 14px;"
-            >
-              <div
-                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 28px; height: 28px; display: inline-block; background: rgb(242, 206, 2);"
-              >
-                <svg
-                  height="28"
-                  width="28"
-                  x="0"
-                  y="0"
-                >
-                  <rect
-                    fill="#2340E1"
-                    height="28"
-                    transform="translate(-1.7054541409645272 -0.893781972900803) rotate(257.0 14 14)"
-                    width="28"
-                    x="0"
-                    y="0"
-                  />
-                  <rect
-                    fill="#016D8E"
-                    height="28"
-                    transform="translate(11.213543194590896 2.66257866392058) rotate(77.0 14 14)"
-                    width="28"
-                    x="0"
-                    y="0"
-                  />
-                  <rect
-                    fill="#F5F500"
-                    height="28"
-                    transform="translate(11.486654880888956 -19.46641853277226) rotate(465.0 14 14)"
-                    width="28"
-                    x="0"
-                    y="0"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-          <div
-            class="send__select-recipient-wrapper__group-item__content"
-            data-testid="recipient"
-          >
-            <div
-              class="send__select-recipient-wrapper__group-item__title"
-            >
-              Test Account 3
-            </div>
-            <div
-              class="send__select-recipient-wrapper__group-item__subtitle"
-            >
-              0xeb9e...4823
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -356,7 +360,7 @@ exports[`Add Recipient Component Own Account Recipient Search should match snaps
 exports[`Add Recipient Component Send State should match snapshot 1`] = `
 <div>
   <div
-    class="send__select-recipient-wrapper"
+    class="box send__select-recipient-wrapper box--flex-direction-row"
   >
     <div
       class="send__select-recipient-wrapper__group-item"
@@ -435,35 +439,302 @@ exports[`Add Recipient Component Send State should match snapshot 1`] = `
 exports[`Add Recipient Component render should match snapshot 1`] = `
 <div>
   <div
-    class="send__select-recipient-wrapper"
+    class="box send__select-recipient-wrapper box--flex-direction-row"
   >
+    <div
+      class="box box--margin-top-2 box--margin-right-4 box--margin-bottom-2 box--margin-left-4 box--flex-direction-row"
+    >
+      <p
+        class="box mm-text mm-text--body-lg-medium box--flex-direction-row box--color-text-alternative"
+      >
+        My accounts
+      </p>
+    </div>
+    <div
+      class="send__select-recipient-wrapper__list"
+    >
+      <div
+        class="box send__select-recipient-wrapper__group box--flex-direction-row"
+        data-testid="recipient-group"
+      >
+        <div
+          class="box send__select-recipient-wrapper__group-item box--padding-4 box--flex-direction-row"
+        >
+          <div
+            class=""
+          >
+            <div
+              class="identicon"
+              style="height: 28px; width: 28px; border-radius: 14px;"
+            >
+              <div
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 28px; height: 28px; display: inline-block; background: rgb(250, 58, 0);"
+              >
+                <svg
+                  height="28"
+                  width="28"
+                  x="0"
+                  y="0"
+                >
+                  <rect
+                    fill="#18CDF2"
+                    height="28"
+                    transform="translate(-0.9173443158196976 -2.8912485607779366) rotate(328.9 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#035E56"
+                    height="28"
+                    transform="translate(-16.01115399522804 9.268404137780026) rotate(176.2 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#F26602"
+                    height="28"
+                    transform="translate(14.584361765945934 -12.429497257622447) rotate(468.9 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="box send__select-recipient-wrapper__group-item__content box--flex-direction-row"
+            data-testid="recipient"
+          >
+            <p
+              class="box mm-text send__select-recipient-wrapper__group-item__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
+            >
+              Test Account
+            </p>
+            <p
+              class="box mm-text send__select-recipient-wrapper__group-item__subtitle mm-text--body-md box--flex-direction-row box--color-text-alternative"
+            >
+              0x0dcd...e7bc
+            </p>
+          </div>
+        </div>
+        <div
+          class="box send__select-recipient-wrapper__group-item box--padding-4 box--flex-direction-row"
+        >
+          <div
+            class=""
+          >
+            <div
+              class="identicon"
+              style="height: 28px; width: 28px; border-radius: 14px;"
+            >
+              <div
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 28px; height: 28px; display: inline-block; background: rgb(245, 143, 0);"
+              >
+                <svg
+                  height="28"
+                  width="28"
+                  x="0"
+                  y="0"
+                >
+                  <rect
+                    fill="#018E74"
+                    height="28"
+                    transform="translate(5.524091896954402 -4.749745570944453) rotate(358.4 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#18CAF2"
+                    height="28"
+                    transform="translate(6.724913619395038 -10.621076649467508) rotate(414.8 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#C81474"
+                    height="28"
+                    transform="translate(-4.907795154940259 -21.945972385956175) rotate(322.3 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="box send__select-recipient-wrapper__group-item__content box--flex-direction-row"
+            data-testid="recipient"
+          >
+            <p
+              class="box mm-text send__select-recipient-wrapper__group-item__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
+            >
+              Test Account 2
+            </p>
+            <p
+              class="box mm-text send__select-recipient-wrapper__group-item__subtitle mm-text--body-md box--flex-direction-row box--color-text-alternative"
+            >
+              0xec1a...251b
+            </p>
+          </div>
+        </div>
+        <div
+          class="box send__select-recipient-wrapper__group-item box--padding-4 box--flex-direction-row"
+        >
+          <div
+            class=""
+          >
+            <div
+              class="identicon"
+              style="height: 28px; width: 28px; border-radius: 14px;"
+            >
+              <div
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 28px; height: 28px; display: inline-block; background: rgb(249, 100, 1);"
+              >
+                <svg
+                  height="28"
+                  width="28"
+                  x="0"
+                  y="0"
+                >
+                  <rect
+                    fill="#C81432"
+                    height="28"
+                    transform="translate(-0.510690249475231 -2.7159619403490534) rotate(331.7 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#187AF2"
+                    height="28"
+                    transform="translate(-11.127931122273568 5.54021528290869) rotate(160.5 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#FB183E"
+                    height="28"
+                    transform="translate(25.084575445435807 -2.611206239472919) rotate(517.6 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="box send__select-recipient-wrapper__group-item__content box--flex-direction-row"
+            data-testid="recipient"
+          >
+            <p
+              class="box mm-text send__select-recipient-wrapper__group-item__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
+            >
+              Test Ledger 1
+            </p>
+            <p
+              class="box mm-text send__select-recipient-wrapper__group-item__subtitle mm-text--body-md box--flex-direction-row box--color-text-alternative"
+            >
+              0xc42e...8813
+            </p>
+          </div>
+        </div>
+        <div
+          class="box send__select-recipient-wrapper__group-item box--padding-4 box--flex-direction-row"
+        >
+          <div
+            class=""
+          >
+            <div
+              class="identicon"
+              style="height: 28px; width: 28px; border-radius: 14px;"
+            >
+              <div
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 28px; height: 28px; display: inline-block; background: rgb(242, 206, 2);"
+              >
+                <svg
+                  height="28"
+                  width="28"
+                  x="0"
+                  y="0"
+                >
+                  <rect
+                    fill="#2340E1"
+                    height="28"
+                    transform="translate(-1.7054541409645272 -0.893781972900803) rotate(257.0 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#016D8E"
+                    height="28"
+                    transform="translate(11.213543194590896 2.66257866392058) rotate(77.0 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#F5F500"
+                    height="28"
+                    transform="translate(11.486654880888956 -19.46641853277226) rotate(465.0 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="box send__select-recipient-wrapper__group-item__content box--flex-direction-row"
+            data-testid="recipient"
+          >
+            <p
+              class="box mm-text send__select-recipient-wrapper__group-item__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
+            >
+              Test Account 3
+            </p>
+            <p
+              class="box mm-text send__select-recipient-wrapper__group-item__subtitle mm-text--body-md box--flex-direction-row box--color-text-alternative"
+            >
+              0xeb9e...4823
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
     <div
       class="send__select-recipient-wrapper__list"
     >
       <div
         class="send__select-recipient-wrapper__list"
       >
-        <a
-          class="button btn-link send__select-recipient-wrapper__list__link"
-          role="button"
-          tabindex="0"
-        >
-          Transfer between my accounts
-        </a>
         <div
           class="send__select-recipient-wrapper__recent-group-wrapper"
         />
         <div
-          class="send__select-recipient-wrapper__group"
+          class="box send__select-recipient-wrapper__group box--flex-direction-row"
           data-testid="recipient-group"
         >
           <div
-            class="send__select-recipient-wrapper__group-label"
+            class="box send__select-recipient-wrapper__group-label box--margin-top-2 box--margin-right-4 box--margin-bottom-2 box--margin-left-4 box--flex-direction-row"
           >
-            A
+            <p
+              class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
+            >
+              A
+            </p>
           </div>
           <div
-            class="send__select-recipient-wrapper__group-item"
+            class="box send__select-recipient-wrapper__group-item box--padding-4 box--flex-direction-row"
           >
             <div
               class=""
@@ -510,19 +781,19 @@ exports[`Add Recipient Component render should match snapshot 1`] = `
               </div>
             </div>
             <div
-              class="send__select-recipient-wrapper__group-item__content"
+              class="box send__select-recipient-wrapper__group-item__content box--flex-direction-row"
               data-testid="recipient"
             >
-              <div
+              <p
-                class="send__select-recipient-wrapper__group-item__title"
+                class="box mm-text send__select-recipient-wrapper__group-item__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
               >
                 Address Book Account 1
-              </div>
+              </p>
-              <div
+              <p
-                class="send__select-recipient-wrapper__group-item__subtitle"
+                class="box mm-text send__select-recipient-wrapper__group-item__subtitle mm-text--body-md box--flex-direction-row box--color-text-alternative"
               >
                 0xc42e...8813
-              </div>
+              </p>
             </div>
           </div>
         </div>

ui/pages/send/send-content/add-recipient/add-recipient.component.js

@@ -6,9 +6,13 @@ import Dialog from '../../../../components/ui/dialog';
 import ContactList from '../../../../components/app/contact-list';
 import RecipientGroup from '../../../../components/app/contact-list/recipient-group/recipient-group.component';
 import { ellipsify } from '../../send.utils';
-import Button from '../../../../components/ui/button';
 import Confusable from '../../../../components/ui/confusable';
-import { Icon, IconName } from '../../../../components/component-library';
+import { Text } from '../../../../components/component-library';
+import Box from '../../../../components/ui/box';
+import {
+  TextColor,
+  TextVariant,
+} from '../../../../helpers/constants/design-system';
 
 export default class AddRecipient extends Component {
   static propTypes = {
@@ -23,9 +27,6 @@ export default class AddRecipient extends Component {
     contacts: PropTypes.array,
     nonContacts: PropTypes.array,
     addHistoryEntry: PropTypes.func,
-    useMyAccountsForRecipientSearch: PropTypes.func,
-    useContactListForRecipientSearch: PropTypes.func,
-    isUsingMyAccountsForRecipientSearch: PropTypes.bool,
     recipient: PropTypes.shape({
       address: PropTypes.string,
       nickname: PropTypes.string,
@@ -106,7 +107,7 @@ export default class AddRecipient extends Component {
       recipient,
       userInput,
       addressBookEntryName,
-      isUsingMyAccountsForRecipientSearch,
+      ownedAccounts = [],
     } = this.props;
 
     let content;
@@ -123,15 +124,17 @@ export default class AddRecipient extends Component {
         addressBookEntryName || userInput,
         'ENS resolution',
       );
-    } else if (isUsingMyAccountsForRecipientSearch) {
-      content = this.renderTransfer();
     }
 
     return (
-      <div className="send__select-recipient-wrapper">
+      <Box className="send__select-recipient-wrapper">
+        {ownedAccounts &&
+          ownedAccounts.length > 1 &&
+          !userInput &&
+          this.renderTransfer()}
         {this.renderDialogs()}
         {content || this.renderMain()}
-      </div>
+      </Box>
     );
   }
 
@@ -158,15 +161,11 @@ export default class AddRecipient extends Component {
   }
 
   renderTransfer() {
-    let { ownedAccounts } = this.props;
-    const {
-      userInput,
-      useContactListForRecipientSearch,
-      isUsingMyAccountsForRecipientSearch,
-    } = this.props;
     const { t } = this.context;
+    let { ownedAccounts } = this.props;
+    const { userInput } = this.props;
 
-    if (isUsingMyAccountsForRecipientSearch && userInput) {
+    if (userInput) {
       ownedAccounts = ownedAccounts.filter(
         (item) =>
           item.name.toLowerCase().indexOf(userInput.toLowerCase()) > -1 ||
@@ -175,37 +174,42 @@ export default class AddRecipient extends Component {
     }
 
     return (
-      <div className="send__select-recipient-wrapper__list">
+      <>
-        <Button
+        <Box marginLeft={4} marginRight={4} marginTop={2} marginBottom={2}>
-          type="link"
+          <Text
-          className="send__select-recipient-wrapper__list__link"
+            variant={TextVariant.bodyLgMedium}
-          onClick={useContactListForRecipientSearch}
+            color={TextColor.textAlternative}
-        >
+          >
-          <Icon name={IconName.ArrowLeft} />
+            {t('myAccounts')}
-          {t('backToAll')}
+          </Text>
-        </Button>
+        </Box>
-        <RecipientGroup
+        <div className="send__select-recipient-wrapper__list">
-          label={t('myAccounts')}
+          <RecipientGroup
-          items={ownedAccounts}
+            items={ownedAccounts}
-          onSelect={(address, name) =>
+            onSelect={(address, name) =>
-            this.selectRecipient(address, name, 'my accounts')
+              this.selectRecipient(address, name, 'my accounts')
-          }
+            }
-        />
+          />
-      </div>
+        </div>
+      </>
     );
   }
 
   renderMain() {
     const { t } = this.context;
-    const {
+    const { addressBook, userInput } = this.props;
-      userInput,
-      ownedAccounts = [],
-      addressBook,
-      useMyAccountsForRecipientSearch,
-    } = this.props;
-
     return (
       <div className="send__select-recipient-wrapper__list">
+        {addressBook.length && userInput > 0 ? (
+          <Box marginLeft={4} marginRight={4} marginTop={2} marginBottom={2}>
+            <Text
+              variant={TextVariant.bodyLgMedium}
+              color={TextColor.textAlternative}
+            >
+              {t('contacts')}
+            </Text>
+          </Box>
+        ) : null}
         <ContactList
           addressBook={addressBook}
           searchForContacts={this.searchForContacts.bind(this)}
@@ -217,17 +221,7 @@ export default class AddRecipient extends Component {
               `${name ? 'contact' : 'recent'} list`,
             );
           }}
-        >
+        />
-          {ownedAccounts && ownedAccounts.length > 1 && !userInput && (
-            <Button
-              type="link"
-              className="send__select-recipient-wrapper__list__link"
-              onClick={useMyAccountsForRecipientSearch}
-            >
-              {t('transferBetweenAccounts')}
-            </Button>
-          )}
-        </ContactList>
       </div>
     );
   }

ui/pages/send/send-content/add-recipient/add-recipient.component.test.js

@@ -58,71 +58,4 @@ describe('Add Recipient Component', () => {
       expect(container).toMatchSnapshot();
     });
   });
-
-  describe('Recent recipient order', () => {
-    const recentRecipientState = {
-      ...mockState,
-      metamask: {
-        ...mockState.metamask,
-        addressBook: {
-          '0x5': {
-            '0x0000000000000000000000000000000000000001': {
-              address: '0x0000000000000000000000000000000000000001',
-              chainId: '0x5',
-              isEns: false,
-              memo: '',
-              name: '',
-            },
-            '0x0000000000000000000000000000000000000002': {
-              address: '0x0000000000000000000000000000000000000002',
-              chainId: '0x5',
-              isEns: false,
-              memo: '',
-              name: '',
-            },
-            '0x0000000000000000000000000000000000000003': {
-              address: '0x0000000000000000000000000000000000000003',
-              chainId: '0x5',
-              isEns: false,
-              memo: '',
-              name: '',
-            },
-          },
-        },
-        currentNetworkTxList: [
-          {
-            time: 1674425700001,
-            txParams: {
-              to: '0x0000000000000000000000000000000000000001',
-            },
-          },
-          {
-            time: 1674425700002,
-            txParams: {
-              to: '0x0000000000000000000000000000000000000002',
-            },
-          },
-          {
-            time: 1674425700003,
-            txParams: {
-              to: '0x0000000000000000000000000000000000000003',
-            },
-          },
-        ],
-      },
-    };
-    const mockStore = configureMockStore()(recentRecipientState);
-
-    it('should render latest used recipient first', () => {
-      const { getAllByTestId } = renderWithProvider(
-        <AddRecipient />,
-        mockStore,
-      );
-
-      const recipientList = getAllByTestId('recipient');
-
-      expect(recipientList[0]).toHaveTextContent('0x0000...0003');
-      expect(recipientList[1]).toHaveTextContent('0x0000...0002');
-    });
-  });
 });

ui/pages/send/send-content/add-recipient/add-recipient.container.js

@@ -11,7 +11,6 @@ import {
   updateRecipientUserInput,
   useMyAccountsForRecipientSearch,
   useContactListForRecipientSearch,
-  getIsUsingMyAccountForRecipientSearch,
   getRecipientUserInput,
   getRecipient,
   addHistoryEntry,
@@ -63,8 +62,6 @@ function mapStateToProps(state) {
     domainWarning: getDomainWarning(state),
     nonContacts,
     ownedAccounts,
-    isUsingMyAccountsForRecipientSearch:
-      getIsUsingMyAccountForRecipientSearch(state),
     userInput: getRecipientUserInput(state),
     recipient: getRecipient(state),
   };

ui/pages/send/send-content/add-recipient/add-recipient.container.test.js

@@ -35,8 +35,6 @@ jest.mock('../../../../ducks/send', () => ({
     `mockUseMyAccountsForRecipientSearch:${s}`,
   useContactListForRecipientSearch: (s) =>
     `mockUseContactListForRecipientSearch:${s}`,
-  getIsUsingMyAccountForRecipientSearch: (s) =>
-    `mockGetIsUsingMyAccountForRecipientSearch:${s}`,
   getRecipientUserInput: (s) => `mockRecipientUserInput:${s}`,
   getRecipient: (s) => `mockRecipient:${s}`,
 }));
@@ -58,8 +56,6 @@ describe('add-recipient container', () => {
           { name: 'account1:mockState' },
           { name: 'account2:mockState' },
         ],
-        isUsingMyAccountsForRecipientSearch:
-          'mockGetIsUsingMyAccountForRecipientSearch:mockState',
         userInput: 'mockRecipientUserInput:mockState',
         recipient: 'mockRecipient:mockState',
       });

ui/pages/send/send-content/add-recipient/add-recipient.stories.js

@@ -53,9 +53,7 @@ export default {
     useContactListForRecipientSearch: {
       action: 'useContactListForRecipientSearch',
     },
-    isUsingMyAccountsForRecipientSearch: {
+
-      control: 'bool',
-    },
     recipient: {
       control: 'object',
     },

ui/pages/send/send-content/add-recipient/domain-input.component.js

@@ -10,7 +10,6 @@ import {
 } from '../../../../../shared/modules/hexstring-utils';
 import {
   ButtonIcon,
-  Icon,
   IconName,
   IconSize,
 } from '../../../../components/component-library';
@@ -104,19 +103,6 @@ export default class DomainInput extends Component {
             'ens-input__wrapper--valid': hasSelectedAddress,
           })}
         >
-          {hasSelectedAddress ? (
-            <Icon
-              className="ens-input__wrapper__status-icon"
-              name={IconName.Check}
-              color={IconColor.successDefault}
-            />
-          ) : (
-            <Icon
-              name={IconName.Search}
-              color={IconColor.iconMuted}
-              className="ens-input__wrapper__status-icon"
-            />
-          )}
           {hasSelectedAddress ? (
             <>
               <div className="ens-input__wrapper__input ens-input__wrapper__input--selected">
@@ -160,7 +146,7 @@ export default class DomainInput extends Component {
                     this.props.scanQrCode();
                   }
                 }}
-                iconName={userInput ? IconName.Close : IconName.ScanBarcode}
+                iconName={userInput ? IconName.Close : IconName.Scan}
                 ariaLabel={t(userInput ? 'close' : 'scanQrCode')}
                 color={
                   userInput ? IconColor.iconDefault : IconColor.primaryDefault

ui/pages/send/send.scss

@@ -5,7 +5,6 @@
     position: relative;
     display: flex;
     justify-content: center;
-    background-color: var(--color-background-alternative);
     border-bottom: none;
     padding: 14px 0 3px 0;
 
@@ -48,8 +47,6 @@
     margin: 0;
     padding: 0.5rem;
     flex: 0 0 auto;
-    background-color: var(--color-background-alternative);
-    border-bottom: 1px solid var(--color-border-muted);
   }
 
   &__select-recipient-wrapper {
@@ -59,15 +56,12 @@
     height: 0;
 
     &__list {
-      overflow-y: auto;
-
       &__link {
         @include Paragraph;
 
         @extend %row-nowrap;
 
         padding: 1rem;
-        border-bottom: 1px solid var(--color-border-muted);
         border-radius: 0;
         align-items: center;
         justify-content: flex-start;
@@ -102,26 +96,11 @@
       @extend %col-nowrap;
     }
 
-    &__group-label {
-      @include H8;
-
-      background-color: var(--color-background-alternative);
-      color: var(--color-text-alternative);
-      padding: 0.5rem 1rem;
-      border-bottom: 1px solid var(--color-border-muted);
-
-      &:first-of-type {
-        border-top: 1px solid var(--color-border-muted);
-      }
-    }
-
     &__group-item,
     &__group-item--selected {
       @extend %row-nowrap;
 
-      padding: 0.75rem 1rem;
       align-items: center;
-      border-bottom: 1px solid var(--color-border-muted);
       cursor: pointer;
 
       &:hover {
@@ -139,22 +118,6 @@
         flex: 1 1 auto;
         width: 0;
       }
-
-      &__title {
-        @include H6;
-
-        max-width: 20em;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        color: var(--color-text-default);
-      }
-
-      &__subtitle {
-        @include H8;
-
-        color: var(--color-text-muted);
-      }
     }
 
     &__group-item--selected {

ui/pages/send/send.test.js

@@ -182,7 +182,7 @@ describe('Send Page', () => {
       const store = configureMockStore(middleware)(baseStore);
       const { getByPlaceholderText } = renderWithProvider(<Send />, store);
       expect(
-        getByPlaceholderText('Search, public address (0x), or ENS'),
+        getByPlaceholderText('Enter public address (0x) or ENS name'),
       ).toBeTruthy();
     });
 
@@ -205,7 +205,7 @@ describe('Send Page', () => {
       // Ensure that the send flow renders on the add recipient screen when
       // there is no draft transaction.
       expect(
-        getByPlaceholderText('Search, public address (0x), or ENS'),
+        getByPlaceholderText('Enter public address (0x) or ENS name'),
       ).toBeTruthy();
       // Ensure we start a new draft transaction when its missing.
       expect(startNewDraftTransaction).toHaveBeenCalledTimes(1);
@@ -247,7 +247,7 @@ describe('Send Page', () => {
       const store = configureMockStore(middleware)(baseStore);
       const { getByPlaceholderText } = renderWithProvider(<Send />, store);
       expect(
-        getByPlaceholderText('Search, public address (0x), or ENS'),
+        getByPlaceholderText('Enter public address (0x) or ENS name'),
       ).toBeTruthy();
     });
 

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

@@ -6,17 +6,17 @@ import {
   CONTACT_ADD_ROUTE,
   CONTACT_VIEW_ROUTE,
 } from '../../../helpers/constants/routes';
-import Button from '../../../components/ui/button';
 import {
   getNumberOfSettingsInSection,
   handleSettingsRefs,
 } from '../../../helpers/utils/settings-search';
 import {
+  ButtonPrimary,
   Icon,
   IconName,
   IconSize,
 } from '../../../components/component-library';
-import { IconColor } from '../../../helpers/constants/design-system';
+import { IconColor, Size } from '../../../helpers/constants/design-system';
 import EditContact from './edit-contact';
 import AddContact from './add-contact';
 import ViewContact from './view-contact';
@@ -33,7 +33,6 @@ export default class ContactListTab extends Component {
     viewingContact: PropTypes.bool,
     editingContact: PropTypes.bool,
     addingContact: PropTypes.bool,
-    showContactContent: PropTypes.bool,
     hideAddressBook: PropTypes.bool,
   };
 
@@ -105,35 +104,24 @@ export default class ContactListTab extends Component {
     const { history, viewingContact, editingContact } = this.props;
 
     return (
-      <div className="address-book-add-button">
+      <ButtonPrimary
-        <Button
+        className={classnames('address-book-add-button__button', {
-          className={classnames({
+          'address-book-add-button__button--hidden':
-            'address-book-add-button__button': true,
+            viewingContact || editingContact,
-            'address-book-add-button__button--hidden':
+        })}
-              viewingContact || editingContact,
+        onClick={() => {
-          })}
+          history.push(CONTACT_ADD_ROUTE);
-          type="secondary"
+        }}
-          onClick={() => {
+        margin={4}
-            history.push(CONTACT_ADD_ROUTE);
+        size={Size.LG}
-          }}
+      >
-        >
+        {this.context.t('addContact')}
-          {this.context.t('addContact')}
+      </ButtonPrimary>
-        </Button>
-      </div>
     );
   }
 
   renderContactContent() {
-    const {
+    const { viewingContact, editingContact, addingContact } = this.props;
-      viewingContact,
-      editingContact,
-      addingContact,
-      showContactContent,
-    } = this.props;
-
-    if (!showContactContent) {
-      return null;
-    }
 
     let ContactContentComponent = null;
     if (viewingContact) {

ui/pages/settings/contact-list-tab/contact-list-tab.container.js

@@ -2,8 +2,6 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { getAddressBook } from '../../../selectors';
-import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
-import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 
 import {
   CONTACT_ADD_ROUTE,
@@ -22,10 +20,8 @@ const mapStateToProps = (state, ownProps) => {
   const viewingContact = Boolean(pathname.match(CONTACT_VIEW_ROUTE));
   const editingContact = Boolean(pathname.match(CONTACT_EDIT_ROUTE));
   const addingContact = Boolean(pathname.match(CONTACT_ADD_ROUTE));
-  const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP;
 
-  const hideAddressBook =
+  const hideAddressBook = viewingContact || editingContact || addingContact;
-    envIsPopup && (viewingContact || editingContact || addingContact);
 
   return {
     viewingContact,
@@ -34,8 +30,6 @@ const mapStateToProps = (state, ownProps) => {
     addressBook: getAddressBook(state),
     selectedAddress: pathNameTailIsAddress ? pathNameTail : '',
     hideAddressBook,
-    envIsPopup,
-    showContactContent: !envIsPopup || hideAddressBook,
   };
 };
 

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

@@ -1,6 +1,6 @@
 .address-book-wrapper {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   height: 100%;
 }
 
@@ -214,15 +214,7 @@
 
 .address-book-add-button {
   &__button {
-    position: absolute;
-    top: 92px;
-    right: 16px;
-    width: auto;
-
     @include screen-sm-max {
-      top: 20px;
-      right: 60px;
-
       &--hidden {
         display: none;
       }