1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js
Erik Marks 4b2cd0ef7a
Fix Snaps view search (#14693)
Closes #14687

Snap IDs were not properly encoded (and decoded) as URI components in the Snaps view search implementation. This ensures that they are.
2022-05-11 13:14:53 -07:00

98 lines
3.1 KiB
JavaScript

import React, { useRef, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import SnapSettingsCard from '../../../../components/app/flask/snap-settings-card';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import Typography from '../../../../components/ui/typography/typography';
import {
TYPOGRAPHY,
COLORS,
FLEX_DIRECTION,
JUSTIFY_CONTENT,
ALIGN_ITEMS,
} from '../../../../helpers/constants/design-system';
import Box from '../../../../components/ui/box';
import { SNAPS_VIEW_ROUTE } from '../../../../helpers/constants/routes';
import { disableSnap, enableSnap } from '../../../../store/actions';
import { getSnaps } from '../../../../selectors';
import { handleSettingsRefs } from '../../../../helpers/utils/settings-search';
const SnapListTab = () => {
const t = useI18nContext();
const history = useHistory();
const dispatch = useDispatch();
const snaps = useSelector(getSnaps);
const settingsRef = useRef();
const onClick = (snap) => {
history.push(`${SNAPS_VIEW_ROUTE}/${encodeURIComponent(snap.id)}`);
};
const onToggle = (snap) => {
if (snap.enabled) {
dispatch(disableSnap(snap.id));
} else {
dispatch(enableSnap(snap.id));
}
};
useEffect(() => {
handleSettingsRefs(t, t('snaps'), settingsRef);
}, [settingsRef, t]);
return (
<div className="snap-list-tab" ref={settingsRef}>
{Object.entries(snaps).length ? (
<div className="snap-list-tab__body">
<Box display="flex" flexDirection={FLEX_DIRECTION.COLUMN}>
<Typography variant={TYPOGRAPHY.H5} marginBottom={2}>
{t('expandExperience')}
</Typography>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.TEXT_ALTERNATIVE}
marginBottom={2}
>
{t('manageSnaps')}
</Typography>
</Box>
<div className="snap-list-tab__wrapper">
{Object.entries(snaps).map(([key, snap]) => {
return (
<SnapSettingsCard
className="snap-settings-card"
isEnabled={snap.enabled}
key={key}
onToggle={() => {
onToggle(snap);
}}
description={snap.manifest.description}
url={snap.id}
name={snap.manifest.proposedName}
status={snap.status}
version={snap.version}
onClick={() => {
onClick(snap);
}}
/>
);
})}
</div>
</div>
) : (
<Box
className="snap-list-tab__container--no-snaps"
width="full"
height="full"
justifyContent={JUSTIFY_CONTENT.CENTER}
alignItems={ALIGN_ITEMS.CENTER}
>
<Typography variant={TYPOGRAPHY.H4} color={COLORS.TEXT_ALTERNATIVE}>
<span>{t('noSnaps')}</span>
</Typography>
</Box>
)}
</div>
);
};
export default SnapListTab;