1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-11 20:27:12 +01:00
metamask-extension/ui/components/app/connected-accounts-permissions/connected-accounts-permissions.component.js
2021-04-28 14:53:59 -05:00

87 lines
2.2 KiB
JavaScript

import classnames from 'classnames';
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import CheckBox from '../../ui/check-box';
export default class ConnectedAccountsPermissions extends PureComponent {
static contextTypes = {
t: PropTypes.func.isRequired,
};
static defaultProps = {
permissions: [],
};
static propTypes = {
permissions: PropTypes.arrayOf(
PropTypes.shape({
key: PropTypes.string.isRequired,
}),
),
};
state = {
expanded: false,
};
toggleExpanded = () => {
this.setState((prevState) => ({
expanded: !prevState.expanded,
}));
};
render() {
const { permissions } = this.props;
const { t } = this.context;
const { expanded } = this.state;
if (permissions.length === 0) {
return null;
}
return (
<div className="connected-accounts-permissions">
<p
className="connected-accounts-permissions__header"
onClick={this.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">
{permissions.map(({ key: permissionName }) => (
<li
key={permissionName}
className="connected-accounts-permissions__list-item"
>
<CheckBox
checked
disabled
id={permissionName}
className="connected-accounts-permissions__checkbox"
/>
<label htmlFor={permissionName}>{t(permissionName)}</label>
</li>
))}
</ul>
</div>
</div>
);
}
}