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

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,
  BLOCK_SIZES,
} from '../../../../helpers/constants/design-system';
import {
  getSnapName,
  removeSnapIdPrefix,
} from '../../../../helpers/utils/util';
import { Text, ButtonIcon } from '../../../component-library';
import {
  ICON_NAMES,
  ICON_SIZES,
} from '../../../component-library/icon/deprecated';
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}
      width={BLOCK_SIZES.FULL}
    >
      <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}
        style={{ marginLeft: 'auto' }}
      />
    </Box>
  );
};

SnapAuthorship.propTypes = {
  /**
   * The id of the snap
   */
  snapId: PropTypes.string,
  /**
   * The className of the SnapAuthorship
   */
  className: PropTypes.string,
};

export default SnapAuthorship;