Show origin in connect flow rather than site name

The designs for the connect flow show the site `origin` below the site icon rather than the site name. This was done for security reasons, and because the site name is often set to an unwieldy long string. This was accidentally undone in #8815 in the process of fixing a separate bug. The origin has now been restored. More specific PropTypes have been set on each use of the `domainMetadata` prop as well.
MetaMask · Jul 2, 2020 · 57f4ea5 · 57f4ea5
1 parent 603093a
commit 57f4ea5
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 16 deletions.
diff --git a/...ontainer/permission-page-container-content/permission-page-container-content.component.js b/...ontainer/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() }

diff --git a/ui/app/components/app/permission-page-container/permission-page-container.component.js b/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 = {

diff --git a/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js b/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>
     )
   }

diff --git a/ui/app/pages/permissions-connect/choose-account/choose-account.component.js b/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()}

diff --git a/ui/app/pages/permissions-connect/permissions-connect.component.js b/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 }
     }

diff --git a/ui/app/pages/permissions-connect/permissions-connect.container.js b/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)
 

diff --git a/ui/app/pages/permissions-connect/redirect/permissions-redirect.component.js b/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,
+  }),
 }