mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 19:26:13 +02:00
d468c9dbde
* Dark Mode: Elevate the theme dropdown from experimental to regular settings * Fix search * Fix test * Adjust settings order * removing renderTheme call from experimental tab and rearranging setting ref number in general tab Co-authored-by: Niranjana Binoy <43930900+NiranjanaBinoy@users.noreply.github.com>
483 lines
14 KiB
JavaScript
483 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,
|
|
};
|
|
|
|
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 } = this.props;
|
|
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 />
|
|
<Initialized
|
|
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,
|
|
} = this.props;
|
|
const loadMessage =
|
|
loadingMessage || isNetworkLoading
|
|
? this.getConnectingLabel(loadingMessage)
|
|
: null;
|
|
|
|
const shouldShowNetworkInfo =
|
|
isUnlocked &&
|
|
currentChainId &&
|
|
!isTestNet &&
|
|
!isNetworkUsed &&
|
|
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.ROPSTEN:
|
|
return t('connectingToRopsten');
|
|
case NETWORK_TYPES.KOVAN:
|
|
return t('connectingToKovan');
|
|
case NETWORK_TYPES.RINKEBY:
|
|
return t('connectingToRinkeby');
|
|
case NETWORK_TYPES.GOERLI:
|
|
return t('connectingToGoerli');
|
|
case NETWORK_TYPES.SEPOLIA:
|
|
return t('connectingToSepolia');
|
|
default:
|
|
return t('connectingTo', [providerId]);
|
|
}
|
|
}
|
|
}
|