Feat/986: extract routes from routes, lazy load all child routes

apps/token/src/components/eth-wallet/eth-wallet.tsx

@@ -13,7 +13,7 @@ import vegaVesting from '../../images/vega_vesting.png';
 import vegaWhite from '../../images/vega_white.png';
 import { BigNumber } from '../../lib/bignumber';
 import { truncateMiddle } from '../../lib/truncate-middle';
-import { Routes } from '../../routes/router-config';
+import Routes from '../../routes/routes';
 import { LockedProgress } from '../locked-progress';
 import {
   WalletCard,

apps/token/src/components/nav/nav.tsx

@@ -13,7 +13,7 @@ import {
   AppStateActionType,
   useAppState,
 } from '../../contexts/app-state/app-state-context';
-import { Routes } from '../../routes/router-config';
+import Routes from '../../routes/routes';
 import { EthWallet } from '../eth-wallet';
 import { VegaWallet } from '../vega-wallet';
 

apps/token/src/components/vega-wallet/vega-wallet.tsx

@@ -9,7 +9,7 @@ import {
 import vegaWhite from '../../images/vega_white.png';
 import { BigNumber } from '../../lib/bignumber';
 import { truncateMiddle } from '../../lib/truncate-middle';
-import { Routes } from '../../routes/router-config';
+import Routes from '../../routes/routes';
 import { BulletHeader } from '../bullet-header';
 import type { WalletCardAssetProps } from '../wallet-card';
 import {

apps/token/src/routes/claim/claim-form/claim-form.tsx

@@ -14,7 +14,7 @@ import {
   TransactionActionType,
   TxState,
 } from '../../../hooks/transaction-reducer';
-import { Routes } from '../../router-config';
+import Routes from '../../routes';
 
 export interface ICountry {
   name: string;

apps/token/src/routes/claim/complete.tsx

@@ -5,7 +5,7 @@ import { Link as RouteLink } from 'react-router-dom';
 
 import type { BigNumber } from '../../lib/bignumber';
 import { formatNumber } from '../../lib/format-number';
-import { Routes } from '../router-config';
+import Routes from '../routes';
 
 export const Complete = ({
   address,

apps/token/src/routes/governance/components/proposals-list/proposals-list.tsx

@@ -5,7 +5,7 @@ import { Heading } from '../../../../components/heading';
 import { ProposalsListItem } from '../proposals-list-item';
 import { ProposalsListFilter } from '../proposals-list-filter';
 import type { Proposals_proposals } from '../../proposals/__generated__/Proposals';
-import { Routes } from '../../../router-config';
+import Routes from '../../../routes';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import { Link } from 'react-router-dom';
 

apps/token/src/routes/governance/proposal/index.tsx

@@ -1 +1,5 @@
-export { ProposalContainer, PROPOSAL_QUERY } from './proposal-container';
+export {
+  ProposalContainer,
+  PROPOSAL_QUERY,
+  ProposalContainer as default,
+} from './proposal-container';

apps/token/src/routes/governance/proposals/index.tsx

@@ -1 +1,5 @@
-export { ProposalsContainer, PROPOSALS_QUERY } from './proposals-container';
+export {
+  ProposalsContainer,
+  PROPOSALS_QUERY,
+  ProposalsContainer as default,
+} from './proposals-container';

apps/token/src/routes/governance/propose/index.tsx

@@ -1 +1 @@
-export { Propose } from './propose';
+export { Propose, Propose as default } from './propose';

apps/token/src/routes/home/index.tsx

@@ -9,7 +9,7 @@ import { useAppState } from '../../contexts/app-state/app-state-context';
 import { useDocumentTitle } from '../../hooks/use-document-title';
 import { BigNumber } from '../../lib/bignumber';
 import type { RouteChildProps } from '..';
-import { Routes } from '../router-config';
+import Routes from '../routes';
 import type { NodeData } from './__generated__/NodeData';
 import { TokenDetails } from './token-details';
 import { Button } from '@vegaprotocol/ui-toolkit';

apps/token/src/routes/redemption/home/redemption-information.tsx

@@ -7,7 +7,7 @@ import { AddLockedTokenAddress } from '../../../components/add-locked-token';
 import { useAppState } from '../../../contexts/app-state/app-state-context';
 import { formatNumber } from '../../../lib/format-number';
 import { truncateMiddle } from '../../../lib/truncate-middle';
-import { Routes } from '../../router-config';
+import Routes from '../../routes';
 import type { RedemptionState } from '../redemption-reducer';
 import { Tranche0Table, TrancheTable } from '../tranche-table';
 import { VestingTable } from './vesting-table';
@@ -141,3 +141,5 @@ export const RedemptionInformation = () => {
     </section>
   );
 };
+
+export default RedemptionInformation;

apps/token/src/routes/redemption/index.tsx

@@ -5,7 +5,7 @@ import { useDocumentTitle } from '../../hooks/use-document-title';
 import type { RouteChildProps } from '..';
 import RedemptionRouter from './redemption';
 import { useMatch } from 'react-router-dom';
-import { Routes } from '../router-config';
+import Routes from '../routes';
 
 const RedemptionIndex = ({ name }: RouteChildProps) => {
   useDocumentTitle(name);

apps/token/src/routes/redemption/redemption.tsx

@@ -9,7 +9,7 @@ import { EthConnectPrompt } from '../../components/eth-connect-prompt';
 import { SplashLoader } from '../../components/splash-loader';
 import { useAppState } from '../../contexts/app-state/app-state-context';
 import { useTranches } from '../../hooks/use-tranches';
-import { Routes as RoutesConfig } from '../router-config';
+import RoutesConfig from '../routes';
 import {
   initialRedemptionState,
   RedemptionActionType,

apps/token/src/routes/redemption/tranche-table.tsx

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import { KeyValueTable, KeyValueTableRow } from '@vegaprotocol/ui-toolkit';
 import { BigNumber } from '../../lib/bignumber';
 import { formatNumber } from '../../lib/format-number';
-import { Routes } from '../router-config';
+import Routes from '../routes';
 import { TrancheItem } from './tranche-item';
 import { Button } from '@vegaprotocol/ui-toolkit';
 

apps/token/src/routes/redemption/tranche/index.tsx

@@ -14,7 +14,7 @@ import { useRefreshBalances } from '../../../hooks/use-refresh-balances';
 import { useTransaction } from '../../../hooks/use-transaction';
 import { BigNumber } from '../../../lib/bignumber';
 import { formatNumber } from '../../../lib/format-number';
-import { Routes } from '../../router-config';
+import Routes from '../../routes';
 import type { RedemptionState } from '../redemption-reducer';
 import { TrancheTable } from '../tranche-table';
 
@@ -153,3 +153,5 @@ export const RedeemFromTranche = () => {
     </section>
   );
 };
+
+export default RedeemFromTranche;

apps/token/src/routes/router-config.tsx

@@ -1,35 +1,8 @@
 import React from 'react';
-import { ProposalContainer } from './governance/proposal';
-import { ProposalsContainer } from './governance/proposals';
-import { Propose } from './governance/propose';
-
 import Home from './home';
 import NotFound from './not-found';
 import NotPermitted from './not-permitted';
-import { RedemptionInformation } from './redemption/home/redemption-information';
-import { RedeemFromTranche } from './redemption/tranche';
-import { AssociateContainer } from './staking/associate/associate-page-container';
-import { DisassociateContainer } from './staking/disassociate/disassociate-page-container';
-import { Staking } from './staking/staking';
-import { StakingNodeContainer } from './staking/staking-node';
-import { StakingNodesContainer } from './staking/staking-nodes-container';
-import { Tranche } from './tranches/tranche';
-import { Tranches } from './tranches/tranches';
-
-export const Routes = {
-  HOME: '/',
-  TRANCHES: '/tranches',
-  CLAIM: '/claim',
-  STAKING: '/staking',
-  REWARDS: '/rewards',
-  WITHDRAW: '/withdraw',
-  WITHDRAWALS: '/withdrawals',
-  GOVERNANCE: '/governance',
-  VESTING: '/vesting',
-  NOT_PERMITTED: '/not-permitted',
-  NOT_FOUND: '/not-found',
-  CONTRACTS: '/contracts',
-};
+import Routes from './routes';
 
 const LazyTranches = React.lazy(
   () =>
@@ -38,6 +11,20 @@ const LazyTranches = React.lazy(
     )
 );
 
+const LazyTranchesTranche = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-tranches-tranche", webpackPrefetch: true */ './tranches/tranche'
+    )
+);
+
+const LazyTranchesTranches = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-tranches-tranches", webpackPrefetch: true */ './tranches/tranches'
+    )
+);
+
 const LazyClaim = React.lazy(
   () =>
     import(
@@ -51,18 +38,90 @@ const LazyRedemption = React.lazy(
       /* webpackChunkName: "route-redemption", webpackPrefetch: true */ './redemption'
     )
 );
+
+const LazyRedemptionIndex = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-redemption-index", webpackPrefetch: true */ './redemption/home/redemption-information'
+    )
+);
+
+const LazyRedemptionTranche = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-redemption-tranche", webpackPrefetch: true */ './redemption/tranche'
+    )
+);
 const LazyStaking = React.lazy(
   () =>
     import(
       /* webpackChunkName: "route-staking", webpackPrefetch: true */ './staking'
     )
 );
+
+const LazyStakingAssociate = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-staking-associate", webpackPrefetch: true */ './staking/associate/associate-page-container'
+    )
+);
+
+const LazyStakingDisassociate = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-staking-disassociate", webpackPrefetch: true */ './staking/disassociate/disassociate-page-container'
+    )
+);
+
+const LazyStakingIndex = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-staking-index", webpackPrefetch: true */ './staking/staking'
+    )
+);
+
+const LazyStakingNode = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-staking-node", webpackPrefetch: true */ './staking/staking-node'
+    )
+);
+
+const LazyStakingNodes = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-staking-nodes", webpackPrefetch: true */ './staking/staking-nodes-container'
+    )
+);
+
 const LazyGovernance = React.lazy(
   () =>
     import(
       /* webpackChunkName: "route-governance", webpackPrefetch: true */ './governance'
     )
 );
+
+const LazyGovernanceProposal = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-governance-proposal", webpackPrefetch: true */ './governance/proposal'
+    )
+);
+
+const LazyGovernanceProposals = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-governance-proposals", webpackPrefetch: true */ './governance/proposals'
+    )
+);
+
+const LazyGovernancePropose = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "route-governance-propose", webpackPrefetch: true */ './governance/propose'
+    )
+);
+
 const LazyRewards = React.lazy(
   () =>
     import(
@@ -103,8 +162,8 @@ const routerConfig = [
     name: 'Tranches',
     component: LazyTranches,
     children: [
-      { index: true, element: <Tranches /> },
-      { path: ':trancheId', element: <Tranche /> },
+      { index: true, element: <LazyTranchesTranches /> },
+      { path: ':trancheId', element: <LazyTranchesTranche /> },
     ],
   },
   {
@@ -117,15 +176,15 @@ const routerConfig = [
     name: 'Staking',
     component: LazyStaking,
     children: [
-      { path: 'associate', element: <AssociateContainer /> },
-      { path: 'disassociate', element: <DisassociateContainer /> },
-      { path: ':node', element: <StakingNodeContainer /> },
+      { path: 'associate', element: <LazyStakingAssociate /> },
+      { path: 'disassociate', element: <LazyStakingDisassociate /> },
+      { path: ':node', element: <LazyStakingNode /> },
       {
         index: true,
         element: (
-          <StakingNodesContainer>
-            {({ data }) => <Staking data={data} />}
-          </StakingNodesContainer>
+          <LazyStakingNodes>
+            {({ data }) => <LazyStakingIndex data={data} />}
+          </LazyStakingNodes>
         ),
       },
     ],
@@ -152,11 +211,11 @@ const routerConfig = [
     children: [
       {
         index: true,
-        element: <RedemptionInformation />,
+        element: <LazyRedemptionIndex />,
       },
       {
         path: ':id',
-        element: <RedeemFromTranche />,
+        element: <LazyRedemptionTranche />,
       },
     ],
   },
@@ -165,9 +224,9 @@ const routerConfig = [
     name: 'Governance',
     component: LazyGovernance,
     children: [
-      { path: ':proposalId', element: <ProposalContainer /> },
-      { path: 'propose', element: <Propose /> },
-      { index: true, element: <ProposalsContainer /> },
+      { path: ':proposalId', element: <LazyGovernanceProposal /> },
+      { path: 'propose', element: <LazyGovernancePropose /> },
+      { index: true, element: <LazyGovernanceProposals /> },
     ],
   },
   {

apps/token/src/routes/routes.ts

@@ -0,0 +1,14 @@
+export default {
+  HOME: '/',
+  TRANCHES: '/tranches',
+  CLAIM: '/claim',
+  STAKING: '/staking',
+  REWARDS: '/rewards',
+  WITHDRAW: '/withdraw',
+  WITHDRAWALS: '/withdrawals',
+  GOVERNANCE: '/governance',
+  VESTING: '/vesting',
+  NOT_PERMITTED: '/not-permitted',
+  NOT_FOUND: '/not-found',
+  CONTRACTS: '/contracts',
+};

apps/token/src/routes/staking/associate/associate-page-container.tsx

@@ -26,3 +26,5 @@ export const AssociateContainer = () => {
     </StakingWalletsContainer>
   );
 };
+
+export default AssociateContainer;

apps/token/src/routes/staking/associate/associate-transaction.tsx

@@ -13,7 +13,7 @@ import {
   TransactionActionType,
   TxState,
 } from '../../../hooks/transaction-reducer';
-import { Routes } from '../../router-config';
+import Routes from '../../routes';
 import type { PartyStakeLinkings_party_stake_linkings } from './__generated__/PartyStakeLinkings';
 import { truncateMiddle } from '../../../lib/truncate-middle';
 

apps/token/src/routes/staking/disassociate/disassociate-page-container.tsx

@@ -15,3 +15,5 @@ export const DisassociateContainer = () => {
     </StakingWalletsContainer>
   );
 };
+
+export default DisassociateContainer;

apps/token/src/routes/staking/disassociate/disassociate-transaction.tsx

@@ -10,7 +10,7 @@ import type {
   TransactionState,
 } from '../../../hooks/transaction-reducer';
 import { TransactionActionType } from '../../../hooks/transaction-reducer';
-import { Routes } from '../../router-config';
+import Routes from '../../routes';
 
 export const DisassociateTransaction = ({
   amount,

apps/token/src/routes/staking/stake-success.tsx

@@ -1,7 +1,7 @@
 import { Callout, Intent } from '@vegaprotocol/ui-toolkit';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { Routes } from '../router-config';
+import Routes from '../routes';
 import type { StakeAction } from './staking-form';
 import { Actions, RemoveType } from './staking-form';
 

apps/token/src/routes/staking/staking-node.tsx

@@ -135,3 +135,5 @@ export const StakingNode = ({ vegaKey, data }: StakingNodeProps) => {
     </>
   );
 };
+
+export default StakingNodeContainer;

apps/token/src/routes/staking/staking-nodes-container.tsx

@@ -128,3 +128,5 @@ export const StakingNodesContainer = ({
 
   return children({ data });
 };
+
+export default StakingNodesContainer;

apps/token/src/routes/staking/staking.tsx

@@ -39,3 +39,5 @@ export const Staking = ({ data }: { data?: StakingQueryResult }) => {
     </>
   );
 };
+
+export default Staking;

apps/token/src/routes/tranches/tranche.tsx

@@ -11,7 +11,7 @@ import { useEnvironment } from '@vegaprotocol/environment';
 import { BigNumber } from '../../lib/bignumber';
 import { formatNumber } from '../../lib/format-number';
 import { TrancheItem } from '../redemption/tranche-item';
-import { Routes } from '../router-config';
+import Routes from '../routes';
 import { TrancheLabel } from './tranche-label';
 
 const TrancheProgressContents = ({
@@ -102,3 +102,5 @@ export const Tranche = () => {
     </>
   );
 };
+
+export default Tranche;

apps/token/src/routes/tranches/tranches.tsx

@@ -71,3 +71,5 @@ export const Tranches = () => {
     </section>
   );
 };
+
+export default Tranches;

apps/token/src/routes/withdraw/index.tsx

@@ -9,7 +9,7 @@ import { Heading } from '../../components/heading';
 import { SplashLoader } from '../../components/splash-loader';
 import { VegaWalletContainer } from '../../components/vega-wallet-container';
 import type { VegaKeyExtended } from '@vegaprotocol/wallet';
-import { Routes } from '../router-config';
+import Routes from '../routes';
 import type {
   WithdrawPage,
   WithdrawPageVariables,