Merge pull request #47 from lidofinance/feature/si-632-add-custom-ser…

…ver-with-proper-cache-control-on-staking

Add custom server

next.config.mjs

@@ -1,4 +1,6 @@
 import NextBundleAnalyzer from '@next/bundle-analyzer';
+import { createSecureHeaders } from 'next-secure-headers';
+import createCSP from './scripts/create-csp.mjs';
 import buildDynamics from './scripts/build-dynamics.mjs';
 
 buildDynamics();
@@ -47,6 +49,23 @@ const rateLimitTimeFrame = process.env.RATE_LIMIT_TIME_FRAME || 60; // 1 minute;
 const rewardsBackendAPI = process.env.REWARDS_BACKEND;
 const defaultChain = process.env.DEFAULT_CHAIN;
 
+// cache control
+export const CACHE_CONTROL_HEADER = 'x-cache-control';
+export const CACHE_CONTROL_PAGES = [
+  '/manifest.json',
+  '/favicon:size*',
+  '/',
+  '/wrap',
+  '/wrap/unwrap',
+  '/rewards',
+  '/referral',
+  '/withdrawals/request',
+  '/withdrawals/claim',
+  '/runtime/window-env.js',
+];
+export const CACHE_CONTROL_VALUE =
+  'public, max-age=15, s-max-age=30, stale-if-error=604800, stale-while-revalidate=172800';
+
 const withBundleAnalyzer = NextBundleAnalyzer({
   enabled: analyzeBundle,
 });
@@ -85,15 +104,19 @@ export default withBundleAnalyzer({
   },
   async headers() {
     return [
-      {
-        // required for gnosis save apps
-        source: '/manifest.json',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }],
-      },
       {
         // Apply these headers to all routes in your application.
         source: '/(.*)',
         headers: [
+          ...createSecureHeaders({
+            contentSecurityPolicy: createCSP(
+              cspTrustedHosts,
+              cspReportUri,
+              cspReportOnly,
+            ),
+            frameGuard: false,
+            referrerPolicy: 'same-origin',
+          }),
           {
             key: 'X-DNS-Prefetch-Control',
             value: 'on',
@@ -102,16 +125,17 @@ export default withBundleAnalyzer({
             key: 'Strict-Transport-Security',
             value: 'max-age=63072000; includeSubDomains; preload',
           },
-          {
-            key: 'X-Content-Type-Options',
-            value: 'nosniff',
-          },
-          {
-            key: 'Referrer-Policy',
-            value: 'same-origin',
-          },
         ],
       },
+      {
+        // required for gnosis save apps
+        source: '/manifest.json',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }],
+      },
+      ...CACHE_CONTROL_PAGES.map((page) => ({
+        source: page,
+        headers: [{ key: CACHE_CONTROL_HEADER, value: CACHE_CONTROL_VALUE }],
+      })),
     ];
   },
   serverRuntimeConfig: {

package.json

@@ -4,10 +4,10 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev",
+    "dev": "node server.mjs",
     "build": "next build",
     "build:analyze": "ANALYZE_BUNDLE=true next build",
-    "start": "NODE_OPTIONS='-r next-logger' next start",
+    "start": "NODE_OPTIONS='-r next-logger' NODE_ENV=production node scripts/server.mjs",
     "lint": "eslint --ext ts,tsx,js,mjs .",
     "lint:fix": "yarn lint --fix",
     "types": "tsc --noEmit",
@@ -37,7 +37,6 @@
     "@lidofinance/lido-ui": "^3.8.1",
     "@lidofinance/lido-ui-blocks": "2.10.2",
     "@lidofinance/next-api-wrapper": "^0.28.0",
-    "@lidofinance/next-cache-files-middleware": "^0.28.0",
     "@lidofinance/next-ip-rate-limit": "^0.28.0",
     "@lidofinance/next-pages": "^0.28.0",
     "@lidofinance/rpc": "^0.28.0",

pages/_app.tsx

@@ -10,7 +10,6 @@ import 'nprogress/nprogress.css';
 
 import Providers from 'providers';
 import { nprogress, COOKIES_ALLOWED_FULL_KEY } from 'utils';
-import { withCsp } from 'utilsApi/withCsp';
 import { BackgroundGradient } from 'shared/components/background-gradient/background-gradient';
 
 // Migrations old theme cookies to new cross domain cookies
@@ -47,6 +46,4 @@ const AppWrapper = (props: AppProps): JSX.Element => {
   );
 };
 
-export default process.env.NODE_ENV === 'development'
-  ? AppWrapper
-  : withCsp(AppWrapper);
+export default AppWrapper;

pages/index.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import { Wallet, StakeForm, LidoStats, StakeFaq } from 'features/home';
 import { Layout } from 'shared/components';
@@ -26,7 +25,3 @@ const Home: FC = () => (
 );
 
 export default Home;
-
-export const getServerSideProps: GetServerSideProps = async () => {
-  return { props: {} };
-};

pages/rewards.tsx

@@ -30,7 +30,3 @@ const Rewards: FC = () => {
 };
 
 export default Rewards;
-
-export const getServerSideProps = async () => {
-  return { props: {} };
-};

pages/withdrawals/[mode].tsx

@@ -0,0 +1,54 @@
+import { FC } from 'react';
+import { GetStaticPaths, GetStaticProps } from 'next';
+import Head from 'next/head';
+import { useWeb3 } from 'reef-knot/web3-react';
+
+import { Layout } from 'shared/components';
+import NoSSRWrapper from 'shared/components/no-ssr-wrapper';
+
+import { WithdrawalsTabs } from 'features/withdrawals';
+import { WithdrawalsProvider } from 'features/withdrawals/contexts/withdrawals-context';
+
+const Withdrawals: FC<WithdrawalsModePageParams> = ({ mode }) => {
+  const { account, chainId } = useWeb3();
+
+  return (
+    <Layout
+      title="Withdrawals"
+      subtitle="Request stETH/wstETH withdrawal and claim ETH"
+    >
+      <Head>
+        <title>Withdrawals | Lido</title>
+      </Head>
+      <WithdrawalsProvider mode={mode}>
+        <NoSSRWrapper>
+          {/* In order to simplify side effects of switching wallets we remount the whole widget, resetting all internal state */}
+          <WithdrawalsTabs key={`${account ?? '_'}${chainId ?? '1'}`} />
+        </NoSSRWrapper>
+      </WithdrawalsProvider>
+    </Layout>
+  );
+};
+
+export default Withdrawals;
+
+type WithdrawalsModePageParams = {
+  mode: 'request' | 'claim';
+};
+
+export const getStaticPaths: GetStaticPaths<
+  WithdrawalsModePageParams
+> = async () => {
+  return {
+    paths: [{ params: { mode: 'request' } }, { params: { mode: 'claim' } }],
+    fallback: false, // return 404 on non match
+  };
+};
+
+export const getStaticProps: GetStaticProps<
+  WithdrawalsModePageParams,
+  WithdrawalsModePageParams
+> = async ({ params }) => {
+  if (!params?.mode) return { notFound: true };
+  return { props: { mode: params.mode } };
+};

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

@@ -1,22 +1,10 @@
-import { useEffect } from 'react';
-import { GetServerSideProps } from 'next';
+import { FC } from 'react';
+import { GetStaticPaths, GetStaticProps } from 'next';
 import Head from 'next/head';
-import { useRouter } from 'next/router';
 import { Layout } from 'shared/components';
-import { useSafeQueryString } from 'shared/hooks/useSafeQueryString';
 import { WrapUnwrapTabs } from 'features/wsteth/wrap-unwrap-tabs';
 
-const WrapPage: React.FC<WrapModePageProps> = ({ mode }) => {
-  const { isReady, query, replace } = useRouter();
-  const queryString = useSafeQueryString();
-
-  // legacy routing support
-  useEffect(() => {
-    if (isReady && query.mode === 'unwrap') {
-      void replace(`/wrap/unwrap${queryString}`);
-    }
-  }, [isReady, query.mode, queryString, replace]);
-
+const WrapPage: FC<WrapModePageProps> = ({ mode }) => {
   return (
     <Layout
       title="Wrap & Unwrap"
@@ -38,16 +26,24 @@ type WrapModePageProps = {
 };
 
 type WrapModePageParams = {
-  mode: string[] | undefined;
+  mode: ['unwrap'] | undefined;
 };
 
-export const getServerSideProps: GetServerSideProps<
+export const getStaticPaths: GetStaticPaths<WrapModePageParams> = async () => {
+  return {
+    paths: [{ params: { mode: undefined } }, { params: { mode: ['unwrap'] } }],
+    fallback: false, // return 404 on non match
+  };
+};
+
+// we need [[...]] pattern for / and /unwrap
+export const getStaticProps: GetStaticProps<
   WrapModePageProps,
   WrapModePageParams
 > = async ({ params }) => {
   const mode = params?.mode;
   if (!mode) return { props: { mode: 'wrap' } };
-  if (mode.length > 1) return { notFound: true };
   if (mode[0] === 'unwrap') return { props: { mode: 'unwrap' } };
+
   return { notFound: true };
 };