Update Connect Request screen design (#5644)

* Parameterize NetworkDisplay background colour

* Update design for login request screen

* Pass siteTitle, siteImage through for calls to ethereum.enable()

* Bring the site images closer together

2 files changed, 52 insertions, 18 deletions

diff --git a/app/scripts/contentscript.js b/app/scripts/contentscript.js
index fa8b3207f..1cdc85945 100644
--- a/app/scripts/contentscript.js
+++ b/app/scripts/contentscript.js
@@ -126,6 +126,8 @@ function listenForProviderRequest () {
         extension.runtime.sendMessage({
           action: 'init-provider-request',
           origin: source.location.hostname,
+          siteImage: getSiteIcon(source),
+          siteTitle: getSiteName(source),
         })
         break
       case 'ETHEREUM_IS_APPROVED':
@@ -285,3 +287,31 @@ function redirectToPhishingWarning () {
     href: window.location.href,
   })}`
 }
+
+function getSiteName (window) {
+  const document = window.document
+  const siteName = document.querySelector('head > meta[property="og:site_name"]')
+  if (siteName) {
+    return siteName.content
+  }
+
+  return document.title
+}
+
+function getSiteIcon (window) {
+  const document = window.document
+
+  // Use the site's favicon if it exists
+  const shortcutIcon = document.querySelector('head > link[rel="shortcut icon"]')
+  if (shortcutIcon) {
+    return shortcutIcon.href
+  }
+
+  // Search through available icons in no particular order
+  const icon = Array.from(document.querySelectorAll('head > link[rel="icon"]')).find((icon) => Boolean(icon.href))
+  if (icon) {
+    return icon.href
+  }
+
+  return null
+}
diff --git a/app/scripts/controllers/provider-approval.js b/app/scripts/controllers/provider-approval.js
index 728361c79..f2d40e67d 100644
--- a/app/scripts/controllers/provider-approval.js
+++ b/app/scripts/controllers/provider-approval.js
@@ -24,31 +24,35 @@ class ProviderApprovalController {
     this.publicConfigStore = publicConfigStore
     this.store = new ObservableStore()
 
-    platform && platform.addMessageListener && platform.addMessageListener(({ action = '', origin }) => {
-      switch (action) {
-        case 'init-provider-request':
-          this._handleProviderRequest(origin)
-          break
-        case 'init-is-approved':
-          this._handleIsApproved(origin)
-          break
-        case 'init-is-unlocked':
-          this._handleIsUnlocked()
-          break
-        case 'init-privacy-request':
-          this._handlePrivacyRequest()
-          break
-      }
-    })
+    if (platform && platform.addMessageListener) {
+      platform.addMessageListener(({ action = '', origin, siteTitle, siteImage }) => {
+        switch (action) {
+          case 'init-provider-request':
+            this._handleProviderRequest(origin, siteTitle, siteImage)
+            break
+          case 'init-is-approved':
+            this._handleIsApproved(origin)
+            break
+          case 'init-is-unlocked':
+            this._handleIsUnlocked()
+            break
+          case 'init-privacy-request':
+            this._handlePrivacyRequest()
+            break
+        }
+      })
+    }
   }
 
   /**
    * Called when a tab requests access to a full Ethereum provider API
    *
    * @param {string} origin - Origin of the window requesting full provider access
+   * @param {string} siteTitle - The title of the document requesting full provider access
+   * @param {string} siteImage - The icon of the window requesting full provider access
    */
-  _handleProviderRequest (origin) {
-    this.store.updateState({ providerRequests: [{ origin }] })
+  _handleProviderRequest (origin, siteTitle, siteImage) {
+    this.store.updateState({ providerRequests: [{ origin, siteTitle, siteImage }] })
     const isUnlocked = this.keyringController.memStore.getState().isUnlocked
     if (this.isApproved(origin) && this.caching && isUnlocked) {
       this.approveProviderRequest(origin)