1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js

75 lines
1.9 KiB
JavaScript
Raw Normal View History

[FLASK] Improve snaps connect flow (#19461) * add todo comments * add snaps-connect component * added new messages * added component scss files to main scss files * remove dead code and add snap-connect-cell * update snaps connect * updated messages and styling * update messages and css * update css * moved snaps privacy warning into snaps connect, moved snaps connect error into snap install * added story and removed unused import * fix style linting and move snaps connect error css * removed unused message * ran lavamoat policy generation * fix fencing * some more css changes * Fix scrolling and box shadow * added comment, fixed quote * Align more with Figma * Regen LavaMoat policies * bring back privacy logic to permission page container * Revert scrolling changes + fix snaps icon * fix linting, reintroduced dedupe logic and additionally addressed a corner case * made some fixes * Fix scrolling with multiple snaps * add dedupe logic to snaps connect and fix spacing issue * policy regen * lint fix * fix fencing * replaced with new icon design, trimmed origin urls in certain places * remove unused imports * badge icon size * Revert LM policy changes * Use SnapAvatar for snaps-connect * Use InstallError for connection failed * Delete unused CSS file * Remove unused CSS * Use useOriginMetadata * addressed PR comments * fix linting errors * add explicit condition * fix fencing * fix some more fencing * fix util fencing issue * fix storybook file, prevent null destructuring * Fix storybook origin URLs * Fix wrong prop name --------- Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com> Co-authored-by: Guillaume Roux <guillaumeroux123@gmail.com> Co-authored-by: Erik Nilsson <eriks@mail.se>
2023-06-09 16:36:38 +02:00
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 (
<Box
alignItems={AlignItems.center}
paddingTop={2}
paddingBottom={2}
display={Display.Flex}
>
<SnapAvatar snapId={snapId} />
<Box width="full" marginLeft={4} marginRight={4}>
<Text>
{t('connectSnap', [
<Text as={ValidTag.Span} key="1" fontWeight={FontWeight.Bold}>
{friendlyName}
</Text>,
])}
</Text>
</Box>
<Box>
<Tooltip
html={
<div>
{t('snapConnectionWarning', [
<b key="0">{origin}</b>,
<b key="1">{friendlyName}</b>,
])}
</div>
}
position="bottom"
>
<Icon
color={IconColor.iconMuted}
name={IconName.Info}
size={IconSize.Sm}
/>
</Tooltip>
</Box>
</Box>
);
}
SnapConnectCell.propTypes = {
origin: PropTypes.string.isRequired,
snapId: PropTypes.string.isRequired,
};