Better eth_accounts screen support

MetaMask · Jul 5, 2023 · 3555cab · 3555cab
1 parent 835600c
commit 3555cab
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 31 deletions.
diff --git a/ui/components/app/permissions-connect-header/permissions-connect-header.component.js b/ui/components/app/permissions-connect-header/permissions-connect-header.component.js
@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 ///: BEGIN:ONLY_INCLUDE_IN(snaps)
 import { SubjectType } from '@metamask/subject-metadata-controller';
-import SnapAuthorshipHeader from '../snaps/snap-authorship-header/snap-authorship-header';
 ///: END:ONLY_INCLUDE_IN
 import SiteOrigin from '../../ui/site-origin';
 import Box from '../../ui/box';
@@ -48,11 +47,7 @@ export default class PermissionsConnectHeader extends Component {
     ///: BEGIN:ONLY_INCLUDE_IN(snaps)
 
     if (subjectType === SubjectType.Snap) {
-      return (
-        <div className="permissions-connect-header__icon">
-          <SnapAuthorshipHeader snapId={siteOrigin} />
-        </div>
-      );
+      return null;
     }
     ///: END:ONLY_INCLUDE_IN
 

diff --git a/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js b/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js
@@ -24,7 +24,11 @@ import { getTargetSubjectMetadata } from '../../../../selectors';
 import SnapAvatar from '../snap-avatar';
 import SnapVersion from '../snap-version/snap-version';
 
-const SnapAuthorshipHeader = ({ snapId, className }) => {
+const SnapAuthorshipHeader = ({
+  snapId,
+  className,
+  boxShadow = 'var(--shadow-size-lg) var(--color-shadow-default)',
+}) => {
   // We're using optional chaining with snapId, because with the current implementation
   // of snap update in the snap controller, we do not have reference to snapId when an
   // update request is rejected because the reference comes from the request itself and not subject metadata
@@ -51,7 +55,7 @@ const SnapAuthorshipHeader = ({ snapId, className }) => {
       display={DISPLAY.FLEX}
       padding={4}
       style={{
-        boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)',
+        boxShadow,
       }}
     >
       <Box>
@@ -91,6 +95,7 @@ SnapAuthorshipHeader.propTypes = {
    * The className of the SnapAuthorship
    */
   className: PropTypes.string,
+  boxShadow: PropTypes.string,
 };
 
 export default SnapAuthorshipHeader;
diff --git a/ui/components/app/snaps/snap-version/snap-version.js b/ui/components/app/snaps/snap-version/snap-version.js
@@ -42,7 +42,7 @@ const SnapVersion = ({ version, url }) => {
       >
         {version ? (
           <Text color={Color.textAlternative} variant={TextVariant.bodyMd}>
-            {t('shortVersion', [version])}
+            {version}
           </Text>
         ) : (
           <Preloader size={18} />

diff --git a/ui/pages/permissions-connect/permissions-connect.component.js b/ui/pages/permissions-connect/permissions-connect.component.js
@@ -3,13 +3,22 @@ import React, { Component } from 'react';
 import { Switch, Route } from 'react-router-dom';
 ///: BEGIN:ONLY_INCLUDE_IN(snaps)
 import { ethErrors, serializeError } from 'eth-rpc-errors';
+import { SubjectType } from '@metamask/subject-metadata-controller';
 ///: END:ONLY_INCLUDE_IN
 import { getEnvironmentType } from '../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../shared/constants/app';
 import { MILLISECOND } from '../../../shared/constants/time';
 import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
 import PermissionPageContainer from '../../components/app/permission-page-container';
-import { Icon, IconName, IconSize } from '../../components/component-library';
+import {
+  Box,
+  Icon,
+  IconName,
+  IconSize,
+} from '../../components/component-library';
+///: BEGIN:ONLY_INCLUDE_IN(snaps)
+import SnapAuthorshipHeader from '../../components/app/snaps/snap-authorship-header/snap-authorship-header';
+///: END:ONLY_INCLUDE_IN
 import ChooseAccount from './choose-account';
 import PermissionsRedirect from './redirect';
 ///: BEGIN:ONLY_INCLUDE_IN(snaps)
@@ -268,30 +277,46 @@ export default class PermissionConnect extends Component {
   }
 
   renderTopBar() {
-    const { redirecting } = this.state;
+    const { redirecting, targetSubjectMetadata } = this.state;
     const { page, isRequestingAccounts, totalPages } = this.props;
     const { t } = this.context;
     return redirecting ? null : (
-      <div className="permissions-connect__top-bar">
-        {page === '2' && isRequestingAccounts ? (
-          <div
-            className="permissions-connect__back"
-            onClick={() => this.goBack()}
-          >
-            <Icon
-              name={IconName.ArrowLeft}
-              marginInlineEnd={1}
-              size={IconSize.Xs}
-            />
-            {t('back')}
-          </div>
-        ) : null}
-        {isRequestingAccounts ? (
-          <div className="permissions-connect__page-count">
-            {t('xOfY', [page, totalPages])}
-          </div>
-        ) : null}
-      </div>
+      <Box
+        style={{
+          marginBottom:
+            targetSubjectMetadata.subjectType === SubjectType.Snap && '14px',
+          boxShadow:
+            targetSubjectMetadata.subjectType === SubjectType.Snap &&
+            'var(--shadow-size-lg) var(--color-shadow-default)',
+        }}
+      >
+        <div className="permissions-connect__top-bar">
+          {page === '2' && isRequestingAccounts ? (
+            <div
+              className="permissions-connect__back"
+              onClick={() => this.goBack()}
+            >
+              <Icon
+                name={IconName.ArrowLeft}
+                marginInlineEnd={1}
+                size={IconSize.Xs}
+              />
+              {t('back')}
+            </div>
+          ) : null}
+          {isRequestingAccounts ? (
+            <div className="permissions-connect__page-count">
+              {t('xOfY', [page, totalPages])}
+            </div>
+          ) : null}
+        </div>
+        {targetSubjectMetadata.subjectType === SubjectType.Snap && (
+          <SnapAuthorshipHeader
+            snapId={targetSubjectMetadata.origin}
+            boxShadow="none"
+          />
+        )}
+      </Box>
     );
   }