refactor: renaming

.env.example

@@ -58,4 +58,4 @@ WALLETCONNECT_PROJECT_ID=
 # ETH Stake Widget API for IPFS mode
 WIDGET_API_BASE_PATH_FOR_IPFS=
 
-FAQ_CONTENT_PART_OF_URL=
+FAQ_CONTENT_BASE_PATH=

.gitignore

@@ -44,4 +44,3 @@ yarn-error.log*
 .idea
 
 /public/runtime/
-/public/ethereum-staking-widget/

config/faq.ts

@@ -1,2 +1,9 @@
 // 15 minutes
 export const FAQ_REVALIDATE_SECS = 900;
+
+export const FAQ_STAKE_PAGE_PATH = '/faq-stake-page.md';
+export const FAQ_WRAP_AND_UNWRAP_PAGE_PATH = '/faq-wrap-and-unwrap-page.md';
+export const FAQ_WITHDRAWALS_PAGE_REQUEST_TAB_PATH =
+  '/faq-withdrawals-page-request-tab.md';
+export const FAQ_WITHDRAWALS_PAGE_CLAIM_TAB_PATH =
+  '/faq-withdrawals-page-claim-tab.md';

env-dynamics.mjs

@@ -49,4 +49,4 @@ export const prefillUnsafeElRpcUrls17000 = process.env.PREFILL_UNSAFE_EL_RPC_URL
 export const widgetApiBasePathForIpfs = process.env.WIDGET_API_BASE_PATH_FOR_IPFS;
 
 /** @type string */
-export const faqContentPartOfUrl = process.env.FAQ_CONTENT_PART_OF_URL;
+export const faqContentBasePath = process.env.FAQ_CONTENT_BASE_PATH;

features/stake/stake-faq/stake-faq.tsx

@@ -2,8 +2,9 @@ import React, { FC } from 'react';
 
 import { FaqAccordion, PageFAQ, isPageFAQ } from '@lidofinance/ui-faq';
 
+import { FAQ_STAKE_PAGE_PATH } from 'config';
 import { Section } from 'shared/components';
-import { useFetchFaqOnClientIfETagWereChanged } from 'shared/hooks/use-faq-on-client';
+import { useUpdatableFaq } from 'shared/hooks/use-faq-on-client';
 import { faqAccordionOnLinkClick } from 'utils/faq-matomo';
 
 type StakeFaqProps = {
@@ -13,10 +14,7 @@ type StakeFaqProps = {
 
 export const StakeFaq: FC<StakeFaqProps> = ({ pageFAQ, eTag }) => {
   // This hook actual on IPFS only (see: the `eTag` prop drilling)!
-  const { data: pageFaqIpfsMode } = useFetchFaqOnClientIfETagWereChanged(
-    '/faq-stake-page.md',
-    eTag,
-  );
+  const { data: pageFaqIpfsMode } = useUpdatableFaq(FAQ_STAKE_PAGE_PATH, eTag);
 
   if (!pageFAQ || (!isPageFAQ(pageFAQ) && !pageFaqIpfsMode)) {
     return null;

features/withdrawals/withdrawals-faq/claim-faq.tsx

@@ -2,8 +2,9 @@ import React, { FC } from 'react';
 
 import { FaqAccordion, PageFAQ, isPageFAQ } from '@lidofinance/ui-faq';
 
+import { FAQ_WITHDRAWALS_PAGE_CLAIM_TAB_PATH } from 'config';
 import { Section } from 'shared/components';
-import { useFetchFaqOnClientIfETagWereChanged } from 'shared/hooks/use-faq-on-client';
+import { useUpdatableFaq } from 'shared/hooks/use-faq-on-client';
 import { faqAccordionOnLinkClick } from 'utils/faq-matomo';
 
 type ClaimFaqProps = {
@@ -13,8 +14,8 @@ type ClaimFaqProps = {
 
 export const ClaimFaq: FC<ClaimFaqProps> = ({ pageFAQ, eTag }) => {
   // This hook actual on IPFS only (see: the `eTag` prop drilling)!
-  const { data: pageFaqIpfsMode } = useFetchFaqOnClientIfETagWereChanged(
-    '/faq-withdrawals-page-claim-tab.md',
+  const { data: pageFaqIpfsMode } = useUpdatableFaq(
+    FAQ_WITHDRAWALS_PAGE_CLAIM_TAB_PATH,
     eTag,
   );
 

features/withdrawals/withdrawals-faq/request-faq.tsx

@@ -2,8 +2,9 @@ import React, { FC } from 'react';
 
 import { FaqAccordion, PageFAQ, isPageFAQ } from '@lidofinance/ui-faq';
 
+import { FAQ_WITHDRAWALS_PAGE_REQUEST_TAB_PATH } from 'config';
 import { Section } from 'shared/components';
-import { useFetchFaqOnClientIfETagWereChanged } from 'shared/hooks/use-faq-on-client';
+import { useUpdatableFaq } from 'shared/hooks/use-faq-on-client';
 import { faqAccordionOnLinkClick } from 'utils/faq-matomo';
 // import { ButtonLinkWrap } from './styles';
 
@@ -18,8 +19,8 @@ type RequestFaqProps = {
 
 export const RequestFaq: FC<RequestFaqProps> = ({ pageFAQ, eTag }) => {
   // This hook actual on IPFS only (see: the `eTag` prop drilling)!
-  const { data: pageFaqIpfsMode } = useFetchFaqOnClientIfETagWereChanged(
-    '/faq-withdrawals-page-request-tab.md',
+  const { data: pageFaqIpfsMode } = useUpdatableFaq(
+    FAQ_WITHDRAWALS_PAGE_REQUEST_TAB_PATH,
     eTag,
   );
 

features/wsteth/shared/wrap-faq/wrap-faq.tsx

@@ -2,8 +2,9 @@ import React, { FC } from 'react';
 
 import { FaqAccordion, PageFAQ, isPageFAQ } from '@lidofinance/ui-faq';
 
+import { FAQ_WRAP_AND_UNWRAP_PAGE_PATH } from 'config';
 import { Section } from 'shared/components';
-import { useFetchFaqOnClientIfETagWereChanged } from 'shared/hooks/use-faq-on-client';
+import { useUpdatableFaq } from 'shared/hooks/use-faq-on-client';
 import { faqAccordionOnLinkClick } from 'utils/faq-matomo';
 
 type WrapFaqProps = {
@@ -13,8 +14,8 @@ type WrapFaqProps = {
 
 export const WrapFaq: FC<WrapFaqProps> = ({ pageFAQ, eTag }) => {
   // This hook actual on IPFS only (see: the `eTag` prop drilling)!
-  const { data: pageFaqIpfsMode } = useFetchFaqOnClientIfETagWereChanged(
-    '/faq-wrap-and-unwrap-page.md',
+  const { data: pageFaqIpfsMode } = useUpdatableFaq(
+    FAQ_WRAP_AND_UNWRAP_PAGE_PATH,
     eTag,
   );
 

next.config.mjs

@@ -55,7 +55,7 @@ export const CACHE_CONTROL_PAGES = [
 export const CACHE_CONTROL_VALUE =
   'public, max-age=15, s-max-age=30, stale-if-error=604800, stale-while-revalidate=172800';
 
-export const faqContentPartOfUrl = process.env.FAQ_CONTENT_PART_OF_URL;
+export const faqContentBasePath = process.env.FAQ_CONTENT_BASE_PATH;
 
 const withBundleAnalyzer = NextBundleAnalyzer({
   enabled: analyzeBundle,
@@ -183,6 +183,6 @@ export default withBundleAnalyzer({
     rewardsBackendAPI,
     defaultChain,
     developmentMode,
-    faqContentPartOfUrl,
+    faqContentBasePath,
   },
 });

pages/index.tsx

@@ -1,6 +1,13 @@
 import { GetStaticProps } from 'next';
 
-import { FAQ_REVALIDATE_SECS, dynamics } from 'config';
+import {
+  FAQ_REVALIDATE_SECS,
+  FAQ_STAKE_PAGE_PATH,
+  FAQ_WRAP_AND_UNWRAP_PAGE_PATH,
+  FAQ_WITHDRAWALS_PAGE_REQUEST_TAB_PATH,
+  FAQ_WITHDRAWALS_PAGE_CLAIM_TAB_PATH,
+  dynamics,
+} from 'config';
 import { StakePage, StakePageProps } from 'features/stake';
 import HomePageIpfs, { HomePageIpfsProps } from 'features/ipfs/home-page-ipfs';
 import { getFaqSSR } from 'utilsApi/faq';
@@ -10,26 +17,24 @@ export default dynamics.ipfsMode ? HomePageIpfs : StakePage;
 export const getStaticProps: GetStaticProps<
   StakePageProps | HomePageIpfsProps
 > = async () => {
-  const stakePageFAQPath = '/faq-stake-page.md';
-
   // FAQ for IPFS SPA
   if (process.env.IPFS_MODE) {
     return {
       props: {
-        stakePage: (await getFaqSSR(stakePageFAQPath)) ?? null,
-        wrapPage: (await getFaqSSR('/faq-wrap-and-unwrap-page.md')) ?? null,
+        stakePage: (await getFaqSSR(FAQ_STAKE_PAGE_PATH)) ?? null,
+        wrapPage: (await getFaqSSR(FAQ_WRAP_AND_UNWRAP_PAGE_PATH)) ?? null,
         withdrawalsPageRequest:
-          (await getFaqSSR('/faq-withdrawals-page-request-tab.md')) ?? null,
+          (await getFaqSSR(FAQ_WITHDRAWALS_PAGE_REQUEST_TAB_PATH)) ?? null,
         withdrawalsPageClaim:
-          (await getFaqSSR('/faq-withdrawals-page-claim-tab.md')) ?? null,
+          (await getFaqSSR(FAQ_WITHDRAWALS_PAGE_CLAIM_TAB_PATH)) ?? null,
       },
     };
   }
 
   // FAQ for stake page regular
   return {
     props: {
-      pageFAQ: (await getFaqSSR(stakePageFAQPath))?.faq ?? null,
+      pageFAQ: (await getFaqSSR(FAQ_STAKE_PAGE_PATH))?.faq ?? null,
     },
     revalidate: FAQ_REVALIDATE_SECS,
   };

shared/hooks/use-faq-on-client.ts

@@ -4,12 +4,12 @@ import { isPageFAQ, PageFAQ } from '@lidofinance/ui-faq';
 import { getFaqOnClient } from 'utils/faq';
 import { STRATEGY_CONSTANT } from 'utils/swrStrategies';
 
-export const useFetchFaqOnClientIfETagWereChanged = (
+export const useUpdatableFaq = (
   faqPath: string,
   eTag?: string | null,
 ): SWRResponse<PageFAQ | undefined> => {
   return useLidoSWR(
-    ['swr:useFetchFaqOnClientIfETagWereChanged', faqPath, eTag],
+    ['swr:useUpdatableFaq', faqPath, eTag],
     async () => {
       if (!eTag) {
         return undefined;

utils/faq.ts

@@ -11,7 +11,7 @@ export const fetchFaqOnClient = async (
   );
 
   const resp = await fetcherWithServiceResponse<any>(
-    `${dynamics.faqContentPartOfUrl}/${path}`,
+    `${dynamics.faqContentBasePath}/${path}`,
     {
       method: 'GET',
       headers: {

utilsApi/faq.ts

@@ -9,25 +9,26 @@ export const fetchFaqSSR = async (
   path: string,
 ): Promise<ReturnType<typeof fetcherWithServiceResponse<string>> | null> => {
   console.debug(`[fetchFaqSSR] Started fetching the '${path}' from CMS...`);
-  const cmsPartOfUrl = serverRuntimeConfig.faqContentPartOfUrl;
-
   const resp = await responseTimeExternalMetricWrapper({
-    payload: cmsPartOfUrl,
+    payload: serverRuntimeConfig.faqContentBasePath,
     request: () =>
-      fetcherWithServiceResponse<string>(`${cmsPartOfUrl}/${path}`, {
-        method: 'GET',
-        headers: {
-          'Content-type': 'text/html',
+      fetcherWithServiceResponse<string>(
+        `${serverRuntimeConfig.faqContentBasePath}/${path}`,
+        {
+          method: 'GET',
+          headers: {
+            'Content-type': 'text/html',
+          },
         },
-      }),
+      ),
   });
 
   if (!resp || !resp.data) {
     console.error(`[fetchFaqSSR] Request the '${path}' to CMS failed!`);
     return null;
   }
 
-  console.debug(`[fetchFaqSSR] Fetched the '${path}' from CMS was successes!`);
+  console.debug(`[fetchFaqSSR] Successfully fetched the '${path}' from CMS!`);
   return resp;
 };