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/flask/update-snap-permission-list/update-snap-permission-list.js
Frederik Bolding 025ee2cb48
[FLASK] Expose transaction origin to transaction insight snaps (#16671)
* Expose transaction origin to transaction insight snaps

* Support multiple icons for each label for a permission

* Add transaction insight origin permission

* Fix fencing

* Fix import and permission crash

* Use function properly for connected accounts
2022-12-01 14:38:56 +01:00

125 lines
3.8 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { getPermissionDescription } from '../../../../helpers/utils/permission';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import { formatDate } from '../../../../helpers/utils/util';
import Typography from '../../../ui/typography/typography';
import { COLORS } from '../../../../helpers/constants/design-system';
export default function UpdateSnapPermissionList({
approvedPermissions,
revokedPermissions,
newPermissions,
}) {
const t = useI18nContext();
const ApprovedPermissions = () => {
return Object.entries(approvedPermissions).map(
([permissionName, permissionValue]) => {
const permissions = getPermissionDescription(
t,
permissionName,
permissionValue,
);
const { date } = permissionValue;
const formattedDate = formatDate(date, 'yyyy-MM-dd');
return permissions.map(({ label, rightIcon }) => (
<div className="approved-permission" key={permissionName}>
<i className="fas fa-check" />
<div className="permission-description">
{label}
<Typography
color={COLORS.TEXT_ALTERNATIVE}
className="permission-description-subtext"
boxProps={{ paddingTop: 1 }}
>
{t('approvedOn', [formattedDate])}
</Typography>
</div>
{rightIcon && <i className={rightIcon} />}
</div>
));
},
);
};
const RevokedPermissions = () => {
return Object.entries(revokedPermissions).map(
([permissionName, permissionValue]) => {
const permissions = getPermissionDescription(
t,
permissionName,
permissionValue,
);
return permissions.map(({ label, rightIcon }) => (
<div className="revoked-permission" key={permissionName}>
<i className="fas fa-x" />
<div className="permission-description">
{label}
<Typography
color={COLORS.TEXT_ALTERNATIVE}
boxProps={{ paddingTop: 1 }}
className="permission-description-subtext"
>
{t('permissionRevoked')}
</Typography>
</div>
{rightIcon && <i className={rightIcon} />}
</div>
));
},
);
};
const NewPermissions = () => {
return Object.entries(newPermissions).map(
([permissionName, permissionValue]) => {
const permissions = getPermissionDescription(
t,
permissionName,
permissionValue,
);
return permissions.map(({ label, rightIcon }) => (
<div className="new-permission" key={permissionName}>
<i className="fas fa-arrow-right" />
<div className="permission-description">
{label}
<Typography
color={COLORS.TEXT_ALTERNATIVE}
boxProps={{ paddingTop: 1 }}
className="permission-description-subtext"
>
{t('permissionRequested')}
</Typography>
</div>
{rightIcon && <i className={rightIcon} />}
</div>
));
},
);
};
return (
<div className="update-snap-permission-list">
<NewPermissions />
<ApprovedPermissions />
<RevokedPermissions />
</div>
);
}
UpdateSnapPermissionList.propTypes = {
/**
* Permissions that have already been approved
*/
approvedPermissions: PropTypes.object.isRequired,
/**
* Previously used permissions that are now revoked
*/
revokedPermissions: PropTypes.object.isRequired,
/**
* New permissions that are being requested
*/
newPermissions: PropTypes.object.isRequired,
};