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

234 lines
8.2 KiB
JavaScript
Raw Normal View History

2021-02-22 17:20:42 +01:00
import React, {
useCallback,
useEffect,
useMemo,
useReducer,
useState,
} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { isEqual } from 'lodash';
import { produce } from 'immer';
import Box from '../../components/ui/box';
import Chip from '../../components/ui/chip';
import MetaMaskTemplateRenderer from '../../components/app/metamask-template-renderer';
import SiteIcon from '../../components/ui/site-icon';
import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
import { stripHttpsScheme } from '../../helpers/utils/util';
import { useI18nContext } from '../../hooks/useI18nContext';
import { useOriginMetadata } from '../../hooks/useOriginMetadata';
import { getUnapprovedTemplatedConfirmations } from '../../selectors';
2021-02-22 17:20:42 +01:00
import NetworkDisplay from '../../components/app/network-display/network-display';
import { COLORS, SIZES } from '../../helpers/constants/design-system';
import Callout from '../../components/ui/callout';
import ConfirmationFooter from './components/confirmation-footer';
import { getTemplateValues, getTemplateAlerts } from './templates';
/**
* a very simple reducer using produce from Immer to keep state manipulation
* immutable and painless. This state is not stored in redux state because it
* should persist only for the lifespan of the current session, and will only
* be used on this page. Dismissing alerts for confirmations should persist
* while the user pages back and forth between confirmations. However, if the
* user closes the confirmation window and later reopens the extension they
* should be displayed the alerts again.
*/
const alertStateReducer = produce((state, action) => {
switch (action.type) {
case 'dismiss':
if (state?.[action.confirmationId]?.[action.alertId]) {
state[action.confirmationId][action.alertId].dismissed = true;
}
break;
case 'set':
if (!state[action.confirmationId]) {
state[action.confirmationId] = {};
}
action.alerts.forEach((alert) => {
state[action.confirmationId][alert.id] = {
...alert,
dismissed: false,
};
});
break;
default:
throw new Error(
'You must provide a type when dispatching an action for alertState',
);
}
});
/**
* Encapsulates the state and effects needed to manage alert state for the
* confirmation page in a custom hook. This hook is not likely to be used
* outside of this file, but it helps to reduce complexity of the primary
* component.
* @param {Object} pendingConfirmation - a pending confirmation waiting for
* user approval
* @returns {[alertState: Object, dismissAlert: Function]} - tuple with
* the current alert state and function to dismiss an alert by id
*/
function useAlertState(pendingConfirmation) {
const [alertState, dispatch] = useReducer(alertStateReducer, {});
/**
* Computation of the current alert state happens every time the current
* pendingConfirmation changes. The async function getTemplateAlerts is
* responsible for returning alert state. Setting state on unmounted
* components is an anti-pattern, so we use a isMounted variable to keep
* track of the current state of the component. Returning a function that
* sets isMounted to false when the component is unmounted.
*/
useEffect(() => {
let isMounted = true;
if (pendingConfirmation) {
getTemplateAlerts(pendingConfirmation).then((alerts) => {
if (isMounted && alerts.length > 0) {
2021-02-22 17:20:42 +01:00
dispatch({
type: 'set',
confirmationId: pendingConfirmation.id,
alerts,
});
}
});
}
return () => {
isMounted = false;
};
}, [pendingConfirmation]);
const dismissAlert = useCallback(
(alertId) => {
dispatch({
type: 'dismiss',
confirmationId: pendingConfirmation.id,
alertId,
});
},
[pendingConfirmation],
);
return [alertState, dismissAlert];
}
export default function ConfirmationPage() {
const t = useI18nContext();
const dispatch = useDispatch();
const history = useHistory();
const pendingConfirmations = useSelector(
getUnapprovedTemplatedConfirmations,
isEqual,
);
2021-02-22 17:20:42 +01:00
const [currentPendingConfirmation, setCurrentPendingConfirmation] = useState(
0,
);
const pendingConfirmation = pendingConfirmations[currentPendingConfirmation];
const originMetadata = useOriginMetadata(pendingConfirmation?.origin);
const [alertState, dismissAlert] = useAlertState(pendingConfirmation);
// Generating templatedValues is potentially expensive, and if done on every render
// will result in a new object. Avoiding calling this generation unnecessarily will
// improve performance and prevent unnecessary draws.
const templatedValues = useMemo(() => {
return pendingConfirmation
? getTemplateValues(pendingConfirmation, t, dispatch)
: {};
}, [pendingConfirmation, t, dispatch]);
useEffect(() => {
// If the number of pending confirmations reduces to zero when the user
2021-02-25 23:25:51 +01:00
// return them to the default route. Otherwise, if the number of pending
// confirmations reduces to a number that is less than the currently
// viewed index, reset the index.
if (pendingConfirmations.length === 0) {
2021-02-22 17:20:42 +01:00
history.push(DEFAULT_ROUTE);
} else if (pendingConfirmations.length <= currentPendingConfirmation) {
setCurrentPendingConfirmation(pendingConfirmations.length - 1);
}
}, [pendingConfirmations, history, currentPendingConfirmation]);
if (!pendingConfirmation) {
return null;
}
return (
<div className="confirmation-page">
{pendingConfirmations.length > 1 && (
<div className="confirmation-page__navigation">
<p>
{t('xOfYPending', [
currentPendingConfirmation + 1,
pendingConfirmations.length,
])}
</p>
{currentPendingConfirmation > 0 && (
<button
className="confirmation-page__navigation-button"
onClick={() =>
setCurrentPendingConfirmation(currentPendingConfirmation - 1)
}
>
<i className="fas fa-chevron-left"></i>
</button>
)}
<button
className="confirmation-page__navigation-button"
disabled={
currentPendingConfirmation + 1 === pendingConfirmations.length
}
onClick={() =>
setCurrentPendingConfirmation(currentPendingConfirmation + 1)
}
>
<i className="fas fa-chevron-right"></i>
</button>
</div>
)}
<div className="confirmation-page__content">
<Box justifyContent="center">
<NetworkDisplay
colored={false}
indicatorSize={SIZES.XS}
labelProps={{ color: COLORS.BLACK }}
/>
</Box>
<Box justifyContent="center" padding={[1, 4, 4]}>
<Chip
label={stripHttpsScheme(originMetadata.origin)}
leftIcon={
<SiteIcon
Permission System 2.0 (#12243) # Permission System 2.0 ## Background This PR migrates the extension permission system to [the new `PermissionController`](https://github.com/MetaMask/snaps-skunkworks/tree/main/packages/controllers/src/permissions). The original permission system, based on [`rpc-cap`](https://github.com/MetaMask/rpc-cap), introduced [`ZCAP-LD`](https://w3c-ccg.github.io/zcap-ld/)-like permissions to our JSON-RPC stack. We used it to [implement](https://github.com/MetaMask/metamask-extension/pull/7004) what we called "LoginPerSite" in [version 7.7.0](https://github.com/MetaMask/metamask-extension/releases/tag/v7.7.0) of the extension, which enabled the user to choose which accounts, if any, should be exposed to each dapp. While that was a worthwhile feature in and of itself, we wanted a permission _system_ in order to enable everything we are going to with Snaps. Unfortunately, the original permission system was difficult to use, and necessitated the creation of the original `PermissionsController` (note the "s"), which was more or less a wrapper for `rpc-cap`. With this PR, we shake off the yoke of the original permission system, in favor of the modular, self-contained, ergonomic, and more mature permission system 2.0. Note that [the `PermissionController` readme](https://github.com/MetaMask/snaps-skunkworks/tree/main/packages/controllers/src/permissions/README.md) explains how the new permission system works. The `PermissionController` and `SubjectMetadataController` are currently shipped via `@metamask/snap-controllers`. This is a temporary state of affairs, and we'll move them to `@metamask/controllers` once they've landed in prod. ## Changes in Detail First, the changes in this PR are not as big as they seem. Roughly half of the additions in this PR are fixtures in the test for the new migration (number 68), and a significant portion of the remaining ~2500 lines are due to find-and-replace changes in other test fixtures and UI files. - The extension `PermissionsController` has been deleted, and completely replaced with the new `PermissionController` from [`@metamask/snap-controllers`](https://www.npmjs.com/package/@metamask/snap-controllers). - The original `PermissionsController` "domain metadata" functionality is now managed by the new `SubjectMetadataController`, also from [`@metamask/snap-controllers`](https://www.npmjs.com/package/@metamask/snap-controllers). - The permission activity and history log controller has been renamed `PermissionLogController` and has its own top-level state key, but is otherwise functionally equivalent to the existing implementation. - Migration number 68 has been added to account for the new state changes. - The tests in `app/scripts/controllers/permissions` have been migrated from `mocha` to `jest`. Reviewers should focus their attention on the following files: - `app/scripts/` - `metamask-controller.js` - This is where most of the integration work for the new `PermissionController` occurs. Some functions that were internal to the original controller were moved here. - `controllers/permissions/` - `selectors.js` - These selectors are for `ControllerMessenger` selector subscriptions. The actual subscriptions occur in `metamask-controller.js`. See the `ControllerMessenger` implementation for details. - `specifications.js` - The caveat and permission specifications are required by the new `PermissionController`, and are used to specify the `eth_accounts` permission and its JSON-RPC method implementation. See the `PermissionController` readme for details. - `migrations/068.js` - The new state should be cross-referenced with the controllers that manage it. The accompanying tests should also be thoroughly reviewed. Some files may appear new but have just moved and/or been renamed: - `app/scripts/lib/rpc-method-middleware/handlers/request-accounts.js` - This was previously implemented in `controllers/permissions/permissionsMethodMiddleware.js`. - `test/mocks/permissions.js` - A truncated version of `test/mocks/permission-controller.js`. Co-authored-by: Mark Stacey <markjstacey@gmail.com>
2021-12-07 04:16:49 +01:00
icon={originMetadata.iconUrl}
2021-02-22 17:20:42 +01:00
name={originMetadata.hostname}
size={32}
/>
}
/>
</Box>
<MetaMaskTemplateRenderer sections={templatedValues.content} />
</div>
<ConfirmationFooter
alerts={
alertState[pendingConfirmation.id] &&
Object.values(alertState[pendingConfirmation.id])
.filter((alert) => alert.dismissed === false)
.map((alert, idx, filtered) => (
<Callout
key={alert.id}
severity={alert.severity}
dismiss={() => dismissAlert(alert.id)}
isFirst={idx === 0}
isLast={idx === filtered.length - 1}
isMultiple={filtered.length > 1}
>
<MetaMaskTemplateRenderer sections={alert.content} />
</Callout>
))
}
onApprove={templatedValues.onApprove}
onCancel={templatedValues.onCancel}
approveText={templatedValues.approvalText}
cancelText={templatedValues.cancelText}
/>
</div>
);
}