Fix site icon fallback letter (#8815)

The letter chosen for the fallback site icon was being set
inconsistently throughout the extension. The connect flow was using the
first letter of the `origin` for the letter (which was always `H`,
because `HTTP`), but the connect sites list and the account menu were
using the `name` from the domain metadata.

The `name` is now used for the fallback icon everywhere. A selector
that supplied a default domain metadata object has also been augmented
to use the `hostname` rather than the `origin` as a fallback name, to
match the behavior of the inpage provider.

ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js

@@ -133,7 +133,7 @@ export default class PermissionPageContainerContent extends PureComponent {
         <div className="permission-approval-container__content-container">
           <PermissionsConnectHeader
             icon={domainMetadata.icon}
-            iconName={domainMetadata.origin}
+            iconName={domainMetadata.name}
             headerTitle={title}
             headerText={ domainMetadata.extensionId
               ? t('allowExternalExtensionTo', [domainMetadata.extensionId])

ui/app/pages/permissions-connect/choose-account/choose-account.component.js

@@ -191,7 +191,7 @@ export default class ChooseAccount extends Component {
       <div className="permissions-connect-choose-account">
         <PermissionsConnectHeader
           icon={targetDomainMetadata.icon}
-          iconName={targetDomainMetadata.origin}
+          iconName={targetDomainMetadata.name}
           headerTitle={t('connectWithMetaMask')}
           headerText={accounts.length > 0
             ? t('selectAccounts')

ui/app/selectors/selectors.js

@@ -292,7 +292,8 @@ export function getTargetDomainMetadata (state, request, defaultOrigin) {
 
   const { metadata: requestMetadata = {} } = request || {}
   const origin = requestMetadata.origin || defaultOrigin
-  const targetDomainMetadata = (domainMetadata[origin] || { name: origin, icon: null })
+  const hostname = (new URL(origin).hostname)
+  const targetDomainMetadata = (domainMetadata[origin] || { name: hostname, icon: null })
   targetDomainMetadata.origin = origin
 
   return targetDomainMetadata