1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/components/app/connected-accounts-permissions/connected-accounts-permissions.js

88 lines
2.4 KiB
JavaScript
Raw Normal View History

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, key, 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',
{
2022-07-31 20:26:40 +02:00
'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);