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

5 files changed, 85 insertions, 24 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index f34a22bd..95c9efee 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -32,14 +32,11 @@
   "reject": {
     "message": "Reject"
   },
-  "providerAPIRequest": {
-    "message": "Ethereum API Request"
-  },
-  "reviewProviderRequest": {
-    "message": "Please review this Ethereum API request."
+  "providerRequest": {
+    "message": "$1 would like to connect to your account"
   },
   "providerRequestInfo": {
-    "message": "The domain listed below is requesting access to the Ethereum blockchain and to view your current account. Always double check that you're on the correct site before approving access."
+    "message": "This site is requesting access to view your current account address. Always make sure you trust the sites you interact with."
   },
   "accept": {
     "message": "Accept"
@@ -212,6 +209,9 @@
   "connect": {
     "message": "Connect"
   },
+  "connectRequest": {
+    "message": "Connect Request"
+  },
   "connecting": {
     "message": "Connecting..."
   },
diff --git a/app/images/mm-secure.svg b/app/images/mm-secure.svg
new file mode 100644
index 00000000..1345b75b
--- /dev/null
+++ b/app/images/mm-secure.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="78" height="22" viewBox="0 0 78 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M29.5488 2.89062L31.375 8.04688L33.1914 2.89062H35.1152V10H33.6455V8.05664L33.792 4.70215L31.873 10H30.8672L28.9531 4.70703L29.0996 8.05664V10H27.6348V2.89062H29.5488ZM38.7334 10.0977C37.9587 10.0977 37.3271 9.86003 36.8389 9.38477C36.3538 8.90951 36.1113 8.27637 36.1113 7.48535V7.34863C36.1113 6.81803 36.2139 6.3444 36.4189 5.92773C36.624 5.50781 36.9137 5.18555 37.2881 4.96094C37.6657 4.73307 38.0954 4.61914 38.5771 4.61914C39.2998 4.61914 39.8678 4.84701 40.2812 5.30273C40.6979 5.75846 40.9062 6.40462 40.9062 7.24121V7.81738H37.542C37.5876 8.16243 37.7243 8.43913 37.9521 8.64746C38.1833 8.85579 38.4746 8.95996 38.8262 8.95996C39.3698 8.95996 39.7946 8.76302 40.1006 8.36914L40.7939 9.14551C40.5824 9.44499 40.2959 9.67936 39.9346 9.84863C39.5732 10.0146 39.1729 10.0977 38.7334 10.0977ZM38.5723 5.76172C38.2923 5.76172 38.0645 5.85612 37.8887 6.04492C37.7161 6.23372 37.6055 6.50391 37.5566 6.85547H39.5195V6.74316C39.513 6.43066 39.4284 6.18978 39.2656 6.02051C39.1029 5.84798 38.8717 5.76172 38.5723 5.76172ZM43.4014 3.41797V4.7168H44.3047V5.75195H43.4014V8.38867C43.4014 8.58398 43.4388 8.72396 43.5137 8.80859C43.5885 8.89323 43.7318 8.93555 43.9434 8.93555C44.0996 8.93555 44.238 8.92415 44.3584 8.90137V9.9707C44.0817 10.0553 43.7969 10.0977 43.5039 10.0977C42.5143 10.0977 42.0098 9.59798 41.9902 8.59863V5.75195H41.2188V4.7168H41.9902V3.41797H43.4014ZM48.1523 10C48.0872 9.87305 48.04 9.71517 48.0107 9.52637C47.6689 9.90723 47.2246 10.0977 46.6777 10.0977C46.1602 10.0977 45.7305 9.94792 45.3887 9.64844C45.0501 9.34896 44.8809 8.97135 44.8809 8.51562C44.8809 7.95573 45.0876 7.52604 45.501 7.22656C45.9176 6.92708 46.5182 6.77572 47.3027 6.77246H47.9521V6.46973C47.9521 6.22559 47.8887 6.03027 47.7617 5.88379C47.638 5.7373 47.4411 5.66406 47.1709 5.66406C46.9333 5.66406 46.7461 5.72103 46.6094 5.83496C46.4759 5.94889 46.4092 6.10514 46.4092 6.30371H44.998C44.998 5.99772 45.0924 5.71452 45.2812 5.4541C45.4701 5.19368 45.737 4.99023 46.082 4.84375C46.4271 4.69401 46.8145 4.61914 47.2441 4.61914C47.8952 4.61914 48.4111 4.78353 48.792 5.1123C49.1761 5.43783 49.3682 5.89681 49.3682 6.48926V8.7793C49.3714 9.2806 49.4414 9.65983 49.5781 9.91699V10H48.1523ZM46.9854 9.01855C47.1937 9.01855 47.3857 8.97298 47.5615 8.88184C47.7373 8.78743 47.8675 8.66211 47.9521 8.50586V7.59766H47.4248C46.7184 7.59766 46.3424 7.8418 46.2969 8.33008L46.292 8.41309C46.292 8.58887 46.3538 8.73372 46.4775 8.84766C46.6012 8.96159 46.7705 9.01855 46.9854 9.01855ZM52.459 2.89062L54.2852 8.04688L56.1016 2.89062H58.0254V10H56.5557V8.05664L56.7021 4.70215L54.7832 10H53.7773L51.8633 4.70703L52.0098 8.05664V10H50.5449V2.89062H52.459ZM62.2734 10C62.2083 9.87305 62.1611 9.71517 62.1318 9.52637C61.79 9.90723 61.3457 10.0977 60.7988 10.0977C60.2812 10.0977 59.8516 9.94792 59.5098 9.64844C59.1712 9.34896 59.002 8.97135 59.002 8.51562C59.002 7.95573 59.2087 7.52604 59.6221 7.22656C60.0387 6.92708 60.6393 6.77572 61.4238 6.77246H62.0732V6.46973C62.0732 6.22559 62.0098 6.03027 61.8828 5.88379C61.7591 5.7373 61.5622 5.66406 61.292 5.66406C61.0544 5.66406 60.8672 5.72103 60.7305 5.83496C60.597 5.94889 60.5303 6.10514 60.5303 6.30371H59.1191C59.1191 5.99772 59.2135 5.71452 59.4023 5.4541C59.5911 5.19368 59.8581 4.99023 60.2031 4.84375C60.5482 4.69401 60.9355 4.61914 61.3652 4.61914C62.0163 4.61914 62.5322 4.78353 62.9131 5.1123C63.2972 5.43783 63.4893 5.89681 63.4893 6.48926V8.7793C63.4925 9.2806 63.5625 9.65983 63.6992 9.91699V10H62.2734ZM61.1064 9.01855C61.3148 9.01855 61.5068 8.97298 61.6826 8.88184C61.8584 8.78743 61.9886 8.66211 62.0732 8.50586V7.59766H61.5459C60.8395 7.59766 60.4635 7.8418 60.418 8.33008L60.4131 8.41309C60.4131 8.58887 60.4749 8.73372 60.5986 8.84766C60.7223 8.96159 60.8916 9.01855 61.1064 9.01855ZM67.4346 8.54004C67.4346 8.36751 67.3483 8.23242 67.1758 8.13477C67.0065 8.03385 66.7331 7.94434 66.3555 7.86621C65.099 7.60254 64.4707 7.06868 64.4707 6.26465C64.4707 5.7959 64.6644 5.40527 65.0518 5.09277C65.4424 4.77702 65.9518 4.61914 66.5801 4.61914C67.2507 4.61914 67.7861 4.77702 68.1865 5.09277C68.5902 5.40853 68.792 5.81868 68.792 6.32324H67.3809C67.3809 6.12142 67.3158 5.9554 67.1855 5.8252C67.0553 5.69173 66.8519 5.625 66.5752 5.625C66.3376 5.625 66.1536 5.67871 66.0234 5.78613C65.8932 5.89355 65.8281 6.03027 65.8281 6.19629C65.8281 6.35254 65.9014 6.47949 66.0479 6.57715C66.1976 6.67155 66.4482 6.75456 66.7998 6.82617C67.1514 6.89453 67.4476 6.97266 67.6885 7.06055C68.4339 7.33398 68.8066 7.80762 68.8066 8.48145C68.8066 8.96322 68.5999 9.35384 68.1865 9.65332C67.7731 9.94954 67.2393 10.0977 66.585 10.0977C66.1423 10.0977 65.7484 10.0195 65.4033 9.86328C65.0615 9.70378 64.793 9.4873 64.5977 9.21387C64.4023 8.93717 64.3047 8.63932 64.3047 8.32031H65.6426C65.6556 8.57096 65.7484 8.76302 65.9209 8.89648C66.0934 9.02995 66.3245 9.09668 66.6143 9.09668C66.8844 9.09668 67.0879 9.04622 67.2246 8.94531C67.3646 8.84115 67.4346 8.70605 67.4346 8.54004ZM71.6387 7.88086L71.1309 8.38867V10H69.7197V2.5H71.1309V6.65527L71.4043 6.30371L72.7568 4.7168H74.4512L72.542 6.91895L74.6172 10H72.9961L71.6387 7.88086ZM31.3213 18.1348C31.3213 17.8581 31.2236 17.6465 31.0283 17.5C30.833 17.3503 30.4814 17.194 29.9736 17.0312C29.4658 16.8652 29.0638 16.7025 28.7676 16.543C27.9603 16.1068 27.5566 15.5192 27.5566 14.7803C27.5566 14.3962 27.6641 14.0544 27.8789 13.7549C28.097 13.4521 28.4079 13.2161 28.8115 13.0469C29.2184 12.8776 29.6742 12.793 30.1787 12.793C30.6865 12.793 31.139 12.8857 31.5361 13.0713C31.9333 13.2536 32.2409 13.5124 32.459 13.8477C32.6803 14.1829 32.791 14.5638 32.791 14.9902H31.3262C31.3262 14.6647 31.2236 14.4124 31.0186 14.2334C30.8135 14.0511 30.5254 13.96 30.1543 13.96C29.7962 13.96 29.5179 14.0365 29.3193 14.1895C29.1208 14.3392 29.0215 14.5378 29.0215 14.7852C29.0215 15.0163 29.137 15.21 29.3682 15.3662C29.6025 15.5225 29.946 15.6689 30.3984 15.8057C31.2318 16.0563 31.8389 16.3672 32.2197 16.7383C32.6006 17.1094 32.791 17.5716 32.791 18.125C32.791 18.7402 32.5583 19.2236 32.0928 19.5752C31.6273 19.9235 31.0007 20.0977 30.2129 20.0977C29.666 20.0977 29.168 19.9984 28.7188 19.7998C28.2695 19.598 27.9261 19.3229 27.6885 18.9746C27.4541 18.6263 27.3369 18.2227 27.3369 17.7637H28.8066C28.8066 18.5482 29.2754 18.9404 30.2129 18.9404C30.5612 18.9404 30.833 18.8704 31.0283 18.7305C31.2236 18.5872 31.3213 18.3887 31.3213 18.1348ZM36.126 20.0977C35.3512 20.0977 34.7197 19.86 34.2314 19.3848C33.7464 18.9095 33.5039 18.2764 33.5039 17.4854V17.3486C33.5039 16.818 33.6064 16.3444 33.8115 15.9277C34.0166 15.5078 34.3063 15.1855 34.6807 14.9609C35.0583 14.7331 35.488 14.6191 35.9697 14.6191C36.6924 14.6191 37.2604 14.847 37.6738 15.3027C38.0905 15.7585 38.2988 16.4046 38.2988 17.2412V17.8174H34.9346C34.9801 18.1624 35.1169 18.4391 35.3447 18.6475C35.5758 18.8558 35.8672 18.96 36.2188 18.96C36.7624 18.96 37.1872 18.763 37.4932 18.3691L38.1865 19.1455C37.9749 19.445 37.6885 19.6794 37.3271 19.8486C36.9658 20.0146 36.5654 20.0977 36.126 20.0977ZM35.9648 15.7617C35.6849 15.7617 35.457 15.8561 35.2812 16.0449C35.1087 16.2337 34.998 16.5039 34.9492 16.8555H36.9121V16.7432C36.9056 16.4307 36.821 16.1898 36.6582 16.0205C36.4954 15.848 36.2643 15.7617 35.9648 15.7617ZM41.3018 18.96C41.5622 18.96 41.7738 18.8883 41.9365 18.7451C42.0993 18.6019 42.1839 18.4115 42.1904 18.1738H43.5137C43.5104 18.5319 43.4128 18.8607 43.2207 19.1602C43.0286 19.4564 42.765 19.6875 42.4297 19.8535C42.0977 20.0163 41.7298 20.0977 41.3262 20.0977C40.571 20.0977 39.9753 19.8584 39.5391 19.3799C39.1029 18.8981 38.8848 18.234 38.8848 17.3877V17.2949C38.8848 16.4811 39.1012 15.8317 39.5342 15.3467C39.9671 14.8617 40.5612 14.6191 41.3164 14.6191C41.9772 14.6191 42.5062 14.8079 42.9033 15.1855C43.3037 15.5599 43.5072 16.0596 43.5137 16.6846H42.1904C42.1839 16.4111 42.0993 16.1898 41.9365 16.0205C41.7738 15.848 41.5589 15.7617 41.292 15.7617C40.9632 15.7617 40.7142 15.8822 40.5449 16.123C40.3789 16.3607 40.2959 16.748 40.2959 17.2852V17.4316C40.2959 17.9753 40.3789 18.3659 40.5449 18.6035C40.7109 18.8411 40.9632 18.96 41.3018 18.96ZM47.4834 19.4629C47.1351 19.8861 46.6533 20.0977 46.0381 20.0977C45.4717 20.0977 45.0387 19.9349 44.7393 19.6094C44.443 19.2839 44.2917 18.807 44.2852 18.1787V14.7168H45.6963V18.1299C45.6963 18.68 45.9469 18.9551 46.4482 18.9551C46.9268 18.9551 47.2555 18.7891 47.4346 18.457V14.7168H48.8506V20H47.5225L47.4834 19.4629ZM52.8838 16.04C52.6917 16.014 52.5225 16.001 52.376 16.001C51.8421 16.001 51.4922 16.1816 51.3262 16.543V20H49.915V14.7168H51.248L51.2871 15.3467C51.5703 14.8617 51.9626 14.6191 52.4639 14.6191C52.6201 14.6191 52.7666 14.6403 52.9033 14.6826L52.8838 16.04ZM55.9014 20.0977C55.1266 20.0977 54.4951 19.86 54.0068 19.3848C53.5218 18.9095 53.2793 18.2764 53.2793 17.4854V17.3486C53.2793 16.818 53.3818 16.3444 53.5869 15.9277C53.792 15.5078 54.0817 15.1855 54.4561 14.9609C54.8337 14.7331 55.2633 14.6191 55.7451 14.6191C56.4678 14.6191 57.0358 14.847 57.4492 15.3027C57.8659 15.7585 58.0742 16.4046 58.0742 17.2412V17.8174H54.71C54.7555 18.1624 54.8923 18.4391 55.1201 18.6475C55.3512 18.8558 55.6426 18.96 55.9941 18.96C56.5378 18.96 56.9626 18.763 57.2686 18.3691L57.9619 19.1455C57.7503 19.445 57.4639 19.6794 57.1025 19.8486C56.7412 20.0146 56.3408 20.0977 55.9014 20.0977ZM55.7402 15.7617C55.4603 15.7617 55.2324 15.8561 55.0566 16.0449C54.8841 16.2337 54.7734 16.5039 54.7246 16.8555H56.6875V16.7432C56.681 16.4307 56.5964 16.1898 56.4336 16.0205C56.2708 15.848 56.0397 15.7617 55.7402 15.7617Z" fill="#A2A4AC"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.65498L0 8.69867C0 14.9252 4.19995 20.1981 10 22C15.7999 20.1981 20 14.9252 20 8.69867L20 2.65498L10 0L0 2.65498Z" fill="#A2A4AC"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.47027 11.6L7.38462 12.093L8.92308 12.5429L8.47027 11.6ZM11.2204 11.6L10.7692 12.5429L12.3077 12.093L11.2204 11.6ZM10.4442 13.8H9.24372L9.0357 13.9633L8.92308 15.0571L9.02705 14.9484H10.6609L10.7692 15.0571L10.6522 13.9633L10.4442 13.8ZM15.6234 9.86253L15.388 9.69497L15.7646 9.35535L15.4774 9.13192L15.8541 8.84816L15.6046 8.66202L16 6.76348L15.4068 5L11.5888 6.40985L8.41115 6.40985L4.59313 5L4 6.76348L4.40012 8.66202L4.1459 8.84816L4.52253 9.13192L4.23536 9.35535L4.612 9.69497L4.37656 9.86253L4.91795 10.4907L4.09886 13.0127L4.85682 15.5859L7.52607 14.86L8.04391 15.2788L9.09844 16H10.9015L11.9561 15.2788L12.4739 14.86L15.1432 15.5859L15.9058 13.0127L15.082 10.4907L15.6234 9.86253Z" fill="white"/>
+</svg>
diff --git a/app/images/provider-approval-check.svg b/app/images/provider-approval-check.svg
new file mode 100644
index 00000000..c3df71f5
--- /dev/null
+++ b/app/images/provider-approval-check.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<path d="M34.5 19C34.5 27.0081 28.0081 33.5 20 33.5C11.9919 33.5 5.5 27.0081 5.5 19C5.5 10.9919 11.9919 4.5 20 4.5C28.0081 4.5 34.5 10.9919 34.5 19Z" fill="#61BA00" stroke="#61BA00"/>
+<path d="M13.2998 19.7195L16.813 23.3195L26.1998 14.0195" stroke="white" stroke-width="2"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="2.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>
+
diff --git a/app/scripts/contentscript.js b/app/scripts/contentscript.js
index fa8b3207..1cdc8594 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 728361c7..f2d40e67 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)