Skip to content

Commit

Permalink
react.lazy routes
Browse files Browse the repository at this point in the history
  • Loading branch information
@HowardBraham
HowardBraham committed Oct 24, 2024
1 parent 7d75226 commit 910bfb5
Showing 1 changed file with 171 additions and 136 deletions.
307 changes: 171 additions & 136 deletions ui/pages/routes/routes.component.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,12 @@
import classnames from 'classnames';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import React, { Component, Suspense } from 'react';
import { matchPath, Route, Switch } from 'react-router-dom';
import IdleTimer from 'react-idle-timer';

import Swaps from '../swaps';
import ConfirmTransaction from '../confirmations/confirm-transaction';
import Home from '../home';
import {
PermissionsPage,
Connections,
ReviewPermissions,
} from '../../components/multichain/pages';
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 ConfirmAddSuggestedTokenPage from '../confirm-add-suggested-token';
import CreateAccountPage from '../create-account/create-account.component';
import ConfirmAddSuggestedNftPage from '../confirm-add-suggested-nft';
import Loading from '../../components/ui/loading-screen';
import LoadingNetwork from '../../components/app/loading-network-screen';
import { Modal } from '../../components/app/modals';
Expand All @@ -34,15 +19,8 @@ import {
ImportNftsModal,
ImportTokensModal,
} from '../../components/multichain';
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 Notifications from '../notifications';
import NotificationsSettings from '../notifications-settings';
import NotificationDetails from '../notification-details';
import SnapList from '../snaps/snaps-list';
import SnapView from '../snaps/snap-view';
///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
import InstitutionalEntityDonePage from '../institutional/institutional-entity-done-page';
import InteractiveReplacementTokenNotification from '../../components/institutional/interactive-replacement-token-notification';
Expand Down Expand Up @@ -95,8 +73,6 @@ import {
// TODO: Remove restricted import
// eslint-disable-next-line import/no-restricted-paths
import { getEnvironmentType } from '../../../app/scripts/lib/util';
import ConfirmationPage from '../confirmations/confirmation';
import OnboardingFlow from '../onboarding-flow/onboarding-flow';
import QRHardwarePopover from '../../components/app/qr-hardware-popover';
import DeprecatedNetworks from '../../components/ui/deprecated-networks/deprecated-networks';
import NewNetworkInfo from '../../components/ui/new-network-info/new-network-info';
Expand All @@ -107,12 +83,9 @@ import { BasicConfigurationModal } from '../../components/app/basic-configuratio
import KeyringSnapRemovalResult from '../../components/app/modals/keyring-snap-removal-modal';
///: END:ONLY_INCLUDE_IF

import { SendPage } from '../../components/multichain/pages/send';
import { DeprecatedNetworkModal } from '../settings/deprecated-network-modal/DeprecatedNetworkModal';
import { MultichainMetaFoxLogo } from '../../components/multichain/app-header/multichain-meta-fox-logo';
import NetworkConfirmationPopover from '../../components/multichain/network-list-menu/network-confirmation-popover/network-confirmation-popover';
import NftFullImage from '../../components/app/assets/nfts/nft-details/nft-full-image';
import CrossChainSwap from '../bridge';
import { ToastMaster } from '../../components/app/toast-master/toast-master';
import {
getConnectingLabel,
Expand All @@ -121,6 +94,63 @@ import {
setTheme,
showOnboardingHeader,
} from './utils';
import AppLoadingSpinner from '../../components/app/app-loading-spinner';

// Begin Lazy Routes
const OnboardingFlow = React.lazy(() =>
import('../onboarding-flow/onboarding-flow'),
);
const Lock = React.lazy(() => import('../lock'));
const UnlockPage = React.lazy(() => import('../unlock-page'));
const RestoreVaultPage = React.lazy(() => import('../keychains/restore-vault'));
const RevealSeedConfirmation = React.lazy(() =>
import('../keychains/reveal-seed'),
);
const Settings = React.lazy(() => import('../settings'));
const NotificationsSettings = React.lazy(() =>
import('../notifications-settings'),
);
const NotificationDetails = React.lazy(() => import('../notification-details'));
const Notifications = React.lazy(() => import('../notifications'));
const SnapList = React.lazy(() => import('../snaps/snaps-list'));
const SnapView = React.lazy(() => import('../snaps/snap-view'));
const ConfirmTransaction = React.lazy(() =>
import('../confirmations/confirm-transaction'),
);
const SendPage = React.lazy(() =>
import('../../components/multichain/pages/send'),
);
const Swaps = React.lazy(() => import('../swaps'));
const CrossChainSwap = React.lazy(() => import('../bridge'));
const ConfirmAddSuggestedTokenPage = React.lazy(() =>
import('../confirm-add-suggested-token'),
);
const ConfirmAddSuggestedNftPage = React.lazy(() =>
import('../confirm-add-suggested-nft'),
);
const ConfirmationPage = React.lazy(() =>
import('../confirmations/confirmation'),
);
const CreateAccountPage = React.lazy(() =>
import('../create-account/create-account.component'),
);
const NftFullImage = React.lazy(() =>
import('../../components/app/assets/nfts/nft-details/nft-full-image'),
);
const Asset = React.lazy(() => import('../asset'));
const PermissionsPage = React.lazy(() =>
import('../../components/multichain/pages/permissions-page/permissions-page'),
);
const Connections = React.lazy(() =>
import('../../components/multichain/pages/connections'),
);
const ReviewPermissions = React.lazy(() =>
import(
'../../components/multichain/pages/review-permissions-page/review-permissions-page'
),
);
const Home = React.lazy(() => import('../home'));
// End Lazy Routes

export default class Routes extends Component {
static propTypes = {
Expand Down Expand Up @@ -260,115 +290,120 @@ export default class Routes extends Component {
const RestoreVaultComponent = forgottenPassword ? Route : Initialized;

const routes = (
<Switch>
<Route path={ONBOARDING_ROUTE} component={OnboardingFlow} />
<Route path={LOCK_ROUTE} component={Lock} exact />
<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={SETTINGS_ROUTE} component={Settings} />
<Authenticated
path={NOTIFICATIONS_SETTINGS_ROUTE}
component={NotificationsSettings}
/>
<Authenticated
path={`${NOTIFICATIONS_ROUTE}/:uuid`}
component={NotificationDetails}
/>
<Authenticated path={NOTIFICATIONS_ROUTE} component={Notifications} />
<Authenticated exact path={SNAPS_ROUTE} component={SnapList} />
<Authenticated path={SNAPS_VIEW_ROUTE} component={SnapView} />
<Authenticated
path={`${CONFIRM_TRANSACTION_ROUTE}/:id?`}
component={ConfirmTransaction}
/>
<Authenticated path={SEND_ROUTE} component={SendPage} exact />
<Authenticated path={SWAPS_ROUTE} component={Swaps} />
<Authenticated
path={CROSS_CHAIN_SWAP_ROUTE}
component={CrossChainSwap}
/>
<Authenticated
path={CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE}
component={ConfirmAddSuggestedTokenPage}
exact
/>
<Authenticated
path={CONFIRM_ADD_SUGGESTED_NFT_ROUTE}
component={ConfirmAddSuggestedNftPage}
exact
/>
<Authenticated
path={`${CONFIRMATION_V_NEXT_ROUTE}/:id?`}
component={ConfirmationPage}
/>
{
///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
}
<Authenticated
path={CUSTODY_ACCOUNT_DONE_ROUTE}
component={InstitutionalEntityDonePage}
exact
/>
<Authenticated
path={INSTITUTIONAL_FEATURES_DONE_ROUTE}
component={InstitutionalEntityDonePage}
exact
/>
<Authenticated
path={CONFIRM_ADD_CUSTODIAN_TOKEN}
component={ConfirmAddCustodianToken}
exact
/>
<Authenticated
path={INTERACTIVE_REPLACEMENT_TOKEN_PAGE}
component={InteractiveReplacementTokenPage}
exact
/>
<Authenticated
path={CONFIRM_ADD_CUSTODIAN_TOKEN}
component={ConfirmAddCustodianToken}
/>
<Authenticated
path={CUSTODY_ACCOUNT_ROUTE}
component={CustodyPage}
exact
/>
{
///: END:ONLY_INCLUDE_IF
}
<Authenticated path={NEW_ACCOUNT_ROUTE} component={CreateAccountPage} />
<Authenticated
path={`${CONNECT_ROUTE}/:id`}
component={PermissionsConnect}
/>
<Authenticated
path={`${ASSET_ROUTE}/image/:asset/:id`}
component={NftFullImage}
/>
<Suspense fallback={<AppLoadingSpinner />}>
<Switch>
<Route path={ONBOARDING_ROUTE} component={OnboardingFlow} />
<Route path={LOCK_ROUTE} component={Lock} exact />
<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={SETTINGS_ROUTE} component={Settings} />
<Authenticated
path={NOTIFICATIONS_SETTINGS_ROUTE}
component={NotificationsSettings}
/>
<Authenticated
path={`${NOTIFICATIONS_ROUTE}/:uuid`}
component={NotificationDetails}
/>
<Authenticated path={NOTIFICATIONS_ROUTE} component={Notifications} />
<Authenticated exact path={SNAPS_ROUTE} component={SnapList} />
<Authenticated path={SNAPS_VIEW_ROUTE} component={SnapView} />
<Authenticated
path={`${CONFIRM_TRANSACTION_ROUTE}/:id?`}
component={ConfirmTransaction}
/>
<Authenticated path={SEND_ROUTE} component={SendPage} exact />
<Authenticated path={SWAPS_ROUTE} component={Swaps} />
<Authenticated
path={CROSS_CHAIN_SWAP_ROUTE}
component={CrossChainSwap}
/>
<Authenticated
path={CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE}
component={ConfirmAddSuggestedTokenPage}
exact
/>
<Authenticated
path={CONFIRM_ADD_SUGGESTED_NFT_ROUTE}
component={ConfirmAddSuggestedNftPage}
exact
/>
<Authenticated
path={`${CONFIRMATION_V_NEXT_ROUTE}/:id?`}
component={ConfirmationPage}
/>
{
///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
}
<Authenticated
path={CUSTODY_ACCOUNT_DONE_ROUTE}
component={InstitutionalEntityDonePage}
exact
/>
<Authenticated
path={INSTITUTIONAL_FEATURES_DONE_ROUTE}
component={InstitutionalEntityDonePage}
exact
/>
<Authenticated
path={CONFIRM_ADD_CUSTODIAN_TOKEN}
component={ConfirmAddCustodianToken}
exact
/>
<Authenticated
path={INTERACTIVE_REPLACEMENT_TOKEN_PAGE}
component={InteractiveReplacementTokenPage}
exact
/>
<Authenticated
path={CONFIRM_ADD_CUSTODIAN_TOKEN}
component={ConfirmAddCustodianToken}
/>
<Authenticated
path={CUSTODY_ACCOUNT_ROUTE}
component={CustodyPage}
exact
/>
{
///: END:ONLY_INCLUDE_IF
}
<Authenticated
path={NEW_ACCOUNT_ROUTE}
component={CreateAccountPage}
/>
<Authenticated
path={`${CONNECT_ROUTE}/:id`}
component={PermissionsConnect}
/>
<Authenticated
path={`${ASSET_ROUTE}/image/:asset/:id`}
component={NftFullImage}
/>

<Authenticated path={`${ASSET_ROUTE}/:asset/:id`} component={Asset} />
<Authenticated path={`${ASSET_ROUTE}/:asset/`} component={Asset} />
<Authenticated
path={`${CONNECTIONS}/:origin`}
component={Connections}
/>
<Authenticated path={PERMISSIONS} component={PermissionsPage} exact />
<Authenticated
path={`${REVIEW_PERMISSIONS}/:origin`}
component={ReviewPermissions}
exact
/>
<Authenticated path={DEFAULT_ROUTE} component={Home} />
</Switch>
<Authenticated path={`${ASSET_ROUTE}/:asset/:id`} component={Asset} />
<Authenticated path={`${ASSET_ROUTE}/:asset/`} component={Asset} />
<Authenticated
path={`${CONNECTIONS}/:origin`}
component={Connections}
/>
<Authenticated path={PERMISSIONS} component={PermissionsPage} exact />
<Authenticated
path={`${REVIEW_PERMISSIONS}/:origin`}
component={ReviewPermissions}
exact
/>
<Authenticated path={DEFAULT_ROUTE} component={Home} />
</Switch>
</Suspense>
);

if (autoLockTimeLimit > 0) {
Expand Down

0 comments on commit 910bfb5

Please sign in to comment.