[FLASK] Update snap authorship component

ui/components/app/app-components.scss

@@ -34,7 +34,6 @@
 @import 'edit-gas-fee-popover/network-statistics/status-slider/index';
 @import 'edit-gas-fee-popover/edit-gas-tooltip/index';
 @import 'flask/experimental-area/index';
-@import 'flask/snaps-authorship-pill/index';
 @import 'flask/snap-content-footer/index';
 @import 'flask/snap-install-warning/index';
 @import 'flask/snap-remove-warning/index';

ui/components/app/flask/snap-authorship/index.js

@@ -0,0 +1 @@
+export { default } from './snap-authorship';

ui/components/app/flask/snap-authorship/snap-authorship.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { getSnapPrefix } from '@metamask/snaps-utils';
+import { useSelector } from 'react-redux';
+import Box from '../../../ui/box';
+import {
+  BackgroundColor,
+  TextColor,
+  IconColor,
+  FLEX_DIRECTION,
+  TextVariant,
+  BorderColor,
+  AlignItems,
+  DISPLAY,
+  BorderRadius,
+} from '../../../../helpers/constants/design-system';
+import {
+  getSnapName,
+  removeSnapIdPrefix,
+} from '../../../../helpers/utils/util';
+import {
+  ICON_NAMES,
+  ICON_SIZES,
+  Text,
+  ButtonIcon,
+} from '../../../component-library';
+import { getTargetSubjectMetadata } from '../../../../selectors';
+import SnapAvatar from '../snap-avatar';
+
+const SnapAuthorship = ({ snapId, className }) => {
+  // 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
+  // like it is done with snap install
+  const snapPrefix = snapId && getSnapPrefix(snapId);
+  const packageName = snapId && removeSnapIdPrefix(snapId);
+  const isNPM = snapPrefix === 'npm:';
+  const url = isNPM
+    ? `https://www.npmjs.com/package/${packageName}`
+    : packageName;
+
+  const subjectMetadata = useSelector((state) =>
+    getTargetSubjectMetadata(state, snapId),
+  );
+
+  const friendlyName = snapId && getSnapName(snapId, subjectMetadata);
+
+  return (
+    <Box
+      className={classnames('snaps-authorship', className)}
+      backgroundColor={BackgroundColor.backgroundDefault}
+      borderColor={BorderColor.borderDefault}
+      borderWidth={1}
+      alignItems={AlignItems.center}
+      paddingLeft={2}
+      paddingTop={2}
+      paddingBottom={2}
+      paddingRight={4}
+      borderRadius={BorderRadius.pill}
+      display={DISPLAY.FLEX}
+      style={{ maxWidth: 'fit-content', width: '100%' }}
+    >
+      <Box>
+        <SnapAvatar snapId={snapId} />
+      </Box>
+      <Box
+        marginLeft={4}
+        marginRight={2}
+        display={DISPLAY.FLEX}
+        flexDirection={FLEX_DIRECTION.COLUMN}
+        style={{ overflow: 'hidden' }}
+      >
+        <Text ellipsis>{friendlyName}</Text>
+        <Text
+          ellipsis
+          variant={TextVariant.bodySm}
+          color={TextColor.textAlternative}
+        >
+          {packageName}
+        </Text>
+      </Box>
+      <ButtonIcon
+        rel="noopener noreferrer"
+        target="_blank"
+        href={url}
+        iconName={ICON_NAMES.EXPORT}
+        color={IconColor.infoDefault}
+        size={ICON_SIZES.MD}
+      />
+    </Box>
+  );
+};
+
+SnapAuthorship.propTypes = {
+  /**
+   * The id of the snap
+   */
+  snapId: PropTypes.string,
+  /**
+   * The className of the SnapAuthorship
+   */
+  className: PropTypes.string,
+};
+
+export default SnapAuthorship;

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

@@ -1,18 +1,18 @@
 import React from 'react';
-import SnapsAuthorshipPill from '.';
+import SnapAuthorship from '.';
 
 export default {
-  title: 'Components/App/Flask/SnapsAuthorshipPill',
+  title: 'Components/App/Flask/SnapAuthorship',
 
-  component: SnapsAuthorshipPill,
+  component: SnapAuthorship,
   argTypes: {
     snapId: {
       control: 'text',
     },
   },
 };
 
-export const DefaultStory = (args) => <SnapsAuthorshipPill {...args} />;
+export const DefaultStory = (args) => <SnapAuthorship {...args} />;
 
 DefaultStory.storyName = 'Default';
 

ui/components/app/flask/snap-avatar/index.js

@@ -0,0 +1 @@
+export { default } from './snap-avatar';

ui/components/app/flask/snap-avatar/snap-avatar.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { useSelector } from 'react-redux';
+import {
+  TextColor,
+  IconColor,
+  AlignItems,
+  DISPLAY,
+  JustifyContent,
+  Size,
+} from '../../../../helpers/constants/design-system';
+import { getSnapName } from '../../../../helpers/utils/util';
+import {
+  AvatarFavicon,
+  BadgeWrapper,
+  BadgeWrapperPosition,
+  ICON_NAMES,
+  ICON_SIZES,
+  AvatarIcon,
+  AvatarBase,
+} from '../../../component-library';
+import { getTargetSubjectMetadata } from '../../../../selectors';
+
+const SnapAvatar = ({ snapId, className }) => {
+  const subjectMetadata = useSelector((state) =>
+    getTargetSubjectMetadata(state, snapId),
+  );
+
+  const friendlyName = snapId && getSnapName(snapId, subjectMetadata);
+
+  const iconUrl = subjectMetadata?.iconUrl;
+
+  const fallbackIcon = friendlyName && friendlyName[0] ? friendlyName[0] : '?';
+
+  return (
+    <BadgeWrapper
+      className={classnames('snap-avatar', className)}
+      badge={
+        <AvatarIcon
+          iconName={ICON_NAMES.SNAPS}
+          size={ICON_SIZES.XS}
+          backgroundColor={IconColor.infoDefault}
+          iconProps={{
+            size: ICON_SIZES.XS,
+            color: IconColor.infoInverse,
+          }}
+        />
+      }
+      position={BadgeWrapperPosition.bottomRight}
+    >
+      {iconUrl ? (
+        <AvatarFavicon size={Size.LG} src={iconUrl} />
+      ) : (
+        <AvatarBase
+          size={Size.LG}
+          display={DISPLAY.FLEX}
+          alignItems={AlignItems.center}
+          justifyContent={JustifyContent.center}
+          color={TextColor.textAlternative}
+          style={{ borderWidth: '0px' }}
+        >
+          {fallbackIcon}
+        </AvatarBase>
+      )}
+    </BadgeWrapper>
+  );
+};
+
+SnapAvatar.propTypes = {
+  /**
+   * The id of the snap
+   */
+  snapId: PropTypes.string,
+  /**
+   * The className of the SnapAvatar
+   */
+  className: PropTypes.string,
+};
+
+export default SnapAvatar;

ui/components/app/flask/snap-avatar/snap-avatar.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import SnapAvatar from '.';
+
+export default {
+  title: 'Components/App/Flask/SnapAvatar',
+
+  component: SnapAvatar,
+  argTypes: {
+    snapId: {
+      control: 'text',
+    },
+  },
+};
+
+export const DefaultStory = (args) => <SnapAvatar {...args} />;
+
+DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  snapId: 'npm:@metamask/test-snap-bip44',
+};