From 26ada8a828ab684c310080a18115a8ef3234aaee Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Mon, 5 Nov 2018 09:37:56 -0330 Subject: 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 --- app/_locales/en/messages.json | 12 ++++----- app/images/mm-secure.svg | 7 +++++ app/images/provider-approval-check.svg | 20 ++++++++++++++ app/scripts/contentscript.js | 30 +++++++++++++++++++++ app/scripts/controllers/provider-approval.js | 40 +++++++++++++++------------- 5 files changed, 85 insertions(+), 24 deletions(-) create mode 100644 app/images/mm-secure.svg create mode 100644 app/images/provider-approval-check.svg (limited to 'app') diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index f34a22bd5..95c9efeeb 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 000000000..1345b75b2 --- /dev/null +++ b/app/images/mm-secure.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/app/images/provider-approval-check.svg b/app/images/provider-approval-check.svg new file mode 100644 index 000000000..c3df71f59 --- /dev/null +++ b/app/images/provider-approval-check.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + 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) -- cgit