1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/pages/routes/routes.component.js
ryanml 6c84e9604c
Enable "Add Popular Network" feature by default for all users (#16172)
* Enable "Add Popular Network" feature by default

* Fixing e2e tests

* Attempt to fix e2e tests

* Revert "Attempt to fix e2e tests"

This reverts commit d88e8944b8df8f7c3075753f8d8b3480439f8e30.

* Get e2e tests passing

Co-authored-by: Dan J Miller <danjm.com@gmail.com>
2022-10-27 07:55:30 -02:30

484 lines
14 KiB
JavaScript

import classnames from 'classnames';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { matchPath, Route, Switch } from 'react-router-dom';
import IdleTimer from 'react-idle-timer';
import FirstTimeFlow from '../first-time-flow';
import SendTransactionScreen from '../send';
import Swaps from '../swaps';
import ConfirmTransaction from '../confirm-transaction';
import Home from '../home';
import Settings from '../settings';
import Authenticated from '../../helpers/higher-order-components/authenticated';
import Initialized from '../../helpers/higher-order-components/initialized';
import Lock from '../lock';
import PermissionsConnect from '../permissions-connect';
import RestoreVaultPage from '../keychains/restore-vault';
import RevealSeedConfirmation from '../keychains/reveal-seed';
import MobileSyncPage from '../mobile-sync';
import ImportTokenPage from '../import-token';
import AddCollectiblePage from '../add-collectible';
import ConfirmImportTokenPage from '../confirm-import-token';
import ConfirmAddSuggestedTokenPage from '../confirm-add-suggested-token';
import CreateAccountPage from '../create-account';
import Loading from '../../components/ui/loading-screen';
import LoadingNetwork from '../../components/app/loading-network-screen';
import NetworkDropdown from '../../components/app/dropdowns/network-dropdown';
import AccountMenu from '../../components/app/account-menu';
import { Modal } from '../../components/app/modals';
import Alert from '../../components/ui/alert';
import AppHeader from '../../components/app/app-header';
import UnlockPage from '../unlock-page';
import Alerts from '../../components/app/alerts';
import Asset from '../asset';
import OnboardingAppHeader from '../onboarding-flow/onboarding-app-header/onboarding-app-header';
import TokenDetailsPage from '../token-details';
///: BEGIN:ONLY_INCLUDE_IN(flask)
import Notifications from '../notifications';
///: END:ONLY_INCLUDE_IN
import {
IMPORT_TOKEN_ROUTE,
ASSET_ROUTE,
CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
CONFIRM_TRANSACTION_ROUTE,
CONNECT_ROUTE,
DEFAULT_ROUTE,
INITIALIZE_UNLOCK_ROUTE,
LOCK_ROUTE,
MOBILE_SYNC_ROUTE,
NEW_ACCOUNT_ROUTE,
RESTORE_VAULT_ROUTE,
REVEAL_SEED_ROUTE,
SEND_ROUTE,
SWAPS_ROUTE,
SETTINGS_ROUTE,
UNLOCK_ROUTE,
BUILD_QUOTE_ROUTE,
CONFIRMATION_V_NEXT_ROUTE,
CONFIRM_IMPORT_TOKEN_ROUTE,
INITIALIZE_ROUTE,
ONBOARDING_ROUTE,
ADD_COLLECTIBLE_ROUTE,
TOKEN_DETAILS,
///: BEGIN:ONLY_INCLUDE_IN(flask)
NOTIFICATIONS_ROUTE,
///: END:ONLY_INCLUDE_IN
} from '../../helpers/constants/routes';
import {
ENVIRONMENT_TYPE_NOTIFICATION,
ENVIRONMENT_TYPE_POPUP,
} from '../../../shared/constants/app';
import { NETWORK_TYPES } from '../../../shared/constants/network';
import { getEnvironmentType } from '../../../app/scripts/lib/util';
import ConfirmationPage from '../confirmation';
import OnboardingFlow from '../onboarding-flow/onboarding-flow';
import QRHardwarePopover from '../../components/app/qr-hardware-popover';
import { SEND_STAGES } from '../../ducks/send';
import { THEME_TYPE } from '../settings/settings-tab/settings-tab.constant';
import DeprecatedTestNetworks from '../../components/ui/deprecated-test-networks/deprecated-test-networks';
import NewNetworkInfo from '../../components/ui/new-network-info/new-network-info';
export default class Routes extends Component {
static propTypes = {
currentCurrency: PropTypes.string,
setCurrentCurrencyToUSD: PropTypes.func,
isLoading: PropTypes.bool,
loadingMessage: PropTypes.string,
alertMessage: PropTypes.string,
textDirection: PropTypes.string,
isNetworkLoading: PropTypes.bool,
alertOpen: PropTypes.bool,
isUnlocked: PropTypes.bool,
setLastActiveTime: PropTypes.func,
history: PropTypes.object,
location: PropTypes.object,
lockMetaMask: PropTypes.func,
isMouseUser: PropTypes.bool,
setMouseUserState: PropTypes.func,
providerId: PropTypes.string,
providerType: PropTypes.string,
autoLockTimeLimit: PropTypes.number,
pageChanged: PropTypes.func.isRequired,
prepareToLeaveSwaps: PropTypes.func,
browserEnvironmentOs: PropTypes.string,
browserEnvironmentBrowser: PropTypes.string,
theme: PropTypes.string,
sendStage: PropTypes.string,
isNetworkUsed: PropTypes.bool,
allAccountsOnNetworkAreEmpty: PropTypes.bool,
isTestNet: PropTypes.bool,
currentChainId: PropTypes.string,
shouldShowSeedPhraseReminder: PropTypes.bool,
portfolioTooltipIsBeingShown: PropTypes.bool,
forgottenPassword: PropTypes.bool,
isCurrentProviderCustom: PropTypes.bool,
};
static contextTypes = {
t: PropTypes.func,
metricsEvent: PropTypes.func,
};
handleOsTheme() {
const osTheme = window?.matchMedia('(prefers-color-scheme: dark)')?.matches
? THEME_TYPE.DARK
: THEME_TYPE.LIGHT;
document.documentElement.setAttribute('data-theme', osTheme);
}
componentDidUpdate(prevProps) {
const { theme } = this.props;
if (theme !== prevProps.theme) {
if (theme === THEME_TYPE.OS) {
this.handleOsTheme();
} else {
document.documentElement.setAttribute('data-theme', theme);
}
}
}
UNSAFE_componentWillMount() {
const {
currentCurrency,
pageChanged,
setCurrentCurrencyToUSD,
history,
theme,
} = this.props;
if (!currentCurrency) {
setCurrentCurrencyToUSD();
}
history.listen((locationObj, action) => {
if (action === 'PUSH') {
pageChanged(locationObj.pathname);
}
});
if (theme === THEME_TYPE.OS) {
this.handleOsTheme();
} else {
document.documentElement.setAttribute('data-theme', theme);
}
}
renderRoutes() {
const { autoLockTimeLimit, setLastActiveTime, forgottenPassword } =
this.props;
const RestoreVaultComponent = forgottenPassword ? Route : Initialized;
const routes = (
<Switch>
{process.env.ONBOARDING_V2 && (
<Route path={ONBOARDING_ROUTE} component={OnboardingFlow} />
)}
<Route path={LOCK_ROUTE} component={Lock} exact />
<Route path={INITIALIZE_ROUTE} component={FirstTimeFlow} />
<Initialized path={UNLOCK_ROUTE} component={UnlockPage} exact />
<RestoreVaultComponent
path={RESTORE_VAULT_ROUTE}
component={RestoreVaultPage}
exact
/>
<Authenticated
path={REVEAL_SEED_ROUTE}
component={RevealSeedConfirmation}
exact
/>
<Authenticated
path={MOBILE_SYNC_ROUTE}
component={MobileSyncPage}
exact
/>
<Authenticated path={SETTINGS_ROUTE} component={Settings} />
{
///: BEGIN:ONLY_INCLUDE_IN(flask)
<Authenticated path={NOTIFICATIONS_ROUTE} component={Notifications} />
///: END:ONLY_INCLUDE_IN
}
<Authenticated
path={`${CONFIRM_TRANSACTION_ROUTE}/:id?`}
component={ConfirmTransaction}
/>
<Authenticated
path={SEND_ROUTE}
component={SendTransactionScreen}
exact
/>
<Authenticated
path={`${TOKEN_DETAILS}/:address/`}
component={TokenDetailsPage}
exact
/>
<Authenticated path={SWAPS_ROUTE} component={Swaps} />
<Authenticated
path={IMPORT_TOKEN_ROUTE}
component={ImportTokenPage}
exact
/>
{process.env.COLLECTIBLES_V1 ? (
<Authenticated
path={ADD_COLLECTIBLE_ROUTE}
component={AddCollectiblePage}
exact
/>
) : null}
<Authenticated
path={CONFIRM_IMPORT_TOKEN_ROUTE}
component={ConfirmImportTokenPage}
exact
/>
<Authenticated
path={CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE}
component={ConfirmAddSuggestedTokenPage}
exact
/>
<Authenticated
path={CONFIRMATION_V_NEXT_ROUTE}
component={ConfirmationPage}
/>
<Authenticated path={NEW_ACCOUNT_ROUTE} component={CreateAccountPage} />
<Authenticated
path={`${CONNECT_ROUTE}/:id`}
component={PermissionsConnect}
/>
<Authenticated path={`${ASSET_ROUTE}/:asset/:id`} component={Asset} />
<Authenticated path={`${ASSET_ROUTE}/:asset/`} component={Asset} />
<Authenticated path={DEFAULT_ROUTE} component={Home} />
</Switch>
);
if (autoLockTimeLimit > 0) {
return (
<IdleTimer onAction={setLastActiveTime} throttle={1000}>
{routes}
</IdleTimer>
);
}
return routes;
}
onInitializationUnlockPage() {
const { location } = this.props;
return Boolean(
matchPath(location.pathname, {
path: INITIALIZE_UNLOCK_ROUTE,
exact: true,
}),
);
}
onConfirmPage() {
const { location } = this.props;
return Boolean(
matchPath(location.pathname, {
path: CONFIRM_TRANSACTION_ROUTE,
exact: false,
}),
);
}
onEditTransactionPage() {
return this.props.sendStage === SEND_STAGES.EDIT;
}
onSwapsPage() {
const { location } = this.props;
return Boolean(
matchPath(location.pathname, { path: SWAPS_ROUTE, exact: false }),
);
}
onSwapsBuildQuotePage() {
const { location } = this.props;
return Boolean(
matchPath(location.pathname, { path: BUILD_QUOTE_ROUTE, exact: false }),
);
}
hideAppHeader() {
const { location } = this.props;
const isInitializing = Boolean(
matchPath(location.pathname, {
path: process.env.ONBOARDING_V2 ? ONBOARDING_ROUTE : INITIALIZE_ROUTE,
exact: false,
}),
);
if (isInitializing && !this.onInitializationUnlockPage()) {
return true;
}
const windowType = getEnvironmentType();
if (windowType === ENVIRONMENT_TYPE_NOTIFICATION) {
return true;
}
if (windowType === ENVIRONMENT_TYPE_POPUP && this.onConfirmPage()) {
return true;
}
const isHandlingPermissionsRequest = Boolean(
matchPath(location.pathname, {
path: CONNECT_ROUTE,
exact: false,
}),
);
const isHandlingAddEthereumChainRequest = Boolean(
matchPath(location.pathname, {
path: CONFIRMATION_V_NEXT_ROUTE,
exact: false,
}),
);
return isHandlingPermissionsRequest || isHandlingAddEthereumChainRequest;
}
showOnboardingHeader() {
const { location } = this.props;
return Boolean(
matchPath(location.pathname, {
path: ONBOARDING_ROUTE,
exact: false,
}),
);
}
onAppHeaderClick = async () => {
const { prepareToLeaveSwaps } = this.props;
if (this.onSwapsPage()) {
await prepareToLeaveSwaps();
}
};
render() {
const {
isLoading,
isUnlocked,
alertMessage,
textDirection,
loadingMessage,
isNetworkLoading,
setMouseUserState,
isMouseUser,
browserEnvironmentOs: os,
browserEnvironmentBrowser: browser,
isNetworkUsed,
allAccountsOnNetworkAreEmpty,
isTestNet,
currentChainId,
shouldShowSeedPhraseReminder,
portfolioTooltipIsBeingShown,
isCurrentProviderCustom,
} = this.props;
const loadMessage =
loadingMessage || isNetworkLoading
? this.getConnectingLabel(loadingMessage)
: null;
const shouldShowNetworkInfo =
isUnlocked &&
currentChainId &&
!isTestNet &&
!isNetworkUsed &&
!isCurrentProviderCustom &&
allAccountsOnNetworkAreEmpty;
const windowType = getEnvironmentType();
const shouldShowNetworkDeprecationWarning =
windowType !== ENVIRONMENT_TYPE_NOTIFICATION &&
isUnlocked &&
!shouldShowSeedPhraseReminder &&
!portfolioTooltipIsBeingShown;
return (
<div
className={classnames('app', {
[`os-${os}`]: os,
[`browser-${browser}`]: browser,
'mouse-user-styles': isMouseUser,
})}
dir={textDirection}
onClick={() => setMouseUserState(true)}
onKeyDown={(e) => {
if (e.keyCode === 9) {
setMouseUserState(false);
}
}}
>
{shouldShowNetworkDeprecationWarning && <DeprecatedTestNetworks />}
{shouldShowNetworkInfo && <NewNetworkInfo />}
<QRHardwarePopover />
<Modal />
<Alert visible={this.props.alertOpen} msg={alertMessage} />
{!this.hideAppHeader() && (
<AppHeader
hideNetworkIndicator={this.onInitializationUnlockPage()}
disableNetworkIndicator={this.onSwapsPage()}
onClick={this.onAppHeaderClick}
disabled={
this.onConfirmPage() ||
this.onEditTransactionPage() ||
(this.onSwapsPage() && !this.onSwapsBuildQuotePage())
}
/>
)}
{process.env.ONBOARDING_V2 && this.showOnboardingHeader() && (
<OnboardingAppHeader />
)}
<NetworkDropdown />
<AccountMenu />
<div className="main-container-wrapper">
{isLoading ? <Loading loadingMessage={loadMessage} /> : null}
{!isLoading && isNetworkLoading ? <LoadingNetwork /> : null}
{this.renderRoutes()}
</div>
{isUnlocked ? <Alerts history={this.props.history} /> : null}
</div>
);
}
toggleMetamaskActive() {
if (this.props.isUnlocked) {
// currently active: deactivate
this.props.lockMetaMask();
} else {
// currently inactive: redirect to password box
const passwordBox = document.querySelector('input[type=password]');
if (!passwordBox) {
return;
}
passwordBox.focus();
}
}
getConnectingLabel(loadingMessage) {
if (loadingMessage) {
return loadingMessage;
}
const { providerType, providerId } = this.props;
const { t } = this.context;
switch (providerType) {
case NETWORK_TYPES.MAINNET:
return t('connectingToMainnet');
case NETWORK_TYPES.GOERLI:
return t('connectingToGoerli');
case NETWORK_TYPES.SEPOLIA:
return t('connectingToSepolia');
default:
return t('connectingTo', [providerId]);
}
}
}