New page settings in IPFS.json

IPFS.json

@@ -36,6 +36,14 @@
       "multiChainBanner": [],
       "featureFlags": {
         "ledgerLiveL2": true
+      },
+      "pages": {
+        "/withdrawals": {
+          "shouldDeactivate": true
+        },
+        "/rewards": {
+          "shouldDeactivate": true
+        }
       }
     }
   }

config/external-config/index.ts

@@ -4,4 +4,6 @@ export type {
   Manifest,
   ManifestEntry,
   ExternalConfig,
+  ManifestConfigPage,
 } from './types';
+export { ManifestConfigPageList, ManifestConfigPageEnum } from './types';

config/external-config/types.ts

@@ -16,8 +16,40 @@ export type ManifestConfig = {
   featureFlags: {
     ledgerLiveL2?: boolean;
   };
+  pages?: {
+    [page in ManifestConfigPage]?: {
+      shouldDeactivate?: boolean;
+      sections?: [string, ...string[]];
+    };
+  };
 };
 
+export type ManifestConfigPage =
+  | '/'
+  | '/wrap'
+  | '/withdrawals'
+  | '/rewards'
+  | '/settings'
+  | '/referral';
+
+export const ManifestConfigPageList = new Set<ManifestConfigPage>([
+  '/',
+  '/wrap',
+  '/withdrawals',
+  '/rewards',
+  '/settings',
+  '/referral',
+]);
+
+export enum ManifestConfigPageEnum {
+  Stake = '/',
+  Wrap = '/wrap',
+  Withdrawals = '/withdrawals',
+  Rewards = '/rewards',
+  Settings = '/settings',
+  Referral = '/referral',
+}
+
 export type ExternalConfig = Omit<ManifestEntry, 'config'> &
   ManifestConfig & {
     fetchMeta: SWRResponse<ManifestEntry>;

config/external-config/utils.ts

@@ -1,5 +1,12 @@
 import { useMemo } from 'react';
-import type { Manifest, ManifestEntry } from './types';
+import {
+  Manifest,
+  ManifestConfig,
+  ManifestConfigPage,
+  ManifestConfigPageEnum,
+  ManifestConfigPageList,
+  ManifestEntry,
+} from './types';
 import { getDexConfig } from 'features/withdrawals/request/withdrawal-rates';
 
 import FallbackLocalManifest from 'IPFS.json' assert { type: 'json' };
@@ -51,6 +58,27 @@ const isFeatureFlagsValid = (config: object) => {
   return !(typeof config.featureFlags !== 'object');
 };
 
+const isPagesValid = (config: object) => {
+  if (!('pages' in config)) {
+    return true;
+  }
+
+  const pages = config.pages as ManifestConfig['pages'];
+  if (pages && typeof pages === 'object') {
+    const pagesKeysList = Object.keys(pages) as ManifestConfigPage[];
+    if (
+      !pagesKeysList.every((pagesKey) => ManifestConfigPageList.has(pagesKey))
+    ) {
+      return false;
+    }
+
+    // INFO: exclude possible issue when stack interface can be deactivated
+    return !pages[ManifestConfigPageEnum.Stake]?.shouldDeactivate;
+  }
+
+  return false;
+};
+
 export const isManifestEntryValid = (
   entry?: unknown,
 ): entry is ManifestEntry => {
@@ -65,7 +93,12 @@ export const isManifestEntryValid = (
   ) {
     const config = entry.config;
 
-    return [isEnabledDexesValid, isMultiChainBannerValid, isFeatureFlagsValid]
+    return [
+      isEnabledDexesValid,
+      isMultiChainBannerValid,
+      isFeatureFlagsValid,
+      isPagesValid,
+    ]
       .map((validator) => validator(config))
       .every((isValid) => isValid);
   }
@@ -81,6 +114,7 @@ export const getBackwardCompatibleConfig = (
     ),
     featureFlags: { ...(config.featureFlags ?? {}) },
     multiChainBanner: config.multiChainBanner ?? [],
+    pages: config.pages ?? ({} as ManifestConfig['pages']),
   };
 };
 

pages/index.tsx

@@ -4,6 +4,6 @@ import { HomePageIpfs } from 'features/ipfs';
 
 import { getDefaultStaticProps } from 'utilsApi/get-default-static-props';
 
-export const getStaticProps = getDefaultStaticProps();
+export const getStaticProps = getDefaultStaticProps('/');
 
 export default config.ipfsMode ? HomePageIpfs : StakePage;

pages/referral.tsx

@@ -11,6 +11,6 @@ const Referral: FC = () => {
     </Layout>
   );
 };
-export const getStaticProps = getDefaultStaticProps();
+export const getStaticProps = getDefaultStaticProps('/referral');
 
 export default Referral;

pages/rewards.tsx

@@ -32,6 +32,6 @@ const Rewards: FC = () => {
   );
 };
 
-export const getStaticProps = getDefaultStaticProps();
+export const getStaticProps = getDefaultStaticProps('/rewards');
 
 export default Rewards;

pages/settings.tsx

@@ -13,7 +13,7 @@ const Settings: FC = () => {
   );
 };
 
-export const getStaticProps = getDefaultStaticProps(async () => {
+export const getStaticProps = getDefaultStaticProps('/settings', async () => {
   if (!config.ipfsMode) return { notFound: true };
 
   return { props: {} };

pages/withdrawals/[mode].tsx

@@ -41,7 +41,7 @@ export const getStaticPaths: GetStaticPaths<
 export const getStaticProps = getDefaultStaticProps<
   WithdrawalsModePageParams,
   WithdrawalsModePageParams
->(async ({ params }) => {
+>('/withdrawals', async ({ params }) => {
   if (!params?.mode) return { notFound: true };
   return { props: { mode: params.mode } };
 });

pages/wrap/[[...mode]].tsx

@@ -44,7 +44,7 @@ export const getStaticPaths: GetStaticPaths<WrapModePageParams> = async () => {
 export const getStaticProps = getDefaultStaticProps<
   WrapModePageProps,
   WrapModePageParams
->(async ({ params }) => {
+>('/wrap', async ({ params }) => {
   const mode = params?.mode;
   if (!mode) return { props: { mode: 'wrap' } };
   if (mode[0] === 'unwrap') return { props: { mode: 'unwrap' } };

providers/external-forbidden-route.tsx

@@ -0,0 +1,40 @@
+import { useState, useCallback, useMemo, ReactNode } from 'react';
+import { useRouter } from 'next/router';
+
+import { useRouterPath } from 'shared/hooks/use-router-path';
+import { useConfig } from 'config';
+import { ManifestConfigPage } from 'config/external-config';
+import { HOME_PATH } from 'consts/urls';
+
+import { LayoutEffectSsrDelayed } from 'shared/components/layout-effect-ssr-delayed';
+
+export const ExternalForbiddenRouteProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [showContent, setShowContent] = useState(true);
+  const router = useRouter();
+  const path = useRouterPath();
+  const { pages } = useConfig().externalConfig;
+
+  const checkPathEffect = useCallback(() => {
+    if (pages) {
+      const paths = Object.keys(pages) as ManifestConfigPage[];
+      const forbiddenPath = paths.find((pathKey) => path.includes(pathKey));
+      if (forbiddenPath && pages[forbiddenPath]?.shouldDeactivate) {
+        setShowContent(false);
+        void router.push(HOME_PATH).finally(() => setShowContent(true));
+      }
+    }
+  }, [pages, path, router]);
+
+  const effectDeps = useMemo(() => [pages, path], [pages, path]);
+
+  return (
+    <>
+      <LayoutEffectSsrDelayed effect={checkPathEffect} deps={effectDeps} />
+      {showContent && children}
+    </>
+  );
+};

providers/index.tsx

@@ -10,6 +10,7 @@ import { AppFlagProvider } from './app-flag';
 import { IPFSInfoBoxStatusesProvider } from './ipfs-info-box-statuses';
 import { InpageNavigationProvider } from './inpage-navigation';
 import { ModalProvider } from './modal-provider';
+import { ExternalForbiddenRouteProvider } from './external-forbidden-route';
 
 type ProvidersProps = {
   prefetchedManifest?: unknown;
@@ -26,7 +27,11 @@ export const Providers: FC<PropsWithChildren<ProvidersProps>> = ({
         <Web3Provider>
           <IPFSInfoBoxStatusesProvider>
             <InpageNavigationProvider>
-              <ModalProvider>{children}</ModalProvider>
+              <ModalProvider>
+                <ExternalForbiddenRouteProvider>
+                  {children}
+                </ExternalForbiddenRouteProvider>
+              </ModalProvider>
             </InpageNavigationProvider>
           </IPFSInfoBoxStatusesProvider>
         </Web3Provider>

shared/components/layout/header/components/navigation/navigation.tsx

@@ -1,4 +1,4 @@
-import { FC, memo } from 'react';
+import { FC, memo, useMemo } from 'react';
 import { Wallet, Stake, Wrap, Withdraw } from '@lidofinance/lido-ui';
 
 import {
@@ -9,12 +9,23 @@ import {
   REWARDS_PATH,
   getPathWithoutFirstSlash,
 } from 'consts/urls';
+import { useConfig } from 'config';
+import { ManifestConfigPage } from 'config/external-config';
 import { LocalLink } from 'shared/components/local-link';
 import { useRouterPath } from 'shared/hooks/use-router-path';
 
 import { Nav, NavLink } from './styles';
 
-const routes = [
+type PageRoute = {
+  name: string;
+  path: string;
+  icon: React.ReactNode;
+  exact?: boolean;
+  full_path?: string;
+  subPaths?: string[];
+};
+
+const routes: PageRoute[] = [
   {
     name: 'Stake',
     path: HOME_PATH,
@@ -39,8 +50,24 @@ const routes = [
     icon: <Wallet data-testid="navRewards" />,
   },
 ];
+
 export const Navigation: FC = memo(() => {
   const pathname = useRouterPath();
+  const {
+    externalConfig: { pages },
+  } = useConfig();
+
+  const availableRoutes = useMemo(() => {
+    if (!pages) return routes;
+
+    const paths = Object.keys(pages) as ManifestConfigPage[];
+    return routes.filter((route) => {
+      const path = paths.find((path) => route.path.includes(path));
+      if (!path) return true;
+      return !pages[path]?.shouldDeactivate;
+    });
+  }, [pages]);
+
   let pathnameWithoutQuery = pathname.split('?')[0];
   if (pathnameWithoutQuery[pathnameWithoutQuery.length - 1] === '/') {
     // Remove last '/'
@@ -49,7 +76,7 @@ export const Navigation: FC = memo(() => {
 
   return (
     <Nav>
-      {routes.map(({ name, path, subPaths, icon }) => {
+      {availableRoutes.map(({ name, path, subPaths, icon }) => {
         const isActive =
           pathnameWithoutQuery === getPathWithoutFirstSlash(path) ||
           (path.length > 1 && pathnameWithoutQuery.startsWith(path)) ||

shared/components/layout/layout.tsx

@@ -1,11 +1,9 @@
 import { ReactNode, FC, PropsWithChildren } from 'react';
-
 import { ContainerProps } from '@lidofinance/lido-ui';
 
 import { config } from 'config';
 
 import { IPFSInfoBox } from 'features/ipfs/ipfs-info-box';
-
 import { Header } from './header/header';
 import { Footer } from './footer/footer';
 import { Main } from './main/main';