Show origin in connect flow rather than site name

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

@@ -7,7 +7,13 @@ import CheckBox from '../../../ui/check-box'
 export default class PermissionPageContainerContent extends PureComponent {
 
   static propTypes = {
-    domainMetadata: PropTypes.object.isRequired,
+    domainMetadata: PropTypes.shape({
+      extensionId: PropTypes.string,
+      icon: PropTypes.string,
+      host: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      origin: PropTypes.string.isRequired,
+    }),
     selectedPermissions: PropTypes.object.isRequired,
     onPermissionToggle: PropTypes.func.isRequired,
     selectedIdentities: PropTypes.array,
@@ -145,6 +151,7 @@ export default class PermissionPageContainerContent extends PureComponent {
               ? t('allowExternalExtensionTo', [domainMetadata.extensionId])
               : t('allowThisSiteTo')
             }
+            siteOrigin={domainMetadata.origin}
           />
           <section className="permission-approval-container__permissions-container">
             { this.renderRequestedPermissions() }

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

@@ -14,7 +14,13 @@ export default class PermissionPageContainer extends Component {
     allIdentitiesSelected: PropTypes.bool,
     request: PropTypes.object,
     requestMetadata: PropTypes.object,
-    targetDomainMetadata: PropTypes.object.isRequired,
+    targetDomainMetadata: PropTypes.shape({
+      extensionId: PropTypes.string,
+      icon: PropTypes.string,
+      host: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      origin: PropTypes.string.isRequired,
+    }),
   }
 
   static defaultProps = {

ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js

@@ -5,25 +5,25 @@ import SiteIcon from '../../ui/site-icon'
 export default class PermissionsConnectHeader extends Component {
   static propTypes = {
     icon: PropTypes.string,
-    iconName: PropTypes.string,
+    iconName: PropTypes.string.isRequired,
+    siteOrigin: PropTypes.string.isRequired,
     headerTitle: PropTypes.node,
     headerText: PropTypes.string,
   }
 
   static defaultProps = {
     icon: null,
-    iconName: '',
     headerTitle: '',
     headerText: '',
   }
 
   renderHeaderIcon () {
-    const { icon, iconName } = this.props
+    const { icon, iconName, siteOrigin } = this.props
 
     return (
       <div className="permissions-connect-header__icon">
         <SiteIcon icon={ icon } name={ iconName } size={64} />
-        <div className="permissions-connect-header__text">{iconName}</div>
+        <div className="permissions-connect-header__text">{siteOrigin}</div>
       </div>
     )
   }

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

@@ -25,7 +25,13 @@ export default class ChooseAccount extends Component {
     cancelPermissionsRequest: PropTypes.func.isRequired,
     permissionsRequestId: PropTypes.string.isRequired,
     selectedAccountAddresses: PropTypes.object.isRequired,
-    targetDomainMetadata: PropTypes.object,
+    targetDomainMetadata: PropTypes.shape({
+      extensionId: PropTypes.string,
+      icon: PropTypes.string,
+      host: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      origin: PropTypes.string.isRequired,
+    }),
   }
 
   state = {
@@ -197,6 +203,7 @@ export default class ChooseAccount extends Component {
             ? t('selectAccounts')
             : t('connectAccountOrCreate')
           }
+          siteOrigin={targetDomainMetadata.origin}
         />
         {this.renderAccountsListHeader()}
         {this.renderAccountsList()}

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

@@ -31,7 +31,13 @@ export default class PermissionConnect extends Component {
     connectPath: PropTypes.string.isRequired,
     confirmPermissionPath: PropTypes.string.isRequired,
     page: PropTypes.string.isRequired,
-    targetDomainMetadata: PropTypes.object,
+    targetDomainMetadata: PropTypes.shape({
+      extensionId: PropTypes.string,
+      icon: PropTypes.string,
+      host: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      origin: PropTypes.string.isRequired,
+    }),
   }
 
   static defaultProps = {
@@ -95,7 +101,7 @@ export default class PermissionConnect extends Component {
 
     if (
       permissionsRequest &&
-      savedMetadata.name !== targetDomainMetadata?.name
+      savedMetadata.origin !== targetDomainMetadata?.origin
     ) {
       return { targetDomainMetadata }
     }

ui/app/pages/permissions-connect/permissions-connect.container.js

@@ -43,13 +43,20 @@ const mapStateToProps = (state, ownProps) => {
   const nativeCurrency = getNativeCurrency(state)
 
   const domainMetadata = getDomainMetadata(state)
-  const targetDomainMetadata = origin
-    ? domainMetadata[origin] || {
-      origin,
-      name: (new URL(origin)).hostname,
-      icon: null,
+
+  let targetDomainMetadata = null
+  if (origin) {
+    if (domainMetadata[origin]) {
+      targetDomainMetadata = { ...domainMetadata[origin], origin }
+    } else {
+      const targetUrl = new URL(origin)
+      targetDomainMetadata = {
+        host: targetUrl.host,
+        name: targetUrl.hostname,
+        origin,
+      }
     }
-    : null
+  }
 
   const accountsWithLabels = getAccountsWithLabels(state)
 

ui/app/pages/permissions-connect/redirect/permissions-redirect.component.js

@@ -33,5 +33,11 @@ export default function PermissionsRedirect ({ domainMetadata }) {
 }
 
 PermissionsRedirect.propTypes = {
-  domainMetadata: PropTypes.object.isRequired,
+  domainMetadata: PropTypes.shape({
+    extensionId: PropTypes.string,
+    icon: PropTypes.string,
+    host: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    origin: PropTypes.string.isRequired,
+  }),
 }