Remove site origin on snap install (#14752)

* Remove site origin on snap install

* Fix linting + storybook

* Update local snap icon

* Fix storybook build

ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.js

@@ -9,7 +9,17 @@ import {
   TYPOGRAPHY,
 } from '../../../../helpers/constants/design-system';
 
-const SnapsAuthorshipPill = ({ packageName, className, url }) => {
+const snapIdPrefixes = ['npm:', 'local:'];
+
+const SnapsAuthorshipPill = ({ snapId, className }) => {
+  // @todo Use getSnapPrefix from snaps-skunkworks when possible
+  const snapPrefix = snapIdPrefixes.find((prefix) => snapId.startsWith(prefix));
+  const packageName = snapId.replace(snapPrefix, '');
+  const isNPM = snapPrefix === 'npm:';
+  const url = isNPM
+    ? `https://www.npmjs.com/package/${packageName}`
+    : packageName;
+  const icon = isNPM ? 'fab fa-npm fa-lg' : 'fas fa-code';
   return (
     <a
       href={url}
@@ -20,7 +30,7 @@ const SnapsAuthorshipPill = ({ packageName, className, url }) => {
       <Chip
         leftIcon={
           <Box paddingLeft={2}>
-            <i className="fab fa-npm fa-lg snaps-authorship-icon" />
+            <i className={`${icon} snaps-authorship-icon`} />
           </Box>
         }
         backgroundColor={COLORS.BACKGROUND_DEFAULT}
@@ -40,17 +50,13 @@ const SnapsAuthorshipPill = ({ packageName, className, url }) => {
 
 SnapsAuthorshipPill.propTypes = {
   /**
-   * NPM package name of the snap
+   * The id of the snap
    */
-  packageName: PropTypes.string,
+  snapId: PropTypes.string,
   /**
    * The className of the SnapsAuthorshipPill
    */
   className: PropTypes.string,
-  /**
-   * The url of the snap's package
-   */
-  url: PropTypes.string,
 };
 
 export default SnapsAuthorshipPill;

ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.stories.js

@@ -6,10 +6,7 @@ export default {
   id: __filename,
   component: SnapsAuthorshipPill,
   argTypes: {
-    packageName: {
-      control: 'text',
-    },
-    url: {
+    snapId: {
       control: 'text',
     },
   },
@@ -20,6 +17,5 @@ export const DefaultStory = (args) => <SnapsAuthorshipPill {...args} />;
 DefaultStory.storyName = 'Default';
 
 DefaultStory.args = {
-  packageName: 'npm-package-name',
-  url: 'https://www.npmjs.com/package/@airswap/protocols',
+  snapId: 'npm:@metamask/test-snap-bip44',
 };

ui/components/app/permissions-connect-header/index.scss

@@ -7,6 +7,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    margin-bottom: 16px;
   }
 
   &__title {
@@ -14,7 +15,6 @@
 
     text-align: center;
     color: var(--color-text-default);
-    margin-top: 16px;
     font-weight: bold;
   }
 

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

@@ -31,8 +31,8 @@ export default class PermissionsConnectHeader extends Component {
     boxProps: PropTypes.shape({ ...Box.propTypes }),
     headerText: PropTypes.string,
     ///: BEGIN:ONLY_INCLUDE_IN(flask)
-    npmPackageName: PropTypes.string,
     snapVersion: PropTypes.string,
+    isSnapInstall: PropTypes.bool,
     ///: END:ONLY_INCLUDE_IN
   };
 
@@ -44,7 +44,20 @@ export default class PermissionsConnectHeader extends Component {
   };
 
   renderHeaderIcon() {
-    const { iconUrl, iconName, siteOrigin } = this.props;
+    const {
+      iconUrl,
+      iconName,
+      siteOrigin,
+      ///: BEGIN:ONLY_INCLUDE_IN(flask)
+      isSnapInstall,
+      ///: END:ONLY_INCLUDE_IN
+    } = this.props;
+
+    ///: BEGIN:ONLY_INCLUDE_IN(flask)
+    if (isSnapInstall) {
+      return null;
+    }
+    ///: END:ONLY_INCLUDE_IN
 
     return (
       <div className="permissions-connect-header__icon">
@@ -64,12 +77,12 @@ export default class PermissionsConnectHeader extends Component {
       headerTitle,
       headerText,
       ///: BEGIN:ONLY_INCLUDE_IN(flask)
-      npmPackageName,
+      siteOrigin,
       snapVersion,
+      isSnapInstall,
       ///: END:ONLY_INCLUDE_IN
     } = this.props;
     ///: BEGIN:ONLY_INCLUDE_IN(flask)
-    const npmPackageUrl = `https://www.npmjs.com/package/${npmPackageName}`;
     const { t } = this.context;
     ///: END:ONLY_INCLUDE_IN
     return (
@@ -83,12 +96,7 @@ export default class PermissionsConnectHeader extends Component {
         <div className="permissions-connect-header__title">{headerTitle}</div>
         {
           ///: BEGIN:ONLY_INCLUDE_IN(flask)
-          npmPackageName ? (
-            <SnapsAuthorshipPill
-              packageName={npmPackageName}
-              url={npmPackageUrl}
-            />
-          ) : null
+          isSnapInstall && <SnapsAuthorshipPill snapId={siteOrigin} />
           ///: END:ONLY_INCLUDE_IN
         }
         {

ui/pages/permissions-connect/flask/snap-install/snap-install.js

@@ -37,13 +37,6 @@ export default function SnapInstall({
     approveSnapInstall,
   ]);
 
-  const npmId = useMemo(() => {
-    if (!targetSubjectMetadata.origin.startsWith('npm:')) {
-      return undefined;
-    }
-    return targetSubjectMetadata.origin.substring(4);
-  }, [targetSubjectMetadata]);
-
   const shouldShowWarning = useMemo(
     () =>
       Boolean(
@@ -74,7 +67,7 @@ export default function SnapInstall({
           headerTitle={t('snapInstall')}
           headerText={null} // TODO(ritave): Add header text when snaps support description
           siteOrigin={targetSubjectMetadata.origin}
-          npmPackageName={npmId}
+          isSnapInstall
           snapVersion={targetSubjectMetadata.version}
           boxProps={{ alignItems: ALIGN_ITEMS.CENTER }}
         />

ui/pages/settings/flask/view-snap/view-snap.js

@@ -47,7 +47,6 @@ function ViewSnap() {
     }
   }, [history, snap]);
 
-  const authorshipPillUrl = `https://npmjs.com/package/${snap?.manifest.source.location.npm.packageName}`;
   const connectedSubjects = useSelector((state) =>
     getSubjectsWithPermission(state, snap?.permissionName),
   );
@@ -87,10 +86,7 @@ function ViewSnap() {
           </Typography>
           <Box className="view-snap__pill-toggle-container">
             <Box className="view-snap__pill-container" paddingLeft={2}>
-              <SnapsAuthorshipPill
-                packageName={snap.id}
-                url={authorshipPillUrl}
-              />
+              <SnapsAuthorshipPill snapId={snap.id} />
             </Box>
             <Box paddingLeft={4} className="view-snap__toggle-container">
               <Tooltip interactive position="bottom" html={t('snapsToggle')}>