1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/connected-accounts-permissions/connected-accounts-permissions.js
Hassan Malik c2b2f2685e
[FLASK] Redesign key management modal (#18263)
* added the rest of the sev1 warnings to getSnapInstallWarnings

* added and updated translations

* Updated getSnapInstallWarnings to include warnings for all weight-1 permissions

* Updated snap install warning and css according to designs

* fix snaps tests

* fixed alignment/spacing

* updated e2e tests to click through the newly displayed public key access warning

* lint fix

* fixed update snap test

* refactored getSnapInstallWarnings, moved logic to PERMISSION_DESCRIPTIONS

* fix logic to account for objects & arrays

* update function description

* add missing properties to ethereum provider description

* moved id and message to baseDescription to fix error

* add optional chaining to fix undefined error

* more optional chaining

* more optional chaining
2023-03-29 15:17:57 -04:00

92 lines
2.5 KiB
JavaScript

import classnames from 'classnames';
import PropTypes from 'prop-types';
import React, { useState } from 'react';
import { flatten } from 'lodash';
import CheckBox from '../../ui/check-box';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { getPermissionDescription } from '../../../helpers/utils/permission';
const ConnectedAccountsPermissions = ({ permissions }) => {
const t = useI18nContext();
const [expanded, setExpanded] = useState(false);
const toggleExpanded = () => {
setExpanded((_expanded) => !_expanded);
};
if (!permissions.length) {
return null;
}
const permissionLabels = flatten(
permissions.map(({ key, value }) =>
getPermissionDescription({
t,
permissionName: key,
permissionValue: value,
}),
),
);
return (
<div className="connected-accounts-permissions">
<p
className="connected-accounts-permissions__header"
onClick={toggleExpanded}
>
<strong>{t('permissions')}</strong>
<button
className={classnames('fas', {
'fa-angle-down': !expanded,
'fa-angle-up': expanded,
})}
title={t('showPermissions')}
/>
</p>
<div
className={classnames(
'connected-accounts-permissions__list-container',
{
'connected-accounts-permissions__list-container--expanded':
expanded,
},
)}
>
<p>{t('authorizedPermissions')}:</p>
<ul className="connected-accounts-permissions__list">
{permissionLabels.map(({ label }, idx) => (
<li
key={`connected-permission-${idx}`}
className="connected-accounts-permissions__list-item"
>
<CheckBox
checked
disabled
id={`connected-permission-${idx}`}
className="connected-accounts-permissions__checkbox"
/>
<label htmlFor={`connected-permission-${idx}`}>{label}</label>
</li>
))}
</ul>
</div>
</div>
);
};
ConnectedAccountsPermissions.propTypes = {
permissions: PropTypes.arrayOf(
PropTypes.shape({
key: PropTypes.string.isRequired,
}),
),
};
ConnectedAccountsPermissions.defaultProps = {
permissions: [],
};
ConnectedAccountsPermissions.displayName = 'ConnectedAccountsPermissions';
export default React.memo(ConnectedAccountsPermissions);