1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/pages/permissions-connect/permissions-connect.component.js

394 lines
12 KiB
JavaScript

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
///: BEGIN:ONLY_INCLUDE_IN(flask)
import { ethErrors, serializeError } from 'eth-rpc-errors';
///: END:ONLY_INCLUDE_IN
import { getEnvironmentType } from '../../../app/scripts/lib/util';
import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../shared/constants/app';
import { MILLISECOND } from '../../../shared/constants/time';
import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
import PermissionPageContainer from '../../components/app/permission-page-container';
import ChooseAccount from './choose-account';
import PermissionsRedirect from './redirect';
///: BEGIN:ONLY_INCLUDE_IN(flask)
import SnapInstall from './flask/snap-install';
import SnapUpdate from './flask/snap-update';
///: END:ONLY_INCLUDE_IN
const APPROVE_TIMEOUT = MILLISECOND * 1200;
export default class PermissionConnect extends Component {
static propTypes = {
approvePermissionsRequest: PropTypes.func.isRequired,
rejectPermissionsRequest: PropTypes.func.isRequired,
getRequestAccountTabIds: PropTypes.func.isRequired,
getCurrentWindowTab: PropTypes.func.isRequired,
accounts: PropTypes.array.isRequired,
currentAddress: PropTypes.string.isRequired,
origin: PropTypes.string,
showNewAccountModal: PropTypes.func.isRequired,
newAccountNumber: PropTypes.number.isRequired,
nativeCurrency: PropTypes.string,
permissionsRequest: PropTypes.object,
addressLastConnectedMap: PropTypes.object.isRequired,
lastConnectedInfo: PropTypes.object.isRequired,
permissionsRequestId: PropTypes.string,
history: PropTypes.object.isRequired,
connectPath: PropTypes.string.isRequired,
confirmPermissionPath: PropTypes.string.isRequired,
///: BEGIN:ONLY_INCLUDE_IN(flask)
snapInstallPath: PropTypes.string.isRequired,
snapUpdatePath: PropTypes.string.isRequired,
isSnap: PropTypes.bool.isRequired,
approvePendingApproval: PropTypes.func.isRequired,
rejectPendingApproval: PropTypes.func.isRequired,
///: END:ONLY_INCLUDE_IN
totalPages: PropTypes.string.isRequired,
page: PropTypes.string.isRequired,
targetSubjectMetadata: PropTypes.shape({
extensionId: PropTypes.string,
iconUrl: PropTypes.string,
name: PropTypes.string,
origin: PropTypes.string,
subjectType: PropTypes.string,
}),
isRequestingAccounts: PropTypes.bool.isRequired,
};
static defaultProps = {
origin: '',
nativeCurrency: '',
permissionsRequest: undefined,
permissionsRequestId: '',
};
static contextTypes = {
t: PropTypes.func,
};
state = {
redirecting: false,
selectedAccountAddresses: new Set([this.props.currentAddress]),
permissionsApproved: null,
origin: this.props.origin,
targetSubjectMetadata: this.props.targetSubjectMetadata || {},
};
beforeUnload = () => {
const { permissionsRequestId, rejectPermissionsRequest } = this.props;
const { permissionsApproved } = this.state;
if (permissionsApproved === null && permissionsRequestId) {
rejectPermissionsRequest(permissionsRequestId);
}
};
removeBeforeUnload = () => {
const environmentType = getEnvironmentType();
if (environmentType === ENVIRONMENT_TYPE_NOTIFICATION) {
window.removeEventListener('beforeunload', this.beforeUnload);
}
};
componentDidMount() {
const {
connectPath,
confirmPermissionPath,
///: BEGIN:ONLY_INCLUDE_IN(flask)
snapInstallPath,
snapUpdatePath,
isSnap,
///: END:ONLY_INCLUDE_IN
getCurrentWindowTab,
getRequestAccountTabIds,
permissionsRequest,
history,
isRequestingAccounts,
} = this.props;
getCurrentWindowTab();
getRequestAccountTabIds();
if (!permissionsRequest) {
history.push(DEFAULT_ROUTE);
return;
}
const environmentType = getEnvironmentType();
if (environmentType === ENVIRONMENT_TYPE_NOTIFICATION) {
window.addEventListener('beforeunload', this.beforeUnload);
}
if (history.location.pathname === connectPath && !isRequestingAccounts) {
///: BEGIN:ONLY_INCLUDE_IN(flask)
if (isSnap) {
history.push(
permissionsRequest.newPermissions ? snapUpdatePath : snapInstallPath,
);
} else {
///: END:ONLY_INCLUDE_IN
history.push(confirmPermissionPath);
///: BEGIN:ONLY_INCLUDE_IN(flask)
}
///: END:ONLY_INCLUDE_IN
}
}
static getDerivedStateFromProps(props, state) {
const { permissionsRequest, targetSubjectMetadata } = props;
const { targetSubjectMetadata: savedMetadata } = state;
if (
permissionsRequest &&
savedMetadata.origin !== targetSubjectMetadata?.origin
) {
return { targetSubjectMetadata };
}
return null;
}
componentDidUpdate(prevProps) {
const { permissionsRequest, lastConnectedInfo } = this.props;
const { redirecting, origin } = this.state;
if (!permissionsRequest && prevProps.permissionsRequest && !redirecting) {
const accountsLastApprovedTime =
lastConnectedInfo[origin]?.lastApproved || 0;
const initialAccountsLastApprovedTime =
prevProps.lastConnectedInfo[origin]?.lastApproved || 0;
const approved =
accountsLastApprovedTime > initialAccountsLastApprovedTime;
this.redirect(approved);
}
}
selectAccounts = (addresses) => {
const {
confirmPermissionPath,
///: BEGIN:ONLY_INCLUDE_IN(flask)
snapInstallPath,
snapUpdatePath,
isSnap,
permissionsRequest,
///: END:ONLY_INCLUDE_IN
} = this.props;
this.setState(
{
selectedAccountAddresses: addresses,
},
///: BEGIN:ONLY_INCLUDE_IN(main,beta)
() => this.props.history.push(confirmPermissionPath),
///: END:ONLY_INCLUDE_IN
///: BEGIN:ONLY_INCLUDE_IN(flask)
() =>
this.props.history.push(
// eslint-disable-next-line no-nested-ternary
isSnap
? permissionsRequest.newPermissions
? snapUpdatePath
: snapInstallPath
: confirmPermissionPath,
),
///: END:ONLY_INCLUDE_IN
);
};
redirect(approved) {
const { history } = this.props;
this.setState({
redirecting: true,
permissionsApproved: approved,
});
this.removeBeforeUnload();
if (approved) {
setTimeout(() => history.push(DEFAULT_ROUTE), APPROVE_TIMEOUT);
} else {
history.push(DEFAULT_ROUTE);
}
}
cancelPermissionsRequest = async (requestId) => {
const { rejectPermissionsRequest } = this.props;
if (requestId) {
await rejectPermissionsRequest(requestId);
this.redirect(false);
}
};
goBack() {
const { history, connectPath } = this.props;
history.push(connectPath);
}
renderTopBar() {
const { redirecting } = this.state;
const { page, isRequestingAccounts, totalPages } = this.props;
const { t } = this.context;
return redirecting ? null : (
<div className="permissions-connect__top-bar">
{page === '2' && isRequestingAccounts ? (
<div
className="permissions-connect__back"
onClick={() => this.goBack()}
>
<i className="fas fa-chevron-left"></i>
{t('back')}
</div>
) : null}
{isRequestingAccounts ? (
<div className="permissions-connect__page-count">
{t('xOfY', [page, totalPages])}
</div>
) : null}
</div>
);
}
render() {
const {
approvePermissionsRequest,
accounts,
showNewAccountModal,
newAccountNumber,
nativeCurrency,
permissionsRequest,
addressLastConnectedMap,
permissionsRequestId,
connectPath,
confirmPermissionPath,
///: BEGIN:ONLY_INCLUDE_IN(flask)
snapInstallPath,
snapUpdatePath,
approvePendingApproval,
rejectPendingApproval,
///: END:ONLY_INCLUDE_IN
} = this.props;
const {
selectedAccountAddresses,
permissionsApproved,
redirecting,
targetSubjectMetadata,
} = this.state;
return (
<div className="permissions-connect">
{this.renderTopBar()}
{redirecting && permissionsApproved ? (
<PermissionsRedirect subjectMetadata={targetSubjectMetadata} />
) : (
<Switch>
<Route
path={connectPath}
exact
render={() => (
<ChooseAccount
accounts={accounts}
nativeCurrency={nativeCurrency}
selectAccounts={(addresses) => this.selectAccounts(addresses)}
selectNewAccountViaModal={(handleAccountClick) => {
showNewAccountModal({
onCreateNewAccount: (address) =>
handleAccountClick(address),
newAccountNumber,
});
}}
addressLastConnectedMap={addressLastConnectedMap}
cancelPermissionsRequest={(requestId) =>
this.cancelPermissionsRequest(requestId)
}
permissionsRequestId={permissionsRequestId}
selectedAccountAddresses={selectedAccountAddresses}
targetSubjectMetadata={targetSubjectMetadata}
/>
)}
/>
<Route
path={confirmPermissionPath}
exact
render={() => (
<PermissionPageContainer
request={permissionsRequest || {}}
approvePermissionsRequest={(...args) => {
approvePermissionsRequest(...args);
this.redirect(true);
}}
rejectPermissionsRequest={(requestId) =>
this.cancelPermissionsRequest(requestId)
}
selectedIdentities={accounts.filter((account) =>
selectedAccountAddresses.has(account.address),
)}
targetSubjectMetadata={targetSubjectMetadata}
/>
)}
/>
{
///: BEGIN:ONLY_INCLUDE_IN(flask)
}
<Route
path={snapInstallPath}
exact
render={() => (
<SnapInstall
request={permissionsRequest || {}}
approveSnapInstall={(requestId) => {
approvePendingApproval(requestId, {
...permissionsRequest,
approvedAccounts: [...selectedAccountAddresses],
});
this.redirect(true);
}}
rejectSnapInstall={(requestId) => {
rejectPendingApproval(
requestId,
serializeError(ethErrors.provider.userRejectedRequest()),
);
this.redirect(false);
}}
targetSubjectMetadata={targetSubjectMetadata}
/>
)}
/>
{
///: END:ONLY_INCLUDE_IN
}
{
///: BEGIN:ONLY_INCLUDE_IN(flask)
}
<Route
path={snapUpdatePath}
exact
render={() => (
<SnapUpdate
request={permissionsRequest || {}}
approveSnapUpdate={(requestId) => {
approvePendingApproval(requestId, {
...permissionsRequest,
approvedAccounts: [...selectedAccountAddresses],
});
this.redirect(true);
}}
rejectSnapUpdate={(requestId) => {
rejectPendingApproval(
requestId,
serializeError(ethErrors.provider.userRejectedRequest()),
);
this.redirect(false);
}}
targetSubjectMetadata={targetSubjectMetadata}
/>
)}
/>
{
///: END:ONLY_INCLUDE_IN
}
</Switch>
)}
</div>
);
}
}