import React from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; import Box from '../../../ui/box'; import { IconColor, AlignItems, Display, FontWeight, } from '../../../../helpers/constants/design-system'; import { getSnapName } from '../../../../helpers/utils/util'; import { Icon, IconName, IconSize, Text, ValidTag, } from '../../../component-library'; import Tooltip from '../../../ui/tooltip/tooltip'; import { useI18nContext } from '../../../../hooks/useI18nContext'; import SnapAvatar from '../snap-avatar/snap-avatar'; import { getTargetSubjectMetadata } from '../../../../selectors'; export default function SnapConnectCell({ origin, snapId }) { const t = useI18nContext(); const snapMetadata = useSelector((state) => getTargetSubjectMetadata(state, snapId), ); const friendlyName = getSnapName(snapId, snapMetadata); return ( {t('connectSnap', [ {friendlyName} , ])} {t('snapConnectionWarning', [ {origin}, {friendlyName}, ])} } position="bottom" > ); } SnapConnectCell.propTypes = { origin: PropTypes.string.isRequired, snapId: PropTypes.string.isRequired, };