1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Permissions: convert hook to util (#13906)

* Permissions: convert hook into helper util
- instantiate once
- freeze
- alphabetize
- add additional comments to @param
https://github.com/MetaMask/metamask-extension/pull/13906#pullrequestreview-906554847
This commit is contained in:
Ariella Vu 2022-03-14 15:26:02 -03:00 committed by GitHub
parent 060c6d651c
commit 69c2cd3a94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 98 additions and 104 deletions

View File

@ -3,14 +3,12 @@ import PropTypes from 'prop-types';
import React, { useState } from 'react';
import CheckBox from '../../ui/check-box';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { usePermissionDescriptions } from '../../../hooks/usePermissionDescriptions';
import { getPermissionDescription } from '../../../helpers/utils/permission';
const ConnectedAccountsPermissions = ({ permissions }) => {
const t = useI18nContext();
const [expanded, setExpanded] = useState(false);
const getPermissionDescription = usePermissionDescriptions();
const toggleExpanded = () => {
setExpanded((_expanded) => !_expanded);
};
@ -56,7 +54,7 @@ const ConnectedAccountsPermissions = ({ permissions }) => {
className="connected-accounts-permissions__checkbox"
/>
<label htmlFor={permissionName}>
{getPermissionDescription(permissionName).label}
{getPermissionDescription(t, permissionName).label}
</label>
</li>
))}

View File

@ -1,14 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import { usePermissionDescriptions } from '../../../hooks/usePermissionDescriptions';
import { getPermissionDescription } from '../../../helpers/utils/permission';
import { useI18nContext } from '../../../hooks/useI18nContext';
export default function PermissionsConnectPermissionList({ permissions }) {
const getPermissionDescription = usePermissionDescriptions();
const t = useI18nContext();
return (
<div className="permissions-connect-permission-list">
{Object.keys(permissions).map((permission) => {
const { label, leftIcon, rightIcon } = getPermissionDescription(
t,
permission,
);

View File

@ -0,0 +1,92 @@
import deepFreeze from 'deep-freeze-strict';
import {
RestrictedMethods,
///: BEGIN:ONLY_INCLUDE_IN(flask)
EndowmentPermissions,
PermissionNamespaces,
///: END:ONLY_INCLUDE_IN
} from '../../../shared/constants/permissions';
///: BEGIN:ONLY_INCLUDE_IN(flask)
import { coinTypeToProtocolName } from './util';
///: END:ONLY_INCLUDE_IN
const UNKNOWN_PERMISSION = Symbol('unknown');
const PERMISSION_DESCRIPTIONS = deepFreeze({
[RestrictedMethods.eth_accounts]: {
label: (t) => t('permission_ethereumAccounts'),
leftIcon: 'fas fa-eye',
rightIcon: null,
},
///: BEGIN:ONLY_INCLUDE_IN(flask)
[RestrictedMethods.snap_confirm]: {
label: (t) => t('permission_customConfirmation'),
leftIcon: 'fas fa-user-check',
rightIcon: null,
},
[RestrictedMethods['snap_getBip44Entropy_*']]: {
label: (t, permissionName) => {
const coinType = permissionName.split('_').slice(-1);
return t('permission_manageBip44Keys', [
coinTypeToProtocolName(coinType) ||
`${coinType} (Unrecognized protocol)`,
]);
},
leftIcon: 'fas fa-door-open',
rightIcon: null,
},
[RestrictedMethods.snap_manageState]: {
label: (t) => t('permission_manageState'),
leftIcon: 'fas fa-download',
rightIcon: null,
},
[RestrictedMethods['wallet_snap_*']]: {
label: (t, permissionName) => {
const snapId = permissionName.split('_').slice(-1);
return t('permission_accessSnap', [snapId]);
},
leftIcon: 'fas fa-bolt',
rightIcon: null,
},
[EndowmentPermissions['endowment:network-access']]: {
label: (t) => t('permission_accessNetwork'),
leftIcon: 'fas fa-wifi',
rightIcon: null,
},
///: END:ONLY_INCLUDE_IN
[UNKNOWN_PERMISSION]: {
label: (t, permissionName) =>
t('permission_unknown', [permissionName ?? 'undefined']),
leftIcon: 'fas fa-times-circle',
rightIcon: null,
},
});
/**
* @typedef {Object} PermissionLabelObject
* @property {string} label - The text label.
* @property {string} leftIcon - The left icon.
* @property {string} rightIcon - The right icon.
*/
/**
* @param {Function} t - The translation function
* @param {string} permissionName - The name of the permission to request
* @returns {(permissionName:string) => PermissionLabelObject}
*/
export const getPermissionDescription = (t, permissionName) => {
let value = PERMISSION_DESCRIPTIONS[UNKNOWN_PERMISSION];
if (Object.hasOwnProperty.call(PERMISSION_DESCRIPTIONS, permissionName)) {
value = PERMISSION_DESCRIPTIONS[permissionName];
}
///: BEGIN:ONLY_INCLUDE_IN(flask)
for (const namespace of Object.keys(PermissionNamespaces)) {
if (permissionName.startsWith(namespace)) {
value = PERMISSION_DESCRIPTIONS[PermissionNamespaces[namespace]];
}
}
///: END:ONLY_INCLUDE_IN
return { ...value, label: value.label(t, permissionName) };
};

View File

@ -1,98 +0,0 @@
import { useMemo } from 'react';
import {
RestrictedMethods,
///: BEGIN:ONLY_INCLUDE_IN(flask)
EndowmentPermissions,
PermissionNamespaces,
///: END:ONLY_INCLUDE_IN
} from '../../shared/constants/permissions';
///: BEGIN:ONLY_INCLUDE_IN(flask)
import { coinTypeToProtocolName } from '../helpers/utils/util';
///: END:ONLY_INCLUDE_IN
import { useI18nContext } from './useI18nContext';
const UNKNOWN_PERMISSION = Symbol('unknown');
/**
* @typedef {Object} PermissionLabelObject
* @property {string} label - The text label.
* @property {string} leftIcon - The left icon.
* @property {string} rightIcon - The right icon.
*/
/**
* @returns {(permissionName:string) => PermissionLabelObject}
*/
export const usePermissionDescriptions = () => {
const t = useI18nContext();
return useMemo(() => {
const permissionDescriptions = {
[RestrictedMethods.eth_accounts]: {
leftIcon: 'fas fa-eye',
label: t('permission_ethereumAccounts'),
rightIcon: null,
},
///: BEGIN:ONLY_INCLUDE_IN(flask)
[RestrictedMethods.snap_confirm]: {
leftIcon: 'fas fa-user-check',
label: t('permission_customConfirmation'),
rightIcon: null,
},
[RestrictedMethods['snap_getBip44Entropy_*']]: (permissionName) => {
const coinType = permissionName.split('_').slice(-1);
return {
leftIcon: 'fas fa-door-open',
label: t('permission_manageBip44Keys', [
coinTypeToProtocolName(coinType) ||
`${coinType} (Unrecognized protocol)`,
]),
rightIcon: null,
};
},
[RestrictedMethods.snap_manageState]: {
leftIcon: 'fas fa-download',
label: t('permission_manageState'),
rightIcon: null,
},
[RestrictedMethods['wallet_snap_*']]: (permissionName) => {
const snapId = permissionName.split('_').slice(-1);
return {
leftIcon: 'fas fa-bolt',
label: t('permission_accessSnap', [snapId]),
rightIcon: null,
};
},
[EndowmentPermissions['endowment:network-access']]: {
leftIcon: 'fas fa-wifi',
label: t('permission_accessNetwork'),
rightIcon: null,
},
///: END:ONLY_INCLUDE_IN
[UNKNOWN_PERMISSION]: (permissionName) => {
return {
leftIcon: 'fas fa-times-circle',
label: t('permission_unknown', [permissionName ?? 'undefined']),
rightIcon: null,
};
},
};
return (permissionName) => {
let value = permissionDescriptions[UNKNOWN_PERMISSION];
if (Object.hasOwnProperty.call(permissionDescriptions, permissionName)) {
value = permissionDescriptions[permissionName];
}
///: BEGIN:ONLY_INCLUDE_IN(flask)
for (const namespace of Object.keys(PermissionNamespaces)) {
if (permissionName.startsWith(namespace)) {
value = permissionDescriptions[PermissionNamespaces[namespace]];
}
}
///: END:ONLY_INCLUDE_IN
return typeof value === 'function' ? value(permissionName) : value;
};
}, [t]);
};