1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 07:24:56 +01:00
metamask-extension/ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.js
George Marshall 092189cb5b
Adding polymorphic 'as' prop to Box component and updating Typography component to use the same (#15518)
* Adding polymorphic as prop to Box component

* Updating Typography component to use 'as' as the polymorphic prop instead of 'tag'

* Fixing linting
2022-08-10 12:42:42 -07:00

97 lines
2.7 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Chip from '../../../ui/chip';
import Box from '../../../ui/box';
import Typography from '../../../ui/typography';
import {
COLORS,
TYPOGRAPHY,
TEXT_ALIGN,
} from '../../../../helpers/constants/design-system';
import { useI18nContext } from '../../../../hooks/useI18nContext';
const snapIdPrefixes = ['npm:', 'local:'];
const SnapsAuthorshipPill = ({ snapId, version, className }) => {
// @todo Use getSnapPrefix from snaps-skunkworks when possible
// 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 = 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';
const t = useI18nContext();
return (
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className={classnames(className, `snaps-authorship-pill`)}
>
<Chip
leftIcon={
<Box paddingLeft={2}>
<i className={`${icon} snaps-authorship-icon`} />
</Box>
}
rightIcon={
version && (
<Box
className="snaps-authorship-version"
backgroundColor={COLORS.PRIMARY_DEFAULT}
paddingLeft={2}
paddingRight={2}
>
<Typography
color={COLORS.PRIMARY_INVERSE}
variant={TYPOGRAPHY.H7}
align={TEXT_ALIGN.CENTER}
as="span"
className="version"
>
{t('shorthandVersion', [version])}
</Typography>
</Box>
)
}
backgroundColor={COLORS.BACKGROUND_DEFAULT}
>
<Typography
className="chip__label"
variant={TYPOGRAPHY.H7}
as="span"
color={COLORS.TEXT_ALTERNATIVE}
title={packageName}
>
{packageName}
</Typography>
</Chip>
</a>
);
};
SnapsAuthorshipPill.propTypes = {
/**
* The id of the snap
*/
snapId: PropTypes.string,
/**
* The version of the snap
*/
version: PropTypes.string,
/**
* The className of the SnapsAuthorshipPill
*/
className: PropTypes.string,
};
export default SnapsAuthorshipPill;