Fix provider approval metadata (#7349)

* Omit MetaMask `extensionId` from site metadata

The site metadata was updated in #7218 to include the extension id of
the extension connecting to MetaMask. This was done to allow external
extensions to connect with MetaMask, so that we could show the id on
the provider approval screen.

Unbeknownst to me at the time, the extension id was being set for all
connections to MetaMask from dapps. The id was set to MetaMask's id,
because the connections are made through MetaMask's contentscript.

This has been updated to only set the id when accepting a connection
from a different extension.

* Fix `siteMetadata` property names

In #7218 a few things were added to the site metadata, so the provider
approval controller was middleware was updated to accept the site
metadata as an object rather than accepting each property as a separate
parameter. Unfortunately we failed to notice that the site name and
icon were named differently in the site metadata than they were in the
provider approval controller, so the names of those properties were
unintentionally changed in the controller state.

The provider approval controller has been updated to restore the
original property names of `siteTitle` and `siteIcon`. An unused prop
that was added to the provider approval page in #7218 has also been
removed.

app/scripts/background.js

@@ -391,7 +391,10 @@ function setupController (initState, initLangCode) {
   // communication with page or other extension
   function connectExternal (remotePort) {
     const senderUrl = new URL(remotePort.sender.url)
-    const extensionId = remotePort.sender.id
+    let extensionId
+    if (remotePort.sender.id !== extension.runtime.id) {
+      extensionId = remotePort.sender.id
+    }
     const portStream = new PortStream(remotePort)
     controller.setupUntrustedCommunication(portStream, senderUrl, extensionId)
   }

app/scripts/controllers/provider-approval.js

@@ -47,7 +47,8 @@ class ProviderApprovalController extends SafeEventEmitter {
       if (extensionId) {
         metadata.extensionId = extensionId
       } else {
-        Object.assign(metadata, await getSiteMetadata(origin))
+        const siteMetadata = await getSiteMetadata(origin)
+        Object.assign(metadata, { siteTitle: siteMetadata.name, siteImage: siteMetadata.icon})
       }
       this._handleProviderRequest(metadata)
       // wait for resolution of request

ui/app/pages/provider-approval/provider-approval.component.js

@@ -6,7 +6,13 @@ export default class ProviderApproval extends Component {
   static propTypes = {
     approveProviderRequestByOrigin: PropTypes.func.isRequired,
     rejectProviderRequestByOrigin: PropTypes.func.isRequired,
-    providerRequest: PropTypes.object.isRequired,
+    providerRequest: PropTypes.exact({
+      hostname: PropTypes.string.isRequired,
+      siteImage: PropTypes.string,
+      siteTitle: PropTypes.string,
+      origin: PropTypes.string.isRequired,
+      extensionId: PropTypes.string,
+    }).isRequired,
   };
 
   static contextTypes = {
@@ -20,7 +26,6 @@ export default class ProviderApproval extends Component {
         approveProviderRequestByOrigin={approveProviderRequestByOrigin}
         rejectProviderRequestByOrigin={rejectProviderRequestByOrigin}
         origin={providerRequest.origin}
-        tabID={providerRequest.tabID}
         siteImage={providerRequest.siteImage}
         siteTitle={providerRequest.siteTitle}
         hostname={providerRequest.hostname}